Merge branch 'sh-develop' into je-components

commitd · Nov 5, 2020 · fb8ff5b · fb8ff5b
2 parents dcd614b + 7c56ecb
commit fb8ff5b
Show file tree

Hide file tree

Showing 32 changed files with 1,292 additions and 268 deletions.
diff --git a/example/index.tsx b/example/index.tsx
@@ -127,13 +127,13 @@ const Footer = () => (
 )
 
 const App = () => (
-  <C.ThemeProvider
-    createFonts={() =>
-      Object.assign(C.fonts.defaultFonts, {
+  <C.CustomThemeProvider
+    {...C.createCommittedThemes({
+      fonts: {
         typography: { fontFamily: 'Lato' },
         display: { fontFamily: 'Arciform' },
-      })
-    }
+      },
+    })}
   >
     <C.Box position="relative" minHeight="100vh" bgcolor="background.paper">
       <C.Box pb={footerHeight}>
@@ -142,7 +142,7 @@ const App = () => (
       </C.Box>
       <Footer />
     </C.Box>
-  </C.ThemeProvider>
+  </C.CustomThemeProvider>
 )
 
 ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
@@ -3,15 +3,20 @@ import MaterialCheckbox, {
 } from '@material-ui/core/Checkbox'
 import React from 'react'
 import { CheckMark } from './CheckMark'
+import { CheckMarkProps } from 'components/checkbox/CheckMark'
 
 export type CheckboxProps = MaterialCheckboxProps
 
 export const Checkbox: React.FC<CheckboxProps> = (props: CheckboxProps) => {
   let checkedIcon = props.checkedIcon
   if (!props.icon && !props.checkedIcon) {
-    checkedIcon = (
-      <CheckMark color={props.color === 'default' ? 'inherit' : props.color} />
-    )
+    var color: CheckMarkProps['color'] = 'inherit'
+    if (props.disabled) {
+      color = 'disabled'
+    } else if (props.color !== 'default') {
+      color = props.color
+    }
+    checkedIcon = <CheckMark color={color} />
   }
 
   return <MaterialCheckbox checkedIcon={checkedIcon} {...props} />

diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx
@@ -1,6 +1,7 @@
 import { CssBaseline, Theme } from '@material-ui/core'
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/styles'
 import React, { FC } from 'react'
+import { createCommittedThemes, createMaterialThemes } from './createTheme'
 import { ThemeContext, ThemeController } from './ThemeController'
 import { ThemeChoice } from './types'
 
@@ -59,8 +60,20 @@ const ControlledThemeProvider: FC<ThemeProviderProps> = ({
   )
 }
 
-export const ThemeProvider: FC<ThemeProviderProps> = (props) => (
+/** The provider to use if you want to customise the theme */
+export const CustomThemeProvider: FC<ThemeProviderProps> = (props) => (
   <ThemeController>
     <ControlledThemeProvider {...props} />
   </ThemeController>
 )
+
+/** The (default) provider to use, with Committed styles */
+export const ThemeProvider: FC<Omit<ThemeProviderProps, 'light' | 'dark'>> = (
+  props
+) => <CustomThemeProvider {...props} {...createCommittedThemes()} />
+
+/** A convenience provider to use with default Material Styles. */
+export const MaterialThemeProvider: FC<Omit<
+  ThemeProviderProps,
+  'light' | 'dark'
+>> = (props) => <CustomThemeProvider {...props} {...createMaterialThemes()} />
diff --git a/src/theme/commonTheme.ts b/src/theme/commonTheme.ts
@@ -146,7 +146,7 @@ export const committedOverrides = (
       root: {
         color: palette.grey[500],
         '&$disabled': {
-          color: addTransparency(palette.grey[500]),
+          color: fade(palette.grey[500], 0.7),
         },
       },
       colorPrimary: {
@@ -159,20 +159,23 @@ export const committedOverrides = (
               palette.action.hoverOpacity
             ),
           },
+          '&$disabled': {
+            color: fade(palette.grey[500], 0.7),
+          },
         },
         '& span:nth-of-type(2)': {
           color: palette.brand.main,
         },
         '&$disabled': {
-          color: addTransparency(palette.primary.main),
+          color: fade(palette.grey[500], 0.7),
         },
       },
       colorSecondary: {
         '& span:nth-of-type(2)': {
           color: palette.primary.main,
         },
         '&$disabled': {
-          color: addTransparency(palette.secondary.light),
+          color: fade(palette.grey[500], 0.7),
         },
       },
     },

diff --git a/stories/colour.stories.mdx b/stories/colour.stories.mdx
@@ -1,13 +1,14 @@
 import { Meta } from '@storybook/addon-docs/blocks'
 import CssBaseline from '@material-ui/core/CssBaseline'
-import { ThemeProvider, theme, colors, Flex } from '../src'
+import { ThemeProvider, theme, colors, Flex, Box } from '../src'
+import { SwitchedThemeProvider } from './util/SwitchedThemeProvider'
 import { Palette, Swatch, Colors, Surfaces } from './util'
 
 <Meta title="Design System/Colour" />
 
 ## 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`.
+The main light theme colours. They can be referred 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.
 
 <ThemeProvider choice="light">
@@ -25,7 +26,7 @@ We use the brand colour for accents and highlights, not as the primary colour.
 
 ## Main Dark
 
-The main dark 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`.
+The main dark theme colours. They can be referred 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.
 
 <ThemeProvider choice="dark">
@@ -46,37 +47,39 @@ We use the brand colour for accents and highlights, not as the primary colour.
 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.
 
-<ThemeProvider>
-  <Colors name="red" colors={colors.red} />
-  <Colors name="redVivid" colors={colors.redVivid} />
-  <Colors name="orange" colors={colors.orange} />
-  <Colors name="orangeVivid" colors={colors.orangeVivid} />
-  <Colors name="yellow" colors={colors.yellow} />
-  <Colors name="committedYellow" colors={colors.committedYellow} />
-  <Colors name="yellowVivid" colors={colors.yellowVivid} />
-  <Colors name="limeGreen" colors={colors.limeGreen} />
-  <Colors name="limeGreenVivid" colors={colors.limeGreenVivid} />
-  <Colors name="green" colors={colors.green} />
-  <Colors name="greenVivid" colors={colors.greenVivid} />
-  <Colors name="teal" colors={colors.teal} />
-  <Colors name="tealVivid" colors={colors.tealVivid} />
-  <Colors name="cyan" colors={colors.cyan} />
-  <Colors name="cyanVivid" colors={colors.cyanVivid} />
-  <Colors name="lightBlue" colors={colors.lightBlue} />
-  <Colors name="lightBlueVivid" colors={colors.lightBlueVivid} />
-  <Colors name="blue" colors={colors.blue} />
-  <Colors name="blueVivid" colors={colors.blueVivid} />
-  <Colors name="indigo" colors={colors.indigo} />
-  <Colors name="indigoVivid" colors={colors.indigoVivid} />
-  <Colors name="purple" colors={colors.purple} />
-  <Colors name="purpleVivid" colors={colors.purpleVivid} />
-  <Colors name="magenta" colors={colors.magenta} />
-  <Colors name="magentaVivid" colors={colors.magentaVivid} />
-  <Colors name="pink" colors={colors.pink} />
-  <Colors name="pinkVivid" colors={colors.pinkVivid} />
-  <Colors name="blueGrey" colors={colors.blueGrey} />
-  <Colors name="coolGrey" colors={colors.coolGrey} />
-  <Colors name="grey" colors={colors.grey} />
-  <Colors name="warmGrey" colors={colors.warmGrey} />
-  <Colors name="committedGrey" colors={colors.committedGrey} />
-</ThemeProvider>
+<SwitchedThemeProvider>
+  <Box p={3} bgcolor="background.paper">
+    <Colors name="red" colors={colors.red} />
+    <Colors name="redVivid" colors={colors.redVivid} />
+    <Colors name="orange" colors={colors.orange} />
+    <Colors name="orangeVivid" colors={colors.orangeVivid} />
+    <Colors name="yellow" colors={colors.yellow} />
+    <Colors name="committedYellow" colors={colors.committedYellow} />
+    <Colors name="yellowVivid" colors={colors.yellowVivid} />
+    <Colors name="limeGreen" colors={colors.limeGreen} />
+    <Colors name="limeGreenVivid" colors={colors.limeGreenVivid} />
+    <Colors name="green" colors={colors.green} />
+    <Colors name="greenVivid" colors={colors.greenVivid} />
+    <Colors name="teal" colors={colors.teal} />
+    <Colors name="tealVivid" colors={colors.tealVivid} />
+    <Colors name="cyan" colors={colors.cyan} />
+    <Colors name="cyanVivid" colors={colors.cyanVivid} />
+    <Colors name="lightBlue" colors={colors.lightBlue} />
+    <Colors name="lightBlueVivid" colors={colors.lightBlueVivid} />
+    <Colors name="blue" colors={colors.blue} />
+    <Colors name="blueVivid" colors={colors.blueVivid} />
+    <Colors name="indigo" colors={colors.indigo} />
+    <Colors name="indigoVivid" colors={colors.indigoVivid} />
+    <Colors name="purple" colors={colors.purple} />
+    <Colors name="purpleVivid" colors={colors.purpleVivid} />
+    <Colors name="magenta" colors={colors.magenta} />
+    <Colors name="magentaVivid" colors={colors.magentaVivid} />
+    <Colors name="pink" colors={colors.pink} />
+    <Colors name="pinkVivid" colors={colors.pinkVivid} />
+    <Colors name="blueGrey" colors={colors.blueGrey} />
+    <Colors name="coolGrey" colors={colors.coolGrey} />
+    <Colors name="grey" colors={colors.grey} />
+    <Colors name="warmGrey" colors={colors.warmGrey} />
+    <Colors name="committedGrey" colors={colors.committedGrey} />
+  </Box>
+</SwitchedThemeProvider>
diff --git a/stories/components/appbar/AppBarDocs.tsx b/stories/components/appbar/AppBarDocs.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react'
-import { AppBarProps } from '@material-ui/core/AppBar'
+import * as React from 'react'
+import { AppBarProps } from '../../../src'
 
 export type BaseAppBarProps = Pick<AppBarProps, 'position' | 'color'>
 export type RestAppBarProps = Omit<AppBarProps, keyof BaseAppBarProps>
 
-export const BaseAppBarDocs: FC<BaseAppBarProps> = () => null
-export const RestAppBarDocs: FC<RestAppBarProps> = () => null
+export const BaseAppBarDocs: React.FC<BaseAppBarProps> = () => null
+export const RestAppBarDocs: React.FC<RestAppBarProps> = () => null
diff --git a/stories/components/checkbox/checkbox.stories.mdx b/stories/components/checkbox/checkbox.stories.mdx
@@ -139,6 +139,7 @@ Example with state
           />
           <Checkbox
             checked={checked}
+            color="default"
             disabled
             onChange={(event) => {
               click(event.target.checked)

diff --git a/stories/components/progress/progress.stories.mdx b/stories/components/progress/progress.stories.mdx
@@ -0,0 +1,50 @@
+import {
+  CircularProgress,
+  LinearProgress,
+  Row,
+  Column,
+  Box,
+} from '../../../src'
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'
+
+<Meta title="Components/Progress" component={CircularProgress} />
+
+# Progress
+
+Extends [Material UI Progress](https://material-ui.com/components/progress/)
+
+## Circular
+
+<Canvas>
+  <Story name="default">
+    <Row justifyContent="center">
+      <CircularProgress />
+      <CircularProgress color="secondary" />
+    </Row>
+  </Story>
+</Canvas>
+
+## Linear
+
+<Canvas>
+  <Story name="linear">
+    <Column>
+      <Box p={3}>
+        <LinearProgress />
+      </Box>
+      <Box p={3}>
+        <LinearProgress color="secondary" />
+      </Box>
+    </Column>
+  </Story>
+</Canvas>
+
+## Props
+
+### CircularProgress
+
+<ArgsTable of={CircularProgress} />
+
+### LinearProgress
+
+<ArgsTable of={LinearProgress} />