@madie/madie-design-system 1.0.23 → 1.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button/Button.stories.js +68 -18
- package/components/Button/index.js +1 -0
- package/dist/browser.js +1 -1
- package/dist/index.js +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/qppds/components/_button.scss +44 -7
|
@@ -20,45 +20,91 @@ Container.propTypes = {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
export const Primary = () => (
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
|
|
23
|
+
<div>
|
|
24
|
+
<Container>
|
|
25
|
+
<Button>Button</Button>
|
|
26
|
+
</Container>
|
|
27
|
+
<Container>
|
|
28
|
+
<Button disabled>Button</Button>
|
|
29
|
+
</Container>
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
export const FormAction = () => (
|
|
34
|
+
<div>
|
|
35
|
+
<Container>
|
|
36
|
+
<Button variant="action">Button</Button>
|
|
37
|
+
</Container>
|
|
38
|
+
<Container>
|
|
39
|
+
<Button variant="action" disabled>Disabled</Button>
|
|
40
|
+
</Container>
|
|
41
|
+
</div>
|
|
26
42
|
);
|
|
27
43
|
|
|
28
44
|
export const Cyan = () => (
|
|
29
|
-
<
|
|
30
|
-
<
|
|
31
|
-
|
|
45
|
+
<div>
|
|
46
|
+
<Container>
|
|
47
|
+
<Button className="qpp-c-button--cyan">Button</Button>
|
|
48
|
+
</Container>
|
|
49
|
+
<Container>
|
|
50
|
+
<Button variant="cyan" disabled>Disabled</Button>
|
|
51
|
+
</Container>
|
|
52
|
+
</div>
|
|
32
53
|
);
|
|
33
54
|
|
|
34
55
|
export const Secondary = () => (
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
|
|
56
|
+
<div>
|
|
57
|
+
<Container>
|
|
58
|
+
<Button variant="secondary">Button</Button>
|
|
59
|
+
</Container>
|
|
60
|
+
<Container>
|
|
61
|
+
<Button variant="secondary" disabled>Disabled</Button>
|
|
62
|
+
</Container>
|
|
63
|
+
</div>
|
|
38
64
|
);
|
|
39
65
|
|
|
40
66
|
export const Danger = () => (
|
|
41
|
-
<
|
|
42
|
-
<
|
|
43
|
-
|
|
67
|
+
<div>
|
|
68
|
+
<Container>
|
|
69
|
+
<Button variant="danger">Button</Button>
|
|
70
|
+
</Container>
|
|
71
|
+
<Container>
|
|
72
|
+
<Button disabled variant="danger">Disabled</Button>
|
|
73
|
+
</Container>
|
|
74
|
+
</div>
|
|
44
75
|
);
|
|
45
76
|
|
|
46
77
|
export const DangerPrimary = () => (
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
|
|
78
|
+
<div>
|
|
79
|
+
<Container>
|
|
80
|
+
<Button variant="danger-primary">Button</Button>
|
|
81
|
+
</Container>
|
|
82
|
+
<Container>
|
|
83
|
+
<Button disabled variant="danger-primary">Disabled</Button>
|
|
84
|
+
</Container>
|
|
85
|
+
</div>
|
|
50
86
|
);
|
|
51
87
|
|
|
52
88
|
export const Outline = () => (
|
|
89
|
+
<div>
|
|
53
90
|
<Container className="qpp-u-fill--blue-80">
|
|
54
91
|
<Button variant="outline">Button</Button>
|
|
55
92
|
</Container>
|
|
93
|
+
<Container className="qpp-u-fill--blue-80">
|
|
94
|
+
<Button variant="outline" disabled>Button</Button>
|
|
95
|
+
</Container>
|
|
96
|
+
</div>
|
|
56
97
|
);
|
|
57
98
|
|
|
58
99
|
export const White = () => (
|
|
59
|
-
<
|
|
60
|
-
<
|
|
61
|
-
|
|
100
|
+
<div>
|
|
101
|
+
<Container className="qpp-u-fill--blue-80">
|
|
102
|
+
<Button variant="white">Button</Button>
|
|
103
|
+
</Container>
|
|
104
|
+
<Container className="qpp-u-fill--blue-80">
|
|
105
|
+
<Button variant="white" disabled>Button</Button>
|
|
106
|
+
</Container>
|
|
107
|
+
</div>
|
|
62
108
|
);
|
|
63
109
|
|
|
64
110
|
export const Icon = () => (
|
|
@@ -88,6 +134,10 @@ export const Big = () => (
|
|
|
88
134
|
<Button size="big" variant="secondary">
|
|
89
135
|
Big Secondary Button
|
|
90
136
|
</Button>
|
|
137
|
+
<hr />
|
|
138
|
+
<Button size="big" variant="action">
|
|
139
|
+
Big Action Button
|
|
140
|
+
</Button>
|
|
91
141
|
</Container>
|
|
92
142
|
);
|
|
93
143
|
|