-
Notifications
You must be signed in to change notification settings - Fork 179
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components): add Box primitive to components library (#5665)
- Loading branch information
Showing
17 changed files
with
504 additions
and
140 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| // @flow | ||
| import styled from 'styled-components' | ||
|
|
||
| import * as StyleProps from './style-props' | ||
|
|
||
| import type { StyledComponent } from 'styled-components' | ||
|
|
||
| export type BoxProps = {| | ||
| ...StyleProps.ColorProps, | ||
| ...StyleProps.SpacingProps, | ||
| ...StyleProps.TypographyProps, | ||
| |} | ||
|
|
||
| /** | ||
| * Box primitive | ||
| * | ||
| * @component | ||
| */ | ||
| export const Box: StyledComponent<BoxProps, {||}, HTMLDivElement> = styled.div` | ||
| ${StyleProps.colorStyles} | ||
| ${StyleProps.spacingStyles} | ||
| ${StyleProps.typographyStyles} | ||
| ` |
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,28 @@ | ||
| Simple Box primitive. Renders a `div` by default with various styling props for color, spacing, and typography | ||
|
|
||
| ```js | ||
| import { | ||
| Icon, | ||
| C_DARK_GRAY, | ||
| C_WHITE, | ||
| SPACING_2, | ||
| SPACING_3, | ||
| } from '@opentrons/components' | ||
| ;<Box | ||
| color={C_WHITE} | ||
| backgroundColor={C_DARK_GRAY} | ||
| paddingX={SPACING_3} | ||
| paddingY={SPACING_2} | ||
| > | ||
| hello world | ||
| </Box> | ||
| ``` | ||
|
|
||
| `<Box>` is a [StyledComponent](https://styled-components.com/docs/basics#getting-started), and accepts an `as` prop to render as any other DOM element or React component. | ||
|
|
||
| ```js | ||
| <Box as="ul" paddingLeft={0}> | ||
| <li>hello</li> | ||
| <li>world</li> | ||
| </Box> | ||
| ``` |
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,59 @@ | ||
| // @flow | ||
| import * as React from 'react' | ||
| import { shallow } from 'enzyme' | ||
|
|
||
| import { | ||
| C_WHITE, | ||
| SPACING_AUTO, | ||
| SPACING_1, | ||
| FONT_SIZE_BODY_1, | ||
| } from '../../styles' | ||
| import { Box } from '..' | ||
|
|
||
| describe('Box primitive component', () => { | ||
| it('should be a simple div', () => { | ||
| const wrapper = shallow(<Box />) | ||
| expect(wrapper.exists('div')).toBe(true) | ||
| }) | ||
|
|
||
| it('should accept an `as` prop', () => { | ||
| const wrapper = shallow(<Box as="nav" />) | ||
| expect(wrapper.exists('nav')).toBe(true) | ||
| }) | ||
|
|
||
| it('should accept an `className` prop', () => { | ||
| const wrapper = shallow(<Box className="extra-class" />) | ||
| expect(wrapper.hasClass('extra-class')).toBe(true) | ||
| }) | ||
|
|
||
| it('should render children', () => { | ||
| const wrapper = shallow( | ||
| <Box> | ||
| <span data-test="child" /> | ||
| </Box> | ||
| ) | ||
| expect(wrapper.exists('[data-test="child"]')).toBe(true) | ||
| }) | ||
|
|
||
| it('should take a color prop', () => { | ||
| const wrapper = shallow(<Box color={C_WHITE} />) | ||
| expect(wrapper).toHaveStyleRule('color', '#ffffff') | ||
| }) | ||
|
|
||
| it('should take a backgroundColor prop', () => { | ||
| const wrapper = shallow(<Box backgroundColor={C_WHITE} />) | ||
| expect(wrapper).toHaveStyleRule('background-color', '#ffffff') | ||
| }) | ||
|
|
||
| it('should take spacing props', () => { | ||
| const wrapper = shallow(<Box marginX={SPACING_AUTO} padding={SPACING_1} />) | ||
| expect(wrapper).toHaveStyleRule('margin-left', 'auto') | ||
| expect(wrapper).toHaveStyleRule('margin-right', 'auto') | ||
| expect(wrapper).toHaveStyleRule('padding', SPACING_1) | ||
| }) | ||
|
|
||
| it('should take typography props', () => { | ||
| const wrapper = shallow(<Box fontSize={FONT_SIZE_BODY_1} />) | ||
| expect(wrapper).toHaveStyleRule('font-size', FONT_SIZE_BODY_1) | ||
| }) | ||
| }) |
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.