Skip to content
This repository was archived by the owner on Mar 8, 2023. It is now read-only.

Commit 5e30502

Browse files
soupettesoupette
authored
Merge pull request #143 from strapi/develop
v3.2
2 parents 6e8b3a4 + 9cd2ec3 commit 5e30502

File tree

85 files changed

+1630
-175
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+1630
-175
lines changed

‎.eslintrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"prettier/react",
66
"plugin:jest/recommended"
77
],
8-
"plugins": ["prettier", "jest", "react", "jsx-a11y"],
8+
"plugins": ["prettier", "jest", "react", "react-hooks", "jsx-a11y"],
99
"rules": {
1010
"react/jsx-filename-extension": [
1111
1,
@@ -14,6 +14,7 @@
1414
}
1515
],
1616
"react/prop-types": 2,
17+
"react-hooks/exhaustive-deps": 2,
1718
"no-underscore-dangle": 0,
1819
"import/imports-first": ["error", "absolute-first"],
1920
"import/newline-after-import": "error",

‎docs/stories/components/Button.stories.js

Lines changed: 67 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
faTrashAlt,
1010
faBaseballBall,
1111
} from '@fortawesome/free-solid-svg-icons';
12-
import { Button } from '@buffetjs/core';
12+
import { Button, Flex } from '@buffetjs/core';
1313
import Presentation from '../ui/Presentation';
1414
import Pre from '../ui/Pre';
1515
import Subtitle from '../ui/Subtitle';
@@ -50,6 +50,8 @@ function Example() {
5050
<Button color="${color}" icon={<FontAwesomeIcon icon={faPlus} />} label="${label}" />
5151
5252
<Button color="${color}" icon={<FontAwesomeIcon icon={faPlus} />}>${label}</Button>
53+
54+
<Button color="sucess" isLoading>Submit</Button>
5355
</>
5456
);
5557
}
@@ -58,67 +60,70 @@ function Example() {
5860

5961
<section style={{ marginTop: 32 }}>
6062
<Subtitle style={{ marginBottom: 12 }}>Examples</Subtitle>
61-
<div className="btn-wrapper">
62-
<Button type="submit">Save</Button>
63-
</div>
64-
<div className="btn-wrapper">
65-
<Button type="submit" color="primary" icon>
66-
Add
67-
</Button>
68-
</div>
69-
<div className="btn-wrapper">
70-
<Button type="submit" color="delete">
71-
Delete
72-
</Button>
73-
</div>
74-
<div className="btn-wrapper">
75-
<Button
76-
type="submit"
77-
color="delete"
78-
icon={<FontAwesomeIcon icon={faTrashAlt} />}
79-
>
80-
Delete
81-
</Button>
82-
</div>
83-
<div className="btn-wrapper">
84-
<Button type="submit" color="cancel">
85-
Cancel
86-
</Button>
87-
</div>
88-
<div className="btn-wrapper">
89-
<Button type="submit" color="success">
90-
Submit
91-
</Button>
92-
</div>
93-
<div className="btn-wrapper">
94-
<Button type="submit" color="secondary">
95-
Text
96-
</Button>
97-
</div>
98-
<div className="btn-wrapper">
99-
<Button
100-
type="submit"
101-
color="secondary"
102-
icon={<FontAwesomeIcon icon={faBaseballBall} />}
103-
>
104-
Text
105-
</Button>
106-
</div>
107-
<div className="btn-wrapper">
108-
<Button type="submit" color="none">
109-
Text
110-
</Button>
111-
</div>
112-
<div className="btn-wrapper">
113-
<Button
114-
type="submit"
115-
color="delete"
116-
icon={<FontAwesomeIcon icon={faBaseballBall} />}
117-
disabled
118-
>
119-
Disabled
120-
</Button>
121-
</div>
63+
<Flex flexWrap="wrap">
64+
<div className="btn-wrapper">
65+
<Button type="submit">Save</Button>
66+
</div>
67+
<div className="btn-wrapper">
68+
<Button type="submit" color="primary" icon>
69+
Add
70+
</Button>
71+
</div>
72+
<div className="btn-wrapper">
73+
<Button type="submit" color="delete">
74+
Delete
75+
</Button>
76+
</div>
77+
<div className="btn-wrapper">
78+
<Button
79+
type="submit"
80+
color="delete"
81+
icon={<FontAwesomeIcon icon={faTrashAlt} />}
82+
>
83+
Delete
84+
</Button>
85+
</div>
86+
<div className="btn-wrapper">
87+
<Button type="submit" color="cancel">
88+
Cancel
89+
</Button>
90+
</div>
91+
<div className="btn-wrapper">
92+
<Button type="submit" color="success">
93+
Submit
94+
</Button>
95+
</div>
96+
<div className="btn-wrapper">
97+
<Button type="submit" color="success" isLoading>
98+
Submit
99+
</Button>
100+
</div>
101+
<div className="btn-wrapper">
102+
<Button type="submit" color="secondary">
103+
Text
104+
</Button>
105+
</div>
106+
<div className="btn-wrapper">
107+
<Button
108+
type="submit"
109+
color="secondary"
110+
icon={<FontAwesomeIcon icon={faBaseballBall} />}
111+
>
112+
Text
113+
</Button>
114+
</div>
115+
116+
<div className="btn-wrapper">
117+
<Button
118+
type="submit"
119+
color="delete"
120+
icon={<FontAwesomeIcon icon={faBaseballBall} />}
121+
disabled
122+
>
123+
Disabled
124+
</Button>
125+
</div>
126+
</Flex>
122127
</section>
123128
</>
124129
</Presentation>

‎docs/stories/components/Flex.stories.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React from 'react';
2+
/* eslint-disable import/no-extraneous-dependencies */
3+
import { storiesOf } from '@storybook/react';
4+
import { Flex, Text, Padded } from '@buffetjs/core';
5+
import { boolean, select } from '@storybook/addon-knobs';
6+
7+
import Presentation from '../ui/Presentation';
8+
import Pre from '../ui/Pre';
9+
10+
const styles = {
11+
spacerCode: {
12+
display: 'block',
13+
marginBottom: 30,
14+
},
15+
box: {
16+
backgroundColor: 'lightblue',
17+
padding: 10,
18+
width: 100,
19+
},
20+
container: {
21+
backgroundColor: 'blue',
22+
height: 100,
23+
width: 500,
24+
padding: 10,
25+
},
26+
};
27+
28+
const FlexStory = () => (
29+
<Presentation title="Flex" description="A configurable Flex component">
30+
<div style={{ paddingTop: 17, marginBottom: 22 }}>
31+
<div style={styles.container}>
32+
<Flex
33+
style={{ height: '100%' }}
34+
alignItems={select(
35+
'align-items',
36+
['flex-start', 'center', 'stretch'],
37+
'flex-start'
38+
)}
39+
justifyContent={select(
40+
'jusify-content',
41+
[
42+
'flex-start',
43+
'center',
44+
'flex-end',
45+
'space-between',
46+
'space-around',
47+
],
48+
'flex-start'
49+
)}
50+
>
51+
<div style={styles.box}>
52+
<Text size="lg" fontWeight="bold" color="white">
53+
box 1
54+
</Text>
55+
</div>
56+
<Padded left />
57+
<div style={styles.box}>
58+
<Text size="lg" fontWeight="bold" color="white">
59+
box 2
60+
</Text>
61+
</div>
62+
<Padded left />
63+
<div style={styles.box}>
64+
<Text size="lg" fontWeight="bold" color="white">
65+
box 3
66+
</Text>
67+
</div>
68+
</Flex>
69+
</div>
70+
</div>
71+
72+
<Pre language="Pre">
73+
{`
74+
import React from 'react';
75+
import { Flex, Text } from '@buffetjs/core';
76+
77+
function Example() {
78+
return (
79+
<Flex justifyContent='jusify-content' alignItems="normal">
80+
<div style={styles.box}>
81+
<Text size="lg" fontWeight="bold" color="white">
82+
box 1
83+
</Text>
84+
</div>
85+
<Padded left />
86+
<div style={styles.box}>
87+
<Text size="lg" fontWeight="bold" color="white">
88+
box 2
89+
</Text>
90+
</div>
91+
<Padded left />
92+
<div style={styles.box}>
93+
<Text size="lg" fontWeight="bold" color="white">
94+
box 3
95+
</Text>
96+
</div>
97+
</Flex>
98+
);
99+
}
100+
`}
101+
</Pre>
102+
</Presentation>
103+
);
104+
105+
storiesOf('Components', module).add('Flex', () => FlexStory());

‎docs/stories/components/List.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function ListStory() {
3333

3434
return (
3535
<Presentation title="List" description="Display data.">
36-
<div style={{ paddingTop: 3, marginBottom: 35 }}>
36+
<div style={{ paddingTop: 8, marginBottom: 35 }}>
3737
<List {...defaultProps} />
3838
</div>
3939
<Pre>{source}</Pre>

‎docs/stories/components/Option.stories.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useState } from 'react';
2+
/* eslint-disable import/no-extraneous-dependencies */
3+
import { storiesOf } from '@storybook/react';
4+
5+
import { Option } from '@buffetjs/core';
6+
import Presentation from '../ui/Presentation';
7+
import Pre from '../ui/Pre';
8+
9+
function OptionStory() {
10+
const defaultProps = {
11+
label: 'option',
12+
onClick: e => console.log(e),
13+
};
14+
const label = (
15+
<>
16+
<span>Option 1</span>
17+
<span style={{ fontWeight: 700 }}>&nbsp;is&nbsp;</span>
18+
<span>Foo</span>
19+
</>
20+
);
21+
22+
return (
23+
<Presentation title="Option" description="Useful to display filters.">
24+
<div style={{ marginBottom: 23, display: 'flex' }}>
25+
<Option {...defaultProps} margin="0 10px 6px 0" />
26+
<Option {...defaultProps} label={label} margin="0 10px 6px 0" />
27+
<Option {...defaultProps} height="28px" />
28+
</div>
29+
<Pre>
30+
{`
31+
import React, { useState } from 'react';
32+
import { Option } from '@buffetjs/core';
33+
34+
function Example() {
35+
const label = (
36+
<>
37+
<span>Option 1</span>
38+
<span style={{ fontWeight: 700 }}>&nbsp;is&nbsp;</span>
39+
<span>Foo</span>
40+
</>
41+
);
42+
43+
return (
44+
<div style={{ display: 'flex' }}>
45+
<Option label="option" margin="0 10px 6px 0" />
46+
<Option label={label} margin="0 10px 6px 0" />
47+
<Option
48+
label="option"
49+
height="28px"
50+
onClick={(e) => console.log(e)}
51+
/>
52+
</div>
53+
);
54+
}
55+
`}
56+
</Pre>
57+
</Presentation>
58+
);
59+
}
60+
61+
storiesOf('Components', module).add('Option', () => <OptionStory />);

0 commit comments

Comments
 (0)