import React, { useState } from "react";
import { ActionMenu as Component } from ".";
import { Button } from "../button";
import { Box } from "../box";
import { Icon } from "../icon";
import {
Bookmark,
Diamond,
DotsVertical,
MixerVertical,
Print,
Copy,
} from "@washingtonpost/wpds-assets";
import { screen, userEvent } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
import type { StoryFn } from "@storybook/react";
export default {
title: "Action Menu",
component: Component.Root,
subcomponents: {
ActionMenuCheckboxItem: Component.CheckboxItem,
ActionMenuContent: Component.Content,
ActionMenuGroup: Component.Group,
ActionMenuItem: Component.Item,
ActionMenuItemIndicator: Component.ItemIndicator,
ActionMenuLabel: Component.Label,
ActionMenuPortal: Component.Portal,
ActionMenuRadioGroup: Component.RadioGroup,
ActionMenuRadioItem: Component.RadioItem,
ActionMenuRoot: Component.Root,
ActionMenuSeparator: Component.Separator,
ActionMenuSub: Component.Sub,
ActionMenuSubContent: Component.SubContent,
ActionMenuSubTrigger: Component.SubTrigger,
ActionMenuTrigger: Component.Trigger,
},
};
const SimpleContent = (
Action 1
Action 1.1
Action 1.1.1
Action 1.1.2
Action 1.1.3
Action 1.1.4
Action 1.2
Action 1.3
Action 1.4
Action 2
Action 3
Action 4
);
const TriggersTemplate = (parameters) => (
{SimpleContent}
{SimpleContent}
Action Link
{SimpleContent}
{SimpleContent}
);
export const Triggers = {
render: TriggersTemplate,
};
// Leading icon
// Leading icon with a check
// Trailing icons
// Trailing shortcuts
const Circle = (props) => (
);
const ItemVariationsTemplate = (parameters) => {
const [checkedA, setCheckedA] = useState(true);
const [checkedB, setCheckedB] = useState(true);
const [checkedC, setCheckedC] = useState(true);
const [checkedD, setCheckedD] = useState(true);
const [radioChecked, setRadioChecked] = useState("radio2");
return (
Label
Copy Items
Checkbox Item Examples
{/*
*/}
Left
Neither
Right
Both
Radio Group Example
Radio 1
Radio 2
Radio 3
More actions
Bookmarks
Bookmarks
Bookmarks
Even more actions
Action X
Action Z
More actions
Action 7
Action 8
Action 9
Even more actions
Action X
Action Z
Action 4
More actions
Action 7
Action 8
Action 9
Even more actions
Action X
Action Z
);
};
export const ItemVariations = {
render: ItemVariationsTemplate,
};
const InteractionsTemplate: StoryFn = (parameters) => (
Level 1 Action
Level 1 Action
Open Level 2
Level 2 Action
Level 2 Action
Level 2 Action
Open Level 3
Level 3 Action
Level 3 Action
);
export const Interactions = {
render: InteractionsTemplate,
play: async () => {
console.log("Start Interaction");
const trigger = screen.getAllByText("Trigger")[0];
await sleep(500);
await userEvent.click(trigger);
await sleep(500);
const content = screen.getAllByText("Level 1 Action");
const checkVisible = async function (item) {
await expect(item).toBeVisible();
};
await expect(content.length).toEqual(2);
content.forEach((item) => {
checkVisible(item);
});
const subTrigger1 = screen.getAllByText("Open Level 2")[0];
await userEvent.click(subTrigger1);
await sleep(500);
const subContent1 = screen.getAllByText("Level 2 Action");
await expect(subContent1.length).toEqual(3);
subContent1.forEach((item) => {
checkVisible(item);
});
const subTrigger2 = screen.getAllByText("Open Level 3")[0];
await userEvent.click(subTrigger2);
const subContent2 = screen.getAllByText("Level 3 Action");
await expect(subContent2.length).toEqual(2);
},
};
// Function to emulate pausing between interactions
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}