@hashicorp/design-system-components 0.11.2 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @hashicorp/design-system-components
 
+## 0.12.0
+
+### Minor Changes
+
+- [#217](https://github.com/hashicorp/design-system/pull/217) [`210edd17`](https://github.com/hashicorp/design-system/commit/210edd17431e6e3097260aed0df5a8902f93b7f7) Thanks [@didoo](https://github.com/didoo)! - # Interactive
+
+  - Introduced `<Hds::Interactive>` (a generic, "utility" component used internally by all the interactive elements like buttons and links)
+
+  # Button
+
+  - updated the button API to handle also links as `<a>`/`<LinkTo/LinkToExternal>`
+    - it can be used in place of the `<Hds::Link/LinkTo::CTA>` component (see below)
+    - when the button is a link - the text is underlined for differentiation with a normal button - ⚠️ **Visual change!** - the button responds to `space` key event
+  - removed the `@type` argument from the API in favour of the `type` native attribute - 🚨 **Breaking change!**
+
+  # Link/LinkTo::CTA
+
+  - removed the `<Hds::Link/LinkTo::CTA>` component, in favour of `<Hds::Button>` component (see above) - 🚨 **Breaking change!**
+
+  # Link::Inline
+
+  - added the `<Hds::Link::Inline>` component (with API very similar to the `<Hds::Link::Standalone>`)
+
+  # Dropdown
+
+  - Updated the `Dropdown::ListItem::Interactive` to use the new `<Hds::Interactive>` component
+
+  # Alert/Toast components
+
+  - Removed the `<LinkTo::Standalone>` action (now you can use directly `<Link::Standalone>`)
+
 ## 0.11.2
 
 ### Patch Changes

package/addon/components/hds/alert/index.hbs

@@ -14,9 +14,7 @@
     <div class="hds-alert__actions">
       {{yield
         (hash
-          Button=(component "hds/button" size="small")
-          Link::Standalone=(component "hds/link/standalone" size="small")
-          LinkTo::Standalone=(component "hds/link-to/standalone" size="small")
+          Button=(component "hds/button" size="small") Link::Standalone=(component "hds/link/standalone" size="small")
         )
       }}
     </div>

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

@@ -1,4 +1,16 @@
-<button class={{this.classNames}} ...attributes aria-label={{if this.isIconOnly this.text null}} type={{this.type}}>
+<Hds::Interactive
+  class={{this.classNames}}
+  @current-when={{@current-when}}
+  @models={{hds-link-to-models @model @models}}
+  @query={{hds-link-to-query @query}}
+  @replace={{@replace}}
+  @route={{@route}}
+  @isRouteExternal={{@isRouteExternal}}
+  @href={{@href}}
+  @isHrefExternal={{@isHrefExternal}}
+  ...attributes
+  aria-label={{if this.isIconOnly this.text null}}
+>
   {{#if this.isIconOnly}}
     <div class="hds-button__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
@@ -26,4 +38,4 @@
       </div>
     {{/if}}
   {{/if}}
-</button>
+</Hds::Interactive>

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

@@ -3,11 +3,9 @@ import { assert } from '@ember/debug';
 
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_COLOR = 'primary';
-export const DEFAULT_TYPE = 'button';
 export const DEFAULT_ICONPOSITION = 'leading';
 export const SIZES = ['small', 'medium', 'large'];
 export const COLORS = ['primary', 'secondary', 'tertiary', 'critical'];
-export const TYPES = ['button', 'submit', 'reset'];
 export const ICONPOSITIONS = ['leading', 'trailing'];
 
 export default class HdsButtonIndexComponent extends Component {
@@ -126,25 +124,6 @@ export default class HdsButtonIndexComponent extends Component {
     }
   }
 
-  /**
-   * @param type
-   * @type {string}
-   * @default button
-   * @description The value for the button's `type` attribute. Acceptable values are `button`, `submit`, and `reset`
-   */
-  get type() {
-    let { type = DEFAULT_TYPE } = this.args;
-
-    assert(
-      `@type for "Hds::Button" must be one of the following: ${TYPES.join(
-        ', '
-      )}; received: ${type}`,
-      TYPES.includes(type)
-    );
-
-    return type;
-  }
-
   /**
    * @param isFullWidth
    * @type {boolean}

package/addon/components/hds/dropdown/list-item/copy-item.hbs

@@ -4,11 +4,7 @@
       class="hds-dropdown-list-item__copy-item-title hds-typography-body-100 hds-font-weight-semibold"
     >{{@copyItemTitle}}</div>
   {{/if}}
-  <button
-    type="button"
-    class="{{if @state (concat 'is-' @state)}} {{if this.isSuccess 'is-success'}}"
-    {{on "click" this.copyCode}}
-  >
+  <button type="button" class="{{if this.isSuccess 'is-success'}}" {{on "click" this.copyCode}}>
     <div class="hds-dropdown-list-item__copy-item-text hds-typography-code-100">
       {{this.text}}
     </div>

package/addon/components/hds/dropdown/list-item/interactive.hbs

@@ -1,44 +1,22 @@
 <li class={{this.classNames}}>
-  {{#if @route}}
-    <LinkTo
-      class="{{if @state (concat 'is-' @state)}}"
-      @current-when={{@current-when}}
-      @models={{hds-link-to-models @model @models}}
-      @query={{hds-link-to-query @query}}
-      @replace={{@replace}}
-      @route={{@route}}
-      ...attributes
-    >
-      {{#if @icon}}
-        <div class="hds-dropdown-list-item__interactive-icon">
-          <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-        </div>
-      {{/if}}
-      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
-        {{this.text}}
+  <Hds::Interactive
+    @current-when={{@current-when}}
+    @models={{hds-link-to-models @model @models}}
+    @query={{hds-link-to-query @query}}
+    @replace={{@replace}}
+    @route={{@route}}
+    @isRouteExternal={{@isRouteExternal}}
+    @href={{@href}}
+    @isHrefExternal={{@isHrefExternal}}
+    ...attributes
+  >
+    {{#if @icon}}
+      <div class="hds-dropdown-list-item__interactive-icon">
+        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
       </div>
-    </LinkTo>
-  {{else if @href}}
-    <a target="_blank" rel="noopener noreferrer" href={{@href}} class="{{if @state (concat 'is-' @state)}}">
-      {{#if @icon}}
-        <div class="hds-dropdown-list-item__interactive-icon">
-          <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-        </div>
-      {{/if}}
-      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
-        {{this.text}}
-      </div>
-    </a>
-  {{else}}
-    <button class="{{if @state (concat 'is-' @state)}}" type="button" ...attributes>
-      {{#if @icon}}
-        <div class="hds-dropdown-list-item__interactive-icon">
-          <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-        </div>
-      {{/if}}
-      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
-        {{this.text}}
-      </div>
-    </button>
-  {{/if}}
+    {{/if}}
+    <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+      {{this.text}}
+    </div>
+  </Hds::Interactive>
 </li>

package/addon/components/hds/interactive/index.hbs

@@ -0,0 +1,33 @@
+{{! IMPORTANT: we removed the newlines before/after the yield to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/231#issuecomment-1123502499) }}
+{{! NOTICE: we can't support the direct use of the "href" HTML attribute via ...attributes in the <a> elements, because we need to rely on the "@href" Ember argument to differentiate between different types of generated output }}
+{{#if @route}}
+  {{#if this.isRouteExternal}}
+    <LinkToExternal
+      @current-when={{@current-when}}
+      @models={{hds-link-to-models @model @models}}
+      @query={{hds-link-to-query @query}}
+      @replace={{@replace}}
+      @route={{@route}}
+      ...attributes
+    >{{yield}}</LinkToExternal>
+  {{else}}
+    <LinkTo
+      @current-when={{@current-when}}
+      @models={{hds-link-to-models @model @models}}
+      @query={{hds-link-to-query @query}}
+      @replace={{@replace}}
+      @route={{@route}}
+      ...attributes
+    >{{yield}}</LinkTo>
+  {{/if}}
+{{else if @href}}
+  {{#if this.isHrefExternal}}
+    <a target="_blank" rel="noopener noreferrer" ...attributes href={{@href}} {{on "keyup" this.onKeyUp}}>{{yield}}</a>
+  {{else}}
+    <a ...attributes href={{@href}} {{on "keyup" this.onKeyUp}}>{{yield}}</a>
+  {{/if}}
+{{else}}
+  <button type="button" ...attributes>
+    {{yield}}
+  </button>
+{{/if}}

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

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class HdsInteractiveComponent extends Component {
+  /**
+   * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
+   *
+   * @param isHrefExternal
+   * @type boolean
+   * @default true
+   */
+  get isHrefExternal() {
+    return this.args.isHrefExternal ?? true;
+  }
+
+  /**
+   * Determines if a @route value is "external" (uses the LinkToExternal component instead of LinkTo)
+   *
+   * @param isRouteExternal
+   * @type boolean
+   * @default false
+   */
+  get isRouteExternal() {
+    return this.args.isRouteExternal ?? false;
+  }
+
+  @action
+  onKeyUp(event) {
+    if (event.key === ' ' || event.code === 'Space') {
+      event.target.click();
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+{{! IMPORTANT: we removed the newlines before/after the yield to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/231#issuecomment-1123502499) }}
+{{! IMPORTANT: we need to add "squishies" here (~) because otherwise the whitespace added by Ember becomes visible in the link (being an inline element) - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}
+<Hds::Interactive
+  class={{this.classNames}}
+  @current-when={{@current-when}}
+  @models={{hds-link-to-models @model @models}}
+  @query={{hds-link-to-query @query}}
+  @replace={{@replace}}
+  @route={{@route}}
+  @isRouteExternal={{@isRouteExternal}}
+  @href={{@href}}
+  target="_blank"
+  rel="noopener noreferrer"
+  ...attributes
+>{{#if (and @icon (eq this.iconPosition "leading"))~}}
+    <span class="hds-link-inline__icon hds-link-inline__icon--leading">
+      <FlightIcon @name={{@icon}} @size="16" @stretched={{true}} />
+    </span>
+  {{~/if~}}{{yield}}{{~#if (and @icon (eq this.iconPosition "trailing"))~}}
+    <span class="hds-link-inline__icon hds-link-inline__icon--trailing">
+      <FlightIcon @name={{@icon}} @size="16" @stretched={{true}} />
+    </span>
+  {{~/if}}</Hds::Interactive>

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

@@ -0,0 +1,71 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_ICONPOSITION = 'trailing';
+export const DEFAULT_COLOR = 'primary';
+export const ICONPOSITIONS = ['leading', 'trailing'];
+export const COLORS = ['primary', 'secondary'];
+
+export default class HdsLinkInlineComponent extends Component {
+  constructor() {
+    super(...arguments);
+    if (!(this.args.href || this.args.route)) {
+      assert('@href or @route must be defined for <Hds::Link::Inline>');
+    }
+  }
+
+  /**
+   * @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::Link::Inline" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @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::Inline" must be one of the following: ${ICONPOSITIONS.join(
+        ', '
+      )}; received: ${iconPosition}`,
+      ICONPOSITIONS.includes(iconPosition)
+    );
+
+    return iconPosition;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method LinkInline#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-link-inline'];
+
+    // add a class based on the @color argument
+    classes.push(`hds-link-inline--color-${this.color}`);
+
+    // add a class based on the @iconPosition argument
+    classes.push(`hds-link-inline--icon-${this.iconPosition}`);
+
+    return classes.join(' ');
+  }
+}

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

@@ -1,6 +1,17 @@
-{{! 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>
+<Hds::Interactive
+  class={{this.classNames}}
+  @current-when={{@current-when}}
+  @models={{hds-link-to-models @model @models}}
+  @query={{hds-link-to-query @query}}
+  @replace={{@replace}}
+  @route={{@route}}
+  @isRouteExternal={{@isRouteExternal}}
+  @href={{@href}}
+  @isHrefExternal={{@isHrefExternal}}
+  target="_blank"
+  rel="noopener noreferrer"
+  ...attributes
+>
   {{#if (eq this.iconPosition "leading")}}
     <div class="hds-link-standalone__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
@@ -16,5 +27,4 @@
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
     </div>
   {{/if}}
-</a>
-{{! template-lint-enable link-href-attributes }}
+</Hds::Interactive>

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

@@ -9,6 +9,13 @@ export const COLORS = ['primary', 'secondary'];
 export const SIZES = ['small', 'medium', 'large'];
 
 export default class HdsLinkStandaloneComponent extends Component {
+  constructor() {
+    super(...arguments);
+    if (!(this.args.href || this.args.route)) {
+      assert('@href or @route must be defined for <Hds::Link::Standalone>');
+    }
+  }
+
   /**
    * @param text
    * @type {string}

package/addon/components/hds/toast/index.hbs

@@ -8,13 +8,6 @@
   as |A|
 >
   {{yield
-    (hash
-      Title=A.Title
-      Description=A.Description
-      Button=A.Button
-      Link::Standalone=A.Link::Standalone
-      LinkTo::Standalone=A.LinkTo::Standalone
-      Generic=A.Generic
-    )
+    (hash Title=A.Title Description=A.Description Button=A.Button Link::Standalone=A.Link::Standalone Generic=A.Generic)
   }}
 </Hds::Alert>

package/app/components/hds/{link/cta.js → interactive/index.js}

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

package/app/components/hds/{link-to/cta.js → link/inline.js}

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

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

@@ -5,6 +5,8 @@
 @use "helpers/focus-ring";
 @use "helpers/typography";
 
+// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
+// START COMPONENTS CSS FILES IMPORTS
 @use "../components/alert";
 @use "../components/badge";
 @use "../components/badge-count";
@@ -14,9 +16,10 @@
 @use "../components/disclosure";
 @use "../components/dropdown";
 @use "../components/icon-tile";
-@use "../components/link/cta";
+@use "../components/link/inline";
 @use "../components/link/standalone";
 @use "../components/toast";
+// END COMPONENT CSS FILES IMPORTS
 
 .sr-only {
 	border: 0 !important;

package/app/styles/components/button.scss

@@ -26,16 +26,21 @@ $hds-button-focus-border-width: 3px;
   position: relative;
   width: auto;
 
+  // the <a> element behaves differently than a <button>
+  @at-root a#{&} {
+    width: fit-content;
+  }
+
   // This covers all of the browsers and focus scenarios (due to the custom focus design).
   &:disabled,
   &[disabled],
-  &.is-disabled,
+  &.mock-disabled,
   &:disabled:focus,
   &[disabled]:focus,
-  &.is-disabled:focus,
+  &.mock-disabled:focus,
   &:disabled:hover,
   &[disabled]:hover,
-  &.is-disabled:hover {
+  &.mock-disabled:hover {
     background-color: var(--token-color-surface-faint);
     border-color: var(--token-color-border-primary);
     box-shadow: none;
@@ -57,7 +62,7 @@ $hds-button-focus-border-width: 3px;
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     box-shadow: none;
 
     &::before {
@@ -145,7 +150,7 @@ $size-props: (
   color: var(--token-color-foreground-high-contrast);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-palette-blue-300);
     border-color: var(--token-color-palette-blue-400);
     color: var(--token-color-foreground-high-contrast);
@@ -153,7 +158,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     background-color: var(--token-color-palette-blue-200);
     border-color: var(--token-color-focus-action-internal);
     color: var(--token-color-foreground-high-contrast);
@@ -172,7 +177,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-palette-blue-400);
     border-color: var(--token-color-palette-blue-400);
     box-shadow: none;
@@ -190,7 +195,7 @@ $size-props: (
   color: var(--token-color-foreground-primary);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-surface-primary);
     border-color: var(--token-color-border-strong);
     color: var(--token-color-foreground-primary);
@@ -198,7 +203,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     background-color: var(--token-color-surface-faint);
     border-color: var(--token-color-focus-action-internal);
     color: var(--token-color-foreground-primary);
@@ -208,7 +213,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
     box-shadow: none;
@@ -225,7 +230,7 @@ $size-props: (
   color: var(--token-color-foreground-action);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-surface-primary);
     border-color: var(--token-color-border-strong);
     color: var(--token-color-foreground-action-hover);
@@ -233,7 +238,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
     color: var(--token-color-foreground-action);
     &::before {
@@ -242,7 +247,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
     box-shadow: none;
@@ -254,13 +259,13 @@ $size-props: (
 
   &:disabled,
   &[disabled],
-  &.is-disabled,
+  &.mock-disabled,
   &:disabled:focus,
   &[disabled]:focus,
-  &.is-disabled:focus,
+  &.mock-disabled:focus,
   &:disabled:hover,
   &[disabled]:hover,
-  &.is-disabled:hover {
+  &.mock-disabled:hover {
     background-color: transparent;
     border-color: transparent;
 
@@ -277,7 +282,7 @@ $size-props: (
   color: var(--token-color-foreground-critical-on-surface);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-palette-red-300);
     border-color: var(--token-color-palette-red-400);
     color: var(--token-color-foreground-high-contrast);
@@ -285,7 +290,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     background-color: var(--token-color-surface-critical);
     border-color: var(--token-color-focus-critical-internal);
     color: var(--token-color-foreground-critical-on-surface);
@@ -295,7 +300,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-palette-red-400);
     border-color: var(--token-color-palette-red-400);
     box-shadow: none;
@@ -304,4 +309,24 @@ $size-props: (
       border-color: transparent;
     }
   }
+}
+
+
+// SPECIAL
+
+// we apply a visual treatment to alert the developer if a "href" HTML attribute is used (instead of the "@href" Ember argument)
+
+button.hds-button[href] {
+  background-color: red !important;
+  color: white !important;
+  border: none;
+
+  .hds-button__text,
+  &::before {
+    display: none;
+  }
+
+  &::after {
+    content: ' Attention: you’re passing a "href" attribute to the "Hds::Button" component, you should use an "@href" argument.';
+  }
 }