@hashicorp/design-system-components 0.2.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @hashicorp/design-system-components
 
+## 0.3.2
+
+### Patch Changes
+
+- [#112](https://github.com/hashicorp/design-system/pull/112) [`2be08081`](https://github.com/hashicorp/design-system/commit/2be08081582dd7e9c092fdb35c94c063d5ee7f4e) Thanks [@didoo](https://github.com/didoo)! - added missing helpers for “color” and “typography” in “components” package
+
+## 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

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

@@ -0,0 +1,5 @@
+<nav class={{this.classNames}} 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

@@ -167,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}}"

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

@@ -1,10 +1,13 @@
 // these are files coming from the 'design-system-tokens' package
 @use "tokens";
+@use "helpers/color";
 @use "helpers/elevation";
 @use "helpers/focus-ring";
+@use "helpers/typography";
 
 @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/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.2.0",
+  "version": "0.3.2",
   "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",