Merge pull request #2096 from hashicorp/br-app-footer-ts

`AppFooter` - Convert to Typescript

.changeset/plenty-emus-marry.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`AppFooter` - Converted comonent to TypeScript

packages/components/src/components/hds/app-footer/copyright.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/app-footer/copyright.js → packages/components/src/components/hds/app-footer/copyright.ts

@@ -5,7 +5,14 @@
 
 import Component from '@glimmer/component';
 
-export default class HdsAppFooterCopyrightComponent extends Component {
+export interface HdsAppFooterCopyrightSignature {
+  Args: {
+    year?: string;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class HdsAppFooterCopyrightComponent extends Component<HdsAppFooterCopyrightSignature> {
   /**
    * @param year
    * @type {string}

packages/components/src/components/hds/app-footer/index.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/app-footer/index.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsYieldSignature } from '../yield';
+import type HdsAppFooterItemSignature from './legal-links';
+import type HdsAppFooterLegalLinksSignature from './legal-links';
+import type HdsAppFooterLinkSignature from './link';
+import type HdsAppFooterStatusLinkSignature from './status-link';
+import type { HdsAppFooterThemeTypes } from './types.ts';
+
+export interface HdsAppFooterSignature {
+  Args: {
+    ariaLabel?: string;
+    copyrightYear?: string;
+    theme?: HdsAppFooterThemeTypes;
+  };
+  Blocks: {
+    default: [
+      {
+        ExtraBefore?: ComponentLike<HdsYieldSignature>;
+        StatusLink?: ComponentLike<HdsAppFooterStatusLinkSignature>;
+        LegalLinks?: ComponentLike<HdsAppFooterLegalLinksSignature>;
+        Link?: ComponentLike<HdsAppFooterLinkSignature>;
+        Item?: ComponentLike<HdsAppFooterItemSignature>;
+        ExtraAfter?: ComponentLike<HdsYieldSignature>;
+      }
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class HdsAppFooterComponent extends Component<HdsAppFooterSignature> {
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Footer items'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'Footer items';
+  }
+
+  /**
+   * @param theme
+   * @type {HdsAppFooterThemeTypes}
+   * @description The component theme
+   * @default 'light'
+   */
+  get theme() {
+    return this.args.theme ?? 'light';
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    const classes = ['hds-app-footer'];
+
+    // add a class based on the @theme argument
+    classes.push(`hds-app-footer--theme-${this.theme}`);
+
+    return classes.join(' ');
+  }
+}

packages/components/src/components/hds/app-footer/item.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/app-footer/item.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export interface HdsAppFooterItemSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLLIElement;
+}
+
+export default class HdsAppFooterItemComponent extends Component<HdsAppFooterItemSignature> {}

packages/components/src/components/hds/app-footer/legal-links.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/app-footer/legal-links.js → packages/components/src/components/hds/app-footer/legal-links.ts

@@ -5,7 +5,19 @@
 
 import Component from '@glimmer/component';
 
-export default class HdsAppFooterLegalLinksComponent extends Component {
+export interface HdsAppFooterLegalLinksSignature {
+  Args: {
+    ariaLabel?: string;
+    hrefForTerms?: string;
+    hrefForPrivacy?: string;
+    hrefForSecurity?: string;
+    hrefForSupport?: string;
+    hrefForAccessibility?: string;
+  };
+  Element: HTMLUListElement;
+}
+
+export default class HdsAppFooterLegalLinksComponent extends Component<HdsAppFooterLegalLinksSignature> {
   /**
    * @param ariaLabel
    * @type {string}

packages/components/src/components/hds/app-footer/link.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/app-footer/link.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import type { HdsInteractiveSignature } from '../interactive/';
+import type { HdsLinkColors, HdsLinkIconPositions } from '../link/types.ts';
+import type { HdsLinkInlineSignature } from '../link/inline.ts';
+
+export interface HdsAppFooterLinkSignature {
+  Args: HdsInteractiveSignature['Args'] & {
+    color?: HdsLinkColors;
+    icon?: string;
+    iconPosition?: HdsLinkIconPositions;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HdsLinkInlineSignature['Element'];
+}
+
+export default class HdsAppFooterLinkComponent extends Component<HdsAppFooterLinkSignature> {}

packages/components/src/components/hds/app-footer/status-link.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/app-footer/status-link.js → packages/components/src/components/hds/app-footer/status-link.ts

@@ -5,30 +5,30 @@
 
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
+import type { SafeString } from '@ember/template/-private/handlebars';
 import { assert } from '@ember/debug';
 
-export const STATUSES = {
-  operational: {
-    text: 'System operational',
-    iconName: 'check-circle',
-  },
-  degraded: {
-    text: 'System degraded',
-    iconName: 'alert-triangle',
-  },
-  maintenance: {
-    text: 'System maintenance',
-    iconName: 'alert-triangle',
-  },
-  outage: {
-    text: 'System outage',
-    iconName: 'x-circle',
-  },
-};
+import type { HdsInteractiveSignature } from '../interactive/';
+import { HdsAppFooterStatusLinkStatusValues } from './types.ts';
+import type { HdsAppFooterStatusTypes } from './types.ts';
+import type { HdsAppFooterLinkSignature } from './link.ts';
 
-export default class HdsAppFooterStatusLinkComponent extends Component {
-  constructor() {
-    super(...arguments);
+export const STATUSES = HdsAppFooterStatusLinkStatusValues;
+
+export interface HdsAppFooterStatusLinkSignature {
+  Args: HdsInteractiveSignature['Args'] & {
+    itemStyle?: SafeString;
+    status?: HdsAppFooterStatusTypes;
+    statusIcon?: string;
+    statusIconColor?: string;
+    text?: string;
+  };
+  Element: HdsAppFooterLinkSignature['Element'];
+}
+
+export default class HdsAppFooterStatusLinkComponent extends Component<HdsAppFooterStatusLinkSignature> {
+  constructor(owner: unknown, args: HdsInteractiveSignature['Args']) {
+    super(owner, args);
 
     assert(
       'Either @status or @text for "Hds::AppFooter::StatusLink" must have a valid value',
@@ -38,7 +38,7 @@ export default class HdsAppFooterStatusLinkComponent extends Component {
 
   /**
    * @param status
-   * @type {string}
+   * @type {HdsAppFooterStatusTypes}
    * @description The name of the status which the StatusLink is being set to
    */
   get status() {
@@ -49,8 +49,10 @@ export default class HdsAppFooterStatusLinkComponent extends Component {
         `@status for "Hds::AppFooter" must be one of the following: ${Object.keys(
           STATUSES
         ).join(', ')} received: ${this.args.status}`,
-        Object.keys(STATUSES).includes(status)
+
+        status in STATUSES
       );
+      return status as HdsAppFooterStatusTypes;
     }
     return status;
   }
@@ -62,7 +64,7 @@ export default class HdsAppFooterStatusLinkComponent extends Component {
    */
   get statusIcon() {
     if (this.status && !this.args.statusIcon) {
-      return STATUSES[this.status].iconName;
+      return STATUSES[this.status]?.iconName;
     }
     return this.args.statusIcon;
   }
@@ -88,8 +90,8 @@ export default class HdsAppFooterStatusLinkComponent extends Component {
    * @description The text content of the StatusLink
    */
   get text() {
-    if (!this.args.text) {
-      return STATUSES[this.status].text;
+    if (!this.args.text && this.status) {
+      return STATUSES[this.status]?.text;
     }
     return this.args.text;
   }
@@ -109,7 +111,7 @@ export default class HdsAppFooterStatusLinkComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = ['hds-app-footer__status-link'];
+    const classes = ['hds-app-footer__status-link'];
 
     // add a class based on status if no statusIconColor is explicitly specified
     if (this.status && !this.args.statusIconColor) {

packages/components/src/components/hds/app-footer/types.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export enum HdsAppFooterStatusValues {
+  Operational = 'operational',
+  Degraded = 'degraded',
+  Maintenance = 'maintenance',
+  Outage = 'outage',
+}
+
+export type HdsAppFooterStatusTypes = `${HdsAppFooterStatusValues}`;
+
+export const HdsAppFooterStatusLinkStatusValues: Record<
+  HdsAppFooterStatusValues,
+  {
+    text: string;
+    iconName: string;
+  }
+> = {
+  [HdsAppFooterStatusValues.Operational]: {
+    text: 'System operational',
+    iconName: 'check-circle',
+  },
+  [HdsAppFooterStatusValues.Degraded]: {
+    text: 'System degraded',
+    iconName: 'alert-triangle',
+  },
+  [HdsAppFooterStatusValues.Maintenance]: {
+    text: 'System maintenance',
+    iconName: 'alert-triangle',
+  },
+  [HdsAppFooterStatusValues.Outage]: {
+    text: 'System outage',
+    iconName: 'x-circle',
+  },
+};
+
+export enum HdsAppFooterThemeValues {
+  Light = 'light',
+  Dark = 'dark',
+}
+
+export type HdsAppFooterThemeTypes = `${HdsAppFooterThemeValues}`;