Skip to content

Commit 867c357

Browse files
emortlockemortlock
authored
Added list component (#30)
1 parent d3066f6 commit 867c357

File tree

8 files changed

+250
-84
lines changed

8 files changed

+250
-84
lines changed

‎src/components/button/readme.md‎

Lines changed: 56 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,75 @@
11
Fill button:
22

33
```jsx
4-
<ul className="list-reset flex justify-around flex-wrap">
5-
<li>
6-
<FillButton brand="primary">Primary</FillButton>
7-
</li>
8-
<li>
9-
<FillButton brand="secondary">Secondary</FillButton>
10-
</li>
11-
<li>
12-
<FillButton brand="danger">Danger</FillButton>
13-
</li>
14-
<li>
15-
<FillButton brand="warning">Warning</FillButton>
16-
</li>
17-
<li>
18-
<FillButton brand="info">Info</FillButton>
19-
</li>
20-
<li>
21-
<FillButton bg="purple" text="white">
22-
Custom
23-
</FillButton>
24-
</li>
25-
</ul>
4+
<List inline padding>
5+
<FillButton brand="primary">Primary</FillButton>
6+
7+
<FillButton brand="secondary">Secondary</FillButton>
8+
9+
<FillButton brand="danger">Danger</FillButton>
10+
11+
<FillButton brand="warning">Warning</FillButton>
12+
13+
<FillButton brand="info">Info</FillButton>
14+
15+
<FillButton bg="purple" text="white">
16+
Custom
17+
</FillButton>
18+
</List>
2619
```
2720

2821
Outline button:
2922

3023
```jsx
31-
<ul className="list-reset flex justify-around flex-wrap">
32-
<li>
33-
<OutlineButton brand="primary">Primary</OutlineButton>
34-
</li>
35-
<li>
36-
<OutlineButton brand="secondary">Secondary</OutlineButton>
37-
</li>
38-
<li>
39-
<OutlineButton brand="danger">Danger</OutlineButton>
40-
</li>
41-
<li>
42-
<OutlineButton brand="warning">Warning</OutlineButton>
43-
</li>
44-
<li>
45-
<OutlineButton brand="info">Info</OutlineButton>
46-
</li>
47-
<li>
48-
<OutlineButton border="purple" text="white">
49-
Custom
50-
</OutlineButton>
51-
</li>
52-
</ul>
24+
<List inline padding>
25+
<OutlineButton brand="primary">Primary</OutlineButton>
26+
27+
<OutlineButton brand="secondary">Secondary</OutlineButton>
28+
29+
<OutlineButton brand="danger">Danger</OutlineButton>
30+
31+
<OutlineButton brand="warning">Warning</OutlineButton>
32+
33+
<OutlineButton brand="info">Info</OutlineButton>
34+
35+
<OutlineButton border="purple" text="white">
36+
Custom
37+
</OutlineButton>
38+
</List>
5339
```
5440

5541
Text button:
5642

5743
```jsx
58-
<ul className="list-reset flex justify-around flex-wrap">
59-
<li>
60-
<TextButton brand="primary">Primary</TextButton>
61-
</li>
62-
<li>
63-
<TextButton brand="secondary">Secondary</TextButton>
64-
</li>
65-
<li>
66-
<TextButton brand="danger">Danger</TextButton>
67-
</li>
68-
<li>
69-
<TextButton brand="warning">Warning</TextButton>
70-
</li>
71-
<li>
72-
<TextButton brand="info">Info</TextButton>
73-
</li>
74-
<li>
75-
<TextButton text="purple">Custom</TextButton>
76-
</li>
77-
</ul>
44+
<List inline padding>
45+
<TextButton brand="primary">Primary</TextButton>
46+
47+
<TextButton brand="secondary">Secondary</TextButton>
48+
49+
<TextButton brand="danger">Danger</TextButton>
50+
51+
<TextButton brand="warning">Warning</TextButton>
52+
53+
<TextButton brand="info">Info</TextButton>
54+
55+
<TextButton text="purple">Custom</TextButton>
56+
</List>
7857
```
7958

8059
Link button:
8160

8261
```jsx
83-
<ul className="list-reset flex justify-around flex-wrap">
84-
<li>
85-
<LinkButton brand="primary">Primary</LinkButton>
86-
</li>
87-
<li>
88-
<LinkButton brand="secondary">Secondary</LinkButton>
89-
</li>
90-
<li>
91-
<LinkButton brand="danger">Danger</LinkButton>
92-
</li>
93-
<li>
94-
<LinkButton brand="warning">Warning</LinkButton>
95-
</li>
96-
<li>
97-
<LinkButton brand="info">Info</LinkButton>
98-
</li>
99-
<li>
100-
<LinkButton text="purple">Custom</LinkButton>
101-
</li>
102-
</ul>
62+
<List inline padding>
63+
<LinkButton brand="primary">Primary</LinkButton>
64+
65+
<LinkButton brand="secondary">Secondary</LinkButton>
66+
67+
<LinkButton brand="danger">Danger</LinkButton>
68+
69+
<LinkButton brand="warning">Warning</LinkButton>
70+
71+
<LinkButton brand="info">Info</LinkButton>
72+
73+
<LinkButton text="purple">Custom</LinkButton>
74+
</List>
10375
```

‎src/components/list/List.jsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import classnames from 'classnames'
4+
5+
import { BaseComponent } from '../tailwind'
6+
import { withTheme } from '../theme'
7+
8+
const List = ({
9+
theme,
10+
is,
11+
children,
12+
className,
13+
padding,
14+
reset,
15+
inline,
16+
justified,
17+
fullWidth,
18+
ordered,
19+
...rest
20+
}) => (
21+
<BaseComponent
22+
is={ordered ? 'ol' : is}
23+
m={{ b: theme.spacing.md }}
24+
flex={justified || fullWidth || (inline ? [true, 'wrap'] : undefined)}
25+
justify={justified ? 'between' : undefined}
26+
className={classnames(
27+
(reset || inline || justified || fullWidth) && 'list-reset',
28+
className,
29+
)}
30+
{...rest}
31+
>
32+
{React.Children.map(children, child => (
33+
<li
34+
className={classnames(
35+
padding && !justified && !fullWidth && `mb-${theme.spacing.sm}`,
36+
inline && `mr-${theme.spacing.sm}`,
37+
fullWidth && 'flex-1',
38+
)}
39+
>
40+
{child}
41+
</li>
42+
))}
43+
</BaseComponent>
44+
)
45+
46+
List.propTypes = {
47+
theme: PropTypes.shape({}).isRequired,
48+
is: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
49+
children: PropTypes.node,
50+
className: PropTypes.string,
51+
padding: PropTypes.bool,
52+
reset: PropTypes.bool,
53+
inline: PropTypes.bool,
54+
justified: PropTypes.bool,
55+
fullWidth: PropTypes.bool,
56+
ordered: PropTypes.bool,
57+
}
58+
59+
List.defaultProps = {
60+
is: 'ul',
61+
children: undefined,
62+
className: undefined,
63+
padding: false,
64+
reset: false,
65+
inline: false,
66+
justified: false,
67+
fullWidth: false,
68+
ordered: false,
69+
}
70+
71+
export { List as component }
72+
export default withTheme(List)

‎src/components/list/__tests__/List.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react'
2+
import { shallow } from 'enzyme'
3+
4+
import { component as List } from '../List'
5+
import { defaultTheme } from '../../theme'
6+
7+
const setup = (testProps = {}) => {
8+
const props = Object.assign({ theme: defaultTheme }, testProps)
9+
10+
const wrapper = shallow(
11+
<List inline {...props}>
12+
<span>One</span>
13+
<span>Two</span>
14+
<span>Three</span>
15+
</List>,
16+
)
17+
18+
return {
19+
props,
20+
wrapper,
21+
}
22+
}
23+
24+
describe('List', () => {
25+
it('renders matching snapshot', () => {
26+
const { wrapper } = setup()
27+
28+
expect(wrapper).toMatchSnapshot()
29+
})
30+
})

‎src/components/list/__tests__/__snapshots__/List.jsx.snap‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`List renders matching snapshot 1`] = `
4+
<BaseComponent
5+
className="list-reset"
6+
flex={
7+
Array [
8+
true,
9+
"wrap",
10+
]
11+
}
12+
is="ul"
13+
m={
14+
Object {
15+
"b": 4,
16+
}
17+
}
18+
>
19+
<li
20+
className="mr-2"
21+
key=".0"
22+
>
23+
<span>
24+
One
25+
</span>
26+
</li>
27+
<li
28+
className="mr-2"
29+
key=".1"
30+
>
31+
<span>
32+
Two
33+
</span>
34+
</li>
35+
<li
36+
className="mr-2"
37+
key=".2"
38+
>
39+
<span>
40+
Three
41+
</span>
42+
</li>
43+
</BaseComponent>
44+
`;

