Add medium size to DocThumbnail; tweak shared types (#388)

* Tweak HDS types

* Updates `get-product-id` files

* Add `medium` size to DocThumbnail

* Remove number type

* Update `productShortName` getter

* Avatar.gts

* Basic ProductAvatar implementation

* Add `large` size to PersonAvatar

* Refactor to class-based sizing

* Fix visual bugs, rename SCSS file

* Refactor Thumbnail interface

* Switch `size` to getters

* Remove unused getters

* Fix merge conflict

* Update thumbnail.ts

* Remove unnecessary property

* Refactor sizes

* Use enum in folder-affordance

* Revert css changes

* Additional cleanup

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,14 +1,16 @@
 import Component from "@glimmer/component";
+import { DocThumbnailSize } from "hermes/components/doc/thumbnail";
+import { HermesSize } from "hermes/types/sizes";
 
 interface DocFolderAffordanceSignature {
   Args: {
-    size?: "large";
+    size?: `${DocThumbnailSize}`;
   };
 }
 
 export default class DocFolderAffordance extends Component<DocFolderAffordanceSignature> {
-  protected get sizeIsLarge(): boolean {
-    return this.args.size === "large";
+  protected get sizeIsSmall(): boolean {
+    return this.args.size === HermesSize.Small || !this.args.size;
   }
 }
 

web/app/components/doc/thumbnail.ts

@@ -1,18 +1,16 @@
 import Component from "@glimmer/component";
 import { dasherize } from "@ember/string";
 import getProductId from "hermes/utils/get-product-id";
+import { HermesSize } from "hermes/types/sizes";
 
-export enum DocThumbnailSize {
-  Small = "small",
-  Large = "large",
-}
+export type DocThumbnailSize = Exclude<HermesSize, HermesSize.XL>;
 
 interface DocThumbnailComponentSignature {
   Element: HTMLDivElement;
   Args: {
     status?: string;
     product?: string;
-    size?: "large";
+    size?: `${DocThumbnailSize}`;
   };
 }
 
@@ -26,7 +24,7 @@ export default class DocThumbnailComponent extends Component<DocThumbnailCompone
   }
 
   protected get size() {
-    return this.args.size ?? DocThumbnailSize.Small;
+    return this.args.size ?? HermesSize.Small;
   }
 
   protected get productShortName(): string | undefined {

web/app/components/person/avatar.ts

@@ -1,24 +1,21 @@
 import Component from "@glimmer/component";
-import {
-  HermesBasicAvatarSize,
-  HermesPersonAvatarSize,
-} from "hermes/types/avatar-size";
+import { HermesSize } from "hermes/types/sizes";
 
 interface PersonAvatarComponentSignature {
   Element: HTMLDivElement;
   Args: {
     imgURL?: string | null;
     isLoading?: boolean;
     email: string;
-    size?: `${HermesPersonAvatarSize}`;
+    size?: `${HermesSize}`;
   };
   Blocks: {
     default: [];
   };
 }
 
 export default class PersonAvatarComponent extends Component<PersonAvatarComponentSignature> {
-  protected size = this.args.size ?? HermesBasicAvatarSize.Small;
+  protected size = this.args.size ?? HermesSize.Small;
 }
 
 declare module "@glint/environment-ember-loose/registry" {

web/app/components/product/avatar.gts

@@ -4,13 +4,13 @@ import { inject as service } from "@ember/service";
 import FlightIcon from "@hashicorp/ember-flight-icons/components/flight-icon";
 import ProductAreasService from "hermes/services/product-areas";
 import { assert } from "@ember/debug";
-import { HermesBasicAvatarSize } from "hermes/types/avatar-size";
+import { HermesSize } from "hermes/types/sizes";
 
 interface ProductAvatarComponentSignature {
   Element: HTMLDivElement;
   Args: {
     product?: string;
-    size?: `${HermesBasicAvatarSize}`;
+    size?: `${Exclude<HermesSize, HermesSize.XL>}`;
   };
   Blocks: {
     default: [];
@@ -27,7 +27,7 @@ export default class ProductAvatarComponent extends Component<ProductAvatarCompo
   }
 
   private get size() {
-    return this.args.size ?? HermesBasicAvatarSize.Small;
+    return this.args.size ?? HermesSize.Small;
   }
 
   <template>

web/app/styles/components/doc/thumbnail.scss

@@ -40,6 +40,22 @@
     }
   }
 
+  &.medium {
+    @apply w-16;
+
+    .status-icon {
+      @apply top-[6px] h-[60px] w-[60px];
+
+      &.approved {
+        @apply -right-2.5;
+      }
+
+      &.obsolete {
+        @apply -left-3.5;
+      }
+    }
+  }
+
   &.large {
     @apply w-28;
 

web/app/types/sizes.ts

@@ -0,0 +1,6 @@
+export enum HermesSize {
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+  XL = "xl",
+}