WIP: Product Area screen

web/app/components/dashboard/docs-awaiting-review.hbs

@@ -5,8 +5,7 @@
       <Hds::BadgeCount
         data-test-docs-awaiting-review-count
         @text="{{@docs.length}}"
-        @type="inverted"
-        class="mx-0.5 !bg-color-foreground-critical md:mx-1.5"
+        class="mx-0.5 md:mx-1.5"
       />
       document{{if (gt @docs.length 1) "s"}}
       awaiting your review:

web/app/components/dashboard/docs-awaiting-review/doc.hbs

@@ -7,17 +7,18 @@
   >
     <div class="w-full">
       <div
-        class="relative flex w-full flex-wrap items-center gap-2.5 md:flex-nowrap"
+        class="relative flex w-full flex-wrap items-center gap-3.5 md:flex-nowrap"
       >
-
-        {{! Avatar }}
-        <Person::Avatar
-          data-test-doc-awaiting-review-owner-avatar
-          @email={{or (get @doc.owners 0) "Unknown"}}
-          @imgURL={{get @doc.ownerPhotos 0}}
-          @size="medium"
-          class="shrink-0"
-        />
+        <div class="relative flex items-center gap-0.5">
+          {{! Avatars }}
+          <Product::Avatar @product={{@doc.product}} @size="medium" />
+          <Person::Avatar
+            data-test-doc-awaiting-review-owner-avatar
+            @email={{or (get @doc.owners 0) "Unknown"}}
+            @imgURL={{get @doc.ownerPhotos 0}}
+            @size="medium"
+          />
+        </div>
 
         <div class="block w-full overflow-hidden">
 
@@ -54,10 +55,10 @@
         <div
           class="absolute top-[3px] left-9 flex shrink-0 items-center space-x-1 md:relative md:top-0 md:left-0"
         >
-          <Hds::Badge
-            data-test-doc-awaiting-review-product-badge
-            @icon={{or (get-product-id @doc.product) "folder"}}
-            @text={{or @doc.product "Unknown"}}
+          <Doc::State
+            data-test-doc-awaiting-review-status
+            @state={{lowercase @doc.status}}
+            @hideProgress={{true}}
           />
           <Hds::Badge
             data-test-doc-awaiting-review-doctype-badge

web/app/components/doc/folder-affordance.hbs

@@ -2,27 +2,27 @@
   data-test-doc-thumbnail-folder-affordance
   xmlns="http://www.w3.org/2000/svg"
   fill="none"
-  viewBox={{if this.sizeIsLarge "0 0 97 145" "0 0 43 63"}}
+  viewBox={{if this.sizeIsSmall "0 0 43 63" "0 0 97 145"}}
   class="folder-affordance"
 >
   <path
     fill="url(#doc-thumbnail-folder-gradient)"
     stroke="currentColor"
     fill-rule="evenodd"
     d={{if
-      this.sizeIsLarge
-      "M6 0a6 6 0 0 0-6 6v41.04a6 6 0 0 0 2.659 4.983l8.29 5.558v80.729a6 6 0 0 0 6 6H97V0H6Z"
+      this.sizeIsSmall
       "M3 0a3 3 0 0 0-3 3v18.407a3 3 0 0 0 .91 2.152l2.18 2.117v33.746a3 3 0 0 0 3 3H43V0H3Z"
+      "M6 0a6 6 0 0 0-6 6v41.04a6 6 0 0 0 2.659 4.983l8.29 5.558v80.729a6 6 0 0 0 6 6H97V0H6Z"
     }}
     clip-rule="evenodd"
   ></path>
   <defs>
     <linearGradient
       id="doc-thumbnail-folder-gradient"
-      x1={{if this.sizeIsLarge "8.176" "4.746"}}
-      x2={{if this.sizeIsLarge "8.176" "4.746"}}
+      x1={{if this.sizeIsSmall "4.746" "8.176"}}
+      x2={{if this.sizeIsSmall "4.746" "8.176"}}
       y1="0"
-      y2={{if this.sizeIsLarge "43.965" "19.018"}}
+      y2={{if this.sizeIsSmall "19.018" "43.965"}}
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="var(--token-color-palette-neutral-50)"></stop>

web/app/components/doc/folder-affordance.ts

@@ -1,12 +1,21 @@
 import Component from "@glimmer/component";
