diff --git a/package-lock.json b/package-lock.json index d0f0b260d6..9a749ffc46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12197,9 +12197,9 @@ } }, "node_modules/@zendeskgarden/container-menu": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/container-menu/-/container-menu-0.5.0.tgz", - "integrity": "sha512-X2iQPHqls+8O3d8Ohm3t6oNnh+lQ6KRhpySYwvfaVEdsnxQtchHBImnrAJt33GVGMz1lBQu0dj5DxT4AALVHUQ==", + "version": "0.5.5", + "resolved": "file:packages/dropdowns/zendeskgarden-container-menu-0.5.5.tgz", + "integrity": "sha512-aAa/0uvPUB7pOQW6CeK+8IKHA6Vx+5Nve+8HSrYwmxp5ABR0bP/XjbnTFkCaVLYAEGpNELxxeGJMMg1jYSAnOw==", "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.8.4", @@ -51904,7 +51904,7 @@ "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@zendeskgarden/container-combobox": "^2.0.0", - "@zendeskgarden/container-menu": "^0.5.0", + "@zendeskgarden/container-menu": "file:zendeskgarden-container-menu-0.5.5.tgz", "@zendeskgarden/container-utilities": "^2.0.0", "@zendeskgarden/react-buttons": "^9.5.3", "@zendeskgarden/react-forms": "^9.5.3", diff --git a/packages/dropdowns/demo/menu.stories.mdx b/packages/dropdowns/demo/menu.stories.mdx index ebe731a237..5511599e14 100644 --- a/packages/dropdowns/demo/menu.stories.mdx +++ b/packages/dropdowns/demo/menu.stories.mdx @@ -5,6 +5,18 @@ import { MenuStory } from './stories/MenuStory'; import README from '../README.md'; import { BUTTON_TYPE, ITEMS } from './stories/data'; +import Arrow from './stories/Arrow'; +import Button from './stories/Button'; +import Danger from './stories/Danger'; +import Default from './stories/Default'; +import Disabled from './stories/Disabled'; +import GroupedItems from './stories/GroupedItems'; +import Media from './stories/Media'; +import MetaStory from './stories/Meta'; +import Nested from './stories/Nested'; +import Placement from './stories/Placement'; +import Size from './stories/Size'; + - {args => } + {args => ( + <> + + + + )} @@ -68,9 +85,199 @@ import { BUTTON_TYPE, ITEMS } from './stories/data'; const { type, ...rest } = changes; updateArgs(rest); }; - return ; + return ( + <> + + + + ); }} +# Arrow + + + + {args => } + + + +# Button + + + + {args => + + )} + + + +# Placement + + + + {args => } + + + +# Size + + + + {args => } + + + {README} diff --git a/packages/dropdowns/demo/stories/Arrow.tsx b/packages/dropdowns/demo/stories/Arrow.tsx new file mode 100644 index 0000000000..a097e9b612 --- /dev/null +++ b/packages/dropdowns/demo/stories/Arrow.tsx @@ -0,0 +1,42 @@ +/* eslint-disable react/no-unstable-nested-components */ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback } from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import { IconButton } from '@zendeskgarden/react-buttons'; +import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns'; +import LeafIcon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg'; + +const Example = () => { + const handleChange = useCallback>(changes => { + // eslint-disable-next-line no-alert + changes.value && alert(`You chose ${changes.value}`); + }, []); + + return ( + + + ( + + + + )} + onChange={handleChange} + > + Acacia + Daisy + Honeysuckle + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/Button.tsx b/packages/dropdowns/demo/stories/Button.tsx new file mode 100644 index 0000000000..710ccb6101 --- /dev/null +++ b/packages/dropdowns/demo/stories/Button.tsx @@ -0,0 +1,44 @@ +/* eslint-disable react/no-unstable-nested-components */ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import { Button } from '@zendeskgarden/react-buttons'; +import { Menu, Item } from '@zendeskgarden/react-dropdowns'; +import LeafIcon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg'; + +const Example = () => { + const handleChange = ({ value }: { value?: string }) => { + // eslint-disable-next-line no-alert + value && alert(`You chose ${value}`); + }; + + return ( + + + ( + + )} + onChange={handleChange} + > + Hydrangea + Petunia + Lily + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/Danger.tsx b/packages/dropdowns/demo/stories/Danger.tsx new file mode 100644 index 0000000000..3b007a7944 --- /dev/null +++ b/packages/dropdowns/demo/stories/Danger.tsx @@ -0,0 +1,42 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback } from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import LeafIcon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg'; +import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns'; + +const Example = () => { + const handleChange = useCallback>(changes => { + // eslint-disable-next-line no-alert + changes.value && alert(`You chose ${changes.value}`); + }, []); + + return ( + + + + + Acacia + + + Daisy + 15 planted + + + Honeysuckle + + } value="candytuft"> + Candytuft + + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/Default.tsx b/packages/dropdowns/demo/stories/Default.tsx new file mode 100644 index 0000000000..a0a0285d3a --- /dev/null +++ b/packages/dropdowns/demo/stories/Default.tsx @@ -0,0 +1,31 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback } from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns'; + +const Example = () => { + const handleChange = useCallback>(changes => { + // eslint-disable-next-line no-alert + changes.value && alert(`You chose ${changes.value}`); + }, []); + + return ( + + + + Cactus + Jade plant + Echeveria + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/Disabled.tsx b/packages/dropdowns/demo/stories/Disabled.tsx new file mode 100644 index 0000000000..415ff96489 --- /dev/null +++ b/packages/dropdowns/demo/stories/Disabled.tsx @@ -0,0 +1,33 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback } from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns'; + +const Example = () => { + const handleChange = useCallback>(changes => { + // eslint-disable-next-line no-alert + changes.value && alert(`You chose ${changes.value}`); + }, []); + + return ( + + + + Maitake + + Basidirond + + Crimini + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/GroupedItems.tsx b/packages/dropdowns/demo/stories/GroupedItems.tsx new file mode 100644 index 0000000000..2f25cddf6e --- /dev/null +++ b/packages/dropdowns/demo/stories/GroupedItems.tsx @@ -0,0 +1,62 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback, useState } from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import { Menu, Item, ItemGroup, ISelectedItem } from '@zendeskgarden/react-dropdowns'; + +const Example = () => { + const [expanded, setExpanded] = useState(false); + + const handleChange = useCallback( + ({ + isExpanded, + selectedItems + }: { + isExpanded?: boolean; + value?: string; + selectedItems?: ISelectedItem[]; + }) => { + const lastItem = selectedItems?.[selectedItems.length - 1]; + const isNonCheckboxItem = !selectedItems || lastItem?.type !== 'checkbox'; + + if (isExpanded !== undefined && isNonCheckboxItem) { + setExpanded(isExpanded); + } + }, + [] + ); + + return ( + + + + + Asparagus + Broccoli + + Cauliflower + + + + + Apple + + + Kiwi + + + Banana + + + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/Media.tsx b/packages/dropdowns/demo/stories/Media.tsx new file mode 100644 index 0000000000..deeaaf29c4 --- /dev/null +++ b/packages/dropdowns/demo/stories/Media.tsx @@ -0,0 +1,43 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback } from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import { Menu, Item, ItemGroup, Separator, IMenuProps } from '@zendeskgarden/react-dropdowns'; +import LeafIcon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg'; + +const Example = () => { + const handleChange = useCallback>(changes => { + // eslint-disable-next-line no-alert + changes.value && alert(`You chose ${changes.value}`); + }, []); + + return ( + + + + } legend="Plants"> + } value="cactus"> + Cactus + 15 available + + } value="flower"> + Flower + + Succulent + + + + Add plant + + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/Meta.tsx b/packages/dropdowns/demo/stories/Meta.tsx new file mode 100644 index 0000000000..9fcf06438c --- /dev/null +++ b/packages/dropdowns/demo/stories/Meta.tsx @@ -0,0 +1,37 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback } from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns'; + +const Example = () => { + const handleChange = useCallback>(changes => { + // eslint-disable-next-line no-alert + changes.value && alert(`You chose ${changes.value}`); + }, []); + + return ( + + + + + Avocado 27 available + + + Potato 5 available + + + Beet 11 available + + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/Nested.tsx b/packages/dropdowns/demo/stories/Nested.tsx new file mode 100644 index 0000000000..8fad2f6ae2 --- /dev/null +++ b/packages/dropdowns/demo/stories/Nested.tsx @@ -0,0 +1,73 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback, useState } from 'react'; +import styled from 'styled-components'; +import { hideVisually } from 'polished'; +import { Grid } from '@zendeskgarden/react-grid'; +import { Menu, Item, IItemProps, Separator } from '@zendeskgarden/react-dropdowns'; + +export const BASE_ITEMS: IItemProps[] = [ + { value: 'Orange' }, + { value: 'Berry', type: 'next' }, + { value: 'Apple' } +]; + +export const NESTED_ITEMS: IItemProps[] = [ + { value: 'Fruits', type: 'previous' }, + { value: 'separator' }, + { value: 'Strawberry' }, + { value: 'Loganberry' }, + { value: 'Boysenberry' } +]; + +const StyledHiddenText = styled.span(hideVisually); + +const Example = () => { + const [items, setItems] = useState(BASE_ITEMS); + + const handleChange = useCallback( + ({ type, value, isExpanded }: { type?: string; value?: string; isExpanded?: boolean }) => { + const isNext = type?.includes('next'); + const isPrev = type?.includes('previous'); + + if (isNext || isPrev) { + setItems(isNext ? NESTED_ITEMS : BASE_ITEMS); + } else if (isExpanded === false) { + setItems(BASE_ITEMS); + } + + // eslint-disable-next-line no-alert + value && !isNext && !isPrev && alert(`You chose ${value}`); + }, + [] + ); + + return ( + + + + {items.map(item => + item.value === 'separator' ? ( + + ) : ( + + {item.value} + {item.type === 'next' && Go to submenu} + {item.type === 'previous' && ( + Go to previous menu + )} + + ) + )} + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/Placement.tsx b/packages/dropdowns/demo/stories/Placement.tsx new file mode 100644 index 0000000000..4777919de2 --- /dev/null +++ b/packages/dropdowns/demo/stories/Placement.tsx @@ -0,0 +1,36 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback } from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns'; + +const Example = () => { + const handleChange = useCallback>(changes => { + // eslint-disable-next-line no-alert + changes.value && alert(`You chose ${changes.value}`); + }, []); + + return ( + + + + Acacia + Daisy + Honeysuckle + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/demo/stories/Size.tsx b/packages/dropdowns/demo/stories/Size.tsx new file mode 100644 index 0000000000..ffb1b8f756 --- /dev/null +++ b/packages/dropdowns/demo/stories/Size.tsx @@ -0,0 +1,38 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React, { useCallback } from 'react'; +import { Grid } from '@zendeskgarden/react-grid'; +import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns'; + +const Example = () => { + const handleChange = useCallback>(changes => { + // eslint-disable-next-line no-alert + changes.value && alert(`You chose ${changes.value}`); + }, []); + + return ( + + + + Tomato + Corn + Onion + + + + + Grape tomato + Baby corn + Pearl onion + + + + ); +}; + +export default Example; diff --git a/packages/dropdowns/package.json b/packages/dropdowns/package.json index 44172e6b38..d244c107f7 100644 --- a/packages/dropdowns/package.json +++ b/packages/dropdowns/package.json @@ -23,7 +23,7 @@ "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@zendeskgarden/container-combobox": "^2.0.0", - "@zendeskgarden/container-menu": "^0.5.0", + "@zendeskgarden/container-menu": "file:./zendeskgarden-container-menu-0.5.5.tgz", "@zendeskgarden/container-utilities": "^2.0.0", "@zendeskgarden/react-buttons": "^9.5.3", "@zendeskgarden/react-forms": "^9.5.3", diff --git a/packages/dropdowns/zendeskgarden-container-menu-0.5.5.tgz b/packages/dropdowns/zendeskgarden-container-menu-0.5.5.tgz new file mode 100644 index 0000000000..c9f4fda26f Binary files /dev/null and b/packages/dropdowns/zendeskgarden-container-menu-0.5.5.tgz differ diff --git a/zendeskgarden-container-menu-0.5.1.tgz b/zendeskgarden-container-menu-0.5.1.tgz new file mode 100644 index 0000000000..26117fafc9 Binary files /dev/null and b/zendeskgarden-container-menu-0.5.1.tgz differ diff --git a/zendeskgarden-container-menu-0.5.2.tgz b/zendeskgarden-container-menu-0.5.2.tgz new file mode 100644 index 0000000000..87ed69036a Binary files /dev/null and b/zendeskgarden-container-menu-0.5.2.tgz differ diff --git a/zendeskgarden-container-menu-0.5.3.tgz b/zendeskgarden-container-menu-0.5.3.tgz new file mode 100644 index 0000000000..2a9ebe2876 Binary files /dev/null and b/zendeskgarden-container-menu-0.5.3.tgz differ