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 @@ ...@@ -4,6 +4,11 @@
.hy-person-card-container { .hy-person-card-container {
font-family: var(--main-font-family); font-family: var(--main-font-family);
margin-bottom: 28px;
@include breakpoint($wide) {
margin-bottom: 32px;
}
&__category-title { &__category-title {
@include font-size(12px, 14px); @include font-size(12px, 14px);
...@@ -19,17 +24,16 @@ ...@@ -19,17 +24,16 @@
@include font-size(14px, 18px); //>1920 desktop @include font-size(14px, 18px); //>1920 desktop
} }
} }
&__link {
text-decoration: none;
}
} }
.hy-person-card { .hy-person-card {
display: flex; display: flex;
flex-direction: row;
font-family: var(--main-font-family); font-family: var(--main-font-family);
margin-bottom: 28px;
text-decoration: none;
@include breakpoint($wide) {
margin-bottom: 32px;
}
&__image-container { &__image-container {
margin-right: 12px; margin-right: 12px;
......
src/components/hy-person-card/hy-person-card.tsx
+ 47
− 44
View file @ b0cff9f5
...@@ -37,55 +37,58 @@ export class HyPersonCard { ...@@ -37,55 +37,58 @@ export class HyPersonCard {
} }
render() { render() {
const classLinkAttributes = ['hy-person-card-container__link', this.variant].join(' ');
const classAttributes = ['hy-person-card', this.variant].join(' '); const classAttributes = ['hy-person-card', this.variant].join(' ');
const target = this.isExternal ? '_blank' : '_self'; const target = this.isExternal ? '_blank' : '_self';
return ( return (
<article class="hy-person-card-container"> <article class="hy-person-card-container">
{this.variant == PersonCardVariants.default && ( <a class={classLinkAttributes} href={this.url} target={target} aria-label={this.scLabel}>
<div class="hy-person-card-container__category-title">{this.categoryTitle}</div> {this.categoryTitle && 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"> <div class={classAttributes}>
{this.imageUrl ? ( <div class="hy-person-card__image-container">
<div class="hy-person-card__image-container__image"> {this.imageUrl ? (
<img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} /> <div class="hy-person-card__image-container__image">
</div> <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 class="hy-person-card__image-container__no-image">
</div> <div class="hy-person-card__image-container__no-image__initials">{this._initials}</div>
)} </div>
</div> )}
<div class="hy-person-card__info-container"> </div>
<div class="hy-person-card__info-container__full-name">{this._fullName}</div> <div class="hy-person-card__info-container">
{this.positionTitle && ( <div class="hy-person-card__info-container__full-name">{this._fullName}</div>
<div class="hy-person-card__info-container__position-title">{this.positionTitle}</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.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.field && this.variant == PersonCardVariants.default && (
)} <div class="hy-person-card__info-container__field">{this.field}</div>
{this.email && )}
this.variant == PersonCardVariants.default && [ {this.email &&
<div class="hy-person-card__info-container__email-container"> this.variant == PersonCardVariants.default && [
<span class="hy-person-card__info-container__email__icon"> <div class="hy-person-card__info-container__email-container">
<hy-icon icon={'hy-icon-email'} size={16} /> <span class="hy-person-card__info-container__email__icon">
</span> <hy-icon icon={'hy-icon-email'} size={16} />
<span class="hy-person-card__info-container__email">{this.email}</span> </span>
</div>, <span class="hy-person-card__info-container__email">{this.email}</span>
]} </div>,
{this.phone && ]}
this.variant == PersonCardVariants.default && [ {this.phone &&
<div class="hy-person-card__info-container__phone-container"> this.variant == PersonCardVariants.default && [
<span class="hy-person-card__info-container__phone__icon"> <div class="hy-person-card__info-container__phone-container">
<hy-icon icon={'hy-icon-phone'} size={14} /> <span class="hy-person-card__info-container__phone__icon">
</span> <hy-icon icon={'hy-icon-phone'} size={14} />
<span class="hy-person-card__info-container__phone">{this.phone}</span> </span>
</div>, <span class="hy-person-card__info-container__phone">{this.phone}</span>
]} </div>,
]}
</div>
</div> </div>
</a> </a>
</article> </article>
......
src/index.html
+ 0
− 1
View file @ b0cff9f5
...@@ -248,7 +248,6 @@ ...@@ -248,7 +248,6 @@
> >
</hy-person-card> </hy-person-card>
<hy-person-card <hy-person-card
category-title="People"
first-name="Paula" first-name="Paula"
last-name="Elomaa" last-name="Elomaa"
url="https://www.helsinki.fi/sv/people/people-finder/person-by-id/9038938" 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