standalone-link.tsx

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

@Component({
  tag: 'hy-standalone-link',
  styleUrl: 'standalone-link.scss',
  shadow: false,
})
export class StandaloneLink implements ComponentInterface {
  @Prop() linkContent: string = '';
  @Prop() url?: string;
  @Prop() ariaLabel?: string;
  @Prop() isExternal: boolean = false;
  @Prop() isEnabled: boolean = true;

  render() {
    const containerClassAttributes = ["hy-standalone-link-container"].join(" ");
    const classAttributes = ["hy-standalone-link",
      this.isEnabled ? "enabled" : "disabled"
    ];

    const textClassAttributes = ["hy-standalone-link__text"].join(" ");
    const iconClassAttributes = [
      "hy-standalone-link__link-icon",
      this.isExternal ? "hy-standalone-link__link-icon--external" : null
    ].join(" ");

    const target = this.isExternal ? "_blank" : "_self";
    return (
      <span class={containerClassAttributes}>
        <a
          aria-label={this.ariaLabel}
          class={classAttributes.join(" ")}
          href={this.url}
          target={target}
        >
          <span class={textClassAttributes}>
            {this.linkContent}
          </span>
          <span class={iconClassAttributes}>
            <hy-icon icon={'hy-icon-arrow-right'} size={16} />
          </span>
        </a>
      </span>
    );
  }
}