ApplicationState Enhancements - Implementation

.changeset/shaggy-apes-own.md

@@ -0,0 +1,17 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`ApplicationState`:
+
+- Spacing and alignment updates
+- New `@align` (`left` (default), `center`) argument for aligning content
+- Added new yielded `Media` child component
+
+`ApplicationState::Header`:
+
+- The header now supports an optional `@titleTag` argument that can override the default title element (`div`)
+
+`ApplicationState::Footer`:
+
+- The footer now yields `Button` and `Dropdown` components as well as `LinkStandalone`

packages/components/package.json

@@ -140,6 +140,7 @@
       "./components/hds/application-state/footer.js": "./dist/_app_/components/hds/application-state/footer.js",
       "./components/hds/application-state/header.js": "./dist/_app_/components/hds/application-state/header.js",
       "./components/hds/application-state/index.js": "./dist/_app_/components/hds/application-state/index.js",
+      "./components/hds/application-state/media.js": "./dist/_app_/components/hds/application-state/media.js",
       "./components/hds/badge-count/index.js": "./dist/_app_/components/hds/badge-count/index.js",
       "./components/hds/badge/index.js": "./dist/_app_/components/hds/badge/index.js",
       "./components/hds/breadcrumb/index.js": "./dist/_app_/components/hds/breadcrumb/index.js",

packages/components/src/components.ts

@@ -9,6 +9,10 @@ import HdsAlert from './components/hds/alert/index.ts';
 import HdsAppFooter from './components/hds/app-footer/index.ts';
 import HdsAppFrame from './components/hds/app-frame/index.ts';
 import HdsApplicationState from './components/hds/application-state/index.ts';
+import HdsApplicationStateBody from './components/hds/application-state/body.ts';
+import HdsApplicationStateFooter from './components/hds/application-state/footer.ts';
+import HdsApplicationStateHeader from './components/hds/application-state/header.ts';
+import HdsApplicationStateMedia from './components/hds/application-state/media.ts';
 import HdsBadge from './components/hds/badge/index.ts';
 import HdsBadgeCount from './components/hds/badge-count/index.ts';
 import HdsBreadcrumb from './components/hds/breadcrumb/index.ts';
