chore(projectcard)!: add metaIconName to allow custom meta icons and …

…remove if not present
chanzuckerberg · Oct 28, 2022 · fa6787d · fa6787d
1 parent fdea693
commit fa6787d
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 77 deletions.
diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
@@ -384,6 +384,7 @@ export const CoursePlannerEdit = () => {
           behavior="draggable"
           buttonDropdownItems={projectCardMenuItemsWithDelete()}
           meta="12 days"
+          metaIconName="event-note"
           number={1}
           numberAriaLabel="Project 1"
           title="Longer project card title that wraps"
@@ -397,6 +398,7 @@ export const CoursePlannerEdit = () => {
           behavior="draggable"
           buttonDropdownItems={projectCardMenuItems()}
           meta="12 days"
+          metaIconName="event-note"
           number={indexState}
           numberAriaLabel="Project 2"
           title="Project card title"
@@ -410,6 +412,7 @@ export const CoursePlannerEdit = () => {
           behavior="draggable"
           buttonDropdownItems={projectCardMenuItems()}
           meta="12 days"
+          metaIconName="event-note"
           number={3}
           numberAriaLabel="Project 3"
           title="Project card title"
@@ -423,6 +426,7 @@ export const CoursePlannerEdit = () => {
           behavior="draggable"
           buttonDropdownItems={projectCardMenuItems()}
           meta="12 days"
+          metaIconName="event-note"
           number={4}
           numberAriaLabel="Project 4"
           title="Project card title"
@@ -437,6 +441,7 @@ export const CoursePlannerEdit = () => {
           buttonDropdownItems={projectCardMenuItems()}
           buttonDropdownPosition="top-left"
           meta="12 days"
+          metaIconName="event-note"
           number={5}
           numberAriaLabel="Project 5"
           title="Project card title"
@@ -451,6 +456,7 @@ export const CoursePlannerEdit = () => {
           buttonDropdownItems={projectCardMenuItems()}
           buttonDropdownPosition="top-left"
           meta="12 days"
+          metaIconName="event-note"
           number={6}
           numberAriaLabel="Project 6"
           title="Project card title"

diff --git a/src/components/DragDrop/DragDrop.stories.tsx b/src/components/DragDrop/DragDrop.stories.tsx
@@ -604,6 +604,7 @@ const InteractiveDragDrop = () => {
         <ProjectCard
           behavior="draggable"
           meta="12 days"
+          metaIconName="event-note"
           number={1}
           numberAriaLabel="Project 1"
           title="Longer project card title that wraps lorem ipsum dolor"
@@ -616,6 +617,7 @@ const InteractiveDragDrop = () => {
         <ProjectCard
           behavior="draggable"
           meta="12 days"
+          metaIconName="event-note"
           number={indexState}
           numberAriaLabel="Project 2"
           title="Project card title"
@@ -628,6 +630,7 @@ const InteractiveDragDrop = () => {
         <ProjectCard
           behavior="draggable"
           meta="12 days"
+          metaIconName="event-note"
           number={3}
           numberAriaLabel="Project 3"
           title="Project card title"
@@ -639,7 +642,8 @@ const InteractiveDragDrop = () => {
       children: (
         <ProjectCard
           behavior="draggable"
-          meta="12 days"
+          meta="face icon"
+          metaIconName="face"
           number={4}
           numberAriaLabel="Project 4"
           title="Project card title"
@@ -651,22 +655,10 @@ const InteractiveDragDrop = () => {
       children: (
         <ProjectCard
           behavior="draggable"
-          meta="12 days"
+          meta="no icon"
           number={5}
           numberAriaLabel="Project 5"
-          title="Project card title"
-        />
-      ),
-    },
-    'item-6': {
-      title: 'Project #6',
-      children: (
-        <ProjectCard
-          behavior="draggable"
-          meta="12 days"
-          number={6}
-          numberAriaLabel="Project 6"
-          title="Project card title"
+          title="Hi"
         />
       ),
     },

diff --git a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
@@ -1184,10 +1184,10 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <use
-                      xlink:href="test-file-stub#event-note"
+                      xlink:href="test-file-stub#face"
                     />
                   </svg>
-                  12 days
+                  face icon
                 </div>
               </div>
             </article>
@@ -1241,25 +1241,12 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
                 <h3
                   class="heading heading--size-body-sm heading--neutral-strong project-card__title"
                 >
-                  Project card title
+                  Hi
                 </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
+                  no icon
                 </div>
               </div>
             </article>

diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
@@ -16,6 +16,8 @@ import {
 } from '../..';
 import type { HeadingElement } from '../Heading';
 
+import type { IconName } from '../Icon';
+
 export interface Props {
   /**
    * Determines type of clickable
@@ -53,6 +55,10 @@ export interface Props {
    * Project card meta data (e.g. calendar)
    */
   meta?: string;
+  /**
+   * Project card meta icon name. Should be appropriate EDS icon name.
+   */
+  metaIconName?: IconName;
   /**
    * Project card number
    */
@@ -76,6 +82,7 @@ export const ProjectCard = ({
   className,
   title,
   meta,
+  metaIconName,
   number,
   headingAs = 'h3',
   buttonDropdownItems,
@@ -123,12 +130,14 @@ export const ProjectCard = ({
         </Heading>
         {meta && (
           <div className={styles['project-card__meta']}>
-            <Icon
-              className={styles['project-card__meta-icon']}
-              name="event-note"
-              purpose="decorative"
-              size="0.875rem"
-            />
+            {metaIconName && (
+              <Icon
+                className={styles['project-card__meta-icon']}
+                name={metaIconName}
+                purpose="decorative"
+                size="0.875rem"
+              />
+            )}
             {meta}
           </div>
         )}

diff --git a/src/components/ProjectCard/__snapshots__/ProjectCard.test.tsx.snap b/src/components/ProjectCard/__snapshots__/ProjectCard.test.tsx.snap
@@ -26,19 +26,6 @@ exports[`<ProjectCard /> Default story renders snapshot 1`] = `
     <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>
@@ -195,19 +182,6 @@ exports[`<ProjectCard /> Draggable story renders snapshot 1`] = `
     <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>
@@ -372,19 +346,6 @@ exports[`<ProjectCard /> WithoutDropdown story renders snapshot 1`] = `
     <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>