-
Notifications
You must be signed in to change notification settings - Fork 221
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Update Labs Core stories and add snapshots (#735)
* chore: Update Labs Core stories and add snapshots * fix: Combine Labs/Core visual regression stories Co-authored-by: Alex Nicholls <[email protected]>
- Loading branch information
1 parent
b19ac7c
commit 29c9acb
Showing
2 changed files
with
174 additions
and
72 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,91 +1,84 @@ | ||
| /// <reference path="../../../../../typings.d.ts" /> | ||
| /** @jsx jsx */ | ||
| import {jsx} from '@emotion/core'; | ||
| import {storiesOf} from '@storybook/react'; | ||
| import styled from '@emotion/styled'; | ||
| import withReadme from 'storybook-readme/with-readme'; | ||
| import {spacing} from '@workday/canvas-kit-react-core'; | ||
| import type, {space} from '..'; | ||
|
|
||
| import README from '../README.md'; | ||
|
|
||
| export const inverseStyle = { | ||
| const inverseStyle = { | ||
| display: 'inline-block', | ||
| background: '#667380', | ||
| padding: '2px 8px', | ||
| borderRadius: '3px', | ||
| }; | ||
|
|
||
| storiesOf('Labs|Core/React', module) | ||
| .addDecorator(withReadme(README)) | ||
| .add('Type', () => ( | ||
| <div className="story"> | ||
| <section> | ||
| <h1 style={type.brand1}>Brand 1 Header</h1> | ||
| <h2 style={type.brand2}>Brand 2 header</h2> | ||
| <h1 style={type.h1}>H1 Header</h1> | ||
| <h2 style={type.h2}>H2 Header</h2> | ||
| <h3 style={type.h3}>H3 Header</h3> | ||
| <h4 style={type.h4}>H4 Header</h4> | ||
| <h5 style={type.h5}>H5 Header</h5> | ||
| <p style={type.body}> | ||
| <strong>Body: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde | ||
| ennui. Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth | ||
| kitsch next level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris | ||
| sustainable. Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw | ||
| denim, thundercats salvia intelligentsia jean shorts officia. Heirloom craft beer put a | ||
| bird on it occaecat | ||
| </p> | ||
| <p style={type.body2}> | ||
| <strong>Body 2: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde | ||
| ennui. Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth | ||
| kitsch next level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris | ||
| sustainable. Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw | ||
| denim, thundercats salvia intelligentsia jean shorts officia. Heirloom craft beer put a | ||
| bird on it occaecat | ||
| </p> | ||
| <p style={type.small}> | ||
| <strong>Small: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde | ||
| ennui. Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth | ||
| kitsch next level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris | ||
| sustainable. Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw | ||
| denim, thundercats salvia intelligentsia jean shorts officia. Heirloom craft beer put a | ||
| bird on it occaecat | ||
| </p> | ||
| <hr /> | ||
| export default { | ||
| title: 'Labs|Core/React', | ||
| decorators: [withReadme(README)], | ||
| }; | ||
|
|
||
| export const Type = () => ( | ||
| <section> | ||
| <h1 style={type.brand1}>Brand 1 Header</h1> | ||
| <h2 style={type.brand2}>Brand 2 header</h2> | ||
| <h1 style={type.h1}>H1 Header</h1> | ||
| <h2 style={type.h2}>H2 Header</h2> | ||
| <h3 style={type.h3}>H3 Header</h3> | ||
| <h4 style={type.h4}>H4 Header</h4> | ||
| <h5 style={type.h5}>H5 Header</h5> | ||
| <p style={type.body}> | ||
| <strong>Body: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde ennui. | ||
| Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth kitsch next | ||
| level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris sustainable. | ||
| Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw denim, thundercats | ||
| salvia intelligentsia jean shorts officia. Heirloom craft beer put a bird on it occaecat | ||
| </p> | ||
| <p style={type.body2}> | ||
| <strong>Body 2: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde ennui. | ||
| Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth kitsch next | ||
| level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris sustainable. | ||
| Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw denim, thundercats | ||
| salvia intelligentsia jean shorts officia. Heirloom craft beer put a bird on it occaecat | ||
| </p> | ||
| <p style={type.small}> | ||
| <strong>Small: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde ennui. | ||
| Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth kitsch next | ||
| level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris sustainable. | ||
| Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw denim, thundercats | ||
| salvia intelligentsia jean shorts officia. Heirloom craft beer put a bird on it occaecat | ||
| </p> | ||
| <hr /> | ||
|
|
||
| <h3 style={type.h3}>Variants</h3> | ||
| <h3 style={type.h3}>Variants</h3> | ||
|
|
||
| <span css={[type.body, type.variant.button]}>Button Text</span> | ||
| <br /> | ||
| <span css={[type.body, type.variant.caps]}>Caps Text</span> | ||
| <br /> | ||
| <label css={[type.body, type.variant.label]}>Label Text</label> | ||
| <br /> | ||
| <span css={[type.body, type.variant.hint]}>Hint Text</span> | ||
| <br /> | ||
| <span css={[type.body, type.variant.error]}>Error Text</span> | ||
| <br /> | ||
| <a href="#" css={[type.body, type.variant.link]}> | ||
| Link Text | ||
| </a> | ||
| <br /> | ||
| <span css={[type.body, type.variant.inverse, inverseStyle]}>Inverse Text</span> | ||
| <br /> | ||
| <span css={[type.body, type.variant.mono]}>Mono Text</span> | ||
| </section> | ||
| </div> | ||
| )) | ||
| .add('Space', () => { | ||
| const Box = styled('div')(space); | ||
| <span css={[type.body, type.variant.button]}>Button Text</span> | ||
| <br /> | ||
| <span css={[type.body, type.variant.caps]}>Caps Text</span> | ||
| <br /> | ||
| <label css={[type.body, type.variant.label]}>Label Text</label> | ||
| <br /> | ||
| <span css={[type.body, type.variant.hint]}>Hint Text</span> | ||
| <br /> | ||
| <span css={[type.body, type.variant.error]}>Error Text</span> | ||
| <br /> | ||
| <a href="#" css={[type.body, type.variant.link]}> | ||
| Link Text | ||
| </a> | ||
| <br /> | ||
| <span css={[type.body, type.variant.inverse, inverseStyle]}>Inverse Text</span> | ||
| <br /> | ||
| <span css={[type.body, type.variant.mono]}>Mono Text</span> | ||
| </section> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="story"> | ||
| <div> | ||
| <Box style={{border: '1px solid #eee'}} p={spacing.xl} pb={64} m={40} mx={10}> | ||
| Margin and Padding | ||
| </Box> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }); | ||
| export const Space = () => { | ||
| const Box = styled('div')(space); | ||
| return ( | ||
| <Box style={{border: '1px solid #eee'}} p={spacing.xl} pb={64} m={40} mx={10}> | ||
| Margin and Padding | ||
| </Box> | ||
| ); | ||
| }; |
109 changes: 109 additions & 0 deletions
109
modules/_labs/core/react/stories/stories_visualTesting.tsx
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,109 @@ | ||
| /// <reference path="../../../../../typings.d.ts" /> | ||
| /** @jsx jsx */ | ||
| import {jsx} from '@emotion/core'; | ||
| import styled from '@emotion/styled'; | ||
| import {spacing} from '@workday/canvas-kit-react-core'; | ||
| import type, {space} from '..'; | ||
| import {withSnapshotsEnabled} from '../../../../../utils/storybook'; | ||
|
|
||
| export default withSnapshotsEnabled({ | ||
| title: 'Testing|React/Labs/Core', | ||
| }); | ||
|
|
||
| export const TypeAndSpace = () => { | ||
| const inverseStyle = { | ||
| display: 'inline-block', | ||
| background: '#667380', | ||
| padding: '2px 8px', | ||
| borderRadius: '3px', | ||
| }; | ||
|
|
||
| const Box = styled('div')( | ||
| { | ||
| border: '1px solid #eee', | ||
| }, | ||
| space | ||
| ); | ||
|
|
||
| return ( | ||
| <div> | ||
| <section> | ||
| <h1 style={type.brand1}>Brand 1 Header</h1> | ||
| <h2 style={type.brand2}>Brand 2 header</h2> | ||
| <h1 style={type.h1}>H1 Header</h1> | ||
| <h2 style={type.h2}>H2 Header</h2> | ||
| <h3 style={type.h3}>H3 Header</h3> | ||
| <h4 style={type.h4}>H4 Header</h4> | ||
| <h5 style={type.h5}>H5 Header</h5> | ||
| </section> | ||
| <section> | ||
| <h2 style={type.h2}>Body Text</h2> | ||
| <p style={type.body}> | ||
| <strong>Body: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde | ||
| ennui. Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth | ||
| kitsch next level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris | ||
| sustainable. Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw | ||
| denim, thundercats salvia intelligentsia jean shorts officia. Heirloom craft beer put a | ||
| bird on it occaecat | ||
| </p> | ||
| <p style={type.body2}> | ||
| <strong>Body 2: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde | ||
| ennui. Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth | ||
| kitsch next level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris | ||
| sustainable. Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw | ||
| denim, thundercats salvia intelligentsia jean shorts officia. Heirloom craft beer put a | ||
| bird on it occaecat | ||
| </p> | ||
| <p style={type.small}> | ||
| <strong>Small: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde | ||
| ennui. Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth | ||
| kitsch next level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris | ||
| sustainable. Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw | ||
| denim, thundercats salvia intelligentsia jean shorts officia. Heirloom craft beer put a | ||
| bird on it occaecat | ||
| </p> | ||
| </section> | ||
| <section> | ||
| <h2 style={type.h2}>Text Variants</h2> | ||
| <span css={[type.body, type.variant.button]}>Button Text</span> | ||
| <br /> | ||
| <span css={[type.body, type.variant.caps]}>Caps Text</span> | ||
| <br /> | ||
| <label css={[type.body, type.variant.label]}>Label Text</label> | ||
| <br /> | ||
| <span css={[type.body, type.variant.hint]}>Hint Text</span> | ||
| <br /> | ||
| <span css={[type.body, type.variant.error]}>Error Text</span> | ||
| <br /> | ||
| <a href="#" css={[type.body, type.variant.link]}> | ||
| Link Text | ||
| </a> | ||
| <br /> | ||
| <span css={[type.body, type.variant.inverse, inverseStyle]}>Inverse Text</span> | ||
| <br /> | ||
| <span css={[type.body, type.variant.mono]}>Mono Text</span> | ||
| </section> | ||
| <section> | ||
| <h2 style={type.h2}>Spacing</h2> | ||
| <Box m={spacing.m} p={spacing.m}> | ||
| medium margin and padding | ||
| </Box> | ||
| <Box mx={spacing.m} my={spacing.m} px={spacing.m} py={spacing.m}> | ||
| medium margin (x, y) and padding (x, y) | ||
| </Box> | ||
| <Box | ||
| mt={spacing.m} | ||
| mr={spacing.m} | ||
| mb={spacing.m} | ||
| ml={spacing.m} | ||
| pt={spacing.m} | ||
| pr={spacing.m} | ||
| pb={spacing.m} | ||
| pl={spacing.m} | ||
| > | ||
| medium margin (top, right,left, bottom) and padding (top, right,left, bottom) | ||
| </Box> | ||
| </section> | ||
| </div> | ||
| ); | ||
| }; |