diff --git a/website/.storybook/main.js b/website/.storybook/main.js new file mode 100644 index 0000000000..c96c218255 --- /dev/null +++ b/website/.storybook/main.js @@ -0,0 +1,12 @@ +module.exports = { + "stories": [ + "../src/**/*.stories.mdx", + "../src/**/*.stories.@(js|jsx|ts|tsx)" + ], + "addons": [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions" + ], + "framework": "@storybook/react" +} \ No newline at end of file diff --git a/website/.storybook/preview.js b/website/.storybook/preview.js new file mode 100644 index 0000000000..798e1cd558 --- /dev/null +++ b/website/.storybook/preview.js @@ -0,0 +1,11 @@ +import '../src/css/custom.css'; + +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +}; diff --git a/website/package.json b/website/package.json index a67a482584..b984119878 100644 --- a/website/package.json +++ b/website/package.json @@ -11,7 +11,9 @@ "clear": "docusaurus clear", "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", - "write-heading-ids": "docusaurus write-heading-ids" + "write-heading-ids": "docusaurus write-heading-ids", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" }, "dependencies": { "@docusaurus/core": "2.0.0-beta.15", @@ -47,5 +49,15 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@babel/core": "^7.17.4", + "@storybook/addon-actions": "^6.4.19", + "@storybook/addon-essentials": "^6.4.19", + "@storybook/addon-interactions": "^6.4.19", + "@storybook/addon-links": "^6.4.19", + "@storybook/react": "^6.4.19", + "@storybook/testing-library": "^0.0.9", + "babel-loader": "^8.2.3" } } diff --git a/website/src/stories/Button.jsx b/website/src/stories/Button.jsx new file mode 100644 index 0000000000..15dde39209 --- /dev/null +++ b/website/src/stories/Button.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './button.css'; + +/** + * Primary UI component for user interaction + */ +export const Button = ({ primary, backgroundColor, size, label, ...props }) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + return ( + + ); +}; + +Button.propTypes = { + /** + * Is this the principal call to action on the page? + */ + primary: PropTypes.bool, + /** + * What background color to use + */ + backgroundColor: PropTypes.string, + /** + * How large should the button be? + */ + size: PropTypes.oneOf(['small', 'medium', 'large']), + /** + * Button contents + */ + label: PropTypes.string.isRequired, + /** + * Optional click handler + */ + onClick: PropTypes.func, +}; + +Button.defaultProps = { + backgroundColor: null, + primary: false, + size: 'medium', + onClick: undefined, +}; diff --git a/website/src/stories/Button.stories.jsx b/website/src/stories/Button.stories.jsx new file mode 100644 index 0000000000..61f6e19e14 --- /dev/null +++ b/website/src/stories/Button.stories.jsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import { Button } from './Button'; + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Example/Button', + component: Button, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Template = (args) =>