@hashicorp/design-system-components 2.1.0 → 2.2.0

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/{side-nav/wrapper.js → app-frame/index.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/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/{side-nav/icon-button.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/side-nav/icon-button';
+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/{side-nav/home-link.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/home-link';
+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/header/home-link.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/header/home-link';

package/app/components/hds/side-nav/header/icon-button.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/header/icon-button';

package/app/components/hds/side-nav/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/side-nav/index';

package/app/components/hds/side-nav/portal/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/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,7 @@
 // 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";

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

@@ -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;
+  }
+}

package/app/styles/components/dropdown.scss

@@ -14,6 +14,17 @@
 
 $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
+// DROPDOWN
+
+.hds-dropdown--is-inline {
+  display: inline-block;
+
+  .hds-dropdown-toggle-icon,
+  .hds-dropdown-toggle-button {
+    display: inline-flex;
+  }
+}
+
 // TOGGLE/ICON
 
 .hds-dropdown-toggle-icon {

package/app/styles/components/flyout.scss

@@ -45,7 +45,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 50;
+  z-index: 49;
   background: var(--token-color-palette-neutral-700);
   opacity: 0.5;
 }
@@ -91,6 +91,20 @@
   border-top: 1px solid var(--token-color-border-primary);
 }
 
+.hds-flyout__footer {
+  flex: none;
+  padding: 16px 24px;
+  background: var(--token-color-surface-faint);
+  border-top: 1px solid var(--token-color-border-primary);
+
+  // Tertiary buttons must always be placed/aligned at the end of the row
+  .hds-button-set {
+    .hds-button--color-tertiary {
+      margin-left: auto;
+    }
+  }
+}
+
 .hds-flyout--size-medium {
   @include hds-flyout-position(480px);
 }

package/app/styles/components/form/textarea.scss

@@ -13,6 +13,7 @@
 .hds-form-textarea {
   width: 100%;
   max-width: 100%;
+  min-height: 36px;
   padding: var(--token-form-control-padding);
   color: var(--token-form-control-base-foreground-value-color);
   background-color: var(--token-form-control-base-surface-color-default);

package/app/styles/components/side-nav/a11y-refocus.scss

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > A11Y-REFOCUS "SKIP LINK"
+//
+
+.hds-side-nav { // this extra qualifier is needed to increase specificity of the selector, please don't remove it
+  .ember-a11y-refocus-skip-link {
+    top: 10px;
+    left: 10px;
+    z-index: 20;
+    width: max-content;
+    padding: 2px 10px 4px;
+    color: var(--token-color-foreground-action);
+    font-size: var(--token-typography-display-200-font-size);
+    font-family: var(--token-typography-display-200-font-family);
+    line-height: var(--token-typography-display-200-line-height);
+    background-color: var(--token-color-surface-faint);
+    border-radius: 3px;
+    transform: translateY(-200%);
+    transition: 0.6s ease-in-out;
+
+    &:focus {
+      transform: translateY(0);
+    }
+  }
+}

package/app/styles/components/side-nav/content.scss

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > CONTENT (PORTALS + LISTS OF ITEMS/LINKS)
+//
+
+@use "../../mixins/focus-ring" as *;
+
+
+// PANELS (wrappers used in conjunction with the portal elements)
+
+.hds-side-nav__content {
+  // we use this trick (increasing the container size here, and reducing it at single panel level)
+  // to have the panels width match the sidebar extended width (it's used in the animated sliding of the panels)
+  margin: 0 calc(var(--token-side-nav-wrapper-padding-horizontal) * -1);
+}
+
+.hds-side-nav__content-panels {
+  // see https://codepen.io/didoo/pen/YzOeRPr
+  display: grid;
+  grid-template-columns: repeat(5, 100%);
+  width: 100%;
+}
+
+.hds-side-nav__content-panel {
+  padding: 0 var(--token-side-nav-wrapper-padding-horizontal);
+}
+
+// (LIST) TITLE
+
+.hds-side-nav__list-title {
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+  margin-top: var(--token-side-nav-body-list-margin-vertical);
+  padding: 0 var(--token-side-nav-body-list-item-padding-horizontal);
+  color: var(--token-side-nav-color-foreground-faint);
+
+  // Remove margin from title at top of all list-items & lists
+  .hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > & {
+    margin-top: 0;
+  }
+}
+
+
+// LIST (root elements)
+
+.hds-side-nav__list-wrapper, // <nav> element
+.hds-side-nav__list {        // <ul> element
+  margin: 0;
+  padding: 0;
+}
+
+
+// ITEM (generic container)
+
+.hds-side-nav__list-item { // <li> element
+  list-style-type: none;
+
+  & + & {
+    margin-top: var(--token-side-nav-body-list-item-spacing-vertical);
+  }
+}
+
+.hds-side-nav__list-item-link { // <a>/<button> element (via Hds::Interactive)
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--token-side-nav-body-list-item-height);
+  padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal);
+  color: var(--token-side-nav-color-foreground-primary);
+  text-decoration: none;
+  background: var(--token-side-nav-color-surface-primary);
+  // "Link" could render as an HTML button element so this overrides the default border style in that case:
+  border-color: transparent;
+  border-radius: var(--token-side-nav-body-list-item-border-radius);
+
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element();
+  }
+
+  &:hover,
+  &.mock-hover {
+    background: var(--token-side-nav-color-surface-interactive-hover);
+    border-color: transparent;
+
+    .hds-side-nav__list-item-text,
+    .hds-side-nav__list-item-icon-leading,
+    .hds-side-nav__list-item-icon-trailing {
+      color: var(--token-side-nav-color-foreground-strong);
+    }
+  }
+
+  // notice: this ".active" extra class is used to match the corresponding `active` class assigned automatically
+  // by the `<LinkTo>` Ember component (when the link is "current), so that consumers get it for free if they want
+  // otherwise they can use the `@isActive` argument to set this visual state directly
+  &.active,
+  &:active,
+  &.mock-active {
+    background: var(--token-side-nav-color-surface-interactive-active);
+
+    .hds-side-nav__list-item-text,
+    .hds-side-nav__list-item-icon-leading,
+    .hds-side-nav__list-item-icon-trailing {
+      color: var(--token-side-nav-color-foreground-strong);
+    }
+
+    .hds-badge,
+    .hds-badge-count {
+      color: var(--token-color-foreground-primary);
+      background: var(--token-color-surface-strong);
+    }
+  }
+
+  .hds-badge,
+  .hds-badge-count {
+    margin-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
+  }
+}
+
+// special override for the "back-link" element (no visible active state, by design)
+.hds-side-nav__list-item-link--back-link {
+  &:active,
+  &.mock-active {
+    background: var(--token-side-nav-color-surface-primary);
+
+    .hds-side-nav__list-item-text,
+    .hds-side-nav__list-item-icon-leading,
+    .hds-side-nav__list-item-icon-trailing {
+      color: var(--token-side-nav-color-foreground-primary);
+    }
+  }
+}
+
+
+// LIST ITEM > INNER ELEMENTS
+
+.hds-side-nav__list-item-text {
+  color: var(--token-side-nav-color-foreground-primary);
+  text-align: left;
+}
+
+.hds-side-nav__list-item-icon-leading {
+  flex: none;
+  margin-right: var(--token-side-nav-body-list-item-content-spacing-horizontal);
+}
+
+.hds-side-nav__list-item-icon-trailing {
+  flex: none;
+  margin-left: auto;
+  padding-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
+}