diff --git a/.github/workflows/percy.yml b/.github/workflows/percy.yml index 62525a59..48668060 100644 --- a/.github/workflows/percy.yml +++ b/.github/workflows/percy.yml @@ -25,8 +25,7 @@ jobs: run: | npm ci - name: Percy Test - uses: percy/storybook-action@v0.1.6 - with: - percy-flags: "--widths=1080" + run: | + npm run percy:storybook env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} diff --git a/.gitignore b/.gitignore index a84985d3..0aff5327 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,5 @@ yarn-error.log* # interplay /interplay/*/ + +.build_storybook diff --git a/.storybook/main.js b/.storybook/main.js index 12892154..6fb9cb15 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,14 +1,21 @@ module.exports = { - stories: ["../lib/**/*.stories.@(mdx|js)"], + stories: ["../lib/**/*.@(mdx|stories.@(js))"], addons: [ - "@storybook/addon-docs/", - "@storybook/addon-actions/register", - "@storybook/addon-links/", - "@storybook/addon-viewport/", - "@storybook/addon-knobs/", - "@storybook/addon-a11y/", + "@storybook/addon-docs", + "@storybook/addon-links", + "@storybook/addon-viewport", + "@storybook/addon-knobs", + "@storybook/addon-a11y", "@storybook/addon-toolbars", "@storybook/components", - "@storybook/api" - ] + "@storybook/api", + "@storybook/addon-mdx-gfm" + ], + framework: { + name: "@storybook/react-webpack5", + options: {} + }, + docs: { + autodocs: "docs" + } }; diff --git a/.storybook/preview.js b/.storybook/preview.js index ff26574c..fa321940 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,17 +1,13 @@ import React from "react"; -import { addDecorator, addParameters } from "@storybook/react"; -import { - DocsPage, - DocsContainer as BaseContainer -} from "@storybook/addon-docs/blocks"; +import { DocsPage, DocsContainer as BaseContainer } from "@storybook/blocks"; import { library } from "@fortawesome/fontawesome-svg-core"; import { far } from "@fortawesome/free-regular-svg-icons"; import { fas } from "@fortawesome/free-solid-svg-icons"; -import { withA11y } from "@storybook/addon-a11y"; import { default as GlobalStyles } from "../lib/GlobalStyles"; import { default as systemtheme } from "../lib/systemtheme"; import { default as systemThemeCollapsed } from "../lib/systemThemeCollapsed"; import styled, { ThemeProvider } from "styled-components"; +import { get } from "lodash"; library.add(far, fas); @@ -27,16 +23,19 @@ const FlexItem = styled.div` margin: 0 10px; `; +const getThemeName = (context) => + get(context, "parameters.theme") || get(context, "globals.theme"); + const getTheme = (context) => { - const theme = context.parameters.theme || context.globals.theme; - return theme === "default" ? systemtheme : systemThemeCollapsed; + const themeName = getThemeName(context); + return themeName === "default" ? systemtheme : systemThemeCollapsed; }; const ThemeDecorator = (storyFn, context) => { - const theme = context.parameters.theme || context.globals.theme; + const themeName = getThemeName(context); const storyTheme = getTheme(context); - switch (theme) { + switch (themeName) { case "side-by-side": return ( @@ -98,10 +97,8 @@ export const DocsContainer = ({ children, context }) => { ); }; -addDecorator(withA11y); -addDecorator(ThemeDecorator); - -addParameters({ +export const decorators = [ThemeDecorator]; +export const parameters = { options: { showRoots: true }, @@ -109,5 +106,6 @@ addParameters({ container: DocsContainer, page: DocsPage }, + a11y: { disable: false }, viewMode: "docs" -}); +}; diff --git a/lib/01-Intro.stories.mdx b/lib/01-Intro.stories.mdx index 444a48d2..798cc16a 100644 --- a/lib/01-Intro.stories.mdx +++ b/lib/01-Intro.stories.mdx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/addon-docs/blocks"; +import { Meta } from "@storybook/addon-docs"; @@ -187,6 +187,7 @@ Playroom allows you to simultaneously design across a variety of themes and scre Playroom allows you to create a zero-install code-oriented design environment, built into a standalone bundle that can be deployed alongside your existing design system documentation. To run playroom, use this command: `npm run playroom` + ## Browser/device support This design system is intended to work correctly on all modern desktop and mobile browsers. @@ -194,4 +195,3 @@ This design system is intended to work correctly on all modern desktop and mobil --- > "A design system is a living, funded product with a roadmap and backlog, serving an ecosystem." — Nathan Curtis - diff --git a/lib/Colour.stories.mdx b/lib/Colour.stories.mdx index 5375a0d2..cbbdcb1d 100644 --- a/lib/Colour.stories.mdx +++ b/lib/Colour.stories.mdx @@ -3,8 +3,8 @@ import { ColorPalette, ColorItem, Story, - Preview -} from "@storybook/addon-docs/blocks"; + Canvas +} from "@storybook/addon-docs"; import { colors } from "./systemtheme"; import Flex from "./components/Flex"; import Colour from "./assets/Colour"; @@ -18,7 +18,7 @@ These are the colours used throughout the design system, defined in `systemtheme ## Main palette - + - + ## Monochrome opacities @@ -109,7 +109,7 @@ For black and white colours at different opacities, use the following scales. ### Black opacity scale - + @@ -122,11 +122,11 @@ For black and white colours at different opacities, use the following scales. - + ### White opacity scale - + @@ -141,13 +141,13 @@ For black and white colours at different opacities, use the following scales. - + ## Coloured opacities ### Primary opacity scale - + @@ -160,11 +160,11 @@ For black and white colours at different opacities, use the following scales. - + ### Secondary opacity scale - + @@ -177,11 +177,11 @@ For black and white colours at different opacities, use the following scales. - + ### Success opacity scale - + @@ -194,11 +194,11 @@ For black and white colours at different opacities, use the following scales. - + ### Warning opacity scale - + @@ -211,11 +211,11 @@ For black and white colours at different opacities, use the following scales. - + ### Danger opacity scale - + @@ -228,4 +228,4 @@ For black and white colours at different opacities, use the following scales. - + diff --git a/lib/Spacing.stories.mdx b/lib/Spacing.stories.mdx index 32b7d4cc..23f08cee 100644 --- a/lib/Spacing.stories.mdx +++ b/lib/Spacing.stories.mdx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/addon-docs/blocks"; +import { Meta } from "@storybook/addon-docs"; diff --git a/lib/components.test.js b/lib/components.test.js index 06615f5c..5db0f7bb 100644 --- a/lib/components.test.js +++ b/lib/components.test.js @@ -1,70 +1,72 @@ import * as components from "."; test("all components exported", () => { - expect(Object.keys(components)).toEqual([ - "systemtheme", - "systemThemeCollapsed", - "GlobalStyles", - "SystemThemeProvider", - "ActionsMenu", - "ActionsMenuBody", - "ActionsMenuHeading", - "ActionsMenuItem", - "Avatar", - "Badge", - "Box", - "Button", - "ButtonGroupContainer", - "ButtonGroupItem", - "Card", - "Checkbox", - "DatePicker", - "Divider", - "Expandable", - "Flex", - "FlexItem", - "Grid", - "GridItem", - "Header", - "HeaderSimple", - "Icon", - "Loading", - "Modal", - "Notification", - "Popover", - "ProgressBar", - "RadioButton", - "Range", - "Select", - "Sidebar", - "SidebarTabs", - "SidebarTab", - "SidebarPanels", - "SidebarPanel", - "SidebarClose", - "SideNav", - "Spacer", - "StatusDot", - "StyledLink", - "styleLink", - "Tab", - "TabsContainer", - "Tag", - "TextInput", - "TextArea", - "Toggle", - "Typography", - "H1", - "H2", - "H3", - "H4", - "H5", - "H6", - "P", - "Text", - "Small", - "Quote", - "Code", - "getOptionByValue" - ]); + expect(Object.keys(components)).toMatchInlineSnapshot(` + Array [ + "ActionsMenu", + "ActionsMenuBody", + "ActionsMenuHeading", + "ActionsMenuItem", + "Avatar", + "Badge", + "Box", + "Button", + "ButtonGroupContainer", + "ButtonGroupItem", + "Card", + "Checkbox", + "Code", + "DatePicker", + "Divider", + "Expandable", + "Flex", + "FlexItem", + "GlobalStyles", + "Grid", + "GridItem", + "H1", + "H2", + "H3", + "H4", + "H5", + "H6", + "Header", + "HeaderSimple", + "Icon", + "Loading", + "Modal", + "Notification", + "P", + "Popover", + "ProgressBar", + "Quote", + "RadioButton", + "Range", + "Select", + "SideNav", + "Sidebar", + "SidebarClose", + "SidebarPanel", + "SidebarPanels", + "SidebarTab", + "SidebarTabs", + "Small", + "Spacer", + "StatusDot", + "StyledLink", + "SystemThemeProvider", + "Tab", + "TabsContainer", + "Tag", + "Text", + "TextArea", + "TextInput", + "Toggle", + "Typography", + "getOptionByValue", + "styleLink", + "systemThemeCollapsed", + "systemtheme", + ] + `); }); diff --git a/lib/components/ActionsMenu/ActionsMenu.mdx b/lib/components/ActionsMenu/ActionsMenu.mdx index 74f9f94a..9a82a6fb 100644 --- a/lib/components/ActionsMenu/ActionsMenu.mdx +++ b/lib/components/ActionsMenu/ActionsMenu.mdx @@ -1,5 +1,8 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Controls, Meta, Canvas } from "@storybook/addon-docs"; import ActionsMenu from "."; +import * as stories from "./ActionsMenu.stories"; + + # Actions Menu @@ -11,15 +14,15 @@ The child components `ActionsMenuItem` are rendered either as a react router lin ## Default Actions Menu - + - + ## Left offset Actions Menu - + - + ## Advanced Actions Menu @@ -31,34 +34,34 @@ You can control the closing behaviour of the menu by disabling default close usi This component is also flexible in that you can put whatever other content you would like in here, and write custom functionality for it (to see example of this, click 'Other' in example below). - + - + ## Custom Actions Menu If you would like to enhance the ActionsMenu without default behaviours, you can use `` by passing in `toggleState` and `onToggle` props. - + - + ## Text Button Actions Menu An example of using ActionsMenu paired with a text button trigger. - + - + ## Keep Actions Menu In View Keeps the Actions Menu in view by changing the direction if it naturally falls out of view. - + - + ## Properties - + diff --git a/lib/components/ActionsMenu/ActionsMenu.stories.js b/lib/components/ActionsMenu/ActionsMenu.stories.js index 3b2fb0d0..474e3785 100644 --- a/lib/components/ActionsMenu/ActionsMenu.stories.js +++ b/lib/components/ActionsMenu/ActionsMenu.stories.js @@ -14,14 +14,10 @@ import Icon from "../Icon"; import Box from "../Box"; import Button from "../Button"; import TextArea from "../TextArea"; -import mdx from "./ActionsMenu.mdx"; export default { title: "Components/ActionsMenu", decorators: [(storyFn) => {storyFn()}], - parameters: { - docs: { page: mdx } - }, component: ActionsMenu }; diff --git a/lib/components/Avatar/Avatar.mdx b/lib/components/Avatar/Avatar.mdx index c8c121b5..3f30740a 100644 --- a/lib/components/Avatar/Avatar.mdx +++ b/lib/components/Avatar/Avatar.mdx @@ -1,5 +1,8 @@ import Avatar from "."; -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Controls, Meta, Canvas } from "@storybook/addon-docs"; +import * as stories from "./Avatar.stories"; + + # Avatar @@ -21,89 +24,89 @@ Follow example code below to achieve desired option. ## Default avatar - + - + ## No image source In cases where an image is not available, fall back is to show initials. - + - + ## Image only In cases title and subtitle are not provided, show image only. - + - + ## Icon only In cases where neither an image or initials are available, fall back is to show icon. - + - + ## Name as link This component can support a link for the name. - + - + ## Small size - + - + ## Large size - + - + ## Title Level This component supports defining the heading level of the title. Options are H1, H2, H3 (default), H4, H5, H6. - + - + ## Custom subtitle content - + - + ## With local time - + - + ## Inverted For when Avatar is used on a dark background. - + - + ## Alternate Shapes Use a different shape when you would like to distinguish between an avatar for a person, and an avatar for another construct, like a team or tag. - + - + ## Properties @@ -111,8 +114,8 @@ You can use two custom props: `sizing` and `type`. ### For reference, see: -- [systemtheme.js](https://github.com/orchestrated-io/orca-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) (our arrays for design system values) +- [systemtheme.js](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) (our arrays for design system values) By default, we've set certain values on `Avatar` properties as documented in the table below. If these properties are not specified they will take on the default values. - + diff --git a/lib/components/Avatar/Avatar.stories.js b/lib/components/Avatar/Avatar.stories.js index 80de16da..8b40ad00 100644 --- a/lib/components/Avatar/Avatar.stories.js +++ b/lib/components/Avatar/Avatar.stories.js @@ -5,15 +5,9 @@ import Box from "../Box"; import Spacer from "../Spacer"; import StyledLink from "../StyledLink"; import Avatar from "."; -import mdx from "./Avatar.mdx"; export default { title: "Components/Avatar", - parameters: { - docs: { - page: mdx - } - }, component: Avatar }; diff --git a/lib/components/Badge/Badge.mdx b/lib/components/Badge/Badge.mdx index d7b9f626..4eceba3a 100644 --- a/lib/components/Badge/Badge.mdx +++ b/lib/components/Badge/Badge.mdx @@ -1,5 +1,8 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Controls, Meta, Canvas } from "@storybook/addon-docs"; import Badge from "."; +import * as stories from "./Badge.stories"; + + # Badge @@ -11,18 +14,18 @@ Without specifying a variant colour, the default badge will just take a grey col ## Default Badge - + - + ## Colour variants The variants can be used on light or dark backgrounds - + - + ## Properties - + diff --git a/lib/components/Badge/Badge.stories.js b/lib/components/Badge/Badge.stories.js index 7e996851..9eca1209 100644 --- a/lib/components/Badge/Badge.stories.js +++ b/lib/components/Badge/Badge.stories.js @@ -3,13 +3,9 @@ import Box from "../Box"; import Spacer from "../Spacer"; import Flex from "../Flex"; import Badge from "."; -import mdx from "./Badge.mdx"; export default { title: "Components/Badge", - parameters: { - docs: { page: mdx } - }, component: Badge }; diff --git a/lib/components/Box/Box.mdx b/lib/components/Box/Box.mdx index 2d1ffcc3..adad2369 100644 --- a/lib/components/Box/Box.mdx +++ b/lib/components/Box/Box.mdx @@ -1,5 +1,8 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Meta, Controls, Canvas } from "@storybook/addon-docs"; import { Box } from "../Box"; +import * as stories from "./Box.stories"; + + # Box @@ -9,39 +12,39 @@ Component to contain elements within a simple box. If your `Box` needs to contai ## Default - + - + ## Border - + - + ## Shadow - + - + ## Background colour - + - + ## Padding - + - + ## Border Radius - + - + ## Properties @@ -53,11 +56,11 @@ You can use `space`, `layout`, `border`, and `color` properties with `Box`. - [layout on Styled-System](https://styled-system.com/table#layout) - [border on Styled-System](https://styled-system.com/table#border) - [color on Styled-System](https://styled-system.com/table#color) -- [systemtheme.js](https://github.com/orchestrated-io/orca-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) (our arrays and scales for design system values) +- [systemtheme.js](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) (our arrays and scales for design system values) By default, we've set certain values on `Box` properties as documented in the table below. - + **Note:** If specific `margin` or `padding` properties fail to override the defaults, specify the overall property and then the specific property. For example, to set a `Box` with a `margin-bottom: 8px`, use diff --git a/lib/components/Box/Box.stories.js b/lib/components/Box/Box.stories.js index 50413a0c..859b5fde 100644 --- a/lib/components/Box/Box.stories.js +++ b/lib/components/Box/Box.stories.js @@ -1,15 +1,9 @@ import React from "react"; import Box from "../Box"; import { P } from "../Typography"; -import mdx from "./Box.mdx"; export default { title: "Components/Box", - parameters: { - docs: { - page: mdx - } - }, component: Box }; @@ -64,8 +58,8 @@ padding.story = { export const borderRadius = () => (

