Skip to content

Commit

Permalink
fix: variablize project card menu items
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifrost1
ifrost1 committed Jun 13, 2022
1 parent 5e26bb9 commit c1016b9
Showing 1 changed file with 52 additions and 120 deletions.
172 changes: 52 additions & 120 deletions .storybook/pages/Cad/Cad.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,52 @@ const StandardsRows = [
];

export const Cad = () => {
const projectCardMenuItems = () => {
return (
<>
<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>
</>
);
};

const projectCardMenuItemsWithDelete = () => {
return (
<>
<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 status="error">
<Icon name="delete" purpose="decorative" size="1.25rem" />
Delete item
</DropdownMenuItem>
</>
);
};

const [indexState, setIndexState] = useState<number | undefined>(2);
const [containers, setContainers] = useState({
'container-1': {
Expand Down Expand Up @@ -330,26 +376,7 @@ export const Cad = () => {
children: (
<ProjectCard
behavior="draggable"
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 status="error">
<Icon name="delete" purpose="decorative" size="1.25rem" />
Delete item
</DropdownMenuItem>
</>
}
buttonDropdownItems={projectCardMenuItemsWithDelete()}
meta="12 days"
number={1}
numberAriaLabel="Project 1"
Expand All @@ -362,26 +389,7 @@ export const Cad = () => {
children: (
<ProjectCard
behavior="draggable"
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>
</>
}
buttonDropdownItems={projectCardMenuItems()}
meta="12 days"
number={indexState}
numberAriaLabel="Project 2"
Expand All @@ -394,26 +402,7 @@ export const Cad = () => {
children: (
<ProjectCard
behavior="draggable"
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>
</>
}
buttonDropdownItems={projectCardMenuItems()}
meta="12 days"
number={3}
numberAriaLabel="Project 3"
Expand All @@ -426,26 +415,7 @@ export const Cad = () => {
children: (
<ProjectCard
behavior="draggable"
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>
</>
}
buttonDropdownItems={projectCardMenuItems()}
meta="12 days"
number={4}
numberAriaLabel="Project 4"
Expand All @@ -458,26 +428,7 @@ export const Cad = () => {
children: (
<ProjectCard
behavior="draggable"
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>
</>
}
buttonDropdownItems={projectCardMenuItems()}
buttonDropdownPosition="top-left"
meta="12 days"
number={5}
Expand All @@ -491,26 +442,7 @@ export const Cad = () => {
children: (
<ProjectCard
behavior="draggable"
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>
</>
}
buttonDropdownItems={projectCardMenuItems()}
buttonDropdownPosition="top-left"
meta="12 days"
number={6}
Expand Down

0 comments on commit c1016b9

Please sign in to comment.