‎src/components/list/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as List } from './List'

‎src/components/list/readme.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
Simple list:
2+
3+
```jsx
4+
<List padding ordered>
5+
<Text>One</Text>
6+
<Text>Two</Text>
7+
<Text>Three</Text>
8+
</List>
9+
```
10+
11+
Inline list:
12+
13+
```jsx
14+
<List padding inline>
15+
<Text>One</Text>
16+
<Text>Two</Text>
17+
<Text>Three</Text>
18+
</List>
19+
```
20+
21+
Justified list:
22+
23+
```jsx
24+
<List justified>
25+
<Text>One</Text>
26+
<Text>Two</Text>
27+
<Text>Three</Text>
28+
</List>
29+
```
30+
31+
Full width list:
32+
33+
```jsx
34+
<List fullWidth>
35+
<Text text="center" p={2} bg="grey-lighter" block>
36+
One
37+
</Text>
38+
<Text text="center" p={2} bg="grey-light" block>
39+
Two
40+
</Text>
41+
<Text text="center" p={2} bg="grey-lighter" block>
42+
Three
43+
</Text>
44+
</List>
45+
```

‎src/components/tailwind/tailwindProps.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const propTypes = {
1212
absolute: PropTypes.bool,
1313
align: PropTypes.string,
1414
appearance: PropTypes.oneOf(['none']),
15+
block: PropTypes.bool,
1516
bg: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
1617
border: PropTypes.oneOfType([
1718
PropTypes.string,

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export * from './components/footer'
66
export * from './components/form'
77
export * from './components/grid'
88
export * from './components/header'
9+
export * from './components/list'
910
export * from './components/main'
1011
export * from './components/typography'
1112
export * from './components/visuallyHidden'

0 commit comments

Comments
 (0)