Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toolbar: unify Storybook examples under one file, migrate from knobs to controls #47117

Merged
merged 8 commits into from
Jan 17, 2023
Merged

Toolbar: unify Storybook examples under one file, migrate from knobs to controls #47117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
63c4605
Delete unnecessary storibook examples
ciampo Jan 12, 2023
9186e1e
Rewrite settings (knobs to controls, add subcomponents)
ciampo Jan 12, 2023
b9f89c2
Split each example to its separate story
ciampo Jan 12, 2023
db40165
Remove redundant stories
ciampo Jan 16, 2023
f4dd8ab
Add text+icon example to default story
ciampo Jan 16, 2023
1f246fb
Fix import path
ciampo Jan 16, 2023
9ab59ee
Use template and args syntax
ciampo Jan 16, 2023
7e41bb7
Avoid live demo being cut off in docs view
ciampo Jan 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 75 additions & 72 deletions packages/components/src/toolbar/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,42 @@ import {
link,
more,
paragraph,
arrowUp,
arrowDown,
arrowLeft,
arrowRight,
chevronDown,
} from '@wordpress/icons';

/**
* Internal dependencies
*/
import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarItem } from '..';
import { SVG, Path, DropdownMenu } from '../../..';
import {
Toolbar,
ToolbarButton,
ToolbarGroup,
ToolbarItem,
ToolbarDropdownMenu,
} from '..';
import { SVG, Path, DropdownMenu } from '../../';

export default { title: 'Components/Toolbar', component: Toolbar };
export default {
title: 'Components/Toolbar',
component: Toolbar,
subcomponents: {
ToolbarButton,
ToolbarGroup,
ToolbarItem,
ToolbarDropdownMenu,
},
argTypes: {
children: { control: { type: null } },
},
parameters: {
controls: { expanded: true },
docs: { source: { state: 'open' } },
},
};

function InlineImageIcon() {
return (
Expand All @@ -30,13 +57,20 @@ function InlineImageIcon() {
);
}

/* eslint-disable no-restricted-syntax */
export const _default = () => {
return (
// id is required for server side rendering
<Toolbar label="Options" id="options-toolbar">
const Template = ( props ) => (
<div style={ { height: 280 } }>
<Toolbar { ...props } />
</div>
);

export const Default = Template.bind( {} );
Default.args = {
label: 'Options',
id: 'options-toolbar',
children: (
<>
<ToolbarGroup>
<ToolbarButton icon={ paragraph } label="Paragraph" />
<ToolbarButton icon={ paragraph } text="Paragraph" />
</ToolbarGroup>
<ToolbarGroup>
<ToolbarItem>
Expand Down Expand Up @@ -98,72 +132,41 @@ export const _default = () => {
{ icon: alignRight, title: 'Align right' },
] }
/>
</Toolbar>
);
<ToolbarDropdownMenu
icon={ chevronDown }
label="Select a direction"
controls={ [
{
title: 'Up',
icon: arrowUp,
},
{
title: 'Right',
icon: arrowRight,
},
{
title: 'Down',
icon: arrowDown,
},
{
title: 'Left',
icon: arrowLeft,
},
] }
/>
</>
),
};

export const withoutGroup = () => {
return (
// id is required for server side rendering
<Toolbar label="Options" id="options-toolbar-without-group">
export const WithoutGroup = Template.bind( {} );
WithoutGroup.args = {
label: 'Options',
id: 'options-toolbar-without-group',
children: (
<>
<ToolbarButton icon={ formatBold } label="Bold" isPressed />
<ToolbarButton icon={ formatItalic } label="Italic" />
<ToolbarButton icon={ link } label="Link" />
</Toolbar>
);
};
/* eslint-enable no-restricted-syntax */

export const toolbars = () => {
return (
<div>
<div style={ { padding: '20px' } }>
<h2>Icon-only Toolbar</h2>
<Toolbar>
<ToolbarButton icon={ formatBold } title="Bold" />
<ToolbarButton
icon={ formatItalic }
title="Italic"
isActive
/>
<ToolbarButton icon={ link } title="Link" />
</Toolbar>
</div>

<div style={ { padding: '20px' } }>
<h2>Text-only Toolbar</h2>
<Toolbar>
<ToolbarButton>Bold Format</ToolbarButton>
<ToolbarButton isActive>Italic Format</ToolbarButton>
<ToolbarButton>Link Format</ToolbarButton>
</Toolbar>
</div>

<div style={ { padding: '20px' } }>
<h2>Text and Icon Toolbar</h2>
<Toolbar>
<ToolbarButton icon={ formatBold } title="Bold" />
<ToolbarButton isActive>Bold Format</ToolbarButton>
<ToolbarButton icon={ formatItalic } title="Italic" />
<ToolbarButton>Italic Format</ToolbarButton>
<ToolbarButton icon={ link } title="Link" />
<ToolbarButton>Link Format</ToolbarButton>
</Toolbar>
</div>

<div style={ { padding: '20px' } }>
<h2>Single Icon Button Toolbar</h2>
<Toolbar>
<ToolbarButton icon={ formatBold } title="Bold" />
</Toolbar>
</div>

<div style={ { padding: '20px' } }>
<h2>Single Text Button toolbar</h2>
<Toolbar>
<ToolbarButton>Bold Toolbar</ToolbarButton>
</Toolbar>
</div>
</div>
);
</>
),
};
32 changes: 0 additions & 32 deletions packages/components/src/toolbar/stories/toolbar-button.js
View file
Open in desktop

This file was deleted.

33 changes: 0 additions & 33 deletions packages/components/src/toolbar/stories/toolbar-group.js
View file
Open in desktop

This file was deleted.