@hashicorp/design-system-components 2.1.0 → 2.3.0

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

@@ -0,0 +1,153 @@
+/**
+ * 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',
+      }
+    );
+
+    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/addon/components/hds/tooltip-button/index.hbs

@@ -0,0 +1,11 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<button
+  type="button"
+  class={{this.classNames}}
+  {{hds-tooltip this.text options=this.options}}
+  ...attributes
+>{{~yield~}}</button>

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

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const PLACEMENTS = [
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+];
+
+export default class HdsTooltipIndexComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description text content for tooltip
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::TooltipButton" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  get options() {
+    let { placement } = this.args;
+
+    assert(
+      '@placement for "Hds::TooltipButton" must have a valid value',
+      placement == undefined || PLACEMENTS.includes(placement)
+    );
+
+    return {
+      ...this.args.extraTippyOptions,
+      // takes string
+      placement: placement,
+      // takes array of 2 numbers (skidding, distance): array(0, 0)
+      offset: this.args.offset,
+    };
+  }
+
+  /**
+   * @param isInline
+   * @type {boolean}
+   * @default true
+   * @description sets display for the button
+   */
+  get isInline() {
+    let { isInline = true } = this.args;
+    return isInline;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-tooltip-button'];
+
+    // add a class based on the @isInline argument
+    if (this.isInline) {
+      classes.push('hds-tooltip-button--is-inline');
+    } else {
+      classes.push('hds-tooltip-button--is-block');
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/modifiers/hds-tooltip.js

@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// Note: the majority of this code is a porting of the existing tooltip implementation in Cloud UI
+// (which was initially implemented in Structure)
+
+import Modifier from 'ember-modifier';
+import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+
+import tippy, { followCursor } from 'tippy.js';
+// used by custom SVG arrow:
+import 'tippy.js/dist/svg-arrow.css';
+
+function cleanup(instance) {
+  const { interval, needsTabIndex, tooltip } = instance;
+  if (needsTabIndex) {
+    tooltip?.reference?.removeAttribute('tabindex');
+  }
+  clearInterval(interval);
+  tooltip?.destroy();
+}
+
+/**
+ *
+ * `Tooltip` implements a modifier that uses Tippy.js to display a tooltip.
+ *
+ * Sample usage:
+ * ```
+ * <div {{hds-tooltip 'Text' options=(hash )}}>Hover me!</div>
+ * ```
+ *
+ * @see https://atomiks.github.io/tippyjs
+ * @class TooltipModifier
+ *
+ */
+export default class HdsTooltipModifier extends Modifier {
+  didSetup = false;
+
+  interval = null;
+  needsTabIndex = false;
+  tooltip = null;
+
+  constructor(owner, args) {
+    super(owner, args);
+    registerDestructor(this, cleanup);
+  }
+
+  hideOnEsc = {
+    name: 'hideOnEsc',
+    defaultValue: true,
+    fn({ hide }) {
+      function onKeyDown(event) {
+        if (event.keyCode === 27) {
+          hide();
+        }
+      }
+
+      return {
+        onShow() {
+          document.addEventListener('keydown', onKeyDown);
+        },
+        onHide() {
+          document.removeEventListener('keydown', onKeyDown);
+        },
+      };
+    },
+  };
+
+  modify(element, positional, named) {
+    assert('Tooltip must have an element', element);
+
+    if (!this.didSetup) {
+      this.#setup(element, positional, named);
+      this.didSetup = true;
+    }
+
+    this.#update(element, positional, named);
+  }
+
+  #setup(element, positional, named) {
+    const tooltipProps = this.#getTooltipProps(element, positional, named);
+    this.tooltip = tippy(element, tooltipProps);
+  }
+
+  #update(element, positional, named) {
+    const tooltipProps = this.#getTooltipProps(element, positional, named);
+    this.tooltip.setProps(tooltipProps);
+  }
+
+  #getTooltipProps(element, positional, named) {
+    const { options = {} } = named;
+    let [content] = positional;
+
+    let $anchor = element;
+
+    // Make it easy to specify the modified element as the actual tooltip.
+    if (typeof options.triggerTarget === 'string') {
+      const $el = $anchor;
+      switch (options.triggerTarget) {
+        case 'parentNode':
+          $anchor = $anchor.parentNode;
+          break;
+        default:
+          $anchor = $anchor.querySelectorAll(options.triggerTarget);
+      }
+      content = $anchor.cloneNode(true);
+      $el.remove();
+      options.triggerTarget = undefined;
+    }
+
+    // The {{hds-tooltip}} will just use the HTML content.
+    if (typeof content === 'undefined') {
+      content = $anchor.innerHTML;
+      $anchor.innerHTML = '';
+    }
+
+    if (options.trigger === 'manual') {
+      // If we are manually triggering, a out delay means only show for the
+      // amount of time specified by the delay.
+      const delay = options.delay || [];
+
+      if (typeof delay[1] !== 'undefined') {
+        options.onShown = (tooltip) => {
+          clearInterval(this.interval);
+          this.interval = setTimeout(() => {
+            tooltip.hide();
+          }, delay[1]);
+        };
+      }
+    }
+
+    const $trigger = $anchor;
+
+    if (!$trigger.hasAttribute('tabindex')) {
+      this.needsTabIndex = true;
+      $trigger.setAttribute('tabindex', '0');
+    }
+
+    return {
+      theme: 'hds',
+      triggerTarget: $trigger,
+      arrow: `
+        <svg class="hds-tooltip-pointer" width="16" height="7" viewBox="0 0 16 7" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" />
+        </svg>`,
+      // keeps tooltip itself open on hover:
+      interactive: true,
+      // fix accessibility features that get messed up with setting interactive: true
+      aria: {
+        content: 'describedby',
+        expanded: null,
+      },
+      content: () => content,
+      plugins: [
+        typeof options.followCursor !== 'undefined' ? followCursor : undefined,
+        this.hideOnEsc,
+      ].filter((item) => Boolean(item)),
+      ...options,
+    };
+  }
+}

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/segmented-group/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/segmented-group/index';

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/components/hds/tooltip-button/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/tooltip-button/index';

package/app/modifiers/hds-tooltip.js

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

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";
@@ -30,12 +31,14 @@
 @use "../components/link"; // multiple components
 @use "../components/modal";
 @use "../components/pagination";
+@use "../components/segmented-group";
 @use "../components/side-nav";
 @use "../components/stepper";
 @use "../components/table";
 @use "../components/tabs";
 @use "../components/tag";
 @use "../components/toast";
+@use "../components/tooltip";
 // END COMPONENT CSS FILES IMPORTS
 
 // stylelint-disable-next-line selector-class-pattern

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