@@ -102,6 +106,10 @@ export {
   HdsAppFooter,
   HdsAppFrame,
   HdsApplicationState,
+  HdsApplicationStateBody,
+  HdsApplicationStateFooter,
+  HdsApplicationStateHeader,
+  HdsApplicationStateMedia,
   HdsBadge,
   HdsBadgeCount,
   HdsBreadcrumb,

packages/components/src/components/hds/application-state/footer.hbs

@@ -3,6 +3,12 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<div class={{this.classNames}} ...attributes>
-  {{yield (hash LinkStandalone=(component "hds/link/standalone"))}}
+<div class="hds-application-state__footer" ...attributes>
+  {{yield
+    (hash
+      Button=(component "hds/button")
+      Dropdown=(component "hds/dropdown")
+      LinkStandalone=(component "hds/link/standalone")
+    )
+  }}
 </div>

packages/components/src/components/hds/application-state/footer.ts

@@ -3,9 +3,11 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
+import TemplateOnlyComponent from '@ember/component/template-only';
 import type { ComponentLike } from '@glint/template';
 import type { HdsLinkStandaloneSignature } from '../link/standalone';
+import type { HdsButtonSignature } from '../button';
+import type { HdsDropdownSignature } from 'src/components/hds/dropdown';
 
 export interface HdsApplicationStateFooterSignature {
   Args: {
@@ -14,38 +16,16 @@ export interface HdsApplicationStateFooterSignature {
   Blocks: {
     default?: [
       {
+        Button?: ComponentLike<HdsButtonSignature>;
+        Dropdown?: ComponentLike<HdsDropdownSignature>;
         LinkStandalone?: ComponentLike<HdsLinkStandaloneSignature>;
       },
     ];
   };
   Element: HTMLDivElement;
 }
 
-export default class HdsApplicationStateFooterComponent extends Component<HdsApplicationStateFooterSignature> {
-  /**
-   * Indicate if the footer should have a top border or not.
-   *
-   * @param hasDivider
-   * @type {boolean}
-   * @default false
-   */
-  get hasDivider(): boolean {
-    return this.args.hasDivider ?? false;
-  }
+const HdsApplicationStateFooterComponent =
+  TemplateOnlyComponent<HdsApplicationStateFooterSignature>();
 
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames(): string {
-    const 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(' ');
-  }
-}
+export default HdsApplicationStateFooterComponent;

packages/components/src/components/hds/application-state/header.hbs

@@ -3,18 +3,24 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 <div class="hds-application-state__header" ...attributes>
+  {{#if @errorCode}}
+    <Hds::Text::Body class="hds-application-state__error-code" @tag="div" @size="100" @weight="medium" @color="faint">
+      ERROR
+      {{@errorCode}}
+    </Hds::Text::Body>
+  {{/if}}
   {{#if @icon}}
     <div class="hds-application-state__icon">
-      <FlightIcon @name={{@icon}} @size="24" />
+      <FlightIcon @color="var(--token-color-foreground-strong)" @name={{@icon}} @size="24" />
     </div>
   {{/if}}
-  <Hds::Text::Display class="hds-application-state__title" @tag="div" @size="400" @weight="semibold">
+  <Hds::Text::Display
+    class="hds-application-state__title"
+    @tag={{this.titleTag}}
+    @size="300"
+    @weight="semibold"
+    @color="strong"
+  >
     {{@title}}
   </Hds::Text::Display>
-  {{#if @errorCode}}
-    <Hds::Text::Body class="hds-application-state__error-code" @tag="div" @size="100" @weight="medium">
-      Error
-      {{@errorCode}}
-    </Hds::Text::Body>
-  {{/if}}
 </div>

packages/components/src/components/hds/application-state/header.ts

@@ -3,20 +3,22 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import TemplateOnlyComponent from '@ember/component/template-only';
+import Component from '@glimmer/component';
 
 import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
-
+import type { HdsTextDisplaySignature } from '../text/display';
 export interface HdsApplicationStateHeaderSignature {
   Args: {
     title?: string;
+    titleTag?: HdsTextDisplaySignature['Args']['tag'];
     errorCode?: string;
     icon?: FlightIconSignature['Args']['name'];
   };
   Element: HTMLDivElement;
 }
 
-const HdsApplicationStateHeaderComponent =
-  TemplateOnlyComponent<HdsApplicationStateHeaderSignature>();
-
-export default HdsApplicationStateHeaderComponent;
+export default class HdsApplicationStateHeaderComponent extends Component<HdsApplicationStateHeaderSignature> {
+  get titleTag() {
+    return this.args.titleTag ?? 'div';
+  }
+}

packages/components/src/components/hds/application-state/index.hbs

@@ -2,9 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-application-state" ...attributes>
+<div class={{this.classNames}} ...attributes>
   {{yield
     (hash
+      Media=(component "hds/application-state/media")
       Header=(component "hds/application-state/header")
       Body=(component "hds/application-state/body")
       Footer=(component "hds/application-state/footer")

packages/components/src/components/hds/application-state/index.ts

@@ -3,16 +3,26 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import TemplateOnlyComponent from '@ember/component/template-only';
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { HdsApplicationStateAlignValues } from './types.ts';
+
 import type { ComponentLike } from '@glint/template';
+import type { HdsApplicationStateAligns } from './types';
+import type { HdsApplicationStateMediaSignature } from './media';
 import type { HdsApplicationStateHeaderSignature } from './header';
 import type { HdsApplicationStateBodySignature } from './body';
 import type { HdsApplicationStateFooterSignature } from './footer';
 
+export const ALIGNS: string[] = Object.values(HdsApplicationStateAlignValues);
 export interface HdsApplicationStateSignature {
+  Args: {
+    align?: HdsApplicationStateAligns;
+  };
   Blocks: {
     default: [
       {
+        Media?: ComponentLike<HdsApplicationStateMediaSignature>;
         Header?: ComponentLike<HdsApplicationStateHeaderSignature>;
         Body?: ComponentLike<HdsApplicationStateBodySignature>;
         Footer?: ComponentLike<HdsApplicationStateFooterSignature>;
@@ -22,7 +32,28 @@ export interface HdsApplicationStateSignature {
   Element: HTMLDivElement;
 }
 
-const HdsApplicationStateComponent =
-  TemplateOnlyComponent<HdsApplicationStateSignature>();
+export default class HdsApplicationStateComponent extends Component<HdsApplicationStateSignature> {
+  get align(): HdsApplicationStateAligns {
+    const validAlignValues: HdsApplicationStateAligns[] = Object.values(
+      HdsApplicationStateAlignValues
+    );
+
+    assert(
+      `@align for "Hds::ApplicationState" must be one of the following: ${validAlignValues.join(
+        ', '
+      )}; received: ${this.args.align}`,
+      this.args.align == null || validAlignValues.includes(this.args.align)
+    );
+
+    return this.args.align ?? HdsApplicationStateAlignValues.Left;
+  }
 
-export default HdsApplicationStateComponent;
+  get classNames(): string {
+    const classes = ['hds-application-state'];
+
+    // add a class based on the @align argument
+    classes.push(`hds-application-state--align-${this.align}`);
+
+    return classes.join(' ');
+  }
+}

packages/components/src/components/hds/application-state/media.hbs

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

packages/components/src/components/hds/application-state/media.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import TemplateOnlyComponent from '@ember/component/template-only';
+
+export interface HdsApplicationStateMediaSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+const HdsApplicationStateMediaComponent =
+  TemplateOnlyComponent<HdsApplicationStateMediaSignature>();
+
+export default HdsApplicationStateMediaComponent;

packages/components/src/components/hds/application-state/types.ts

@@ -0,0 +1,5 @@
+export enum HdsApplicationStateAlignValues {
+  Left = 'left',
+  Center = 'center',
+}
+export type HdsApplicationStateAligns = `${HdsApplicationStateAlignValues}`;

packages/components/src/styles/components/application-state.scss

@@ -7,43 +7,84 @@
 // APPLICATION-STATE COMPONENT
 //
 
-$hds-application-state-padding: 12px 0;
+$hds-application-state-content-max-width: 480px;
 
 .hds-application-state {
-  width: 19.5rem;
-  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  width: fit-content;
   margin: 0 auto; // this will center the component in the parent container
+
+  &.hds-application-state--align-center {
+    align-items: center;
+    text-align: center;
+
+    .hds-application-state__header,
+    .hds-application-state__body,
+    .hds-application-state__footer {
+      width: auto;
+    }
+  }
+}
+
+.hds-application-state__media {
+  margin-bottom: 32px;
+
+  > * {
+    display: block;
+    max-width: 100%;
+  }
 }
 
 .hds-application-state__header {
   display: grid;
+  grid-template-areas:
+    "error error"
+    "icon title";
   grid-template-columns: min-content 1fr;
-  align-items: start;
-  color: var(--token-color-foreground-faint);
+  align-items: center;
+  width: 100%;
+  max-width: $hds-application-state-content-max-width;
+  color: var(--token-color-foreground-strong);
+}
+
+.hds-application-state__error-code {
+  grid-area: error;
+  margin-bottom: 4px;
 }
 
 .hds-application-state__icon {
+  grid-area: 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__title {
+  grid-row: 2;
+  font-weight: var(--token-typography-font-weight-semibold);
+
+  &:not(.hds-application-state__icon + &) {
+    grid-column: icon / title;
+  }
 }
 
 .hds-application-state__body {
-  padding: $hds-application-state-padding;
-  color: var(--token-color-foreground-faint);
+  width: 100%;
+  max-width: $hds-application-state-content-max-width;
+  margin: 12px 0 0;
+  color: var(--token-color-foreground-primary);
 }
 
 .hds-application-state__footer {
   display: flex;
-  gap: 8px;
-  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  max-width: $hds-application-state-content-max-width;
+  margin-top: 24px;
 
-  &.hds-application-state__footer--has-divider {
-    padding: $hds-application-state-padding;
-    border-top: 1px solid var(--token-color-border-strong);
+  // forces the third child and on to be on the right side
+  > :nth-child(3) {
+    margin-left: auto;
   }
 }