fix: add a story for a short list

cultureamp · Sep 28, 2023 · b85675e · b85675e
1 parent f265ee1
commit b85675e
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 58 deletions.
diff --git a/draft-packages/menu/docs/Menu.stories.tsx b/draft-packages/menu/docs/Menu.stories.tsx
@@ -79,6 +79,29 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({
 }) => (
   <StoryWrapper isReversed={isReversed}>
     <StoryWrapper.RowHeader headings={["Default", "Icon Button"]} />
+
+    <StoryWrapper.Row rowTitle="Short list">
+      <Menu
+        button={
+          <Button
+            label="Select a value"
+            icon={chevronDown}
+            iconPosition="end"
+            reversed={isReversed}
+          />
+        }
+      >
+        <MenuContentExample isShortList={true} />
+      </Menu>
+      <Menu
+        button={
+          <IconButton label="" icon={meatballsIcon} reversed={isReversed} />
+        }
+      >
+        <MenuContentExample />
+      </Menu>
+    </StoryWrapper.Row>
+
     <StoryWrapper.Row rowTitle="Closed">
       <Menu
         button={
@@ -100,6 +123,7 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({
         <MenuContentExample />
       </Menu>
     </StoryWrapper.Row>
+
     <StoryWrapper.Row rowTitle="Open">
       <Menu
         menuVisible

diff --git a/draft-packages/menu/docs/components/MenuContentExample.tsx b/draft-packages/menu/docs/components/MenuContentExample.tsx
@@ -6,72 +6,97 @@ import trashIcon from "@kaizen/component-library/icons/trash.icon.svg"
 
 import { MenuList, MenuItem, MenuHeading } from "../.."
 
+interface MenuContentExampleProps {
+  isShortList?: boolean
+}
+
 /**
  * This is an mocked example of a Menu's children using all of the subcomponents.
  */
-export const MenuContentExample = (): JSX.Element => (
+export const MenuContentExample = ({
+  isShortList,
+}: MenuContentExampleProps): JSX.Element => (
   <>
     <MenuList heading={<MenuHeading>Links</MenuHeading>}>
       <MenuItem href="https://www.cultureamp.com/" label="Menu link" />
       <MenuItem href="https://www.cultureamp.com/" label="Menu link" />
       <MenuItem href="https://www.cultureamp.com/" label="Menu link" />
     </MenuList>
-    <MenuList heading={<MenuHeading>Buttons</MenuHeading>}>
-      <MenuItem
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-          alert("Hello")
-          e.preventDefault()
-        }}
-        icon={editIcon}
-        label="Menu button"
-      />
-      <MenuItem
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-          e.preventDefault()
-        }}
-        icon={duplicateIcon}
-        label="Menu button but the label is too long"
-      />
-      <MenuItem
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-          e.preventDefault()
-        }}
-        icon={trashIcon}
-        destructive
-        label="Destructive Menu button"
-      />
-      <MenuItem
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-          e.preventDefault()
-        }}
-        icon={trashIcon}
-        disabled
-        label="Disabled Menu button"
-      />
-      <MenuItem
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-          e.preventDefault()
-        }}
-        icon={trashIcon}
-        disabled
-        destructive
-        label="Disabled Destructive Menu button"
-      />
-    </MenuList>
-    <MenuList heading={<MenuHeading>Buttons (no icons)</MenuHeading>}>
-      <MenuItem
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-          e.preventDefault()
-        }}
-        label="Menu button no icons"
-      />
-      <MenuItem
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-          e.preventDefault()
-        }}
-        disabled
-        label="Disabled button no icon"
-      />
-    </MenuList>
+
+    {!isShortList && (
+      <>
+        <MenuList heading={<MenuHeading>Buttons</MenuHeading>}>
+          <MenuItem
+            onClick={(
+              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+            ): void => {
+              alert("Hello")
+              e.preventDefault()
+            }}
+            icon={editIcon}
+            label="Menu button"
+          />
+          <MenuItem
+            onClick={(
+              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+            ): void => {
+              e.preventDefault()
+            }}
+            icon={duplicateIcon}
+            label="Menu button but the label is too long"
+          />
+          <MenuItem
+            onClick={(
+              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+            ): void => {
+              e.preventDefault()
+            }}
+            icon={trashIcon}
+            destructive
+            label="Destructive Menu button"
+          />
+          <MenuItem
+            onClick={(
+              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+            ): void => {
+              e.preventDefault()
+            }}
+            icon={trashIcon}
+            disabled
+            label="Disabled Menu button"
+          />
+          <MenuItem
+            onClick={(
+              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+            ): void => {
+              e.preventDefault()
+            }}
+            icon={trashIcon}
+            disabled
+            destructive
+            label="Disabled Destructive Menu button"
+          />
+        </MenuList>
+        <MenuList heading={<MenuHeading>Buttons (no icons)</MenuHeading>}>
+          <MenuItem
+            onClick={(
+              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+            ): void => {
+              e.preventDefault()
+            }}
+            label="Menu button no icons"
+          />
+          <MenuItem
+            onClick={(
+              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+            ): void => {
+              e.preventDefault()
+            }}
+            disabled
+            label="Disabled button no icon"
+          />
+        </MenuList>
+      </>
+    )}
   </>
 )