Skip to content
Snippets Groups Projects
Commit b0cff9f5 authored by Tuukka Turu's avatar Tuukka Turu
Browse files

Merge branch 'NXSTAGE-1139-search-person-card-fixes' into 'development' 

style person card as one link together with header People

See merge request julkiset-sivut/design-system-lib!102
parents 0adcc171 6b2c5950
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/hy-person-card/hy-person-card.scss
+ 10
− 6
View file @ b0cff9f5
......@@ -4,6 +4,11 @@
.hy-person-card-container {
font-family: var(--main-font-family);
margin-bottom: 28px;
@include breakpoint($wide) {
margin-bottom: 32px;
}
&__category-title {
@include font-size(12px, 14px);
......@@ -19,17 +24,16 @@
@include font-size(14px, 18px); //>1920 desktop
}
}
&__link {
text-decoration: none;
}
}
.hy-person-card {
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
margin-bottom: 28px;
text-decoration: none;
@include breakpoint($wide) {
margin-bottom: 32px;
}
&__image-container {
margin-right: 12px;
......
src/components/hy-person-card/hy-person-card.tsx
+ 47
− 44
View file @ b0cff9f5
......@@ -37,55 +37,58 @@ export class HyPersonCard {
}
render() {
const classLinkAttributes = ['hy-person-card-container__link', this.variant].join(' ');
const classAttributes = ['hy-person-card', this.variant].join(' ');
const target = this.isExternal ? '_blank' : '_self';
return (
<article class="hy-person-card-container">
{this.variant == PersonCardVariants.default && (
<div class="hy-person-card-container__category-title">{this.categoryTitle}</div>
)}
<a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
<div class="hy-person-card__image-container">
{this.imageUrl ? (
<div class="hy-person-card__image-container__image">
<img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
</div>
) : (
<div class="hy-person-card__image-container__no-image">
<div class="hy-person-card__image-container__no-image__initials">{this._initials}</div>
</div>
)}
</div>
<div class="hy-person-card__info-container">
<div class="hy-person-card__info-container__full-name">{this._fullName}</div>
{this.positionTitle && (
<div class="hy-person-card__info-container__position-title">{this.positionTitle}</div>
)}
{this.department && this.variant == PersonCardVariants.default && (
<div class="hy-person-card__info-container__department">{this.department}</div>
)}
{this.field && this.variant == PersonCardVariants.default && (
<div class="hy-person-card__info-container__field">{this.field}</div>
)}
{this.email &&
this.variant == PersonCardVariants.default && [
<div class="hy-person-card__info-container__email-container">
<span class="hy-person-card__info-container__email__icon">
<hy-icon icon={'hy-icon-email'} size={16} />
</span>
<span class="hy-person-card__info-container__email">{this.email}</span>
</div>,
]}
{this.phone &&
this.variant == PersonCardVariants.default && [
<div class="hy-person-card__info-container__phone-container">
<span class="hy-person-card__info-container__phone__icon">
<hy-icon icon={'hy-icon-phone'} size={14} />
</span>
<span class="hy-person-card__info-container__phone">{this.phone}</span>
</div>,
]}
<a class={classLinkAttributes} href={this.url} target={target} aria-label={this.scLabel}>
{this.categoryTitle && this.variant == PersonCardVariants.default && (
<div class="hy-person-card-container__category-title">{this.categoryTitle}</div>
)}
<div class={classAttributes}>
<div class="hy-person-card__image-container">
{this.imageUrl ? (
<div class="hy-person-card__image-container__image">
<img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
</div>
) : (
<div class="hy-person-card__image-container__no-image">
<div class="hy-person-card__image-container__no-image__initials">{this._initials}</div>
</div>
)}
</div>
<div class="hy-person-card__info-container">
<div class="hy-person-card__info-container__full-name">{this._fullName}</div>
{this.positionTitle && (
<div class="hy-person-card__info-container__position-title">{this.positionTitle}</div>
)}
{this.department && this.variant == PersonCardVariants.default && (
<div class="hy-person-card__info-container__department">{this.department}</div>
)}
{this.field && this.variant == PersonCardVariants.default && (
<div class="hy-person-card__info-container__field">{this.field}</div>
)}
{this.email &&
this.variant == PersonCardVariants.default && [
<div class="hy-person-card__info-container__email-container">
<span class="hy-person-card__info-container__email__icon">
<hy-icon icon={'hy-icon-email'} size={16} />
</span>
<span class="hy-person-card__info-container__email">{this.email}</span>
</div>,
]}
{this.phone &&
this.variant == PersonCardVariants.default && [
<div class="hy-person-card__info-container__phone-container">
<span class="hy-person-card__info-container__phone__icon">
<hy-icon icon={'hy-icon-phone'} size={14} />
</span>
<span class="hy-person-card__info-container__phone">{this.phone}</span>
</div>,
]}
</div>
</div>
</a>
</article>
......
src/index.html
+ 0
− 1
View file @ b0cff9f5
......@@ -248,7 +248,6 @@
>
</hy-person-card>
<hy-person-card
category-title="People"
first-name="Paula"
last-name="Elomaa"
url="https://www.helsinki.fi/sv/people/people-finder/person-by-id/9038938"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment