-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.js
64 lines (57 loc) · 1.22 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/**
* External dependencies
*/
import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import { useCx } from '../../utils';
import { Text } from '../../text';
import { Divider } from '..';
export default {
component: Divider,
title: 'Components (Experimental)/Divider',
argTypes: {
margin: {
control: { type: 'number' },
},
marginStart: {
control: { type: 'number' },
},
marginEnd: {
control: { type: 'number' },
},
},
};
const HorizontalTemplate = ( args ) => (
<div>
<Text>Some text before the divider</Text>
<Divider { ...args } />
<Text>Some text after the divider</Text>
</div>
);
const VerticalTemplate = ( args ) => {
const cx = useCx();
const wrapperClassName = cx( css`
display: flex;
align-items: stretch;
justify-content: start;
` );
return (
<div className={ wrapperClassName }>
<Text>Some text before the divider</Text>
<Divider orientation="vertical" { ...args } />
<Text>Some text after the divider</Text>
</div>
);
};
export const Horizontal = HorizontalTemplate.bind( {} );
Horizontal.args = {
margin: 2,
marginStart: undefined,
marginEnd: undefined,
};
export const Vertical = VerticalTemplate.bind( {} );
Vertical.args = {
...Horizontal.args,
};