standalone-link.tsx

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

@Component({
  tag: 'hy-standalone-link',
  styleUrl: 'standalone-link.scss',
  shadow: true,
})
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>
      );
  }

}