@hashicorp/design-system-components 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @hashicorp/design-system-components
 
+## 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 +39,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 +447,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 +494,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/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,30 @@
+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/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/side-nav/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/app/components/hds/{empty-state → application-state}/body.js

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/empty-state/body';
+export { default } from '@hashicorp/design-system-components/components/hds/application-state/body';

package/app/components/hds/{empty-state → application-state}/footer.js

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/empty-state/footer';
+export { default } from '@hashicorp/design-system-components/components/hds/application-state/footer';

package/app/components/hds/{empty-state → application-state}/header.js

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/empty-state/header';
+export { default } from '@hashicorp/design-system-components/components/hds/application-state/header';

package/app/components/hds/{empty-state → application-state}/index.js

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/empty-state/index';
+export { default } from '@hashicorp/design-system-components/components/hds/application-state/index';

package/app/components/hds/dropdown/footer.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/footer';

package/app/components/hds/dropdown/header.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/header';

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

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/checkbox';

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

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/checkmark';

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

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/radio';

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

@@ -13,6 +13,7 @@
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
 // START COMPONENTS CSS FILES IMPORTS
 @use "../components/alert";
+@use "../components/application-state";
 @use "../components/avatar";
 @use "../components/badge";
 @use "../components/badge-count";
@@ -23,7 +24,6 @@
 @use "../components/disclosure";
 @use "../components/dismiss-button";
 @use "../components/dropdown";
-@use "../components/empty-state";
 @use "../components/flyout";
 @use "../components/form"; // multiple components
 @use "../components/icon-tile";

package/app/styles/@hashicorp/design-system-power-select-overrides.scss

@@ -92,7 +92,7 @@
       background-color: var(--token-form-control-base-surface-color-default);
       border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
       border-radius: var(--token-form-control-border-radius);
-      box-shadow: var(--hds-elevation-inset-box-shadow);
+      box-shadow: var(--token-elevation-inset-box-shadow);
 
       // PLACEHOLDER
 

package/app/styles/components/application-state.scss

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// APPLICATION-STATE COMPONENT
+//
+
+$hds-application-state-padding: 12px 0;
+
+.hds-application-state {
+  width: 19.5rem;
+  max-width: 100%;
+  margin: 0 auto; // this will center the component in the parent container
+}
+
+.hds-application-state__header {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  align-items: start;
+  color: var(--token-color-foreground-faint);
+}
+
+.hds-application-state__icon {
+  margin-right: 8px; // instead of column gap
+  padding-top: 4px; // this seems to align the icon along with line 21
+}
+
+.hds-application-state__title,
+.hds-application-state__error-code {
+  grid-column-start: 2;
+}
+
+.hds-application-state__body {
+  display: flex;
+  padding: $hds-application-state-padding;
+  color: var(--token-color-foreground-faint);
+}
+
+.hds-application-state__footer {
+  display: flex;
+  justify-content: space-between;
+
+  &.hds-application-state__footer--has-divider {
+    padding: $hds-application-state-padding;
+    border-top: 1px solid var(--token-color-border-strong);
+  }
+
+  // in case users do something outside design guidelines
+  .hds-link-standalone + .hds-link-standalone {
+    margin-left: 8px;
+  }
+}
+

package/app/styles/components/form/checkbox.scss

@@ -30,7 +30,7 @@
   &:not(:checked, :indeterminate) {
     background-color: var(--token-form-control-base-surface-color-default);
     border-color: var(--token-form-control-base-border-color-default);
-    box-shadow: var(--hds-elevation-inset-box-shadow);
+    box-shadow: var(--token-elevation-inset-box-shadow);
   }
 
   &:checked {

package/app/styles/components/form/radio.scss

@@ -30,7 +30,7 @@
   &:not(:checked) {
     background-color: var(--token-form-control-base-surface-color-default);
     border-color: var(--token-form-control-base-border-color-default);
-    box-shadow: var(--hds-elevation-inset-box-shadow);
+    box-shadow: var(--token-elevation-inset-box-shadow);
   }
 
   &:checked {

package/app/styles/components/form/text-input.scss

@@ -18,7 +18,7 @@
   background-color: var(--token-form-control-base-surface-color-default);
   border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
   border-radius: var(--token-form-control-border-radius);
-  box-shadow: var(--hds-elevation-inset-box-shadow);
+  box-shadow: var(--token-elevation-inset-box-shadow);
 
   // PLACEHOLDER
 

package/app/styles/components/form/textarea.scss

@@ -18,7 +18,7 @@
   background-color: var(--token-form-control-base-surface-color-default);
   border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
   border-radius: var(--token-form-control-border-radius);
-  box-shadow: var(--hds-elevation-inset-box-shadow);
+  box-shadow: var(--token-elevation-inset-box-shadow);
   resize: vertical;
 
   // PLACEHOLDER

package/blueprints/hds-component-test/files/tests/integration/components/hds/__name__/index-test.js

@@ -8,15 +8,18 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
-module('Integration | Component | hds/<%= dasherizedModuleName %>/index', function (hooks) {
-  setupRenderingTest(hooks);
+module(
+  'Integration | Component | hds/<%= dasherizedModuleName %>/index',
+  function (hooks) {
+    setupRenderingTest(hooks);
 
-  test('it renders the component', async function (assert) {
-    await render(hbs`<Hds::<%= columnizedModuleName %> />`);
-    assert.dom(this.element).exists();
-  });
-  test('it should render with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::<%= columnizedModuleName %> id="test-<%= kebabizedModuleName %>" />`);
-    assert.dom('#test-<%= kebabizedModuleName %>').hasClass('hds-<%= kebabizedModuleName %>');
-  });
-});
+    test('it should render the component with a CSS class that matches the component name', async function (assert) {
+      await render(
+        hbs`<Hds::<%= columnizedModuleName %> id="test-<%= kebabizedModuleName %>" />`
+      );
+      assert
+        .dom('#test-<%= kebabizedModuleName %>')
+        .hasClass('hds-<%= kebabizedModuleName %>');
+    });
+  }
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -79,7 +79,7 @@
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
     "ember-power-select": "^6.0.0",
-    "ember-qunit": "^6.1.1",
+    "ember-qunit": "^6.2.0",
     "ember-resolver": "^10.0.0",
     "ember-source": "~4.10.0",
     "ember-source-channel-url": "^3.0.0",

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

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

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

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

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

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

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

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

package/app/styles/components/empty-state.scss

@@ -1,37 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-//
-// EMPTY-STATE COMPONENT
-//
-
-.hds-empty-state {
-  display: block;
-  max-width: 40ch;
-  margin: 0 auto;
-  padding: 0;
-  color: var(--token-color-foreground-faint);
-
-  > * {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.hds-empty-state__body {
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.5;
-
-  + * {
-    margin-block-start: 1rem;
-  }
-}
-
-.hds-empty-state__header {
-  font-weight: 700;
-  font-size: 1.25rem;
-  line-height: 1.2;
-}