From 1fbf8d895e5c123ca4719bca621bbdc752079e32 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Tue, 8 Oct 2019 11:55:02 +0100 Subject: [PATCH 01/18] :memo: Add committed badge to readme --- README.md | 1 + 1 file changed, 1 insertion(+) 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 From 0e35e04e418ebcd7914db0d2de6b502c26f9f993 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Tue, 8 Oct 2019 12:21:26 +0100 Subject: [PATCH 02/18] :bug: Fix missing key in colors Because: - provides correct reference for react updates - prevents warning in console --- src/util/colors.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 => ( - + ))} ) From c567780b21a36bc246c38405b48af09ab516ba91 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Tue, 8 Oct 2019 12:25:47 +0100 Subject: [PATCH 03/18] :bug: Forwards refs for Box and Flex Because: - This is required to fix the tooltips in colours.mdx It may be necessary in other components too, but leave until required --- src/components/box/Box.tsx | 22 ++++++++++------------ src/components/flex/Flex.tsx | 6 ++++-- 2 files changed, 14 insertions(+), 14 deletions(-) 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/components/flex/Flex.tsx b/src/components/flex/Flex.tsx index a43cc21b..c1447334 100644 --- a/src/components/flex/Flex.tsx +++ b/src/components/flex/Flex.tsx @@ -3,6 +3,8 @@ import { BoxProps, Box } from '../box/Box' export type FlexProps = Omit -export const Flex: React.FC = (props: FlexProps) => ( - +export type FlexRef = HTMLDivElement + +export const Flex = React.forwardRef( + (props: FlexProps, ref) => ) From b8ceedf4103ae611d60e61dd15d1cd70193e28b0 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Tue, 8 Oct 2019 15:15:30 +0100 Subject: [PATCH 04/18] :sparkle: Errors for incorrect spacing Because: - So user can see when prop useed incorrectly Just set to throw rather than recover, so early warning and the usage error should be fixed. fixes #19 --- src/theme/theme.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 20e4264c..dedf1fe4 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` +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, From ed4069131e61094f3e66a4f3ece25d93d1a8fa8b Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Tue, 8 Oct 2019 15:16:10 +0100 Subject: [PATCH 05/18] :bug: Add key to Content Because: - to fix warning --- example/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) => ( - + ))} From 2870d6917a0ca72fe9d8f10aa03cc32794235617 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Tue, 8 Oct 2019 15:41:12 +0100 Subject: [PATCH 06/18] :sparkles: Go to Introduction page on load Because: - This is the correct greeting page Uses the STORIES_CONFIGURED notification and checks for empty story path. May be some circumstances where the url differs and this is not sufficient. Also not sue how this works in reply as docs only. --- .storybook/addons.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) 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') + } + }) }) From 31ea494714b77b19e1a85d07e7e3511b113f0fa0 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Tue, 8 Oct 2019 21:22:55 +0100 Subject: [PATCH 07/18] :memo: Improving documentation Because: - will help users Updates index to give a better introduction Improves docs on getting started and design principles --- src/stories/designPrinciples.mdx | 110 +++++++++++++++++++++++++++++++ src/stories/gettingStarted.mdx | 22 +++---- src/stories/index.mdx | 31 +++++---- src/theme/theme.ts | 2 +- 4 files changed, 139 insertions(+), 26 deletions(-) diff --git a/src/stories/designPrinciples.mdx b/src/stories/designPrinciples.mdx index e9e9eef7..0470289a 100644 --- a/src/stories/designPrinciples.mdx +++ b/src/stories/designPrinciples.mdx @@ -1,11 +1,105 @@ import { Meta } 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 [placement props](/todo) 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 margin and padding props take a number from 0 to 6, 0 being no space and 6 is 128px. + + + + 0 + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + + + 5 + + + + 6 + + + + ## Breakpoints +A set of standard breakpoints are defined as: + ``` value |0px 600px 960px 1280px 1920px key |xs sm md lg xl @@ -13,6 +107,22 @@ 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: diff --git a/src/stories/gettingStarted.mdx b/src/stories/gettingStarted.mdx index 63832601..c312394b 100644 --- a/src/stories/gettingStarted.mdx +++ b/src/stories/gettingStarted.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 index 3dbb71c6..4bc388d4 100644 --- a/src/stories/index.mdx +++ b/src/stories/index.mdx @@ -7,7 +7,10 @@ import { version } from '../../package.json' v{version} -This is Committed's design system and should be used to compose web applications. +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. -## Motivation +## Getting Started -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. +Here are a few helpful links for getting started with Committed Components: -Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: +- [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. -- **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. +## 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. -## Next +Regardless of the technologies and tools chosen, we aim to follow these guiding principles: -- [Getting Started](gettingStarted) +- **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/theme/theme.ts b/src/theme/theme.ts index dedf1fe4..65af2988 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -34,7 +34,7 @@ declare module '@material-ui/core/styles/createMuiTheme' { const addTransparency = (color: string) => `${color}88` -const spacing = (factor: number) => { +export const spacing = (factor: number) => { if (factor < 0 || factor > 6) { throw new Error( `Spacing ${factor} invalid, must be between 0 and 6 inclusive` From db1ec8794064d2a7913b21e60cf4f743bfe31eea Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Thu, 10 Oct 2019 11:03:09 +0100 Subject: [PATCH 08/18] :art: Move component stories back to folders Because: - esaier to fine them - more consistent with other use Added `.stories` into the names so this is clearer and allow `.tsx` stories if required. --- .storybook/config.tsx | 2 +- .../appBar.mdx => components/appbar/appBar.stories.mdx} | 0 .../avatar.mdx => components/avatar/avatar.stories.mdx} | 0 .../components/badge.mdx => components/badge/badge.stories.mdx} | 0 .../components/box.mdx => components/box/box.stories.mdx} | 0 .../button.mdx => components/button/button.stories.mdx} | 0 .../components/card.mdx => components/card/card.stories.mdx} | 0 .../checkbox.mdx => components/checkbox/checkbox.stories.mdx} | 0 .../components/chip.mdx => components/chip/chip.stories.mdx} | 0 .../container/container.stories.mdx} | 0 .../divider.mdx => components/divider/divider.stories.mdx} | 0 .../drawer.mdx => components/drawer/drawer.stories.mdx} | 0 .../components/flex.mdx => components/flex/flex.stories.mdx} | 0 .../hidden.mdx => components/hidden/hidden.stories.mdx} | 0 .../iconbutton/iconButton.stories.mdx} | 0 .../components/icon.mdx => components/icons/icon.stories.mdx} | 0 .../components/link.mdx => components/link/link.stories.mdx} | 0 .../loader.mdx => components/loader/loader.stories.mdx} | 0 .../components/logo.mdx => components/logo/logo.stories.mdx} | 0 .../popover.mdx => components/popover/popover.stories.mdx} | 0 .../components/radio.mdx => components/radio/radio.stories.mdx} | 0 .../select.mdx => components/select/select.stories.mdx} | 0 .../slider.mdx => components/slider/slider.stories.mdx} | 0 .../switch.mdx => components/switch/switch.stories.mdx} | 0 .../components/tabs.mdx => components/tabs/tabs.stories.mdx} | 0 .../textfield/textField.stories.mdx} | 0 .../tooltip.mdx => components/tooltip/tooltip.stories.mdx} | 0 .../typography/typography.stories.mdx} | 0 src/stories/{colour.mdx => colour.stories.mdx} | 0 src/stories/components/{dialog.mdx => dialog.stories.mdx} | 0 src/stories/components/{list.mdx => list.stories.mdx} | 0 src/stories/components/{menu.mdx => menu.stories.mdx} | 0 src/stories/components/{table.mdx => table.stories.mdx} | 0 src/stories/components/{toolbar.mdx => toolbar.stories.mdx} | 0 .../{designPrinciples.mdx => designPrinciples.stories.mdx} | 0 src/stories/{gettingStarted.mdx => gettingStarted.stories.mdx} | 0 src/stories/{index.mdx => introduction.stories.mdx} | 0 src/stories/{overview.mdx => overview.stories.mdx} | 0 src/stories/{status.mdx => status.stories.mdx} | 0 39 files changed, 1 insertion(+), 1 deletion(-) rename src/{stories/components/appBar.mdx => components/appbar/appBar.stories.mdx} (100%) rename src/{stories/components/avatar.mdx => components/avatar/avatar.stories.mdx} (100%) rename src/{stories/components/badge.mdx => components/badge/badge.stories.mdx} (100%) rename src/{stories/components/box.mdx => components/box/box.stories.mdx} (100%) rename src/{stories/components/button.mdx => components/button/button.stories.mdx} (100%) rename src/{stories/components/card.mdx => components/card/card.stories.mdx} (100%) rename src/{stories/components/checkbox.mdx => components/checkbox/checkbox.stories.mdx} (100%) rename src/{stories/components/chip.mdx => components/chip/chip.stories.mdx} (100%) rename src/{stories/components/container.mdx => components/container/container.stories.mdx} (100%) rename src/{stories/components/divider.mdx => components/divider/divider.stories.mdx} (100%) rename src/{stories/components/drawer.mdx => components/drawer/drawer.stories.mdx} (100%) rename src/{stories/components/flex.mdx => components/flex/flex.stories.mdx} (100%) rename src/{stories/components/hidden.mdx => components/hidden/hidden.stories.mdx} (100%) rename src/{stories/components/iconButton.mdx => components/iconbutton/iconButton.stories.mdx} (100%) rename src/{stories/components/icon.mdx => components/icons/icon.stories.mdx} (100%) rename src/{stories/components/link.mdx => components/link/link.stories.mdx} (100%) rename src/{stories/components/loader.mdx => components/loader/loader.stories.mdx} (100%) rename src/{stories/components/logo.mdx => components/logo/logo.stories.mdx} (100%) rename src/{stories/components/popover.mdx => components/popover/popover.stories.mdx} (100%) rename src/{stories/components/radio.mdx => components/radio/radio.stories.mdx} (100%) rename src/{stories/components/select.mdx => components/select/select.stories.mdx} (100%) rename src/{stories/components/slider.mdx => components/slider/slider.stories.mdx} (100%) rename src/{stories/components/switch.mdx => components/switch/switch.stories.mdx} (100%) rename src/{stories/components/tabs.mdx => components/tabs/tabs.stories.mdx} (100%) rename src/{stories/components/textField.mdx => components/textfield/textField.stories.mdx} (100%) rename src/{stories/components/tooltip.mdx => components/tooltip/tooltip.stories.mdx} (100%) rename src/{stories/typography.mdx => components/typography/typography.stories.mdx} (100%) rename src/stories/{colour.mdx => colour.stories.mdx} (100%) rename src/stories/components/{dialog.mdx => dialog.stories.mdx} (100%) rename src/stories/components/{list.mdx => list.stories.mdx} (100%) rename src/stories/components/{menu.mdx => menu.stories.mdx} (100%) rename src/stories/components/{table.mdx => table.stories.mdx} (100%) rename src/stories/components/{toolbar.mdx => toolbar.stories.mdx} (100%) rename src/stories/{designPrinciples.mdx => designPrinciples.stories.mdx} (100%) rename src/stories/{gettingStarted.mdx => gettingStarted.stories.mdx} (100%) rename src/stories/{index.mdx => introduction.stories.mdx} (100%) rename src/stories/{overview.mdx => overview.stories.mdx} (100%) rename src/stories/{status.mdx => status.stories.mdx} (100%) 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/src/stories/components/appBar.mdx b/src/components/appbar/appBar.stories.mdx similarity index 100% rename from src/stories/components/appBar.mdx rename to src/components/appbar/appBar.stories.mdx 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/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/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/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/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 100% rename from src/stories/components/radio.mdx rename to src/components/radio/radio.stories.mdx 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 100% rename from src/stories/components/slider.mdx rename to src/components/slider/slider.stories.mdx 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 100% rename from src/stories/colour.mdx rename to src/stories/colour.stories.mdx 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 100% rename from src/stories/components/list.mdx rename to src/stories/components/list.stories.mdx diff --git a/src/stories/components/menu.mdx b/src/stories/components/menu.stories.mdx similarity index 100% rename from src/stories/components/menu.mdx rename to src/stories/components/menu.stories.mdx diff --git a/src/stories/components/table.mdx b/src/stories/components/table.stories.mdx similarity index 100% rename from src/stories/components/table.mdx rename to src/stories/components/table.stories.mdx 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.stories.mdx similarity index 100% rename from src/stories/designPrinciples.mdx rename to src/stories/designPrinciples.stories.mdx diff --git a/src/stories/gettingStarted.mdx b/src/stories/gettingStarted.stories.mdx similarity index 100% rename from src/stories/gettingStarted.mdx rename to src/stories/gettingStarted.stories.mdx diff --git a/src/stories/index.mdx b/src/stories/introduction.stories.mdx similarity index 100% rename from src/stories/index.mdx rename to src/stories/introduction.stories.mdx diff --git a/src/stories/overview.mdx b/src/stories/overview.stories.mdx similarity index 100% rename from src/stories/overview.mdx rename to src/stories/overview.stories.mdx 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 From 009ecd48b0d9da157d46615d9c83493e069e7fe6 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Thu, 10 Oct 2019 11:05:51 +0100 Subject: [PATCH 09/18] :construction_worker: Do not detach sonar in drone build Because: - This may case it to fail --- .drone.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.drone.yml b/.drone.yml index 947a292e..64790146 100644 --- a/.drone.yml +++ b/.drone.yml @@ -29,7 +29,6 @@ steps: - name: code-analysis image: committed/drone-sonarqube-node - detach: true environment: SONAR_HOST: from_secret: sonar_host From 21f83ebd6a97aeaf0fd26c9aa79ec13cc5b484dd Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Thu, 10 Oct 2019 12:57:56 +0100 Subject: [PATCH 10/18] :construction_worker: Improvements to drone build Removes unused environemnt Don't run quality on master when PR Remove new version to dev --- .drone.yml | 19 +++++++++++++++++-- src/components/card/Card.tsx | 2 +- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/.drone.yml b/.drone.yml index 64790146..816eb905 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: @@ -39,6 +38,9 @@ steps: when: branch: - master + event: + exclude: + - pull_request - name: slack image: plugins/slack @@ -50,5 +52,18 @@ steps: from_secret: slack_template when: status: - - success - failure + + - name: slack + 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/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} From 791c8e0a5ddecd8be5f357b2de145256ba90b7a3 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Thu, 10 Oct 2019 13:19:20 +0100 Subject: [PATCH 11/18] :memo: Add Spacing principle - describes how px and % are worked out --- src/stories/designPrinciples.stories.mdx | 27 +++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/stories/designPrinciples.stories.mdx b/src/stories/designPrinciples.stories.mdx index 0470289a..42edb812 100644 --- a/src/stories/designPrinciples.stories.mdx +++ b/src/stories/designPrinciples.stories.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs/blocks' +import { Meta, Preview } from '@storybook/addon-docs/blocks' import { Flex, Box, theme, colors } from '../' @@ -20,7 +20,7 @@ In this library, we only aim to support simple components (or [atoms](http://ato 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 [placement props](/todo) to simplify +No assumptions are made about the placement of the component but we provide [placement props][placement] to simplify the location of the components. ## Spacing @@ -28,7 +28,8 @@ the location of the components. 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 margin and padding props take a number from 0 to 6, 0 being no space and 6 is 128px. +The [placement props][placement] 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. @@ -96,6 +97,24 @@ The margin and padding props take a number from 0 to 6, 0 being no space and 6 i +## Sizing + +The [placement props][placement] 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: @@ -150,3 +169,5 @@ const styles = theme => ({ } }) ``` + +[placement]: /todo From ff8100f024792bf3a9563f8f07f79d6a58521bb9 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Thu, 10 Oct 2019 14:01:05 +0100 Subject: [PATCH 12/18] :bug: Fix duplicate name in drone.yml --- .drone.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.drone.yml b/.drone.yml index 816eb905..167d0143 100644 --- a/.drone.yml +++ b/.drone.yml @@ -54,7 +54,7 @@ steps: status: - failure - - name: slack + - name: announce image: plugins/slack settings: channel: group-dev From 7ef8281d0413225ea02a54b4a870a0b955dafbae Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Thu, 10 Oct 2019 15:22:04 +0100 Subject: [PATCH 13/18] :memo: Updating color docs capitalizes all colors --- src/stories/colour.stories.mdx | 8 ++ src/theme/colors.ts | 250 ++++++++++++++++----------------- 2 files changed, 133 insertions(+), 125 deletions(-) diff --git a/src/stories/colour.stories.mdx b/src/stories/colour.stories.mdx index 9032c4fa..04d5acd1 100644 --- a/src/stories/colour.stories.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/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' } From 6a83eb60c79f8f2561916f158105706de8c33061 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Thu, 10 Oct 2019 16:18:51 +0100 Subject: [PATCH 14/18] :art: Improve overview Because: - will be cleaer and more usefull --- src/components/flex/Flex.tsx | 14 + src/components/index.ts | 6 + src/components/radio/radio.stories.mdx | 2 +- src/components/slider/slider.stories.mdx | 2 +- src/stories/components/list.stories.mdx | 2 +- src/stories/components/menu.stories.mdx | 2 +- src/stories/components/table.stories.mdx | 2 +- src/stories/overview.stories.mdx | 746 +++++++++++------------ 8 files changed, 390 insertions(+), 386 deletions(-) diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx index c1447334..d3453c1c 100644 --- a/src/components/flex/Flex.tsx +++ b/src/components/flex/Flex.tsx @@ -2,9 +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 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/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/components/radio/radio.stories.mdx b/src/components/radio/radio.stories.mdx index 485b523c..ddbef688 100644 --- a/src/components/radio/radio.stories.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/components/slider/slider.stories.mdx b/src/components/slider/slider.stories.mdx index 5770db37..82a6efc9 100644 --- a/src/components/slider/slider.stories.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/list.stories.mdx b/src/stories/components/list.stories.mdx index 726f2403..f1638598 100644 --- a/src/stories/components/list.stories.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.stories.mdx b/src/stories/components/menu.stories.mdx index c16ce735..eb9a8474 100644 --- a/src/stories/components/menu.stories.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.stories.mdx b/src/stories/components/table.stories.mdx index 5c498ef1..0122dfc3 100644 --- a/src/stories/components/table.stories.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/overview.stories.mdx b/src/stories/overview.stories.mdx index 1ba4449f..083529f6 100644 --- a/src/stories/overview.stories.mdx +++ b/src/stories/overview.stories.mdx @@ -1,147 +1,75 @@ 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 '../' +import * as C from '../' - + - - + + Buttons + + + + - - - - - - - - - - - - - - - - - - - - - - + + + + + Icon Buttons + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + Badges + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + Avatars + + + - + CF - - + + SH - - - - - - - - - - - - + + + + + + + + + + + + + Chips + + + - } + } label="Chip" onDelete={() => {}} /> - - } + + } label="Chip" onClick={() => {}} onDelete={() => {}} color="primary" /> - } + icon={} label="Chip" onClick={() => {}} color="secondary" /> - - + + + Text Fields + + + event => setValues({ ...values, [name]: event.target.value }) return ( -
- - + + - - - - - - - - - - - {currencies.map(option => ( - + {option.label} - + ))} - - + ))} - - -
+ + + ) })} - + + + + 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. - - - - - - - - + + + + + Card - - - + + + } - checkedIcon={} + checkedIcon={} /> - + } checkedIcon={ - + } /> - - - - - - - - - Title - + + + + + + + + Title + Subtitle - - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - + + + + + Tables + + + - - - - - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) - - - + + + + + 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], @@ -682,21 +658,24 @@ import { ['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]} - + + {row[1]} + {row[2]} + {row[3]} + {row[4]} + ))} - -
- - - + + + + + Tabs + + - - + + - - - - - - + + + + + + Item One - - + + Item Two - - + + Item Three - - + + ) })} - - + + + Typography + + + - - System Typography - h2. Heading - h3. Heading - h4. Heading - + + 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 - + + + + 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. - - - + + + - + From de5d99db1a346c5b3fcd0d33037cbf10b1b72cc5 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Fri, 11 Oct 2019 16:00:20 +0100 Subject: [PATCH 15/18] :package: Update react-docgen-typescript-loader Because: - will improve generated props documents --- package.json | 2 +- yarn.lock | 54 ++++++++++++++++++++++++++++++++-------------------- 2 files changed, 34 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index b0a2b2fe..4aaa58ff 100644 --- a/package.json +++ b/package.json @@ -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/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== From d86340516f9d721ad48e838f71dd5118a250bfb4 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Fri, 11 Oct 2019 16:04:56 +0100 Subject: [PATCH 16/18] :memo: Improve AppBar documentation --- src/components/appbar/AppBar.tsx | 10 ++++++++-- src/components/appbar/appBar.stories.mdx | 15 ++++++++++++++- 2 files changed, 22 insertions(+), 3 deletions(-) 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/components/appbar/appBar.stories.mdx b/src/components/appbar/appBar.stories.mdx index 9594d39e..3221c092 100644 --- a/src/components/appbar/appBar.stories.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 + + From d7fe712f3f10a3a9922311fbb2f1b78de7c9a3b4 Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Fri, 11 Oct 2019 16:06:09 +0100 Subject: [PATCH 17/18] :memo: Adding positioning documentation Because: - save a lot of repetition in docs - easier to separate out and see real props on the components --- src/stories/designPrinciples.stories.mdx | 8 +- src/stories/positioning.stories.mdx | 157 ++++++++ src/util/docsutil.tsx | 455 +++++++++++++++++++++++ 3 files changed, 616 insertions(+), 4 deletions(-) create mode 100644 src/stories/positioning.stories.mdx create mode 100644 src/util/docsutil.tsx diff --git a/src/stories/designPrinciples.stories.mdx b/src/stories/designPrinciples.stories.mdx index 42edb812..ffbfeee6 100644 --- a/src/stories/designPrinciples.stories.mdx +++ b/src/stories/designPrinciples.stories.mdx @@ -20,7 +20,7 @@ In this library, we only aim to support simple components (or [atoms](http://ato 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 [placement props][placement] to simplify +No assumptions are made about the placement of the component but we provide [positioning props][positioning] to simplify the location of the components. ## Spacing @@ -28,7 +28,7 @@ the location of the components. 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 [placement props][placement] that deal with spacing (e.g. margin and padding) take a number from 0 to 6 to select the correct +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. @@ -99,7 +99,7 @@ spacing, 0 being no space and 6 is 128px. ## Sizing -The [placement props][placement] 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"`, +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%"`. @@ -170,4 +170,4 @@ const styles = theme => ({ }) ``` -[placement]: /todo +[positioning]: /?path=/docs/design-system-positioning--page 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/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 From 73d62d67d46ac260ad366756d12fc9b969e6631b Mon Sep 17 00:00:00 2001 From: Stuart Hendren Date: Fri, 11 Oct 2019 16:09:51 +0100 Subject: [PATCH 18/18] :bookmark: version bump 0.0.16 Because: - release of new documentation --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4aaa58ff..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",