Projects index redesign; New status icons (#550)

* Single-column projects index * Tweak secondary nav * Improve checkable item markup * Improve dropdown * Whats a Project component, design tweaks * Fix broken tests * Clean up project header * Tile test * Use `WhatsAProject` component * Update index.hbs * Add focusable=false test * Clean up StatusIcons * Status icon cleanup and test * Test colors
hashicorp-forge · Jan 19, 2024 · ce0b4fe · ce0b4fe
1 parent dfba653
commit ce0b4fe
Show file tree

Hide file tree

Showing 18 changed files with 451 additions and 285 deletions.
diff --git a/web/app/components/new/document-template-list.hbs b/web/app/components/new/document-template-list.hbs
@@ -1,12 +1,12 @@
-<div class="flex items-center justify-between">
+<div class="flex h-12 items-center justify-between">
 
   <div class="flex items-center gap-3.5">
     <h1>Choose a template</h1>
     {{#if this.flags.projects}}
       <div class="hermes-h4 mt-[5px] mr-0.5">
         or
       </div>
-      <div class="relative mt-1">
+      <div class="relative">
         <Hds::Button
           data-test-start-a-project-button
           @text="Start a project"
@@ -26,20 +26,7 @@
       </div>
     {{/if}}
   </div>
-  <div
-    class="mt-1 flex cursor-default items-center gap-2 text-color-foreground-faint"
-    {{tooltip
-      "A project is a public collection of documents and links organized around an effort."
-      class="w-[260px]"
-      placement="bottom-end"
-      offset=(hash mainAxis=8 crossAxis=10)
-    }}
-  >
-    <div class="underline decoration-dotted underline-offset-[5px]">
-      Whatʼs a project
-    </div>
-    <FlightIcon @name="help" class="-ml-px" />
-  </div>
+  <WhatsAProject />
 </div>
 <ol class="mt-8 grid auto-rows-min grid-cols-2 gap-2">
   {{#each this.docTypes as |docType|}}

diff --git a/web/app/components/new/project-form.hbs b/web/app/components/new/project-form.hbs
@@ -14,7 +14,7 @@
   <New::Form
     data-test-project-form
     @taskIsRunning={{this.projectIsBeingCreated}}
-    @icon="grid"
+    @icon="folder"
     @headline="Start a project"
     @taskIsRunningHeadline="Creating project..."
     @taskIsRunningDescription="This shouldn't take long."

diff --git a/web/app/components/project/index.hbs b/web/app/components/project/index.hbs
@@ -1,62 +1,62 @@
 <div class="relative">
-  <div class="project-header mt-1 flex w-full">
-    <div class="flex h-9 w-full justify-between">
-      <div class="flex items-center gap-1.5 text-color-foreground-faint">
-        <LinkTo
-          @route="authenticated.projects"
-          @query={{hash status="active"}}
-          {{tooltip "View all projects"}}
-          class="flex rounded-button-md p-1 hover:bg-color-surface-interactive-hover focus:bg-color-surface-interactive-hover"
-        >
-          <FlightIcon @name="grid" />
-        </LinkTo>
-        <h5 class="hermes-h4 mr-1.5">Project</h5>
-      </div>
-      <div class="flex items-center gap-2">
-        <span class="font-bold">Status:</span>
-        <X::DropdownList
-          @items={{this.statuses}}
-          @placement="bottom-end"
-          @selected={{this.status}}
-          @onItemClick={{this.changeStatus}}
-          class="theme--neutral"
-        >
-          <:anchor as |dd|>
-            <dd.ToggleAction
-              data-test-project-status-toggle
-              class="hds-button hds-button--size-medium hds-button--color-secondary pill-button border-color-border-strong"
-              @hasChevron={{true}}
+
+  <div class="project-header flex h-9 w-full items-center justify-between">
+    {{! Project Badge }}
+    <div
+      class="flex items-center gap-1.5 rounded bg-color-palette-neutral-100 px-2 pt-1 pb-0.5 text-color-foreground-faint"
+    >
+      <h5 class="hermes-h4">
+        Project
+      </h5>
+    </div>
+
+    {{! Status and CopyURLButton }}
+    <div class="flex items-center gap-2">
+      <span class="font-bold">
+        Status:
+      </span>
+      <X::DropdownList
+        @items={{this.statuses}}
+        @placement="bottom-end"
+        @selected={{this.status}}
+        @onItemClick={{this.changeStatus}}
+        class="theme--neutral"
+      >
+        <:anchor as |dd|>
+          <dd.ToggleAction
+            data-test-project-status-toggle
+            class="hds-button hds-button--size-medium hds-button--color-secondary pill-button border-color-border-strong"
+            @hasChevron={{true}}
+          >
+            <Project::StatusIcon @status={{dd.selected}} />
+            <span class="ml-1 mr-0.5">
+              {{this.statusLabel}}
+            </span>
+          </dd.ToggleAction>
+        </:anchor>
+        <:item as |dd|>
+          <dd.Action data-test-status-action={{dd.value}}>
+            <X::DropdownList::CheckableItem
+              @isSelected={{dd.isSelected}}
+              @checkmarkPosition="trailing"
             >
-              <Project::StatusIcon @status={{dd.selected}} />
-              <span class="ml-1 mr-0.5">
-                {{this.statusLabel}}
-              </span>
-            </dd.ToggleAction>
-          </:anchor>
-          <:item as |dd|>
-            <dd.Action data-test-status-action={{dd.value}}>
-              <X::DropdownList::CheckableItem
-                @isSelected={{dd.isSelected}}
-                @checkmarkPosition="trailing"
-              >
-                <:default>
-                  <div class="flex items-center gap-2 pl-1.5">
-                    <Project::StatusIcon @status={{dd.value}} />
-                    <span>
-                      {{dd.attrs.label}}
-                    </span>
-                  </div>
-                </:default>
-              </X::DropdownList::CheckableItem>
-            </dd.Action>
-          </:item>
-        </X::DropdownList>
-        <CopyURLButton
-          @isIconOnly={{true}}
-          @url={{this.url}}
-          class="hds-button hds-button--color-secondary pill-button h-9 w-9 justify-center border-color-border-strong p-0"
-        />
-      </div>
+              <:default>
+                <div class="flex items-center gap-2 pl-1.5">
+                  <Project::StatusIcon @status={{dd.value}} />
+                  <span>
+                    {{dd.attrs.label}}
+                  </span>
+                </div>
+              </:default>
+            </X::DropdownList::CheckableItem>
+          </dd.Action>
+        </:item>
+      </X::DropdownList>
+      <CopyURLButton
+        @isIconOnly={{true}}
+        @url={{this.url}}
+        class="hds-button hds-button--color-secondary pill-button h-9 w-9 justify-center border-color-border-strong p-0"
+      />
     </div>
   </div>
 

diff --git a/web/app/components/project/status-icon.gts b/web/app/components/project/status-icon.gts
@@ -1,29 +1,87 @@
 import Component from "@glimmer/component";
-import { ProjectStatus } from "hermes/types/project-status";
+import {
+  ProjectStatus,
+  COLOR_BG_ACTIVE,
+  COLOR_BG_COMPLETED,
+  COLOR_BG_ARCHIVED,
+  COLOR_OUTLINE_ACTIVE,
+  COLOR_OUTLINE_COMPLETED,
+  COLOR_OUTLINE_ARCHIVED,
+  COLOR_ICON_ACTIVE,
+  COLOR_ICON_COMPLETED,
+} from "hermes/types/project-status";
 
 interface ProjectStatusIconComponentSignature {
   Element: SVGElement;
   Args: {
     status: `${ProjectStatus}`;
   };
-  Blocks: {
-    default: [];
-  };
 }
 
 export default class ProjectStatusIconComponent extends Component<ProjectStatusIconComponentSignature> {
+  /**
+   * Whether the current project status is active.
+   * Determines if the "zap" icon is shown.
+   */
   protected get isActive(): boolean {
     return this.args.status === ProjectStatus.Active;
   }
 
+  /**
+   * Whether the current project status is completed.
+   * Determines if the "check" icon is shown.
+   */
   protected get isCompleted(): boolean {
     return this.args.status === ProjectStatus.Completed;
   }
 
-  protected get isArchived(): boolean {
-    return this.args.status === ProjectStatus.Archived;
+  /**
+   * The background color of the folder.
+   */
+  protected get bgColor(): string {
+    switch (this.args.status) {
+      case ProjectStatus.Active:
+        return COLOR_BG_ACTIVE;
+      case ProjectStatus.Completed:
+        return COLOR_BG_COMPLETED;
+      default:
+        return COLOR_BG_ARCHIVED;
+    }
+  }
+
+  /**
+   * The stroke color of the folder.
+   */
+  protected get outlineColor(): string {
+    switch (this.args.status) {
+      case ProjectStatus.Active:
+        return COLOR_OUTLINE_ACTIVE;
+      case ProjectStatus.Completed:
+        return COLOR_OUTLINE_COMPLETED;
+      default:
+        return COLOR_OUTLINE_ARCHIVED;
+    }
+  }
+
+  /**
+   * The color of the status icon.
+   */
+  protected get iconColor(): string {
+    switch (this.args.status) {
+      case ProjectStatus.Active:
+        return COLOR_ICON_ACTIVE;
+      case ProjectStatus.Completed:
+        return COLOR_ICON_COMPLETED;
+      default:
+        return COLOR_OUTLINE_ARCHIVED;
+    }
   }
 
+  /***
+   * Note: we use `data-test-color` to test color attributes since `fill`
+   * and `stroke` are converted from CSS tokens to `rgb` by `getAttribute`.
+   * By using `data-test-color` we can confirm the original token.
+   */
   <template>
     <svg
       width="16"
@@ -32,54 +90,60 @@ export default class ProjectStatusIconComponent extends Component<ProjectStatusI
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       data-test-project-status-icon
-      data-test-status={{this.args.status}}
+      data-test-status={{@status}}
       ...attributes
     >
+      {{! Background }}
+      <path
+        data-test-background
+        data-test-color={{this.bgColor}}
+        fill={{this.bgColor}}
+        fill-rule="evenodd"
+        d="M2.25 1A2.25 2.25 0 0 0 0 3.25v9.5A2.25 2.25 0 0 0 2.25 15h11.5A2.25 2.25 0 0 0 16 12.75v-7.5A2.25 2.25 0 0 0 13.75 3H9.871a.75.75 0 0 1-.53-.22L8.22 1.66A2.25 2.25 0 0 0 6.629 1H2.25Z"
+        clip-rule="evenodd"
+      />
+
+      {{! Outline }}
+      <path
+        data-test-outline
+        data-test-color={{this.outlineColor}}
+        fill={{this.outlineColor}}
+        fill-rule="evenodd"
+        d="M2.25 1A2.25 2.25 0 0 0 0 3.25v9.5A2.25 2.25 0 0 0 2.25 15h11.5A2.25 2.25 0 0 0 16 12.75v-7.5A2.25 2.25 0 0 0 13.75 3H9.871a.75.75 0 0 1-.53-.22L8.22 1.66A2.25 2.25 0 0 0 6.629 1H2.25ZM1.5 3.25a.75.75 0 0 1 .75-.75h4.379a.75.75 0 0 1 .53.22L8.28 3.84a2.25 2.25 0 0 0 1.591.659h3.879a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75H2.25a.75.75 0 0 1-.75-.75V7h6.13a.75.75 0 0 0 0-1.5H1.5V3.25Z"
+        clip-rule="evenodd"
+        opacity=".6"
+      />
+
       {{#if this.isActive}}
+        {{! Lightning bolt }}
         <path
-          d="M9.3747 0.078024C9.67891 0.228777 9.8439 0.565087 9.77695 0.897934L8.88834 5.31559L14.3726 6.22441C14.6414 6.26896 14.865 6.45581 14.9565 6.71247C15.048 6.96914 14.9931 7.25524 14.813 7.4598L7.52137 15.7455C7.29708 16.0004 6.92954 16.0728 6.62533 15.922C6.32112 15.7713 6.15612 15.435 6.22307 15.1021L7.11168 10.6845L1.6274 9.77566C1.35858 9.73111 1.13506 9.54426 1.04356 9.2876C0.952061 9.03093 1.00697 8.74483 1.18699 8.54027L8.47865 0.254555C8.70295 -0.000319332 9.07049 -0.0727287 9.3747 0.078024Z"
-          fill="var(--token-color-palette-amber-100)"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M9.3747 0.078024C9.67891 0.228777 9.8439 0.565087 9.77695 0.897934L8.88834 5.31559L14.3726 6.22441C14.6414 6.26896 14.865 6.45581 14.9565 6.71247C15.048 6.96914 14.9931 7.25524 14.813 7.4598L7.52137 15.7455C7.29708 16.0004 6.92954 16.0728 6.62533 15.922C6.32112 15.7713 6.15612 15.435 6.22307 15.1021L7.11168 10.6845L1.6274 9.77566C1.35858 9.73111 1.13506 9.54426 1.04356 9.2876C0.952061 9.03093 1.00697 8.74483 1.18699 8.54027L8.47865 0.254555C8.70295 -0.000319332 9.07049 -0.0727287 9.3747 0.078024ZM3.2058 8.51676L8.12263 9.33155C8.32326 9.3648 8.50179 9.4781 8.6173 9.64549C8.73281 9.81287 8.77539 10.02 8.73529 10.2194L8.24606 12.6515L12.7942 7.4833L7.8774 6.66852C7.67676 6.63527 7.49823 6.52197 7.38273 6.35458C7.26722 6.1872 7.22464 5.98008 7.26474 5.78071L7.75396 3.34856L3.2058 8.51676Z"
-          {{! approx amber-200/70 }}
-          fill="#C1834D"
+          data-test-active-affordance
+          data-test-color={{this.iconColor}}
+          stroke={{this.iconColor}}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+          d="M11.221 6.717 9.168 9.536l3.393-.596-2.183 2.775"
+          opacity=".75"
         />
       {{else if this.isCompleted}}
+        {{! Check }}
         <path
-          d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0Z"
-          fill="var(--token-color-palette-green-50)"
-        />
-        <path
-          d="M11.7803 5.21967C12.0732 5.51256 12.0732 5.98744 11.7803 6.28033L7.28033 10.7803C6.98744 11.0732 6.51256 11.0732 6.21967 10.7803L4.21967 8.78033C3.92678 8.48744 3.92678 8.01256 4.21967 7.71967C4.51256 7.42678 4.98744 7.42678 5.28033 7.71967L6.75 9.18934L10.7197 5.21967C11.0126 4.92678 11.4874 4.92678 11.7803 5.21967Z"
-          {{! approx green-400/70 }}
-          fill="#608D5F"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5Z"
-          {{! approx green-400/70 }}
-          fill="#608D5F"
-        />
-      {{else if this.isArchived}}
-        <path
-          d="M0 2.75C0 1.7835 0.783502 1 1.75 1H14.25C15.2165 1 16 1.7835 16 2.75V4.25C16 4.9481 15.5912 5.55073 15 5.83159V12.75C15 13.9926 13.9926 15 12.75 15H3.25C2.00736 15 1 13.9926 1 12.75V5.83159C0.408763 5.55073 0 4.9481 0 4.25V2.75Z"
-          fill="var(--token-color-palette-neutral-100)"
-        />
-        <path
-          d="M6.75 8C6.33579 8 6 8.33579 6 8.75C6 9.16421 6.33579 9.5 6.75 9.5H9.25C9.66421 9.5 10 9.16421 10 8.75C10 8.33579 9.66421 8 9.25 8H6.75Z"
-          {{! approx neutral-500/70 }}
-          fill="#8B8F97"
+          data-test-completed-affordance
+          data-test-color={{this.iconColor}}
+          stroke={{this.iconColor}}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+          d="m8.116 9.289 1.411 2.018 2.759-4.425"
         />
+      {{else}}
+        {{! Shadow lines }}
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M0 2.75C0 1.7835 0.783502 1 1.75 1H14.25C15.2165 1 16 1.7835 16 2.75V4.25C16 4.9481 15.5912 5.55073 15 5.83159V12.75C15 13.9926 13.9926 15 12.75 15H3.25C2.00736 15 1 13.9926 1 12.75V5.83159C0.408763 5.55073 0 4.9481 0 4.25V2.75ZM13.5 12.75V6H2.5V12.75C2.5 13.1642 2.83579 13.5 3.25 13.5H12.75C13.1642 13.5 13.5 13.1642 13.5 12.75ZM14.5 4.25C14.5 4.38807 14.3881 4.5 14.25 4.5H1.75C1.61193 4.5 1.5 4.38807 1.5 4.25V2.75C1.5 2.61193 1.61193 2.5 1.75 2.5H14.25C14.3881 2.5 14.5 2.61193 14.5 2.75V4.25Z"
-          {{! approx neutral-500/70 }}
-          fill="#8B8F97"
+          data-test-archived-affordance
+          data-test-color={{this.outlineColor}}
+          fill={{this.outlineColor}}
+          d="M12.44 9.66a.75.75 0 0 0 0-1.5v1.5Zm0-1.5H1.494v1.5H12.44v-1.5ZM12.519 12.283a.75.75 0 1 0 0-1.5v1.5Zm0-1.5H1.494v1.5H12.52v-1.5Z"
         />
       {{/if}}
     </svg>