diff --git a/.drone.yml b/.drone.yml index 947a292e..167d0143 100644 --- a/.drone.yml +++ b/.drone.yml @@ -6,7 +6,6 @@ name: components steps: - name: npm_auth image: robertstettner/drone-npm-auth - environment: settings: registry: npm.pkg.github.com token: @@ -29,7 +28,6 @@ steps: - name: code-analysis image: committed/drone-sonarqube-node - detach: true environment: SONAR_HOST: from_secret: sonar_host @@ -40,6 +38,9 @@ steps: when: branch: - master + event: + exclude: + - pull_request - name: slack image: plugins/slack @@ -51,5 +52,18 @@ steps: from_secret: slack_template when: status: - - success - failure + + - name: announce + image: plugins/slack + settings: + channel: group-dev + webhook: + from_secret: slack_webhook + template: > + :tada: New version ${DRONE_TAG} of `@commitd/components` available + when: + ref: + - refs/tags/v* + status: + - success diff --git a/.storybook/addons.js b/.storybook/addons.js index 7353a960..5024fe3e 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -2,18 +2,14 @@ import '@storybook/addon-docs/register' import '@storybook/addon-actions/register' import '@storybook/addon-links/register' import '@storybook/addon-a11y/register' -import { STORY_CHANGED } from '@storybook/core-events' +import { STORIES_CONFIGURED } from '@storybook/core-events' import addonAPI from '@storybook/addons' -let firstLoad = true addonAPI.register('committed/components', storybookAPI => { - // This doesn't currently work due to a bug in storybook - // storybookAPI.on(STORY_CHANGED, (kind, story) => { - // console.log('called') - // if (firstLoad) { - // firstLoad = false // make sure to set this flag to false, otherwise you will never be able to look at another story. - // storybookAPI.selectStory('Design System', 'Introduction') - // } - // }) + storybookAPI.on(STORIES_CONFIGURED, (kind, story) => { + if (storybookAPI.getUrlState().path === '/story/*') { + storybookAPI.selectStory('Design System', 'Introduction') + } + }) }) diff --git a/.storybook/config.tsx b/.storybook/config.tsx index ed1083bf..e6923614 100644 --- a/.storybook/config.tsx +++ b/.storybook/config.tsx @@ -32,4 +32,4 @@ addParameters({ } }) -configure(require.context('../src/stories', true, /\.(tsx|mdx)$/), module) +configure(require.context('../src', true, /\.stories\.(tsx|mdx)$/), module) diff --git a/README.md b/README.md index e578172b..a05481ec 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # Committed Components +[![Committed Badge](https://img.shields.io/endpoint?url=https%3A%2F%2Fcommitted.software%2Fbadge)](https://committed/software) [![Build Status](https://drone.committed.software/api/badges/commitd/components/status.svg)](https://drone.committed.software/commitd/components) For documentation see https://committed.software/components diff --git a/example/index.tsx b/example/index.tsx index 07ce9c70..28849c11 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -50,7 +50,7 @@ const Content = () => ( 'Rejux', 'Baleen' ].map((name, index) => ( - + ))} diff --git a/package.json b/package.json index b0a2b2fe..75f5e60e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@commitd/components", - "version": "0.0.15", + "version": "0.0.16", "description": "Committed Component Library", "author": "Committed", "license": "UNLICENSED", @@ -83,7 +83,7 @@ "pretty-quick": "^1.11.1", "prop-types": "^15.7.2", "react": "^16.9.0", - "react-docgen-typescript-loader": "^3.1.1", + "react-docgen-typescript-loader": "^3.3.0", "react-dom": "^16.9.0", "react-scripts-ts": "^2.16.0", "rollup": "^0.62.0", diff --git a/src/components/appbar/AppBar.tsx b/src/components/appbar/AppBar.tsx index bb985288..f09618a6 100644 --- a/src/components/appbar/AppBar.tsx +++ b/src/components/appbar/AppBar.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import { ComponentType, FC } from 'react' import { styled } from '@material-ui/styles' import { fonts, Theme } from '../../theme' import MaterialAppBar, { @@ -7,7 +7,7 @@ import MaterialAppBar, { export type AppBarProps = MaterialAppBarProps -export const AppBar = styled>(MaterialAppBar)( +export const AppBar: ComponentType = styled(MaterialAppBar)( ({ theme }: { theme: Theme }) => ({ '& h1, h2, h3, h4, h5, h6': { fontSize: fonts.sizes[1], @@ -15,3 +15,9 @@ export const AppBar = styled>(MaterialAppBar)( } }) ) + +// For documentation only +export type BaseAppBarProps = Pick +export type RestAppBarProps = Omit +export const BaseAppBarDocs: FC = () => null +export const RestAppBarDocs: FC = () => null diff --git a/src/stories/components/appBar.mdx b/src/components/appbar/appBar.stories.mdx similarity index 61% rename from src/stories/components/appBar.mdx rename to src/components/appbar/appBar.stories.mdx index 9594d39e..3221c092 100644 --- a/src/stories/components/appBar.mdx +++ b/src/components/appbar/appBar.stories.mdx @@ -1,10 +1,15 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks' import { AppBar, Box, Heading, Button, Toolbar } from '../../' +import { BaseAppBarDocs, RestAppBarDocs } from './AppBar' # AppBar +Extends [Material UI AppBar](https://material-ui.com/components/app-bar/). + +The App Bar should the used for information and actions on the current screen. + @@ -20,4 +25,12 @@ import { AppBar, Box, Heading, Button, Toolbar } from '../../' - +# Props + +## Main props + + + +## Other props + + diff --git a/src/stories/components/avatar.mdx b/src/components/avatar/avatar.stories.mdx similarity index 100% rename from src/stories/components/avatar.mdx rename to src/components/avatar/avatar.stories.mdx diff --git a/src/stories/components/badge.mdx b/src/components/badge/badge.stories.mdx similarity index 100% rename from src/stories/components/badge.mdx rename to src/components/badge/badge.stories.mdx diff --git a/src/components/box/Box.tsx b/src/components/box/Box.tsx index e4210812..08c4870a 100644 --- a/src/components/box/Box.tsx +++ b/src/components/box/Box.tsx @@ -3,20 +3,18 @@ import MaterialBox, { BoxProps as MaterialBoxProps } from '@material-ui/core/Box' +export type BoxRef = HTMLDivElement + export type BoxProps = MaterialBoxProps & { /** The background colour */ bg?: string } -export type BoxRef = HTMLDivElement - -export const Box: React.FC = React.forwardRef( - (props, ref) => ( - // @ts-ignore due to ref forward - - ) -) +export const Box = React.forwardRef((props, ref) => ( + // @ts-ignore due to ref forward + +)) diff --git a/src/stories/components/box.mdx b/src/components/box/box.stories.mdx similarity index 100% rename from src/stories/components/box.mdx rename to src/components/box/box.stories.mdx diff --git a/src/stories/components/button.mdx b/src/components/button/button.stories.mdx similarity index 100% rename from src/stories/components/button.mdx rename to src/components/button/button.stories.mdx diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx index 00a0514c..ddbcf300 100644 --- a/src/components/card/Card.tsx +++ b/src/components/card/Card.tsx @@ -44,7 +44,7 @@ export const CardHeader: React.ComponentType = ({ children, ...others }: CardHeaderProps) => { - if (typeof (children && children) === 'string') { + if (typeof children === 'string') { return } return {children} diff --git a/src/stories/components/card.mdx b/src/components/card/card.stories.mdx similarity index 100% rename from src/stories/components/card.mdx rename to src/components/card/card.stories.mdx diff --git a/src/stories/components/checkbox.mdx b/src/components/checkbox/checkbox.stories.mdx similarity index 100% rename from src/stories/components/checkbox.mdx rename to src/components/checkbox/checkbox.stories.mdx diff --git a/src/stories/components/chip.mdx b/src/components/chip/chip.stories.mdx similarity index 100% rename from src/stories/components/chip.mdx rename to src/components/chip/chip.stories.mdx diff --git a/src/stories/components/container.mdx b/src/components/container/container.stories.mdx similarity index 100% rename from src/stories/components/container.mdx rename to src/components/container/container.stories.mdx diff --git a/src/stories/components/divider.mdx b/src/components/divider/divider.stories.mdx similarity index 100% rename from src/stories/components/divider.mdx rename to src/components/divider/divider.stories.mdx diff --git a/src/stories/components/drawer.mdx b/src/components/drawer/drawer.stories.mdx similarity index 100% rename from src/stories/components/drawer.mdx rename to src/components/drawer/drawer.stories.mdx diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx index a43cc21b..d3453c1c 100644 --- a/src/components/flex/Flex.tsx +++ b/src/components/flex/Flex.tsx @@ -2,7 +2,23 @@ import * as React from 'react' import { BoxProps, Box } from '../box/Box' export type FlexProps = Omit +export type RowProps = Omit +export type ColumnProps = Omit -export const Flex: React.FC = (props: FlexProps) => ( - +export type FlexRef = HTMLDivElement + +export const Flex = React.forwardRef( + (props: FlexProps, ref) => +) + +export const Row = React.forwardRef( + (props: FlexProps, ref) => ( + + ) +) + +export const Column = React.forwardRef( + (props: FlexProps, ref) => ( + + ) ) diff --git a/src/stories/components/flex.mdx b/src/components/flex/flex.stories.mdx similarity index 100% rename from src/stories/components/flex.mdx rename to src/components/flex/flex.stories.mdx diff --git a/src/stories/components/hidden.mdx b/src/components/hidden/hidden.stories.mdx similarity index 100% rename from src/stories/components/hidden.mdx rename to src/components/hidden/hidden.stories.mdx diff --git a/src/stories/components/iconButton.mdx b/src/components/iconbutton/iconButton.stories.mdx similarity index 100% rename from src/stories/components/iconButton.mdx rename to src/components/iconbutton/iconButton.stories.mdx diff --git a/src/stories/components/icon.mdx b/src/components/icons/icon.stories.mdx similarity index 100% rename from src/stories/components/icon.mdx rename to src/components/icons/icon.stories.mdx diff --git a/src/components/index.ts b/src/components/index.ts index 61a0c869..d71e3cc2 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -43,6 +43,9 @@ export type CheckboxProps = CheckboxProps export { Chip } from './chip/Chip' import { ChipProps } from './chip/Chip' export type ChipProps = ChipProps +export { Column } from './flex/Flex' +import { ColumnProps } from './flex/Flex' +export type ColumnProps = ColumnProps export { Container } from './container/Container' import { ContainerProps } from './container/Container' export type ContainerProps = ContainerProps @@ -100,6 +103,9 @@ export type RadioProps = RadioProps export { RadioGroup } from './radio/RadioGroup' import { RadioGroupProps } from './radio/RadioGroup' export type RadioGroupProps = RadioGroupProps +export { Row } from './flex/Flex' +import { RowProps } from './flex/Flex' +export type RowProps = RowProps export { Select } from './select/Select' import { SelectProps } from './select/Select' export type SelectProps = SelectProps diff --git a/src/stories/components/link.mdx b/src/components/link/link.stories.mdx similarity index 100% rename from src/stories/components/link.mdx rename to src/components/link/link.stories.mdx diff --git a/src/stories/components/loader.mdx b/src/components/loader/loader.stories.mdx similarity index 100% rename from src/stories/components/loader.mdx rename to src/components/loader/loader.stories.mdx diff --git a/src/stories/components/logo.mdx b/src/components/logo/logo.stories.mdx similarity index 100% rename from src/stories/components/logo.mdx rename to src/components/logo/logo.stories.mdx diff --git a/src/stories/components/popover.mdx b/src/components/popover/popover.stories.mdx similarity index 100% rename from src/stories/components/popover.mdx rename to src/components/popover/popover.stories.mdx diff --git a/src/stories/components/radio.mdx b/src/components/radio/radio.stories.mdx similarity index 99% rename from src/stories/components/radio.mdx rename to src/components/radio/radio.stories.mdx index 485b523c..ddbef688 100644 --- a/src/stories/components/radio.mdx +++ b/src/components/radio/radio.stories.mdx @@ -23,7 +23,7 @@ use radio when one option of more then two choices; [further info](https://www.n Radios should always be used with a `RadioGroup` to handle the state control and layout. - + {React.createElement(() => { const [value, setValue] = React.useState('female') function handleChange(event /*: React.ChangeEvent */) { diff --git a/src/stories/components/select.mdx b/src/components/select/select.stories.mdx similarity index 100% rename from src/stories/components/select.mdx rename to src/components/select/select.stories.mdx diff --git a/src/stories/components/slider.mdx b/src/components/slider/slider.stories.mdx similarity index 99% rename from src/stories/components/slider.mdx rename to src/components/slider/slider.stories.mdx index 5770db37..82a6efc9 100644 --- a/src/stories/components/slider.mdx +++ b/src/components/slider/slider.stories.mdx @@ -9,7 +9,7 @@ import { action } from '@storybook/addon-actions' Allows for selection from a (numeric) range of values. - + {React.createElement(() => { const marks = [ { diff --git a/src/stories/components/switch.mdx b/src/components/switch/switch.stories.mdx similarity index 100% rename from src/stories/components/switch.mdx rename to src/components/switch/switch.stories.mdx diff --git a/src/stories/components/tabs.mdx b/src/components/tabs/tabs.stories.mdx similarity index 100% rename from src/stories/components/tabs.mdx rename to src/components/tabs/tabs.stories.mdx diff --git a/src/stories/components/textField.mdx b/src/components/textfield/textField.stories.mdx similarity index 100% rename from src/stories/components/textField.mdx rename to src/components/textfield/textField.stories.mdx diff --git a/src/stories/components/tooltip.mdx b/src/components/tooltip/tooltip.stories.mdx similarity index 100% rename from src/stories/components/tooltip.mdx rename to src/components/tooltip/tooltip.stories.mdx diff --git a/src/stories/typography.mdx b/src/components/typography/typography.stories.mdx similarity index 100% rename from src/stories/typography.mdx rename to src/components/typography/typography.stories.mdx diff --git a/src/stories/colour.mdx b/src/stories/colour.stories.mdx similarity index 83% rename from src/stories/colour.mdx rename to src/stories/colour.stories.mdx index 9032c4fa..04d5acd1 100644 --- a/src/stories/colour.mdx +++ b/src/stories/colour.stories.mdx @@ -6,6 +6,9 @@ import { ThemeProvider, theme, colors, Flex } from '../' ## Main Light +The main light theme colours. They can be refered to in palette based props using the key with main, light or dark. e.g. `primary.main`, `secondary.dark`. +We use the brand colour for accents and highlights, not as the primary colour. + @@ -21,6 +24,8 @@ import { ThemeProvider, theme, colors, Flex } from '../' ## Palettes +Full palletes back the main colours and are keyed with `50, 100, 200, 300, 400, 500, 600, 700, 800, 900`. + Click to copy color to clipboard. @@ -34,6 +39,9 @@ Click to copy color to clipboard. ## Colours +Don't refer to hex values in your code, like `#FFBB00` but instead use the theme colours above or you can also import +`colors` directly and select from a wider set for, say charts and graphs that require more colours. + diff --git a/src/stories/components/dialog.mdx b/src/stories/components/dialog.stories.mdx similarity index 100% rename from src/stories/components/dialog.mdx rename to src/stories/components/dialog.stories.mdx diff --git a/src/stories/components/list.mdx b/src/stories/components/list.stories.mdx similarity index 99% rename from src/stories/components/list.mdx rename to src/stories/components/list.stories.mdx index 726f2403..f1638598 100644 --- a/src/stories/components/list.mdx +++ b/src/stories/components/list.stories.mdx @@ -25,7 +25,7 @@ Listes can be used as toggle actions or as part of input forms. Use when single select/deselect option, use radio when one option of more then two choices; [further info](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/). - + diff --git a/src/stories/components/menu.mdx b/src/stories/components/menu.stories.mdx similarity index 97% rename from src/stories/components/menu.mdx rename to src/stories/components/menu.stories.mdx index c16ce735..eb9a8474 100644 --- a/src/stories/components/menu.mdx +++ b/src/stories/components/menu.stories.mdx @@ -8,7 +8,7 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks' # Menu - + {React.createElement(() => { const [anchorEl, setAnchorEl] = React.useState(null) const click = action('clicked') diff --git a/src/stories/components/table.mdx b/src/stories/components/table.stories.mdx similarity index 99% rename from src/stories/components/table.mdx rename to src/stories/components/table.stories.mdx index 5c498ef1..0122dfc3 100644 --- a/src/stories/components/table.mdx +++ b/src/stories/components/table.stories.mdx @@ -14,7 +14,7 @@ import { # Table - + {React.createElement(() => { function createData(name, calories, fat, carbs, protein) { return { name, calories, fat, carbs, protein } diff --git a/src/stories/components/toolbar.mdx b/src/stories/components/toolbar.stories.mdx similarity index 100% rename from src/stories/components/toolbar.mdx rename to src/stories/components/toolbar.stories.mdx diff --git a/src/stories/designPrinciples.mdx b/src/stories/designPrinciples.mdx deleted file mode 100644 index e9e9eef7..00000000 --- a/src/stories/designPrinciples.mdx +++ /dev/null @@ -1,42 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' - - - -# Design Principles - -## Breakpoints - -``` -value |0px 600px 960px 1280px 1920px -key |xs sm md lg xl -screen width |--------|--------|--------|--------|--------> -range | xs | sm | md | lg | xl -``` - -### CSS Media Queries - -CSS media queries is the idiomatic approach to make your UI responsive. We provide four styles helpers to do so: - -- `theme.breakpoints.up(key)` -- `theme.breakpoints.down(key)` -- `theme.breakpoints.only(key)` -- `theme.breakpoints.between(start, end)` - -In the following demo, we change the background color (red, blue & green) based on the screen width. - -```js -const styles = theme => ({ - root: { - padding: theme.spacing(1), - [theme.breakpoints.down('sm')]: { - backgroundColor: theme.palette.secondary.main - }, - [theme.breakpoints.up('md')]: { - backgroundColor: theme.palette.primary.main - }, - [theme.breakpoints.up('lg')]: { - backgroundColor: green[500] - } - } -}) -``` diff --git a/src/stories/designPrinciples.stories.mdx b/src/stories/designPrinciples.stories.mdx new file mode 100644 index 00000000..ffbfeee6 --- /dev/null +++ b/src/stories/designPrinciples.stories.mdx @@ -0,0 +1,173 @@ +import { Meta, Preview } from '@storybook/addon-docs/blocks' +import { Flex, Box, theme, colors } from '../' + + + +# Design Principles + +We don't want to reinvent the wheel, therefore, we use the [Material](https://material.io/) design system, from Google, and their +[principles](https://material.io/design/introduction/#principles). Committed Components is our particular customisation of it. + +## Material-UI + +The system is implemented using [@material-ui](https://material-ui.com), but does not support all components from it. +Any unsupported components can be used directly from material-ui and it will still receive the Committed theming. +The components are documented here but further detail may be required form material-ui. + +## Components + +In this library, we only aim to support simple components (or [atoms](http://atomicdesign.bradfrost.com/)). +Higher level reusable components are in separate, themed libraries. Import those as required. + +Generally, a component should be self contained and should not require styling beyond what is provided via props. +No assumptions are made about the placement of the component but we provide [positioning props][positioning] to simplify +the location of the components. + +## Spacing + +We have a fixed list of spacings that double with each step. Using fixed spacing will give a better uniform +feeling to the design. If a space is too small, go up a step, too large go down, try to avoid custom spacings. + +The [positioning props][positioning] that deal with spacing (e.g. margin and padding) take a number from 0 to 6 to select the correct +spacing, 0 being no space and 6 is 128px. + + + + 0 + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + + + 5 + + + + 6 + + + + +## Sizing + +The [placement props][positioning] that deal with sizing (e.g. width and height) take a `number`. Numbers greater than `1` are treated as a pixel value for example `100 => "100px"`, +and numbers less than or equal to `1` are transformed into a percentage for example `1/2 => "50%"`. + + + w={'{100}'} + + + w={'{1 / 3}'} + + + w={'{300}'} + + + w={'{1 / 2}'} + + +## Breakpoints + +A set of standard breakpoints are defined as: + +``` +value |0px 600px 960px 1280px 1920px +key |xs sm md lg xl +screen width |--------|--------|--------|--------|--------> +range | xs | sm | md | lg | xl +``` + +- xs, extra-small: 0px +- sm, small: 600px +- md, medium: 960px +- lg, large: 1280px +- xl, extra-large: 1920px + +We can refer to them in certain props with their keys or in standard +ordering for example the following two exanmles are equivalent: + +```jsx + + +``` + +If in `xs` range the margin is 2, `sm` range 3 and `md` and uo 4. + +### CSS Media Queries + +CSS media queries is the idiomatic approach to make your UI responsive. We provide four styles helpers to do so: + +- `theme.breakpoints.up(key)` +- `theme.breakpoints.down(key)` +- `theme.breakpoints.only(key)` +- `theme.breakpoints.between(start, end)` + +In the following demo, we change the background color (red, blue & green) based on the screen width. + +```js +const styles = theme => ({ + root: { + padding: theme.spacing(1), + [theme.breakpoints.down('sm')]: { + backgroundColor: theme.palette.secondary.main + }, + [theme.breakpoints.up('md')]: { + backgroundColor: theme.palette.primary.main + }, + [theme.breakpoints.up('lg')]: { + backgroundColor: green[500] + } + } +}) +``` + +[positioning]: /?path=/docs/design-system-positioning--page diff --git a/src/stories/gettingStarted.mdx b/src/stories/gettingStarted.stories.mdx similarity index 55% rename from src/stories/gettingStarted.mdx rename to src/stories/gettingStarted.stories.mdx index 63832601..c312394b 100644 --- a/src/stories/gettingStarted.mdx +++ b/src/stories/gettingStarted.stories.mdx @@ -5,10 +5,10 @@ import { Meta } from '@storybook/addon-docs/blocks' # Getting Started Ensure you have setup access to the github @commitd packages, by following these [instructions](https://help.github.com/en/articles/configuring-npm-for-use-with-github-package-registry). -Install the design system in your application +Install the design system and dependencies in your application ```sh -yarn add @commitd/components +yarn add @commitd/components @material-ui/core @material-ui/icons ``` ## ThemeProvider @@ -19,14 +19,14 @@ This should only be included once in your application. ```jsx import React from 'react' -import { ThemeProvider } from '@committed/components' -import SomeView from './SomeView' +import { ThemeProvider } from '@commitd/components' +import AppRoot from './AppRoot' class App extends React.Component { render() { return ( - Hello + ) } @@ -39,24 +39,18 @@ Import and use the design system UI components in your application. ```jsx import React from 'react' -import { Box, Text } from '@committed/components' +import { Box, Text } from '@commitd/components' -const SomeView = props => ( +const AppRoot = props => ( Hello ) ``` -## Material-UI - -The system is implemented using [@material-ui](https://material-ui.com), but does not support all components from it. -Any unsupported components can be used directly from material-ui and it will still receive the Committed theming. -The components are documented here but further detail may be required form material-ui. - ## Icons -We currently use the Sharp icons from @material-ui/icons exposed on the `Icons` component. In order to use this you must add the peer dependency: +We currently use the Sharp icons from `@material-ui/icons` exposed on the `Icons` component. In order to use this you must add the peer dependency: ```sh yarn add @material-ui/icons diff --git a/src/stories/index.mdx b/src/stories/index.mdx deleted file mode 100644 index 3dbb71c6..00000000 --- a/src/stories/index.mdx +++ /dev/null @@ -1,32 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' -import { version } from '../../package.json' - - - -# Committed Components - -v{version} - -This is Committed's design system and should be used to compose web applications. - - - -## Motivation - -Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. - -Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: - -- **It’s consistent**. The way components are built and managed follows a predictable pattern. -- **It’s self-contained**. Your design system is treated as a standalone dependency. -- **It’s reusable**. You’ve built components so they can be reused in many contexts. -- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web. -- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs. - -## Next - -- [Getting Started](gettingStarted) diff --git a/src/stories/introduction.stories.mdx b/src/stories/introduction.stories.mdx new file mode 100644 index 00000000..4bc388d4 --- /dev/null +++ b/src/stories/introduction.stories.mdx @@ -0,0 +1,41 @@ +import { Meta } from '@storybook/addon-docs/blocks' +import { version } from '../../package.json' + + + +# Committed Components + +v{version} + +This is Committed's design system. + +It serves as a resource to help define a common visual language for Committed applications. +This is a living system, and will be updated as we continue to improve and evolve our design system. + + + +## Getting Started + +Here are a few helpful links for getting started with Committed Components: + +- [Getting Started](/?path=/docs/design-system-getting-started--page) Install and setup Components for your React app. +- [Design Principles](/?path=/docs/design-system-design-principles--page) Learn about the principles for the design. +- [Overview](/?path=/docs/design-system-overview) Get an overview of the main components in the system. +- [Status](/?path=/docs/design-system-status--page) See the status of different components. + +## Motivation + +Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. +This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by +clear standards, that can be assembled together to build any number of applications. + +Regardless of the technologies and tools chosen, we aim to follow these guiding principles: + +- **It’s consistent**. The way components are built and managed follows a predictable pattern. +- **It’s reusable**. The components are built so they can be reused in many contexts, but not all. +- **It’s accessible**. Applications built with Components are usable by as many people as possible, no matter how they access the web. +- **It’s robust**. No matter the product or platform, it should perform with minimal bugs. diff --git a/src/stories/overview.mdx b/src/stories/overview.mdx deleted file mode 100644 index 1ba4449f..00000000 --- a/src/stories/overview.mdx +++ /dev/null @@ -1,785 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks' -import { Background } from '../util' -import commmitImage from '../../public/images/Avatar1-YellowTrans-32px.png' -import { - ThemeProvider, - theme, - colors, - AppBar, - Avatar, - Badge, - Box, - Button, - Brand, - Card, - CardHeader, - CardContent, - CardActionsArea, - CardActions, - CardMedia, - Caption, - Checkbox, - Chip, - Container, - Divider, - Display, - Drawer, - Flex, - Form, - FormControl, - Heading, - Hidden, - IconButton, - Icons, - Link, - Loader, - Logo, - Monospace, - Popover, - Radio, - RadioGroup, - Select, - Slider, - Switch, - Table, - TabPanel, - Tooltip, - Typography, - TextField, - Text, - Span, - Paragraph, - Subheading, - FormControlLabel, - FormLabel, - FormGroup, - FormHelperText, - Input, - InputLabel, - OutlinedInput, - Menu, - MenuItem, - MenuList, - Collapse, - Dialog, - DialogActions, - DialogContent, - DialogContentText, - DialogTitle, - List, - ListItem, - ListItemAvatar, - ListItemIcon, - ListItemSecondaryAction, - ListItemText, - ListSubheader, - Tab, - Tabs, - TableBody, - TableCell, - TableFooter, - TableHead, - TablePagination, - TableRow, - TableSortLabel, - Toolbar -} from '../' - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - CF - - - SH - - - - - - - - - - - - - } - label="Chip" - onDelete={() => {}} - /> - - } - label="Chip" - onClick={() => {}} - onDelete={() => {}} - color="primary" - /> - } - label="Chip" - onClick={() => {}} - color="secondary" - /> - - - {React.createElement(() => { - const currencies = [ - { - value: 'USD', - label: '$' - }, - { - value: 'EUR', - label: '€' - }, - { - value: 'BTC', - label: '฿' - }, - { - value: 'JPY', - label: '¥' - } - ] - const [values, setValues] = React.useState({ - name: 'Cat in the Hat', - age: '', - multiline: 'Controlled', - currency: 'EUR' - }) - const handleChange = name => event => - setValues({ ...values, [name]: event.target.value }) - return ( -
- - - - - - - - - - - - - - {currencies.map(option => ( - - {option.label} - - ))} - - - {currencies.map(option => ( - - ))} - - -
- ) - })} - - {React.createElement(() => { - const [checked, setChecked] = React.useState(true) - return ( - - - setChecked(event.target.checked)} - color="primary" - /> - setChecked(!event.target.checked)} - color="secondary" - /> - - - setChecked(event.target.checked)} - color="primary" - /> - setChecked(!event.target.checked)} - color="secondary" - /> - - - setChecked(event.target.checked)} - color="primary" - /> - setChecked(!event.target.checked)} - color="secondary" - /> - - - ) - })} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {['18 June 2014', '20 July 2015', '3 January 2018'].map( - (item, index) => ( - - - - - - - - - - - - ) - )} - - - - - - - - Committed Card - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Id nibh - tortor id aliquet lectus. Feugiat nibh sed pulvinar proin gravida - hendrerit lectus. Facilisis magna etiam tempor orci eu lobortis - elementum. - - - - - - - - - Card - - - - } - checkedIcon={} - /> - - } - checkedIcon={ - - } - /> - - - - - - - - - Title - - Subtitle - - - - - - - - - - - - - - - - - - - - - - - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) - - - - {[ - ['Frozen yoghurt', 159, 6.0, 24, 4.0], - ['Ice cream sandwich', 237, 9.0, 37, 4.3], - ['Eclair', 262, 16.0, 24, 6.0], - ['Cupcake', 305, 3.7, 67, 4.3], - ['Gingerbread', 356, 16.0, 49, 3] - ].map(row => ( - - - {row[0]} - - {row[1]} - {row[2]} - {row[3]} - {row[4]} - - ))} - -
- - - - {React.createElement(() => { - const [value, setValue] = React.useState(0) - function handleChange(event, newValue) { - setValue(newValue) - } - return ( - - - - - - - - - - Item One - - - Item Two - - - Item Three - - - ) - })} - - - - System Typography - h2. Heading - h3. Heading - h4. Heading - - subheading. Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Quos blanditiis tenetur - - - body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore - consectetur. - - - body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore - consectetur. - - - - Disply Typography - d1. Heading - d2. Heading - - Text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos - blanditiis tenetur unde suscipit, quam beatae rerum inventore - consectetur. - - - Monospace. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore - consectetur. - - - - - - diff --git a/src/stories/overview.stories.mdx b/src/stories/overview.stories.mdx new file mode 100644 index 00000000..083529f6 --- /dev/null +++ b/src/stories/overview.stories.mdx @@ -0,0 +1,769 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks' +import { Background } from '../util' +import commmitImage from '../../public/images/Avatar1-YellowTrans-32px.png' +import * as C from '../' + + + + + + + + + Buttons + + + + + + Default + + Primary + + + Secondary + + + + + Default + + + Primary + + + Secondary + + + + + Default + + + Primary + + + Secondary + + + + + Default + + + Primary + + + Secondary + + + + + + Icon Buttons + + + + + + + + + + + + + + + + + + + Badges + + + + + + + + + + + + + + + + + + + + + + + + + + + + Avatars + + + + + CF + + + SH + + + + + + + + + + + + + + Chips + + + + } + label="Chip" + onDelete={() => {}} + /> + + } + label="Chip" + onClick={() => {}} + onDelete={() => {}} + color="primary" + /> + } + label="Chip" + onClick={() => {}} + color="secondary" + /> + + + + Text Fields + + + + {React.createElement(() => { + const currencies = [ + { + value: 'USD', + label: '$' + }, + { + value: 'EUR', + label: '€' + }, + { + value: 'BTC', + label: '฿' + }, + { + value: 'JPY', + label: '¥' + } + ] + const [values, setValues] = React.useState({ + name: 'Cat in the Hat', + age: '', + multiline: 'Controlled', + currency: 'EUR' + }) + const handleChange = name => event => + setValues({ ...values, [name]: event.target.value }) + return ( + + + + + + + + + + + + + + + {currencies.map(option => ( + + {option.label} + + ))} + + + {currencies.map(option => ( + + ))} + + + + ) + })} + + + + Checkbox + + , + Radio + and Switch + + {React.createElement(() => { + const [checked, setChecked] = React.useState(true) + return ( + + + setChecked(event.target.checked)} + color="primary" + /> + setChecked(!event.target.checked)} + color="secondary" + /> + + + setChecked(event.target.checked)} + color="primary" + /> + setChecked(!event.target.checked)} + color="secondary" + /> + + + setChecked(event.target.checked)} + color="primary" + /> + setChecked(!event.target.checked)} + color="secondary" + /> + + + ) + })} + + + Slider + + + + + + + + + + Lists + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {['18 June 2014', '20 July 2015', '3 January 2018'].map( + (item, index) => ( + + + + + + + + + + + + ) + )} + + + + + + Cards + + + + + + + Committed Card + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Id nibh + tortor id aliquet lectus. Feugiat nibh sed pulvinar proin gravida + hendrerit lectus. Facilisis magna etiam tempor orci eu lobortis + elementum. + + + + Yes + + + No + + + + + + Card + + + + } + checkedIcon={} + /> + + } + checkedIcon={ + + } + /> + + + + + + + + + Title + + Subtitle + + + + + + + + + + + + + + + + + + + + Tables + + + + + + + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {[ + ['Frozen yoghurt', 159, 6.0, 24, 4.0], + ['Ice cream sandwich', 237, 9.0, 37, 4.3], + ['Eclair', 262, 16.0, 24, 6.0], + ['Cupcake', 305, 3.7, 67, 4.3], + ['Gingerbread', 356, 16.0, 49, 3] + ].map(row => ( + + + {row[0]} + + {row[1]} + {row[2]} + {row[3]} + {row[4]} + + ))} + + + + + + Tabs + + + {React.createElement(() => { + const [value, setValue] = React.useState(0) + function handleChange(event, newValue) { + setValue(newValue) + } + return ( + + + + + + + + + + Item One + + + Item Two + + + Item Three + + + ) + })} + + + + Typography + + + + + System Typography + h2. Heading + h3. Heading + h4. Heading + + subheading. Lorem ipsum dolor sit amet, consectetur adipisicing + elit. Quos blanditiis tenetur + + + body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur. + + + body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur. + + + + Disply Typography + d1. Heading + d2. Heading + + Text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos + blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur. + + + Monospace. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur. + + + + + + diff --git a/src/stories/positioning.stories.mdx b/src/stories/positioning.stories.mdx new file mode 100644 index 00000000..3da949e0 --- /dev/null +++ b/src/stories/positioning.stories.mdx @@ -0,0 +1,157 @@ +import { Meta, Props, Preview } from '@storybook/addon-docs/blocks' +import { Box, Flex, colors } from '../' +import { Spacing, Display, Flexbox, Sizing } from '../util/docsutil' + + + +# Positioning Props + +The positioning props transfer the main CSS fields for positioning elements to props on the components. This makes it simpler to position +the components. They accept standard CSS values so rather than repeat CSS docs here, we add a link for reference. In addition they support +an array or object declaration of responsive behaviour, we omit these options from these tables and, for brevity, here we may only list +the most common used values but all valid CSS is supported. + +### Transformations + +To simplify the declaration of props, numeric values may go through a transform function. For example, `75` may be transformed to `"75px"` +and where percent values may be declarde then suppling a value less than or equal to 1 will transform to a percentage, e.g. `1/2` becomes `"50%"`. + +Any prop value supplied as a `string` will be used directly. + +### Responsive + +All props accept a responsive declaration where an array or object can be supplied to describe how to behave at different breakpoints. +The breakpoints are: `xs, sm, md, lg, xl`. The following example illustrates their use: + +```jsx + +``` + +This box will have width 100 from `xs` up, it will stay at 100 until a larger breakpoint is declared, +so from md and up the width will be 200. You can use an array as a shorthand but miggin steps must be set +undefined e.g. `[100, undefined, 200]` + +## Display Props + +Set the display value of components, with support for some of the more common values, +as well as some extras for controlling display when printing. + + + +Simple example, + + + + block + + + inline + + + inline + + + block + + + +code omits spacing for clarity + +```jsx +block +inline +inline +block +``` + +Advanced example, all props support supplying an array or object for responsive behaviour + + + + hide on screens wider than md + + + hide on screens smaller than md + + + +```jsx + + hide on screens wider than md + + + hide on screens smaller than md + +``` + +The `null` retains the earlier behaviour through that brakpoint (`sm`, in this case), this is not required in the object case. + +## Flexbox Props + +The Flexbox props allow the declaration of CSS controlling layout according to the flex box [specification](https://www.w3.org/TR/css-flexbox-1/). + + + +For example of use see the [Flex page](/?path=/docs/components-flex--row). + +## Spacing Props + +Allow the controll of the margin and padding of elements. +A string may be supplied and it's value will be used directly, however we encorage the use of the standard spacing values and make this simple +to use as if a number is supplied in the range `[0-6]` it is transformed to a fixed set of spacing values see +[Design principles - Spacing](/?path=/docs/design-system-design-principles--page). + + + +For example + + + + + margin 3, padding 2 + + + + + margin 2, padding 3 + + + + + varied + + + + +Where the 3 center boxes have spacings: + +```jsx + + + +``` + +## Sizing Props + +Make it easy to declare the size of an element. These props are added where the size of the element can be changed. +String values are used directly, numeric values greter than on become `px` values and between `[0-1]` are transformed to '%' values. + + + +For example + + + + width 200, height 100 + + + width 50%, height 50 + + + +Where the 2 center boxes have sizing: + +```jsx + + +``` diff --git a/src/stories/status.mdx b/src/stories/status.stories.mdx similarity index 100% rename from src/stories/status.mdx rename to src/stories/status.stories.mdx diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 0d9b45a3..9700dc4b 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -26,10 +26,10 @@ export const red: Color = { '700': '#911111', '800': '#780A0A', '900': '#610404', - A100: '#ffc3c3', - A200: '#ff9090', - A400: '#ff5d5d', - A700: '#ff4444' + A100: '#FFC3C3', + A200: '#FF9090', + A400: '#FF5D5D', + A700: '#FF4444' } export const redVivid: Color = { '50': '#FFE3E3', @@ -42,10 +42,10 @@ export const redVivid: Color = { '700': '#AB091E', '800': '#8A041A', '900': '#610316', - A100: '#fffbfb', - A200: '#ffc8c9', - A400: '#ff9597', - A700: '#ff7b7f' + A100: '#FFFBFB', + A200: '#FFC8C9', + A400: '#FF9597', + A700: '#FF7B7F' } export const orange: Color = { '50': '#FFEFE6', @@ -58,10 +58,10 @@ export const orange: Color = { '700': '#8C3D10', '800': '#77340D', '900': '#572508', - A100: '#ffdbd2', - A200: '#ffb29f', - A400: '#ff896c', - A700: '#ff7452' + A100: '#FFdbd2', + A200: '#FFB29F', + A400: '#FF896C', + A700: '#FF7452' } export const orangeVivid: Color = { '50': '#FFE8D9', @@ -74,10 +74,10 @@ export const orangeVivid: Color = { '700': '#C52707', '800': '#AD1D07', '900': '#841003', - A100: '#ffffff', - A200: '#ffe5e2', - A400: '#ffb8af', - A700: '#ffa196' + A100: '#FFFFFF', + A200: '#FFE5E2', + A400: '#FFB8AF', + A700: '#FFA196' } export const yellow: Color = { '50': '#FFFAEB', @@ -90,26 +90,26 @@ export const yellow: Color = { '700': '#A27C1A', '800': '#7C5E10', '900': '#513C06', - A100: '#ffffff', - A200: '#fff2df', - A400: '#ffddac', - A700: '#ffd392' + A100: '#FFFFFF', + A200: '#FFF2DF', + A400: '#FFDDAC', + A700: '#FFD392' } export const committedYellow: Color = { - '50': '#fff7e0', - '100': '#ffebb3', - '200': '#ffdd80', - '300': '#ffcf4d', - '400': '#ffc526', - '500': '#ffbb00', - '600': '#ffb500', - '700': '#ffac00', - '800': '#ffa400', - '900': '#ff9600', - A100: '#ffffff', - A200: '#fff9f2', - A400: '#ffe2bf', - A700: '#ffd6a6' + '50': '#FFF7E0', + '100': '#FFEBB3', + '200': '#FFDD80', + '300': '#FFCF4D', + '400': '#FFc526', + '500': '#FFBB00', + '600': '#FFB500', + '700': '#FFAC00', + '800': '#FFA400', + '900': '#FF9600', + A100: '#FFFFFF', + A200: '#FFF9F2', + A400: '#FFE2BF', + A700: '#FFD6A6' } export const yellowVivid: Color = { '50': '#FFFBEA', @@ -122,10 +122,10 @@ export const yellowVivid: Color = { '700': '#CB6E17', '800': '#B44D12', '900': '#8D2B0B', - A100: '#ffffff', - A200: '#fff0de', - A400: '#ffd9ab', - A700: '#ffce91' + A100: '#FFFFFF', + A200: '#FFF0DE', + A400: '#FFD9AB', + A700: '#FFCE91' } export const limeGreen: Color = { '50': '#F2FDE0', @@ -138,10 +138,10 @@ export const limeGreen: Color = { '700': '#507712', '800': '#42600C', '900': '#2B4005', - A100: '#d9ffb8', - A200: '#beff85', - A400: '#a2ff52', - A700: '#95ff38' + A100: '#D9FFB8', + A200: '#BEFF85', + A400: '#A2FF52', + A700: '#95FF38' } export const limeGreenVivid: Color = { '50': '#F8FFED', @@ -154,10 +154,10 @@ export const limeGreenVivid: Color = { '700': '#399709', '800': '#2E7B06', '900': '#1E5303', - A100: '#eaffe3', - A200: '#c4ffb0', - A400: '#9eff7d', - A700: '#8bff64' + A100: '#EAFFE3', + A200: '#C4FFB0', + A400: '#9EFF7D', + A700: '#8BFF64' } export const green: Color = { '50': '#E3F9E5', @@ -170,10 +170,10 @@ export const green: Color = { '700': '#207227', '800': '#0E5814', '900': '#05400A', - A100: '#9fffa2', - A200: '#6cff70', - A400: '#39ff3f', - A700: '#1fff26' + A100: '#9FFFA2', + A200: '#6CFF70', + A400: '#39FF3f', + A700: '#1FFF26' } export const greenVivid: Color = { '50': '#E3F9E5', @@ -186,10 +186,10 @@ export const greenVivid: Color = { '700': '#0E7817', '800': '#07600E', '900': '#014807', - A100: '#9bff9c', - A200: '#68ff6a', - A400: '#35ff37', - A700: '#1bff1e' + A100: '#9BFF9C', + A200: '#68FF6A', + A400: '#35FF37', + A700: '#1BFF1E' } export const teal: Color = { '50': '#EFFCF6', @@ -202,10 +202,10 @@ export const teal: Color = { '700': '#147D64', '800': '#0C6B58', '900': '#014D40', - A100: '#b2ffde', - A200: '#7fffc8', - A400: '#4cffb2', - A700: '#32ffa7' + A100: '#B2FFDE', + A200: '#7FFFC8', + A400: '#4CFFB2', + A700: '#32FFA7' } export const tealVivid: Color = { '50': '#F0FCF9', @@ -218,10 +218,10 @@ export const tealVivid: Color = { '700': '#048271', '800': '#016457', '900': '#004440', - A100: '#beffea', - A200: '#8bffd9', - A400: '#58ffc8', - A700: '#3fffbf' + A100: '#BEFFEA', + A200: '#8BFFD9', + A400: '#58FFC8', + A700: '#3FFFBF' } export const cyan: Color = { '50': '#E0FCFF', @@ -234,10 +234,10 @@ export const cyan: Color = { '700': '#0E7C86', '800': '#0A6C74', '900': '#044E54', - A100: '#c8f8ff', - A200: '#95f2ff', - A400: '#62ecff', - A700: '#48e9ff' + A100: '#C8F8FF', + A200: '#95F2FF', + A400: '#62ECFF', + A700: '#48E9FF' } export const cyanVivid: Color = { '50': '#E1FCF8', @@ -250,10 +250,10 @@ export const cyanVivid: Color = { '700': '#099AA4', '800': '#07818F', '900': '#05606E', - A100: '#e5ffff', - A200: '#b2ffff', - A400: '#7fffff', - A700: '#65ffff' + A100: '#E5FFFF', + A200: '#B2FFFF', + A400: '#7FFFFF', + A700: '#65FFFF' } export const lightBlue: Color = { '50': '#EBF8FF', @@ -266,10 +266,10 @@ export const lightBlue: Color = { '700': '#1D6F98', '800': '#166086', '900': '#0B4F71', - A100: '#d3ebff', - A200: '#a0d4ff', - A400: '#6dbcff', - A700: '#53b1ff' + A100: '#D3EBFF', + A200: '#A0D4FF', + A400: '#6DBCFF', + A700: '#53B1FF' } export const lightBlueVivid: Color = { '50': '#E3F8FF', @@ -282,10 +282,10 @@ export const lightBlueVivid: Color = { '700': '#127FBF', '800': '#0B69A3', '900': '#035388', - A100: '#ffffff', - A200: '#daeeff', - A400: '#a7d6ff', - A700: '#8ecaff' + A100: '#FFFFFF', + A200: '#DAEEFF', + A400: '#A7D6FF', + A700: '#8ECAFF' } export const blue: Color = { '50': '#DCEEFB', @@ -298,10 +298,10 @@ export const blue: Color = { '700': '#0F609B', '800': '#0A558C', '900': '#003E6B', - A100: '#cee2ff', - A200: '#9bc4ff', - A400: '#68a7ff', - A700: '#4e98ff' + A100: '#CEE2FF', + A200: '#9BC4FF', + A400: '#68A7FF', + A700: '#4E98FF' } export const blueVivid: Color = { '50': '#E6F6FF', @@ -314,10 +314,10 @@ export const blueVivid: Color = { '700': '#03449E', '800': '#01337D', '900': '#002159', - A100: '#dfe6ff', - A200: '#acc0ff', - A400: '#7999ff', - A700: '#5f85ff' + A100: '#DFE6FF', + A200: '#ACC0FF', + A400: '#7999FF', + A700: '#5F85FF' } export const indigo: Color = { '50': '#E0E8F9', @@ -330,10 +330,10 @@ export const indigo: Color = { '700': '#35469C', '800': '#2D3A8C', '900': '#19216C', - A100: '#cdd4ff', - A200: '#9aa9ff', - A400: '#677eff', - A700: '#4d68ff' + A100: '#CDD4FF', + A200: '#9AA9FF', + A400: '#677EFF', + A700: '#4D68FF' } export const indigoVivid: Color = { '50': '#D9E8FF', @@ -346,10 +346,10 @@ export const indigoVivid: Color = { '700': '#132DAD', '800': '#0B1D96', '900': '#061178', - A100: '#dadfff', - A200: '#a7b3ff', - A400: '#7487ff', - A700: '#5b71ff' + A100: '#DADFFF', + A200: '#A7B3FF', + A400: '#7487FF', + A700: '#5B71FF' } export const purple: Color = { '50': '#EAE2F8', @@ -362,10 +362,10 @@ export const purple: Color = { '700': '#421987', '800': '#34126F', '900': '#240754', - A100: '#cdbcff', - A200: '#a789ff', - A400: '#8156ff', - A700: '#6d3cff' + A100: '#CDBCFF', + A200: '#A789FF', + A400: '#8156FF', + A700: '#6D3CFF' } export const purpleVivid: Color = { '50': '#F2EBFE', @@ -378,10 +378,10 @@ export const purpleVivid: Color = { '700': '#690CB0', '800': '#580A94', '900': '#44056E', - A100: '#f8f5ff', - A200: '#d8c2ff', - A400: '#b78fff', - A700: '#a675ff' + A100: '#F8F5FF', + A200: '#D8C2FF', + A400: '#B78FFF', + A700: '#A675FF' } export const magenta: Color = { '50': '#F5E1F7', @@ -394,10 +394,10 @@ export const magenta: Color = { '700': '#7C1A87', '800': '#671270', '900': '#4E0754', - A100: '#f5bcff', - A200: '#ee89ff', - A400: '#e656ff', - A700: '#e33cff' + A100: '#F5BCFF', + A200: '#EE89FF', + A400: '#E656FF', + A700: '#E33CFF' } export const magentaVivid: Color = { '50': '#FDEBFF', @@ -410,10 +410,10 @@ export const magentaVivid: Color = { '700': '#B30BA3', '800': '#960888', '900': '#6E0560', - A100: '#fff5fe', - A200: '#ffc2f6', - A400: '#ff8fef', - A700: '#ff75ec' + A100: '#FFF5FE', + A200: '#FFC2F6', + A400: '#FF8FEF', + A700: '#FF75EC' } export const pink: Color = { '50': '#FFE0F0', @@ -426,10 +426,10 @@ export const pink: Color = { '700': '#9B1B5A', '800': '#781244', '900': '#5C0B33', - A100: '#ffd2e1', - A200: '#ff9fc0', - A400: '#ff6c9e', - A700: '#ff528e' + A100: '#FFD2E1', + A200: '#FF9FC0', + A400: '#FF6C9E', + A700: '#FF528E' } export const pinkVivid: Color = { '50': '#FFE3EC', @@ -442,10 +442,10 @@ export const pinkVivid: Color = { '700': '#A30664', '800': '#870557', '900': '#620042', - A100: '#ffecf2', - A200: '#ffb9cf', - A400: '#ff86ad', - A700: '#ff6c9c' + A100: '#FFECF2', + A200: '#FFB9CF', + A400: '#FF86AD', + A700: '#FF6C9C' } export const blueGrey: Color = { '50': '#F0F4F8', @@ -496,14 +496,14 @@ export const warmGrey: Color = { '900': '#27241D' } export const committedGrey: Color = { - '50': '#e9e9e9', - '100': '#c7c7c7', - '200': '#a2a2a2', - '300': '#7d7d7d', + '50': '#E9E9E9', + '100': '#C7C7C7', + '200': '#A2A2A2', + '300': '#7D7D7D', '400': '#616161', '500': '#454545', - '600': '#3e3e3e', + '600': '#3E3E3E', '700': '#363636', - '800': '#2e2e2e', - '900': '#1f1f1f' + '800': '#2E2E2E', + '900': '#1F1F1F' } diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 20e4264c..65af2988 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -34,6 +34,15 @@ declare module '@material-ui/core/styles/createMuiTheme' { const addTransparency = (color: string) => `${color}88` +export const spacing = (factor: number) => { + if (factor < 0 || factor > 6) { + throw new Error( + `Spacing ${factor} invalid, must be between 0 and 6 inclusive` + ) + } + return [0, 4, 8, 16, 32, 64, 128][factor] +} + export const palettes = { ...allColors, brand: allColors.committedYellow, @@ -118,7 +127,7 @@ export const light: ThemeOptions = { text, grey: palettes.neutral, action, - divider: "rgba(0, 0, 0, 0.12)" + divider: 'rgba(0, 0, 0, 0.12)' }, props: { MuiTypography: { @@ -136,7 +145,7 @@ export const light: ThemeOptions = { } } }, - spacing: (factor: number) => [0, 4, 8, 16, 32, 64, 128][factor], + spacing: spacing, typography: { fontFamily: fonts.families.system, htmlFontSize: 16, diff --git a/src/util/colors.tsx b/src/util/colors.tsx index d532bbb1..2ade4837 100644 --- a/src/util/colors.tsx +++ b/src/util/colors.tsx @@ -42,7 +42,7 @@ export const Colors = ({ colors, name, accent = false }: ColorsProps) => ( {Object.keys(colors) .filter(weight => (accent ? true : !weight.startsWith('A'))) .map(weight => ( - + ))} ) diff --git a/src/util/docsutil.tsx b/src/util/docsutil.tsx new file mode 100644 index 00000000..0df6a684 --- /dev/null +++ b/src/util/docsutil.tsx @@ -0,0 +1,455 @@ +import { FC } from 'react' +import { + ContentDistribution, + ContentPosition, + DisplayOutside, + SelfPosition +} from 'csstype' +import { + SpacingProps, + DisplayProps, + FlexboxProps, + SizingProps +} from '@material-ui/system' + +/*********************************************************************************** + * These types are for documentation only, + * they are missing property values to simplify their display. + * DO NOT USE + ***********************************************************************************/ + +interface DocDisplayProps { + /** + * The `display` CSS property defines the display type of an element. + * + * Both the display outside and display inside can be given separated by a space. + * + * @see https://developer.mozilla.org/docs/Web/CSS/display + * + * @default inline + */ + display?: + | DisplayOutside + | 'flex' + | 'flow' + | 'flow-root' + | 'grid' + | 'contents' + | 'list-item' + | 'none' + /** + * The display property when in print mode + */ + displayPrint?: string + /** + * The `overflow` CSS property sets what to do when an element's content is too big to fit in its block formatting context. + * + * @see https://developer.mozilla.org/docs/Web/CSS/overflow + * @default visible + */ + overflow?: 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible' + /** + * The `text-overflow` CSS property sets how hidden overflow content is signaled to users. + * @see https://developer.mozilla.org/docs/Web/CSS/text-overflow + * @default clip + */ + textOverflow?: 'clip' | 'ellipsis' + /** + * The `visibility` CSS property shows or hides an element without changing the layout of a document. + * + * @see https://developer.mozilla.org/docs/Web/CSS/visibility + * @default visible + */ + visibility?: 'collapse' | 'hidden' | 'visible' + /** + * The `white-space` CSS property sets how white space inside an element is handled. + * + * @see https://developer.mozilla.org/docs/Web/CSS/white-space + * @default normal + */ + whiteSpace?: + | '-moz-pre-wrap' + | 'normal' + | 'nowrap' + | 'pre' + | 'pre-line' + | 'pre-wrap' +} + +interface DocSpacingProps { + /** + * The `margin` prop sets the margin area on all four sides of an element. + * It is a shorthand for `marginTop`, `marginRight`, `marginBottom`, and `marginLeft`. + * @see https://developer.mozilla.org/docs/Web/CSS/margin + * @default 0 + */ + margin?: number + /** + * Shorthand for margin + * @default 0 + */ + m?: number + /** + * The `marginTop` prop sets the margin area on the top of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/margin-top + * @default 0 + */ + marginTop?: number + /** + * Shorthand for marginTop + * @default 0 + */ + mt?: number + /** + * The `marginRight` prop sets the margin area on the right side of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/margin-right + * @default 0 + */ + marginRight?: number + /** + * Shorthand for marginRight + * @default 0 + */ + mr?: number + /** + * The `marginBottom` prop sets the margin area on the bottom of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom + * @default 0 + */ + marginBottom?: number + /** + * Shorthand for marginBottom + * @default 0 + */ + mb?: number + /** + * The `marginLeft` prop sets the margin area on the left side of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/margin-left + * @default 0 + */ + marginLeft?: number + /** + * Shorthand for marginLeft + * @default 0 + */ + ml?: number + /** + * The `marginX` sets the margin area on the left and right sides of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/margin + * @default 0 + */ + marginX?: number + /** + * Shorthand for marginX + * @default 0 + */ + mx?: number + /** + * The `marginY` prop sets the margin area on the top and bottom of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/margin + * @default 0 + */ + marginY?: number + /** + * Shorthand for marginY + * @default 0 + */ + my?: number + /** + * The `padding` prop sets the padding area on all sides of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/padding + * @default 0 + */ + padding?: number + /** + * Shorthand for padding + * @default 0 + */ + p?: number + /** + * The `paddingTop` prop sets the height of the padding area on the top of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/padding-top + * @default 0 + */ + paddingTop?: number + /** + * Shorthand for paddingTop + * @default 0 + */ + pt?: number + /** + * The `paddingRight` prop sets the width of the padding area on the right side of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/padding-right + * @default 0 + */ + paddingRight?: number + /** + * Shorthand for paddingRight + * @default 0 + */ + pr?: number + /** + * The `paddingBottom` prop sets the height of the padding area on the bottom of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom + * @default 0 + */ + paddingBottom?: number + /** + * Shorthand for paddingBottom + * @default 0 + */ + pb?: number + /** + * The `paddingLeft` prop sets the width of the padding area on the left side of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/padding-left + * @default 0 + */ + paddingLeft?: number + /** + * Shorthand for paddingLeft + * @default 0 + */ + pl?: number + /** + * The `paddingX` prop sets the width of the padding area on the left and right of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/padding + * @default 0 + */ + paddingX?: number + /** + * Shorthand for paddingX + * @default 0 + */ + px?: number + /** + * The `paddingY` property sets the height of the padding area on the top and bottom of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/padding + * @default 0 + */ + paddingY?: number + /** + * Shorthand for paddingY + * @default 0 + */ + py?: number +} + +interface DocFlexboxProps { + /** + * The flex prop sets how a flex item will grow or shrink to fit the space available in its flex container. + * It is a shorthand for flexGrow, flexShrink, and flexBasis. + * For most purposes, authors should set flex to one of the following values: auto, initial, none, or a positive unitless number. + * @see https://developer.mozilla.org/docs/Web/CSS/flex + */ + flex?: string + /** + * The `flexBasis` prop sets the initial main size of a flex item. + * It sets the size of the content box unless otherwise set with `box-sizing`. + * @see https://developer.mozilla.org/docs/Web/CSS/flex-basis + * @default auto + */ + flexBasis?: + | 'auto' + | 'available' + | 'content' + | 'fit-content' + | 'max-content' + | 'min-content' + | number + /** + * The `flexDirection` prop sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). + * @see https://developer.mozilla.org/docs/Web/CSS/flex-direction + * @default row + */ + flexDirection?: 'column' | 'column-reverse' | 'row' | 'row-reverse' + /** + * The `flexWrap` prop sets whether flex items are forced onto one line or can wrap onto multiple lines. + * If wrapping is allowed, it sets the direction that lines are stacked. + * @see https://developer.mozilla.org/docs/Web/CSS/flex-wrap + * @default nowrap + */ + flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse' + /** + * The `justifyContent` prop defines how the browser distributes space between and around content items along the main-axis of a flex container, + * and the inline axis of a grid container. + * @see https://developer.mozilla.org/docs/Web/CSS/justify-content + * @default normal + */ + justifyContent?: + | ContentDistribution + | ContentPosition + | 'left' + | 'normal' + | 'right' + /** + * The `alignItems` prop sets the `align-self` value on all direct children as a group. + * The align-self property sets the alignment of an item within its containing block. + * In Flexbox it controls the alignment of items on the Cross Axis, in Grid Layout it + * controls the alignment of items on the Block Axis within their grid area. + * @see https://developer.mozilla.org/docs/Web/CSS/align-items + * @default normal + */ + alignItems?: SelfPosition | 'baseline' | 'normal' | 'stretch' + + /** + * The `alignContent` prop sets how the browser distributes space between and around content items + * along the cross-axis of a flexbox container, and the main-axis of a grid container. + * @see https://developer.mozilla.org/docs/Web/CSS/align-content + * @default normal + */ + alignContent?: SelfPosition | 'auto' | 'baseline' | 'normal' | 'stretch' + /** + * The `order` prop sets the order to lay out an item in a flex or grid container. + * Items in a container are sorted by ascending `order` value and then by their source code order. + * @see https://developer.mozilla.org/docs/Web/CSS/order + * @default 0 + */ + order?: number + /** + * The `flexGrow` prop sets how much of the available space in the flex container should be assigned + * to that item (the flex grow factor). If all sibling items have the same flex grow factor, then all + * items will receive the same share of available space, otherwise it is distributed according to the + * ratio defined by the different flex grow factors. + * @see https://developer.mozilla.org/docs/Web/CSS/flex-grow + * @default 0 + */ + flexGrow?: number + /** + * The `flexShrink` prop sets the flex shrink factor of a flex item. If the size of flex items is larger + * than the flex container, items shrink to fit according to `flex-shrink`. + * @see https://developer.mozilla.org/docs/Web/CSS/flex-shrink + * @default 1 + */ + flexShrink?: number + /** + * The `alignSelf` prop aligns flex items of the current flex line overriding the `alignItems` value. + * If any of the item's cross-axis margin is set to `auto`, then `align-self` is ignored. + * In Grid layout `align-self` aligns the item inside the grid area. + * @see https://developer.mozilla.org/docs/Web/CSS/align-self + * @default auto + */ + alignSelf?: SelfPosition | 'auto' | 'baseline' | 'normal' | 'stretch' + /** + * The `justifyItems` property defines the default `justifySelf` for all items of the box, giving them all a + * default way of justifying each box along the appropriate axis. + * @see https://developer.mozilla.org/docs/Web/CSS/justify-items + * @default legacy + */ + justifyItems?: + | SelfPosition + | 'baseline' + | 'left' + | 'legacy' + | 'normal' + | 'right' + | 'stretch' + /** + * The `justifySelf` prop sets the way a box is justified inside its alignment container along the appropriate axis. + * @see https://developer.mozilla.org/docs/Web/CSS/justify-self + * @default auto + */ + justifySelf?: + | SelfPosition + | 'auto' + | 'baseline' + | 'left' + | 'normal' + | 'right' + | 'stretch' +} +interface DocSizingProps { + /** + * The `width` prop sets an element's width. + * @see https://developer.mozilla.org/docs/Web/CSS/width + * @default auto + */ + width?: + | number + | 'auto' + | 'available' + | 'fit-content' + | 'intrinsic' + | 'max-content' + | 'min-content' + | 'min-intrinsic' + /** + * The `maxWidth` prop sets the maximum width of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/max-width + * @default none + */ + maxWidth?: + | number + | 'fill-available' + | 'fit-content' + | 'intrinsic' + | 'max-content' + | 'min-content' + | 'none' + /** + * The `minWidth` prop sets the minimum width of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/min-width + * @default auto + */ + minWidth?: + | number + | 'auto' + | 'fill-available' + | 'fit-content' + | 'intrinsic' + | 'max-content' + | 'min-content' + | 'min-intrinsic' + /** + * The `height` prop specifies the height of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/height + * @default auto + */ + height?: + | number + | 'auto' + | 'available' + | 'fit-content' + | 'max-content' + | 'min-content' + + /** + * The `maxHeight` prop sets the maximum height of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/max-height + * @default none + */ + maxHeight?: + | number + | 'fill-available' + | 'fit-content' + | 'intrinsic' + | 'max-content' + | 'min-content' + | 'none' + /** + * The `minHeight` prop sets the minimum height of an element. + * @see https://developer.mozilla.org/docs/Web/CSS/min-height + * @default auto + */ + minHeight?: + | number + | 'auto' + | 'fill-available' + | 'fit-content' + | 'intrinsic' + | 'max-content' + | 'min-content' +} + +// We add back the original props, incase there are any changes that are not documented. +export const Display: FC< + DocDisplayProps & Omit +> = () => null +export const Spacing: FC< + DocSpacingProps & Omit +> = () => null +export const Flexbox: FC< + DocFlexboxProps & Omit +> = () => null +export const Sizing: FC< + DocSizingProps & Omit +> = () => null diff --git a/yarn.lock b/yarn.lock index ba1e5951..fd884c15 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5457,7 +5457,7 @@ cyclist@~0.2.2: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640" integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA= -d@1: +d@1, d@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a" integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA== @@ -6111,7 +6111,16 @@ es-to-primitive@^1.2.0: is-date-object "^1.0.1" is-symbol "^1.0.2" -es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@~0.10.14: +es5-ext@^0.10.35, es5-ext@^0.10.50, es5-ext@^0.10.51, es5-ext@~0.10.14: + version "0.10.51" + resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.51.tgz#ed2d7d9d48a12df86e0299287e93a09ff478842f" + integrity sha512-oRpWzM2WcLHVKpnrcyB7OW8j/s67Ba04JCm0WnNv3RiABSvs7mrQlutB8DBv793gKcp0XENR8Il8WxGTlZ73gQ== + dependencies: + es6-iterator "~2.0.3" + es6-symbol "~3.1.1" + next-tick "^1.0.0" + +es5-ext@^0.10.46: version "0.10.50" resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.50.tgz#6d0e23a0abdb27018e5ac4fd09b412bc5517a778" integrity sha512-KMzZTPBkeQV/JcSQhI5/z6d9VWJ3EnQ194USTUwIYZ2ZbpN8+SGXQKt1h68EX44+qt+Fzr8DO17vnxrw7c3agw== @@ -6177,7 +6186,7 @@ es6-shim@^0.35.5: resolved "https://registry.yarnpkg.com/es6-shim/-/es6-shim-0.35.5.tgz#46f59dc0a84a1c5029e8ff1166ca0a902077a9ab" integrity sha512-E9kK/bjtCQRpN1K28Xh4BlmP8egvZBGJJ+9GtnzOwt7mdqtrjHFuVGr7QJfdjBIKqrlU5duPf3pCBoDrkjVYFg== -es6-symbol@3.1.1, es6-symbol@^3.1.1, es6-symbol@~3.1.1: +es6-symbol@3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77" integrity sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc= @@ -6185,6 +6194,14 @@ es6-symbol@3.1.1, es6-symbol@^3.1.1, es6-symbol@~3.1.1: d "1" es5-ext "~0.10.14" +es6-symbol@^3.1.1, es6-symbol@~3.1.1: + version "3.1.2" + resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.2.tgz#859fdd34f32e905ff06d752e7171ddd4444a7ed1" + integrity sha512-/ZypxQsArlv+KHpGvng52/Iz8by3EQPxhmbuz8yFG89N/caTFBSbcXONDw0aMjy827gQg26XAjP4uXFvnfINmQ== + dependencies: + d "^1.0.1" + es5-ext "^0.10.51" + es6-weak-map@^2.0.1: version "2.0.3" resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.3.tgz#b6da1f16cc2cc0d9be43e6bdbfc5e7dfcdf31d53" @@ -12257,19 +12274,19 @@ react-dev-utils@^9.0.0: strip-ansi "5.2.0" text-table "0.2.0" -react-docgen-typescript-loader@^3.1.1: - version "3.1.1" - resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.1.1.tgz#c1992538524fb9e45246d6c1314ddcfbf26e9d08" - integrity sha512-h8xfQIiEI4Z1oZewZhi9oohiWMS5Ek19LmgrvoL77Y/5d3tzu6fE3QHqhzYzdPnTaCfMzF7JMDUaydJiLbsDKg== +react-docgen-typescript-loader@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.3.0.tgz#c1f5c1db9a2b6a6bca220bc50fee0a071bc75499" + integrity sha512-gC0TeWTz7s7OMyeABppQGbbrtSNi0yl/gBgZJElBtaBFNSJlHH1sfgQybHZmlZqFcn4UBa+8DOGT6wEJKWTV6g== dependencies: "@webpack-contrib/schema-utils" "^1.0.0-beta.0" loader-utils "^1.2.3" - react-docgen-typescript "^1.12.3" + react-docgen-typescript "^1.15.0" -react-docgen-typescript@^1.12.3: - version "1.12.5" - resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.12.5.tgz#922cdbd9b6f3804695c94bff377c1b40a2e04f0c" - integrity sha512-rXwT6sNThl4A9ISJCnhGLIZBbz0KnXKaNRDIJlpyAsUnG0CutR51grpJv+gsltj+wTLXyr4bhRcuOu8l6MkCHw== +react-docgen-typescript@^1.15.0: + version "1.15.0" + resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.15.0.tgz#963f14210841f9b51ed18c65152a6cc37f1c3184" + integrity sha512-8xObdkRQbrc0505tEdVRO+pdId8pKFyD6jhLYM9FDdceKma+iB+a17Dk7e3lPRBRh8ArQLCedOCOfN/bO338kw== react-docgen@^4.1.0: version "4.1.1" @@ -14909,9 +14926,9 @@ type-is@~1.6.17, type-is@~1.6.18: mime-types "~2.1.24" type@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/type/-/type-1.0.1.tgz#084c9a17fcc9151a2cdb1459905c2e45e4bb7d61" - integrity sha512-MAM5dBMJCJNKs9E7JXo4CXRAansRfG0nlJxW7Wf6GZzSOvH31zClSaHdIMWLehe/EGMBkqeC55rrkaOr5Oo7Nw== + version "1.2.0" + resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0" + integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg== typed-styles@^0.0.7: version "0.0.7" @@ -15355,12 +15372,7 @@ uuid@^2.0.2: resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a" integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho= -uuid@^3.1.0: - version "3.3.2" - resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131" - integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA== - -uuid@^3.3.2: +uuid@^3.1.0, uuid@^3.3.2: version "3.3.3" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866" integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==