hy-person-card.tsx

import {Component, h, Prop} from '@stencil/core';
import {PersonCardVariants} from '../../utils/utils';

@Component({
  tag: 'hy-person-card',
  styleUrl: 'hy-person-card.scss',
  shadow: false,
})
export class HyPersonCard {
  @Prop() variant: PersonCardVariants = PersonCardVariants.default;
  @Prop() categoryTitle?: string;
  @Prop() imageUrl?: string;
  @Prop() imageAlt?: string;
  @Prop() firstName?: string;
  @Prop() lastName?: string;
  @Prop() url?: string;
  @Prop() isExternal: boolean = false;
  @Prop() scLabel?: string;
  @Prop() positionTitle?: string;
  @Prop() department?: string;
  @Prop() field?: string;
  @Prop() email?: string;
  @Prop() phone?: string;
  private _fullName: string;
  private _initials: string;

  componentWillLoad() {
    this._fullName = this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : '';
    this._initials =
      this.imageUrl && this.firstName && this.lastName ? '' : `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`;
    if (!this.imageAlt) {
      this.imageAlt = this._fullName;
    }
    if (!this.scLabel) {
      this.scLabel = 'Link to the person profile';
    }
  }

  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">
        <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>
    );
  }
}