@hashicorp/design-system-components 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @hashicorp/design-system-components
 
+## 2.2.0
+
+### Minor Changes
+
+- [#1284](https://github.com/hashicorp/design-system/pull/1284) [`050a2afa5`](https://github.com/hashicorp/design-system/commit/050a2afa5bd539e15ff21728bb6ac27ac2b90dc6) Thanks [@didoo](https://github.com/didoo)! - Added `AppFrame` component
+
+- [#1321](https://github.com/hashicorp/design-system/pull/1321) [`6cb5f55b1`](https://github.com/hashicorp/design-system/commit/6cb5f55b1a47d9718960e17c68c7ad3b8bcad04c) Thanks [@didoo](https://github.com/didoo)! - Extracted `Hds::SideNav::Base` from the `Hds::SideNav` component
+
+- [#1304](https://github.com/hashicorp/design-system/pull/1304) [`038d8306a`](https://github.com/hashicorp/design-system/commit/038d8306aee38711ba846e4d7272d237b93733e5) Thanks [@didoo](https://github.com/didoo)! - Extended the `Hds::SideNav` component to support responsiveness (animation/transition) and content portaling by adapting existing implementation for Cloud UI
+
+- [#1315](https://github.com/hashicorp/design-system/pull/1315) [`e900dbcca`](https://github.com/hashicorp/design-system/commit/e900dbcca7df1592559245e2b2031d0b2a9ec617) Thanks [@didoo](https://github.com/didoo)! - Added a `@isInline` argument to the `Hds::Dropdown` component
+
+- [#1309](https://github.com/hashicorp/design-system/pull/1309) [`ef7eeff66`](https://github.com/hashicorp/design-system/commit/ef7eeff66d1d9b81b53cf082085eb1fa636263ef) Thanks [@jorytindall](https://github.com/jorytindall)! - Add `Hds::Flyout::Footer` as generic block to `Hds::Flyout`
+
+- [#1317](https://github.com/hashicorp/design-system/pull/1317) [`fa3a328a1`](https://github.com/hashicorp/design-system/commit/fa3a328a1806af8482bcedee002c8bc3232f3968) Thanks [@didoo](https://github.com/didoo)! - Changed order of "modal" container element in the DOM for the `AppFrame` component
+
+### Patch Changes
+
+- [#1312](https://github.com/hashicorp/design-system/pull/1312) [`cd1527ef5`](https://github.com/hashicorp/design-system/commit/cd1527ef5de743e1fdf9b982bff7aa1bbc18ac54) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `min-height` to `Hds::Textarea`
+
+- [#1313](https://github.com/hashicorp/design-system/pull/1313) [`5a2f5778d`](https://github.com/hashicorp/design-system/commit/5a2f5778d5e1d57a7d0d080f01319492e1a5a8b7) Thanks [@didoo](https://github.com/didoo)! - Added design tokens for `SideNav` component
+
+- [#1306](https://github.com/hashicorp/design-system/pull/1306) [`e993f6c42`](https://github.com/hashicorp/design-system/commit/e993f6c42a502f4d43cce2e1e7b1a7a8cfd90cdd) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix `PowerSelectMultiple` style overrides when search is enabled
+
+- Updated dependencies [[`5a2f5778d`](https://github.com/hashicorp/design-system/commit/5a2f5778d5e1d57a7d0d080f01319492e1a5a8b7)]:
+  - @hashicorp/design-system-tokens@1.4.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [#1258](https://github.com/hashicorp/design-system/pull/1258) [`3466d2279`](https://github.com/hashicorp/design-system/commit/3466d2279191504442029976a4e18d3ca99015bf) Thanks [@MelSumner](https://github.com/MelSumner)! - Adds Hds::ApplicationState component
+
+### Patch Changes
+
+- [#1291](https://github.com/hashicorp/design-system/pull/1291) [`b2c21a86e`](https://github.com/hashicorp/design-system/commit/b2c21a86ee681d53e728fa5c52192b9003762ea9) Thanks [@didoo](https://github.com/didoo)! - Fixed missing inset shadow for `TextInput`, `Textarea`, `Checkbox`, `Radio`, `PowerSelect` overrides
+
 ## 2.0.0
 
 ### Major Changes
@@ -29,11 +66,22 @@
 
   **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
 
-### Minor Changes
-
 - [#1266](https://github.com/hashicorp/design-system/pull/1266) [`082842b59`](https://github.com/hashicorp/design-system/commit/082842b59321f843c4955e4cdaf2ce2674a8913d) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `@icon`, `@count`, `@badge` and `@badgeCount` to `Dropdown::Toggle::Button`
 
-- [#1276](https://github.com/hashicorp/design-system/pull/1276) [`5ad29412d`](https://github.com/hashicorp/design-system/commit/5ad29412d2edc0cc4265d3c0bbbf388e821f1cc7) Thanks [@alex-ju](https://github.com/alex-ju)! - Allow small `@size` on `Dropdown::ToggleIcon`
+  `Hds::Dropdown::Toggle::Button` and `Hds::Dropdown::Toggle::Icon` now share the chevron element. As a result, we renamed internal CSS classes as follows:
+
+  - `hds-button__text` → `hds-dropdown-toggle-button__text`
+  - `hds-button__icon` → `hds-dropdown-toggle-chevron`
+
+  The icon element within `Hds::Dropdown::Toggle::Icon` no longer has the `hds-dropdown-toggle-icon__chevron` class and it's currently wrapped in the `hds-dropdown-toggle-chevron` container, similar to `Hds::Dropdown::Toggle::Button`.
+
+  The `Hds::Dropdown::Toggle::Icon` now has a solid border, for consistency with `Hds::Dropdown::Toggle::Button` and the secondary style of `Hds::Button`.
+
+  **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
+
+### Minor Changes
+
+- [#1276](https://github.com/hashicorp/design-system/pull/1276) [`5ad29412d`](https://github.com/hashicorp/design-system/commit/5ad29412d2edc0cc4265d3c0bbbf388e821f1cc7) Thanks [@alex-ju](https://github.com/alex-ju)! - Allow small `@size` on `Dropdown::Toggle::Icon`
 
 - [#1262](https://github.com/hashicorp/design-system/pull/1262) [`3eb78b8de`](https://github.com/hashicorp/design-system/commit/3eb78b8de7c678cff977c9d3a677c47a3216caad) Thanks [@alex-ju](https://github.com/alex-ju)! - Add new `@listPositions` for `Dropdown` as follows:
 
@@ -426,32 +474,34 @@ This release signifies the first major release of the HashiCorp Design System. M
 
 ### Minor Changes (Some Breaking)
 
-- [#217](https://github.com/hashicorp/design-system/pull/217) [`210edd17`](https://github.com/hashicorp/design-system/commit/210edd17431e6e3097260aed0df5a8902f93b7f7) Thanks [@didoo](https://github.com/didoo)! - # Interactive
+- [#217](https://github.com/hashicorp/design-system/pull/217) [`210edd17`](https://github.com/hashicorp/design-system/commit/210edd17431e6e3097260aed0df5a8902f93b7f7) Thanks [@didoo](https://github.com/didoo)!
+
+#### Interactive
 
-  - Introduced `<Hds::Interactive>` (a generic, "utility" component used internally by all the interactive elements like buttons and links)
+- Introduced `<Hds::Interactive>` (a generic, "utility" component used internally by all the interactive elements like buttons and links)
 
-  # Button
+#### Button
 
-  - updated the button API to handle also links as `<a>`/`<LinkTo/LinkToExternal>`
-    - it can be used in place of the `<Hds::Link/LinkTo::CTA>` component (see below)
-    - when the button is a link - the text is underlined for differentiation with a normal button - ⚠️ **Visual change!** - the button responds to `space` key event
-  - removed the `@type` argument from the API in favour of the `type` native attribute - 🚨 **Breaking change!**
+- updated the button API to handle also links as `<a>`/`<LinkTo/LinkToExternal>`
+  - it can be used in place of the `<Hds::Link/LinkTo::CTA>` component (see below)
+  - when the button is a link - the text is underlined for differentiation with a normal button - ⚠️ **Visual change!** - the button responds to `space` key event
+- removed the `@type` argument from the API in favour of the `type` native attribute - 🚨 **Breaking change!**
 
-  # Link/LinkTo::CTA
+#### Link/LinkTo::CTA
 
-  - removed the `<Hds::Link/LinkTo::CTA>` component, in favour of `<Hds::Button>` component (see above) - 🚨 **Breaking change!**
+- removed the `<Hds::Link/LinkTo::CTA>` component, in favour of `<Hds::Button>` component (see above) - 🚨 **Breaking change!**
 
-  # Link::Inline
+#### Link::Inline
 
-  - added the `<Hds::Link::Inline>` component (with API very similar to the `<Hds::Link::Standalone>`)
+- added the `<Hds::Link::Inline>` component (with API very similar to the `<Hds::Link::Standalone>`)
 
-  # Dropdown
+#### Dropdown
 
-  - Updated the `Dropdown::ListItem::Interactive` to use the new `<Hds::Interactive>` component
+- Updated the `Dropdown::ListItem::Interactive` to use the new `<Hds::Interactive>` component
 
-  # Alert/Toast components
+#### Alert/Toast components
 
-  - Removed the `<LinkTo::Standalone>` action (now you can use directly `<Link::Standalone>`)
+- Removed the `<LinkTo::Standalone>` action (now you can use directly `<Link::Standalone>`)
 
 ## 0.11.2
 
@@ -471,9 +521,11 @@ This release signifies the first major release of the HashiCorp Design System. M
 
 ### Minor Changes (Some Breaking)
 
-- [#245](https://github.com/hashicorp/design-system/pull/245) [`c6de1018`](https://github.com/hashicorp/design-system/commit/c6de101880ec1c21971e3775e1a21b6cb9e69757) Thanks [@didoo](https://github.com/didoo)! - - Added `Alert` component
+- [#245](https://github.com/hashicorp/design-system/pull/245) [`c6de1018`](https://github.com/hashicorp/design-system/commit/c6de101880ec1c21971e3775e1a21b6cb9e69757) Thanks [@didoo](https://github.com/didoo)!
+  - Added `Alert` component
   - Added `Toast` component
-- [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)! - - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components) (🚨 Breaking)
+- [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)!
+  - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components) (🚨 Breaking)
   - updated focus state treatment for `Dropdown` component (🚨 Breaking)
 
 ### Patch Changes

package/HOW-TO-TEST-A-COMPONENT-IN-CLOUD-UI.md

@@ -1,8 +1,17 @@
 # How to test a component in Cloud UI
 
-To test a new component (or a component that has been modified) using your local environment as source for the `@hashicorp/design-system-components` package, you have to follow a few steps.
+To test a component that is under development (or because it’s new or has been modified) you have a few options:
 
-## Prepare the Cloud UI project
+- you can use your local environment as source for the `@hashicorp/design-system-components` package
+- you can install the `@hashicorp/design-system-components` package using a branch available on GitHub
+
+This is the case when the component has not yet been released as an npm package, of course.
+
+## Using your local environment (via symlink)
+
+This approach is the preferable one, if there is an ongoing development of the component and you want to see the changes reflected immediately in the application (automatically rebuilt/refreshed whenever you save the HDS files).
+
+### Prepare the Cloud UI project
 
 For simplicity, you will need three CLI/terminal windows/tabs opened.
 
@@ -13,7 +22,7 @@ In in the first terminal window go the folder containing your local version of t
 - run `rm -fr node_modules/` to start from a blank slate
 - run `yarn` to make sure all the packages are installed
 
-## Replace the installed `@hashicorp/design-system-components` package in Cloud UI with the local one
+### Replace the installed `@hashicorp/design-system-components` package in Cloud UI with the local one
 
 In the second terminal window:
 
@@ -52,3 +61,19 @@ Everything should work and you should be able to do whatever you need to do in t
 - run `rm design-system-components` (no need for the `-fr` option, it's a symlink file not a folder)
 - go to the root of the Cloud UI project
 - run `yarn` to reinstall all the missing packages (including `@hashicorp/design-system-components` from NPM)
+
+## Using a remote branch (via GitHub)
+
+This approach is more suitable for one-off testing before releasing a package, less so for ongoing development.
+
+### Override the package resolution in the `package.json` file in the root
+
+You can override every dependency declared in the engines' `package.json` files with a single entry in the `package.json` file in the root of the project folder, by adding this line to the `"resolutions"` block:
+
+```
+"@hashicorp/design-system-components": "https://github.com/hashicorp/design-system#head=BRANCH-NAME&workspace=@hashicorp/design-system-components"
+```
+
+Once done run `yarn install` to use the "remote" version of the package, update the `node_modules` and the `yarn.lock` file.
+
+**IMPORTANT**: the way in which yarn works in this case is that it resolves in a hash referencing a commit in `yarn.lock`; so if you make changes to the branch, they’re not reflected in the local `node_modules` unless you change the hash manually in the `yarn.lock` to point to another commit, and re-run the `yarn install` command.

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

@@ -0,0 +1,24 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-app-frame" ...attributes>
+  {{#if this.hasHeader}}
+    {{yield (hash Header=(component "hds/app-frame/parts/header"))}}
+  {{/if}}
+  {{#if this.hasSidebar}}
+    {{yield (hash Sidebar=(component "hds/app-frame/parts/sidebar"))}}
+  {{/if}}
+  {{!
+    IMPORTANT: since the modals may be injected via portal or `in-element` with code that lives in the "main" container,
+    the "modal" container needs to be present in the DOM _before_ the "main" block, otherwise it may cause errors
+    where the target DOM element is not found (for example in tests where the modal may be immediately opened on first render).
+  }}
+  {{#if this.hasModals}}
+    {{yield (hash Modals=(component "hds/app-frame/parts/modals"))}}
+  {{/if}}
+  {{yield (hash Main=(component "hds/app-frame/parts/main"))}}
+  {{#if this.hasFooter}}
+    {{yield (hash Footer=(component "hds/app-frame/parts/footer"))}}
+  {{/if}}
+</div>

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsAppFrameIndexComponent extends Component {
+  /**
+   * Indicates if the "header" container should be displayed
+   *
+   * @param hasHeader
+   * @type {boolean}
+   * @default true
+   */
+  get hasHeader() {
+    return this.args.hasHeader ?? true;
+  }
+
+  /**
+   * Indicates if the "sidebar" container should be displayed
+   *
+   * @param hasSidebar
+   * @type {boolean}
+   * @default true
+   */
+  get hasSidebar() {
+    return this.args.hasSidebar ?? true;
+  }
+
+  /**
+   * Indicates if the "footer" container should be displayed
+   *
+   * @param hasFooter
+   * @type {boolean}
+   * @default true
+   */
+  get hasFooter() {
+    return this.args.hasFooter ?? true;
+  }
+
+  /**
+   * Indicates if the "modals" container should be displayed
+   *
+   * @param hasModals
+   * @type {boolean}
+   * @default true
+   */
+  get hasModals() {
+    return this.args.hasModals ?? true;
+  }
+}

package/addon/components/hds/app-frame/parts/footer.hbs

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

package/addon/components/hds/{empty-state → app-frame/parts}/header.hbs

@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-empty-state__header" ...attributes>
+<header class="hds-app-frame__header" ...attributes>
   {{yield}}
-</div>
+</header>

package/addon/components/hds/{empty-state/body.hbs → app-frame/parts/main.hbs}

@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-empty-state__body" ...attributes>
+<main class="hds-app-frame__main" ...attributes>
   {{yield}}
-</div>
+</main>

package/addon/components/hds/app-frame/parts/modals.hbs

@@ -0,0 +1,6 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+{{! we use `:empty` in CSS so we have to avoid whitespaces }}
+<div class="hds-app-frame__modals" ...attributes>{{~yield~}}</div>

package/addon/components/hds/{empty-state/footer.hbs → app-frame/parts/sidebar.hbs}

@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-empty-state__footer" ...attributes>
+<aside class="hds-app-frame__sidebar" ...attributes>
   {{yield}}
-</div>
+</aside>

package/addon/components/hds/application-state/body.hbs

@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-application-state__body" ...attributes>
+  {{#if (has-block)}}
+    {{yield}}
+  {{else}}
+    <p class="hds-application-state__body-text hds-typography-body-300">
+      {{@text}}
+    </p>
+  {{/if}}
+</div>

package/addon/components/hds/application-state/footer.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class={{this.classNames}} ...attributes>
+  {{yield (hash Link::Standalone=(component "hds/link/standalone"))}}
+</div>

package/addon/components/hds/application-state/footer.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsApplicationStateFooterComponent extends Component {
+  /**
+   * Indicate if the footer should have a top border or not.
+   *
+   * @param hasDivider
+   * @type {boolean}
+   * @default false
+   */
+  get hasDivider() {
+    return this.args.hasDivider || false;
+  }
+
+  /**
+   * 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-application-state__footer'];
+
+    // add a class based on the existence of @hasDivider argument
+    if (this.hasDivider) {
+      classes.push(`hds-application-state__footer--has-divider`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/application-state/header.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-application-state__header" ...attributes>
+  {{#if @icon}}
+    <div class="hds-application-state__icon">
+      <FlightIcon @name={{@icon}} @size="24" />
+    </div>
+  {{/if}}
+  <div class="hds-application-state__title hds-typography-display-400 hds-font-weight-semibold">
+    {{@title}}
+  </div>
+  {{#if @errorCode}}
+    <div class="hds-application-state__error-code hds-typography-body-100 hds-font-weight-medium">
+      Error
+      {{@errorCode}}
+    </div>
+  {{/if}}
+</div>

package/addon/components/hds/application-state/index.hbs

@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-application-state" ...attributes>
+  {{yield
+    (hash
+      Header=(component "hds/application-state/header")
+      Body=(component "hds/application-state/body")
+      Footer=(component "hds/application-state/footer")
+    )
+  }}
+</div>

package/addon/components/hds/dropdown/footer.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <div class="hds-dropdown__footer {{if @hasDivider 'hds-dropdown__footer--with-divider'}}" ...attributes>
   {{yield}}
 </div>

package/addon/components/hds/dropdown/header.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <div class="hds-dropdown__header {{if @hasDivider 'hds-dropdown__header--with-divider'}}" ...attributes>
   {{yield}}
 </div>

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

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<Hds::Disclosure class="hds-dropdown" @onClose={{@onClose}} ...attributes>
+<Hds::Disclosure class={{this.classNames}} @onClose={{@onClose}} ...attributes>
   <:toggle as |t|>
     {{yield
       (hash
@@ -12,7 +12,7 @@
     }}
   </:toggle>
   <:content as |c|>
-    <div class={{this.classNames}} {{style width=@width height=@height}}>
+    <div class={{this.classNamesContent}} {{style width=@width height=@height}}>
       {{yield (hash Header=(component "hds/dropdown/header"))}}
       <ul class="hds-dropdown__list" {{did-insert this.didInsertList}}>
         {{yield

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

@@ -39,11 +39,27 @@ export default class HdsDropdownIndexComponent extends Component {
   }
 
   /**
-   * Get the class names to apply to the content
+   * Get the class names to apply to the element
    * @method classNames
-   * @return {string} The "class" attribute to apply to the disclosed content
+   * @return {string} The "class" attribute to apply to the root element
    */
   get classNames() {
+    let classes = ['hds-dropdown'];
+
+    // add a class based on the @isInline argument
+    if (this.args.isInline) {
+      classes.push('hds-dropdown--is-inline');
+    }
+
+    return classes.join(' ');
+  }
+
+  /**
+   * Get the class names to apply to the content
+   * @method classNamesContent
+   * @return {string} The "class" attribute to apply to the disclosed content
+   */
+  get classNamesContent() {
     let classes = ['hds-dropdown__content'];
 
     // add a class based on the @listPosition argument

package/addon/components/hds/dropdown/list-item/checkbox.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <li class="hds-dropdown-list-item hds-dropdown-list-item--variant-checkbox">
   <Hds::Form::Checkbox::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
   {{#if @icon}}

package/addon/components/hds/dropdown/list-item/checkbox.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { getElementId } from '../../form/utils/getElementId';
 

package/addon/components/hds/dropdown/list-item/checkmark.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 {{! template-lint-disable require-context-role require-presentational-children }}
 <li class={{this.classNames}}>
   <Hds::Interactive

package/addon/components/hds/dropdown/list-item/checkmark.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 
 export default class HdsDropdownListItemCheckmarkComponent extends Component {

package/addon/components/hds/dropdown/list-item/radio.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <li class="hds-dropdown-list-item hds-dropdown-list-item--variant-radio">
   <Hds::Form::Radio::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
   {{#if @icon}}

package/addon/components/hds/dropdown/list-item/radio.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { getElementId } from '../../form/utils/getElementId';
 

package/addon/components/hds/dropdown/toggle/chevron.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <div class="hds-dropdown-toggle-chevron">
   <FlightIcon @name="chevron-down" @isInlineBlock={{false}} />
 </div>

package/addon/components/hds/flyout/footer.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-flyout__footer" ...attributes>
+  {{yield (hash close=@onDismiss)}}
+</div>

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

@@ -12,6 +12,7 @@
   {{yield (hash Header=(component "hds/flyout/header" id=this.id onDismiss=this.onDismiss))}}
   {{yield (hash Description=(component "hds/flyout/description"))}}
   {{yield (hash Body=(component "hds/flyout/body"))}}
+  {{yield (hash Footer=(component "hds/flyout/footer" onDismiss=this.onDismiss))}}
 </dialog>
 {{#if this.isOpen}}
   <div class="hds-flyout__overlay"></div>

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

@@ -0,0 +1,14 @@
+<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/{home-link.js → header/home-link.js}

@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
-export default class HdsSideNavHomeLinkComponent extends Component {
+export default class HdsSideNavHeaderHomeLinkComponent extends Component {
   /**
    * @param ariaLabel
    * @type {string}
@@ -16,7 +16,7 @@ export default class HdsSideNavHomeLinkComponent extends Component {
     let { ariaLabel } = this.args;
 
     assert(
-      '@ariaLabel for "Hds::SideNav::HomeLink" must have a valid value',
+      '@ariaLabel for "Hds::SideNav::Header::HomeLink" ("Logo") must have a valid value',
       ariaLabel !== undefined
     );
 

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

@@ -16,5 +16,5 @@
   ...attributes
   aria-label={{this.ariaLabel}}
 >
-  <FlightIcon @name={{@icon}} @color={{@color}} @stretched={{true}} @size="24" />
+  <FlightIcon @name={{@icon}} @stretched={{true}} @size="24" />
 </Hds::Interactive>

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

@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
-export default class HdsSideNavIconButtonComponent extends Component {
+export default class HdsSideNavHeaderIconButtonComponent extends Component {
   /**
    * @param ariaLabel
    * @type {string}
@@ -16,7 +16,7 @@ export default class HdsSideNavIconButtonComponent extends Component {
     let { ariaLabel } = this.args;
 
     assert(
-      '@ariaLabel for "Hds::SideNav::IconButton" must have a valid value',
+      '@ariaLabel for "Hds::SideNav::Header::IconButton" must have a valid value',
       ariaLabel !== undefined
     );
 

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

@@ -4,10 +4,10 @@
 }}
 
 <div class="hds-side-nav-header" ...attributes>
-  <div class="hds-side-nav-header__logo">
+  <div class="hds-side-nav-header__logo-container">
     {{yield to="logo"}}
   </div>
-  <div class="hds-side-nav-header__actions">
+  <div class="hds-side-nav-header__actions-container hds-side-nav-hide-when-minimized">
     {{yield to="actions"}}
   </div>
 </div>