@hashicorp/design-system-components 0.1.2 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @hashicorp/design-system-components
 
+## 0.3.1
+
+### Patch Changes
+
+- [#98](https://github.com/hashicorp/design-system/pull/98) [`411cd9b9`](https://github.com/hashicorp/design-system/commit/411cd9b949e376d38eb1dc4d4af93ae17e6c686a) Thanks [@didoo](https://github.com/didoo)! - refactored the “focus-ring” mixins to support both “action” (default) and “critical“ colors
+
+- Updated dependencies [[`411cd9b9`](https://github.com/hashicorp/design-system/commit/411cd9b949e376d38eb1dc4d4af93ae17e6c686a)]:
+  - @hashicorp/design-system-tokens@0.7.0
+
+## 0.3.0
+
+### Minor Changes
+
+- [#48](https://github.com/hashicorp/design-system/pull/48) [`971efb9e`](https://github.com/hashicorp/design-system/commit/971efb9e92478e4d88c24aeee835f448f35d2066) Thanks [@didoo](https://github.com/didoo)! - Added "Breadcrumb" component
+
+## 0.2.0
+
+### Minor Changes
+
+- [#76](https://github.com/hashicorp/design-system/pull/76) [`48a82d54`](https://github.com/hashicorp/design-system/commit/48a82d545817c280d022cf95b2f3a691dc3c46a3) Thanks [@didoo](https://github.com/didoo)! - Added the "tertiary" color variant to the "Button" component
+
+* [#77](https://github.com/hashicorp/design-system/pull/77) [`c08711e4`](https://github.com/hashicorp/design-system/commit/c08711e4fa3fac0cd3418b8afa1a0c4c254e8fac) Thanks [@didoo](https://github.com/didoo)! - Fixed the "elevation" treatment for the "Button" component
+
 ## 0.1.2
 
 ### Patch Changes

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

@@ -0,0 +1,13 @@
+<nav
+  class={{this.classNames}}
+  {{!
+    TODO: should this string be localized, like in Structure? https://github.com/hashicorp/structure/blob/dffbb0e0ae5246d3b832586ab25bcb981a052b30/packages/pds-ember/addon/components/pds/breadcrumbs/index.hbs#L3
+    (in which case, we need to expose a prop? or start to have localization in the HDS system?)
+  }}
+  aria-label="breadcrumbs"
+  ...attributes
+>
+  <ol class="hds-breadcrumb__list" {{did-insert this.didInsert}}>
+    {{yield}}
+  </ol>
+</nav>

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

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+
+const noop = () => {};
+
+export default class HdsBreadcrumbComponent extends Component {
+  /**
+   * @param onDidInsert
+   * @type {function}
+   * @default () => {}
+   */
+  get didInsert() {
+    // TODO discuss with Matthew if this is the right way to create a guard for this method
+    return this.args.didInsert ?? noop;
+  }
+
+  /**
+   * @param itemsCanWrap
+   * @type {boolean}
+   * @default true
+   */
+  get itemsCanWrap() {
+    return this.args.itemsCanWrap ?? true;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method Breadcrumb#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-breadcrumb'];
+
+    // add a class based on the @itemsCanWrap argument
+    if (this.itemsCanWrap) {
+      classes.push('hds-breadcrumb--items-can-wrap');
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/breadcrumb/item.hbs

@@ -0,0 +1,26 @@
+<li class="hds-breadcrumb__item" style={{this.itemStyle}} ...attributes>
+  {{#if @current}}
+    <div class="hds-breadcrumb__current">
+      {{#if @icon}}
+        <div class="hds-breadcrumb__icon">
+          <FlightIcon @name={{@icon}} @size="16" @stretched={{true}} />
+        </div>
+      {{/if}}
+      <span class="hds-breadcrumb__text">{{@text}}</span>
+    </div>
+  {{else}}
+    <LinkTo
+      class="hds-breadcrumb__link {{if @hover 'is-hover'}} {{if @active 'is-active'}} {{if @focus 'is-focus'}}"
+      @models={{hds-link-to-models @model @models}}
+      @query={{hds-link-to-query @query}}
+      @route={{@route}}
+    >
+      {{#if @icon}}
+        <div class="hds-breadcrumb__icon">
+          <FlightIcon @name={{@icon}} @size="16" @stretched={{true}} />
+        </div>
+      {{/if}}
+      <span class="hds-breadcrumb__text">{{@text}}</span>
+    </LinkTo>
+  {{/if}}
+</li>

package/addon/components/hds/breadcrumb/item.js

@@ -0,0 +1,50 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import { assert } from '@ember/debug';
+
+export default class HdsBreadcrumbItemComponent extends Component {
+  /**
+   * @param maxWidth
+   * @type {string}
+   * @default undefined
+   * @description A parameter that can be applied to an "item" to limit its max-width
+   */
+  get maxWidth() {
+    let { maxWidth } = this.args;
+
+    if (maxWidth) {
+      assert(
+        `@maxWidth for "Hds::Breadcrumb::Item" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'), received: ${maxWidth}`,
+        maxWidth.match(/^\d+(px|em)$/)
+      );
+
+      return maxWidth;
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * Get the inline style to apply to the item.
+   * @method BreadcrumbItem#itemStyle
+   * @return {string} The "style" attribute to apply to the item.
+   */
+  get itemStyle() {
+    if (this.maxWidth) {
+      return htmlSafe(`max-width: ${this.maxWidth}`);
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method BreadcrumbItem#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-breadcrumb__item'];
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/breadcrumb/truncation.hbs

@@ -0,0 +1,23 @@
+<li class="hds-breadcrumb__item hds-breadcrumb__item--is-truncation" ...attributes>
+  <Hds::Disclosure>
+    <:toggle as |t|>
+      <button
+        type="button"
+        class="hds-breadcrumb__truncation-toggle
+          {{if @hover 'is-hover'}}
+          {{if @active 'is-active'}}
+          {{if @focus 'is-focus'}}"
+        {{on "click" t.onClickToggle}}
+      >
+        <FlightIcon @name="more-horizontal" @size="16" @isInlineBlock={{false}} />
+      </button>
+    </:toggle>
+    <:content>
+      <div class="hds-breadcrumb__truncation-content">
+        <ol class="hds-breadcrumb__sublist">
+          {{yield}}
+        </ol>
+      </div>
+    </:content>
+  </Hds::Disclosure>
+</li>

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

@@ -6,7 +6,7 @@ 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', 'critical'];
+export const COLORS = ['primary', 'secondary', 'tertiary', 'critical'];
 export const TYPES = ['button', 'submit', 'reset'];
 export const ICONPOSITIONS = ['leading', 'trailing'];
 
@@ -72,6 +72,11 @@ export default class HdsButtonIndexComponent extends Component {
    * @description The name of the icon to be used.
    */
   get icon() {
+    assert(
+      `when the "Hds::Button" @color is "tertiary" an @icon is required`,
+      !(this.color === 'tertiary' && !this.args.icon)
+    );
+
     return this.args.icon ?? null;
   }
 
@@ -162,7 +167,7 @@ export default class HdsButtonIndexComponent extends Component {
 
   /**
    * Get the class names to apply to the component.
-   * @method Badge#classNames
+   * @method Button#classNames
    * @return {string} The "class" attribute to apply to the component.
    */
   // "hds-button {{this.sizeClass}} {{this.colorClass}} {{this.widthClass}}"
@@ -180,9 +185,6 @@ export default class HdsButtonIndexComponent extends Component {
       classes.push('hds-button--width-full');
     }
 
-    // the button has a "low" elevation effect applied to it
-    classes.push('hds-elevation-low');
-
     return classes.join(' ');
   }
 }

package/app/components/hds/breadcrumb/index.js

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

package/app/components/hds/breadcrumb/item.js

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

package/app/components/hds/breadcrumb/truncation.js

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

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

@@ -5,6 +5,7 @@
 
 @use "../components/badge";
 @use "../components/badge-count";
+@use "../components/breadcrumb";
 @use "../components/button";
 @use "../components/card";
 @use "../components/disclosure";

package/app/styles/components/breadcrumb.scss

@@ -0,0 +1,189 @@
+//
+// BREADCRUMB
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+@use "../mixins/focus-ring" as *;
+
+$hds-breadcrumb-item-height: 28px;
+$hds-breadcrumb-item-border-radius: 5px;
+$hds-breadcrumb-item-visual-horizontal-padding: 4px;
+
+// MAIN CONTAINER (NAV)
+.hds-breadcrumb {
+    position: relative;
+}
+
+// LIST (OL)
+
+.hds-breadcrumb__list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .hds-breadcrumb--items-can-wrap & {
+        flex-wrap: wrap;
+    }
+}
+
+.hds-breadcrumb__sublist {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+// ITEM (LI)
+
+.hds-breadcrumb__item {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    min-width: 0;
+    position: relative;
+
+    .hds-breadcrumb__list > & {
+        &:not(:last-child)::after {
+            color: var(--token-color-palette-neutral-300);
+            content: "/";
+            padding: 0 8px;
+        }
+    }
+
+    .hds-breadcrumb__sublist > & + & {
+        margin-top: 4px;
+    }
+}
+
+.hds-breadcrumb__item--is-truncation {
+    flex: none; // needed to avoid that the "flex" parent collapses the truncation element (it happens with very long strings and no-wrapping)
+}
+
+// LINK (A)
+
+.hds-breadcrumb__link {
+    align-items: center;
+    border-radius: $hds-breadcrumb-item-border-radius;
+    color: var(--token-color-foreground-faint);
+    display: flex;
+    flex-direction: row;
+    margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
+    min-width: 0;
+    padding: 0 $hds-breadcrumb-item-visual-horizontal-padding;
+    // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
+    text-decoration-color: transparent;
+
+    // we apply the focus directly to the element, without using a pseudo-element
+    @include hds-focus-ring-basic();
+
+    &:hover,
+    &.is-hover {
+        color: var(--token-color-palette-neutral-600);
+
+        > .hds-breadcrumb__text {
+            text-decoration-color: currentColor;
+        }
+    }
+
+    &:active,
+    &.is-active {
+        color: var(--token-color-foreground-secondary);
+
+        > .hds-breadcrumb__text {
+            text-decoration-color: currentColor;
+        }
+    }
+}
+
+// CURRENT
+
+.hds-breadcrumb__current {
+    align-items: center;
+    color: var(--token-color-foreground-strong);
+    display: flex;
+    flex-direction: row;
+    margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
+    min-width: 0;
+    padding: 0 $hds-breadcrumb-item-visual-horizontal-padding;
+}
+
+// SUB-ELEMENTS
+
+.hds-breadcrumb__icon {
+    flex: none;
+    margin-right: 6px;
+    height: 13px;
+    width: 13px;
+}
+
+.hds-breadcrumb__text {
+    font-family: var(--token-typography-font-stack-text);
+    font-size: 0.8125rem; // 13px
+    line-height: 1rem; // 16px
+    overflow: hidden;
+    // we use the extra vertical padding to force the height of the parent item to be exactly $hds-breadcrumb-item-height
+    padding: calc((#{$hds-breadcrumb-item-height} - 1rem) / 2) 0;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .hds-breadcrumb__sublist & {
+        white-space: normal;
+    }
+}
+
+// TRUNCATION
+
+.hds-breadcrumb__truncation-toggle {
+    align-items: center;
+    background-color: transparent;
+    border: 1px solid transparent; // We need this to be transparent for a11y
+    border-radius: $hds-breadcrumb-item-border-radius;
+    color: var(--token-color-foreground-faint);
+    cursor: pointer;
+    display: flex;
+    flex: none;
+    height: $hds-breadcrumb-item-height;
+    justify-content: center;
+    margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // the horizontal negative margin applied here is for visual balance of the spacing between items
+    outline: none; // TODO check with @melanie
+    padding: 0;
+    width: $hds-breadcrumb-item-height;
+
+    // we apply the focus directly to the element, without using a pseudo-element
+    @include hds-focus-ring-basic();
+
+    &:hover,
+    &.is-hover {
+        border-color: var(--token-color-border-strong);
+        color: var(--token-color-foreground-faint);
+    }
+    &:active,
+    &.is-active {
+        background-color: var(--token-color-surface-interactive-active);
+        border-color: var(--token-color-border-strong);
+        color: var(--token-color-foreground-primary);
+    }
+    &:focus,
+    &.is-focus {
+        background-color: transparent;
+        border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
+    }
+}
+
+.hds-breadcrumb__truncation-content {
+    background-color: var(--token-color-surface-primary);
+    border-radius: 6px;
+    box-shadow: var(--token-surface-high-box-shadow);
+    left: -$hds-breadcrumb-item-visual-horizontal-padding;
+    margin-top: 4px;
+    max-width: 200px; // by design
+    padding: 6px 12px;
+    position: absolute;
+    top: 100%;
+    width: max-content;
+    z-index: 300; // this is the z-index used in Structure for this kind of things, I am reusing the same value
+}

package/app/styles/components/button.scss

@@ -59,6 +59,8 @@ $hds-button-focus-border-width: 3px;
 
   &:focus,
   &.is-focus {
+    box-shadow: none;
+
     &::before {
       // the position absolute of an element is computed from the inside of the border of the container
       // so we have to take in account the border width of the pseudo-element container itself
@@ -141,6 +143,7 @@ $size-props: (
 .hds-button--color-primary {
   background-color: var(--token-color-palette-blue-200);
   border-color: var(--token-color-palette-blue-300);
+  box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-high-contrast);
 
   &:focus,
@@ -183,6 +186,7 @@ $size-props: (
 .hds-button--color-secondary {
   background-color: var(--token-color-surface-faint);
   border-color: var(--token-color-border-strong);
+  box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-primary);
 
   &:focus,
@@ -213,9 +217,59 @@ $size-props: (
   }
 }
 
+.hds-button--color-tertiary {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--token-color-foreground-action);
+
+  &:focus,
+  &.is-focus {
+    border-color: var(--token-color-focus-action-internal);
+    color: var(--token-color-foreground-action);
+    &::before {
+      border-color: var(--token-color-focus-action-external);
+    }
+  }
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
+    color: var(--token-color-foreground-action-hover);
+    cursor: pointer;
+  }
+  &:active,
+  &.is-active {
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+    box-shadow: none;
+    color: var(--token-color-foreground-action-active);
+    &::before {
+      border-color: transparent;
+    }
+  }
+
+  &:disabled,
+  &[disabled],
+  &.is-disabled,
+  &:disabled:focus,
+  &[disabled]:focus,
+  &.is-disabled:focus,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.is-disabled:hover {
+    background-color: transparent;
+    border-color: transparent;
+
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
 .hds-button--color-critical {
   background-color: var(--token-color-surface-critical);
   border-color: var(--token-color-foreground-critical-on-surface);
+  box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-critical-on-surface);
 
   &:focus,

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

@@ -2,14 +2,14 @@
 // - https://github.com/hashicorp/design-system-components/issues/161
 // - https://www.tpgi.com/focus-visible-and-backwards-compatibility/
 
-@mixin hds-focus-ring-basic() {
+@mixin hds-focus-ring-basic($color: action) {
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent;
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
   &.is-focus {
-    box-shadow: var(--token-focus-ring-box-shadow);
+    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
   &:focus:not(:focus-visible) {
@@ -17,7 +17,7 @@
   }
   // set focus for browsers that support ":focus-visible"
   &:focus-visible {
-    box-shadow: var(--token-focus-ring-box-shadow);
+    box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
@@ -26,7 +26,7 @@
   }
 }
 
-@mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px) {
+@mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px, $color: action) {
   isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent;
@@ -48,7 +48,7 @@
   &:focus,
   &.is-focus {
     &::before {
-      box-shadow: var(--token-focus-ring-box-shadow);
+      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
@@ -60,7 +60,7 @@
   // set focus for browsers that support ":focus-visible"
   &:focus-visible {
     &::before {
-      box-shadow: var(--token-focus-ring-box-shadow);
+      box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
     }
   }
   // remove the focus ring on "active + focused" state (by design)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.1.2",
+  "version": "0.3.1",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -34,7 +34,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.6.0",
+    "@hashicorp/design-system-tokens": "^0.7.0",
     "@hashicorp/ember-flight-icons": "^2.0.1",
     "ember-auto-import": "^2.2.3",
     "ember-cli-babel": "^7.26.6",