This repository has been archived by the owner on May 7, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* added Messages component. Exports different message types: alerts and wells. Needs a test * added tests to Message components * updated all pages and forms using alerts * linted
- Loading branch information
1 parent
487c11d
commit 388dbad
Showing
17 changed files
with
284 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.