@hashicorp/design-system-components 2.0.0 → 2.2.0

package/addon/components/hds/side-nav/index.hbs

@@ -0,0 +1,40 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::SideNav::Base class={{this.classNames}} ...attributes {{focus-trap isActive=this.shouldTrapFocus}}>
+  <:root>
+    {{#if this.hasA11yRefocus}}
+      <NavigationNarrator
+        @routeChangeValidator={{@a11yRefocusRouteChangeValidator}}
+        @skipTo="#{{@a11yRefocusSkipTo}}"
+        @skipText={{@a11yRefocusSkipText}}
+        @navigationText={{@a11yRefocusNavigationText}}
+      />
+    {{/if}}
+    {{#if this.isResponsive}}
+      {{! template-lint-disable no-invalid-interactive}}
+      <div class="hds-side-nav__overlay" {{on "click" this.toggleMinimizedStatus}} />
+      {{! template-lint-enable no-invalid-interactive}}
+      <button
+        class="hds-side-nav__menu-toggle-button"
+        type="button"
+        {{on "click" this.toggleMinimizedStatus}}
+        {{! To be localized - see: https://hashicorp.atlassian.net/browse/HDS-567 }}
+        aria-label={{if this.isMinimized "Open menu" "Close menu"}}
+      >
+        <FlightIcon @name={{if this.isMinimized "menu" "x"}} @size="24" @stretched={{true}} />
+      </button>
+    {{/if}}
+  </:root>
+  <:header as |Header|>
+    {{yield (hash Header=Header isMinimized=this.isMinimized) to="header"}}
+  </:header>
+  <:body as |Body|>
+    {{yield (hash Body=Body isMinimized=this.isMinimized) to="body"}}
+  </:body>
+  <:footer as |Footer|>
+    {{yield (hash Footer=Footer isMinimized=this.isMinimized) to="footer"}}
+  </:footer>
+</Hds::SideNav::Base>

package/addon/components/hds/side-nav/index.js

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+
+export default class HdsSideNavComponent extends Component {
+  @tracked isResponsive = this.args.isResponsive ?? true;
+  @tracked isMinimized = this.isResponsive; // we set it minimized by default so that if we switch viewport from desktop to mobile its already minimized
+  @tracked isDesktop = true;
+  hasA11yRefocus = this.args.hasA11yRefocus ?? true;
+
+  desktopMQVal = getComputedStyle(document.documentElement).getPropertyValue(
+    '--hds-app-desktop-breakpoint'
+  );
+
+  constructor() {
+    super(...arguments);
+    this.desktopMQ = window.matchMedia(`(min-width:${this.desktopMQVal})`);
+    this.addEventListeners();
+    registerDestructor(this, () => {
+      this.removeEventListeners();
+    });
+
+    if (this.args.hasA11yRefocus) {
+      assert(
+        '@a11yRefocusSkipTo for NavigatorNarrator (a11y-refocus) in "Hds::SideNav" must have a valid value',
+        this.args.a11yRefocusSkipTo !== undefined
+      );
+    }
+  }
+
+  addEventListeners() {
+    document.addEventListener('keydown', this.escapePress, true);
+    this.desktopMQ.addEventListener('change', this.updateDesktopVariable, true);
+    // set initial state based on viewport
+    this.updateDesktopVariable({ matches: this.desktopMQ.matches });
+  }
+
+  removeEventListeners() {
+    document.removeEventListener('keydown', this.escapePress, true);
+    this.desktopMQ.removeEventListener(
+      'change',
+      this.updateDesktopVariable,
+      true
+    );
+  }
+
+  get shouldTrapFocus() {
+    return this.isResponsive && !this.isDesktop && !this.isMinimized;
+  }
+
+  get classNames() {
+    let classes = []; // `hds-side-nav` is already set by the "Hds::SideNav::Base" component
+
+    // add specific class names for the different possible states
+    if (this.isDesktop) {
+      classes.push('hds-side-nav--is-desktop');
+    } else {
+      classes.push('hds-side-nav--is-mobile');
+    }
+    if (this.isResponsive) {
+      classes.push('hds-side-nav--is-responsive');
+    }
+    if (this.isMinimized) {
+      classes.push('hds-side-nav--is-minimized');
+    } else {
+      classes.push('hds-side-nav--is-not-minimized');
+    }
+
+    return classes.join(' ');
+  }
+
+  @action
+  escapePress(event) {
+    if (event.key === 'Escape' && !this.isMinimized) {
+      this.isMinimized = true;
+    }
+  }
+
+  @action
+  toggleMinimizedStatus() {
+    this.isMinimized = !this.isMinimized;
+
+    let { onToggleMinimizedStatus } = this.args;
+
+    if (typeof onToggleMinimizedStatus === 'function') {
+      onToggleMinimizedStatus(this.isMinimized);
+    }
+  }
+
+  @action
+  updateDesktopVariable(event) {
+    this.isDesktop = event.matches;
+
+    let { onDesktopViewportChange } = this.args;
+
+    if (typeof onDesktopViewportChange === 'function') {
+      onDesktopViewportChange(this.isDesktop);
+    }
+  }
+}

package/addon/components/hds/side-nav/list/index.hbs

@@ -4,6 +4,7 @@
 }}
 
 <nav class="hds-side-nav__list-wrapper" ...attributes>
+  {{yield (hash extraBefore=(component "hds/yield"))}}
   <ul class="hds-side-nav__list" role="list">
     {{yield
       (hash
@@ -14,4 +15,5 @@
       )
     }}
   </ul>
+  {{yield (hash extraAfter=(component "hds/yield"))}}
 </nav>

package/addon/components/hds/side-nav/portal/index.hbs

@@ -0,0 +1,12 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Portal @target={{if @targetName @targetName "hds-side-nav-portal-target"}}>
+  <div class="hds-side-nav__content-panel" ...attributes>
+    <Hds::SideNav::List aria-label={{@ariaLabel}} as |ListElements|>
+      {{yield ListElements}}
+    </Hds::SideNav::List>
+  </div>
+</Portal>

package/addon/components/hds/side-nav/portal/target.hbs

@@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class="hds-side-nav__content" ...attributes>
+  <PortalTarget
+    @multiple={{true}}
+    @onChange={{this.panelsChanged}}
+    @name={{if @targetName @targetName "hds-side-nav-portal-target"}}
+    class="hds-side-nav__content-panels hds-side-nav-hide-when-minimized"
+    {{did-update this.didUpdateSubnav this.numSubnavs}}
+  />
+</div>

package/addon/components/hds/side-nav/portal/target.js

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { DEBUG } from '@glimmer/env';
+import Ember from 'ember';
+import { debounce } from '@ember/runloop';
+
+export default class SidenavPortalTarget extends Component {
+  @service router;
+
+  @tracked numSubnavs = 0;
+
+  static get prefersReducedMotionOverride() {
+    return Ember.testing;
+  }
+
+  prefersReducedMotionMQ = window.matchMedia(
+    '(prefers-reduced-motion: reduce)'
+  );
+
+  get prefersReducedMotion() {
+    return (
+      this.constructor.prefersReducedMotionOverride ||
+      (this.prefersReducedMotionMQ && this.prefersReducedMotionMQ.matches)
+    );
+  }
+
+  @action
+  panelsChanged(portalCount) {
+    this.numSubnavs = portalCount;
+  }
+
+  @action
+  didUpdateSubnav(element, [count]) {
+    debounce(this, 'animateSubnav', element, [count], 100);
+  }
+
+  @action
+  animateSubnav(element, [count]) {
+    /*
+     * Here is what the layout looks like for this setup
+     *
+
+                                    SideNav
+                                    +----------------------+
+                                    | +------------------+ |
+                                    | |    ("header")    | |
+                                    | +------------------+ |
+                                    |                      |
+                                    | +------------------+ |
+                                    | |    ("body")      | |
+        (PortalTarget)              | |                  | |
+        +----------------------------------------------+ | |
+        | +----------+  +----------+  |  +----------+  | | |
+        | | (Portal) |  | (Portal) |     | (Portal) |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |  hidden  |  |  hidden  |     | *active* |  | | |
+        | |   panel  |  |   panel  |  |  |   panel  |  | | |
+        | |          |  |          |     |          |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |          |  |          |     |          |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |          |  |          |     |          |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |          |  |          |     |          |  | | |
+        | +----------+  +----------+  |  +----------+  | | |
+        +----------------------------------------------+ | |
+                                    | |                  | |
+                                    | +------------------+ |
+                                    |                      |
+                                    | +------------------+ |
+                                    | |    ("footer")    | |
+                                    | +------------------+ |
+                                    +----------------------+
+
+     *
+     * every time `HcAppFrame::SideNav::Portal` renders, it contains a portaled "panel"
+     * that is rendered into the `hds-side-nav__content-panels` (inside the PortalTarget).
+     *
+     * Rendering or unrendering other `HcAppFrame::SideNav::Portal`s triggers the number of
+     * subnavs to change (via `numSubnavs`), so this function runs and slides
+     * `hds-side-nav__content-panels` left or right using the `element.animate` api.
+     *
+     * */
+
+    let activeIndex = count - 1;
+    let targetElement = element;
+    let { prefersReducedMotion } = this;
+
+    let styles = getComputedStyle(targetElement);
+    let columnWidth = styles.getPropertyValue(
+      '--hds-app-sidenav-width-expanded'
+    );
+    let slideDuration = prefersReducedMotion ? 0 : 150;
+    let fadeDuration = prefersReducedMotion ? 0 : 175;
+    let fadeDelay = prefersReducedMotion ? 0 : 50;
+
+    // slide entire parent panel
+    let start = styles.transform;
+    let end = `translateX(-${activeIndex * parseInt(columnWidth, 10)}px)`;
+    let anim = targetElement.animate(
+      [{ transform: start }, { transform: end }],
+      {
+        duration: slideDuration,
+        easing: 'cubic-bezier(0.65, 0, 0.35, 1)',
+        fill: 'forwards',
+      }
+    );
+    // Notice: we don't add the styles by default because it writes a `style` attribute to the element and it causes an additional re-render
+    if (DEBUG) {
+      anim.commitStyles();
+    }
+    anim.finished.then(() => {
+      // uncomment this if we need/want to scroll the element to the top
+      // targetElement.scrollIntoView(true);
+      if (activeIndex > 0) {
+        let allPrev = Array.from(targetElement.children).slice(0, activeIndex);
+        for (let ele of allPrev) {
+          ele.ariaHidden = 'true';
+          ele.style.setProperty('visibility', 'hidden');
+          ele.style.setProperty('opacity', '0');
+        }
+      }
+      // Notice: we don't add the styles by default because it writes a `style` attribute to the element and it causes an additional re-render
+      if (DEBUG) {
+        // Check the visibility of the element before attempting to commitStyles.
+        if (targetElement.offsetParent !== null) {
+          anim.commitStyles();
+        }
+      }
+    });
+
+    // fade in next panel
+    let nextPanelEl = targetElement.children[activeIndex];
+    if (nextPanelEl) {
+      nextPanelEl.ariaHidden = 'false';
+      nextPanelEl.style.setProperty('visibility', 'visible');
+      // this eliminates a flicker if there's only 1 subnav rendering
+      if (activeIndex === 0) {
+        fadeDelay = 0;
+        fadeDuration = 0;
+      }
+      nextPanelEl.animate([{ opacity: '0' }, { opacity: '1' }], {
+        delay: fadeDelay,
+        duration: fadeDuration,
+        fill: 'forwards',
+      });
+    }
+  }
+}

package/app/components/hds/{empty-state/body.js → app-frame/index.js}

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/empty-state/body';
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/index';

package/app/components/hds/app-frame/parts/footer.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/footer';

package/app/components/hds/app-frame/parts/header.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/header';

package/app/components/hds/{empty-state/footer.js → app-frame/parts/main.js}

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/empty-state/footer';
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/main';

package/app/components/hds/app-frame/parts/modals.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/modals';

package/app/components/hds/app-frame/parts/sidebar.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-frame/parts/sidebar';

package/app/components/hds/application-state/body.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/application-state/body';

package/app/components/hds/application-state/footer.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/application-state/footer';

package/app/components/hds/application-state/header.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/application-state/header';

package/app/components/hds/application-state/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/application-state/index';

package/app/components/hds/dropdown/footer.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/footer';

package/app/components/hds/dropdown/header.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/header';

package/app/components/hds/dropdown/list-item/checkbox.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/checkbox';

package/app/components/hds/dropdown/list-item/checkmark.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/checkmark';

package/app/components/hds/dropdown/list-item/radio.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/radio';

package/app/components/hds/{side-nav/wrapper.js → flyout/footer.js}

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/side-nav/wrapper';
+export { default } from '@hashicorp/design-system-components/components/hds/flyout/footer';

package/app/components/hds/side-nav/base.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/base';

package/app/components/hds/side-nav/{home-link.js → header/home-link.js}

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/side-nav/home-link';
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/header/home-link';

package/app/components/hds/side-nav/{icon-button.js → header/icon-button.js}

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/side-nav/icon-button';
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/header/icon-button';

package/app/components/hds/{empty-state → side-nav}/index.js

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/empty-state/index';
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/index';

package/app/components/hds/{empty-state/header.js → side-nav/portal/index.js}

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/empty-state/header';
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/portal/index';

package/app/components/hds/side-nav/portal/target.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/portal/target';

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

@@ -13,6 +13,8 @@
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
 // START COMPONENTS CSS FILES IMPORTS
 @use "../components/alert";
+@use "../components/app-frame";
+@use "../components/application-state";
 @use "../components/avatar";
 @use "../components/badge";
 @use "../components/badge-count";
@@ -23,7 +25,6 @@
 @use "../components/disclosure";
 @use "../components/dismiss-button";
 @use "../components/dropdown";
-@use "../components/empty-state";
 @use "../components/flyout";
 @use "../components/form"; // multiple components
 @use "../components/icon-tile";

package/app/styles/@hashicorp/design-system-power-select-overrides.scss

@@ -92,7 +92,7 @@
       background-color: var(--token-form-control-base-surface-color-default);
       border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
       border-radius: var(--token-form-control-border-radius);
-      box-shadow: var(--hds-elevation-inset-box-shadow);
+      box-shadow: var(--token-elevation-inset-box-shadow);
 
       // PLACEHOLDER
 
@@ -193,6 +193,17 @@
     }
   }
 
+  .ember-power-select-option--no-matches-message {
+    padding: 8px;
+
+    &:hover {
+      color: inherit;
+      background-color: inherit;
+      border-color: transparent;
+      cursor: default;
+    }
+  }
+
   .ember-power-select-multiple-trigger {
     padding-top: calc(var(--token-form-control-padding) - 3px);
     padding-bottom: calc(var(--token-form-control-padding) - 3px);
@@ -203,7 +214,6 @@
   .ember-power-select-multiple-option {
     display: inline-flex;
     align-items: stretch;
-    float: none;
     margin: 4px 4px 4px 0;
     padding: 3px 10px 5px 10px;
     color: var(--token-color-foreground-primary);
@@ -212,7 +222,7 @@
     font-family: var(--token-typography-font-stack-text);
     line-height: 1rem; // 16px
     vertical-align: middle;
-    background-color: var(--token-color-surface-interactive);
+    background-color: inherit;
     border: 1px solid var(--token-color-border-strong);
     border-radius: 50px;
   }
@@ -232,6 +242,26 @@
     }
   }
 
+  .ember-power-select-trigger-multiple-input {
+    margin: 4px 4px 4px 0;
+
+    &:disabled {
+      display: none;
+    }
+
+    &::-webkit-search-cancel-button {
+      width: var(--token-form-text-input-background-image-size);
+      height: var(--token-form-text-input-background-image-size);
+      background-image: var(--token-form-text-input-background-image-data-url-search-cancel);
+      background-position: center center;
+      background-size: var(--token-form-text-input-background-image-size);
+      cursor: pointer;
+      // stylelint-disable-next-line property-no-vendor-prefix
+      -webkit-appearance: none;
+    }
+  }
+
+
   .hds-power-select__after-options {
     padding: 8px;
     color: var(--token-color-foreground-primary);

package/app/styles/components/app-frame.scss

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// APP-FRAME
+//
+
+.hds-app-frame {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "sidebar main"
+    "sidebar footer";
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr;
+  min-height: 100vh;
+}
+
+
+// FRAME'S CONTAINERS
+
+.hds-app-frame__header {
+  z-index: 7;
+  grid-area: header;
+}
+
+.hds-app-frame__sidebar {
+  z-index: 6;
+  grid-area: sidebar;
+}
+
+.hds-app-frame__main {
+  grid-area: main;
+}
+
+.hds-app-frame__footer {
+  z-index: 5;
+  grid-area: footer;
+}
+
+
+// MODALS "CONTAINER"
+
+.hds-app-frame__modals {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+
+  // since the content is injected via DOM manipulation, there's no issues of whitespace generated by Ember
+  // that make this approach unreliable (in some cases), so we can safely use it to controls its display
+  &:empty {
+    display: none;
+  }
+}