@hashicorp/design-system-components 0.10.0 → 0.11.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @hashicorp/design-system-components
 
+## 0.11.2
+
+### Patch Changes
+
+- [#301](https://github.com/hashicorp/design-system/pull/301) [`4976379e`](https://github.com/hashicorp/design-system/commit/4976379e1b080c7753ceee2affe8cadc053296e5) Thanks [@alex-ju](https://github.com/alex-ju)! - Convey the disclosure state to assistive tech for dropdown and truncated breadcrumbs
+
+## 0.11.1
+
+### Patch Changes
+
+- [#284](https://github.com/hashicorp/design-system/pull/284) [`ba409885`](https://github.com/hashicorp/design-system/commit/ba409885468f91d659d10971fa1f34f64f57ddbc) Thanks [@alex-ju](https://github.com/alex-ju)! - Change focus management in disclosure utility component
+
+* [#289](https://github.com/hashicorp/design-system/pull/289) [`bf3a00e5`](https://github.com/hashicorp/design-system/commit/bf3a00e56989bbef92bfa355a42e5775785847a3) Thanks [@didoo](https://github.com/didoo)! - "Alert" and "Toast" components - converted "title" and "description" arguments to be contextual components
+
+## 0.11.0
+
+### Minor Changes
+
+- [#245](https://github.com/hashicorp/design-system/pull/245) [`c6de1018`](https://github.com/hashicorp/design-system/commit/c6de101880ec1c21971e3775e1a21b6cb9e69757) Thanks [@didoo](https://github.com/didoo)! - - Added `Alert` component
+  - Added `Toast` component
+
+### Patch Changes
+
+- [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)! - - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components)
+  - updated focus state treatment for `Dropdown` component
+
+* [#225](https://github.com/hashicorp/design-system/pull/225) [`f1f07179`](https://github.com/hashicorp/design-system/commit/f1f0717952b3e6b41676135cf00e77a6e55579ec) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - update to ember-keyboard@8.1.0 in packages/components
+
+- [#265](https://github.com/hashicorp/design-system/pull/265) [`79bc3e99`](https://github.com/hashicorp/design-system/commit/79bc3e99cd5cc6cb60fc82286d5726c0d0ffbd82) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - npx ember-cli-update@4.3.0 dependency updates
+
+* [#253](https://github.com/hashicorp/design-system/pull/253) [`21786983`](https://github.com/hashicorp/design-system/commit/21786983d4ebbb3f38a72d4d105504169bfeda78) Thanks [@MelSumner](https://github.com/MelSumner)! - bugfix for icon size in copy-item component
+
 ## 0.10.0
 
 ### Minor Changes

package/NEW-COMPONENT-CHECKLIST.md

@@ -5,13 +5,74 @@ This is the quest issue/engineering checklist for the COMPONENT_NAME Component.
 ## Pre-Flight Checklist
 Update this list and these links as appropriate.
 
-- [Component Requirement Document (CRD)](url_here): This file should exist before any code is written.
-- [FIGMA Design](url_here): Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however.
-- [Design System Website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) (storybook of storybooks): use for reference, to consider existing features that we might need to replicate in the component.
+- [Component Audit](https://www.figma.com/file/h3LtloARmbYVwh7z6XWHVb/Component-Audits-FY23?node-id=0%3A1): This audit should be completed by ambassadors before any work gets started.
+- [Component Requirement Document (CRD)](https://docs.google.com/document/d/1kGcdfnb_z5tVUUvkSJGQPOssNd1yl2SVyd7bqk1KXII/): This file should exist before any design explorations or code is written.
+- ["System of Systems" Storybook](https://unofficial-design-system-search.vercel.app) (storybook of storybooks): use for reference, to consider existing features that we might need to replicate in the component.
+
+
+## Design Checklist
+The design checklist has 5 parts:
+1. creating the branch
+2. design explorations and iterations
+3. documentation
+4. release
+5. testing
+
+The design process is largely cyclical, so some of these steps may need to be repeated until approval.
+
+### Component Creation
+- [ ] [create a branch](https://help.figma.com/hc/en-us/articles/360063144053-Create-branches-and-merge-changes#Create_a_branch) in the [product components ui kit](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components)
+- [ ] add a new page for the component, as needed
+- [ ] copy & paste the [stickersheet template](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components?node-id=2279%3A26800) found in UI Helpers to the new page
+  - [ ] update the status badge to "In progress"
+  - [ ] change "{DOC TYPE}" to "STICKERSHEET"
+  - [ ] change "{Component name}" to the name of the component
+  - [ ] delete the sunset notice
+- [ ] **design**
+  - [ ] work through design explorations, providing 2-3 visual directions based on existing [foundations](https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?node-id=2916%3A4) and patterns, as well as the findings from the audit and requirements from the CRD
+  - [ ] review with appropriate stakeholders (typically HDS designers, engineering partner, ambassadors) and iterate
+  - [ ] review for a11y considerations and iterate, as necessary
+  - [ ] review with design leadership and iterate, as necessary
+  - [ ] once approved, build out the design as a component
+    - ensure the variant and property names align with what was discussed/decided on with your engineering partner
+  - [ ] test the component with HDS designers and iterate, as necessary
+  - [ ] sync with your engineering partner (pseudo handoff)
+    - let them know it's been design approved and discuss any remaining questions (this should be an ongoing process as well)
+- [ ] **documentation**
+  - all documentation should be contained within frames so it can be easily linked to
+  - [ ] stickersheet
+    - make sure the component instances can be easily selected and other layers are locked
+  - [ ] design guidelines
+    - when complete, lock this frame
+  - [ ] figma tips, as necessary
+    - when complete, lock this frame
+  - [ ] migration details, as necessary
+    - when complete, lock this frame
+  - [ ] let your engineering partner know that design guidelines are ready to be added to the scrappy site (they will add it themselves)
+- [ ] **release**
+  - [ ] lock and hide the components leaving only the stickersheets and docs visible, and change the header's badge to Experimental
+  - [ ] add release notes to the changelog
+  - [ ] review with situationally appropriate reviewers to get final approval
+  - [ ] merge the branch
+  - [ ] publish the ui kit
+    - Important: do not communicate this release to consumers yet! (this will be done later in the process)
+- [ ] **testing**
+  - [ ] add a new page to the [playground](https://www.figma.com/file/95YqaJF4TNV72ucXbyC7A0/Playground?node-id=302%3A10) file and prepare a frame for each ambassador to test
+    - provide a variety (basic to complex) of screenshots to recreate based on real world examples from the audit
+  - [ ] test the component with ambassadors
+  - if iterations are needed, work through the process until approved (don't forget to branch!)
+- [ ] **final release**
+  - this comes after ambassadors have tested the component in Figma and no other adjustments are needed
+  - [ ] if changes were required, follow the steps under "release" again
+  - [ ] share about the release in the slack channel [#team-design-systems](https://hashicorp.slack.com/archives/C7KTUHNUS) and let consumers know that the component is available for use in Figma
+
 
 ## Engineering Checklist
 The engineering checklist has six parts: creating the feature branch, component template, component backing class, component style, tests, and documentation.
 
+### Dependency
+- Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however.
+
 ### Component Creation
 
 - [ ] create new branch from main for the component (`git checkout -b USER/COMPONENT-NAME`)

package/README.md

@@ -9,8 +9,8 @@ A package containing the components for the HashiCorp Design System.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.20 or above
-* Ember CLI v3.20 or above
+* Ember.js v3.24 or above
+* Ember CLI v3.24 or above
 * Node.js v12 or above
 
 

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

@@ -0,0 +1 @@
+<div class="hds-alert__description" ...attributes>{{yield}}</div>

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

@@ -0,0 +1,31 @@
+<div class={{this.classNames}} role="alert" aria-live="polite" ...attributes>
+  {{#if this.icon}}
+    <div class="hds-alert__icon">
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} @isInlineBlock={{false}} />
+    </div>
+  {{/if}}
+
+  <div class="hds-alert__content">
+    <div class="hds-alert__text">
+      {{yield (hash Title=(component "hds/alert/title"))}}
+      {{yield (hash Description=(component "hds/alert/description"))}}
+    </div>
+
+    <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")
+        )
+      }}
+    </div>
+    {{yield (hash Generic=(component "hds/yield"))}}
+  </div>
+
+  {{#if this.onDismiss}}
+    <button class="hds-alert__dismiss" type="button" aria-label="Dismiss" {{on "click" this.onDismiss}}>
+      <FlightIcon @name="x" @size="16" @isInlineBlock={{false}} />
+    </button>
+  {{/if}}
+</div>

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

@@ -0,0 +1,128 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const TYPES = ['page', 'inline', 'compact'];
+export const DEFAULT_COLOR = 'neutral';
+export const COLORS = [
+  'neutral',
+  'highlight',
+  'success',
+  'warning',
+  'critical',
+];
+export const MAPPING_COLORS_TO_ICONS = {
+  neutral: 'info',
+  highlight: 'info',
+  success: 'check-circle',
+  warning: 'alert-triangle',
+  critical: 'alert-diamond',
+};
+
+export default class HdsAlertIndexComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    assert(
+      `@type for "Hds::Alert" must be one of the following: ${TYPES.join(
+        ', '
+      )}; received: ${this.args.type}`,
+      TYPES.includes(this.args.type)
+    );
+  }
+
+  /**
+   * @param color
+   * @type {enum}
+   * @default neutral
+   * @description Determines the color scheme for the alert.
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Alert" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param icon
+   * @type {string}
+   * @default null
+   * @description The name of the icon to be used.
+   */
+  get icon() {
+    let { icon } = this.args;
+
+    // If `icon` isn't passed, use the pre-defined one from `color`
+    if (icon === undefined) {
+      if (this.args.type === 'compact') {
+        // for the "compact" type by default we use filled icons
+        return `${MAPPING_COLORS_TO_ICONS[this.color]}-fill`;
+      } else {
+        // for all the other types by default we use outlined icons
+        return MAPPING_COLORS_TO_ICONS[this.color];
+      }
+      // If `icon` is set explicitly to false, user doesn't want any icon in the alert
+    } else if (icon === false) {
+      assert(
+        `@icon for "Hds::Alert" with @type "compact" is required`,
+        this.args.type !== 'compact'
+      );
+
+      return false;
+    } else {
+      // If a name for `icon` is passed, set FlightIcon to that name
+      return icon;
+    }
+  }
+
+  /**
+   * @param onDismiss
+   * @type {function}
+   * @default () => {}
+   */
+  get onDismiss() {
+    let { onDismiss } = this.args;
+
+    if (typeof onDismiss === 'function') {
+      return onDismiss;
+    } else {
+      return false;
+    }
+  }
+
+  /**
+   * @param iconSize
+   * @type {string}
+   * @description ensures that the correct icon size is used. Automatically calculated.
+   */
+  get iconSize() {
+    if (this.args.type === 'compact') {
+      return '16';
+    } else {
+      return '24';
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method Alert#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-alert'];
+
+    // Add a class based on the @type argument
+    classes.push(`hds-alert--type-${this.args.type}`);
+
+    // Add a class based on the @color argument
+    classes.push(`hds-alert--color-${this.color}`);
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1 @@
+<div class="hds-alert__title" ...attributes>{{yield}}</div>

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

@@ -7,6 +7,7 @@
           {{if @hover 'is-hover'}}
           {{if @active 'is-active'}}
           {{if @focus 'is-focus'}}"
+        aria-expanded={{if t.isOpen "true" "false"}}
         {{on "click" t.onClickToggle}}
       >
         <FlightIcon @name="more-horizontal" @size="16" @isInlineBlock={{false}} />

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

@@ -1,16 +1,16 @@
-<div class="hds-disclosure" ...attributes>
-  <div class="hds-disclosure__toggle">
-    {{yield (hash onClickToggle=this.onClickToggle isActive=this.isActive) to="toggle"}}
+{{! template-lint-disable no-invalid-interactive }}
+<div
+  class="hds-disclosure"
+  ...attributes
+  {{did-insert this.didInsert}}
+  {{on "focusout" this.onFocusOut}}
+  {{on "keyup" this.onKeyUp}}
+>
+  <div class="hds-disclosure__toggle" tabindex="-1">
+    {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen) to="toggle"}}
   </div>
-  {{#if this.isActive}}
-    <div
-      class="hds-disclosure__content"
-      {{focus-trap
-        isActive=this.isActive
-        shouldSelfFocus=false
-        focusTrapOptions=(hash clickOutsideDeactivates=this.clickOutsideDeactivates onDeactivate=this.onDeactivate)
-      }}
-    >
+  {{#if this.isOpen}}
+    <div class="hds-disclosure__content" tabindex="-1">
       {{yield to="content"}}
     </div>
   {{/if}}

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

@@ -3,45 +3,52 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class HdsDisclosureComponent extends Component {
-  @tracked isActive; // notice: if in the future we need to add a "@isActive" prop to control the status from outside (eg to have the Disclosure opened on render) just add  "this.args.isActive" here to initalize the variable
+  @tracked isOpen; // notice: if in the future we need to add a "@isOpen" prop to control the status from outside (eg to have the Disclosure opened on render) just add  "this.args.isOpen" here to initalize the variable
   @tracked toggleRef;
   @tracked isToggleClicked;
 
+  @action
+  didInsert(element) {
+    this.element = element;
+  }
+
   @action
   onClickToggle(event) {
     // we store a reference to the DOM node that has the "onClickToggle" event associated with it
     if (!this.toggleRef) {
       this.toggleRef = event.currentTarget;
     }
-    this.isActive = !this.isActive;
+    this.isOpen = !this.isOpen;
+    // we explicitly apply a focus state to the toggle element to overcome a bug in WebKit (see b8abfcf)
+    this.toggleRef.focus();
   }
 
   @action
-  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
-    // 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;
+  onFocusOut(event) {
+    if (
+      !event.relatedTarget || // click or tap a non-related target (e.g. outside the element)
+      !this.element.contains(event.relatedTarget) // move focus to a target outside the element
+    ) {
+      this.deactivate();
+    }
   }
 
   @action
-  onDeactivate() {
-    // on deactivate we hide the content, except for the case when the button has been clicked
-    // the reason is that the "onClickToggle" is called in any case (there's no way to block the event)
-    // so when the user clicks the toggle to close the panel, we let the "onClickToggle" handle the closure
-    // otherwise we would have two changes of status, this and the toggle, and the panel would remain open
-    if (!this.isToggleClicked) {
-      this.isActive = false;
-      // we need to reset this check
-      this.isToggleClicked = false;
-      // we call the "onClose" callback if it exists (and is a function)
-      if (this.args.onClose && typeof this.args.onClose === 'function') {
-        this.args.onClose();
-      }
+  onKeyUp(event) {
+    if (event.key === 'Escape') {
+      this.deactivate();
+      this.toggleRef.focus();
+    }
+  }
+
+  @action
+  deactivate() {
+    if (this.isOpen) {
+      this.isOpen = false;
+    }
+    // we call the "onClose" callback if it exists (and is a function)
+    if (this.args.onClose && typeof this.args.onClose === 'function') {
+      this.args.onClose();
     }
   }
 }

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

@@ -2,8 +2,8 @@
   <:toggle as |t|>
     {{yield
       (hash
-        ToggleButton=(component "hds/dropdown/toggle/button" isOpen=t.isActive onClick=t.onClickToggle)
-        ToggleIcon=(component "hds/dropdown/toggle/icon" isOpen=t.isActive onClick=t.onClickToggle)
+        ToggleButton=(component "hds/dropdown/toggle/button" isOpen=t.isOpen onClick=t.onClickToggle)
+        ToggleIcon=(component "hds/dropdown/toggle/icon" isOpen=t.isOpen onClick=t.onClickToggle)
       )
     }}
   </:toggle>

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

@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class HdsDropdownListItemCopyItemComponent extends Component {
-  @tracked isSuccess = this.args.isSuccess ?? false;
+  @tracked isSuccess = false;
 
   /**
    * @param text
@@ -37,12 +37,19 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
   }
 
   @action
-  copyCode() {
-    navigator.clipboard.writeText(this.args.text);
-    // this if statement resolves to [object Promise] so maybe some improvements
-    // could be made here
-    if (navigator.clipboard.readText()) {
+  async copyCode() {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
+    await navigator.clipboard.writeText(this.args.text);
+    const result = await navigator.clipboard.readText();
+
+    if (result === this.args.text) {
       this.isSuccess = true;
+      // console.log(`result is ${result}`);
+
+      // make it fade back to the default state
+      setTimeout(() => {
+        this.isSuccess = false;
+      }, 1000);
     }
   }
 }

package/addon/components/hds/dropdown/toggle/button.hbs

@@ -19,5 +19,6 @@
   @iconPosition="trailing"
   @color={{this.color}}
   ...attributes
+  aria-expanded={{if @isOpen "true" "false"}}
   {{on "click" this.onClick}}
 />

package/addon/components/hds/dropdown/toggle/icon.hbs

@@ -1,4 +1,11 @@
-<button class={{this.classNames}} aria-label={{this.text}} ...attributes {{on "click" this.onClick}} type="button">
+<button
+  class={{this.classNames}}
+  aria-label={{this.text}}
+  ...attributes
+  aria-expanded={{if @isOpen "true" "false"}}
+  {{on "click" this.onClick}}
+  type="button"
+>
   <div class="hds-dropdown-toggle-icon__wrapper">
     {{#if @imageSrc}}
       <img src={{@imageSrc}} alt="" role="presentation" height="32" width="32" />

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

@@ -0,0 +1,20 @@
+<Hds::Alert
+  class="hds-toast"
+  @type="inline"
+  @color={{@color}}
+  @icon={{@icon}}
+  @onDismiss={{@onDismiss}}
+  ...attributes
+  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
+    )
+  }}
+</Hds::Alert>

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

@@ -0,0 +1,3 @@
+<div ...attributes>
+  {{yield}}
+</div>

package/app/components/hds/alert/description.js

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

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

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

package/app/components/hds/alert/title.js

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

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

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

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

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

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

@@ -5,6 +5,7 @@
 @use "helpers/focus-ring";
 @use "helpers/typography";
 
+@use "../components/alert";
 @use "../components/badge";
 @use "../components/badge-count";
 @use "../components/breadcrumb";
@@ -15,6 +16,7 @@
 @use "../components/icon-tile";
 @use "../components/link/cta";
 @use "../components/link/standalone";
+@use "../components/toast";
 
 .sr-only {
 	border: 0 !important;