@hashicorp/design-system-components 3.5.0 → 4.0.0

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

@@ -1,47 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-export const DEFAULT_SPACING = '24';
-export const SPACING = ['24', '0'];
-
-export default class HdsSeparatorIndexComponent extends Component {
-  /**
-   * Sets the margin for the separator
-   * Accepted values: 24, 0
-   *
-   * @param spacing
-   * @type {string}
-   * @default 'default'
-   */
-  get spacing() {
-    let { spacing = DEFAULT_SPACING } = this.args;
-
-    assert(
-      `@spacing for "Hds::Separator" must be one of the following: ${SPACING.join(
-        ', '
-      )}; received: ${spacing}`,
-      SPACING.includes(spacing)
-    );
-
-    return spacing;
-  }
-
-  /**
-   * 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-separator'];
-
-    // add a class based on the @spacing argument
-    classes.push(`hds-separator--spacing-${this.spacing}`);
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,19 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class="hds-side-nav" ...attributes>
-  <div class="hds-side-nav__wrapper">
-    {{yield to="root"}}
-    <div class="hds-side-nav__wrapper-header">
-      {{yield to="header"}}
-    </div>
-    <div class="hds-side-nav__wrapper-body">
-      {{yield to="body"}}
-    </div>
-    <div class="hds-side-nav__wrapper-footer">
-      {{yield to="footer"}}
-    </div>
-  </div>
-</div>

package/addon/components/hds/side-nav/header/home-link.hbs

@@ -1,20 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Hds::Interactive
-  class="hds-side-nav__home-link"
-  @current-when={{@current-when}}
-  @models={{hds-link-to-models @model @models}}
-  @query={{hds-link-to-query @query}}
-  @replace={{@replace}}
-  @route={{@route}}
-  @isRouteExternal={{@isRouteExternal}}
-  @href={{@href}}
-  @isHrefExternal={{@isHrefExternal}}
-  ...attributes
-  aria-label={{this.ariaLabel}}
->
-  <FlightIcon @name={{@icon}} @color={{@color}} @stretched={{true}} />
-</Hds::Interactive>

package/addon/components/hds/side-nav/header/home-link.js

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-export default class HdsSideNavHeaderHomeLinkComponent extends Component {
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @description The value of `aria-label`
-   */
-  get ariaLabel() {
-    let { ariaLabel } = this.args;
-
-    assert(
-      '@ariaLabel for "Hds::SideNav::Header::HomeLink" ("Logo") must have a valid value',
-      ariaLabel !== undefined
-    );
-
-    return ariaLabel;
-  }
-}

package/addon/components/hds/side-nav/header/icon-button.hbs

@@ -1,20 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Hds::Interactive
-  class="hds-side-nav__icon-button"
-  @current-when={{@current-when}}
-  @models={{hds-link-to-models @model @models}}
-  @query={{hds-link-to-query @query}}
-  @replace={{@replace}}
-  @route={{@route}}
-  @isRouteExternal={{@isRouteExternal}}
-  @href={{@href}}
-  @isHrefExternal={{@isHrefExternal}}
-  ...attributes
-  aria-label={{this.ariaLabel}}
->
-  <FlightIcon @name={{@icon}} @stretched={{true}} @size="24" />
-</Hds::Interactive>

package/addon/components/hds/side-nav/header/icon-button.js

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-export default class HdsSideNavHeaderIconButtonComponent extends Component {
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @description The value of `aria-label`
-   */
-  get ariaLabel() {
-    let { ariaLabel } = this.args;
-
-    assert(
-      '@ariaLabel for "Hds::SideNav::Header::IconButton" must have a valid value',
-      ariaLabel !== undefined
-    );
-
-    return ariaLabel;
-  }
-}

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

@@ -1,13 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class="hds-side-nav-header" ...attributes>
-  <div class="hds-side-nav-header__logo-container">
-    {{yield to="logo"}}
-  </div>
-  <div class="hds-side-nav-header__actions-container hds-side-nav-hide-when-minimized">
-    {{yield to="actions"}}
-  </div>
-</div>

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

