Skip to content

Commit

Permalink
Feat/dropdown expandable menu (#1129)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chris-cedrone-cengage
chris-cedrone-cengage authored Oct 11, 2023
1 parent e524e5b commit 77823fb
Show file tree
Hide file tree
Showing 14 changed files with 1,135 additions and 17 deletions.
5 changes: 5 additions & 0 deletions .changeset/feat-dropdownExpandableMenu.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'react-magma-dom': minor
---

feat(DropdownExpandableMenu): A new menu item display for the Dropdown component which enables expandable lists by one level.
15 changes: 13 additions & 2 deletions packages/react-magma-dom/src/components/Accordion/AccordionButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ import { transparentize } from 'polished';
export interface AccordionButtonProps
extends UseAccordionButtonProps,
React.HTMLAttributes<HTMLButtonElement> {
/**
* For use in components repurposing Accordion with custom keyboard navigation with it's elements.
* @internal
*/
customOnKeyDown?: () => void;
/**
* @internal
*/
Expand Down Expand Up @@ -90,7 +95,13 @@ export const AccordionButton = React.forwardRef<
HTMLButtonElement,
AccordionButtonProps
>((props, forwardedRef) => {
const { children, testId, isInverse: isInverseProp, ...rest } = props;
const {
children,
testId,
customOnKeyDown,
isInverse: isInverseProp,
...rest
} = props;
const theme = React.useContext(ThemeContext);
const isInverse = useIsInverse(isInverseProp);

Expand Down Expand Up @@ -126,7 +137,7 @@ export const AccordionButton = React.forwardRef<
isExpanded={isExpanded}
isInverse={isInverse}
onClick={handleClick}
onKeyDown={handleKeyDown}
onKeyDown={customOnKeyDown ? customOnKeyDown : handleKeyDown}
ref={ref}
theme={theme}
>
Expand Down
156 changes: 155 additions & 1 deletion packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,21 @@ import { Card, CardBody } from '../Card';
import { Input } from '../Input';
import { Checkbox } from '../Checkbox';
import { PasswordInput } from '../PasswordInput';
import { SettingsIcon, MenuIcon } from 'react-magma-icons';
import {
LocalPizzaIcon,
LunchDiningIcon,
MenuIcon,
RestaurantMenuIcon,
SettingsIcon,
} from 'react-magma-icons';
import { Story, Meta } from '@storybook/react/types-6-0';
import { Paragraph, Spacer } from '../..';
import { ButtonGroup } from '../ButtonGroup';
import { DropdownExpandableMenuButton } from './DropdownExpandableMenuButton';
import { DropdownExpandableMenuItem } from './DropdownExpandableMenuItem';
import { DropdownExpandableMenuListItem } from './DropdownExpandableMenuListItem';
import { DropdownExpandableMenuGroup } from './DropdownExpandableMenuGroup';
import { DropdownExpandableMenuPanel } from './DropdownExpandableMenuPanel';

const Template: Story<DropdownProps> = args => (
<div style={{ margin: '150px auto', textAlign: 'center' }}>
Expand Down Expand Up @@ -407,3 +418,146 @@ export const NoItems = args => {
</ButtonGroup>
);
};

export const ExpandableItems = args => {
return (
<Dropdown {...args}>
<DropdownButton>Expandable Items Dropdown</DropdownButton>
<DropdownContent>
<DropdownExpandableMenuGroup>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton>Pasta</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
</DropdownContent>
</Dropdown>
);
};

export const ExpandableItemsWithIcons = args => {
return (
<Dropdown {...args} width={220}>
<DropdownButton>Expandable Items Dropdown</DropdownButton>
<DropdownContent>
<DropdownExpandableMenuGroup isMulti={false} defaultIndex={0}>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<RestaurantMenuIcon />}>
Longer title area breaking lines within the
DropdownExpandableMenuButton component
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem disabled>
<DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
<DropdownDivider />
<DropdownMenuItem icon={<LocalPizzaIcon />}>Pizza</DropdownMenuItem>
</DropdownContent>
</Dropdown>
);
};

export const ExpandableItemsWithIconsAndConsoleWarning = args => {
return (
<Dropdown {...args} width={220}>
<DropdownButton>Expandable Items Dropdown</DropdownButton>
<DropdownContent>
<DropdownExpandableMenuGroup>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton>Pasta</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuGroup>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<RestaurantMenuIcon />}>
Pasta
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Fresh
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Processed
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
<DropdownExpandableMenuItem>
<DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
Prosciutto
</DropdownExpandableMenuButton>
<DropdownExpandableMenuPanel>
<DropdownExpandableMenuListItem>
Domestic
</DropdownExpandableMenuListItem>
<DropdownExpandableMenuListItem>
Speck
</DropdownExpandableMenuListItem>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
</DropdownExpandableMenuPanel>
</DropdownExpandableMenuItem>
</DropdownExpandableMenuGroup>
<DropdownDivider />
<DropdownMenuItem icon={<LocalPizzaIcon />}>Pizza</DropdownMenuItem>
</DropdownContent>
</Dropdown>
);
};
Loading

4 comments on commit 77823fb

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://next--upbeat-sinoussi-f675aa.netlify.app

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://docs-preview-1129--upbeat-sinoussi-f675aa.netlify.app

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://storybook-preview-1129--upbeat-sinoussi-f675aa.netlify.app

Please sign in to comment.