From 0a76dd61e560c4654958bea6a30800720458e1e9 Mon Sep 17 00:00:00 2001 From: Karan Mehta <95593651+KaranAtTeamForm@users.noreply.github.com> Date: Fri, 14 Jun 2024 14:15:05 +1000 Subject: [PATCH] Upgrade to storybook 8 (#293) * Upgrade to storybook 8 * Upgrade to storybook 8 * Upgrade to storybook 8 * fix failing build * patch version --- .babelrc | 35 +- .github/workflows/chromatic.yml | 2 +- .github/workflows/ci.yml | 2 +- .github/workflows/pr.yml | 2 +- .storybook/main.js | 23 +- .storybook/preview.js | 74 +- lib/{01-Intro.stories.mdx => 01-Intro.mdx} | 10 +- lib/Colour.mdx | 137 + lib/Colour.stories.mdx | 231 - lib/Spacing.mdx | 33 + lib/Spacing.stories.mdx | 27 - lib/assets/Colour/Colour.stories.js | 122 + lib/components/ActionsMenu/ActionsMenu.mdx | 24 +- lib/components/Avatar/Avatar.mdx | 48 +- lib/components/Badge/Badge.mdx | 8 +- lib/components/Box/Box.mdx | 24 +- lib/components/Button/Button.mdx | 36 +- lib/components/ButtonGroup/ButtonGroup.mdx | 8 +- .../ButtonGroup/ButtonGroupIteam.mdx | 6 +- lib/components/Card/Card.mdx | 16 +- lib/components/Checkbox/Checkbox.mdx | 20 +- lib/components/DatePicker/DatePicker.mdx | 16 +- lib/components/Divider/Divider.mdx | 16 +- lib/components/Expandable/Expandable.mdx | 20 +- lib/components/Flex/Flex.mdx | 4 +- lib/components/Flex/FlexItem.mdx | 4 +- lib/components/Grid/Grid.mdx | 28 +- lib/components/Header/Header.mdx | 16 +- lib/components/HeaderSimple/HeaderSimple.mdx | 8 +- lib/components/Icon/Icon.mdx | 24 +- lib/components/Loading/Loading.mdx | 20 +- lib/components/Modal/Modal.mdx | 16 +- lib/components/Notification/Notification.mdx | 28 +- lib/components/Popover/Popover.mdx | 32 +- lib/components/ProgressBar/ProgressBar.mdx | 12 +- lib/components/RadioButton/RadioButton.mdx | 20 +- lib/components/Range/Range.mdx | 8 +- lib/components/Select/Select.mdx | 52 +- lib/components/SideNav/SideNav.mdx | 4 +- lib/components/Sidebar/Sidebar.mdx | 4 +- lib/components/Spacer/Spacer.mdx | 8 +- lib/components/StatusDot/StatusDot.mdx | 12 +- lib/components/StyledLink/StyledLink.mdx | 24 +- lib/components/Tabs/Tab.mdx | 12 +- lib/components/Tabs/TabsContainer.mdx | 4 +- lib/components/Tag/Tag.mdx | 52 +- lib/components/TextArea/TextArea.mdx | 32 +- lib/components/TextArea/TextArea.stories.js | 16 +- lib/components/TextInput/TextInput.mdx | 20 +- lib/components/Toggle/Toggle.mdx | 16 +- lib/components/TreeNav/TreeNav.mdx | 4 +- lib/components/Typography/Typography.mdx | 80 + .../Typography/Typography.stories.js | 138 + .../Typography/Typography.stories.mdx | 180 - package-lock.json | 7463 +++++++++-------- package.json | 67 +- 56 files changed, 4617 insertions(+), 4731 deletions(-) rename lib/{01-Intro.stories.mdx => 01-Intro.mdx} (96%) create mode 100644 lib/Colour.mdx delete mode 100644 lib/Colour.stories.mdx create mode 100644 lib/Spacing.mdx delete mode 100644 lib/Spacing.stories.mdx create mode 100644 lib/assets/Colour/Colour.stories.js create mode 100644 lib/components/Typography/Typography.mdx create mode 100644 lib/components/Typography/Typography.stories.js delete mode 100644 lib/components/Typography/Typography.stories.mdx diff --git a/.babelrc b/.babelrc index 66c5e29d..164b0f6e 100644 --- a/.babelrc +++ b/.babelrc @@ -1,17 +1,20 @@ { - "env": { - "es": { - "presets": [ - ["@babel/preset-env", { "modules": false }], - "@babel/preset-react" - ] - } - }, - "presets": ["@babel/preset-env", "@babel/preset-react"], - "plugins": [ - "@babel/plugin-transform-runtime", - "@babel/plugin-proposal-class-properties", - "babel-plugin-styled-components", - "react-docgen" - ] - } \ No newline at end of file + "env": { + "es": { + "presets": [ + ["@babel/preset-env", { "modules": false }], + ["@babel/preset-react", { "runtime": "automatic" }] + ] + } + }, + "presets": [ + "@babel/preset-env", + ["@babel/preset-react", { "runtime": "automatic" }] + ], + "plugins": [ + "@babel/plugin-transform-runtime", + "@babel/plugin-proposal-class-properties", + "babel-plugin-styled-components", + "react-docgen" + ] +} diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 263a8434..af8fd33d 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -5,7 +5,7 @@ jobs: chromatic-deployment: runs-on: ubuntu-latest steps: - - name: Use Node.js 18 + - name: Use Node.js 20 uses: actions/setup-node@v3 with: node-version: 20.12.2 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1f006d17..a90bacb2 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -14,7 +14,7 @@ jobs: actions: write steps: - uses: actions/checkout@v2 - - name: Use Node.js 18 + - name: Use Node.js 20 uses: actions/setup-node@v3 with: node-version: 20.12.2 diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index f8e0d255..eddb36aa 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -11,7 +11,7 @@ jobs: steps: - uses: actions/checkout@v2 - - name: Use Node.js 18 + - name: Use Node.js 20 uses: actions/setup-node@v3 with: node-version: 20.12.2 diff --git a/.storybook/main.js b/.storybook/main.js index e58f22e2..21431da2 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,23 +1,32 @@ module.exports = { stories: ["../lib/**/*.@(mdx|stories.@(js))"], + addons: [ "@storybook/addon-docs", "@storybook/addon-links", "@storybook/addon-viewport", - "@storybook/addon-knobs", "@storybook/addon-a11y", "@storybook/addon-toolbars", "@storybook/components", - "@storybook/api", - "@storybook/addon-mdx-gfm", "@storybook/manager-api", - "@storybook/core-events" + "@storybook/core-events", + "@chromatic-com/storybook", + "@storybook/preset-create-react-app", + "@storybook/addon-webpack5-compiler-babel" ], + framework: { name: "@storybook/react-webpack5", options: {} }, - docs: { - autodocs: "docs" - } + + swc: () => ({ + jsc: { + transform: { + react: { + runtime: "automatic" + } + } + } + }) }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 3acb0190..7fac21e7 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect, Suspense } from "react"; import { DocsPage, DocsContainer as BaseContainer } from "@storybook/blocks"; import { library } from "@fortawesome/fontawesome-svg-core"; import { far } from "@fortawesome/free-regular-svg-icons"; @@ -26,46 +26,55 @@ const FlexItem = styled.div` const getThemeName = (context) => get(context, "parameters.theme") || get(context, "globals.theme"); -const getTheme = (context) => { - const themeName = getThemeName(context); +const getTheme = (themeName) => { return themeName === "default" ? systemtheme : systemThemeCollapsed; }; -const ThemeDecorator = (storyFn, context) => { - const themeName = getThemeName(context); - const storyTheme = getTheme(context); +const withThemeDecorator = (storyFn, context) => { + const [finalThemeName, setFinalThemeName] = useState("default"); + const [storyTheme, setStoryTheme] = useState(systemtheme); + + useEffect(() => { + const themeName = getThemeName(context); + setStoryTheme(getTheme(themeName)); + setFinalThemeName(themeName); + }, [get(context, "parameters.theme"), get(context, "globals.theme")]); - switch (themeName) { + switch (finalThemeName) { case "side-by-side": return ( - - - - <> - - {storyFn()} - - - - - - <> - - {storyFn()} - - - - + Loading Themed Component}> + + + + <> + + {storyFn()} + + + + + + <> + + {storyFn()} + + + + + ); default: return ( - - <> - - {storyFn()} - - + Loading Themed Component}> + + <> + + {storyFn()} + + + ); } }; @@ -77,6 +86,7 @@ export const globalTypes = { defaultValue: "default", toolbar: { icon: "sidebar", + dynamicTitle: true, items: [ { value: "default", title: "Default theme" }, { value: "collapsed", title: "Collapsed theme" }, @@ -96,7 +106,7 @@ export const DocsContainer = ({ children, context }) => { ); }; -export const decorators = [ThemeDecorator]; +export const decorators = [withThemeDecorator]; export const parameters = { options: { showRoots: true diff --git a/lib/01-Intro.stories.mdx b/lib/01-Intro.mdx similarity index 96% rename from lib/01-Intro.stories.mdx rename to lib/01-Intro.mdx index 5ae0d081..4b6d787b 100644 --- a/lib/01-Intro.stories.mdx +++ b/lib/01-Intro.mdx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/addon-docs"; +import { Meta } from "@storybook/blocks"; @@ -52,8 +52,8 @@ As an alternative to `npm link` you can run `npm run dist` and then copy the `es If you need to do `npm link` in your local environment you might encounter the following issues: -- https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react -- https://github.com/styled-components/styled-components/issues/2379 +* https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react +* https://github.com/styled-components/styled-components/issues/2379 Both react and styled-components cause duplicate instance issue after npm link, to fix that we need to ensure both app project and lib project are sharing the same instance of them. @@ -124,7 +124,7 @@ import { TabsContainer, Tab } from "orcs-design-system" ### Using Styled System props -The design system components are built with [Styled System](https://styled-system.com/) props. Generally, components can access the `space` and `layout` prop categories, with additional prop categories on a per-component basis. Check the _Properties_ section in a component's documentation to see what props it can use. Custom props will be listed in the props table. +The design system components are built with [Styled System](https://styled-system.com/) props. Generally, components can access the `space` and `layout` prop categories, with additional prop categories on a per-component basis. Check the *Properties* section in a component's documentation to see what props it can use. Custom props will be listed in the props table. As a guide to using these props, see the [Styled System reference table](https://styled-system.com/table). @@ -192,6 +192,6 @@ To run playroom, use this command: `npm run playroom` This design system is intended to work correctly on all modern desktop and mobile browsers. ---- +*** > "A design system is a living, funded product with a roadmap and backlog, serving an ecosystem." — Nathan Curtis diff --git a/lib/Colour.mdx b/lib/Colour.mdx new file mode 100644 index 00000000..2dd6d3cf --- /dev/null +++ b/lib/Colour.mdx @@ -0,0 +1,137 @@ +import { + Meta, + ColorPalette, + ColorItem, + Story, + Canvas +} from "@storybook/addon-docs"; +import { colors } from "./systemtheme"; +import Flex from "./components/Flex"; +import Colour from "./assets/Colour"; +import Box from "./components/Box/"; +import * as ColourStories from "./assets/Colour/Colour.stories"; + + + +# Colour + +These are the colours used throughout the design system, defined in `systemtheme`. They can be referenced using the `color` prop for components that accept this prop, or through referencing the theme object. + +## Main palette + + + + + + + + + + +## Monochrome opacities + +For black and white colours at different opacities, use the following scales. + +### Black opacity scale + + + +### White opacity scale + + + +## Coloured opacities + +### Primary opacity scale + + + +### Secondary opacity scale + + + +### Success opacity scale + + + +### Warning opacity scale + + + +### Danger opacity scale + + diff --git a/lib/Colour.stories.mdx b/lib/Colour.stories.mdx deleted file mode 100644 index cbbdcb1d..00000000 --- a/lib/Colour.stories.mdx +++ /dev/null @@ -1,231 +0,0 @@ -import { - Meta, - ColorPalette, - ColorItem, - Story, - Canvas -} from "@storybook/addon-docs"; -import { colors } from "./systemtheme"; -import Flex from "./components/Flex"; -import Colour from "./assets/Colour"; -import Box from "./components/Box/"; - - - -# Colour - -These are the colours used throughout the design system, defined in `systemtheme`. They can be referenced using the `color` prop for components that accept this prop, or through referencing the theme object. - -## Main palette - - - - - - - - - - - - -## Monochrome opacities - -For black and white colours at different opacities, use the following scales. - -### Black opacity scale - - - - - - - - - - - - - - - - -### White opacity scale - - - - - - - - - - - - - - - - - - -## Coloured opacities - -### Primary opacity scale - - - - - - - - - - - - - - - - -### Secondary opacity scale - - - - - - - - - - - - - - - - -### Success opacity scale - - - - - - - - - - - - - - - - -### Warning opacity scale - - - - - - - - - - - - - - - - -### Danger opacity scale - - - - - - - - - - - - - - - diff --git a/lib/Spacing.mdx b/lib/Spacing.mdx new file mode 100644 index 00000000..272f1e75 --- /dev/null +++ b/lib/Spacing.mdx @@ -0,0 +1,33 @@ +import { Meta, Story, Canvas } from "@storybook/blocks"; + + + +# Spacing + +This design system uses a range of scales to define the space around and within components, as well as their sizes. These scales are part of the design system's theme (default: `systemtheme`) and can be utilized as values for [Styled System](https://styled-system.com/)-style props. Most components come with wrappers that can access Styled System's `space` and `layout` props. + +## Space Scale + +The **space** scale defines the spacing values. For ease of reference, t-shirt sizing aliases have been added. For example, `p="r"`, `p="4"`, and `p={4}` are all valid and equivalent. + +Our default spacing is `r`, which stands for "regular". + +| **Array Index** | **T-shirt Size** | **Value** | +| --------------- | ---------------- | --------- | +| 0 | - | 0 | +| 1 | xxs | 2px | +| 2 | xs | 4px | +| 3 | s | 8px | +| 4 | r | 16px | +| 5 | l | 24px | +| 6 | xl | 32px | +| 7 | xxl | 64px | +| 8 | xxxl | 128px | + +## Sizes Scale + +The **sizes** scale operates similarly to the space scale, providing consistent sizing values for components. + +## Spacer Component + +To define uniform space between elements, such as controlling the spacing between `Button` components within a `Flex` row, use the `Spacer` component. For more details and examples, refer to the [Spacer component documentation](./?path=/docs/components-spacer--margin). diff --git a/lib/Spacing.stories.mdx b/lib/Spacing.stories.mdx deleted file mode 100644 index 23f08cee..00000000 --- a/lib/Spacing.stories.mdx +++ /dev/null @@ -1,27 +0,0 @@ -import { Meta } from "@storybook/addon-docs"; - - - -# Spacing - -This design system uses several scales of values that define the space around and within components, as well as component sizes. These scales are contained in the design system's theme (default: `systemtheme`) and can be used as values for [Styled System](https://styled-system.com/)-style props. Most components have wrappers that can access Styled System `space` and `layout` props. - -The **space** scale is as follows. For ease of reference, we have added t-shirt sizing aliases, so `p="r"`, `p="4"`, and `p={4}` will all work. - -Our default spacing is `r`, for "regular". - -| **Array index ** | **T-shirt size** | **Value** | -| ---------------- | ---------------- | --------- | -| 0 | - | 0 | -| 1 | xxs | 2px | -| 2 | xs | 4px | -| 3 | s | 8px | -| 4 | r | 16px | -| 5 | l | 24px | -| 6 | xl | 32px | -| 7 | xxl | 64px | -| 8 | xxxl | 128px | - -The **sizes** scale works in a similar way. - -For defining uniform space between elements, for example controlling the spacing between `Button` components within a `Flex` row, the `Spacer` component can be used. See the [Spacer component docs](./?path=/docs/components-spacer--margin) for examples and usage details. diff --git a/lib/assets/Colour/Colour.stories.js b/lib/assets/Colour/Colour.stories.js new file mode 100644 index 00000000..6b05cc77 --- /dev/null +++ b/lib/assets/Colour/Colour.stories.js @@ -0,0 +1,122 @@ +import React from "react"; + +import { Colour } from "."; +import Flex from "../../components/Flex"; +import Box from "../../components/Box"; + +export default { + title: "System/Colour" // Title of your story section +}; + +export const BlackOpacityScale = () => ( + + + + + + + + + + + + +); + +export const WhiteOpacityScale = () => ( + + + + + + + + + + + + + + +); + +export const PrimaryOpacityScale = { + render: () => ( + + + + + + + + + + + + + ), + name: "Primary Opacity Scale" +}; + +export const SecondaryOpacityScale = { + render: () => ( + + + + + + + + + + + + + ), + name: "Secondary Opacity Scale" +}; + +export const SuccessOpacityScale = () => ( + + + + + + + + + + + + +); + +export const WarningOpacityScale = () => ( + + + + + + + + + + + + +); + +export const DangerOpacityScale = () => ( + + + + + + + + + + + + +); diff --git a/lib/components/ActionsMenu/ActionsMenu.mdx b/lib/components/ActionsMenu/ActionsMenu.mdx index 9a82a6fb..dd84ede2 100644 --- a/lib/components/ActionsMenu/ActionsMenu.mdx +++ b/lib/components/ActionsMenu/ActionsMenu.mdx @@ -14,15 +14,11 @@ The child components `ActionsMenuItem` are rendered either as a react router lin ## Default Actions Menu - - - + ## Left offset Actions Menu - - - + ## Advanced Actions Menu @@ -34,33 +30,25 @@ 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/Avatar/Avatar.mdx b/lib/components/Avatar/Avatar.mdx index bf67e734..1107236b 100644 --- a/lib/components/Avatar/Avatar.mdx +++ b/lib/components/Avatar/Avatar.mdx @@ -24,89 +24,65 @@ 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 diff --git a/lib/components/Badge/Badge.mdx b/lib/components/Badge/Badge.mdx index 4eceba3a..44be0154 100644 --- a/lib/components/Badge/Badge.mdx +++ b/lib/components/Badge/Badge.mdx @@ -14,17 +14,13 @@ 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/Box/Box.mdx b/lib/components/Box/Box.mdx index adad2369..0d1fb514 100644 --- a/lib/components/Box/Box.mdx +++ b/lib/components/Box/Box.mdx @@ -12,39 +12,27 @@ Component to contain elements within a simple box. If your `Box` needs to contai ## Default - - - + ## Border - - - + ## Shadow - - - + ## Background colour - - - + ## Padding - - - + ## Border Radius - - - + ## Properties diff --git a/lib/components/Button/Button.mdx b/lib/components/Button/Button.mdx index 6b9e164a..9456ddb2 100644 --- a/lib/components/Button/Button.mdx +++ b/lib/components/Button/Button.mdx @@ -24,57 +24,39 @@ 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/ButtonGroup/ButtonGroup.mdx b/lib/components/ButtonGroup/ButtonGroup.mdx index 29377151..4d5ea652 100644 --- a/lib/components/ButtonGroup/ButtonGroup.mdx +++ b/lib/components/ButtonGroup/ButtonGroup.mdx @@ -12,15 +12,11 @@ ButtonGroups should be used for switching views. Acts like radio buttons, in tha ## Default ButtonGroup - - - + ## Inverted ButtonGroup - - - + ## Properties diff --git a/lib/components/ButtonGroup/ButtonGroupIteam.mdx b/lib/components/ButtonGroup/ButtonGroupIteam.mdx index 7ddc3c30..1e0bbc4b 100644 --- a/lib/components/ButtonGroup/ButtonGroupIteam.mdx +++ b/lib/components/ButtonGroup/ButtonGroupIteam.mdx @@ -1,6 +1,6 @@ import { Meta, Story, Controls, Canvas } from "@storybook/addon-docs"; import { ButtonGroupContainer, ButtonGroupItem } from "."; -import * as stories from "./ButtonGroup.stories"; +import * as stories from "./ButtonGroupItem.stories"; @@ -12,9 +12,7 @@ Use the prop `onChange` on the `ButtonGroupItem` to control behaviour on click o ## Default ButtonGroupItem - - - + ## Properties diff --git a/lib/components/Card/Card.mdx b/lib/components/Card/Card.mdx index 870f42b9..8b8e986f 100644 --- a/lib/components/Card/Card.mdx +++ b/lib/components/Card/Card.mdx @@ -16,33 +16,25 @@ 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/Checkbox/Checkbox.mdx b/lib/components/Checkbox/Checkbox.mdx index 7e566379..f6982a69 100644 --- a/lib/components/Checkbox/Checkbox.mdx +++ b/lib/components/Checkbox/Checkbox.mdx @@ -12,32 +12,22 @@ 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/DatePicker/DatePicker.mdx b/lib/components/DatePicker/DatePicker.mdx index d1645505..079d253e 100644 --- a/lib/components/DatePicker/DatePicker.mdx +++ b/lib/components/DatePicker/DatePicker.mdx @@ -12,27 +12,19 @@ DatePicker uses Airbnb's [react-dates](https://github.com/airbnb/react-dates) un ## Single date - - - + ## Invalid required date - - - + ## Date range - - - + ## Show clear dates button - - - + ## Properties diff --git a/lib/components/Divider/Divider.mdx b/lib/components/Divider/Divider.mdx index c8f536cc..10611565 100644 --- a/lib/components/Divider/Divider.mdx +++ b/lib/components/Divider/Divider.mdx @@ -16,33 +16,25 @@ 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. - - - + ## Dash To be used if you want a dashed divider - - - + ## 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/Expandable/Expandable.mdx b/lib/components/Expandable/Expandable.mdx index f1ee4167..6b658672 100644 --- a/lib/components/Expandable/Expandable.mdx +++ b/lib/components/Expandable/Expandable.mdx @@ -16,33 +16,23 @@ 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/Flex/Flex.mdx b/lib/components/Flex/Flex.mdx index f5b8a297..febcfc2b 100644 --- a/lib/components/Flex/Flex.mdx +++ b/lib/components/Flex/Flex.mdx @@ -14,9 +14,7 @@ import * as stories from "./Flex.stories"; Use `Flex` in conjunction with `Spacer` to control the spacing of elements in the dynamic container. - - - + ## Properties diff --git a/lib/components/Flex/FlexItem.mdx b/lib/components/Flex/FlexItem.mdx index e2f9ae8f..75efbdb3 100644 --- a/lib/components/Flex/FlexItem.mdx +++ b/lib/components/Flex/FlexItem.mdx @@ -17,9 +17,7 @@ To use `FlexItem` to control the spacing between children of `Flex` you must als 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 diff --git a/lib/components/Grid/Grid.mdx b/lib/components/Grid/Grid.mdx index f2fc1cdc..14b75544 100644 --- a/lib/components/Grid/Grid.mdx +++ b/lib/components/Grid/Grid.mdx @@ -13,9 +13,7 @@ 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 @@ -38,21 +36,15 @@ By default, we've set certain default values on `Grid` as documented in the tabl ### With Colours - - - + ### Template Columns and Rows - - - + ### Width-based Columns and Rows - - - + ### Using `GridItem` @@ -62,19 +54,13 @@ Using `GridItem` to wrap individual children in the grid ensures that the childr 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 diff --git a/lib/components/Header/Header.mdx b/lib/components/Header/Header.mdx index fceb9fe9..1c23eb56 100644 --- a/lib/components/Header/Header.mdx +++ b/lib/components/Header/Header.mdx @@ -14,27 +14,19 @@ 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/HeaderSimple/HeaderSimple.mdx b/lib/components/HeaderSimple/HeaderSimple.mdx index 1fd5afc1..64ddf63f 100644 --- a/lib/components/HeaderSimple/HeaderSimple.mdx +++ b/lib/components/HeaderSimple/HeaderSimple.mdx @@ -10,15 +10,11 @@ Header component for app layout. Supports app name, username and avatar as props ## Default Header - - - + ## Header with search - - - + ## Properties diff --git a/lib/components/Icon/Icon.mdx b/lib/components/Icon/Icon.mdx index 15188f43..d3529d9f 100644 --- a/lib/components/Icon/Icon.mdx +++ b/lib/components/Icon/Icon.mdx @@ -20,39 +20,27 @@ To get started you can import the icons into Font Awesome library. Alternatively ## Default - - - + ## Colours - - - + ## Size - - - + ## Inverted - - - + ## Animated - - - + ## Transforms and rotations - - - + ## Properties diff --git a/lib/components/Loading/Loading.mdx b/lib/components/Loading/Loading.mdx index ab28e9c8..abf15062 100644 --- a/lib/components/Loading/Loading.mdx +++ b/lib/components/Loading/Loading.mdx @@ -10,33 +10,23 @@ import * as stories from "./Loading.stories"; ## Default - - - + ## Large - - - + ## Centered - - - + ## Coloured - - - + ## Inverted - - - + ## Properties diff --git a/lib/components/Modal/Modal.mdx b/lib/components/Modal/Modal.mdx index 750b0f46..40d7321a 100644 --- a/lib/components/Modal/Modal.mdx +++ b/lib/components/Modal/Modal.mdx @@ -18,33 +18,25 @@ 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/Notification/Notification.mdx b/lib/components/Notification/Notification.mdx index a61561a5..e7e7eb58 100644 --- a/lib/components/Notification/Notification.mdx +++ b/lib/components/Notification/Notification.mdx @@ -16,49 +16,35 @@ If you want your notification to be closable, you must use the onDismiss prop to ## Basic - - - + ## Alternate Colours - - - + ## Text-only - - - + ## Close Disabled - - - + ## Loading - - - + ## Floating This notification will appear on the bottom right corner of the browser's screen. - - - + ## Floating and Centered This floating notification will appear in the center bottom of the browser's screen. Note that this behaviour only works if the component also has the `floating` prop. A positioning prop along the vertical axis, eg `top` or `bottom`, will also need to be specified. - - - + ## Properties diff --git a/lib/components/Popover/Popover.mdx b/lib/components/Popover/Popover.mdx index 68baca30..0a992c41 100644 --- a/lib/components/Popover/Popover.mdx +++ b/lib/components/Popover/Popover.mdx @@ -14,63 +14,47 @@ If you don't specify a width, 200px is the default, but as a general guide try a ## Default - - - + ## Directions Use direction prop to set the direction of the tooltip so that it is positioned in a good place relative to the user interface around it. By default this is set to right. For example, you might use left instead if the element that triggers the popover is on the right side edge of the browser, so that the tooltip does not go off the edge of the screen. - - - + ## Specified width The width prop should be used to tailor the size of the popover to the content that will be presented inside it. Try and select a width that best suits the content. - - - + ## Text alignment Use this to set the text alignment to what looks best. Typically one to a few words will look better centered, a sentence or paragraph will look better left aligned. Left aligned is set by default so only really need to make use of this prop if you want the tooltip text centered. - - - + ## Display inline-block Use this prop if the Popover tooltip does not look correct, in some cases it will need to be displayed as inline-block. - - - + ## Tooltip example Use this example when you want to use popover as a tooltip - - - + Tooltip with link example - - - + ## Keep In View Example If the tooltip falls outside the view port, the direction is changed to bring it back into view. In this case the default is to right align the Popover but it must be left aligned to be visible. - - - + ## Properties diff --git a/lib/components/ProgressBar/ProgressBar.mdx b/lib/components/ProgressBar/ProgressBar.mdx index 02aaa628..d7ba5424 100644 --- a/lib/components/ProgressBar/ProgressBar.mdx +++ b/lib/components/ProgressBar/ProgressBar.mdx @@ -16,21 +16,15 @@ A percentage width of the fill (coloured element) can be specified using the fil ## Default - - - + ## Gradient - - - + ## On dark background - - - + ## Properties diff --git a/lib/components/RadioButton/RadioButton.mdx b/lib/components/RadioButton/RadioButton.mdx index 7a31800a..be1c77fb 100644 --- a/lib/components/RadioButton/RadioButton.mdx +++ b/lib/components/RadioButton/RadioButton.mdx @@ -12,33 +12,23 @@ The default radio button (or inverted if on dark background) should be used for ## Default - - - + ## Colour - - - + ## Checked - - - + ## Disabled - - - + ## Inverted - - - + ## Properties diff --git a/lib/components/Range/Range.mdx b/lib/components/Range/Range.mdx index 9e464bfb..f2e49b29 100644 --- a/lib/components/Range/Range.mdx +++ b/lib/components/Range/Range.mdx @@ -13,15 +13,11 @@ value and define a label for accessibility. ## Default - - - + ## Inverted - - - + ## Properties diff --git a/lib/components/Select/Select.mdx b/lib/components/Select/Select.mdx index a935e286..b3ca2251 100644 --- a/lib/components/Select/Select.mdx +++ b/lib/components/Select/Select.mdx @@ -23,87 +23,61 @@ const options = [ ## Default - - - + ## Invalid - - - + ## Mandatory - - - + ## Disabled - - - + ## Specific Height Select With height and padding props, you can select custom height and padding of select control. Be sure to include unit in the string, e.g. px. - - - + ## Multi-Select - - - + ## Multi-Select with fixed options - - - + ## Inverted - - - + ## With `data-testid` attribute - - - + ## With selected defaultValue This uses a custom `util`. To use, add `import { getOptionByValue } from "orcs-design-system"` to your imports. - - - + ## With creatable - - - + ## With async - - - + ## With grouped options (Auto-expanded to show grouped options) - - - + ## Properties diff --git a/lib/components/SideNav/SideNav.mdx b/lib/components/SideNav/SideNav.mdx index 26fe9958..c8bea34a 100644 --- a/lib/components/SideNav/SideNav.mdx +++ b/lib/components/SideNav/SideNav.mdx @@ -113,9 +113,7 @@ const items = [ ]; ``` - - - + ## Properties diff --git a/lib/components/Sidebar/Sidebar.mdx b/lib/components/Sidebar/Sidebar.mdx index 99787026..aaf5605d 100644 --- a/lib/components/Sidebar/Sidebar.mdx +++ b/lib/components/Sidebar/Sidebar.mdx @@ -12,9 +12,7 @@ Make sure you use an appropriate icon for each tab so that the intent of that ta Use the subcomponent `SidebarClose` for functionality related to closing the sidebar. - - - + ## Properties diff --git a/lib/components/Spacer/Spacer.mdx b/lib/components/Spacer/Spacer.mdx index d5fa4da1..9aa8414a 100644 --- a/lib/components/Spacer/Spacer.mdx +++ b/lib/components/Spacer/Spacer.mdx @@ -29,15 +29,11 @@ Generally, `Spacer` should be used only when there is a need to specify precise ### Margin - - - + ### Padding - - - + ## Properties diff --git a/lib/components/StatusDot/StatusDot.mdx b/lib/components/StatusDot/StatusDot.mdx index c32ab845..b880e7db 100644 --- a/lib/components/StatusDot/StatusDot.mdx +++ b/lib/components/StatusDot/StatusDot.mdx @@ -14,21 +14,15 @@ The horizontal layout and tooltip functionality comes from other components (Fle ## Default StatusDot - - - + ## Colour - - - + ## With icon - - - + ## Properties diff --git a/lib/components/StyledLink/StyledLink.mdx b/lib/components/StyledLink/StyledLink.mdx index c534a03a..b524bbdb 100644 --- a/lib/components/StyledLink/StyledLink.mdx +++ b/lib/components/StyledLink/StyledLink.mdx @@ -14,39 +14,27 @@ Use `to={/route}` to use the react-router-dom `` instead of the html `` ## Default - - - + ## Targeted - - - + ## Bold - - - + ## Inverted - - - + ## React Link - - - + ## Button-like - - - + ## Properties diff --git a/lib/components/Tabs/Tab.mdx b/lib/components/Tabs/Tab.mdx index 8a0d403f..ba0096fb 100644 --- a/lib/components/Tabs/Tab.mdx +++ b/lib/components/Tabs/Tab.mdx @@ -12,21 +12,15 @@ Tabs are intended to provide a way to navigate between distinct sections within ## Active tab - - - + ## With notifications tab - - - + ## With popover tab - - - + ## Properties diff --git a/lib/components/Tabs/TabsContainer.mdx b/lib/components/Tabs/TabsContainer.mdx index 9d1edcf4..0aafe8d9 100644 --- a/lib/components/Tabs/TabsContainer.mdx +++ b/lib/components/Tabs/TabsContainer.mdx @@ -10,9 +10,7 @@ import * as stories from "./TabsContainer.stories"; Tabs are intended to provide a way to navigate between distinct sections within the layout without leaving the page or triggering a page refresh. - - - + ## Properties diff --git a/lib/components/Tag/Tag.mdx b/lib/components/Tag/Tag.mdx index a05b4042..618ac2e5 100644 --- a/lib/components/Tag/Tag.mdx +++ b/lib/components/Tag/Tag.mdx @@ -10,81 +10,55 @@ import * as stories from "./Tag.stories"; ## Default - - - + ## Selected - - - + ## Show info - - - + ## Show edit - - - + ## Show remove - - - + ## Show edit and remove - - - + ## Disabled - - - + ## Strikethrough - - - + ## With tag type - - - + ## Small variant - - - + ## Highlighted variant - - - + ## Person tag - - - + ## Person tag small variant - - - + ## Properties diff --git a/lib/components/TextArea/TextArea.mdx b/lib/components/TextArea/TextArea.mdx index 1202b418..cd107bc8 100644 --- a/lib/components/TextArea/TextArea.mdx +++ b/lib/components/TextArea/TextArea.mdx @@ -18,51 +18,35 @@ Specify size using `cols` and `rows` like shown in the example. Adding `fullWidt ## Default - - - + ## Specified size - - - + ## Full-width - - - + ## Bold label - - - + ## Mandatory - - - + ## Invalid and valid states - - - + ## Inverted - - - + ## Disabled - - - + ## Properties diff --git a/lib/components/TextArea/TextArea.stories.js b/lib/components/TextArea/TextArea.stories.js index 9cdeea5f..94f3969e 100644 --- a/lib/components/TextArea/TextArea.stories.js +++ b/lib/components/TextArea/TextArea.stories.js @@ -24,14 +24,6 @@ export const fullWidthTextArea = () => ( ); fullWidthTextArea.storyName = "Full-width"; -export const statesTextArea = () => ( - -