added Messages component.

f2/src/CancelPage.js

@@ -4,7 +4,7 @@ import { Trans } from '@lingui/macro'
 import { H1, H2 } from './components/header'
 import { P } from './components/paragraph'
 import { Layout, Row } from './components/layout'
-import { Stack, Alert, AlertIcon, Box, Icon } from '@chakra-ui/core'
+import { Stack, Box, Icon } from '@chakra-ui/core'
 import { Route } from 'react-router-dom'
 import { Ul } from './components/unordered-list'
 import { Li } from './components/list-item'
@@ -13,6 +13,7 @@ import { useLingui } from '@lingui/react'
 import { useStateValue } from './utils/state'
 import { Page } from './components/Page'
 import { LandingBox } from './components/container'
+import { Alert } from './components/Messages'
 
 export const CancelPage = () => {
   const { i18n } = useLingui()
@@ -91,8 +92,7 @@ export const CancelPage = () => {
             </Ul>
           </Stack>
           <Stack spacing={6}>
-            <Alert status="success">
-              <AlertIcon mt={0} />
+            <Alert status="success" withIcon>
               <Trans id="thankYouPage.safelyCloseWindow" />
             </Alert>
             <Box mb="auto">

f2/src/FinalFeedbackThanksPage.js

@@ -4,7 +4,8 @@ import { Trans } from '@lingui/macro'
 import { H1 } from './components/header'
 import { TrackPageViews } from './TrackPageViews'
 import { Layout } from './components/layout'
-import { Stack, Alert, AlertIcon } from '@chakra-ui/core'
+import { Stack } from '@chakra-ui/core'
+import { Alert } from './components/Messages'
 
 export const FinalFeedbackThanksPage = () => {
   return (
@@ -14,8 +15,7 @@ export const FinalFeedbackThanksPage = () => {
         <H1>
           <Trans id="finalFeedbackThanks.title" />
         </H1>
-        <Alert status="success">
-          <AlertIcon mt={0} />
+        <Alert status="success" withIcon>
           <Trans id="thankYouPage.safelyCloseWindow" />
         </Alert>
       </Stack>

f2/src/LandingPage.js

@@ -11,9 +11,10 @@ import { Ul } from './components/unordered-list'
 import { Li } from './components/list-item'
 import { A } from './components/link'
 import { Layout } from './components/layout'
-import { Stack, Icon, Alert, AlertIcon } from '@chakra-ui/core'
+import { Stack, Icon } from '@chakra-ui/core'
 import { useStateValue } from './utils/state'
 import { Page } from './components/Page'
+import { Well } from './components/Messages'
 
 export const LandingPage = props => {
   const { i18n } = useLingui()
@@ -90,10 +91,9 @@ export const LandingPage = props => {
                 </Stack>
               </Stack>
 
-              <Alert status="success" backgroundColor="blue.100">
-                <AlertIcon name="info-outline" color="blue.800" />
+              <Well variantColor="blue">
                 <Trans id="landingPage.warning" />
-              </Alert>
+              </Well>
 
               <H2>
                 <Trans id="landingPage.reportingOptions" />

f2/src/StartPage.js

@@ -9,10 +9,11 @@ import { H1 } from './components/header'
 import { Ul } from './components/unordered-list'
 import { Li } from './components/list-item'
 import { Layout } from './components/layout'
-import { Stack, Icon, Alert, AlertIcon } from '@chakra-ui/core'
+import { Stack, Icon } from '@chakra-ui/core'
 import { useStateValue } from './utils/state'
 import { BackButton } from './components/backbutton'
 import { Page } from './components/Page'
+import { Well } from './components/Messages'
 
 export const StartPage = props => {
   const [state, dispatch] = useStateValue()
@@ -64,11 +65,9 @@ export const StartPage = props => {
                   size="28px"
                 />
               </Button>
-
-              <Alert status="info" backgroundColor="blue.100" mb={10}>
-                <AlertIcon name="info-outline" color="blue.800" />
+              <Well variantColor="blue">
                 <Trans id="startPage.warning" />
-              </Alert>
+              </Well>
             </Stack>
           </Layout>
         </Page>

f2/src/ThankYouPage.js

@@ -10,11 +10,12 @@ import { Li } from './components/list-item'
 import { InfoCard, LandingBox } from './components/container'
 import { Layout, Row } from './components/layout'
 import { Text } from './components/text'
-import { Stack, Alert, AlertIcon, Box, Icon } from '@chakra-ui/core'
+import { Stack, Box, Icon } from '@chakra-ui/core'
 import { useStateValue } from './utils/state'
 import { P } from './components/paragraph'
 import { Route } from 'react-router-dom'
 import { Page } from './components/Page'
+import { Alert } from './components/Messages'
 
 export const ThankYouPage = () => {
   const { i18n } = useLingui()
@@ -51,8 +52,7 @@ export const ThankYouPage = () => {
         zIndex={1}
       >
         {state.doneFinalFeedback && (
-          <Alert status="success">
-            <AlertIcon mt={0} />
+          <Alert status="success" withIcon>
             <Trans id="thankYouPage.feedback.success" />
           </Alert>
         )}
@@ -134,8 +134,7 @@ export const ThankYouPage = () => {
       {/* After help section*/}
       <Layout pt={10} columns={{ base: 4 / 4, lg: 7 / 12 }}>
         <Stack spacing={6}>
-          <Alert status="success">
-            <AlertIcon mt={0} />
+          <Alert status="success" withIcon>
             <Trans id="thankYouPage.safelyCloseWindow" />
           </Alert>
 

f2/src/components/Messages/Messages.stories.mdx

@@ -0,0 +1,103 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'
+import ThemeDecorator from '../../../.storybook/themeDecorator'
+import { Well, Alert } from '.'
+import { H2 } from '../header'
+import { P } from '../paragraph'
+import { Button } from '../button'
+import { A } from '../link'
+
+<Meta
+  title="Components/Messages"
+  component={Well}
+  decorators={[ThemeDecorator]}
+/>
+
+You might want to display some information to help the user, but that is not part of the main content.
+
+# Wells
+
+A well is used to display tips, information or content about the content. The well separates its content from the main content. Before you add a well, you should ask yourself if its content belongs to the main content of the page. If it does, do not use a well. Remember to keep the page content as simple as possible.
+
+<Preview>
+  <Story name="Well">
+    <Well>This content is displayed in a well</Well>
+  </Story>
+</Preview>
+
+## Variants
+
+<Preview>
+  <Story name="Well Variants">
+    <Well variantColor="yellow">
+      This content is displayed in a yellow well
+    </Well>
+  </Story>
+</Preview>
+
+## Composition
+
+You can compose anything in a well, but remember to keep it simple
+
+**Do**: Place a link in a Well
+
+<Preview>
+  <Story name="Well Composition Simple">
+    <Well variantColor="yellow">
+      This content is displayed in a <A href="#">yellow well</A>
+    </Well>
+  </Story>
+</Preview>
+
+**Be careful**: Compose with headings, compose with main interactables like buttons. To set something complex appart, use containers to create a card.
+
+> **Rule of thumb**
+>
+> - A Well substract information from the main content.
+> - A card adds a call to action
+
+<Preview>
+  <Story name="Well Composition Complex">
+    <Well variantColor="green">
+      <H2 mb={4}>Large heading</H2>
+      <P>
+        With a paragraph down here. You can compose anything in a well. Remember
+        to keep things simple
+      </P>
+      <Button>Click here</Button>
+    </Well>
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={Well} />
+
+# Alerts
+
+An alert requires one of four statuses: `success`, `info`, `warning`, or `error`
+
+An Alert should only be used to notify a user of a change on the current page or to notify the user about a change in the status of the app. For example: form submission, max uploaded files
+
+An alert should only contain text
+
+> Form errors are more complex and require the `<ErrorSummary/>` componnet
+
+<Preview>
+  <Story name="Alert">
+    <Alert status="success" withIcon>
+      This is an alert
+    </Alert>
+  </Story>
+</Preview>
+
+You can choose not to display an icon by omitting the `withIcon` prop
+
+<Preview>
+  <Story name="Alert No icon">
+    <Alert status="info">This is an alert without an icon</Alert>
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={Alert} />

f2/src/components/Messages/__tests__/Messages.test.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { render, cleanup } from '@testing-library/react'
+import { ThemeProvider } from 'emotion-theming'
+import theme from '../../../theme'
+import { Alert, Well } from '..'
+
+describe('<Alert>', () => {
+  const foo = 'bar'
+
+  it('Renders an Alert element', () => {
+    const { getAllByText } = render(
+      <ThemeProvider theme={theme}>
+        <Alert status="success">{foo}</Alert>
+      </ThemeProvider>,
+    )
+
+    const test = getAllByText(/bar/)
+    expect(test).toHaveLength(1)
+  })
+
+  it('Has Alert styling properties', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={theme}>
+        <Alert status="success">{foo}</Alert>
+      </ThemeProvider>,
+    )
+
+    const test = getByText(/bar/)
+    expect(test).toHaveStyleRule('background-color', expect.any(String))
+    expect(test).toHaveStyleRule('border-left', '3px')
+    expect(test).not.toHaveStyleRule('border-radius')
+  })
+})
+
+describe('<Well>', () => {
+  afterEach(cleanup)
+  const foo = 'bar'
+
+  it('Renders a Well element', () => {
+    const { getAllByText } = render(
+      <ThemeProvider theme={theme}>
+        <Well>{foo}</Well>
+      </ThemeProvider>,
+    )
+
+    const test = getAllByText(/bar/)
+    expect(test).toHaveLength(1)
+  })
+
+  it('Has Well styling properties', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={theme}>
+        <Well>{foo}</Well>
+      </ThemeProvider>,
+    )
+
+    const test = getByText(/bar/)
+    expect(test).toHaveStyleRule('background-color', expect.any(String))
+    expect(test).toHaveStyleRule('box-shadow', expect.any(String))
+    expect(test).toHaveStyleRule('box-shadow', expect.any(String))
+    expect(test).toHaveStyleRule('border', expect.any(String))
+    expect(test).toHaveStyleRule('border-radius', expect.any(String))
+  })
+})

f2/src/components/Messages/index.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import canada from '../../theme/canada'
+import { Container } from '../container'
+import { statuses, Alert as ChakraAlert, AlertIcon } from '@chakra-ui/core'
+
+export const Well = ({ variantColor, ...props }) => (
+  <Container
+    rounded="4px"
+    boxShadow="innerShadow"
+    p={4}
+    border="1px"
+    {...(variantColor && {
+      borderColor: canada.colors[variantColor][400],
+      bg: canada.colors[variantColor][200],
+      boxShadow: `inset 0 1px 1px ${canada.colors[variantColor][300]}`,
+    })}
+    {...props}
+  />
+)
+
+Well.defaultProps = {
+  variantColor: 'gray',
+}
+
+Well.propTypes = {
+  variantColor: PropTypes.string,
+}
+
+export const Alert = ({ status, withIcon, ...props }) => {
+  //canada.colors[statuses[status].color][700]
+  //This gets the color of status defined by chakra-ui :
+  //    statuses[status].color = statuses[info].color = blue
+  //Then we use it to get a color shade in the theme file:
+  //    canada.colors[blue][800]
+
+  return (
+    <ChakraAlert
+      status={status}
+      borderLeft="3px"
+      borderColor={canada.colors[statuses[status].color][800]}
+      {...props}
+    >
+      {withIcon && (
+        <AlertIcon
+          name={`${statuses[status].icon}`}
+          color={canada.colors[statuses[status].color][800]}
+        />
+      )}
+
+      {props.children}
+    </ChakraAlert>
+  )
+}
+
+Alert.defaultProps = {}
+
+Alert.propTypes = {
+  status: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired,
+  withIcon: PropTypes.bool,
+}

f2/src/forms/DevicesForm.js

@@ -6,16 +6,11 @@ import { Form, Field } from 'react-final-form'
 import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
 import { TextInput } from '../components/TextInput'
 import { TextArea } from '../components/text-area'
-import {
-  Stack,
-  FormControl,
-  VisuallyHidden,
-  Alert,
-  AlertIcon,
-} from '@chakra-ui/core'
+import { Stack, FormControl, VisuallyHidden } from '@chakra-ui/core'
 import { FormHelperText } from '../components/FormHelperText'
 import { FormLabel } from '../components/FormLabel'
 import { useStateValue } from '../utils/state'
+import { Well } from '../components/Messages'
 
 export const DevicesForm = props => {
   const localOnSubmit = data => {
@@ -91,10 +86,9 @@ export const DevicesForm = props => {
               </FormControl>
             )}
           </Field>
-          <Alert status="success" backgroundColor="blue.100">
-            <AlertIcon name="info-outline" color="blue.800" />
+          <Well variantColor="blue">
             <Trans id="devicePage.tip" />
-          </Alert>
+          </Well>
           <NextAndCancelButtons
             next={<Trans id="devicePage.nextPage" />}
             button={<Trans id="devicePage.nextButton" />}