@hashicorp/design-system-components 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hashicorp/design-system-components
 
+## 0.8.0
+
+### Minor Changes
+
+- [#115](https://github.com/hashicorp/design-system/pull/115) [`caff569b`](https://github.com/hashicorp/design-system/commit/caff569b46a9a46940eab94d263816dd7d046c56) Thanks [@didoo](https://github.com/didoo)! - added “Link::CTA“ and “LinkTo::CTA” components
+
 ## 0.7.1
 
 ### Patch Changes

package/addon/components/hds/button/index.js

@@ -160,7 +160,6 @@ export default class HdsButtonIndexComponent extends Component {
    * @method Button#classNames
    * @return {string} The "class" attribute to apply to the component.
    */
-  // "hds-button {{this.sizeClass}} {{this.colorClass}} {{this.widthClass}}"
   get classNames() {
     let classes = ['hds-button'];
 

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

@@ -0,0 +1,50 @@
+{{!
+//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
+//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
+//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
+//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
+//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
+//
+// 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.
+}}
+
+{{! template-lint-disable link-href-attributes }}
+{{! we can disable this linting rule because the developer will add the html attribute themselves }}
+<a
+  class={{this.classNames}}
+  target="_blank"
+  rel="noopener noreferrer"
+  ...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}}
+</a>

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

@@ -0,0 +1,150 @@
+//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
+//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
+//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
+//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
+//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
+//
+// 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 HdsLinkCtaComponent 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::Link::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::Link::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::Link::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;
+  }
+
+  @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();
+    }
+  }
+
+  /**
+   * 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(' ');
+  }
+}

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

@@ -0,0 +1,51 @@
+{{!
+//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
+//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
+//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
+//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
+//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
+//
+// 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

@@ -0,0 +1,165 @@
+//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
+//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
+//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
+//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
+//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
+//
+// 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;
+  }
+
+  @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();
+    }
+  }
+
+  /**
+   * 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(' ');
+  }
+}

package/app/components/hds/link/cta.js

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

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

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

package/app/styles/@hashicorp/design-system-components.scss

@@ -12,6 +12,7 @@
 @use "../components/card";
 @use "../components/disclosure";
 @use "../components/icon-tile";
+@use "../components/link/cta";
 @use "../components/link/standalone";
 
 .sr-only {

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

@@ -0,0 +1,28 @@
+//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
+//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
+//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
+//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
+//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
+//
+// 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -41,6 +41,7 @@
     "ember-cli-htmlbars": "^5.7.1",
     "ember-cli-sass": "^10.0.1",
     "ember-focus-trap": "^1.0.1",
+    "ember-keyboard": "^8.0.0",
     "ember-named-blocks-polyfill": "^0.2.5",
     "sass": "^1.43.4"
   },