@mrshmllw/smores-react 1.6.1 → 1.8.1
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/dist/ActionDropdown/__tests__/__snapshots__/ActionDropdown.js.snap +167 -0
- package/dist/Box/__tests__/__snapshots__/Box.js.snap +20 -0
- package/dist/Button/__tests__/__snapshots__/Button.js.snap +46 -0
- package/dist/Card/__tests__/__snapshots__/Card.js.snap +24 -0
- package/dist/CheckBox/CheckBox.d.ts +2 -0
- package/dist/CheckBox/CheckBox.js +12 -5
- package/dist/CheckBox/CheckBox.js.map +1 -1
- package/dist/CheckBox/CheckBox.stories.d.ts +2 -0
- package/dist/CheckBox/CheckBox.stories.js +14 -2
- package/dist/CheckBox/CheckBox.stories.js.map +1 -1
- package/dist/CheckBox/__tests__/__snapshots__/CheckBox.js.snap +20 -0
- package/dist/Dropdown/Dropdown.d.ts +2 -0
- package/dist/Dropdown/Dropdown.js +2 -2
- package/dist/Dropdown/Dropdown.js.map +1 -1
- package/dist/Dropdown/__tests__/__snapshots__/Dropdown.js.snap +167 -0
- package/dist/Emoji/__tests__/__snapshots__/Emoji.js.snap +20 -0
- package/dist/Icon/Container.js +3 -0
- package/dist/Icon/Container.js.map +1 -1
- package/dist/Icon/Icon.js +9 -3
- package/dist/Icon/Icon.js.map +1 -1
- package/dist/Icon/__tests__/__snapshots__/Icon.js.snap +47 -0
- package/dist/IconWrapper/__tests__/__snapshots__/IconWrapper.js.snap +121 -0
- package/dist/LabelledText/__tests__/__snapshots__/LabelledText.js.snap +57 -0
- package/dist/Loader/__tests__/__snapshots__/Loader.js.snap +53 -0
- package/dist/Message/__tests__/__snapshots__/Message.js.snap +279 -0
- package/dist/Modal/__tests__/__snapshots__/Modal.js.snap +208 -0
- package/dist/NumberInput/__tests__/__snapshots__/NumberInput.js.snap +1398 -0
- package/dist/Pagination/__tests__/__snapshots__/Pagination.js.snap +273 -0
- package/dist/RadioButton/__tests__/__snapshots__/RadioButton.js.snap +146 -0
- package/dist/Row/__tests__/__snapshots__/Row.js.snap +96 -0
- package/dist/SearchInput/__tests__/__snapshots__/SearchInput.js.snap +146 -0
- package/dist/Tag/__tests__/__snapshots__/Tag.js.snap +54 -0
- package/dist/Text/__tests__/__snapshots__/Text.js.snap +34 -0
- package/dist/TextInput/__tests__/__snapshots__/TextInput.js.snap +74 -0
- package/dist/Textarea/__tests__/__snapshots__/Textarea.js.snap +271 -0
- package/dist/Toggle/__tests__/__snapshots__/Toggle.js.snap +70 -0
- package/package.json +1 -1
@@ -0,0 +1,167 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`renders 1`] = `
|
4
|
+
.c3 {
|
5
|
+
display: -webkit-box;
|
6
|
+
display: -webkit-flex;
|
7
|
+
display: -ms-flexbox;
|
8
|
+
display: flex;
|
9
|
+
-webkit-align-items: center;
|
10
|
+
-webkit-box-align: center;
|
11
|
+
-ms-flex-align: center;
|
12
|
+
align-items: center;
|
13
|
+
-webkit-box-pack: center;
|
14
|
+
-webkit-justify-content: center;
|
15
|
+
-ms-flex-pack: center;
|
16
|
+
justify-content: center;
|
17
|
+
width: 100%;
|
18
|
+
max-width: 24px;
|
19
|
+
height: 24px;
|
20
|
+
-webkit-transform: rotate(0deg);
|
21
|
+
-ms-transform: rotate(0deg);
|
22
|
+
transform: rotate(0deg);
|
23
|
+
margin-top: 0;
|
24
|
+
margin-right: 0;
|
25
|
+
margin-bottom: 0;
|
26
|
+
margin-left: 0;
|
27
|
+
}
|
28
|
+
|
29
|
+
.c5 {
|
30
|
+
padding: 0;
|
31
|
+
margin: 0;
|
32
|
+
max-height: 188px;
|
33
|
+
}
|
34
|
+
|
35
|
+
.c6 {
|
36
|
+
padding: 16px 24px;
|
37
|
+
text-align: left;
|
38
|
+
overflow: hidden;
|
39
|
+
white-space: nowrap;
|
40
|
+
text-overflow: ellipsis;
|
41
|
+
box-sizing: border-box;
|
42
|
+
font-size: 14px;
|
43
|
+
cursor: pointer;
|
44
|
+
color: #112035;
|
45
|
+
border-bottom: 1px solid #E5E5E5;
|
46
|
+
}
|
47
|
+
|
48
|
+
.c6:hover {
|
49
|
+
background-color: #E5E5E5;
|
50
|
+
}
|
51
|
+
|
52
|
+
.c6:last-child {
|
53
|
+
border-bottom: none;
|
54
|
+
}
|
55
|
+
|
56
|
+
.c1 {
|
57
|
+
color: #ffffff;
|
58
|
+
background-color: #EA9C56;
|
59
|
+
position: relative;
|
60
|
+
width: 100%;
|
61
|
+
height: 48px;
|
62
|
+
display: -webkit-box;
|
63
|
+
display: -webkit-flex;
|
64
|
+
display: -ms-flexbox;
|
65
|
+
display: flex;
|
66
|
+
-webkit-align-items: center;
|
67
|
+
-webkit-box-align: center;
|
68
|
+
-ms-flex-align: center;
|
69
|
+
align-items: center;
|
70
|
+
-webkit-box-pack: justify;
|
71
|
+
-webkit-justify-content: space-between;
|
72
|
+
-ms-flex-pack: justify;
|
73
|
+
justify-content: space-between;
|
74
|
+
text-align: center;
|
75
|
+
border-radius: 8px;
|
76
|
+
padding: 16px 16px 14px;
|
77
|
+
box-sizing: border-box;
|
78
|
+
-webkit-user-select: none;
|
79
|
+
-moz-user-select: none;
|
80
|
+
-ms-user-select: none;
|
81
|
+
user-select: none;
|
82
|
+
}
|
83
|
+
|
84
|
+
.c2 {
|
85
|
+
font-size: 14px;
|
86
|
+
white-space: nowrap;
|
87
|
+
overflow: hidden;
|
88
|
+
text-overflow: ellipsis;
|
89
|
+
}
|
90
|
+
|
91
|
+
.c0 {
|
92
|
+
position: relative;
|
93
|
+
display: block;
|
94
|
+
width: 210px;
|
95
|
+
height: 48px;
|
96
|
+
text-align: center;
|
97
|
+
cursor: pointer;
|
98
|
+
outline: none;
|
99
|
+
border-radius: 8px;
|
100
|
+
}
|
101
|
+
|
102
|
+
.c4 {
|
103
|
+
position: absolute;
|
104
|
+
width: 100%;
|
105
|
+
border-radius: 8px;
|
106
|
+
margin-top: 8px;
|
107
|
+
display: none;
|
108
|
+
max-height: 48px;
|
109
|
+
background-color: #ffffff;
|
110
|
+
border: 1px solid #E5E5E5;
|
111
|
+
overflow-y: hidden;
|
112
|
+
z-index: 2;
|
113
|
+
-webkit-transition: all 0.2s ease-in-out;
|
114
|
+
transition: all 0.2s ease-in-out;
|
115
|
+
}
|
116
|
+
|
117
|
+
<div
|
118
|
+
class="c0"
|
119
|
+
>
|
120
|
+
<div
|
121
|
+
class="c1"
|
122
|
+
>
|
123
|
+
<span
|
124
|
+
class="c2"
|
125
|
+
>
|
126
|
+
High alert
|
127
|
+
</span>
|
128
|
+
<span
|
129
|
+
class="c3"
|
130
|
+
color="white"
|
131
|
+
rotate="0"
|
132
|
+
size="24"
|
133
|
+
>
|
134
|
+
<svg
|
135
|
+
fill="none"
|
136
|
+
height="100%"
|
137
|
+
viewBox="0 0 24 24"
|
138
|
+
width="100%"
|
139
|
+
xmlns="http://www.w3.org/2000/svg"
|
140
|
+
>
|
141
|
+
<path
|
142
|
+
d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
|
143
|
+
fill="#ffffff"
|
144
|
+
/>
|
145
|
+
</svg>
|
146
|
+
</span>
|
147
|
+
</div>
|
148
|
+
<div
|
149
|
+
class="c4"
|
150
|
+
>
|
151
|
+
<ul
|
152
|
+
class="c5"
|
153
|
+
>
|
154
|
+
<li
|
155
|
+
class="c6"
|
156
|
+
>
|
157
|
+
High alert
|
158
|
+
</li>
|
159
|
+
<li
|
160
|
+
class="c6"
|
161
|
+
>
|
162
|
+
Good zone
|
163
|
+
</li>
|
164
|
+
</ul>
|
165
|
+
</div>
|
166
|
+
</div>
|
167
|
+
`;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`renders 1`] = `
|
4
|
+
.c0 {
|
5
|
+
margin-top: 32px;
|
6
|
+
padding-bottom: 16px;
|
7
|
+
display: -webkit-box;
|
8
|
+
display: -webkit-flex;
|
9
|
+
display: -ms-flexbox;
|
10
|
+
display: flex;
|
11
|
+
-webkit-flex-direction: column;
|
12
|
+
-ms-flex-direction: column;
|
13
|
+
flex-direction: column;
|
14
|
+
}
|
15
|
+
|
16
|
+
<div
|
17
|
+
class="c0"
|
18
|
+
direction="column"
|
19
|
+
/>
|
20
|
+
`;
|
@@ -0,0 +1,46 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`renders 1`] = `
|
4
|
+
.c0 {
|
5
|
+
position: relative;
|
6
|
+
display: inline-block;
|
7
|
+
box-sizing: border-box;
|
8
|
+
border: none;
|
9
|
+
border-radius: 8px;
|
10
|
+
font-size: 16px;
|
11
|
+
padding: 18px 16px 14px;
|
12
|
+
outline: none;
|
13
|
+
cursor: pointer;
|
14
|
+
width: auto;
|
15
|
+
background-color: #55D6AA;
|
16
|
+
color: #ffffff;
|
17
|
+
font-weight: 500;
|
18
|
+
}
|
19
|
+
|
20
|
+
.c0:hover:not([disabled]) {
|
21
|
+
background-color: #4CB99F;
|
22
|
+
}
|
23
|
+
|
24
|
+
.c0:active:not([disabled]) {
|
25
|
+
background-color: #469389;
|
26
|
+
}
|
27
|
+
|
28
|
+
.c0:disabled {
|
29
|
+
opacity: 0.5;
|
30
|
+
cursor: not-allowed;
|
31
|
+
}
|
32
|
+
|
33
|
+
@media (min-width:768px) {
|
34
|
+
.c0 {
|
35
|
+
padding: 16px 16px 15px;
|
36
|
+
font-size: 16px;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
<div>
|
41
|
+
<button
|
42
|
+
class="c0"
|
43
|
+
color="green"
|
44
|
+
/>
|
45
|
+
</div>
|
46
|
+
`;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`renders 1`] = `
|
4
|
+
.c0 {
|
5
|
+
background: #ffffff;
|
6
|
+
border: 1px solid #ECECEC;
|
7
|
+
box-sizing: border-box;
|
8
|
+
box-shadow: 0px 4px 3px rgba(0,0,0,0.08);
|
9
|
+
border-radius: 8px;
|
10
|
+
padding: 24px;
|
11
|
+
}
|
12
|
+
|
13
|
+
@media (min-width:768px) {
|
14
|
+
.c0 {
|
15
|
+
padding: 32px;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
<div
|
20
|
+
class="c0"
|
21
|
+
>
|
22
|
+
Text inside
|
23
|
+
</div>
|
24
|
+
`;
|
@@ -2,16 +2,18 @@ import React from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
3
3
|
import { Text } from '../Text';
|
4
4
|
import { theme } from '../theme';
|
5
|
-
export const CheckBox = ({ id, checked, children, toggle }) => (React.createElement(
|
6
|
-
React.createElement(
|
7
|
-
|
8
|
-
|
5
|
+
export const CheckBox = ({ id, checked, children, toggle, error, errorMsg }) => (React.createElement(React.Fragment, null,
|
6
|
+
React.createElement(BoxContainer, { id: id },
|
7
|
+
React.createElement(Text, { tag: "span", typo: "base", color: error ? 'red7' : 'blue7' }, children),
|
8
|
+
React.createElement("input", { type: "checkbox", checked: checked, onChange: toggle }),
|
9
|
+
React.createElement(Checkmark, { error: error })),
|
10
|
+
error && errorMsg && React.createElement(ErrorBox, null, errorMsg)));
|
9
11
|
const Checkmark = styled.span `
|
10
12
|
position: absolute;
|
11
13
|
left: 0;
|
12
14
|
width: 24px;
|
13
15
|
height: 24px;
|
14
|
-
border: solid 1px ${theme.colors.blue5};
|
16
|
+
border: ${({ error }) => error ? `solid 1px ${theme.colors.red7}` : `solid 1px ${theme.colors.blue5}`} ;
|
15
17
|
box-sizing: border-box;
|
16
18
|
border-radius: 1px;
|
17
19
|
|
@@ -64,4 +66,9 @@ const BoxContainer = styled.label `
|
|
64
66
|
padding-left: 32px;
|
65
67
|
}
|
66
68
|
`;
|
69
|
+
const ErrorBox = styled.span `
|
70
|
+
padding-top: 8px;
|
71
|
+
font-size: 12px;
|
72
|
+
color: ${theme.colors.red7};
|
73
|
+
`;
|
67
74
|
//# sourceMappingURL=CheckBox.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAWhC,MAAM,CAAC,MAAM,QAAQ,GAAc,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACzF;IACE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;QAClB,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzD,QAAQ,CACJ;QAEP,+BAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAI;QAC7D,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,CACd;IACd,KAAK,IAAI,QAAQ,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACpD,CACJ,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAqB;;;;;YAKtC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;;;;;;;;;;;;;;;;;;CAkBtG,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;;kBAaf,SAAS;0BACD,KAAK,CAAC,MAAM,CAAC,KAAK;0BAClB,KAAK,CAAC,MAAM,CAAC,KAAK;;;kBAG1B,SAAS;;;;;;MAMrB,SAAS;0BACW,KAAK,CAAC,MAAM,CAAC,KAAK;0BAClB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;CAO3C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;WAGjB,KAAK,CAAC,MAAM,CAAC,IAAI;CAC3B,CAAA"}
|
@@ -5,6 +5,18 @@ export default {
|
|
5
5
|
title: 'Checkbox',
|
6
6
|
component: CheckBox,
|
7
7
|
};
|
8
|
-
const
|
9
|
-
export const Default =
|
8
|
+
const ContainerTemplate = (args) => React.createElement(CheckBoxContainer, Object.assign({}, args));
|
9
|
+
export const Default = ContainerTemplate.bind({});
|
10
|
+
const Template = (args) => React.createElement(CheckBox, Object.assign({}, args));
|
11
|
+
export const WithError = Template.bind({});
|
12
|
+
WithError.args = {
|
13
|
+
children: 'I disagree',
|
14
|
+
error: true,
|
15
|
+
};
|
16
|
+
export const WithErrorLabel = Template.bind({});
|
17
|
+
WithErrorLabel.args = {
|
18
|
+
children: 'I disagree',
|
19
|
+
error: true,
|
20
|
+
errorMsg: 'Something has gone wrong',
|
21
|
+
};
|
10
22
|
//# sourceMappingURL=CheckBox.stories.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CheckBox.stories.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.stories.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAE5D,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,
|
1
|
+
{"version":3,"file":"CheckBox.stories.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.stories.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAE5D,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,iBAAiB,oBAAK,IAAI,EAAI,CAAA;AAEnE,MAAM,CAAC,MAAM,OAAO,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAA;AAEjD,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,QAAQ,EAAE,YAAY;IACtB,KAAK,EAAE,IAAI;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/C,cAAc,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,YAAY;IACtB,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,0BAA0B;CACrC,CAAA"}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`renders 1`] = `
|
4
|
+
<label
|
5
|
+
class="sc-dlnjwi bXlBnZ"
|
6
|
+
>
|
7
|
+
<span
|
8
|
+
class="sc-bdnxRM dSPFEI"
|
9
|
+
color="blue7"
|
10
|
+
cursor="inherit"
|
11
|
+
title=""
|
12
|
+
/>
|
13
|
+
<input
|
14
|
+
type="checkbox"
|
15
|
+
/>
|
16
|
+
<span
|
17
|
+
class="sc-gtsrHT fIfsMW"
|
18
|
+
/>
|
19
|
+
</label>
|
20
|
+
`;
|
@@ -35,6 +35,8 @@ declare type DefaultProps = {
|
|
35
35
|
outlined?: boolean;
|
36
36
|
/** onBlur listener */
|
37
37
|
onBlur?: (e: FormEvent<HTMLSelectElement>) => void;
|
38
|
+
/** required item */
|
39
|
+
required?: boolean;
|
38
40
|
};
|
39
41
|
/** on change or on input required */
|
40
42
|
declare type TruncateProps = {
|
@@ -4,7 +4,7 @@ import { Text } from '../Text';
|
|
4
4
|
import { Icon } from '../Icon';
|
5
5
|
import { Box } from '../Box';
|
6
6
|
import { theme } from '../theme';
|
7
|
-
export const Dropdown = ({ id, className = '', ref, label, placeholder, name, value, defaultValue, disabled = false, list, onSelect, outlined = false, error = false, errorMsg = '', onInputChange, onBlur, }) => {
|
7
|
+
export const Dropdown = ({ id, className = '', ref, label, placeholder, name, value, defaultValue, disabled = false, list, onSelect, outlined = false, error = false, errorMsg = '', onInputChange, onBlur, required = true, }) => {
|
8
8
|
const [key, setKey] = useState('');
|
9
9
|
const [hasOptGroups, setHasOptGroups] = useState(false);
|
10
10
|
const [dropdownItemsGroups, setDropdownItemsGroups] = useState([]);
|
@@ -36,7 +36,7 @@ export const Dropdown = ({ id, className = '', ref, label, placeholder, name, va
|
|
36
36
|
: placeholder, disabled: disabled || list.length < 1, onChange: (e) => {
|
37
37
|
onSelect && onSelect(e.currentTarget.value);
|
38
38
|
onInputChange && onInputChange(e);
|
39
|
-
}, required:
|
39
|
+
}, required: required, outlined: outlined, error: error, ref: ref, onBlur: (e) => {
|
40
40
|
onBlur && onBlur(e);
|
41
41
|
}, name: name, value: value },
|
42
42
|
hasOptGroups ? (React.createElement("optgroup", { label: placeholder },
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,QAAQ,EAAwB,MAAM,OAAO,CAAA;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,167 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`renders 1`] = `
|
4
|
+
.c4 {
|
5
|
+
display: -webkit-box;
|
6
|
+
display: -webkit-flex;
|
7
|
+
display: -ms-flexbox;
|
8
|
+
display: flex;
|
9
|
+
-webkit-align-items: center;
|
10
|
+
-webkit-box-align: center;
|
11
|
+
-ms-flex-align: center;
|
12
|
+
align-items: center;
|
13
|
+
-webkit-box-pack: center;
|
14
|
+
-webkit-justify-content: center;
|
15
|
+
-ms-flex-pack: center;
|
16
|
+
justify-content: center;
|
17
|
+
width: 100%;
|
18
|
+
max-width: 24px;
|
19
|
+
height: 24px;
|
20
|
+
-webkit-transform: rotate(0deg);
|
21
|
+
-ms-transform: rotate(0deg);
|
22
|
+
transform: rotate(0deg);
|
23
|
+
margin-top: 0;
|
24
|
+
margin-right: 0;
|
25
|
+
margin-bottom: 0;
|
26
|
+
margin-left: 0;
|
27
|
+
}
|
28
|
+
|
29
|
+
.c0 {
|
30
|
+
display: -webkit-box;
|
31
|
+
display: -webkit-flex;
|
32
|
+
display: -ms-flexbox;
|
33
|
+
display: flex;
|
34
|
+
-webkit-flex-direction: column;
|
35
|
+
-ms-flex-direction: column;
|
36
|
+
flex-direction: column;
|
37
|
+
height: 44px;
|
38
|
+
width: 100%;
|
39
|
+
margin: 0;
|
40
|
+
padding: 0;
|
41
|
+
}
|
42
|
+
|
43
|
+
.c1 {
|
44
|
+
width: 100%;
|
45
|
+
position: relative;
|
46
|
+
}
|
47
|
+
|
48
|
+
.c2 {
|
49
|
+
width: 100%;
|
50
|
+
height: 32px;
|
51
|
+
padding-right: 24px;
|
52
|
+
background-color: #ffffff;
|
53
|
+
border: none;
|
54
|
+
border-bottom: 1px solid #D2D2D2;
|
55
|
+
border-radius: 0;
|
56
|
+
font-size: 16px;
|
57
|
+
cursor: pointer;
|
58
|
+
-webkit-appearance: none;
|
59
|
+
-moz-appearance: none;
|
60
|
+
appearance: none;
|
61
|
+
}
|
62
|
+
|
63
|
+
.c2:disabled {
|
64
|
+
cursor: not-allowed;
|
65
|
+
opacity: 0.5;
|
66
|
+
}
|
67
|
+
|
68
|
+
.c2:not(:focus):invalid {
|
69
|
+
color: #D2D2D2;
|
70
|
+
}
|
71
|
+
|
72
|
+
.c2:hover,
|
73
|
+
.c2:valid,
|
74
|
+
.c2:focus,
|
75
|
+
.c2:focus-visible,
|
76
|
+
.c2:checked {
|
77
|
+
outline: none;
|
78
|
+
border-color: #9E9E9E;
|
79
|
+
}
|
80
|
+
|
81
|
+
.c3 {
|
82
|
+
position: absolute;
|
83
|
+
top: 50%;
|
84
|
+
z-index: 1;
|
85
|
+
right: 0;
|
86
|
+
pointer-events: none;
|
87
|
+
-webkit-transform: translateY(-50%);
|
88
|
+
-ms-transform: translateY(-50%);
|
89
|
+
transform: translateY(-50%);
|
90
|
+
}
|
91
|
+
|
92
|
+
<div
|
93
|
+
class="c0"
|
94
|
+
>
|
95
|
+
<div
|
96
|
+
class="c1"
|
97
|
+
>
|
98
|
+
<select
|
99
|
+
class="c2"
|
100
|
+
required=""
|
101
|
+
>
|
102
|
+
<option
|
103
|
+
hidden=""
|
104
|
+
value=""
|
105
|
+
/>
|
106
|
+
<option
|
107
|
+
value="Monday"
|
108
|
+
>
|
109
|
+
Monday
|
110
|
+
</option>
|
111
|
+
<option
|
112
|
+
value="Tuesday"
|
113
|
+
>
|
114
|
+
Tuesday
|
115
|
+
</option>
|
116
|
+
<option
|
117
|
+
value="Wednesday"
|
118
|
+
>
|
119
|
+
Wednesday
|
120
|
+
</option>
|
121
|
+
<option
|
122
|
+
value="Thursday"
|
123
|
+
>
|
124
|
+
Thursday
|
125
|
+
</option>
|
126
|
+
<option
|
127
|
+
value="Friday"
|
128
|
+
>
|
129
|
+
Friday
|
130
|
+
</option>
|
131
|
+
<option
|
132
|
+
value="Saturday"
|
133
|
+
>
|
134
|
+
Saturday
|
135
|
+
</option>
|
136
|
+
<option
|
137
|
+
value="Sunday"
|
138
|
+
>
|
139
|
+
Sunday
|
140
|
+
</option>
|
141
|
+
</select>
|
142
|
+
<div
|
143
|
+
class="c3"
|
144
|
+
>
|
145
|
+
<span
|
146
|
+
class="c4"
|
147
|
+
color="grey4"
|
148
|
+
rotate="0"
|
149
|
+
size="24"
|
150
|
+
>
|
151
|
+
<svg
|
152
|
+
fill="none"
|
153
|
+
height="100%"
|
154
|
+
viewBox="0 0 24 24"
|
155
|
+
width="100%"
|
156
|
+
xmlns="http://www.w3.org/2000/svg"
|
157
|
+
>
|
158
|
+
<path
|
159
|
+
d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
|
160
|
+
fill="#D2D2D2"
|
161
|
+
/>
|
162
|
+
</svg>
|
163
|
+
</span>
|
164
|
+
</div>
|
165
|
+
</div>
|
166
|
+
</div>
|
167
|
+
`;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`renders 1`] = `
|
4
|
+
.c0 {
|
5
|
+
font-size: 24px;
|
6
|
+
margin-top: 0;
|
7
|
+
margin-right: 0;
|
8
|
+
margin-bottom: 0;
|
9
|
+
margin-left: 0;
|
10
|
+
}
|
11
|
+
|
12
|
+
<span
|
13
|
+
aria-label="wink"
|
14
|
+
class="c0"
|
15
|
+
role="img"
|
16
|
+
size="24"
|
17
|
+
>
|
18
|
+
😉
|
19
|
+
</span>
|
20
|
+
`;
|
package/dist/Icon/Container.js
CHANGED
@@ -6,6 +6,9 @@ export const Container = () => {
|
|
6
6
|
React.createElement(Wrapper, null,
|
7
7
|
React.createElement("span", null, "aa"),
|
8
8
|
React.createElement(Icon, { render: "aa" })),
|
9
|
+
React.createElement(Wrapper, null,
|
10
|
+
React.createElement("span", null, "aa-inverted"),
|
11
|
+
React.createElement(Icon, { render: "aa-inverted" })),
|
9
12
|
React.createElement(Wrapper, null,
|
10
13
|
React.createElement("span", null, "accidental-damage"),
|
11
14
|
React.createElement(Icon, { render: "accidental-damage" })),
|