+import { DocThumbnailSize } from "hermes/components/doc/thumbnail";
 
 interface DocFolderAffordanceSignature {
   Args: {
-    size?: "large";
+    size?: `${DocThumbnailSize}`;
   };
 }
 
 export default class DocFolderAffordance extends Component<DocFolderAffordanceSignature> {
+  protected get sizeIsSmall(): boolean {
+    return this.args.size === "small" || !this.args.size;
+  }
+
+  protected get sizeIsMedium(): boolean {
+    return this.args.size === "medium";
+  }
+
   protected get sizeIsLarge(): boolean {
     return this.args.size === "large";
   }

web/app/components/doc/row.hbs

@@ -1,13 +1,27 @@
-<Hds::Table::Tr class="row-results__table__row">
-  <Hds::Table::Td class="name">
+<tr class="group">
+  <td class="name">
     <LinkTo
       @route="authenticated.document"
       @model="{{@docID}}"
       @query={{hash draft=@isDraft}}
-      class="flex items-start space-x-4"
+      class="flex items-start gap-3.5"
     >
-      <Doc::Thumbnail @status={{@status}} @product={{@productArea}} />
-      <div>
+      {{!
+      We create a click area that extends beyond the edges of its container.
+      This makes the entire row clickable without having to wrap itself in a link,
+      and lets us nest interactive elements (e.g., ProductBadgeLink) in a way that improves the mouse experience without sacrificing accessibility.
+    }}
+      <div
+        aria-hidden="true"
+        class="absolute top-0 -left-4 -right-4 -bottom-px -z-10 rounded-md group-hover:bg-color-surface-faint"
+      ></div>
+
+      <Product::Avatar
+        @product={{@productArea}}
+        @fallbackIcon="file-text"
+        @size="small"
+      />
+      <div class="relative">
         <h4
           class="hds-typography-body-200 hds-font-weight-semibold hds-foreground-strong"
         >{{@title}}</h4>
@@ -18,17 +32,40 @@
         {{/if}}
       </div>
     </LinkTo>
-  </Hds::Table::Td>
-  <Hds::Table::Td class="type">
-    {{@docType}}
-  </Hds::Table::Td>
-  <Hds::Table::Td class="status">
-    <Doc::State @state={{@status}} @hideProgress={{true}} /></Hds::Table::Td>
-  <Hds::Table::Td class="product">
-    <ProductBadgeLink @productArea={{@productArea}} />
-  </Hds::Table::Td>
-  <Hds::Table::Td class="owner">
-    <Person @ignoreUnknown={{true}} @imgURL={{@avatar}} @email={{@owner}} />
-  </Hds::Table::Td>
-  <Hds::Table::Td class="created">{{@createdDate}}</Hds::Table::Td>
-</Hds::Table::Tr>
+  </td>
+  <td class="type">
+    <LinkTo
+      @route={{this.currentRoute}}
+      @query={{hash docType=(array @docType)}}
+      class="relative"
+    >
+      {{@docType}}
+    </LinkTo>
+  </td>
+  <td class="status">
+    <LinkTo
+      @route={{this.currentRoute}}
+      @query={{hash status=(array @status)}}
+      class="relative"
+    >
+      <Doc::State @state={{@status}} @hideProgress={{true}} />
+    </LinkTo>
+  </td>
+  <td class="product">
+    <Product::Link @avatarIsHidden={{true}} @product={{@productArea}} />
+  </td>
+  <td class="owner">
+    <LinkTo
+      @route={{this.currentRoute}}
+      @query={{hash owners=(array @owner)}}
+      class="relative"
+    >
+      <Person @ignoreUnknown={{true}} @imgURL={{@avatar}} @email={{@owner}} />
+    </LinkTo>
+  </td>
+  <td class="created">
+    <div class="relative">
+      {{@createdDate}}
+    </div>
+  </td>
+</tr>

web/app/components/doc/row.ts

@@ -1,3 +1,5 @@
+import RouterService from "@ember/routing/router-service";
+import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 
 interface DocRowComponentSignature {
@@ -17,7 +19,13 @@ interface DocRowComponentSignature {
   };
 }
 
-export default class DocRowComponent extends Component<DocRowComponentSignature> {}
+export default class DocRowComponent extends Component<DocRowComponentSignature> {
+  @service declare router: RouterService;
+
+  protected get currentRoute() {
+    return this.router.currentRouteName;
+  }
+}
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {

web/app/components/doc/state.hbs

@@ -1,7 +1,7 @@
 {{#unless @hideProgress}}
   <ol
     class="doc-state doc-state--{{this.dasherizedName}}
-      grid grid-cols-3 w-full items-center list-none gap-0.5"
+      grid w-full list-none grid-cols-3 items-center gap-0.5"
   >
     <li class="progress-bar"></li>
     <li class="progress-bar"></li>
@@ -13,4 +13,5 @@
   @text={{this.state.label}}
   @color={{this.state.color}}
   class="whitespace-nowrap"
+  ...attributes
 />

web/app/components/doc/state.ts

@@ -2,6 +2,7 @@ import { dasherize } from "@ember/string";
 import Component from "@glimmer/component";
 
 interface DocStateComponentSignature {
+  Element: HTMLDivElement;
   Args: {
     state?: string;
     hideProgress?: boolean;

web/app/components/row-results.hbs → web/app/components/doc/table.hbs

@@ -1,14 +1,14 @@
 <div class="row-results">
   {{#if @docs}}
-    <Hds::Table @isStriped={{false}} class="row-results__table">
-      <:head as |H|>
-        <H.Tr>
-          <H.Th class="name">Name</H.Th>
-          <H.Th class="type">Type</H.Th>
-          <H.Th class="status">Status</H.Th>
-          <H.Th class="product">Product/Area</H.Th>
-          <H.Th class="owner">Owner</H.Th>
-          <H.Th class="created">
+    <table class="hds-table">
+      <thead>
+        <tr>
+          <th class="name">Name</th>
+          <th class="type">Type</th>
+          <th class="status">Status</th>
+          <th class="product">Product/Area</th>
+          <th class="owner">Owner</th>
+          <th class="created">
             <Table::SortableHeader
               @changeSort={{@changeSort}}
               @currentSort={{@currentSort}}
@@ -22,10 +22,10 @@
             >
               Created
             </Table::SortableHeader>
-          </H.Th>
-        </H.Tr>
-      </:head>
-      <:body>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
         {{#each @docs as |doc|}}
           <Doc::Row
             @avatar="{{get doc.ownerPhotos 0}}"
@@ -40,8 +40,9 @@
             @isDraft={{@isDraft}}
           />
         {{/each}}
-      </:body>
-    </Hds::Table>
+      </tbody>
+    </table>
+
     {{#if this.paginationIsShown}}
       <Pagination @nbPages={{@nbPages}} @currentPage={{@currentPage}} />
     {{/if}}

web/app/components/row-results.ts → web/app/components/doc/table.ts

@@ -1,8 +1,8 @@
 import Component from "@glimmer/component";
 import { HermesDocument } from "hermes/types/document";
-import { SortAttribute, SortDirection } from "./table/sortable-header";
+import { SortAttribute, SortDirection } from "../table/sortable-header";
 
-interface RowResultsComponentSignature {
+interface DocTableComponentSignature {
   Args: {
     docs: HermesDocument[];
     isDraft?: boolean;
@@ -13,14 +13,14 @@ interface RowResultsComponentSignature {
     sortDirection: SortDirection;
   };
 }
-export default class RowResultsComponent extends Component<RowResultsComponentSignature> {
+export default class DocTableComponent extends Component<DocTableComponentSignature> {
   protected get paginationIsShown() {
     return this.args.nbPages && this.args.currentPage !== undefined;
   }
 }
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {
-    RowResults: typeof RowResultsComponent;
+    "Doc::Table": typeof DocTableComponent;
   }
 }

web/app/components/doc/thumbnail.hbs

@@ -2,6 +2,7 @@
   data-test-doc-thumbnail
   class="doc-thumbnail
     {{if this.sizeIsLarge 'large'}}
+    {{if this.sizeIsMedium 'medium'}}
     {{if this.isObsolete 'obsolete'}}
     rounded bg-color-palette-neutral-100"
   ...attributes
@@ -24,12 +25,14 @@
       </div>
     {{/if}}
 
-    {{#if this.productShortName}}
-      <div
-        data-test-doc-thumbnail-product-badge
-        class="product-badge {{this.productShortName}}"
-      >
-        <FlightIcon @size="16" @name={{this.productShortName}} />
+    {{#if this.badgeIsShown}}
+      <div class="absolute left-0 bottom-0">
+        <Product::Avatar
+          data-test-doc-thumbnail-product-badge
+          @product={{@product}}
+          @size={{this.productAvatarSize}}
+          @isGrayedOut={{this.isObsolete}}
+        />
       </div>
     {{/if}}
   </div>