@hashicorp/design-system-components 1.7.3 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hashicorp/design-system-components
 
+## 1.8.0
+
+### Minor Changes
+
+- [#1163](https://github.com/hashicorp/design-system/pull/1163) [`992fde13f`](https://github.com/hashicorp/design-system/commit/992fde13f48b925563e85a7253f4c0aaeca50b9d) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add new `SideNav` components
+
 ## 1.7.3
 
 ### Patch Changes

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

@@ -0,0 +1,8 @@
+<div class="hds-side-nav-header" ...attributes>
+  <div class="hds-side-nav-header__logo">
+    {{yield to="logo"}}
+  </div>
+  <div class="hds-side-nav-header__actions">
+    {{yield to="actions"}}
+  </div>
+</div>

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

@@ -0,0 +1,14 @@
+<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
+>
+  <FlightIcon @name={{@icon}} @color={{@color}} @stretched={{true}} />
+</Hds::Interactive>

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

@@ -0,0 +1,15 @@
+<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}} @color={{@color}} @stretched={{true}} @size="24" />
+</Hds::Interactive>

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

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

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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,12 @@
+<nav class="hds-side-nav__list-wrapper" ...attributes>
+  <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>
+</nav>

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

@@ -0,0 +1,3 @@
+<li class="hds-side-nav__list-item" ...attributes>
+  {{yield}}
+</li>

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

