Add controls to stories
Signed-off-by: Lauren Schaller <lschaller@spotify.com>
This commit is contained in:
Lauren Schaller
committed by
Fredrik Adelöw
Fredrik Adelöw
parent
135d4347f0
commit
57c73a1243
@@ -15,29 +15,51 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Chip from '@material-ui/core/Chip';
|
||||
import AddIcon from '@material-ui/icons/Add';
|
||||
import WarningIcon from '@material-ui/icons/Warning';
|
||||
import EditIcon from '@material-ui/icons/Edit';
|
||||
import Chip, { ChipProps } from '@material-ui/core/Chip';
|
||||
|
||||
const icons = {
|
||||
AddIcon: <AddIcon />,
|
||||
WarningIcon: <WarningIcon />,
|
||||
EditIcon: <EditIcon />,
|
||||
None: null,
|
||||
};
|
||||
|
||||
const defaultArgs = {
|
||||
label: 'Label',
|
||||
size: 'medium',
|
||||
variant: 'default',
|
||||
icon: 'None',
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Data Display/Chip',
|
||||
component: Chip,
|
||||
argTypes: {
|
||||
size: {
|
||||
options: ['small', 'medium'],
|
||||
control: { type: 'select' },
|
||||
},
|
||||
variant: {
|
||||
options: ['default', 'outlined'],
|
||||
control: { type: 'select' },
|
||||
},
|
||||
icon: {
|
||||
options: Object.keys(icons),
|
||||
mapping: icons,
|
||||
control: {
|
||||
type: 'select',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = () => <Chip label="Default" />;
|
||||
export const Default = (args: ChipProps) => <Chip {...args} />;
|
||||
Default.args = defaultArgs;
|
||||
|
||||
export const LargeDeletable = () => (
|
||||
<Chip label="Large deletable" size="medium" onDelete={() => ({})} />
|
||||
export const Deleteable = (args: ChipProps) => (
|
||||
<Chip {...args} onDelete={() => ({})} />
|
||||
);
|
||||
|
||||
export const LargeNotDeletable = () => (
|
||||
<Chip label="Large not deletable" size="medium" />
|
||||
);
|
||||
|
||||
export const SmallDeletable = () => (
|
||||
<Chip label="Small deletable" size="small" onDelete={() => ({})} />
|
||||
);
|
||||
|
||||
export const SmallNotDeletable = () => (
|
||||
<Chip label="Small not deletable" size="small" />
|
||||
);
|
||||
|
||||
export const Outline = () => <Chip label="Outline" variant="outlined" />;
|
||||
Deleteable.args = defaultArgs;
|
||||
|
||||
@@ -21,6 +21,22 @@ import { Header } from './Header';
|
||||
export default {
|
||||
title: 'Layout/Header',
|
||||
component: Header,
|
||||
argTypes: {
|
||||
type: {
|
||||
options: [
|
||||
'home',
|
||||
'tool',
|
||||
'service',
|
||||
'website',
|
||||
'library',
|
||||
'app',
|
||||
'apis',
|
||||
'documentation',
|
||||
'other',
|
||||
],
|
||||
control: { type: 'select' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const labels = (
|
||||
@@ -31,80 +47,21 @@ const labels = (
|
||||
</>
|
||||
);
|
||||
|
||||
export const Home = () => (
|
||||
<Page themeId="home">
|
||||
<Header title="Start/Home Page" type="home">
|
||||
{labels}
|
||||
</Header>
|
||||
</Page>
|
||||
);
|
||||
export const Default = (args: {
|
||||
type: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}) => {
|
||||
const { type } = args;
|
||||
return (
|
||||
<Page themeId={type}>
|
||||
<Header {...args}>{labels}</Header>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export const HomeWithSubtitle = () => (
|
||||
<Header title="Start/Home Page" subtitle="This is a subtitle">
|
||||
{labels}
|
||||
</Header>
|
||||
);
|
||||
|
||||
export const Apis = () => (
|
||||
<Page themeId="apis">
|
||||
<Header title="API catalogue" type="tool">
|
||||
{labels}
|
||||
</Header>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export const Tool = () => (
|
||||
<Page themeId="tool">
|
||||
<Header title="Stand-alone tool" type="tool">
|
||||
{labels}
|
||||
</Header>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export const Service = () => (
|
||||
<Page themeId="service">
|
||||
<Header title="Service component page" type="service">
|
||||
{labels}
|
||||
</Header>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export const Website = () => (
|
||||
<Page themeId="website">
|
||||
<Header title="Website component page" type="website">
|
||||
{labels}
|
||||
</Header>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export const Library = () => (
|
||||
<Page themeId="library">
|
||||
<Header title="Library component page" type="library">
|
||||
{labels}
|
||||
</Header>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export const App = () => (
|
||||
<Page themeId="app">
|
||||
<Header title="App component page" type="app">
|
||||
{labels}
|
||||
</Header>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export const Documentation = () => (
|
||||
<Page themeId="documentation">
|
||||
<Header title="Documentation component page" type="documentation">
|
||||
{labels}
|
||||
</Header>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export const Other = () => (
|
||||
<Page themeId="other">
|
||||
<Header title="Other/generic component page" type="other">
|
||||
{labels}
|
||||
</Header>
|
||||
</Page>
|
||||
);
|
||||
Default.args = {
|
||||
type: 'home',
|
||||
title: 'This is a title',
|
||||
subtitle: 'This is a subtitle',
|
||||
};
|
||||
|
||||
@@ -32,6 +32,7 @@ module.exports = ({ args }) => {
|
||||
return {
|
||||
stories,
|
||||
addons: [
|
||||
'@storybook/addon-controls',
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-links',
|
||||
|
||||
@@ -9,14 +9,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@sucrase/webpack-loader": "^2.0.0",
|
||||
"sucrase": "^3.21.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-hot-loader": "^4.13.0",
|
||||
"react-dom": "^17.0.2"
|
||||
"sucrase": "^3.21.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "^6.4.21",
|
||||
"@storybook/addon-actions": "^6.4.21",
|
||||
"@storybook/addon-controls": "^6.4.22",
|
||||
"@storybook/addon-links": "^6.4.21",
|
||||
"@storybook/addon-storysource": "^6.4.21",
|
||||
"@storybook/addons": "^6.4.21",
|
||||
@@ -24,9 +25,9 @@
|
||||
"storybook-dark-mode": "^1.0.9"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@backstage/theme": "link:../packages/theme",
|
||||
"@backstage/test-utils": "link:../packages/test-utils",
|
||||
"@backstage/core-app-api": "link:../packages/core-app-api",
|
||||
"@backstage/core-plugin-api": "link:../packages/core-plugin-api"
|
||||
"@backstage/core-plugin-api": "link:../packages/core-plugin-api",
|
||||
"@backstage/test-utils": "link:../packages/test-utils",
|
||||
"@backstage/theme": "link:../packages/theme"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1381,6 +1381,24 @@
|
||||
util-deprecate "^1.0.2"
|
||||
uuid-browser "^3.1.0"
|
||||
|
||||
"@storybook/addon-controls@^6.4.22":
|
||||
version "6.4.22"
|
||||
resolved "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.4.22.tgz#42c7f426eb7ba6d335e8e14369d6d13401878665"
|
||||
integrity sha512-f/M/W+7UTEUnr/L6scBMvksq+ZA8GTfh3bomE5FtWyOyaFppq9k8daKAvdYNlzXAOrUUsoZVJDgpb20Z2VBiSQ==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.22"
|
||||
"@storybook/api" "6.4.22"
|
||||
"@storybook/client-logger" "6.4.22"
|
||||
"@storybook/components" "6.4.22"
|
||||
"@storybook/core-common" "6.4.22"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/node-logger" "6.4.22"
|
||||
"@storybook/store" "6.4.22"
|
||||
"@storybook/theming" "6.4.22"
|
||||
core-js "^3.8.2"
|
||||
lodash "^4.17.21"
|
||||
ts-dedent "^2.0.0"
|
||||
|
||||
"@storybook/addon-links@^6.4.21":
|
||||
version "6.4.22"
|
||||
resolved "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.4.22.tgz#c0ed9e9ef6505cf1562e1476bbc5064c82dadbe2"
|
||||
|
||||
Reference in New Issue
Block a user