Skip to content
Snippets Groups Projects
Commit 6b2c5950 authored by druid's avatar druid
Browse files

style person card as one link together with header People

parent f5118af5
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 @ 6b2c5950
...@@ -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 @ 6b2c5950
...@@ -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 @ 6b2c5950
...@@ -229,7 +229,6 @@ ...@@ -229,7 +229,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