@@ -1,42 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Hds::SideNav::Base
-  class={{this.classNames}}
-  ...attributes
-  {{on "transitionstart" (fn this.setTransition "start")}}
-  {{on "transitionend" (fn this.setTransition "end")}}
-  {{focus-trap isActive=this.shouldTrapFocus}}
->
-  <:root>
-    {{#if this.hasA11yRefocus}}
-      <NavigationNarrator
-        @routeChangeValidator={{@a11yRefocusRouteChangeValidator}}
-        @skipTo="#{{@a11yRefocusSkipTo}}"
-        @skipText={{@a11yRefocusSkipText}}
-        @navigationText={{@a11yRefocusNavigationText}}
-      />
-    {{/if}}
-    {{#if this.showToggleButton}}
-      {{! template-lint-disable no-invalid-interactive}}
-      <div class="hds-side-nav__overlay" {{on "click" this.toggleMinimizedStatus}} />
-      {{! template-lint-enable no-invalid-interactive}}
-      <Hds::SideNav::ToggleButton
-        aria-label={{this.ariaLabel}}
-        @icon={{if this.isMinimized "chevrons-right" "chevrons-left"}}
-        {{on "click" this.toggleMinimizedStatus}}
-      />
-    {{/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

@@ -1,147 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { assert } from '@ember/debug';
-import { registerDestructor } from '@ember/destroyable';
-
-export default class HdsSideNavComponent extends Component {
-  @tracked isResponsive = this.args.isResponsive ?? true; // controls if the component reacts to viewport changes
-  @tracked isMinimized = this.args.isMinimized ?? false; // sets the default state on 'desktop' viewports
-  @tracked isCollapsible = this.args.isCollapsible ?? false; // controls if users can collapse the sidenav on 'desktop' viewports
-  @tracked isAnimating = false;
-  @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);
-    // if not instantiated as minimized via arguments
-    if (!this.args.isMinimized) {
-      // 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 showToggleButton() {
-    return (this.isResponsive && !this.isDesktop) || this.isCollapsible;
-  }
-
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'close menu'
-   */
-  get ariaLabel() {
-    if (this.isMinimized) {
-      return this.args.ariaLabel ?? 'Open menu';
-    }
-    return this.args.ariaLabel ?? 'Close menu';
-  }
-
-  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.isResponsive) {
-      classes.push('hds-side-nav--is-responsive');
-    }
-    if (!this.isDesktop && this.isResponsive) {
-      classes.push('hds-side-nav--is-mobile');
-    } else {
-      classes.push('hds-side-nav--is-desktop');
-    }
-    if (this.isMinimized && this.isResponsive) {
-      classes.push('hds-side-nav--is-minimized');
-    } else {
-      classes.push('hds-side-nav--is-not-minimized');
-    }
-    if (this.isAnimating) {
-      classes.push('hds-side-nav--is-animating');
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  escapePress(event) {
-    if (event.key === 'Escape' && !this.isMinimized && !this.isDesktop) {
-      this.isMinimized = true;
-    }
-  }
-
-  @action
-  toggleMinimizedStatus() {
-    this.isMinimized = !this.isMinimized;
-
-    let { onToggleMinimizedStatus } = this.args;
-
-    if (typeof onToggleMinimizedStatus === 'function') {
-      onToggleMinimizedStatus(this.isMinimized);
-    }
-  }
-
-  @action
-  setTransition(phase, event) {
-    // we only want to respond to `width` animation/transitions
-    if (event.propertyName !== 'width') {
-      return;
-    }
-    if (phase === 'start') {
-      this.isAnimating = true;
-    } else {
-      this.isAnimating = false;
-    }
-  }
-
-  @action
-  updateDesktopVariable(event) {
-    this.isDesktop = event.matches;
-
-    // automatically minimize on narrow viewports (when not in desktop mode)
-    this.isMinimized = !this.isDesktop;
-
-    let { onDesktopViewportChange } = this.args;
-
-    if (typeof onDesktopViewportChange === 'function') {
-      onDesktopViewportChange(this.isDesktop);
-    }
-  }
-}

package/addon/components/hds/side-nav/list/back-link.hbs

@@ -1,24 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Hds::SideNav::List::Item>
-  <Hds::Interactive
-    class="hds-side-nav__list-item-link hds-side-nav__list-item-link--back-link"
-    @current-when={{@current-when}}
-    @models={{hds-link-to-models @model @models}}
-    @query={{hds-link-to-query @query}}
-    @replace={{@replace}}
-    @route={{@route}}
-    @isRouteExternal={{@isRouteExternal}}
-    @href={{@href}}
-    @isHrefExternal={{@isHrefExternal}}
-    ...attributes
-  >
-    <FlightIcon class="hds-side-nav__list-item-icon-leading" @name="chevron-left" />
-    <span class="hds-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium">
-      {{@text}}
-    </span>
-  </Hds::Interactive>
-</Hds::SideNav::List::Item>

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

@@ -1,19 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<nav class="hds-side-nav__list-wrapper" ...attributes>
-  {{yield (hash ExtraBefore=(component "hds/yield"))}}
-  <ul class="hds-side-nav__list" role="list">
-    {{yield
-      (hash
-        Item=(component "hds/side-nav/list/item")
-        BackLink=(component "hds/side-nav/list/back-link")
-        Title=(component "hds/side-nav/list/title")
-        Link=(component "hds/side-nav/list/link")
-      )
-    }}
-  </ul>
-  {{yield (hash ExtraAfter=(component "hds/yield"))}}
-</nav>

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

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<li class="hds-side-nav__list-item" ...attributes>
-  {{yield}}
-</li>

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

@@ -1,50 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Hds::SideNav::List::Item>
-  <Hds::Interactive
-    class="hds-side-nav__list-item-link {{if @isActive 'active'}}"
-    @current-when={{@current-when}}
-    @models={{hds-link-to-models @model @models}}
-    @query={{hds-link-to-query @query}}
-    @replace={{@replace}}
-    @route={{@route}}
-    @isRouteExternal={{@isRouteExternal}}
-    @href={{@href}}
-    @isHrefExternal={{@isHrefExternal}}
-    ...attributes
-  >
-    {{#if @icon}}
-      <FlightIcon class="hds-side-nav__list-item-icon-leading" @name={{@icon}} />
-    {{/if}}
-
-    {{#if @text}}
-      <span class="hds-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium">
-        {{@text}}
-      </span>
-    {{/if}}
-
-    {{#if @count}}
-      <Hds::BadgeCount @text={{@count}} @type="inverted" @size="small" />
-    {{/if}}
-
-    {{#if @badge}}
-      <Hds::Badge @text={{@badge}} @type="inverted" @size="small" />
-    {{/if}}
-
-    {{yield}}
-
-    {{#if @hasSubItems}}
-      <span class="hds-side-nav__list-item-icon-trailing">
-        <FlightIcon @name="chevron-right" @isInlineBlock={{false}} />
-      </span>
-    {{/if}}
-    {{#if @isHrefExternal}}
-      <span class="hds-side-nav__list-item-icon-trailing">
-        <FlightIcon @name="external-link" @isInlineBlock={{false}} />
-      </span>
-    {{/if}}
-  </Hds::Interactive>
-</Hds::SideNav::List::Item>

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

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Hds::SideNav::List::Item>
-  <div class="hds-side-nav__list-title hds-typography-body-100 hds-font-weight-semibold" ...attributes>{{~yield~}}</div>
-</Hds::SideNav::List::Item>

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

@@ -1,12 +0,0 @@
-{{!
-  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

@@ -1,14 +0,0 @@
-{{!
-  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

@@ -1,162 +0,0 @@
-/**
- * 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';
-
-export default class SidenavPortalTarget extends Component {
-  @service router;
-
-  @tracked numSubnavs = 0;
-  @tracked lastPanelEl = null;
-
-  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]) {
-    this.animateSubnav(element, [count]);
-  }
-
-  @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];
-
-    // get reference to last child panel
-    let lastPanelEl = targetElement.children[targetElement.children.length - 1];
-
-    if (nextPanelEl) {
-      nextPanelEl.ariaHidden = 'false';
-      nextPanelEl.style.setProperty('visibility', 'visible');
-      // this eliminates a flicker if there's only one subnav rendering or if we
-      // already just rendered this panel.
-      if (activeIndex === 0 || nextPanelEl.isSameNode(this.lastPanelEl)) {
-        fadeDelay = 0;
-        fadeDuration = 0;
-      }
-
-      // remember the last panel
-      this.lastPanelEl = lastPanelEl;
-
-      nextPanelEl.animate([{ opacity: '0' }, { opacity: '1' }], {
-        delay: fadeDelay,
-        duration: fadeDuration,
-        fill: 'forwards',
-      });
-    }
-  }
-}

package/addon/components/hds/side-nav/toggle-button.hbs

@@ -1,7 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<button class="hds-side-nav__toggle-button" type="button" ...attributes>
-  <FlightIcon @name={{@icon}} />
-</button>