@hashicorp/design-system-components 0.11.2 → 0.12.2

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.';
+  }
 }

package/app/styles/components/dropdown.scss

@@ -40,7 +40,7 @@ $hds-dropdown-toggle-border-radius: 5px;
   padding: 1px;
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-surface-interactive);
     border-color: var(--token-color-border-strong);
     cursor: pointer;
@@ -49,7 +49,7 @@ $hds-dropdown-toggle-border-radius: 5px;
   @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px, $radius: $hds-dropdown-toggle-border-radius);
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
   }
@@ -166,7 +166,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     width: 100%;
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
       background-color: var(--token-color-surface-interactive-hover);
       cursor: pointer;
     }
@@ -174,14 +174,14 @@ $hds-dropdown-toggle-border-radius: 5px;
     @include hds-focus-ring-basic();
 
     &:focus,
-    &.is-focus {
+    &.mock-focus {
       //TODO this focus is just way too complex
       background-color:  var(--token-color-surface-action);
       border-color: var(--token-color-focus-action-internal);
     }
 
     &:active,
-    &.is-active {
+    &.mock-active {
       background-color: var(--token-color-surface-interactive-active);
     }
 
@@ -275,7 +275,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     // and define their values in the color variants below
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
       color: var(--current-color-hover);
       &::before {
         background-color: currentColor;
@@ -284,7 +284,7 @@ $hds-dropdown-toggle-border-radius: 5px;
 
     // default focus for browsers that still rely on ":focus"
     &:focus,
-    &.is-focus {
+    &.mock-focus {
       color: var(--current-color-focus);
       &::after {
         background-color: var(--current-background-color);
@@ -312,7 +312,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     // remove the focus ring on "active + focused" state (by design)
     &:focus:active,
     &:focus-visible:active,
-    &.is-focus.is-active {
+    &.mock-focus.mock-active {
       &::after {
         background-color: var(--current-background-color);
         box-shadow: none;
@@ -321,7 +321,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     }
 
     &:active,
-    &.is-active {
+    &.mock-active {
       color: var(--current-color-active);
       &::before {
         background-color: currentColor;

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

@@ -0,0 +1,66 @@
+//
+// LINK > INLINE COMPONENT
+//
+// properties within each class are sorted alphabetically
+// notice: pseudo-classes for the states *must* follow the order link > visited > focus > hover > active
+// see https://github.com/hashicorp/design-system-components/issues/132
+//
+//
+
+.hds-link-inline {
+  border-radius: 2px; // this is used by the outline too
+
+  &:focus,
+  &.mock-focus,
+  &:focus-visible {
+    outline: 2px solid var(--token-color-focus-action-internal);
+    outline-offset: 1px;
+    text-decoration: none;
+  }
+}
+
+.hds-link-inline__icon {
+  display: inline-block;
+  height: 1em;
+  vertical-align: text-bottom; // don't use "middle" here or it will extend beyond the focus ring
+  width: 1em;
+
+  .hds-link-inline--icon-leading > & {
+    margin-right: 0.25em;
+  }
+
+  .hds-link-inline--icon-trailing > &  {
+    margin-left: 0.25em;
+  }
+}
+
+
+// COLORS & STATES
+
+.hds-link-inline--color-primary {
+  color: var(--token-color-foreground-action);
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-action-hover);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-action-active);
+  }
+}
+
+.hds-link-inline--color-secondary {
+  color: var(--token-color-foreground-strong);
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-primary);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-faint);
+  }
+}

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

@@ -84,7 +84,7 @@ $size-props: (
   color: var(--token-color-foreground-action);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     color: var(--token-color-foreground-action-hover);
 
     .hds-link-standalone__text {
@@ -93,7 +93,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     color: var(--token-color-foreground-action-active);
 
     .hds-link-standalone__text {
@@ -110,14 +110,14 @@ $size-props: (
   color: var(--token-color-foreground-strong);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     .hds-link-standalone__text {
       text-decoration-color: #4D4D4F; // custom color by design
     }
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     color: var(--token-color-foreground-primary);
 
     .hds-link-standalone__text {

package/app/styles/mixins/_focus-ring.scss

@@ -8,7 +8,7 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
   }
   // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
@@ -21,7 +21,7 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active {
+  &.mock-focus.mock-active {
     box-shadow: none;
   }
 }
@@ -45,7 +45,7 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     &::before {
       box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
     }
@@ -64,7 +64,7 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active {
+  &.mock-focus.mock-active {
     &::before {
       box-shadow: none;
     }

package/blueprints/hds-component/files/addon/components/hds/__name__/index.hbs

@@ -1,4 +1,4 @@
 {{! ADD YOUR TEMPLATE CONTENT HERE }}
-<div className={{this.classNames}} ...attributes>
+<div class={{this.classNames}} ...attributes>
   {{yield}}
 </div>

package/blueprints/hds-component/index.js

@@ -3,6 +3,7 @@
 'use strict';
 
 const stringUtil = require('ember-cli-string-utils');
+const fs = require('fs');
 
 module.exports = {
   description: 'Generates all files for an HDS component',
@@ -23,4 +24,37 @@ module.exports = {
         .join(' > '),
     };
   },
+
+  afterInstall(options) {
+    updateHDSComponentsCSS.call(this, options);
+  },
+};
+
+const updateHDSComponentsCSS = (options) => {
+  const name = options.entity.name;
+  const cssFilePath = `${options.project.root}/app/styles/@hashicorp/design-system-components.scss`;
+  const source = fs.readFileSync(cssFilePath, 'utf-8');
+  const oldLinesArray = source.split(/\r?\n/);
+  const firstComponentImportIndex =
+    oldLinesArray.findIndex((line) =>
+      line.match(/^\/\/ START COMPONENTS CSS FILES IMPORTS/)
+    ) + 1;
+  const lastComponentImportIndex =
+    oldLinesArray.findIndex((line) =>
+      line.match(/^\/\/ END COMPONENT CSS FILES IMPORTS/)
+    ) - 1;
+  const importLinesArray = oldLinesArray.slice(
+    firstComponentImportIndex,
+    lastComponentImportIndex + 1
+  );
+  importLinesArray.push(`@use "../components/${name}";`);
+  const newImportLinesArray = importLinesArray
+    .filter((line, index, self) => self.indexOf(line) === index)
+    .sort();
+  const newLinesArray = [].concat(
+    oldLinesArray.slice(0, firstComponentImportIndex),
+    newImportLinesArray,
+    oldLinesArray.slice(lastComponentImportIndex + 1)
+  );
+  fs.writeFileSync(cssFilePath, newLinesArray.join('\n'));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.11.2",
+  "version": "0.12.2",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,14 +35,15 @@
   },
   "dependencies": {
     "@hashicorp/design-system-tokens": "^0.8.0",
-    "@hashicorp/ember-flight-icons": "^2.0.5",
+    "@hashicorp/ember-flight-icons": "^2.0.7",
     "ember-auto-import": "^2.4.1",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-sass": "^10.0.1",
     "ember-keyboard": "^8.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
-    "sass": "^1.43.4"
+    "sass": "^1.43.4",
+    "sinon": "^14.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",

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

@@ -1,50 +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.
-}}
-
-{{! 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

@@ -1,150 +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 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;
-  }
-
-  /**
-   * 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();
-    }
-  }
-}