From 57c73a124319e651350692101799c9fc30f4f46b Mon Sep 17 00:00:00 2001 From: Lauren Schaller Date: Wed, 4 May 2022 14:54:28 -0400 Subject: [PATCH] Add controls to stories Signed-off-by: Lauren Schaller --- .../src/components/Chip/Chip.stories.tsx | 58 +++++++--- .../src/layout/Header/Header.stories.tsx | 109 ++++++------------ storybook/.storybook/main.js | 1 + storybook/package.json | 11 +- storybook/yarn.lock | 18 +++ 5 files changed, 98 insertions(+), 99 deletions(-) diff --git a/packages/core-components/src/components/Chip/Chip.stories.tsx b/packages/core-components/src/components/Chip/Chip.stories.tsx index f5cdfd3f16..5e00779209 100644 --- a/packages/core-components/src/components/Chip/Chip.stories.tsx +++ b/packages/core-components/src/components/Chip/Chip.stories.tsx @@ -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: , + WarningIcon: , + 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 = () => ; +export const Default = (args: ChipProps) => ; +Default.args = defaultArgs; -export const LargeDeletable = () => ( - ({})} /> +export const Deleteable = (args: ChipProps) => ( + ({})} /> ); - -export const LargeNotDeletable = () => ( - -); - -export const SmallDeletable = () => ( - ({})} /> -); - -export const SmallNotDeletable = () => ( - -); - -export const Outline = () => ; +Deleteable.args = defaultArgs; diff --git a/packages/core-components/src/layout/Header/Header.stories.tsx b/packages/core-components/src/layout/Header/Header.stories.tsx index 9fee6313e9..19871dfc75 100644 --- a/packages/core-components/src/layout/Header/Header.stories.tsx +++ b/packages/core-components/src/layout/Header/Header.stories.tsx @@ -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 = () => ( - -
- {labels} -
- -); +export const Default = (args: { + type: string; + title: string; + subtitle: string; +}) => { + const { type } = args; + return ( + +
{labels}
+ + ); +}; -export const HomeWithSubtitle = () => ( -
- {labels} -
-); - -export const Apis = () => ( - -
- {labels} -
- -); - -export const Tool = () => ( - -
- {labels} -
- -); - -export const Service = () => ( - -
- {labels} -
- -); - -export const Website = () => ( - -
- {labels} -
- -); - -export const Library = () => ( - -
- {labels} -
- -); - -export const App = () => ( - -
- {labels} -
- -); - -export const Documentation = () => ( - -
- {labels} -
- -); - -export const Other = () => ( - -
- {labels} -
- -); +Default.args = { + type: 'home', + title: 'This is a title', + subtitle: 'This is a subtitle', +}; diff --git a/storybook/.storybook/main.js b/storybook/.storybook/main.js index 8ed4949cf3..f493bd2de6 100644 --- a/storybook/.storybook/main.js +++ b/storybook/.storybook/main.js @@ -32,6 +32,7 @@ module.exports = ({ args }) => { return { stories, addons: [ + '@storybook/addon-controls', '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-links', diff --git a/storybook/package.json b/storybook/package.json index 9a9c7d4a8c..eafe73a991 100644 --- a/storybook/package.json +++ b/storybook/package.json @@ -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" } } diff --git a/storybook/yarn.lock b/storybook/yarn.lock index 4660d682bc..8c6380c291 100644 --- a/storybook/yarn.lock +++ b/storybook/yarn.lock @@ -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"