From c3579ac4b4489aace891af153ade24859b9a45bd Mon Sep 17 00:00:00 2001 From: Mikel King Date: Tue, 17 Aug 2021 11:43:11 -0600 Subject: [PATCH 1/9] #29 dropdown --- src/dropdown/DropdownButton.tsx | 72 +++++++++++++++++++++++++++++++++ src/dropdown/DropdownMenu.tsx | 27 +++++++++++++ src/dropdown/index.tsx | 8 ++++ src/theme.ts | 1 - stories/Dropdown.stories.tsx | 52 ++++++++++++++++++++++++ 5 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 src/dropdown/DropdownButton.tsx create mode 100644 src/dropdown/DropdownMenu.tsx create mode 100644 src/dropdown/index.tsx create mode 100644 stories/Dropdown.stories.tsx diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx new file mode 100644 index 00000000..fd7b7172 --- /dev/null +++ b/src/dropdown/DropdownButton.tsx @@ -0,0 +1,72 @@ +import React, { ReactNode, CSSProperties } from 'react'; +import { css } from '@emotion/core'; +import { classNames } from '../utils/classNames'; +import { mergeProps } from '@react-aria/utils'; +import { useButton } from '@react-aria/button'; +import { useHover } from '@react-aria/interactions'; +import { FocusableRef } from '../types'; +import { useFocusableRef } from '../utils/useDOMRef'; +import theme from '../theme'; +import { Text } from '../content'; +import { Icon, ArrowIosDownwardOutline } from '../icon'; + +interface DropdownButtonProps { + /** Whether the button is disabled. */ + isDisabled?: boolean; + /** The content to display in the button. */ + children?: ReactNode; + style?: CSSProperties; +} + +/** + * A button that displays + * @param props + * @param ref + * @returns + */ +function DropdownButton( + props: DropdownButtonProps, + ref: FocusableRef +) { + let domRef = useFocusableRef(ref); + const { isDisabled, children, style, ...otherProps } = props; + const { buttonProps, isPressed } = useButton(props, domRef); + const { hoverProps, isHovered } = useHover({ isDisabled }); + + return ( + + ); +} + +let _DropdownButton = React.forwardRef(DropdownButton); +export { _DropdownButton as DropdownButton }; diff --git a/src/dropdown/DropdownMenu.tsx b/src/dropdown/DropdownMenu.tsx new file mode 100644 index 00000000..1d8cc4c5 --- /dev/null +++ b/src/dropdown/DropdownMenu.tsx @@ -0,0 +1,27 @@ +import React, { ReactNode } from 'react'; +import { css } from '@emotion/core'; +import theme from '../theme'; + +interface DropdownMenuProps { + children: ReactNode; + /** + * whether or not there is inner padding on the dropdown + * @default true + */ + isPadded: boolean; +} + +export function DropdownMenu({ children, isPadded = true }: DropdownMenuProps) { + return ( +
+ {children} +
+ ); +} diff --git a/src/dropdown/index.tsx b/src/dropdown/index.tsx new file mode 100644 index 00000000..22d2da40 --- /dev/null +++ b/src/dropdown/index.tsx @@ -0,0 +1,8 @@ +import { + PopoverTrigger as DropdownTrigger, + PopoverTriggerProps as DropdownTriggerProps, +} from '../popover'; +export * from './DropdownButton'; +export * from './DropdownMenu'; + +export { DropdownTrigger, DropdownTriggerProps }; diff --git a/src/theme.ts b/src/theme.ts index 6642fe75..a81f6fe1 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -16,7 +16,6 @@ const grayColors = { gray500: '#2D353E', gray400: '#39424D', gray200: '#646A70', // disabled text - // 2D3845 }; const arizeColors = { diff --git a/stories/Dropdown.stories.tsx b/stories/Dropdown.stories.tsx new file mode 100644 index 00000000..e0e91fd9 --- /dev/null +++ b/stories/Dropdown.stories.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { css } from '@emotion/core'; +import { + DropdownTrigger, + DropdownTriggerProps, + DropdownButton, + DropdownMenu, +} from '../src/dropdown'; +import { Provider } from '../src'; +import { Meta, Story } from '@storybook/react'; +import { withDesign } from 'storybook-addon-designs'; + +const meta: Meta = { + title: 'DropdownTrigger', + component: DropdownTrigger, + decorators: [withDesign], + argTypes: { + children: { + control: { + type: 'text', + default: 'Label', + }, + }, + }, + parameters: { + controls: { expanded: true }, + design: { + type: 'figma', + url: + 'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=1238%3A2417', + }, + }, +}; + +export default meta; + +const Template: Story = args => ( + + + Button here + + menu goes here + + + +); + +export const Default = Template.bind({}); From b7a2689d2257a6bd9df3a45c8f1182ff1df4172b Mon Sep 17 00:00:00 2001 From: Mikel King Date: Thu, 19 Aug 2021 15:06:34 -0600 Subject: [PATCH 2/9] WIP --- src/dropdown/Dropdown.tsx | 81 ++++++++++++++++++++++++++ src/dropdown/DropdownButton.tsx | 41 ++++++++++++- src/dropdown/DropdownMenu.tsx | 17 ++++-- src/dropdown/DropdownTrigger.tsx | 6 ++ src/dropdown/index.tsx | 8 +-- src/theme.ts | 3 + src/types/refs.ts | 1 - stories/Dropdown.stories.tsx | 71 +++++++++++++++++------ stories/DropdownTrigger.stories.tsx | 89 +++++++++++++++++++++++++++++ 9 files changed, 284 insertions(+), 33 deletions(-) create mode 100644 src/dropdown/Dropdown.tsx create mode 100644 src/dropdown/DropdownTrigger.tsx create mode 100644 stories/DropdownTrigger.stories.tsx diff --git a/src/dropdown/Dropdown.tsx b/src/dropdown/Dropdown.tsx new file mode 100644 index 00000000..818c58c9 --- /dev/null +++ b/src/dropdown/Dropdown.tsx @@ -0,0 +1,81 @@ +import React, { + CSSProperties, + ReactNode, + useState, + useCallback, + useRef, +} from 'react'; +import { DropdownButton, DropdownButtonProps } from './DropdownButton'; +import { DropdownMenu } from './DropdownMenu'; +import { DropdownTrigger } from './DropdownTrigger'; +import { useResizeObserver } from '@react-aria/utils'; +import { Placement, FocusableRefValue } from '../types'; +import { useUnwrapDOMRef } from '../utils'; + +export type DropdownProps = { + /** + * The content of the dropdown menu + */ + menu: ReactNode; + /** + * the content of the dropdown button + */ + children: ReactNode; + /** + * the placement of the dropdown menu + * @default "bottom left" + */ + menuPlacement?: Placement; + /** + * before text or icon for the button + */ + buttonAddonBefore?: DropdownButtonProps['addonBefore']; + /** + * additional styles for the button + */ + buttonStyle?: CSSProperties; +}; + +export function Dropdown({ + menu, + children, + menuPlacement = 'bottom left', + buttonAddonBefore, + buttonStyle, +}: DropdownProps) { + let triggerRef = useRef>(null); + let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef); + + // Measure the width of the button to inform the width of the menu (below). + let [buttonWidth, setButtonWidth] = useState(); + + let onResize = useCallback(() => { + if (unwrappedTriggerRef.current) { + let width = unwrappedTriggerRef.current.offsetWidth; + setButtonWidth(width); + } + }, [unwrappedTriggerRef, setButtonWidth]); + + // Handle re-sizes of the trigger + useResizeObserver({ + ref: unwrappedTriggerRef, + onResize: onResize, + }); + + const menuStyle = { + minWidth: buttonWidth, + }; + + return ( + + + {children} + + {menu} + + ); +} diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx index fd7b7172..8a3566af 100644 --- a/src/dropdown/DropdownButton.tsx +++ b/src/dropdown/DropdownButton.tsx @@ -10,12 +10,35 @@ import theme from '../theme'; import { Text } from '../content'; import { Icon, ArrowIosDownwardOutline } from '../icon'; -interface DropdownButtonProps { +const addonBeforeCSS = css` + background-color: ${theme.colors.gray400}; + padding: ${theme.spacing.padding8}px; + flex: none; +`; + +/** + * A label element that describes the button + */ +function AddonBefore({ children }: { children: ReactNode }) { + return ( +
+ + {children} + +
+ ); +} +export interface DropdownButtonProps { /** Whether the button is disabled. */ isDisabled?: boolean; /** The content to display in the button. */ children?: ReactNode; style?: CSSProperties; + /** + * A label that can be appended to the beginning of the button + * (e.x. dataset, formula, etc.). Useful when there is no form label + */ + addonBefore?: ReactNode; } /** @@ -29,7 +52,7 @@ function DropdownButton( ref: FocusableRef ) { let domRef = useFocusableRef(ref); - const { isDisabled, children, style, ...otherProps } = props; + const { isDisabled, children, style, addonBefore, ...otherProps } = props; const { buttonProps, isPressed } = useButton(props, domRef); const { hoverProps, isHovered } = useHover({ isDisabled }); @@ -51,15 +74,27 @@ function DropdownButton( display: flex; align-items: center; padding: 0; + overflow: hidden; + cursor: pointer; + border: 1px solid ${theme.components.dropdown.borderColor}; .ac-dropdown-button__text { - margin: ${theme.spacing.margin8}px ${theme.spacing.margin16}px; + flex: 1 1 auto; + margin: ${theme.spacing.margin8}px 4px ${theme.spacing.margin8}px + ${theme.spacing.margin8}px; display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; } .ac-icon-wrap { margin-right: ${theme.spacing.margin8}px; + flex: fixed; + width: 16px; + height: 16px; + font-size: 16px; } `} > + {addonBefore != null ? {addonBefore} : null} {children} diff --git a/src/dropdown/DropdownMenu.tsx b/src/dropdown/DropdownMenu.tsx index 1d8cc4c5..60f10c1d 100644 --- a/src/dropdown/DropdownMenu.tsx +++ b/src/dropdown/DropdownMenu.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import React, { ReactNode, CSSProperties } from 'react'; import { css } from '@emotion/core'; import theme from '../theme'; @@ -6,12 +6,17 @@ interface DropdownMenuProps { children: ReactNode; /** * whether or not there is inner padding on the dropdown - * @default true + * @default false */ - isPadded: boolean; + isPadded?: boolean; + style?: CSSProperties; } -export function DropdownMenu({ children, isPadded = true }: DropdownMenuProps) { +export function DropdownMenu({ + children, + isPadded = false, + style, +}: DropdownMenuProps) { return (
{children}
diff --git a/src/dropdown/DropdownTrigger.tsx b/src/dropdown/DropdownTrigger.tsx new file mode 100644 index 00000000..ed15701e --- /dev/null +++ b/src/dropdown/DropdownTrigger.tsx @@ -0,0 +1,6 @@ +import { + PopoverTrigger as DropdownTrigger, + PopoverTriggerProps as DropdownTriggerProps, +} from '../popover'; + +export { DropdownTrigger, DropdownTriggerProps }; diff --git a/src/dropdown/index.tsx b/src/dropdown/index.tsx index 22d2da40..8130d465 100644 --- a/src/dropdown/index.tsx +++ b/src/dropdown/index.tsx @@ -1,8 +1,4 @@ -import { - PopoverTrigger as DropdownTrigger, - PopoverTriggerProps as DropdownTriggerProps, -} from '../popover'; +export * from './Dropdown'; export * from './DropdownButton'; export * from './DropdownMenu'; - -export { DropdownTrigger, DropdownTriggerProps }; +export * from './DropdownTrigger'; diff --git a/src/theme.ts b/src/theme.ts index a81f6fe1..f2754382 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -70,6 +70,9 @@ const theme = { backgroundColor: '#2D3845', borderColor: '#6F7D8C', }, + dropdown: { + borderColor: 'rgba(118, 140, 163, .6)', + }, }, typography: { weights: { diff --git a/src/types/refs.ts b/src/types/refs.ts index 69bcf29a..b1d601ef 100644 --- a/src/types/refs.ts +++ b/src/types/refs.ts @@ -1,5 +1,4 @@ import { Ref } from 'react'; - export interface DOMRefValue { UNSAFE_getDOMNode(): T; } diff --git a/stories/Dropdown.stories.tsx b/stories/Dropdown.stories.tsx index e0e91fd9..f6da9448 100644 --- a/stories/Dropdown.stories.tsx +++ b/stories/Dropdown.stories.tsx @@ -1,18 +1,14 @@ import React from 'react'; import { css } from '@emotion/core'; -import { - DropdownTrigger, - DropdownTriggerProps, - DropdownButton, - DropdownMenu, -} from '../src/dropdown'; +import { Dropdown, DropdownProps } from '../src/dropdown'; import { Provider } from '../src'; import { Meta, Story } from '@storybook/react'; import { withDesign } from 'storybook-addon-designs'; +import { List, ListItem } from '../src/list'; const meta: Meta = { - title: 'DropdownTrigger', - component: DropdownTrigger, + title: 'Dropdown', + component: Dropdown, decorators: [withDesign], argTypes: { children: { @@ -34,18 +30,55 @@ const meta: Meta = { export default meta; -const Template: Story = args => ( +const Menu = () => ( + + hello + hello + +); +export const Gallery = () => ( + +
    +
  • + }>Click Me +
    • +
  • + } buttonAddonBefore="Dataset A"> + Click Me + +
    • +
  • + + hello + + hello asdfasdfasdfasdfasdfasdfasdfasdfasdadsfad + + + } + buttonAddonBefore="Dataset A" + buttonStyle={{ maxWidth: 200 }} + > + Really really really really really really really long text + +
    • +
+ +); + +const Template: Story = args => ( - - Button here - - menu goes here - - + } {...args}> + Click Me + ); diff --git a/stories/DropdownTrigger.stories.tsx b/stories/DropdownTrigger.stories.tsx new file mode 100644 index 00000000..dc502b09 --- /dev/null +++ b/stories/DropdownTrigger.stories.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import { css } from '@emotion/core'; +import { + DropdownTrigger, + DropdownTriggerProps, + DropdownButton, + DropdownMenu, +} from '../src/dropdown'; +import { Provider } from '../src'; +import { Meta, Story } from '@storybook/react'; +import { withDesign } from 'storybook-addon-designs'; + +const meta: Meta = { + title: 'DropdownTrigger', + component: DropdownTrigger, + decorators: [withDesign], + argTypes: { + children: { + control: { + type: 'text', + default: 'Label', + }, + }, + }, + parameters: { + controls: { expanded: true }, + design: { + type: 'figma', + url: + 'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=1238%3A2417', + }, + }, +}; + +export default meta; + +export const Gallery = () => ( + +
    +
  • + + Button here + + menu goes here + + +
    • +
  • + + Button here + + menu goes here + + +
    • +
+ +); + +const Template: Story = args => ( + + + Button here + + menu goes here + + + +); + +export const Default = Template.bind({}); From e886afb68a2c42832141e87502e2ef4456b7a644 Mon Sep 17 00:00:00 2001 From: Mikel King Date: Thu, 19 Aug 2021 22:10:19 -0600 Subject: [PATCH 3/9] add button styles sans tertiary --- src/Button.tsx | 67 ----------------- src/Spinner.tsx | 5 +- src/{ => button}/ActionButton.tsx | 19 +++-- src/button/Button.tsx | 115 ++++++++++++++++++++++++++++++ src/button/ButtonGroup.tsx | 27 +++++++ src/button/index.tsx | 3 + src/button/types.ts | 8 +++ src/dropdown/DropdownButton.tsx | 10 +++ src/icon/Icon.tsx | 1 + src/index.tsx | 3 +- src/theme.ts | 8 +++ stories/Alert.stories.tsx | 2 +- stories/Button.stories.tsx | 57 ++++++++++++++- stories/Card.stories.tsx | 6 +- stories/Dropdown.stories.tsx | 2 +- 15 files changed, 246 insertions(+), 87 deletions(-) delete mode 100644 src/Button.tsx rename src/{ => button}/ActionButton.tsx (73%) create mode 100644 src/button/Button.tsx create mode 100644 src/button/ButtonGroup.tsx create mode 100644 src/button/index.tsx create mode 100644 src/button/types.ts diff --git a/src/Button.tsx b/src/Button.tsx deleted file mode 100644 index 86eb7ed4..00000000 --- a/src/Button.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { ReactNode, SyntheticEvent } from 'react'; -import { css } from '@emotion/core'; -import theme from './theme'; -import Spinner from './Spinner'; - -const buttonCSS = css` - color: ${theme.colors.text1}; - padding: 6px 12px; - border: 1px solid ${theme.colors.dark1}; - font-size: ${theme.typography.sizes.medium}; - font-weight: 600; - height: 24px; - display: flex; - justify-content: center; - align-items: center; - box-sizing: content-box; - border-radius: 4px; - &[data-type='primary'] { - background-color: ${theme.colors.arizeBlue}; - border-color: ${theme.colors.arizeBlue}; - } - &[data-type='default'] { - background-color: ${theme.colors.gray500}; - border-color: ${theme.colors.gray500}; - } - - & > i { - padding-right: 6px; - } -`; - -export type ButtonProps = { - children: ReactNode | string; - variant: 'primary' | 'default'; - disabled?: boolean; - className?: string; - onClick?: (e: SyntheticEvent) => void; - loading?: boolean; - icon?: ReactNode; -}; - -export const Button = ({ - children, - variant, - disabled = false, - className, - onClick, - loading = false, - icon, -}: ButtonProps) => { - const isDisabled = disabled || loading; - return ( - - ); -}; - -export default Button; diff --git a/src/Spinner.tsx b/src/Spinner.tsx index 6aa3fac6..2af116f7 100644 --- a/src/Spinner.tsx +++ b/src/Spinner.tsx @@ -12,8 +12,7 @@ const bounceDelay = keyframes` } `; -const spinner = css` - margin: 0 8px; +const spinnerCSS = css` width: 16px; height: 16px; position: relative; @@ -107,7 +106,7 @@ const spinner = css` const Spinner = () => { return ( -
+
diff --git a/src/ActionButton.tsx b/src/button/ActionButton.tsx similarity index 73% rename from src/ActionButton.tsx rename to src/button/ActionButton.tsx index e63baad5..3fb3b91b 100644 --- a/src/ActionButton.tsx +++ b/src/button/ActionButton.tsx @@ -1,16 +1,13 @@ -import React, { ReactNode, CSSProperties } from 'react'; -import { classNames } from './utils/classNames'; +import React, { CSSProperties } from 'react'; +import { classNames } from '../utils/classNames'; import { mergeProps } from '@react-aria/utils'; import { useButton } from '@react-aria/button'; import { useHover } from '@react-aria/interactions'; -import { FocusableRef } from './types'; -import { useFocusableRef } from './utils/useDOMRef'; +import { FocusableRef } from '../types'; +import { useFocusableRef } from '../utils/useDOMRef'; +import { BaseButtonProps } from './types'; -interface ButtonProps { - /** Whether the button is disabled. */ - isDisabled?: boolean; - /** The content to display in the button. */ - children?: ReactNode; +interface ActionButtonProps extends BaseButtonProps { style?: CSSProperties; } @@ -21,7 +18,7 @@ interface ButtonProps { * @returns */ function ActionButton( - props: ButtonProps, + props: ActionButtonProps, ref: FocusableRef ) { let domRef = useFocusableRef(ref); @@ -33,7 +30,7 @@ function ActionButton( + ); +}; + +let _Button = React.forwardRef(Button); +export { _Button as Button }; diff --git a/src/button/ButtonGroup.tsx b/src/button/ButtonGroup.tsx new file mode 100644 index 00000000..a06d4997 --- /dev/null +++ b/src/button/ButtonGroup.tsx @@ -0,0 +1,27 @@ +import React, { ReactNode } from 'react'; +import { css } from '@emotion/core'; +import theme from '../theme'; + +type ButtonGroupProps = { + children: ReactNode; +}; + +/** + * ButtonGroup expects Buttons as children and should be used to manage button layouts + */ +export function ButtonGroup({ children }: ButtonGroupProps) { + return ( +
.ac-button + .ac-button { + margin-left: ${theme.spacing.margin8}px; + } + `} + > + {children} +
+ ); +} diff --git a/src/button/index.tsx b/src/button/index.tsx new file mode 100644 index 00000000..d5dc9488 --- /dev/null +++ b/src/button/index.tsx @@ -0,0 +1,3 @@ +export * from './Button'; +export * from './ActionButton'; +export * from './ButtonGroup'; diff --git a/src/button/types.ts b/src/button/types.ts new file mode 100644 index 00000000..03593ca0 --- /dev/null +++ b/src/button/types.ts @@ -0,0 +1,8 @@ +import { ReactNode } from 'react'; + +export interface BaseButtonProps { + /** Whether the button is disabled. */ + isDisabled?: boolean; + /** The content to display in the button. */ + children?: ReactNode; +} diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx index 8a3566af..9fd72b75 100644 --- a/src/dropdown/DropdownButton.tsx +++ b/src/dropdown/DropdownButton.tsx @@ -77,6 +77,15 @@ function DropdownButton( overflow: hidden; cursor: pointer; border: 1px solid ${theme.components.dropdown.borderColor}; + transition: all 0.2s ease-in-out; + /** provide an alternate highlight */ + outline: none; + &.is-active, + &.is-hovered, + &:focus { + border: 1px solid ${theme.components.dropdown.activeBorderColor}; + background-color: ${theme.components.dropdown.activeBackgroundColor}; + } .ac-dropdown-button__text { flex: 1 1 auto; margin: ${theme.spacing.margin8}px 4px ${theme.spacing.margin8}px @@ -84,6 +93,7 @@ function DropdownButton( display: inline-block; text-overflow: ellipsis; white-space: nowrap; + overflow: hidden; } .ac-icon-wrap { margin-right: ${theme.spacing.margin8}px; diff --git a/src/icon/Icon.tsx b/src/icon/Icon.tsx index 94611775..924827e8 100644 --- a/src/icon/Icon.tsx +++ b/src/icon/Icon.tsx @@ -16,6 +16,7 @@ export const Icon = ({ svg, style, ...restProps }: IconProps) => { width: 1em; height: 1em; font-size: 1.3rem; + display: flex; svg { fill: currentColor; width: 1em; diff --git a/src/index.tsx b/src/index.tsx index cbb4231c..ba7cb503 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,7 @@ export { OverlayProvider as Provider } from '@react-aria/overlays'; export * from './popover'; export * from './content'; -export * from './ActionButton'; +export * from './button'; export * from './accordion'; export * from './card'; export * from './list'; @@ -11,6 +11,7 @@ export * from './types'; export * from './radio'; export * from './label'; export * from './alert'; +export * from './dropdown'; // export interface Props extends HTMLAttributes { // /** custom content, defaults to 'the snozzberries taste like snozzberries' */ diff --git a/src/theme.ts b/src/theme.ts index f2754382..8af919e7 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -72,6 +72,14 @@ const theme = { }, dropdown: { borderColor: 'rgba(118, 140, 163, .6)', + activeBorderColor: 'rgba(118, 140, 163, 1)', + activeBackgroundColor: '#313A44', + }, + button: { + primaryBorderColor: '#5BAECC', + primaryHoverBackgroundColor: '#5BAECC', + defaultBorderColor: '#768CA3', + defaultHoverBackgroundColor: '#64768A', }, }, typography: { diff --git a/stories/Alert.stories.tsx b/stories/Alert.stories.tsx index f1b312f2..2b231a62 100644 --- a/stories/Alert.stories.tsx +++ b/stories/Alert.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { css } from '@emotion/core'; import { Meta, Story } from '@storybook/react'; import { Alert, AlertProps } from '../src/alert'; -import { Button } from '../src/Button'; +import { Button } from '../src/button'; const meta: Meta = { title: 'Alert', component: Alert, diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx index 20c3ce5a..0494c566 100644 --- a/stories/Button.stories.tsx +++ b/stories/Button.stories.tsx @@ -1,8 +1,13 @@ import React from 'react'; +import { css } from '@emotion/core'; import { Meta, Story } from '@storybook/react'; -import Button, { ButtonProps } from '../src/Button'; +import { ButtonGroup } from '../src/button'; +import { Button, ButtonProps } from '../src/button'; +import { Icon, PlusCircleOutline } from '../src/icon'; import { withDesign } from 'storybook-addon-designs'; +const plusIcon = } />; + const meta: Meta = { title: 'Button', component: Button, @@ -26,6 +31,56 @@ const meta: Meta = { export default meta; +export const Gallery = () => { + return ( +
    li { + margin-bottom: 8px; + } + `} + > +
  • + + + + +
    • +
  • + + + + +
    • +
  • + + + + +
    • +
+ ); +}; const Template: Story = args => ); }; diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx index 0494c566..1c3b6c36 100644 --- a/stories/Button.stories.tsx +++ b/stories/Button.stories.tsx @@ -49,7 +49,21 @@ export const Gallery = () => { - + + + - - + + + , div); - ReactDOM.unmountComponentAtNode(div); - }); -}); From 7344cc02718e6b245095a89fa5f65955a2cebdbe Mon Sep 17 00:00:00 2001 From: Mikel King Date: Sat, 21 Aug 2021 01:09:56 -0600 Subject: [PATCH 9/9] Add a test --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a3e3ef5f..fdec5dd7 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.2.18", + "version": "0.2.20", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts",