fix(react): added storybook example and modified cypress test

added storybook example and modified cypress test for popover menu
mi6 · Feb 25, 2025 · 56c1e24 · 56c1e24
1 parent 89ab8ec
commit 56c1e24
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 3 deletions.
diff --git a/packages/react/src/component-tests/IcPopoverMenu/IcPopoverMenuData.tsx b/packages/react/src/component-tests/IcPopoverMenu/IcPopoverMenuData.tsx
@@ -39,9 +39,9 @@ export const PopoverDropdown = () => {
           />
         </IcPopoverMenu>
         <IcPopoverMenu submenuId="actions" aria-label="popover">
-          <IcMenuItem label="Edit" />
-          <IcMenuItem label="Find" />
-          <IcMenuItem label="Delete" variant="destructive" />
+          <IcMenuItem id="edit-id" label="Edit" />
+          <IcMenuItem id="find-id" label="Find" />
+          <IcMenuItem id="delete-id" label="Delete" variant="destructive" />
         </IcPopoverMenu>
       </>
     </div>

diff --git a/packages/react/src/stories/ic-popover-menu.stories.js b/packages/react/src/stories/ic-popover-menu.stories.js
@@ -198,6 +198,76 @@ export const TopPlacement = {
   name: "Top placement",
 };
 
+export const DynamicPopover = {
+  render:(args) => {
+    const furtherWorkCheckboxNames = [
+      { checkboxName: "beans", verb: "grind"},
+      {checkboxName: "coffee", verb: "drink"}
+    ];
+
+    const parentItems = furtherWorkCheckboxNames.map(({ checkboxName, verb }) => (
+              <IcMenuItem
+                id={`bulk-${checkboxName.toLowerCase()}-menu`}
+                key={`${checkboxName}Menu`}
+                label={`${checkboxName} ${verb}`}
+                submenuTriggerFor={checkboxName.toLowerCase()}
+              />
+            ));
+
+    const submenus = furtherWorkCheckboxNames.map((tagCheckboxName) => {
+          const { checkboxName, verb } = tagCheckboxName;
+          return (
+            <IcPopoverMenu
+              key={`${checkboxName}Menu`}
+              submenuId={checkboxName.toLowerCase()}
+            >
+              <IcMenuItem
+                id={`bulk-${checkboxName.toLocaleLowerCase()}-add`}
+                label={`${checkboxName} ${verb}`}
+              />
+              <IcMenuItem
+                id={`bulk-${checkboxName.toLocaleLowerCase()}-remove`}
+                label={`${checkboxName} not ${verb}`}
+              />
+            </IcPopoverMenu>
+          );
+        })
+
+    function buttonClick() {
+          document.querySelector("ic-popover-menu").open =
+            !document.querySelector("ic-popover-menu").open;
+        }
+        return (
+          <>
+            <IcButton id="button-dynamic" onClick={buttonClick}>
+              Show/Hide popover
+            </IcButton>
+            <IcPopoverMenu
+              id="dynamic-popover"
+              anchor="button-dynamic"
+              aria-label="popover"
+              open="false"
+            >
+              <IcMenuGroup id="bulk-management" label="Bulk Actions">
+                {parentItems}
+              </IcMenuGroup>
+
+              <IcMenuGroup>
+                <IcMenuItem
+                  id="bulk-remove"
+                  label="Remove Items"
+                  variant="destructive"
+                />
+              </IcMenuGroup>
+
+            </IcPopoverMenu>
+            {submenus}
+        </>
+        )
+  }, 
+  name: "Dynamic popover",
+}
+
 export const Playground = {
   render: (args) => (
     <div>