Skip to content

Commit

Permalink
chore(Button): update stories (#2589)
Browse files Browse the repository at this point in the history 
* chore(Button): update stories

* fix: [] review comments
  • Loading branch information
@maxcheremisin
maxcheremisin committed Nov 7, 2023
1 parent f51f006 commit 75ecd7b
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 177 deletions.
117 changes: 19 additions & 98 deletions ...ponents/button/stories/Button.stories.tsx → ...utton/stories/ButtonComponent.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { css } from 'emotion';
import tokens from '@contentful/f36-tokens';

export default {
title: 'Components/Button',
title: 'Components/Button components',
component: Button,
parameters: {
propTypes: Button['__docgenInfo'],
Expand All @@ -32,7 +32,7 @@ export default {
},
};

export const basic = ({ startIcon, endIcon, children, ...args }) => (
export const _Button = ({ startIcon, endIcon, children, ...args }) => (
<Button
{...args}
startIcon={startIcon && <Icon as={icons[startIcon]} />}
Expand All @@ -42,7 +42,7 @@ export const basic = ({ startIcon, endIcon, children, ...args }) => (
</Button>
);

basic.args = {
_Button.args = {
size: 'medium',
variant: 'primary',
children: 'Button CTA',
Expand Down Expand Up @@ -104,36 +104,28 @@ export const Overview = ({ startIcon, endIcon }) => {
</SectionHeading>

<Stack flexDirection="row" marginBottom="spacingM" spacing="spacingXs">
<Button
variant="primary"
size="small"
startIcon={<Icon as={icons.PlusIcon} />}
>
<Button variant="primary" size="small">
Small
</Button>

<Button
variant="primary"
size="medium"
startIcon={<Icon as={icons.PlusIcon} />}
>
Medium (default)
<Button variant="primary" size="medium">
Medium
</Button>

<Button
variant="primary"
size="medium"
startIcon={<Icon as={icons.PlusIcon} />}
>
Medium (default) button with really long content
<Button variant="primary" size="large">
Large
</Button>
</Stack>
</Flex>

<Button
variant="primary"
size="large"
startIcon={<Icon as={icons.PlusIcon} />}
>
Large
<Flex flexDirection="column" marginBottom="spacingL">
<SectionHeading as="h3" marginBottom="spacingS">
Truncated
</SectionHeading>

<Stack flexDirection="row" marginBottom="spacingM" spacing="spacingXs">
<Button variant="primary" size="medium">
Medium button with really long content
</Button>
</Stack>
</Flex>
Expand Down Expand Up @@ -196,7 +188,7 @@ export const Overview = ({ startIcon, endIcon }) => {

<Flex flexDirection="column" marginBottom="spacingL">
<SectionHeading as="h3" marginBottom="spacingS">
Button with icon on right side
Button with end icon
</SectionHeading>

<Stack spacing="spacingXs" marginBottom="spacingM">
Expand Down Expand Up @@ -265,77 +257,6 @@ export const Overview = ({ startIcon, endIcon }) => {
</Stack>
</Flex>

<Flex flexDirection="column" marginBottom="spacingL">
<SectionHeading as="h3" marginBottom="spacingS">
Icon only button
</SectionHeading>
<Stack spacing="spacingXs" marginBottom="spacingM">
<Button
variant="transparent"
startIcon={<Icon as={icons.CloseIcon} />}
aria-label="Close"
/>

<Button
variant="transparent"
startIcon={<Icon as={icons.MoreHorizontalIcon} />}
aria-label="More"
/>

<Button
variant="secondary"
startIcon={<Icon as={icons.DownloadIcon} />}
aria-label="Download"
/>

<Button
variant="secondary"
startIcon={<Icon as={icons.DownloadIcon} />}
isLoading
/>

<Button
variant="positive"
startIcon={<Icon as={icons.DragIcon} />}
aria-label="Resize"
/>

<Button
variant="negative"
startIcon={<Icon as={icons.DeleteIcon} />}
aria-label="Delete"
/>

<Button
variant="primary"
startIcon={<Icon as={icons.PlusIcon} />}
aria-label="Add"
/>
</Stack>
<Stack spacing="spacingXs" marginBottom="spacingM">
<Button
variant="primary"
startIcon={<Icon as={icons.PlusIcon} />}
aria-label="Plus"
size="small"
/>

<Button
variant="primary"
startIcon={<Icon as={icons.PlusIcon} />}
aria-label="Plus"
size="medium"
/>

<Button
variant="primary"
startIcon={<Icon as={icons.PlusIcon} />}
aria-label="Plus"
size="large"
/>
</Stack>
</Flex>

<Flex flexDirection="column" marginBottom="spacingL">
<SectionHeading as="h3" marginBottom="spacingS">
Full width button
Expand Down
146 changes: 70 additions & 76 deletions packages/components/button/stories/ButtonGroup.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import React from 'react';
import type { Meta, Story } from '@storybook/react/types-6-0';
import { ChevronDownIcon, PlusIcon } from '@contentful/f36-icons';
import { ChevronDownIcon } from '@contentful/f36-icons';
import { SectionHeading } from '@contentful/f36-typography';
import { action } from '@storybook/addon-actions';
import { Box, Flex } from '@contentful/f36-core';
import { ButtonGroup, Button, IconButton, type ButtonGroupProps } from '../src';
import tokens from '@contentful/f36-tokens';
import { ButtonVariant } from '../src/types';
import { ButtonGroupVariants } from '../src/ButtonGroup/types';

export default {
component: ButtonGroup,
parameters: {
propTypes: ButtonGroup['__docgenInfo'],
},
title: 'Components/Button/ButtonGroup',
title: 'Components/Button components/ButtonGroup',
argTypes: {
variant: {
control: {
options: ['collapsed', 'spaced'],
options: ['merged', 'spaced'],
type: 'select',
},
},
Expand Down Expand Up @@ -67,82 +69,74 @@ spaced.args = {
export const overview: Story<ButtonGroupProps> = () => {
const onClick = action('click');

const buttonVariants: Record<ButtonVariant, true> = {
primary: true,
secondary: true,
positive: true,
negative: true,
transparent: true,
};

const buttonGroupVariants: Record<
Exclude<ButtonGroupVariants, 'collapsed'>,
true
> = {
merged: true,
spaced: true,
};

return (
<>
<Flex flexDirection="column" marginBottom="spacingL">
<SectionHeading as="h3" marginBottom="spacingS">
Button Group Collapse
</SectionHeading>
<Flex flexDirection="column" marginBottom="spacingL">
{Object.keys(buttonGroupVariants).map((key) => {
const groupVariant = key as Exclude<ButtonGroupVariants, 'collapsed'>;

<Flex flexDirection="column" marginBottom="spacingM">
<Box marginBottom="spacingS">
<ButtonGroup>
<Button onClick={onClick} variant="secondary">
Button
</Button>
<Button onClick={onClick} variant="secondary">
Button
</Button>
<Button onClick={onClick} variant="secondary">
Button
</Button>
<IconButton
onClick={onClick}
variant="secondary"
icon={<ChevronDownIcon variant="secondary" />}
aria-label="Open dropdown"
/>
</ButtonGroup>
</Box>
<Box marginBottom="spacingS">
<ButtonGroup withDivider>
<Button onClick={onClick} variant="positive">
Button
</Button>
<IconButton
onClick={onClick}
variant="positive"
icon={<ChevronDownIcon variant="white" />}
aria-label="Open dropdown"
/>
</ButtonGroup>
</Box>
<Box marginBottom="spacingS">
<ButtonGroup withDivider>
<Button
onClick={onClick}
variant="primary"
startIcon={<PlusIcon />}
>
Button
</Button>
<IconButton
onClick={onClick}
variant="primary"
icon={<ChevronDownIcon variant="white" />}
aria-label="Open dropdown"
/>
</ButtonGroup>
</Box>
</Flex>
return (
<>
{Object.keys(buttonVariants).map((key) => {
const buttonVariant = key as ButtonVariant;

<SectionHeading as="h3" marginBottom="spacingS">
Button Group Spaced
</SectionHeading>
return (
<>
<SectionHeading as="h3" marginBottom="spacingS">
Button Group {groupVariant} {buttonVariant}
</SectionHeading>

<Flex flexDirection="column" marginBottom="spacingM">
<Box marginBottom="spacingS">
<ButtonGroup variant="spaced">
<Button onClick={onClick} variant="primary">
Button
</Button>
<Button onClick={onClick} variant="secondary">
Button
</Button>
</ButtonGroup>
</Box>
</Flex>
</Flex>
</>
<Flex flexDirection="column" marginBottom="spacingM">
<Box marginBottom="spacingS">
<ButtonGroup
{...(groupVariant === 'spaced'
? { variant: groupVariant }
: {
variant: groupVariant,
withDivider:
buttonVariant === 'positive' ||
buttonVariant === 'primary',
})}
>
<Button onClick={onClick} variant={buttonVariant}>
Button
</Button>
<Button onClick={onClick} variant={buttonVariant}>
Button
</Button>
<Button onClick={onClick} variant={buttonVariant}>
Button
</Button>
<IconButton
onClick={onClick}
variant={buttonVariant}
icon={<ChevronDownIcon variant="secondary" />}
aria-label="Open dropdown"
/>
</ButtonGroup>
</Box>
</Flex>
</>
);
})}
</>
);
})}
</Flex>
);
};
2 changes: 1 addition & 1 deletion packages/components/button/stories/IconButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import * as icons from '@contentful/f36-icons';
import { IconButton } from '../src/IconButton';

export default {
title: 'Components/Button/IconButton',
title: 'Components/Button components/IconButton',
component: IconButton,
argTypes: {
className: { control: { disable: true } },
Expand Down
2 changes: 1 addition & 1 deletion packages/components/button/stories/ToggleButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { ButtonGroup } from '../src';
import { ToggleButton } from '../src/ToggleButton';

export default {
title: 'Components/Button/ToggleButton',
title: 'Components/Button components/ToggleButton',
component: ToggleButton,
parameters: {
propTypes: [ToggleButton['__docgenInfo']],
Expand Down
2 changes: 1 addition & 1 deletion packages/components/copybutton/stories/CopyButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default {
parameters: {
propTypes: CopyButton['__docgenInfo'],
},
title: 'Components/CopyButton',
title: 'Components/Button components/CopyButton',
} as Meta;

export const Default: Story<CopyButtonProps> = (args) => {
Expand Down

1 comment on commit 75ecd7b

@vercel
Copy link

@vercel vercel bot commented on 75ecd7b Nov 7, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

forma-36 – ./

forma-36-git-main.colorfuldemo.com
f36.contentful.com
forma-36.colorfuldemo.com
v4.f36.contentful.com
forma-36.vercel.app

Please sign in to comment.