@@ -0,0 +1,43 @@
+<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}}
+
+    <span class="hds-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium">
+      {{@text}}
+    </span>
+
+    {{#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

@@ -0,0 +1,3 @@
+<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/wrapper.hbs

@@ -0,0 +1,13 @@
+<div class="hds-side-nav__wrapper" ...attributes>
+  <div class="hds-side-nav__wrapper-header">
+    {{yield to="header"}}
+  </div>
+
+  <div class="hds-side-nav__wrapper-body" aria-label="contents">
+    {{yield to="body"}}
+  </div>
+
+  <div class="hds-side-nav__wrapper-footer">
+    {{yield to="footer"}}
+  </div>
+</div>

package/app/components/hds/side-nav/header.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/header';

package/app/components/hds/side-nav/home-link.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/home-link';

package/app/components/hds/side-nav/icon-button.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/icon-button';

package/app/components/hds/side-nav/list/back-link.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/back-link';

package/app/components/hds/side-nav/list/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/index';

package/app/components/hds/side-nav/list/item.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/item';

package/app/components/hds/side-nav/list/link.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/link';

package/app/components/hds/side-nav/list/title.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/title';

package/app/components/hds/side-nav/wrapper.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/wrapper';

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

@@ -30,6 +30,7 @@
 @use "../components/link"; // multiple components
 @use "../components/modal";
 @use "../components/pagination";
+@use "../components/side-nav";
 @use "../components/stepper";
 @use "../components/table";
 @use "../components/tabs";

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

@@ -0,0 +1,270 @@
+//
+// SIDE-NAV
+//
+
+@use "../mixins/focus-ring" as *;
+
+// WIP, naming, etc. will be refined... TODO: Add JSON for color tokens, etc.
+:root {
+  // Sizes:
+
+  // header, body, footer "wrappers":
+  --token-side-nav-wrapper-padding-horizontal: 16px;
+  --token-side-nav-wrapper-padding-vertical: 16px;
+  --token-side-nav-wrapper-header-padding-bottom: 8px;
+
+  // header content:
+  --token-side-nav-header-home-link-padding: 4px;
+  --token-side-nav-header-home-link-logo-size: 48px;
+  --token-side-nav-header-actions-spacing: 8px;
+
+  // body content:
+  --token-side-nav-body-list-margin-vertical: 16px;
+  --token-side-nav-body-list-item-padding-horizontal: 8px;
+  --token-side-nav-body-list-item-padding-vertical: 4px;
+  --token-side-nav-body-list-item-spacing-vertical: 2px;
+  --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
+  --token-side-nav-body-list-item-border-radius: 5px;
+
+  // Colors:
+
+  // SideNav container:
+  --token-side-nav-foreground-primary: #dedfe3;
+  --token-side-nav-foreground-primary-strong: #fff;
+  --token-side-nav-foreground-faint: #8c909c;
+  --token-side-nav-surface-primary: #0c0c0e;
+
+  // Interactive elements:
+  // base:
+  --token-side-nav-interactive-surface-hover: #3b3d45;
+  --token-side-nav-interactive-surface-active: #656a76;
+}
+
+@mixin hds-side-nav-icon-button($add-visible-border: false) {
+  color: var(--token-side-nav-foreground-primary-strong);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--token-side-nav-body-list-item-border-radius);
+  cursor: pointer;
+
+  @if ($add-visible-border) {
+    border-color: var(--token-color-palette-neutral-500);
+  }
+
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
+  }
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
+    background: var(--token-side-nav-interactive-surface-hover);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
+    background: var(--token-side-nav-interactive-surface-active);
+
+    @if ($add-visible-border) {
+      border-color: var(--token-color-palette-neutral-400);
+    }
+  }
+}
+
+
+// * SideNav Parent (wrapper) component
+// -------------------------------------------------------------------
+
+.hds-side-nav__wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  color: var(--token-side-nav-foreground-primary); // Default color
+  background: var(--token-side-nav-surface-primary);
+}
+
+.hds-side-nav__wrapper-header {
+  padding-top: var(--token-side-nav-wrapper-padding-vertical);
+  padding-right: var(--token-side-nav-wrapper-padding-horizontal);
+  padding-bottom: var(--token-side-nav-wrapper-header-padding-bottom); // by design
+  padding-left: var(--token-side-nav-wrapper-padding-horizontal);
+}
+
+.hds-side-nav__wrapper-body {
+  flex: 1;
+  padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal);
+  overflow-y: auto;
+}
+
+.hds-side-nav__wrapper-footer {
+  padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal);
+}
+
+// * Header child elements
+// ---------------------------------------
+
+.hds-side-nav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.hds-side-nav-header__logo {
+  display: block;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--token-side-nav-header-home-link-logo-size);
+  height: var(--token-side-nav-header-home-link-logo-size);
+}
+
+.hds-side-nav-header__actions {
+  display: flex;
+
+  > * + * { margin-left: var(--token-side-nav-header-actions-spacing); }
+}
+
+.hds-side-nav__home-link {
+  @include hds-side-nav-icon-button();
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: calc(var(--token-side-nav-header-home-link-padding) - 1px); // by design -  we take in account the transparent border
+}
+
+// Apply class name to Hds::Dropdown component
+.hds-side-nav__dropdown {
+  .hds-dropdown-toggle-icon {
+    @include hds-side-nav-icon-button($add-visible-border: true);
+  }
+}
+
+.hds-side-nav__icon-button {
+  @include hds-side-nav-icon-button($add-visible-border: true);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 5px; // we take in account the transparent border
+}
+
+// * Body child elements
+// ---------------------------------------
+
+.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-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;
+  }
+}
+
+.hds-side-nav__list {
+  margin: 0;
+  padding: 0;
+}
+
+.hds-side-nav__list-item {
+  list-style-type: none; // Q: Should ul have role="list" added for accessibility?
+
+  & + & {
+    margin-top: var(--token-side-nav-body-list-item-spacing-vertical);
+  }
+}
+
+.hds-side-nav__list-item-link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 36px;
+  padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal);
+  color: var(--token-side-nav-foreground-primary);
+  text-decoration: none;
+  background: var(--token-side-nav-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-interactive-surface-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-foreground-primary-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-interactive-surface-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-foreground-primary-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-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-foreground-primary);
+    }
+  }
+}
+
+.hds-side-nav__list-item-text {
+  color: var(--token-side-nav-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);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",