Skip to content

Commit 37967c1

Browse files
wintondeshongwintondeshong
committed
Add Molecules / DropdownButton
1 parent 49cd362 commit 37967c1

5 files changed

Lines changed: 290 additions & 1 deletion

File tree

‎package-lock.json‎

Lines changed: 130 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"url": "https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues"
2222
},
2323
"dependencies": {
24+
"@reach/menu-button": "0.10.2",
2425
"@types/react": "16.9.11",
2526
"@types/react-dom": "16.9.3",
2627
"@types/react-router-dom": "5.1.5",

‎src/molecules/dropdown-button/dropdown-button.stories.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// import { optionsKnob } from "@storybook/addon-knobs";
2+
import { DropdownButton } from "./dropdown-button";
3+
import React from "react";
4+
// import { ButtonSizes } from "../../atoms/constants/button-sizes";
5+
// import { ButtonStyles } from "../../atoms/constants/button-styles";
6+
// import { Icon } from "../../atoms/icons/icon";
7+
// import { Icons } from "../../atoms/constants/icons";
8+
9+
export default {
10+
component: DropdownButton,
11+
title: "Molecules | Dropdown Button",
12+
};
13+
14+
export const dropdownButtonKnobs = () => {
15+
// const items: Array<DropdownItem> = [
16+
// {
17+
// component: "Item #1",
18+
// onSelect: () => window.alert("Clicked dropdown item #1!"),
19+
// },
20+
// {
21+
// component: "Item #2",
22+
// onSelect: () => window.alert("Clicked dropdown item #2!"),
23+
// },
24+
// {
25+
// component: "Item #3",
26+
// onSelect: () => window.alert("Clicked dropdown item #3!"),
27+
// },
28+
// {
29+
// component: "Item #4",
30+
// onSelect: () => window.alert("Clicked dropdown item #4!"),
31+
// },
32+
// {
33+
// component: "Item #5",
34+
// onSelect: () => window.alert("Clicked dropdown item #5!"),
35+
// },
36+
// ];
37+
38+
return (
39+
<strong>
40+
TODO:
41+
https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/22
42+
</strong>
43+
// <DropdownButton
44+
// buttonContents={
45+
// <React.Fragment>
46+
// Dropdown
47+
// <Icon type={Icons.ChevronDown} />
48+
// </React.Fragment>
49+
// }
50+
// menuItems={items}
51+
// size={optionsKnob(
52+
// "Button Size",
53+
// {
54+
// small: ButtonSizes.Small,
55+
// medium: ButtonSizes.Medium,
56+
// large: ButtonSizes.Large,
57+
// },
58+
// ButtonSizes.Small,
59+
// { display: "radio" }
60+
// )}
61+
// style={optionsKnob(
62+
// "Button Style",
63+
// {
64+
// anchor: ButtonStyles.Anchor,
65+
// destructive: ButtonStyles.Destructive,
66+
// primary: ButtonStyles.Primary,
67+
// secondary: ButtonStyles.Secondary,
68+
// tertiary: ButtonStyles.Tertiary,
69+
// tertiaryAlt: ButtonStyles.TertiaryAlt,
70+
// },
71+
// ButtonStyles.Primary,
72+
// { display: "radio" }
73+
// )}
74+
// />
75+
);
76+
};

‎src/molecules/dropdown-button/dropdown-button.test.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// import React from "react";
2+
// import { render } from "@testing-library/react";
3+
// import { DropdownButton } from "./dropdown-button";
4+
5+
describe("DropdownButton", () => {
6+
test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/21", () => {});
7+
});

‎src/molecules/dropdown-button/dropdown-button.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from "react";
2+
import { Menu, MenuButton, MenuItem, MenuList } from "@reach/menu-button";
3+
import uuid from "uuid";
4+
import { ButtonSizes } from "../../atoms/constants/button-sizes";
5+
import { ButtonStyles } from "../../atoms/constants/button-styles";
6+
7+
// -------------------------------------------------------------------------------------------------
8+
// #region Interfaces
9+
// -------------------------------------------------------------------------------------------------
10+
11+
export interface DropdownItem {
12+
component: string | React.ReactNode | React.ReactNodeArray;
13+
onSelect: () => void;
14+
}
15+
16+
export interface DropdownButtonProps {
17+
buttonClassName?: string;
18+
menuItems: Array<DropdownItem>;
19+
size?: ButtonSizes;
20+
style?: ButtonStyles;
21+
buttonContents: string | React.ReactNode | React.ReactNodeArray;
22+
}
23+
24+
// #endregion Interfaces
25+
26+
// -------------------------------------------------------------------------------------------------
27+
// #region Component
28+
// -------------------------------------------------------------------------------------------------
29+
30+
const DropdownButton: React.FC<DropdownButtonProps> = (
31+
props: DropdownButtonProps
32+
) => {
33+
const { buttonClassName, menuItems, buttonContents, size, style } = props;
34+
35+
const classNames = ["c-button", "c-dropdown-button"];
36+
37+
if (buttonClassName != null) {
38+
classNames.push(buttonClassName);
39+
}
40+
41+
if (size != null) {
42+
classNames.push(size);
43+
}
44+
45+
if (style != null) {
46+
classNames.push(style);
47+
}
48+
49+
return (
50+
<Menu>
51+
<MenuButton className={classNames.join(" ")}>
52+
{buttonContents}
53+
</MenuButton>
54+
<MenuList className="c-dropdown-button__list">
55+
{menuItems.map((item: DropdownItem) => (
56+
<MenuItem
57+
key={uuid.v4()}
58+
onSelect={item.onSelect}
59+
className={"c-dropdown-button__list__item"}>
60+
{item.component}
61+
</MenuItem>
62+
))}
63+
</MenuList>
64+
</Menu>
65+
);
66+
};
67+
68+
// #endregion Component
69+
70+
// -------------------------------------------------------------------------------------------------
71+
// #region Exports
72+
// -------------------------------------------------------------------------------------------------
73+
74+
export { DropdownButton };
75+
76+
// #endregion Exports

0 commit comments

Comments
 (0)