fix: optional meta in project card

chanzuckerberg · Jul 18, 2022 · c004c49 · c004c49
1 parent 5e6d0a6
commit c004c49
Show file tree

Hide file tree

Showing 3 changed files with 193 additions and 9 deletions.
diff --git a/src/components/ProjectCard/ProjectCard.stories.tsx b/src/components/ProjectCard/ProjectCard.stories.tsx
@@ -71,6 +71,34 @@ export const Draggable: StoryObj<Args> = {
   },
 };
 
+export const WithoutMeta: StoryObj<Args> = {
+  args: {
+    number: 1,
+    title: 'Project card title',
+    numberAriaLabel: 'Project 1',
+    buttonDropdownItems: (
+      <>
+        <DropdownMenuItem>
+          <Icon name="schedule" purpose="decorative" size="1.25rem" />
+          Move to other section
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Icon name="schedule" purpose="decorative" size="1.25rem" />
+          Move up
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Icon name="schedule" purpose="decorative" size="1.25rem" />
+          Move down
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Icon name="schedule" purpose="decorative" size="1.25rem" />
+          Move view details
+        </DropdownMenuItem>
+      </>
+    ),
+  },
+};
+
 export const WithoutDropdown: StoryObj<Args> = {
   args: {
     number: 1,

diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
@@ -113,15 +113,17 @@ export const ProjectCard = ({
         >
           {title}
         </Heading>
-        <div className={styles['project-card__meta']}>
-          <Icon
-            className={styles['project-card__meta-icon']}
-            name="event-note"
-            purpose="decorative"
-            size="0.875rem"
-          />
-          {meta}
-        </div>
+        {meta && (
+          <div className={styles['project-card__meta']}>
+            <Icon
+              className={styles['project-card__meta-icon']}
+              name="event-note"
+              purpose="decorative"
+              size="0.875rem"
+            />
+            {meta}
+          </div>
+        )}
       </CardBody>
       {buttonDropdownItems && (
         <CardFooter className={styles['project-card__footer']}>

diff --git a/src/components/ProjectCard/__snapshots__/ProjectCard.test.tsx.snap b/src/components/ProjectCard/__snapshots__/ProjectCard.test.tsx.snap
@@ -380,3 +380,157 @@ exports[`<ProjectCard /> WithoutDropdown story renders snapshot 1`] = `
   </div>
 </article>
 `;
+
+exports[`<ProjectCard /> WithoutMeta story renders snapshot 1`] = `
+<article
+  class="card project-card card--horizontal card--raised"
+>
+  <header
+    class="card__header project-card__header"
+  >
+    <span
+      aria-label="Project 1"
+      class="text text--sm text--base number-icon number-icon--base number-icon--sm project-card__number"
+      role="img"
+    >
+      1
+    </span>
+  </header>
+  <div
+    class="card__body project-card__body"
+  >
+    <h3
+      class="project-card__title heading heading--size-body-sm heading--base"
+    >
+      Project card title
+    </h3>
+  </div>
+  <footer
+    class="card__footer project-card__footer"
+  >
+    <div
+      class="button-dropdown project-card__button-dropdown"
+    >
+      <button
+        aria-expanded="false"
+        aria-label="Open project dropdown"
+        class="clickable-style clickable-style--sm clickable-style--icon clickable-style--neutral button project-card__menu-button button--icon"
+        data-bootstrap-override="clickable-style-icon"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="icon"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <use
+            xlink:href="test-file-stub#dots-vertical"
+          />
+        </svg>
+      </button>
+      <div
+        class="dropdown-menu button-dropdown__dropdown-menu"
+      >
+        <ul
+          class="dropdown-menu__list"
+          role="presentation"
+        >
+          <li
+            class="dropdown-menu__item"
+            role="presentation"
+          >
+            <button
+              class="dropdown-menu__link"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                fill="currentColor"
+                height="1.25rem"
+                style="--icon-size: 1.25rem;"
+                width="1.25rem"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <use
+                  xlink:href="test-file-stub#schedule"
+                />
+              </svg>
+              Move to other section
+            </button>
+          </li>
+          <li
+            class="dropdown-menu__item"
+            role="presentation"
+          >
+            <button
+              class="dropdown-menu__link"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                fill="currentColor"
+                height="1.25rem"
+                style="--icon-size: 1.25rem;"
+                width="1.25rem"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <use
+                  xlink:href="test-file-stub#schedule"
+                />
+              </svg>
+              Move up
+            </button>
+          </li>
+          <li
+            class="dropdown-menu__item"
+            role="presentation"
+          >
+            <button
+              class="dropdown-menu__link"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                fill="currentColor"
+                height="1.25rem"
+                style="--icon-size: 1.25rem;"
+                width="1.25rem"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <use
+                  xlink:href="test-file-stub#schedule"
+                />
+              </svg>
+              Move down
+            </button>
+          </li>
+          <li
+            class="dropdown-menu__item"
+            role="presentation"
+          >
+            <button
+              class="dropdown-menu__link"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                fill="currentColor"
+                height="1.25rem"
+                style="--icon-size: 1.25rem;"
+                width="1.25rem"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <use
+                  xlink:href="test-file-stub#schedule"
+                />
+              </svg>
+              Move view details
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+</article>
+`;