Website: batch 2 of component gts conversions

website/app/components/doc/badge/index.js → website/app/components/doc/badge/index.gts

@@ -21,34 +21,49 @@ export const TYPES = [
   'outlined-inverted',
 ];
 
-export default class DocBadgeComponent extends Component {
-  constructor() {
-    super(...arguments);
+type BadgeType = (typeof TYPES)[number];
+
+interface DocBadgeSignature {
+  Args: {
+    type?: BadgeType;
+    size?: 'large' | 'medium';
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class DocBadge extends Component<DocBadgeSignature> {
+  get type() {
+    const type = this.args.type ?? 'neutral';
+
     assert(
       `@type for "Doc::Badge" must be one of the following: ${TYPES.join(
         ', ',
       )}; received: ${this.args.type}`,
-      TYPES.includes(this.args.type),
+      TYPES.includes(type),
     );
-  }
 
-  get type() {
-    return this.args.type ?? 'neutral';
+    return type;
   }
 
   get size() {
     return this.args.size ?? 'large';
   }
 
   get classNames() {
-    let classes = ['doc-badge'];
+    const classes = ['doc-badge'];
 
-    // add a class based on the @type argument
     classes.push(`doc-badge--type-${this.type}`);
-
-    // add a class based on the @size argument
     classes.push(`doc-badge--size-${this.size}`);
 
     return classes.join(' ');
   }
+
+  <template>
+    <div class={{this.classNames}} ...attributes>
+      {{yield}}
+    </div>
+  </template>
 }

website/app/components/doc/banner/index.js → website/app/components/doc/banner/index.gts

@@ -5,6 +5,10 @@
 
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
+import type Owner from '@ember/owner';
+
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import type { HdsIconSignature } from '@hashicorp/design-system-components/components/hds/icon/index';
 
 export const TYPES = [
   'info',
@@ -16,9 +20,21 @@ export const TYPES = [
   'callout',
 ];
 
-export default class DocBannerComponent extends Component {
-  constructor() {
-    super(...arguments);
+type BannerTypes = (typeof TYPES)[number];
+
+interface DocBannerComponentSignature {
+  Args: {
+    type: BannerTypes;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class DocBanner extends Component<DocBannerComponentSignature> {
+  constructor(owner: Owner, args: DocBannerComponentSignature['Args']) {
+    super(owner, args);
     assert(
       `@type for "Doc::Banner" must be one of the following: ${TYPES.join(
         ', ',
@@ -28,7 +44,7 @@ export default class DocBannerComponent extends Component {
   }
 
   get icon() {
-    let icon;
+    let icon: HdsIconSignature['Args']['name'] | undefined;
     switch (this.args.type) {
       case 'info':
       case 'information':
@@ -53,11 +69,22 @@ export default class DocBannerComponent extends Component {
   }
 
   get classNames() {
-    let classes = ['doc-banner'];
+    const classes = ['doc-banner'];
 
     // add a class based on the @type argument
     classes.push(`doc-banner--type-${this.args.type}`);
 
     return classes.join(' ');
   }
+
+  <template>
+    <div class={{this.classNames}} ...attributes>
+      {{#if this.icon}}
+        <HdsIcon class="doc-banner__icon" @name={{this.icon}} @size="24" />
+      {{/if}}
+      <div class="doc-banner__content">
+        {{yield}}
+      </div>
+    </div>
+  </template>
 }

website/app/components/doc/cards/card.gts

@@ -0,0 +1,117 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { LinkTo } from '@ember/routing';
+
+import DocBadge from 'website/components/doc/badge';
+
+interface Status {
+  deprecated?: boolean;
+  updated?: boolean;
+  added?: boolean;
+}
+
+export interface DocCardsCardSignature {
+  Args: {
+    image?: string;
+    title: string;
+    caption?: string;
+    status?: Status;
+    route?: string;
+    model?: unknown;
+    href?: string;
+    layout?: 'vertical' | 'horizontal';
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLLIElement;
+}
+
+export default class DocCardsCard extends Component<DocCardsCardSignature> {
+  get classNames() {
+    const classes = ['doc-cards-card'];
+    const layout = this.args.layout ?? 'vertical';
+
+    // add a class based on the @layout argument, default = 'vertical'
+    classes.push(`doc-cards-card--layout-${layout}`);
+
+    return classes.join(' ');
+  }
+
+  get badgeType() {
+    if (this.args.status?.deprecated) {
+      return 'warning-inverted';
+    } else if (this.args.status?.updated) {
+      return 'neutral-inverted';
+    } else if (this.args.status?.added) {
+      return 'information-inverted';
+    }
+    return undefined;
+  }
+
+  get badgeLabel() {
+    if (this.args.status?.deprecated) {
+      return 'Deprecated';
+    } else if (this.args.status?.updated) {
+      return 'Updated';
+    } else if (this.args.status?.added) {
+      return 'Added';
+    }
+    return undefined;
+  }
+
+  <template>
+    <li class={{this.classNames}} ...attributes>
+      {{#if @route}}
+        <LinkTo
+          class="doc-cards-card__link"
+          @route={{@route}}
+          @model={{@model}}
+        >
+          <img
+            class="doc-cards-card__image"
+            src={{@image}}
+            alt=""
+            role="presentation"
+          />
+          <div class="doc-cards-card__details">
+            <p class="doc-cards-card__title">{{@title}}</p>
+            {{#if this.badgeLabel}}
+              <DocBadge
+                class="doc-cards-card__badge"
+                @type={{this.badgeType}}
+                @size="medium"
+              >{{this.badgeLabel}}</DocBadge>
+            {{/if}}
+            <p class="doc-cards-card_description">{{@caption}}</p>
+          </div>
+        </LinkTo>
+      {{/if}}
+      {{#if @href}}
+        <a class="doc-cards-card__link" href={{@href}}>
+          <img
+            class="doc-cards-card__image"
+            src={{@image}}
+            alt=""
+            role="presentation"
+          />
+          <div class="doc-cards-card__details">
+            <p class="doc-cards-card__title">{{@title}}</p>
+            {{#if this.badgeLabel}}
+              <DocBadge
+                class="doc-cards-card__badge"
+                @type={{this.badgeType}}
+                @size="medium"
+              >{{this.badgeLabel}}</DocBadge>
+            {{/if}}
+            <p class="doc-cards-card_description">{{@caption}}</p>
+          </div>
+        </a>
+      {{/if}}
+    </li>
+  </template>
+}