@hashicorp/design-system-components 2.12.2 → 2.14.0

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

@@ -7,45 +7,74 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
-import { schedule } from '@ember/runloop';
+import { next, schedule } from '@ember/runloop';
 
 export default class HdsTabsIndexComponent extends Component {
   @tracked tabNodes = [];
   @tracked tabIds = [];
   @tracked panelNodes = [];
   @tracked panelIds = [];
-  @tracked selectedTabIndex;
+  @tracked _selectedTabIndex = this.args.selectedTabIndex ?? 0;
+  @tracked selectedTabId;
+  @tracked isControlled;
 
-  @action
-  didInsert() {
-    // default starting tab index
-    let initialTabIndex = 0;
-    let selectedCount = 0;
-
-    this.tabNodes.forEach((tabElement, index) => {
-      if (tabElement.hasAttribute('data-is-selected')) {
-        initialTabIndex = index;
-        selectedCount++;
-      }
-    });
-    this.selectedTabIndex = initialTabIndex;
+  constructor() {
+    super(...arguments);
 
-    schedule('afterRender', () => {
-      this.setTabIndicator(initialTabIndex);
-    });
+    // this is to determine if the "selected" tab logic is controlled in the consumers' code or is maintained as an internal state
+    this.isControlled = this.args.selectedTabIndex !== undefined;
+  }
+
+  get selectedTabIndex() {
+    if (this.isControlled) {
+      return this.args.selectedTabIndex;
+    } else {
+      return this._selectedTabIndex;
+    }
+  }
 
-    assert('Only one tab may use isSelected argument', selectedCount <= 1);
+  set selectedTabIndex(value) {
+    if (this.isControlled) {
+      // noop
+    } else {
+      this._selectedTabIndex = value;
+    }
+  }
 
+  @action
+  didInsert() {
     assert(
       'The number of Tabs must be equal to the number of Panels',
       this.tabNodes.length === this.panelNodes.length
     );
+
+    if (this.selectedTabId) {
+      this.selectedTabIndex = this.tabIds.indexOf(this.selectedTabId);
+    }
+
+    schedule('afterRender', () => {
+      this.setTabIndicator();
+    });
   }
 
   @action
-  didInsertTab(element) {
+  didInsertTab(element, isSelected) {
     this.tabNodes = [...this.tabNodes, element];
     this.tabIds = [...this.tabIds, element.id];
+    if (isSelected) {
+      if (this.selectedTabId) {
+        assert('Only one tab may use isSelected argument');
+      }
+      this.selectedTabId = element.id;
+    }
+  }
+
+  @action
+  didUpdateTab(tabIndex, isSelected) {
+    if (isSelected) {
+      this.selectedTabIndex = tabIndex;
+    }
+    this.setTabIndicator();
   }
 
   @action
@@ -55,7 +84,7 @@ export default class HdsTabsIndexComponent extends Component {
   }
 
   @action
-  didInsertPanel(panelId, element) {
+  didInsertPanel(element, panelId) {
     this.panelNodes = [...this.panelNodes, element];
     this.panelIds = [...this.panelIds, panelId];
   }
@@ -67,40 +96,39 @@ export default class HdsTabsIndexComponent extends Component {
   }
 
   @action
-  onClick(tabIndex, event) {
+  onClick(event, tabIndex) {
     this.selectedTabIndex = tabIndex;
-    this.setTabIndicator(tabIndex);
-
-    // Scroll Tab into view if it's out of view
-    this.tabNodes[tabIndex].parentNode.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'nearest',
-    });
+    this.setTabIndicator();
 
     // invoke the callback function if it's provided as argument
     if (typeof this.args.onClickTab === 'function') {
-      this.args.onClickTab(event);
+      this.args.onClickTab(event, tabIndex);
     }
   }
 
   @action
-  onKeyUp(tabIndex, e) {
+  onKeyUp(tabIndex, event) {
     const leftArrow = 37;
     const rightArrow = 39;
     const enterKey = 13;
     const spaceKey = 32;
 
-    if (e.keyCode === rightArrow) {
+    if (event.keyCode === rightArrow) {
       const nextTabIndex = (tabIndex + 1) % this.tabIds.length;
-      this.focusTab(nextTabIndex, e);
-    } else if (e.keyCode === leftArrow) {
+      this.focusTab(nextTabIndex, event);
+    } else if (event.keyCode === leftArrow) {
       const prevTabIndex =
         (tabIndex + this.tabIds.length - 1) % this.tabIds.length;
-      this.focusTab(prevTabIndex, e);
-    } else if (e.keyCode === enterKey || e.keyCode === spaceKey) {
+      this.focusTab(prevTabIndex, event);
+    } else if (event.keyCode === enterKey || event.keyCode === spaceKey) {
       this.selectedTabIndex = tabIndex;
     }
+    // scroll selected tab into view (it may be out of view when activated using a keyboard with `prev/next`)
+    this.tabNodes[this.selectedTabIndex].parentNode.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'nearest',
+    });
   }
 
   // Focus tab for keyboard & mouse navigation:
@@ -114,15 +142,42 @@ export default class HdsTabsIndexComponent extends Component {
     this.panelNodes[tabIndex].focus();
   }
 
-  setTabIndicator(tabIndex) {
-    const tabElem = this.tabNodes[tabIndex];
-    const tabsParentElem = tabElem.closest('.hds-tabs');
-
-    const tabLeftPos = tabElem.parentNode.offsetLeft;
-    const tabWidth = tabElem.parentNode.offsetWidth;
+  setTabIndicator() {
+    next(() => {
+      const tabElem = this.tabNodes[this.selectedTabIndex];
+
+      if (tabElem) {
+        const tabsParentElem = tabElem.closest('.hds-tabs__tablist');
+
+        // this condition is `null` if any of the parents has `display: none`
+        if (tabElem.parentNode.offsetParent) {
+          const tabLeftPos = tabElem.parentNode.offsetLeft;
+          const tabWidth = tabElem.parentNode.offsetWidth;
+
+          // Set CSS custom properties for indicator
+          tabsParentElem.style.setProperty(
+            '--indicator-left-pos',
+            tabLeftPos + 'px'
+          );
+          tabsParentElem.style.setProperty(
+            '--indicator-width',
+            tabWidth + 'px'
+          );
+        }
+      } else {
+        assert(
+          `"Hds::Tabs" has tried to set the indicator for an element that doesn't exist (the value ${
+            this.selectedTabIndex
+          } of \`this.selectedTabIndex\` is out of bound for the array \`this.tabNodes\`, whose index range is [0-${
+            this.tabNodes.length - 1
+          }])`
+        );
+      }
+    });
+  }
 
-    // Set CSS custom properties for indicator
-    tabsParentElem.style.setProperty('--indicator-left-pos', tabLeftPos + 'px');
-    tabsParentElem.style.setProperty('--indicator-width', tabWidth + 'px');
+  @action
+  updateTabIndicator() {
+    this.setTabIndicator();
   }
 }

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

@@ -6,11 +6,11 @@
   class="hds-tabs__panel"
   ...attributes
   role="tabpanel"
-  aria-labelledby={{this.tabId}}
   id={{this.panelId}}
-  hidden={{not this.isSelected}}
+  hidden={{not this.isVisible}}
+  aria-labelledby={{this.coupledTabId}}
   {{did-insert this.didInsertNode}}
   {{will-destroy this.willDestroyNode}}
 >
-  {{yield}}
+  {{yield (hash isVisible=this.isVisible)}}
 </section>

package/addon/components/hds/tabs/panel.js

@@ -10,9 +10,8 @@ import { action } from '@ember/object';
 
 export default class HdsTabsIndexComponent extends Component {
   /**
-   * Generates a unique ID for the Panel
-   *
-   * @param panelId
+   * Generate a unique ID for the Panel
+   * @return {string}
    */
   panelId = 'panel-' + guidFor(this);
 
@@ -23,32 +22,40 @@ export default class HdsTabsIndexComponent extends Component {
       : undefined;
   }
 
-  get tabId() {
+  /**
+   * Check the condition if the panel is visible (because the coupled/associated tab is selected) or not
+   * @returns {boolean}
+   */
+  get isVisible() {
+    return this.nodeIndex === this.args.selectedTabIndex;
+  }
+
+  /**
+   * Get the ID of the tab coupled/associated with the panel (it's used by the `aria-labelledby` attribute)
+   * @returns string}
+   */
+  get coupledTabId() {
     return this.nodeIndex !== undefined
       ? this.args.tabIds[this.nodeIndex]
       : undefined;
   }
 
-  get isSelected() {
-    return this.nodeIndex === this.args.selectedTabIndex;
-  }
-
   @action
   didInsertNode(element) {
     let { didInsertNode } = this.args;
 
     if (typeof didInsertNode === 'function') {
       this.elementId = element.id;
-      didInsertNode(this.elementId, ...arguments);
+      didInsertNode(element, this.elementId);
     }
   }
 
   @action
-  willDestroyNode() {
+  willDestroyNode(element) {
     let { willDestroyNode } = this.args;
 
     if (typeof willDestroyNode === 'function') {
-      willDestroyNode(...arguments);
+      willDestroyNode(element);
     }
   }
 }

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

@@ -11,8 +11,8 @@
     id={{this.tabId}}
     aria-selected={{if this.isSelected "true" "false"}}
     tabindex={{unless this.isSelected "-1"}}
-    data-is-selected={{this.isInitialTab}}
-    {{did-insert this.didInsertNode}}
+    {{did-insert this.didInsertNode @isSelected}}
+    {{did-update this.didUpdateNode @count @isSelected}}
     {{will-destroy this.willDestroyNode}}
     {{on "click" this.onClick}}
     {{on "keyup" this.onKeyUp}}

package/addon/components/hds/tabs/tab.js

@@ -10,9 +10,8 @@ import { action } from '@ember/object';
 
 export default class HdsTabsIndexComponent extends Component {
   /**
-   * Generates a unique ID for the Tab
-   *
-   * @param tabId
+   * Generate a unique ID for the Tab
+   * @return {string}
    */
   tabId = 'tab-' + guidFor(this);
 
@@ -21,17 +20,10 @@ export default class HdsTabsIndexComponent extends Component {
     return this.args.tabIds ? this.args.tabIds.indexOf(this.tabId) : undefined;
   }
 
-  get panelId() {
-    return this.nodeIndex !== undefined
-      ? this.args.panelIds[this.nodeIndex]
-      : undefined;
-  }
-
   /**
-   * @param isSelected
-   * @type {boolean}
+   * Determine if the tab is the selected tab
+   * @return {boolean}
    * @default false (1st tab is selected by default)
-   * @description Determines if the tab is the selected tab
    */
   get isSelected() {
     return (
@@ -40,46 +32,52 @@ export default class HdsTabsIndexComponent extends Component {
     );
   }
 
-  get isInitialTab() {
-    let { isSelected } = this.args;
-    return isSelected;
-  }
-
   @action
-  didInsertNode() {
+  didInsertNode(element, positional) {
     let { didInsertNode } = this.args;
 
+    const isSelected = positional[0];
+
     if (typeof didInsertNode === 'function') {
-      didInsertNode(...arguments);
+      didInsertNode(element, isSelected);
+    }
+  }
+
+  @action
+  didUpdateNode() {
+    let { didUpdateNode } = this.args;
+
+    if (typeof didUpdateNode === 'function') {
+      didUpdateNode(this.nodeIndex, this.args.isSelected);
     }
   }
 
   @action
-  willDestroyNode() {
+  willDestroyNode(element) {
     let { willDestroyNode } = this.args;
 
     if (typeof willDestroyNode === 'function') {
-      willDestroyNode(...arguments);
+      willDestroyNode(element);
     }
   }
 
   @action
-  onClick() {
+  onClick(event) {
     let { onClick } = this.args;
 
     if (typeof onClick === 'function') {
-      onClick(this.nodeIndex, ...arguments);
+      onClick(event, this.nodeIndex);
     } else {
       return false;
     }
   }
 
   @action
-  onKeyUp() {
+  onKeyUp(event) {
     let { onKeyUp } = this.args;
 
     if (typeof onKeyUp === 'function') {
-      onKeyUp(this.nodeIndex, ...arguments);
+      onKeyUp(this.nodeIndex, event);
     } else {
       return false;
     }

package/app/components/hds/app-footer/copyright.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-footer/copyright';

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

package/app/components/hds/app-footer/item.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-footer/item';

package/app/components/hds/app-footer/legal-links.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-footer/legal-links';

package/app/components/hds/app-footer/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/app-footer/link';

package/app/components/hds/app-footer/status-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/app-footer/status-link';

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

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

@@ -14,6 +14,7 @@
 // START COMPONENTS CSS FILES IMPORTS
 @use "../components/accordion";
 @use "../components/alert";
+@use "../components/app-footer";
 @use "../components/app-frame";
 @use "../components/application-state";
 @use "../components/avatar";

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

@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// app-footer
+//
+
+$app-footer-gap: 24px;
+$app-footer-icon-text-gap: 6px;
+
+.hds-app-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $app-footer-gap;
+  justify-content: flex-end;
+  padding: 24px;
+  color: var(--app-footer-foreground-color);
+  border-top: 1px solid var(--app-footer-border-top-color);
+}
+
+// SUB-ELEMENTS
+
+// hide list if no children
+.hds-app-footer__list:not(:has(li)) { display: none; }
+
+.hds-app-footer__list,
+.hds-app-footer__legal-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $app-footer-gap;
+  align-items: center;
+  justify-content: flex-end;
+  width: fit-content;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.hds-app-footer__status-link {
+  // custom spacing for the status link (internally is using the "AppFooter::Link")
+  // Note: we increase specificity because otherwise is overwritten by the order of imports of components scss files
+  &.hds-link-inline--icon-leading > .hds-link-inline__icon { margin-right: $app-footer-icon-text-gap; }
+
+  .flight-icon {
+    fill: var(--hds-app-footer-status-icon-color, currentColor);
+  }
+}
+
+// preset status types
+.hds-app-footer__status-link--operational {
+  .flight-icon { fill: var(--app-footer-status-link-icon-operational-color); }
+}
+
+.hds-app-footer__status-link--degraded {
+  .flight-icon { fill: var(--app-footer-status-link-icon-degraded-color); }
+}
+
+.hds-app-footer__status-link--maintenance {
+  .flight-icon { fill: var(--app-footer-status-link-icon-maintenance-color); }
+}
+
+.hds-app-footer__status-link--critical {
+  .flight-icon { fill: var(--app-footer-status-link-icon-critical-color); }
+}
+
+
+.hds-app-footer__link.hds-link-inline--color-secondary,
+.hds-app-footer__status-link {
+  // Overriding default colors
+  color: var(--app-footer-link-default-color);
+  text-align: right;
+
+  &:hover,
+  &.mock-hover {
+    color: var(--app-footer-link-hover-color);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--app-footer-link-active-color);
+  }
+
+  &:focus,
+  &.mock-focus,
+  &:focus-visible {
+    color: var(--app-footer-link-focus-color);
+    outline-color: var(--app-footer-link-focus-outline-color);
+  }
+}
+
+.hds-app-footer__list-item {
+  display: flex;
+  align-items: center;
+}
+
+.hds-app-footer__copyright {
+  display: flex;
+  gap: $app-footer-icon-text-gap;
+  align-items: center;
+  color: var(--app-footer-copyright-text-color);
+
+  .flight-icon { fill: var(--app-footer-copyright-icon-color); }
+}
+
+// THEMING
+
+// Light
+.hds-app-footer--theme-light {
+  --app-footer-foreground-color: var(--token-color-foreground-primary);
+  --app-footer-border-top-color: var(--token-color-border-primary);
+
+  // Overriding default Secondary Link colors
+  --app-footer-link-default-color: var(--token-color-foreground-faint);
+  --app-footer-link-hover-color: var(--token-color-palette-neutral-600);
+  --app-footer-link-active-color: var(--token-color-palette-neutral-700);
+  --app-footer-link-focus-color: var(--token-color-foreground-faint);
+  --app-footer-link-focus-outline-color: var(--token-color-focus-action-internal);
+
+  // Copyright
+  --app-footer-copyright-text-color: var(--token-color-foreground-primary);
+  --app-footer-copyright-icon-color: var(--token-color-hashicorp-brand);
+
+  // StatusLink icon colors
+  --app-footer-status-link-icon-operational-color: var(--token-color-foreground-success);
+  --app-footer-status-link-icon-degraded-color: var(--token-color-foreground-warning);
+  --app-footer-status-link-icon-maintenance-color: var(--token-color-foreground-warning);
+  --app-footer-status-link-icon-critical-color: var(--token-color-foreground-critical);
+}
+
+// Dark
+.hds-app-footer--theme-dark {
+  --app-footer-foreground-color: #b2b6bd;
+  --app-footer-border-top-color: #b2b6bd66; // rgba(#b2b6bd, 0.4) - Sass color functions don't work with CSS variables
+
+  // Overriding default Secondary Link colors
+  --app-footer-link-default-color: #b2b6bd;
+  --app-footer-link-hover-color: #d5d7db;
+  --app-footer-link-active-color: #efeff1;
+  --app-footer-link-focus-color: #b2b6bd;
+  --app-footer-link-focus-outline-color: #389aff;
+
+  // Copyright
+  --app-footer-copyright-text-color: #b2b6bd;
+  --app-footer-copyright-icon-color: #fff;
+
+  // StatusLink Icon colors
+  --app-footer-status-link-icon-operational-color: #009241;
+  --app-footer-status-link-icon-degraded-color: #e88c03;
+  --app-footer-status-link-icon-maintenance-color: #e88c03;
+  --app-footer-status-link-icon-critical-color: #ef3016;
+}

package/app/styles/components/link/standalone.scss

@@ -21,6 +21,8 @@ $hds-link-standalone-border-width: 1px;
   align-items: center;
   justify-content: center;
   width: fit-content;
+  padding-top: 4px;
+  padding-bottom: 4px;
   font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   background-color: transparent; // needs to exist for a11y
@@ -137,7 +139,7 @@ $hds-link-standalone-focus-shift: 4px;
   $shift-extra: $shift + 2px;
 
   // notice: this is used not only for the focus, but also to increase the clickable area
-  @include hds-focus-ring-with-pseudo-element($top: -$shift, $right: -$shift, $bottom: -$shift, $left: -$shift, $radius: $hds-link-standalone-focus-border-radius);
+  @include hds-focus-ring-with-pseudo-element($right: -$shift, $left: -$shift, $radius: $hds-link-standalone-focus-border-radius);
 
   // we need to override a couple of values for better visual alignment
   &.hds-link-standalone--icon-position-leading::before {

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

@@ -60,6 +60,16 @@
   justify-content: center;
   width: var(--token-side-nav-header-home-link-logo-size);
   height: var(--token-side-nav-header-home-link-logo-size);
+  transition:
+    width var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing),
+    height var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing);
+
+  .hds-side-nav--is-minimized & {
+    width: var(--token-side-nav-header-home-link-logo-size-minimized);
+    height: var(--token-side-nav-header-home-link-logo-size-minimized);
+  }
 }
 
 // "home-link"

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

@@ -7,4 +7,5 @@
 @use "./main.scss";
 @use "./header.scss";
 @use "./content.scss";
+@use "./toggle-button.scss";
 @use "./a11y-refocus.scss";