@hashicorp/design-system-components 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- [#184](https://github.com/hashicorp/design-system/pull/184) [`12056051`](https://github.com/hashicorp/design-system/commit/12056051f2c3ffebc09a85fcd802732e5d5dce7d) Thanks [@didoo](https://github.com/didoo)! - Fixed issue with "click outside" in Safari for "Disclosure/Breadcrumb/Dropdown"
+
+## 0.7.0
+
+### Minor Changes
+
+- [#150](https://github.com/hashicorp/design-system/pull/150) [`c236c159`](https://github.com/hashicorp/design-system/commit/c236c159f7d7ec6edc661710963f5733eb961edf) Thanks [@didoo](https://github.com/didoo)! - removed “box-sizing“ declarations from the components (we assume the consumers codebase already have set it to “border-box“ by default
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -47,6 +47,8 @@ Finally, add this line to the top of your app's style file (`app.scss` or simila
 @import '@hashicorp/design-system-components';
 ```
 
+⚠️ **Notice**: our component library assumes that a `*, *::before, *::after { box-sizing: border-box; }` reset is applied globally in the CSS of the application. If in your use case this is not true, please speak with the design system team (we can try to find a workaround).
+
 Usage
 ------------------------------------------------------------------------------
 

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/disclosure/index.hbs

@@ -1,6 +1,6 @@
 <div class="hds-disclosure" ...attributes>
   <div class="hds-disclosure__toggle">
-    {{yield (hash onClickToggle=this.onClickToggle) to="toggle"}}
+    {{yield (hash onClickToggle=this.onClickToggle isActive=this.isActive) to="toggle"}}
   </div>
   {{#if this.isActive}}
     <div

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

@@ -20,7 +20,9 @@ export default class HdsDisclosureComponent extends Component {
   clickOutsideDeactivates(event) {
     // we check if the toggle reference belongs to the tree of parent DOM nodes
     // of the element that was clicked and triggered the "click outside" event handling
-    this.isToggleClicked = event.path.includes(this.toggleRef);
+    // notice: we use "event.composedPath" here because is now fully supported (see https://caniuse.com/?search=event%20path)
+    const path = event.composedPath();
+    this.isToggleClicked = path.includes(this.toggleRef);
     // here we need to return `true` to make sure that the focus trap will be deactivated (and allow the click event to do its thing (i.e. to pass-through to the element that was clicked).
     // see: https://github.com/focus-trap/focus-trap#createoptions
     return true;

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/badge-count.scss

@@ -15,7 +15,6 @@ $hds-badge-count-border-width: 1px;
 .hds-badge-count {
   align-items: center;
   border: $hds-badge-count-border-width solid transparent;
-  box-sizing: border-box;
   display: inline-flex;
   font-family: var(--token-typography-font-stack-text);
   max-width: 100%;

package/app/styles/components/badge.scss

@@ -16,7 +16,6 @@
   align-items: center;
   border-radius: 5px;
   border: $hds-badge-border-width solid transparent;
-  box-sizing: border-box;
   display: inline-flex;
   max-width: 100%;
 }

package/app/styles/components/button.scss

@@ -18,7 +18,6 @@ $hds-button-focus-border-width: 3px;
   align-items: center;
   border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y
   border-radius: $hds-button-border-radius;
-  box-sizing: border-box; // TODO https://github.com/hashicorp/design-system-components/issues/46
   display: flex;
   font-family: var(--token-typography-font-stack-text);
   isolation: isolate;
@@ -69,7 +68,6 @@ $hds-button-focus-border-width: 3px;
       border-radius: $hds-button-border-radius + $hds-button-focus-border-width;
       border: $hds-button-focus-border-width solid transparent;
       bottom: -$shift;
-      box-sizing: border-box;
       content: '';
       left: -$shift;
       position: absolute;

package/app/styles/components/icon-tile.scss

@@ -17,7 +17,6 @@
   border-radius: 4px;
   border: $hds-icon-tile-border-width solid transparent;
   box-shadow: $hds-icon-tile-box-shadow;
-  box-sizing: border-box;
   display: flex;
   position: relative;
 }

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/app/styles/mixins/_focus-ring.scss

@@ -35,7 +35,6 @@
   &::before {
     border-radius: $radius;
     bottom: $bottom;
-    box-sizing: border-box;
     content: '';
     left: $left;
     position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.6.0",
+  "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"
   },
@@ -50,7 +51,7 @@
     "@embroider/test-setup": "^0.43.5",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@percy/cli": "^1.0.0-beta.70",
+    "@percy/cli": "^1.0.1",
     "@percy/ember": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",