Switch from isLarge to size

hashicorp-forge · Oct 20, 2023 · 442c416 · 442c416
1 parent 391476d
commit 442c416
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 30 deletions.
diff --git a/web/app/components/doc/folder-affordance.hbs b/web/app/components/doc/folder-affordance.hbs
@@ -2,15 +2,15 @@
   data-test-doc-thumbnail-folder-affordance
   xmlns="http://www.w3.org/2000/svg"
   fill="none"
-  viewBox={{if @isLarge "0 0 97 145" "0 0 43 63"}}
+  viewBox={{if this.sizeIsLarge "0 0 97 145" "0 0 43 63"}}
   class="folder-affordance"
 >
   <path
     fill="url(#doc-thumbnail-folder-gradient)"
     stroke="currentColor"
     fill-rule="evenodd"
     d={{if
-      @isLarge
+      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"
       "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"
     }}
@@ -19,10 +19,10 @@
   <defs>
     <linearGradient
       id="doc-thumbnail-folder-gradient"
-      x1={{if @isLarge "8.176" "4.746"}}
-      x2={{if @isLarge "8.176" "4.746"}}
+      x1={{if this.sizeIsLarge "8.176" "4.746"}}
+      x2={{if this.sizeIsLarge "8.176" "4.746"}}
       y1="0"
-      y2={{if @isLarge "43.965" "19.018"}}
+      y2={{if this.sizeIsLarge "43.965" "19.018"}}
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="var(--token-color-palette-neutral-50)"></stop>

diff --git a/web/app/components/doc/folder-affordance.ts b/web/app/components/doc/folder-affordance.ts
@@ -2,11 +2,15 @@ import Component from "@glimmer/component";
 
 interface DocFolderAffordanceSignature {
   Args: {
-    isLarge?: boolean;
+    size?: "large";
   };
 }
 
-export default class DocFolderAffordance extends Component<DocFolderAffordanceSignature> {}
+export default class DocFolderAffordance extends Component<DocFolderAffordanceSignature> {
+  protected get sizeIsLarge(): boolean {
+    return this.args.size === "large";
+  }
+}
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {

diff --git a/web/app/components/doc/thumbnail.hbs b/web/app/components/doc/thumbnail.hbs
@@ -1,16 +1,16 @@
 <div
   data-test-doc-thumbnail
   class="doc-thumbnail
-    {{if @isLarge 'large'}}
+    {{if this.sizeIsLarge 'large'}}
     {{if this.isObsolete 'obsolete'}}
-    bg-color-palette-neutral-100 rounded"
+    rounded bg-color-palette-neutral-100"
   ...attributes
 >
-  <img src="/images/document.png" class="w-full h-auto" />
+  <img src="/images/document.png" class="h-auto w-full" />
 
-  <div class="w-full h-full absolute">
+  <div class="absolute h-full w-full">
     {{#if this.isObsolete}}
-      <Doc::FolderAffordance @isLarge={{@isLarge}} />
+      <Doc::FolderAffordance @size={{@size}} />
     {{/if}}
 
     {{#if (or this.isApproved this.isObsolete)}}

diff --git a/web/app/components/doc/thumbnail.ts b/web/app/components/doc/thumbnail.ts
@@ -5,9 +5,9 @@ import getProductId from "hermes/utils/get-product-id";
 interface DocThumbnailComponentSignature {
   Element: HTMLDivElement;
   Args: {
-    isLarge?: boolean;
     status?: string;
     product?: string;
+    size?: "large";
   };
 }
 
@@ -20,6 +20,10 @@ export default class DocThumbnailComponent extends Component<DocThumbnailCompone
     }
   }
 
+  protected get sizeIsLarge(): boolean {
+    return this.args.size === "large";
+  }
+
   protected get productShortName(): string | null {
     if (this.args.product) {
       return getProductId(this.args.product);

diff --git a/web/app/components/doc/tile.hbs b/web/app/components/doc/tile.hbs
@@ -20,7 +20,7 @@
         <Doc::Thumbnail
           @status={{@status}}
           @product={{@productArea}}
-          @isLarge={{true}}
+          @size="large"
         />
         <Doc::State @state={{@status}} />
       </div>

diff --git a/web/tests/integration/components/doc/folder-affordance-test.ts b/web/tests/integration/components/doc/folder-affordance-test.ts
@@ -1,32 +1,38 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
 import { hbs } from "ember-cli-htmlbars";
-import { render } from "@ember/test-helpers";
+import { TestContext, render } from "@ember/test-helpers";
+
+interface DocFolderAffordanceTestContext extends TestContext {
+  size?: "large";
+}
 
 module("Integration | Component | doc/folder-affordance", function (hooks) {
   setupRenderingTest(hooks);
 
   test("it renders as expected", async function (assert) {
-    this.set("isLarge", false);
-    await render(hbs`
-      {{! @glint-nocheck: not typesafe yet }}
-      <Doc::FolderAffordance
-        @isLarge={{this.isLarge}}
-      />
+    this.set("size", undefined);
+
+    await render<DocFolderAffordanceTestContext>(hbs`
+      <Doc::FolderAffordance @size={{this.size}} />
     `);
 
     assert
       .dom("[data-test-doc-thumbnail-folder-affordance]")
-      .hasAttribute("viewBox", "0 0 43 63");
+      .hasAttribute(
+        "viewBox",
+        "0 0 43 63",
+        "the default size renders as expected",
+      );
 
-    this.set("isLarge", true);
+    this.set("size", "large");
 
     assert
       .dom("[data-test-doc-thumbnail-folder-affordance]")
       .hasAttribute(
         "viewBox",
         "0 0 97 145",
-        "the `isLarge` attribute is passed to the component"
+        "the large size renders as expected",
       );
   });
 });
diff --git a/web/tests/integration/components/doc/thumbnail-test.ts b/web/tests/integration/components/doc/thumbnail-test.ts
@@ -1,20 +1,25 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
 import { hbs } from "ember-cli-htmlbars";
-import { render } from "@ember/test-helpers";
+import { TestContext, render } from "@ember/test-helpers";
+
+interface DocThumbnailTestContext extends TestContext {
+  size?: "large";
+  status?: string;
+  product?: string;
+}
 
 module("Integration | Component | doc/thumbnail", function (hooks) {
   setupRenderingTest(hooks);
 
   test("it renders as expected", async function (assert) {
-    this.set("isLarge", false);
+    this.set("size", undefined);
     this.set("status", "In Review");
     this.set("product", "Labs");
 
-    await render(hbs`
-      {{! @glint-nocheck: not typesafe yet }}
+    await render<DocThumbnailTestContext>(hbs`
       <Doc::Thumbnail
-        @isLarge={{this.isLarge}}
+        @size={{this.size}}
         @status={{this.status}}
         @product={{this.product}}
       />
@@ -30,7 +35,7 @@ module("Integration | Component | doc/thumbnail", function (hooks) {
     assert.dom("[data-test-doc-status-icon]").doesNotExist();
     assert.dom("[data-test-doc-thumbnail-product-badge]").doesNotExist();
 
-    this.set("isLarge", true);
+    this.set("size", "large");
 
     assert
       .dom("[data-test-doc-thumbnail]")