Update "Choose a template" screen (#366)

* Update and test doc template screen

* Add helper test

* Change icon color to gray

web/app/components/new/document-template-list.hbs

@@ -0,0 +1,91 @@
+<div class="flex items-center gap-3.5">
+  <h1>Choose a template</h1>
+  {{! PENDING }}
+  {{!
+    <div class="hermes-h4 mt-[5px] mr-0.5">
+      or
+    </div>
+    <Hds::Button
+      @text="Start a project"
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      @color="secondary"
+      class="mt-[4px]"
+    />
+  }}
+</div>
+
+<ol class="mt-8 grid auto-rows-fr grid-cols-2 gap-2">
+  {{#each @docTypes as |docType|}}
+    <li data-test-template-option class="relative flex items-stretch">
+      <LinkTo
+        @route="authenticated.new.doc"
+        @query={{hash docType=docType.name}}
+        class="flex w-full items-stretch"
+      >
+        <Hds::Card::Container
+          @level="mid"
+          @levelHover="high"
+          @hasBorder={{true}}
+          class="relative w-full px-5 pt-5 pb-6 hover:bg-gradient-to-b hover:from-color-surface-interactive hover:to-color-surface-action"
+        >
+          <div class="flex w-full gap-3.5">
+            <FlightIcon
+              data-test-icon
+              @size="24"
+              @name={{or docType.flightIcon (get-doctype-icon docType.name)}}
+              class="-mt-1 shrink-0 text-color-foreground-faint"
+            />
+            <div class="w-full">
+              <div class="flex w-full items-start justify-between gap-2.5">
+                <h2 data-test-long-name class="hermes-h-300 leading-none">
+                  {{docType.longName}}
+                </h2>
+                {{#unless
+                  (eq (lowercase docType.longName) (lowercase docType.name))
+                }}
+                  <p
+                    data-test-name
+                    class="mt-px mr-2 shrink-0 leading-none text-color-foreground-disabled"
+                  >
+                    {{docType.name}}
+                  </p>
+                {{/unless}}
+              </div>
+              <p
+                data-test-description
+                class="mt-1.5 max-w-[360px] text-body-300 text-color-foreground-faint"
+              >
+                {{docType.description}}
+              </p>
+            </div>
+          </div>
+        </Hds::Card::Container>
+      </LinkTo>
+    </li>
+  {{/each}}
+</ol>
+
+{{#if this.moreInfoLinksAreShown}}
+  <div class="mt-12 max-w-md">
+    <h3 class="mb-2 text-display-100 font-medium text-color-foreground-faint">
+      Related links
+    </h3>
+    <ul class="grid gap-1">
+      {{#each @docTypes as |docType|}}
+        {{#if docType.moreInfoLink}}
+          <li>
+            <ExternalLink
+              data-test-more-info-link
+              @iconIsShown={{true}}
+              href={{docType.moreInfoLink.url}}
+              class="relative inline-flex text-body-200 text-color-foreground-faint decoration-color-palette-neutral-200 hover:text-color-foreground-primary"
+            >
+              {{docType.moreInfoLink.text}}
+            </ExternalLink>
+          </li>
+        {{/if}}
+      {{/each}}
+    </ul>
+  </div>
+{{/if}}

web/app/components/new/document-template-list.ts

@@ -0,0 +1,20 @@
+import Component from "@glimmer/component";
+import { HermesDocumentType } from "hermes/types/document-type";
+
+interface NewDocumentTemplateListComponentSignature {
+  Args: {
+    docTypes: HermesDocumentType[];
+  };
+}
+
+export default class NewDocumentTemplateListComponent extends Component<NewDocumentTemplateListComponentSignature> {
+  protected get moreInfoLinksAreShown(): boolean {
+    return this.args.docTypes.some((docType) => docType.moreInfoLink);
+  }
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "New::DocumentTemplateList": typeof NewDocumentTemplateListComponent;
+  }
+}

web/app/helpers/get-doctype-icon.ts

@@ -0,0 +1,38 @@
+import { helper } from "@ember/component/helper";
+
+export interface GetDoctypeIconSignature {
+  Args: {
+    Positional: [string];
+  };
+  Return: string;
+}
+
+/**
+ * Returns the FlightIcon name for a given document type.
+ * This is a temporary helper until "flight_icon" is added
+ * to the HermesDocumentType model.
+ */
+const getDoctypeIconHelper = helper<GetDoctypeIconSignature>(
+  ([docTypeName]) => {
+    switch (docTypeName.toLowerCase()) {
+      case "rfc":
+        return "discussion-circle";
+      case "prd":
+        return "target";
+      case "frd":
+        return "dollar-sign";
+      case "memo":
+        return "radio";
+      default:
+        return "file-text";
+    }
+  },
+);
+
+export default getDoctypeIconHelper;
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "get-doctype-icon": typeof getDoctypeIconHelper;
+  }
+}

web/app/styles/app.scss

@@ -22,7 +22,6 @@
 @use "components/multiselect";
 @use "components/page";
 @use "components/row-results";
-@use "components/template-card";
 @use "components/header/active-filter-list";
 @use "components/header/active-filter-list-item";
 @use "components/header/search";

web/app/styles/typography.scss

@@ -12,6 +12,10 @@
   @apply text-body-100;
 }
 
+.hermes-h-300 {
+  @apply text-display-300 font-semibold text-color-foreground-strong;
+}
+
 .hermes-h4 {
   @apply text-body-100 font-medium uppercase tracking-wide text-color-foreground-faint;
 }

web/app/templates/authenticated/new/index.hbs

@@ -1,46 +1,3 @@
-{{page-title "New Doc"}}
+{{page-title "Choose a template"}}
 
-<h1 class="mb-1.5">Choose a template</h1>
-<ol class="mt-9 grid grid-cols-3 gap-4">
-  {{#each @model as |docType|}}
-    <li class="relative">
-      <LinkTo
-        class="h-full w-full no-underline"
-        @route="authenticated.new.doc"
-        @query={{hash docType=docType.name}}
-      >
-        <Hds::Card::Container
-          @level="mid"
-          @levelHover="high"
-          @hasBorder={{true}}
-          class="template-card
-            {{if docType.moreInfoLink 'template-card--with-link'}}"
-        >
-          <div>
-            <p class="mb-1 text-display-200 text-color-foreground-primary">
-              {{docType.name}}
-            </p>
-            <h2
-              class="text-display-400 font-semibold text-color-foreground-strong"
-            >
-              {{docType.longName}}
-            </h2>
-            <p class="my-2 text-body-200 text-color-foreground-primary">
-              {{docType.description}}
-            </p>
-          </div>
-        </Hds::Card::Container>
-      </LinkTo>
-      {{#if docType.moreInfoLink}}
-        <Hds::Link::Standalone
-          @isHrefExternal={{true}}
-          @href={{docType.moreInfoLink.url}}
-          @icon="external-link"
-          @iconPosition="trailing"
-          class="small-external-link absolute bottom-6 left-5 z-10 whitespace-nowrap"
-          @text={{docType.moreInfoLink.text}}
-        />
-      {{/if}}
-    </li>
-  {{/each}}
-</ol>
+<New::DocumentTemplateList @docTypes={{this.model}} />

web/app/types/document-type.d.ts

@@ -14,6 +14,7 @@ export interface HermesDocumentType {
   name: string;
   longName: string;
   description: string;
+  flightIcon?: string;
   moreInfoLink?: {
     text: string;
     url: string;

web/mirage/config.ts

@@ -306,49 +306,33 @@ export default function (mirageConfig) {
        * Used in the /new routes when creating a document.
        */
       this.get("/document-types", () => {
-        return new Response(200, {}, [
-          {
-            name: "RFC",
-            longName: "Request for Comments",
-            description:
-              "Create a Request for Comments document to present a proposal to colleagues for their review and feedback.",
-            moreInfoLink: {
-              text: "More-info link",
-              url: "example.com",
-            },
-            checks: [
-              {
-                label: "I have read the Terms and Conditions",
-                helperText:
-                  "Please read the Terms and Conditions before proceeding.",
-                links: [
-                  {
-                    text: "Terms and Conditions",
-                    url: "example.com",
-                  },
-                ],
-              },
-            ],
-            customFields: [
-              {
-                name: "Current Version",
-                readOnly: false,
-                type: "string",
-              },
-              {
-                name: "Stakeholders",
-                readOnly: false,
-                type: "people",
+        if (this.schema.documentTypes.all().models.length === 0) {
+          return new Response(200, {}, [
+            {
+              name: "RFC",
+              longName: "Request for Comments",
+              description:
+                "Present a proposal to colleagues for their review and feedback.",
+              moreInfoLink: {
+                text: "More-info link",
+                url: "example.com",
               },
-            ],
-          },
-          {
-            name: "PRD",
-            longName: "Product Requirements",
-            description:
-              "Create a Product Requirements Document to summarize a problem statement and outline a phased approach to addressing the problem.",
-          },
-        ]);
+            },
+            {
+              name: "PRD",
+              longName: "Product Requirements",
+              description:
+                "Summarize a problem statement and outline a phased approach to addressing it.",
+            },
+          ]);
+        }
+        return new Response(
+          200,
+          {},
+          this.schema.documentTypes.all().models.map((docType) => {
+            return docType.attrs;
+          }),
+        );
       });
 
       /**

web/mirage/factories/document-type.ts

@@ -0,0 +1,7 @@
+import { Factory } from "miragejs";
+
+export default Factory.extend({
+  name: (i: number) => `DT${i}`,
+  longName: (i: number) => `Document Type ${i}`,
+  description: "This is a test document type",
+});

web/mirage/models/document-type.ts

@@ -0,0 +1,5 @@
+import { Model } from "miragejs";
+
+export default Model.extend({
+  // Required for Mirage, even though it's empty
+});