@hashicorp/design-system-components 0.11.1 → 0.12.1

package/addon/components/hds/link-to/cta.hbs

@@ -1,51 +0,0 @@
-{{!
-//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
-//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
-//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
-//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
-//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
-//
-// Notice: in this component we're using directly the styles from the `Hds::Button` component
-// using the `hds-button` class names (and adding a specialized class for the "cta", see below)
-// If you need to change the styling of the `Button` component, remember that this will impact also
-// this component too.
-// If instead you need to change only the styling of the `CTA` component, you can do it
-// in the CSS file using the specialized class declared there.
-// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
-// the least worst option we could find to solve the problem of sharing the exact same style of the
-// `Button (primary)` with other components.
-}}
-
-<LinkTo
-  class={{this.classNames}}
-  @current-when={{@current-when}}
-  @models={{hds-link-to-models @model @models}}
-  @query={{hds-link-to-query @query}}
-  @replace={{@replace}}
-  @route={{this.route}}
-  ...attributes
-  {{did-insert this.didInsert}}
-  {{on-key "Space" this.onKeySpace}}
->
-  {{#if this.icon}}
-    {{#if (eq this.iconPosition "leading")}}
-      <div class="hds-button__icon">
-        <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-      </div>
-      <div class="hds-button__text">
-        {{this.text}}
-      </div>
-    {{else}}
-      <div class="hds-button__text">
-        {{this.text}}
-      </div>
-      <div class="hds-button__icon">
-        <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-      </div>
-    {{/if}}
-  {{else}}
-    <div class="hds-button__text">
-      {{this.text}}
-    </div>
-  {{/if}}
-</LinkTo>

package/addon/components/hds/link-to/cta.js

@@ -1,165 +0,0 @@
-//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
-//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
-//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
-//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
-//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
-//
-// Notice: in this component we're using directly the styles from the `Hds::Button` component
-// using the `hds-button` class names (and adding a specialized class for the "cta", see below)
-// If you need to change the styling of the `Button` component, remember that this will impact also
-// this component too.
-// If instead you need to change only the styling of the `CTA` component, you can do it
-// in the CSS file using the specialized class declared there.
-// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
-// the least worst option we could find to solve the problem of sharing the exact same style of the
-// `Button (primary)` with other components.
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-import { action } from '@ember/object';
-
-export const DEFAULT_SIZE = 'medium';
-export const DEFAULT_ICONPOSITION = 'leading';
-export const SIZES = ['small', 'medium', 'large'];
-export const ICONPOSITIONS = ['leading', 'trailing'];
-
-export default class HdsLinkToCtaComponent extends Component {
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the component. If no text value is defined an error will be thrown.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::LinkTo::Cta" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param size
-   * @type {string}
-   * @default medium
-   * @description The size of the component; acceptable values are `small`, `medium`, and `large`
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::LinkTo::Cta" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * @param icon
-   * @type {string}
-   * @default null
-   * @description The name of the icon to be used.
-   */
-  get icon() {
-    return this.args.icon ?? null;
-  }
-
-  /**
-   * @param iconPosition
-   * @type {string}
-   * @default leading
-   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
-   */
-  get iconPosition() {
-    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;
-
-    assert(
-      `@iconPosition for "Hds::LinkTo::Cta" must be one of the following: ${ICONPOSITIONS.join(
-        ', '
-      )}; received: ${iconPosition}`,
-      ICONPOSITIONS.includes(iconPosition)
-    );
-
-    return iconPosition;
-  }
-
-  /**
-   * @param iconSize
-   * @type {string}
-   * @default 16
-   * @description ensures that the correct icon size is used. Automatically calculated.
-   */
-  get iconSize() {
-    if (this.args.size === 'large') {
-      return '24';
-    } else {
-      return '16';
-    }
-  }
-
-  /**
-   * @param isFullWidth
-   * @type {boolean}
-   * @default false
-   * @description Indicates that the component should take up the full width of the parent container. The default is false.
-   */
-  get isFullWidth() {
-    return this.args.isFullWidth ?? false;
-  }
-
-  /**
-   * @param route
-   * @type {string|null}
-   * @description Checks to make sure route is defined.
-   */
-  get route() {
-    let { route } = this.args;
-    assert(
-      '@route must be defined for "Hds::LinkTo::Cta"',
-      route !== undefined
-    );
-
-    return route;
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = [
-      'hds-button',
-      'hds-button--color-primary',
-      'hds-link-cta--inherit-button-styles',
-    ];
-
-    // add a class based on the @size argument
-    classes.push(`hds-button--size-${this.size}`);
-
-    // add a class based on the @isFullWidth argument
-    if (this.isFullWidth) {
-      classes.push('hds-button--width-full');
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  didInsert(el) {
-    // we need to register the element to compare it with the one that triggered the "key/space" event
-    this.el = el;
-  }
-
-  @action
-  onKeySpace(event) {
-    if (event.target === this.el) {
-      event.target.click();
-    }
-  }
-}

package/addon/components/hds/link-to/standalone.hbs

@@ -1,25 +0,0 @@
-<LinkTo
-  class={{this.classNames}}
-  @current-when={{@current-when}}
-  @models={{hds-link-to-models @model @models}}
-  @query={{hds-link-to-query @query}}
-  @replace={{@replace}}
-  @route={{this.route}}
-  ...attributes
->
-  {{#if (eq this.iconPosition "leading")}}
-    <div class="hds-link-standalone__icon">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
-    <div class="hds-link-standalone__text">
-      {{this.text}}
-    </div>
-  {{else}}
-    <div class="hds-link-standalone__text">
-      {{this.text}}
-    </div>
-    <div class="hds-link-standalone__icon">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
-  {{/if}}
-</LinkTo>

package/addon/components/hds/link-to/standalone.js

@@ -1,151 +0,0 @@
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-export const DEFAULT_ICONPOSITION = 'leading';
-export const DEFAULT_COLOR = 'primary';
-export const DEFAULT_SIZE = 'medium';
-export const ICONPOSITIONS = ['leading', 'trailing'];
-export const COLORS = ['primary', 'secondary'];
-export const SIZES = ['small', 'medium', 'large'];
-
-export default class HdsLinkToStandaloneComponent extends Component {
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the link. If no text value is defined an error will be thrown.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::LinkTo::Standalone" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param route
-   * @type {string|null}
-   * @description Checks to make sure route is defined.
-   */
-  get route() {
-    let { route } = this.args;
-    assert(
-      '@route must be defined for "Hds::LinkTo::Standalone"',
-      route !== undefined
-    );
-
-    return route;
-  }
-
-  /**
-   * @param color
-   * @type {string}
-   * @default primary
-   * @description Determines the color of link to be used; acceptable values are `primary` and `secondary`
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    assert(
-      `@color for "Hds::LinkTo::Standalone" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * @param icon
-   * @type {string|null}
-   * @default null
-   * @description The name of the icon to be used. An icon name must be defined.
-   */
-  get icon() {
-    let { icon } = this.args;
-
-    assert(
-      '@icon for "Hds::LinkTo::Standalone" must have a valid value',
-      icon !== undefined
-    );
-
-    return icon;
-  }
-
-  /**
-   * @param iconPosition
-   * @type {string}
-   * @default leading
-   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
-   */
-  get iconPosition() {
-    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;
-
-    assert(
-      `@iconPosition for "Hds::LinkTo::Standalone" must be one of the following: ${ICONPOSITIONS.join(
-        ', '
-      )}; received: ${iconPosition}`,
-      ICONPOSITIONS.includes(iconPosition)
-    );
-
-    return iconPosition;
-  }
-
-  /**
-   * @param size
-   * @type {string}
-   * @default medium
-   * @description The size of the standalone link; acceptable values are `small`, `medium`, and `large`
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::LinkTo::Standalone" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * @param iconSize
-   * @type {string}
-   * @default 16
-   * @description ensures that the correct icon size is used. Automatically calculated.
-   */
-  get iconSize() {
-    if (this.args.size === 'large') {
-      return '24';
-    } else {
-      return '16';
-    }
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method LinkToStandalone#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    // Notice: we've left this class name the same as the hds::link::standalone (we didn't add the "-to") so we didn't have to replicate the CSS
-    let classes = ['hds-link-standalone'];
-
-    // add a class based on the @size argument
-    classes.push(`hds-link-standalone--size-${this.size}`);
-
-    // add a class based on the @color argument
-    classes.push(`hds-link-standalone--color-${this.color}`);
-
-    // add a class based on the @iconPosition argument
-    classes.push(`hds-link-standalone--icon-position-${this.iconPosition}`);
-
-    return classes.join(' ');
-  }
-}

package/app/components/hds/link-to/standalone.js

@@ -1 +0,0 @@
-export { default } from '@hashicorp/design-system-components/components/hds/link-to/standalone';

package/app/styles/components/link/cta.scss

@@ -1,28 +0,0 @@
-//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
-//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
-//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
-//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
-//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
-//
-// Notice: in this component we're using directly the styles from the `Hds::Button` component
-// using the `hds-button` class names (and adding a specialized class for the "cta", see below)
-// If you need to change the styling of the `Button` component, remember that this will impact also
-// this component too.
-// If instead you need to change only the styling of the `CTA` component, you can do it here using
-// the specialized class declared below.
-// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
-// the least worst option we could find to solve the problem of sharing the exact same style of the
-// `Button (primary)` with other components.
-
-//
-// LINK > CTA COMPONENT
-//
-// properties within each class are sorted alphabetically
-//
-//
-
-.hds-link-cta--inherit-button-styles {
-  isolation: isolate;
-  text-decoration: none;
-  width: fit-content;
-}