Website: enable TypeScript & gts format

website/.prettierrc.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   plugins: ['prettier-plugin-ember-template-tag'],
+  templateSingleQuote: false,
   overrides: [
     {
       files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',

website/app/components/doc/a11y-support.gts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { LinkTo } from '@ember/routing';
+
+const DocA11ySupport: TemplateOnlyComponent = <template>
+  <h2
+    class="doc-text-h2 doc-page-sidecar-scroll-margin-top"
+    id="support"
+  >Support</h2>
+  <p class="doc-text-body">If any accessibility issues have been found within
+    this component, let us know by
+    <LinkTo
+      class="doc-link-generic"
+      @route="show"
+      @model="about/support"
+    >submitting an issue</LinkTo>.</p>
+</template>;
+
+export default DocA11ySupport;

website/app/components/doc/badge-group/index.gts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+interface DocBadgeGroupSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+const DocBadgeGroup: TemplateOnlyComponent<DocBadgeGroupSignature> = <template>
+  <div class="doc-badge-group" ...attributes>
+    {{yield}}
+  </div>
+</template>;
+
+export default DocBadgeGroup;

website/app/components/doc/component-api/index.gts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import type { ComponentLike } from '@glint/template';
+import { hash } from '@ember/helper';
+
+import DocComponentApiProperty from 'website/components/doc/component-api/property';
+import type { DocComponentApiPropertySignature } from 'website/components/doc/component-api/property';
+
+interface DocComponentApiSignature {
+  Blocks: {
+    default: [
+      {
+        Property: ComponentLike<DocComponentApiPropertySignature>;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+const DocComponentApi: TemplateOnlyComponent<DocComponentApiSignature> =
+  <template>
+    <div class="doc-component-api" ...attributes>
+      {{yield (hash Property=DocComponentApiProperty)}}
+    </div>
+  </template>;
+
+export default DocComponentApi;

website/app/components/doc/component-api/property.gts

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { or, eq } from 'ember-truth-helpers';
+import type { WithBoundArgs } from '@glint/template';
+import { hash } from '@ember/helper';
+
+import DocBadge from 'website/components/doc/badge';
+import DocBanner from 'website/components/doc/banner';
+
+export interface DocComponentApiPropertySignature {
+  Args: {
+    name?: string;
+    type?: string;
+    required?: boolean;
+    deprecated?: boolean;
+    values?: string[];
+    default?: string;
+    valueNote?: string;
+  };
+  Blocks: {
+    default: [
+      {
+        Banner: WithBoundArgs<typeof DocBanner, 'type'>;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+const DocComponentApiProperty: TemplateOnlyComponent<DocComponentApiPropertySignature> =
+  <template>
+    <div class="doc-component-api__property">
+      {{#if @name}}
+        <div class="doc-component-api__property-info">
+          <code class="doc-component-api__property-name">{{@name}}</code>
+          {{#if @type}}
+            <code class="doc-component-api__property-type">{{@type}}</code>
+          {{/if}}
+          {{#if @required}}
+            {{! @glint-expect-error - component not typed yet }}
+            <DocBadge @type="critical-inverted">Required</DocBadge>
+          {{/if}}
+          {{#if @deprecated}}
+            {{! @glint-expect-error - component not typed yet }}
+            <DocBadge @type="warning">Deprecated</DocBadge>
+          {{/if}}
+        </div>
+      {{/if}}
+      {{#if (or @values @valueNote)}}
+        {{#if @values}}
+          <ul class="doc-component-api__property-values" role="list">
+            {{#each @values as |value|}}
+              <li
+                class="doc-component-api__property-value
+                  {{if
+                    (eq @default value)
+                    'doc-component-api__property-value--default'
+                  }}"
+              >
+                {{value}}{{#if (eq @default value)}}
+                  <span class="doc-sr-only">(default)</span>{{/if}}
+              </li>
+            {{/each}}
+          </ul>
+        {{else if @valueNote}}
+          <div class="doc-component-api__property-values">
+            {{@valueNote}}
+          </div>
+        {{/if}}
+      {{else if @default}}
+        <ul class="doc-component-api__property-values" role="list">
+          <li
+            class="doc-component-api__property-value doc-component-api__property-value--default"
+          >
+            {{@default}}
+            <span class="doc-sr-only">(default)</span>
+          </li>
+        </ul>
+      {{/if}}
+      {{#if (has-block)}}
+        <div class="doc-component-api__property-description">
+          {{yield (hash Banner=(component DocBanner type="warning"))}}
+        </div>
+      {{/if}}
+    </div>
+  </template>;
+
+export default DocComponentApiProperty;

website/app/components/doc/font-helpers-list/index.gts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import DocCopyButton from 'website/components/doc/copy-button';
+
+interface DocFontHelpersListSignature {
+  Args: {
+    items: Array<{
+      previewClass: string;
+      previewText: string;
+      copyText?: string;
+      otherText?: string;
+    }>;
+  };
+}
+
+const DocFontHelpersList: TemplateOnlyComponent<DocFontHelpersListSignature> =
+  <template>
+    <ul class="doc-font-helpers-list" role="list">
+      {{#each @items as |item|}}
+        {{! role="listitem" is needed here because the class sets display: contents and some browsers and assistive technologies will ignore the implied role }}
+        <li class="doc-font-helpers-list__item" role="listitem">
+          <div
+            class="doc-font-helpers-list__preview {{item.previewClass}}"
+          >{{item.previewText}}</div>
+          <div class="doc-font-helpers-list__content">
+            {{#if item.copyText}}
+              <DocCopyButton
+                @textToShow=".{{item.copyText}}"
+                @textToCopy={{item.copyText}}
+                @type="ghost"
+              />
+            {{/if}}
+            {{#if item.otherText}}
+              <code
+                class="doc-font-helpers-list__simple-code"
+              >{{item.otherText}}</code>
+            {{/if}}
+          </div>
+        </li>
+      {{/each}}
+    </ul>
+  </template>;
+
+export default DocFontHelpersList;