Merge pull request #1171 from chanzuckerberg/ifrost/204517-project-ca…

…rd-optional-dropdown 204517 project card optional dropdown
chanzuckerberg · Jul 8, 2022 · 6e2d5a7 · 6e2d5a7
2 parents 0aa1f6e + 53817b6
commit 6e2d5a7
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 28 deletions.
diff --git a/src/components/ProjectCard/ProjectCard.stories.tsx b/src/components/ProjectCard/ProjectCard.stories.tsx
@@ -8,7 +8,17 @@ import Icon from '../Icon';
 export default {
   title: 'Recipes/ProjectCard',
   component: ProjectCard,
+  args: {},
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof ProjectCard>;
+
+export const Default: StoryObj<Args> = {
   args: {
+    title: 'Project card title',
+    meta: '12 days',
+    number: 1,
+    numberAriaLabel: 'Project 1',
     buttonDropdownItems: (
       <>
         <DropdownMenuItem>
@@ -30,22 +40,40 @@ export default {
       </>
     ),
   },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof ProjectCard>;
+};
 
-export const Default: StoryObj<Args> = {
+export const Draggable: StoryObj<Args> = {
   args: {
-    title: 'Project card title',
+    behavior: 'draggable',
+    title: 'DragDropItem provides handle to the left',
     meta: '12 days',
-    number: 1,
     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 Draggable: StoryObj<Args> = {
+export const WithoutDropdown: StoryObj<Args> = {
   args: {
-    behavior: 'draggable',
+    number: 1,
     title: 'DragDropItem provides handle to the left',
     meta: '12 days',
     numberAriaLabel: 'Project 1',

diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
@@ -21,7 +21,11 @@ export interface Props {
    * - **draggable** renders a card that is used to drag with space for the handle on the left
    */
   behavior?: 'draggable';
-  buttonDropdownItems: ReactNode;
+  /**
+   * Button dropdown items
+   * 1) If not declared, the button dropdown does not render
+   */
+  buttonDropdownItems?: ReactNode;
   /**
    * Determines type of clickable
    * - default renders a dropdown menu to the bottom left of the button
@@ -119,25 +123,27 @@ export const ProjectCard = ({
           {meta}
         </div>
       </CardBody>
-      <CardFooter className={styles['project-card__footer']}>
-        <ButtonDropdown
-          className={styles['project-card__button-dropdown']}
-          dropdownMenuTrigger={
-            <Button
-              aria-label="Open project dropdown"
-              className={styles['project-card__menu-button']}
-              size="sm"
-              status="neutral"
-              variant="icon"
-            >
-              <Icon name="dots-vertical" purpose="decorative" />
-            </Button>
-          }
-          position={buttonDropdownPosition}
-        >
-          {buttonDropdownItems}
-        </ButtonDropdown>
-      </CardFooter>
+      {buttonDropdownItems && (
+        <CardFooter className={styles['project-card__footer']}>
+          <ButtonDropdown
+            className={styles['project-card__button-dropdown']}
+            dropdownMenuTrigger={
+              <Button
+                aria-label="Open project dropdown"
+                className={styles['project-card__menu-button']}
+                size="sm"
+                status="neutral"
+                variant="icon"
+              >
+                <Icon name="dots-vertical" purpose="decorative" />
+              </Button>
+            }
+            position={buttonDropdownPosition}
+          >
+            {buttonDropdownItems}
+          </ButtonDropdown>
+        </CardFooter>
+      )}
     </Card>
   );
 };
diff --git a/src/components/ProjectCard/__snapshots__/ProjectCard.test.tsx.snap b/src/components/ProjectCard/__snapshots__/ProjectCard.test.tsx.snap
@@ -335,3 +335,48 @@ exports[`<ProjectCard /> Draggable story renders snapshot 1`] = `
   </footer>
 </article>
 `;
+
+exports[`<ProjectCard /> WithoutDropdown 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"
+    >
+      DragDropItem provides handle to the left
+    </h3>
+    <div
+      class="project-card__meta"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon project-card__meta-icon"
+        fill="currentColor"
+        height="0.875rem"
+        style="--icon-size: 0.875rem;"
+        width="0.875rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <use
+          xlink:href="test-file-stub#event-note"
+        />
+      </svg>
+      12 days
+    </div>
+  </div>
+</article>
+`;