@hashicorp/design-system-components 2.12.2 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @hashicorp/design-system-components
 
+## 2.14.0
+
+### Minor Changes
+
+- [#1700](https://github.com/hashicorp/design-system/pull/1700) [`33d760fb8`](https://github.com/hashicorp/design-system/commit/33d760fb88d3945be8b50302a9bb7dce3ae221fe) Thanks [@didoo](https://github.com/didoo)! - `Pagination::Compact` - Added option to show "SizeSelector" element
+
+- [#1688](https://github.com/hashicorp/design-system/pull/1688) [`c842b6eb7`](https://github.com/hashicorp/design-system/commit/c842b6eb731d82146b0e1ad8b9f55930b58aba18) Thanks [@didoo](https://github.com/didoo)! - `Tabs` - Refactored logic for `Tabs` component + `Tab/Panel` sub-components to support more complex use cases:
+
+  - introduced `@selectedTabIndex` argument to control the "selected" tab from the consuming application, e.g. via query params (effort spearheaded by @MiniHeyd)
+  - fixed issue with nested tabs not initializing the "selected" indicator correctly
+  - fixed issue with dynamic tab content not updating the "selected" indicator correctly
+
+## 2.13.0
+
+### Minor Changes
+
+- [#1623](https://github.com/hashicorp/design-system/pull/1623) [`2111a5439`](https://github.com/hashicorp/design-system/commit/2111a5439abea2951f12517354db662edd7c9cb9) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - `AppFooter` - Added new component
+
+- [#1630](https://github.com/hashicorp/design-system/pull/1630) [`04da95443`](https://github.com/hashicorp/design-system/commit/04da95443290ee2d03d9bef23787a4ef10577247) Thanks [@alex-ju](https://github.com/alex-ju)! - `SideNav` - add `@isCollapsible` (to control if users can collapse the sidenav on 'desktop' viewports) and `@isMinimized` (to control the default state on 'desktop' viewports) arguments
+
+### Patch Changes
+
+- [#1696](https://github.com/hashicorp/design-system/pull/1696) [`f3f3fb103`](https://github.com/hashicorp/design-system/commit/f3f3fb103a5aa1c6489d011b6820560df4c2ed88) Thanks [@MelSumner](https://github.com/MelSumner)! - `Tag` - Updated padding for dismiss button for WCAG conformance
+
+- [#1678](https://github.com/hashicorp/design-system/pull/1678) [`a51976ded`](https://github.com/hashicorp/design-system/commit/a51976ded4f7939fe140a1abade0f98832ccc2d0) Thanks [@alex-ju](https://github.com/alex-ju)! - `Link::Standalone` – increase target size
+
+- Updated dependencies [[`04da95443`](https://github.com/hashicorp/design-system/commit/04da95443290ee2d03d9bef23787a4ef10577247)]:
+  - @hashicorp/design-system-tokens@1.9.0
+
 ## 2.12.2
 
 ### Patch Changes

package/addon/components/hds/app-footer/copyright.hbs

@@ -0,0 +1,9 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class="hds-app-footer__copyright" ...attributes>
+  <FlightIcon @name="hashicorp" />
+  <Hds::Text::Body @tag="span" @size="100">© {{this.year}} HashiCorp</Hds::Text::Body>
+</div>

package/addon/components/hds/app-footer/copyright.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsAppFooterCopyrightComponent extends Component {
+  /**
+   * @param year
+   * @type {string}
+   * @description The copyright year
+   * @default The current year (calculated via `Date()`)
+   */
+  get year() {
+    return this.args.year ?? new Date().getFullYear();
+  }
+}

package/addon/components/hds/app-footer/index.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class={{this.classNames}} ...attributes>
+  {{yield (hash ExtraBefore=(component "hds/yield"))}}
+  <ul class="hds-app-footer__list" aria-label={{this.ariaLabel}}>
+    {{yield (hash StatusLink=(component "hds/app-footer/status-link"))}}
+    {{yield
+      (hash
+        Link=(component "hds/app-footer/link")
+        LegalLinks=(component "hds/app-footer/legal-links")
+        Item=(component "hds/app-footer/item")
+      )
+    }}
+  </ul>
+  {{yield (hash ExtraAfter=(component "hds/yield"))}}
+  <Hds::AppFooter::Copyright @year={{@copyrightYear}} />
+</div>

package/addon/components/hds/app-footer/index.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsAppFooterIndexComponent extends Component {
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Footer items'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'Footer items';
+  }
+
+  /**
+   * @param theme
+   * @type {string}
+   * @description The component theme
+   * @default 'light'
+   */
+  get theme() {
+    return this.args.theme ?? 'light';
+  }
+
+  /**
+   * 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-app-footer'];
+
+    // add a class based on the @theme argument
+    classes.push(`hds-app-footer--theme-${this.theme}`);
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/app-footer/item.hbs

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

package/addon/components/hds/app-footer/legal-links.hbs

@@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::AppFooter::Item>
+  <ul class="hds-app-footer__legal-links" aria-label={{this.ariaLabel}} ...attributes>
+    <Hds::AppFooter::Link @href={{this.hrefForSupport}}>Support</Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForTerms}}>Terms</Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForPrivacy}}>Privacy</Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForSecurity}}>Security</Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForAccessibility}}>Accessibility</Hds::AppFooter::Link>
+  </ul>
+</Hds::AppFooter::Item>

package/addon/components/hds/app-footer/legal-links.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsAppFooterLegalLinksComponent extends Component {
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Legal links'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'Legal links';
+  }
+
+  /**
+   * @param hrefForSupport
+   * @type {string}
+   * @description The href value of the "Support" link
+   */
+  get hrefForSupport() {
+    return this.args.hrefForSupport ?? 'https://www.hashicorp.com/support';
+  }
+
+  /**
+   * @param hrefForTerms
+   * @type {string}
+   * @description The href value of the "Terms" link
+   */
+  get hrefForTerms() {
+    return (
+      this.args.hrefForTerms ?? 'https://www.hashicorp.com/terms-of-service'
+    );
+  }
+
+  /**
+   * @param hrefForPrivacy
+   * @type {string}
+   * @description The href value of the "Privacy" link
+   */
+  get hrefForPrivacy() {
+    return this.args.hrefForPrivacy ?? 'https://www.hashicorp.com/privacy';
+  }
+
+  /**
+   * @param hrefForSecurity
+   * @type {string}
+   * @description The href value of the "Security" link
+   */
+  get hrefForSecurity() {
+    return this.args.hrefForSecurity ?? 'https://www.hashicorp.com/security';
+  }
+
+  /**
+   * @param hrefForAccessibility
+   * @type {string}
+   * @description The href value of the "Accessibility" link
+   */
+  get hrefForAccessibility() {
+    return (
+      this.args.hrefForAccessibility ?? 'mailto:accessibility@hashicorp.com'
+    );
+  }
+}

package/addon/components/hds/app-footer/link.hbs

@@ -0,0 +1,22 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::AppFooter::Item>
+  <Hds::Link::Inline
+    class="hds-app-footer__link"
+    @color="secondary"
+    @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}}
+    @icon={{@icon}}
+    @iconPosition={{@iconPosition}}
+    ...attributes
+  ><Hds::Text::Body @tag="span" @size="100">{{yield}}</Hds::Text::Body></Hds::Link::Inline>
+</Hds::AppFooter::Item>

package/addon/components/hds/app-footer/status-link.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::AppFooter::Link
+  class={{this.classNames}}
+  style={{this.itemStyle}}
+  @current-when={{@current-when}}
+  @models={{hds-link-to-models @model @models}}
+  @query={{hds-link-to-query @query}}
+  @replace={{@replace}}
+  @route={{@route}}
+  @isRouteExternal={{@isRouteExternal}}
+  @href={{this.href}}
+  @isHrefExternal={{@isHrefExternal}}
+  @icon={{this.statusIcon}}
+  @iconPosition="leading"
+  ...attributes
+>{{this.text}}</Hds::AppFooter::Link>

package/addon/components/hds/app-footer/status-link.js

@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import { assert } from '@ember/debug';
+
+export const STATUSES = {
+  operational: {
+    text: 'System operational',
+    iconName: 'check-circle',
+  },
+  degraded: {
+    text: 'System degraded',
+    iconName: 'alert-triangle',
+  },
+  maintenance: {
+    text: 'System maintenance',
+    iconName: 'alert-triangle',
+  },
+  critical: {
+    text: 'System critical',
+    iconName: 'x-circle',
+  },
+};
+
+export default class HdsAppFooterStatusLinkComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    assert(
+      'Either @status or @text for "Hds::AppFooter::StatusLink" must have a valid value',
+      this.args.text !== undefined || this.args.status
+    );
+  }
+
+  /**
+   * @param status
+   * @type {string}
+   * @description The name of the status which the StatusLink is being set to
+   */
+  get status() {
+    let status;
+    if (this.args.status) {
+      status = this.args.status.toLowerCase();
+      assert(
+        `@status for "Hds::AppFooter" must be one of the following: ${Object.keys(
+          STATUSES
+        ).join(', ')} received: ${this.args.status}`,
+        Object.keys(STATUSES).includes(status)
+      );
+    }
+    return status;
+  }
+
+  /**
+   * @param statusIcon
+   * @type {string}
+   * @description The name for the StatusLink icon
+   */
+  get statusIcon() {
+    if (this.status && !this.args.statusIcon) {
+      return STATUSES[this.status].iconName;
+    }
+    return this.args.statusIcon;
+  }
+
+  /**
+   * @param statusIconColor
+   * @type {string}
+   * @description The color for the StatusLink icon
+   */
+  get statusIconColor() {
+    if (this.status && !this.args.statusIconColor) {
+      return STATUSES[this.status].iconColor;
+    }
+    return this.args.statusIconColor;
+  }
+
+  /**
+   * Get the inline style to apply to the item.
+   * @method StatusLink#itemStyle
+   * @return {string} The "style" attribute to apply to the item.
+   */
+  get itemStyle() {
+    if (this.args.statusIconColor) {
+      return htmlSafe(
+        `--hds-app-footer-status-icon-color: ${this.args.statusIconColor}`
+      );
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * @param text
+   * @type {string}
+   * @description The text content of the StatusLink
+   */
+  get text() {
+    if (!this.args.text) {
+      return STATUSES[this.status].text;
+    }
+    return this.args.text;
+  }
+
+  /**
+   * @param href
+   * @type {string}
+   * @description The href value of the StatusLink
+   */
+  get href() {
+    return this.args.href ?? 'https://status.hashicorp.com';
+  }
+
+  /**
+   * 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-app-footer__status-link'];
+
+    // add a class based on the @status argument
+    if (this.args.status) {
+      classes.push(`hds-app-footer__status-link--${this.status}`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/pagination/compact/index.hbs

@@ -27,4 +27,13 @@
       @disabled={{@isDisabledNext}}
     />
   </nav>
+
+  {{#if this.showSizeSelector}}
+    <Hds::Pagination::SizeSelector
+      @pageSizes={{this.pageSizes}}
+      @label={{@sizeSelectorLabel}}
+      @selectedSize={{this.currentPageSize}}
+      @onChange={{this.onPageSizeChange}}
+    />
+  {{/if}}
 </div>

package/addon/components/hds/pagination/compact/index.js

@@ -8,9 +8,15 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { inject as service } from '@ember/service';
 
+// for context about the decision to use these values, see:
+// https://hashicorp.slack.com/archives/C03A0N1QK8S/p1673546329082759
+export const DEFAULT_PAGE_SIZES = [10, 30, 50];
+
 export default class HdsPaginationCompactIndexComponent extends Component {
   @service router;
 
+  showSizeSelector = this.args.showSizeSelector ?? false; // if the "size selector" block is visible
+
   constructor() {
     super(...arguments);
 
@@ -56,6 +62,23 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     return this.args.ariaLabel ?? 'Pagination';
   }
 
+  /**
+   * @param pageSizes
+   * @type {array of numbers}
+   * @description Set the page sizes users can select from.
+   * @default [10, 30, 50]
+   */
+  get pageSizes() {
+    let { pageSizes = DEFAULT_PAGE_SIZES } = this.args;
+
+    assert(
+      `pageSizes argument must be an array. Received: ${pageSizes}`,
+      Array.isArray(pageSizes) === true
+    );
+
+    return pageSizes;
+  }
+
   get routeQueryParams() {
     return this.router.currentRoute?.queryParams || {};
   }

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

@@ -19,18 +19,15 @@
         @navigationText={{@a11yRefocusNavigationText}}
       />
     {{/if}}
-    {{#if this.isResponsive}}
+    {{#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}}
-      <button
-        class="hds-side-nav__menu-toggle-button"
-        type="button"
-        {{on "click" this.toggleMinimizedStatus}}
+      <Hds::SideNav::ToggleButton
         aria-label={{this.ariaLabel}}
-      >
-        <FlightIcon @name={{if this.isMinimized "menu" "x"}} @size="24" @stretched={{true}} />
-      </button>
+        @icon={{if this.isMinimized "chevrons-right" "chevrons-left"}}
+        {{on "click" this.toggleMinimizedStatus}}
+      />
     {{/if}}
   </:root>
   <:header as |Header|>

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

@@ -10,8 +10,9 @@ 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 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;
@@ -39,8 +40,11 @@ export default class HdsSideNavComponent extends Component {
   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 });
+    // if not instantiated as minimized via arguments
+    if (!this.args.isMinimized) {
+      // set initial state based on viewport
+      this.updateDesktopVariable({ matches: this.desktopMQ.matches });
+    }
   }
 
   removeEventListeners() {
@@ -56,6 +60,10 @@ export default class HdsSideNavComponent extends Component {
     return this.isResponsive && !this.isDesktop && !this.isMinimized;
   }
 
+  get showToggleButton() {
+    return (this.isResponsive && !this.isDesktop) || this.isCollapsible;
+  }
+
   /**
    * @param ariaLabel
    * @type {string}
@@ -72,15 +80,15 @@ export default class HdsSideNavComponent extends Component {
     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) {
+    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');
@@ -94,7 +102,7 @@ export default class HdsSideNavComponent extends Component {
 
   @action
   escapePress(event) {
-    if (event.key === 'Escape' && !this.isMinimized) {
+    if (event.key === 'Escape' && !this.isMinimized && !this.isDesktop) {
       this.isMinimized = true;
     }
   }
@@ -127,6 +135,9 @@ export default class HdsSideNavComponent extends Component {
   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') {

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

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

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

@@ -3,7 +3,12 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 {{! template-lint-disable no-invalid-role }}
-<div class="hds-tabs" {{did-insert this.didInsert}} ...attributes>
+<div
+  class="hds-tabs"
+  {{did-insert this.didInsert}}
+  {{did-update this.updateTabIndicator this.selectedTabIndex @isParentVisible}}
+  ...attributes
+>
   <div class="hds-tabs__tablist-wrapper">
     <ul class="hds-tabs__tablist" role="tablist">
       {{yield
@@ -11,9 +16,9 @@
           Tab=(component
             "hds/tabs/tab"
             didInsertNode=this.didInsertTab
+            didUpdateNode=this.didUpdateTab
             willDestroyNode=this.willDestroyTab
             tabIds=this.tabIds
-            panelIds=this.panelIds
             selectedTabIndex=this.selectedTabIndex
             onClick=this.onClick
             onKeyUp=this.onKeyUp