hy-crisis-banner.tsx

import {Component, Host, h, Prop} from '@stencil/core';

@Component({
  tag: 'hy-crisis-banner',
  styleUrl: 'hy-crisis-banner.scss',
  shadow: true,
})
export class HyCrisisBanner {
  @Prop() bannerTitle: string;
  @Prop() bannerDescription?: string;
  @Prop() linkTitle?: string;
  @Prop() linkUrl?: string;

  render() {
    return (
      <Host class="hy-crisis-banner" role="alert">
        <div class="hy-crisis-banner__container">
          <div class="hy-crisis-banner__indicator">
            <hy-icon class={'hy-crisis-banner__indicator-icon'} icon={'hy-icon-alert'} />
          </div>
          <div class="hy-crisis-banner__content-wrapper">
            <div class="hy-crisis-banner__content">
              <h3 class="hy-crisis-banner__title">{this.bannerTitle}</h3>
              {this.bannerDescription && (
                <div class="hy-crisis-banner__description" innerHTML={this.bannerDescription}></div>
              )}
            </div>
            {this.linkUrl && (
              <a class="hy-crisis-banner__link" href={this.linkUrl}>
                {this.linkTitle}
                <hy-icon class={'hy-crisis-banner__link-icon'} icon={'hy-icon-arrow-to-right'} />
              </a>
            )}
          </div>
        </div>
      </Host>
    );
  }
}