- This is a bordered Box variant with rounded corners.{" "} - borderRadius is taken from the radii array in{" "} + This is a bordered Box variant with rounded corners. + borderRadius is taken from the radii array in systemtheme.js.

diff --git a/lib/components/Button/Button.mdx b/lib/components/Button/Button.mdx index ccadc530..6b9e164a 100644 --- a/lib/components/Button/Button.mdx +++ b/lib/components/Button/Button.mdx @@ -1,7 +1,10 @@ import Button from "."; import Icon from "../Icon"; import Spacer from "../Spacer"; -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Controls, Meta, Canvas } from "@storybook/addon-docs"; +import * as stories from "./Button.stories"; + + # Button @@ -21,58 +24,58 @@ Make use of icons when they help enhance or support the text or aesthetic of the ## Default button - + - + ## Alternate sizes - + - + ## Alternate colours - + - + ## Ghost style - + - + ## Full width - + - + ## Disabled state - + - + ## Loading state - + - + ## With icon - + - + ## Icon only - + - + ## Properties - + diff --git a/lib/components/Button/Button.stories.js b/lib/components/Button/Button.stories.js index fdc05afc..1d9f19e3 100644 --- a/lib/components/Button/Button.stories.js +++ b/lib/components/Button/Button.stories.js @@ -4,15 +4,9 @@ import Icon from "../Icon"; import Spacer from "../Spacer"; import Flex from "../Flex"; import Button from "."; -import mdx from "./Button.mdx"; export default { title: "Components/Button", - parameters: { - docs: { - page: mdx - } - }, component: Button }; diff --git a/lib/components/ButtonGroup/ButtonGroup.mdx b/lib/components/ButtonGroup/ButtonGroup.mdx index 31f81ec8..27b38549 100644 --- a/lib/components/ButtonGroup/ButtonGroup.mdx +++ b/lib/components/ButtonGroup/ButtonGroup.mdx @@ -1,8 +1,8 @@ -import * as stories from "./ButtonGroup.stories.js"; -import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Meta, Story, Canvas, Controls } from "@storybook/addon-docs"; import { ButtonGroupContainer, ButtonGroupItem } from "."; +import * as stories from "./ButtonGroup.stories"; - + # ButtonGroup @@ -10,15 +10,12 @@ import { ButtonGroupContainer, ButtonGroupItem } from "."; ButtonGroups should be used for switching views. Acts like radio buttons, in that only one can be selected/active. -Use the prop `onChange` on the `ButtonGroupItem` to control behaviour on click of buttons. - ## Default ButtonGroup - + - + ## Properties - - + diff --git a/lib/components/ButtonGroup/ButtonGroup.stories.js b/lib/components/ButtonGroup/ButtonGroup.stories.js index 68cbf9ca..b77e609f 100644 --- a/lib/components/ButtonGroup/ButtonGroup.stories.js +++ b/lib/components/ButtonGroup/ButtonGroup.stories.js @@ -1,13 +1,9 @@ import React from "react"; import Box from "../Box"; import { ButtonGroupContainer, ButtonGroupItem } from "."; -import mdx from "./ButtonGroup.mdx"; export default { title: "Components/ButtonGroup", - parameters: { - docs: { page: mdx } - }, decorators: [ (storyFn) => ( diff --git a/lib/components/ButtonGroup/ButtonGroupIteam.mdx b/lib/components/ButtonGroup/ButtonGroupIteam.mdx new file mode 100644 index 00000000..7ddc3c30 --- /dev/null +++ b/lib/components/ButtonGroup/ButtonGroupIteam.mdx @@ -0,0 +1,21 @@ +import { Meta, Story, Controls, Canvas } from "@storybook/addon-docs"; +import { ButtonGroupContainer, ButtonGroupItem } from "."; +import * as stories from "./ButtonGroup.stories"; + + + +# ButtonGroupItem + +[Default ButtonGroupItem](#default-ButtonGroupItem) | [Properties](#properties) + +Use the prop `onChange` on the `ButtonGroupItem` to control behaviour on click of buttons. + +## Default ButtonGroupItem + + + + + +## Properties + + diff --git a/lib/components/ButtonGroup/ButtonGroupItem.stories.js b/lib/components/ButtonGroup/ButtonGroupItem.stories.js new file mode 100644 index 00000000..3c12d26e --- /dev/null +++ b/lib/components/ButtonGroup/ButtonGroupItem.stories.js @@ -0,0 +1,23 @@ +import React from "react"; +import Box from "../Box"; +import { ButtonGroupItem } from "."; + +export default { + title: "Components/ButtonGroupItem", + decorators: [ + (storyFn) => ( + + {storyFn()} + + ) + ], + component: ButtonGroupItem +}; + +export const defaultButtonGroupItem = () => ( + +); + +defaultButtonGroupItem.story = { + name: "Default button group item" +}; diff --git a/lib/components/Card/Card.mdx b/lib/components/Card/Card.mdx index 2af1f70e..870f42b9 100644 --- a/lib/components/Card/Card.mdx +++ b/lib/components/Card/Card.mdx @@ -1,5 +1,8 @@ import Card from "."; -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Canvas, Controls, Meta } from "@storybook/addon-docs"; +import * as stories from "./Card.stories"; + + # Card @@ -13,34 +16,34 @@ If your UI is split into different areas or sections you can also choose to colo The subtitle is optional. - + - + ## Alternate style Puts subtitle on the right of the card. - + - + ## Colour options Colour options plus a few extra examples of showing change delta. - + - + ## Complex example Example showing how you can use the card in an alternate way. - + - + ## Properties - + diff --git a/lib/components/Card/Card.stories.js b/lib/components/Card/Card.stories.js index 912adaec..25598f36 100644 --- a/lib/components/Card/Card.stories.js +++ b/lib/components/Card/Card.stories.js @@ -6,14 +6,10 @@ import Spacer from "../Spacer"; import Icon from "../Icon"; import Flex from "../Flex"; import Button from "../Button"; -import mdx from "./Card.mdx"; import Card from "."; export default { title: "Components/Card", - parameters: { - docs: { page: mdx } - }, decorators: [ (storyFn) => ( diff --git a/lib/components/Checkbox/Checkbox.mdx b/lib/components/Checkbox/Checkbox.mdx index 5415abe0..7e566379 100644 --- a/lib/components/Checkbox/Checkbox.mdx +++ b/lib/components/Checkbox/Checkbox.mdx @@ -1,5 +1,8 @@ import Checkbox from "."; -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Controls, Meta, Canvas } from "@storybook/addon-docs"; +import * as stories from "./Checkbox.stories"; + + # Checkbox @@ -9,31 +12,33 @@ The default checkbox (or inverted if on dark background) should be used for the ## Basic checkbox - + - + ## Colour variants Different colours for checkbox. - + - + ## Checkbox states - + + + - + ## On dark background - + - + ## Properties - + diff --git a/lib/components/Checkbox/Checkbox.stories.js b/lib/components/Checkbox/Checkbox.stories.js index ecede339..a7ec7294 100644 --- a/lib/components/Checkbox/Checkbox.stories.js +++ b/lib/components/Checkbox/Checkbox.stories.js @@ -2,11 +2,9 @@ import React from "react"; import Checkbox from "."; import Box from "../Box"; import Spacer from "../Spacer"; -import mdx from "./Checkbox.mdx"; export default { title: "Components/Checkbox", - parameters: { docs: { page: mdx } }, component: Checkbox }; diff --git a/lib/components/DatePicker/DatePicker.mdx b/lib/components/DatePicker/DatePicker.mdx index 5d9ce414..a3c50b46 100644 --- a/lib/components/DatePicker/DatePicker.mdx +++ b/lib/components/DatePicker/DatePicker.mdx @@ -1,24 +1,27 @@ import DatePicker from "."; -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Controls, Meta, Canvas } from "@storybook/addon-docs"; +import * as stories from "./DatePicker.stories"; + + # DatePicker [Single date](#single-date) | [Date range](#date-range) | [Properties](#properties) -DatePicker uses Airbnb's [react-dates](https://github.com/airbnb/react-dates) under the hood. This is just a wrapper to override styles, the only props you need to specify is either single or range. For all functionality and additional required props refer to documentation here: +DatePicker uses Airbnb's [react-dates](https://github.com/airbnb/react-dates) under the hood. This is just a wrapper to override styles, the only props you need to specify is either single or range. For all functionality and additional required props refer to documentation here: https://github.com/airbnb/react-dates ## Single date - + - + ## Date range - + - + ## Properties - + diff --git a/lib/components/DatePicker/DatePicker.stories.js b/lib/components/DatePicker/DatePicker.stories.js index ac5b3010..c79ed84d 100644 --- a/lib/components/DatePicker/DatePicker.stories.js +++ b/lib/components/DatePicker/DatePicker.stories.js @@ -1,7 +1,6 @@ import React, { useState } from "react"; import DatePicker from "."; import Box from "../Box"; -import mdx from "./DatePicker.mdx"; import "react-dates/lib/css/_datepicker.css"; import "react-dates/initialize"; @@ -15,7 +14,6 @@ export default { ) ], - parameters: { docs: { page: mdx } }, component: DatePicker }; @@ -70,66 +68,5 @@ const DateRange = () => { }; export const singleDate = () => ; -singleDate.parameters = { - docs: { - source: { - code: `const SingleDate = () => { - const [date, setDate] = useState(null); - const [focused, setFocused] = useState(false); - - const onDateChange = selectedDate => { - setDate(selectedDate); - }; - - const onFocusChange = el => { - setFocused(el.focused); - }; - - return ( - - ); - }; - ` - } - } -}; export const dateRange = () => ; -dateRange.parameters = { - docs: { - source: { - code: `const DateRange = () => { - const [dates, setDates] = useState({}); - const [focused, setFocused] = useState(null); - - const onDatesChange = ({ startDate, endDate }) => { - setDates({ - startDate, - endDate - }); - }; - - return ( - - ); - };` - } - } -}; diff --git a/lib/components/Divider/Divider.mdx b/lib/components/Divider/Divider.mdx index 781a4c16..73870463 100644 --- a/lib/components/Divider/Divider.mdx +++ b/lib/components/Divider/Divider.mdx @@ -1,5 +1,8 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Meta, Canvas, Controls } from "@storybook/addon-docs"; import Divider from "."; +import * as stories from "./Divider.stories"; + + # Divider @@ -13,26 +16,26 @@ As a general rule, the default divider with no props set should be used in most To be used throughout most of the app, in most cases purely the default Divider with no props should be used. - + - + ## Inverted The inverted prop should be used if a divider is required on a dark background. - + - + ## Span grid This prop is to be used when you need to use a divider between rows in a grid, this will allow the divider to span across all columns in the grid. - + - + ## Properties - + diff --git a/lib/components/Divider/Divider.stories.js b/lib/components/Divider/Divider.stories.js index dc4a4f9a..12800a60 100644 --- a/lib/components/Divider/Divider.stories.js +++ b/lib/components/Divider/Divider.stories.js @@ -2,13 +2,9 @@ import React from "react"; import Divider from "."; import Spacer from "../Spacer"; import Box from "../Box"; -import mdx from "./Divider.mdx"; export default { title: "Components/Divider", - parameters: { - docs: { page: mdx } - }, component: Divider }; diff --git a/lib/components/Expandable/Expandable.mdx b/lib/components/Expandable/Expandable.mdx index 9a276983..f1ee4167 100644 --- a/lib/components/Expandable/Expandable.mdx +++ b/lib/components/Expandable/Expandable.mdx @@ -1,5 +1,8 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Meta, Canvas, Controls } from "@storybook/addon-docs"; import Expandable from "."; +import * as stories from "./Expandable.stories"; + + # Expandable @@ -13,34 +16,34 @@ This component supports any child elements, not just text, can be other componen ## Default Expandable - + - + ## Open - + - + ## With subtitle - + - + ## With badge - + - + ## Smaller version - + - + ## Properties - + diff --git a/lib/components/Expandable/Expandable.stories.js b/lib/components/Expandable/Expandable.stories.js index c2f2e886..1214c341 100644 --- a/lib/components/Expandable/Expandable.stories.js +++ b/lib/components/Expandable/Expandable.stories.js @@ -2,13 +2,9 @@ import React from "react"; import Expandable from "."; import Typography from "../Typography"; import Box from "../Box"; -import mdx from "./Expandable.mdx"; export default { title: "Components/Expandable", - parameters: { - docs: { page: mdx } - }, decorators: [(storyFn) => {storyFn()}], component: Expandable }; diff --git a/lib/components/Flex/Flex.mdx b/lib/components/Flex/Flex.mdx index 1eb7545c..f5b8a297 100644 --- a/lib/components/Flex/Flex.mdx +++ b/lib/components/Flex/Flex.mdx @@ -1,7 +1,10 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; -import Flex, { FlexItem } from "."; +import { Story, Meta, Controls, Canvas } from "@storybook/addon-docs"; +import Flex from "."; import Button from "../Button"; import Icon from "../Icon"; +import * as stories from "./Flex.stories"; + + # Flex @@ -9,18 +12,15 @@ import Icon from "../Icon"; `Flex` is a component to layout, align, and arrange items dynamically within a container. This component should be used to display items where a grid structure is not needed, for instance a horizontal menu bar of buttons or links. -To use `FlexItem` to control the spacing between children of `Flex` you must also import it: -`import { FlexItem } from "orca-design-system"`. - Use `Flex` in conjunction with `Spacer` to control the spacing of elements in the dynamic container. - + - + ## Properties -You can use `space`, `layout`, and `flexbox` properties with `Flex` and `FlexItem`. +You can use `space`, `layout`, and `flexbox` properties with `Flex`. ### For reference, see: @@ -28,25 +28,15 @@ You can use `space`, `layout`, and `flexbox` properties with `Flex` and `FlexIte - [layout on Styled-System](https://styled-system.com/table#layout) - [flexbox on Styled-System](https://styled-system.com/table#flexbox) - [CSS Flexbox reference](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) -- [systemtheme.js](https://github.com/orchestrated-io/orca-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) (our arrays for design system values) +- [systemtheme.js](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) (our arrays for design system values) By default, we've set certain values on `Flex` properties as documented in the table below. - - -## Examples - -### Using `FlexItem` - -You don't necessarily need to use `` as the direct child element to `` unless you need to apply specific `flexbox` properties to the item. In most cases, once you set the desired properties on `` it will layout the child elements as intended, whether these be `` or any other component like `` or even standard HTML like a `
` or ``. However, if you want to use the flex-specific CSS properties for items within the container, like `flex` or `align-self`, you will need to use `FlexItem` to apply these properties. - - - - + ## Upgrading -This component is a **breaking change** that replaces the [previous Flex component](https://www.npmjs.com/package/styled-flex-component). Use the following table as a guide to convert from the old properties to new `Flex` properties. Refer to [systemtheme.js](https://github.com/orchestrated-io/orca-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) for values. +This component is a **breaking change** that replaces the [previous Flex component](https://www.npmjs.com/package/styled-flex-component). Use the following table as a guide to convert from the old properties to new `Flex` properties. Refer to [systemtheme.js](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) for values. ### `Flex` properties @@ -76,13 +66,3 @@ This component is a **breaking change** that replaces the [previous Flex compone | `contentEnd` | `alignContent="flex-end"` | | `contentBaseline` | `alignContent="baseline"` | | `contentStretch` | `alignContent="stretch"` | - -### `FlexItem` properties - -| **Old** | **New** | -| ---------- | ---------------- | -| `order` | `order` | -| `basis` | `flexBasis` | -| `grow` | `flexGrow` | -| `shrink` | `flexShrink` | -| `noShrink` | `flexShrink="0"` | diff --git a/lib/components/Flex/Flex.stories.js b/lib/components/Flex/Flex.stories.js index 1109f158..922b53bc 100644 --- a/lib/components/Flex/Flex.stories.js +++ b/lib/components/Flex/Flex.stories.js @@ -1,17 +1,10 @@ import React from "react"; -import Flex, { FlexItem } from "."; +import Flex from "."; import Button from "../Button"; -import Icon from "../Icon"; import Spacer from "../Spacer"; -import mdx from "./Flex.mdx"; export default { title: "Components/Flex", - parameters: { - docs: { - page: mdx - } - }, component: Flex }; @@ -28,23 +21,3 @@ export const basicFlex = () => ( ); basicFlex.storyName = "Basic Flex"; - -export const usingFlexItem = () => ( - - - - - - - - - - - - - - -); diff --git a/lib/components/Flex/FlexItem.mdx b/lib/components/Flex/FlexItem.mdx new file mode 100644 index 00000000..e2f9ae8f --- /dev/null +++ b/lib/components/Flex/FlexItem.mdx @@ -0,0 +1,36 @@ +import { Story, Meta, Canvas, Controls } from "@storybook/addon-docs"; +import { FlexItem } from "."; +import Button from "../Button"; +import Icon from "../Icon"; +import * as stories from "./FlexItem.stories"; + + + +# FlexItem + +[Properties](#properties) | [Examples](#examples) | [Upgrading](#upgrading) + +To use `FlexItem` to control the spacing between children of `Flex` you must also import it: +`import { FlexItem } from "orca-design-system"`. + +### Using `FlexItem` + +You don't necessarily need to use `` as the direct child element to `` unless you need to apply specific `flexbox` properties to the item. In most cases, once you set the desired properties on `` it will layout the child elements as intended, whether these be `` or any other component like `` or even standard HTML like a `
` or ``. However, if you want to use the flex-specific CSS properties for items within the container, like `flex` or `align-self`, you will need to use `FlexItem` to apply these properties. + + + + + +## Upgrading + +This component is a **breaking change** that replaces the [previous Flex component](https://www.npmjs.com/package/styled-flex-component). Use the following table as a guide to convert from the old properties to new `Flex` properties. Refer to [systemtheme.js](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) for values. + +### `FlexItem` properties + +| **Old** | **New** | +| ---------- | ---------------- | +| `order` | `order` | +| `basis` | `flexBasis` | +| `grow` | `flexGrow` | +| `shrink` | `flexShrink` | +| `noShrink` | `flexShrink="0"` | diff --git a/lib/components/Flex/FlexItem.stories.js b/lib/components/Flex/FlexItem.stories.js new file mode 100644 index 00000000..24afab99 --- /dev/null +++ b/lib/components/Flex/FlexItem.stories.js @@ -0,0 +1,20 @@ +import React from "react"; +import { FlexItem } from "."; +import Button from "../Button"; +import Icon from "../Icon"; + +export default { + title: "Components/FlexItem", + component: FlexItem +}; + +export const basicFlexItem = () => ( + + + +); + +basicFlexItem.storyName = "Basic Flex Item"; diff --git a/lib/components/Grid/Grid.mdx b/lib/components/Grid/Grid.mdx index 3e579ea4..f2fc1cdc 100644 --- a/lib/components/Grid/Grid.mdx +++ b/lib/components/Grid/Grid.mdx @@ -1,6 +1,9 @@ -import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Meta, Story, Canvas, Controls } from "@storybook/addon-docs"; import Grid, { GridItem } from "."; import Button from "../Button"; +import * as stories from "./Grid.stories"; + + # Grid @@ -10,9 +13,9 @@ Grid component using the built-in Styled System Grid Layout through its `grid` f Importing `GridItem` is recommended for use with `Grid` to retain sizing for the children; see [example](#without-griditem-vs-with-griditem) below. - + - + ## Properties @@ -25,62 +28,63 @@ This component uses Styled System props. `Grid` uses `space`, `layout`, `color` - [color on Styled-System](https://styled-system.com/table#color) - [grid on Styled-System](https://styled-system.com/table#space) - [CSS Grid Properties](https://css-tricks.com/snippets/css/complete-guide-grid) -- [systemtheme.js](https://github.com/orchestrated-io/orca-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) (our arrays and scales for design system values) +- [systemtheme.js](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js) (our arrays and scales for design system values) By default, we've set certain default values on `Grid` as documented in the table below. - + ## Examples ### With Colours - + - + ### Template Columns and Rows - - - + + + ### Width-based Columns and Rows - - - + + + ### Using `GridItem` Using `GridItem` to wrap individual children in the grid ensures that the children retain their original dimensions, as not using `GridItem` allows children to take up the full width of their grid cell. This does not affect the behaviour of text content. #### With `GridItem` -Note that `GridItem` has default `padding="r"` where `r` refers to the **r**egular alias in the [space array scale](https://github.com/orchestrated-io/orca-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js). - - - +Note that `GridItem` has default `padding="r"` where `r` refers to the **r**egular alias in the [space array scale](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js). + + + + - - - + + + #### Without `GridItem` - - - + + + ## Upgrading This component is a **breaking change** from the [previous version](https://www.npmjs.com/package/styled-grid-component) of `Grid`. Use the following table as a guide to convert from `styled-grid-component` properties to `styled-system` props. -| **styled-grid-component** | **styled-system** | -|-----------------------|---------------| -| `width` | `width` | -| `height` | `height` | -| `templateColumns` | `gridTemplateColumns` | -| `templateRows` | `gridTemplateRows` | -| `rowGap` | `gridRowGap` | -| `autoRows` | `gridAutoRows` | +| **styled-grid-component** | **styled-system** | +| ------------------------- | --------------------- | +| `width` | `width` | +| `height` | `height` | +| `templateColumns` | `gridTemplateColumns` | +| `templateRows` | `gridTemplateRows` | +| `rowGap` | `gridRowGap` | +| `autoRows` | `gridAutoRows` | diff --git a/lib/components/Grid/Grid.stories.js b/lib/components/Grid/Grid.stories.js index 86c0e1c0..859aa2ae 100644 --- a/lib/components/Grid/Grid.stories.js +++ b/lib/components/Grid/Grid.stories.js @@ -1,15 +1,9 @@ import React from "react"; import Grid, { GridItem } from "../Grid"; import Button from "../Button"; -import mdx from "./Grid.mdx"; export default { title: "Components/Grid", - parameters: { - docs: { - page: mdx - } - }, component: Grid }; diff --git a/lib/components/Header/Header.mdx b/lib/components/Header/Header.mdx index 6fe89006..fceb9fe9 100644 --- a/lib/components/Header/Header.mdx +++ b/lib/components/Header/Header.mdx @@ -1,5 +1,8 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Meta, Controls, Canvas } from "@storybook/addon-docs"; import Header from "../Header"; +import * as stories from "./Header.stories"; + + # Header @@ -11,28 +14,28 @@ At screen sizes less than 1100px the links are instead moved into a mobile menu ## Default Header - + - + ## Alternative Header with search - + - + ## Header with Search and Links - + - + ## Header with workspace switching - + - + ## Properties - + diff --git a/lib/components/Header/Header.stories.js b/lib/components/Header/Header.stories.js index 1fc0ff9b..37cc3aa0 100644 --- a/lib/components/Header/Header.stories.js +++ b/lib/components/Header/Header.stories.js @@ -5,17 +5,11 @@ import StyledLink from "../StyledLink"; import Icon from "../Icon"; import { Small } from "../Typography"; import TextInput from "../TextInput"; -import mdx from "./Header.mdx"; import Select from "../Select"; import Box from "../Box"; export default { title: "Components/Header", - parameters: { - docs: { - page: mdx - } - }, decorators: [(storyFn) => {storyFn()}], component: Header }; diff --git a/lib/components/Header/index.js b/lib/components/Header/index.js index b4a492f8..81f9d061 100644 --- a/lib/components/Header/index.js +++ b/lib/components/Header/index.js @@ -32,9 +32,10 @@ const Bar = styled("header") py: 0, px: 4, bg: themeGet("colors.black")(props), - "a[class^='StyledLink'], a[class*=' StyledLink'], div[class^='Badge'], div[class*=' Badge']": { - display: ["none", "none", "none", "block", "block"] - } + "a[class^='StyledLink'], a[class*=' StyledLink'], div[class^='Badge'], div[class*=' Badge']": + { + display: ["none", "none", "none", "block", "block"] + } }), variant({ variants: { @@ -362,10 +363,13 @@ const MobileNavToggle = styled("input")((props) => transition: themeGet("transition.transitionDefault")(props) }, "&:checked": { - "~ [class^='Header__MobileNavMenu'], ~ [class*=' Header__MobileNavMenu']": { - transform: - "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")" - }, + "~ [class^='Header__MobileNavMenu'], ~ [class*=' Header__MobileNavMenu']": + { + transform: + "translateX(-" + + themeGet("appScale.mobileNavMenuWidth")(props) + + ")" + }, "~ main": { transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")" diff --git a/lib/components/HeaderSimple/HeaderSimple.mdx b/lib/components/HeaderSimple/HeaderSimple.mdx index a0ff3d51..1fd5afc1 100644 --- a/lib/components/HeaderSimple/HeaderSimple.mdx +++ b/lib/components/HeaderSimple/HeaderSimple.mdx @@ -1,5 +1,8 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Meta, Canvas, Controls } from "@storybook/addon-docs"; import HeaderSimple from "."; +import * as stories from "./HeaderSimple.stories"; + + # Header @@ -7,16 +10,16 @@ Header component for app layout. Supports app name, username and avatar as props ## Default Header - + - + ## Header with search - + - + ## Properties - + diff --git a/lib/components/HeaderSimple/HeaderSimple.stories.js b/lib/components/HeaderSimple/HeaderSimple.stories.js index b844ff85..293d51bd 100644 --- a/lib/components/HeaderSimple/HeaderSimple.stories.js +++ b/lib/components/HeaderSimple/HeaderSimple.stories.js @@ -1,15 +1,9 @@ import React from "react"; import HeaderSimple from "."; import TextInput from "../TextInput"; -import mdx from "./HeaderSimple.mdx"; export default { title: "Components/HeaderSimple", - parameters: { - docs: { - page: mdx - } - }, component: HeaderSimple }; diff --git a/lib/components/Icon/Icon.mdx b/lib/components/Icon/Icon.mdx index f66dcbd7..15188f43 100644 --- a/lib/components/Icon/Icon.mdx +++ b/lib/components/Icon/Icon.mdx @@ -1,5 +1,8 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Controls, Canvas, Meta } from "@storybook/addon-docs"; import Icon from "."; +import * as stories from "./Icon.stories"; + + # Icon @@ -7,50 +10,50 @@ import Icon from "."; Using 3rd party icons from Font Awesome. -For full list of icons see here: . +For full list of icons see here: https://fontawesome.com/icons?d=listing. Some examples of icons with props for size, colour or animation below. For full usage guidelines view the readme at https://github.com/FortAwesome/react-fontawesome#usage Note: There are two different icon set weightings available in the Font Awesome free icons sets. Regular and solid. To use we need to specify which set to use by prefixing icon with either "far" or "fas" as shown in example code below. -To get started you can import the icons into Font Awesome library. Alternatively if you want to use their full icon set you need to purchase a PRO plan from Font awesome, and can install the full pro icon packages in your app. See the readme here for more details on how to use and install PRO: +To get started you can import the icons into Font Awesome library. Alternatively if you want to use their full icon set you need to purchase a PRO plan from Font awesome, and can install the full pro icon packages in your app. See the readme here for more details on how to use and install PRO: https://github.com/orchestrated-io/orcs-design-system ## Default - + - + ## Colours - + - + ## Size - + - + ## Inverted - + - + ## Animated - + - + ## Transforms and rotations - + - + ## Properties - + diff --git a/lib/components/Icon/Icon.stories.js b/lib/components/Icon/Icon.stories.js index 4abab596..fea9dc99 100644 --- a/lib/components/Icon/Icon.stories.js +++ b/lib/components/Icon/Icon.stories.js @@ -3,16 +3,12 @@ import Icon from "."; import { library } from "@fortawesome/fontawesome-svg-core"; import { far } from "@fortawesome/free-regular-svg-icons"; import { fas } from "@fortawesome/free-solid-svg-icons"; -import mdx from "./Icon.mdx"; import Box from "../Box"; import Flex from "../Flex"; library.add(far, fas); export default { title: "Components/Icon", - parameters: { - docs: { page: mdx } - }, decorators: [ (storyFn) => ( diff --git a/lib/components/Icon/index.js b/lib/components/Icon/index.js index 623000de..fec8e828 100644 --- a/lib/components/Icon/index.js +++ b/lib/components/Icon/index.js @@ -14,7 +14,7 @@ import { space, color, typography, compose } from "styled-system"; * * Note: There are two different icon set weightings available in the Font Awesome free icons sets. Regular and solid. To use we need to specify which set to use by prefixing icon with either "far" or "fas" as shown in example code below. * - * To get started you can import the icons into Font Awesome library. Alternatively if you want to use their full icon set you need to purchase a PRO plan from Font awesome, and can install the full pro icon packages in your app. See the readme here for more details on how to use and install PRO: + * To get started you can import the icons into Font Awesome library. Alternatively if you want to use their full icon set you need to purchase a PRO plan from Font awesome, and can install the full pro icon packages in your app. See the readme here for more details on how to use and install PRO: */ const IconStyles = compose(space, color, typography); diff --git a/lib/components/Loading/Loading.mdx b/lib/components/Loading/Loading.mdx index 760f794a..ab28e9c8 100644 --- a/lib/components/Loading/Loading.mdx +++ b/lib/components/Loading/Loading.mdx @@ -1,5 +1,8 @@ -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Meta, Canvas, Controls } from "@storybook/addon-docs"; import Loading from "."; +import * as stories from "./Loading.stories"; + + # Loading @@ -7,34 +10,34 @@ import Loading from "."; ## Default - + - + ## Large - + - + ## Centered - + - + ## Coloured - + - + ## Inverted - + - + ## Properties - + diff --git a/lib/components/Loading/Loading.stories.js b/lib/components/Loading/Loading.stories.js index 24348015..a6f7e282 100644 --- a/lib/components/Loading/Loading.stories.js +++ b/lib/components/Loading/Loading.stories.js @@ -2,13 +2,9 @@ import React from "react"; import Loading from "."; import Spacer from "../Spacer"; import Box from "../Box"; -import mdx from "./Loading.mdx"; export default { title: "Components/Loading", - parameters: { - docs: { page: mdx } - }, decorators: [(storyFn) => {storyFn()}], component: Loading }; diff --git a/lib/components/Modal/Modal.mdx b/lib/components/Modal/Modal.mdx index 5eeebc93..750b0f46 100644 --- a/lib/components/Modal/Modal.mdx +++ b/lib/components/Modal/Modal.mdx @@ -1,5 +1,8 @@ import Modal from "."; -import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Story, Meta, Canvas, Controls } from "@storybook/addon-docs"; +import * as stories from "./Modal.stories"; + + # Modal @@ -15,34 +18,34 @@ For a dialogue pattern of this component that has Confirm and Cancel buttons, se ## Basic modal - + - + ## Advanced modal If required you can specify content for both a header and/or footer for the modal to get the following treatment, where the header and footer is fixed, and the body content scrollable. - + - + ## Basic dialogue modal This basic dialogue pattern should be used when Modal functions as a yes/no, ok/cancel style user interaction. - + - + ## Edit dialogue modal This edit dialogue pattern should be used when Modal functions as a save/cancel, update/cancel style user interaction. - + - + ## Properties - + diff --git a/lib/components/Modal/Modal.stories.js b/lib/components/Modal/Modal.stories.js index d4a62256..cbd8bfba 100644 --- a/lib/components/Modal/Modal.stories.js +++ b/lib/components/Modal/Modal.stories.js @@ -7,15 +7,9 @@ import TextArea from "../TextArea"; import Flex from "../Flex"; import Spacer from "../Spacer"; import Icon from "../Icon"; -import mdx from "./Modal.mdx"; export default { title: "Components/Modal", - parameters: { - docs: { - page: mdx - } - }, component: Modal }; @@ -50,42 +44,6 @@ const Basic = () => { ); }; export const basicModal = () => ; -basicModal.parameters = { - docs: { - source: { - code: `const Basic = () => { - const [visible, setVisible] = useState(false); - const handleOnButtonClick = () => { - setVisible(true); - }; - const handleOnConfirm = () => { - setVisible(false); - }; - const onToggleModal = visible => () => { - setVisible(visible); - }; - - return ( - <> - - - -

Modal Title

-

- Content of the modal. Modal accepts any child components or content. -

- - - - ); - };` - } - } -}; const Advanced = () => { const [visible, setVisible] = useState(false); @@ -153,75 +111,7 @@ const Advanced = () => { ); }; export const advancedModal = () => ; -advancedModal.parameters = { - docs: { - source: { - code: `const Advanced = () => { - const [visible, setVisible] = useState(false); - const handleOnButtonClick = () => { - setVisible(true); - }; - const handleOnConfirm = () => { - setVisible(false); - }; - const onToggleModal = visible => () => { - setVisible(visible); - }; - const modalHeader =

Modal Title

; - const modalFooter = ; - return ( - <> - - - -

- Content of the modal. Modal accepts any child components or content. - This content will be scrollable if it exeeds the height of the - modal. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem - accusantium doloremque laudantium, totam rem aperiam, eaque ipsa - quae ab illo inventore veritatis et quasi architecto beatae vitae - dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit - aspernatur aut odit aut fugit, sed quia consequuntur magni dolores - eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, - qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, - sed quia non numquam eius modi tempora incidunt ut labore et dolore - magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis - nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut - aliquid ex ea commodi consequatur? Quis autem vel eum iure - reprehenderit qui in ea voluptate velit esse quam nihil molestiae - consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla - pariatur? -

- - - - ); - };` - } - } -}; + const BasicDialogue = () => { const [visible, setVisible] = useState(false); const handleOnButtonClick = () => { @@ -268,57 +158,7 @@ const BasicDialogue = () => { ); }; export const basicDialogueModal = () => ; -basicDialogueModal.parameters = { - docs: { - source: { - code: `const BasicDialogue = () => { - const [visible, setVisible] = useState(false); - const handleOnButtonClick = () => { - setVisible(true); - }; - const handleOnConfirm = () => { - setVisible(false); - }; - const onToggleModal = visible => () => { - setVisible(visible); - }; - const modalFooter = ( - - - - - - - ); - return ( - <> - - - -

- This will remove all data from the application. -

-

Do you wish to continue?

- - - - ); - };` - } - } -}; + const EditDialogue = () => { const [visible, setVisible] = useState(false); const handleOnButtonClick = () => { @@ -374,63 +214,3 @@ const EditDialogue = () => { ); }; export const editDialogueModal = () => ; -editDialogueModal.parameters = { - docs: { - source: { - code: `const EditDialogue = () => { - const [visible, setVisible] = useState(false); - const handleOnButtonClick = () => { - setVisible(true); - }; - const handleOnConfirm = () => { - setVisible(false); - }; - const onToggleModal = visible => () => { - setVisible(visible); - }; - const modalHeader =

Modify Details

; - const modalFooter = ( - - - - - - - ); - return ( - <> - - - - -