@mrshmllw/smores-react 2.1.23 → 2.1.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.
Files changed (27) hide show
  1. package/dist/ActionDropdown/__tests__/__snapshots__/ActionDropdown.js.snap +167 -0
  2. package/dist/Box/__tests__/__snapshots__/Box.js.snap +20 -0
  3. package/dist/Button/__tests__/__snapshots__/Button.js.snap +46 -0
  4. package/dist/Card/__tests__/__snapshots__/Card.js.snap +24 -0
  5. package/dist/CheckBox/__tests__/__snapshots__/CheckBox.js.snap +20 -0
  6. package/dist/Dropdown/__tests__/__snapshots__/Dropdown.js.snap +167 -0
  7. package/dist/Emoji/__tests__/__snapshots__/Emoji.js.snap +20 -0
  8. package/dist/Icon/__tests__/__snapshots__/Icon.js.snap +47 -0
  9. package/dist/IconWrapper/__tests__/__snapshots__/IconWrapper.js.snap +121 -0
  10. package/dist/LabelledText/__tests__/__snapshots__/LabelledText.js.snap +57 -0
  11. package/dist/Loader/__tests__/__snapshots__/Loader.js.snap +53 -0
  12. package/dist/Message/__tests__/__snapshots__/Message.js.snap +279 -0
  13. package/dist/Modal/__tests__/__snapshots__/Modal.js.snap +208 -0
  14. package/dist/NumberInput/__tests__/__snapshots__/NumberInput.js.snap +1398 -0
  15. package/dist/Pagination/__tests__/__snapshots__/Pagination.js.snap +273 -0
  16. package/dist/RadioButton/__tests__/__snapshots__/RadioButton.js.snap +146 -0
  17. package/dist/Row/__tests__/__snapshots__/Row.js.snap +96 -0
  18. package/dist/SearchInput/__tests__/__snapshots__/SearchInput.js.snap +146 -0
  19. package/dist/Tag/__tests__/__snapshots__/Tag.js.snap +54 -0
  20. package/dist/Text/Text.stories.d.ts +1 -0
  21. package/dist/Text/Text.stories.js +35 -0
  22. package/dist/Text/Text.stories.js.map +1 -1
  23. package/dist/Text/__tests__/__snapshots__/Text.js.snap +34 -0
  24. package/dist/TextInput/__tests__/__snapshots__/TextInput.js.snap +74 -0
  25. package/dist/Textarea/__tests__/__snapshots__/Textarea.js.snap +271 -0
  26. package/dist/Toggle/__tests__/__snapshots__/Toggle.js.snap +70 -0
  27. package/package.json +1 -1
@@ -1,10 +1,44 @@
1
1
  import React from 'react';
2
+ import styled from 'styled-components';
2
3
  import { Text } from './Text';
4
+ import { Box } from '../Box';
3
5
  export default {
4
6
  title: 'Text',
5
7
  component: Text,
6
8
  };
9
+ const typos = [
10
+ 'header-large',
11
+ 'header-medium',
12
+ 'header-small',
13
+ 'desc-heavy',
14
+ 'desc-medium',
15
+ 'desc-light',
16
+ 'desc-small',
17
+ 'base',
18
+ 'base-small',
19
+ 'base-xsmall',
20
+ 'label',
21
+ 'label-large',
22
+ ];
7
23
  const Template = (props) => (React.createElement(Text, Object.assign({}, props), "The quick brown fox jumps over the lazy dog"));
24
+ const TypoCollection = ({ typos }) => {
25
+ return (React.createElement(Box, null,
26
+ React.createElement(Grid, null,
27
+ React.createElement(Text, { tag: "p", typo: "base" }, "Name"),
28
+ React.createElement(Text, { tag: "p", typo: "base" }, "Single Line"),
29
+ React.createElement(Text, { tag: "p", typo: "base" }, "Paragraph")),
30
+ typos.map((typo) => (React.createElement(Grid, { key: typo },
31
+ React.createElement(Text, { tag: "p", typo: "base", color: "subtext" }, typo),
32
+ React.createElement(Text, { tag: "p", typo: typo, color: "secondary" }, "Lorem ipsum dolor sit amet"),
33
+ typo !== 'label' && typo !== 'label-large' && (React.createElement(Text, { tag: "p", typo: typo, color: "secondary" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget scelerisque ante, iaculis sodales lorem.")))))));
34
+ };
35
+ const Grid = styled(Box) `
36
+ display: grid;
37
+ grid-template-columns: 0.4fr 1.2fr 1fr;
38
+ margin-bottom: 24px;
39
+ gap: 10px;
40
+ `;
41
+ const TypographyTemplate = () => React.createElement(TypoCollection, { typos: typos });
8
42
  export const Default = Template.bind({});
9
43
  Default.args = {
10
44
  tag: 'p',
@@ -20,4 +54,5 @@ WithTitle.args = {
20
54
  tag: 'p',
21
55
  title: 'a11y title tooltip',
22
56
  };
57
+ export const Collection = TypographyTemplate.bind({});
23
58
  //# sourceMappingURL=Text.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Text.stories.js","sourceRoot":"","sources":["../../src/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,eAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CACrC,oBAAC,IAAI,oBAAK,KAAK,iDAAoD,CACpE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,GAAG,EAAE,GAAG;CACT,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,WAAW;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,GAAG,EAAE,GAAG;IACR,KAAK,EAAE,oBAAoB;CAC5B,CAAA"}
1
+ {"version":3,"file":"Text.stories.js","sourceRoot":"","sources":["../../src/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,eAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,KAAK,GAAG;IACZ,cAAc;IACd,eAAe;IACf,cAAc;IACd,YAAY;IACZ,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,MAAM;IACN,YAAY;IACZ,aAAa;IACb,OAAO;IACP,aAAa;CACL,CAAA;AAEV,MAAM,QAAQ,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CACrC,oBAAC,IAAI,oBAAK,KAAK,iDAAoD,CACpE,CAAA;AAED,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAiC,EAAE,EAAE;IAClE,OAAO,CACL,oBAAC,GAAG;QACF,oBAAC,IAAI;YACH,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,WAElB;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,kBAElB;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,gBAElB,CACF;QACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,oBAAC,IAAI,IAAC,GAAG,EAAE,IAAI;YACb,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,IACtC,IAAI,CACA;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,iCAEpC;YACN,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,aAAa,IAAI,CAC7C,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,mHAGpC,CACR,CACI,CACR,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;CAKvB,CAAA;AAED,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;AAEjE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,GAAG,EAAE,GAAG;CACT,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,WAAW;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,GAAG,EAAE,GAAG;IACR,KAAK,EAAE,oBAAoB;CAC5B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
@@ -0,0 +1,34 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`renders 1`] = `
4
+ .c0 {
5
+ font-size: 14px;
6
+ line-height: 23px;
7
+ font-weight: 400;
8
+ margin: 0;
9
+ padding: 0;
10
+ color: #112035;
11
+ text-align: left;
12
+ cursor: inherit;
13
+ -webkit-letter-spacing: 0.15px;
14
+ -moz-letter-spacing: 0.15px;
15
+ -ms-letter-spacing: 0.15px;
16
+ letter-spacing: 0.15px;
17
+ }
18
+
19
+ @media (min-width:768px) {
20
+ .c0 {
21
+ font-size: 16px;
22
+ line-height: 26px;
23
+ }
24
+ }
25
+
26
+ <p
27
+ class="c0"
28
+ color="blue7"
29
+ cursor="inherit"
30
+ title=""
31
+ >
32
+ The quick brown fox jumps over the lazy dog
33
+ </p>
34
+ `;
@@ -0,0 +1,74 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`renders 1`] = `
4
+ .c0 {
5
+ display: -webkit-box;
6
+ display: -webkit-flex;
7
+ display: -ms-flexbox;
8
+ display: flex;
9
+ -webkit-flex-direction: column;
10
+ -ms-flex-direction: column;
11
+ flex-direction: column;
12
+ height: auto;
13
+ }
14
+
15
+ .c1 {
16
+ border-bottom: 1px solid;
17
+ border-color: #D2D2D2;
18
+ display: -webkit-box;
19
+ display: -webkit-flex;
20
+ display: -ms-flexbox;
21
+ display: flex;
22
+ height: 32px;
23
+ }
24
+
25
+ .c1:hover,
26
+ .c1:focus-within {
27
+ border-color: #9E9E9E;
28
+ }
29
+
30
+ .c2 {
31
+ border: none;
32
+ color: #000000;
33
+ font-size: 16px;
34
+ width: 100%;
35
+ outline: none;
36
+ cursor: pointer;
37
+ opacity: 1;
38
+ }
39
+
40
+ .c2::-webkit-input-placeholder {
41
+ color: #D2D2D2;
42
+ }
43
+
44
+ .c2::-moz-placeholder {
45
+ color: #D2D2D2;
46
+ }
47
+
48
+ .c2:-ms-input-placeholder {
49
+ color: #D2D2D2;
50
+ }
51
+
52
+ .c2::placeholder {
53
+ color: #D2D2D2;
54
+ }
55
+
56
+ <div
57
+ class="c0"
58
+ >
59
+ <div
60
+ class="c1"
61
+ value=""
62
+ >
63
+ <input
64
+ autocomplete="off"
65
+ class="c2"
66
+ id="textInput"
67
+ name="textInput"
68
+ placeholder="Placeholder"
69
+ type="text"
70
+ value=""
71
+ />
72
+ </div>
73
+ </div>
74
+ `;
@@ -0,0 +1,271 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`disabled 1`] = `
4
+ .c1 {
5
+ font-size: 8px;
6
+ line-height: 100%;
7
+ font-weight: 700;
8
+ text-transform: uppercase;
9
+ -webkit-letter-spacing: 0.75px;
10
+ -moz-letter-spacing: 0.75px;
11
+ -ms-letter-spacing: 0.75px;
12
+ letter-spacing: 0.75px;
13
+ margin: 0;
14
+ padding: 0;
15
+ color: #AEAEAE;
16
+ text-align: left;
17
+ cursor: inherit;
18
+ -webkit-letter-spacing: 0.15px;
19
+ -moz-letter-spacing: 0.15px;
20
+ -ms-letter-spacing: 0.15px;
21
+ letter-spacing: 0.15px;
22
+ }
23
+
24
+ .c0 {
25
+ display: -webkit-box;
26
+ display: -webkit-flex;
27
+ display: -ms-flexbox;
28
+ display: flex;
29
+ -webkit-flex-direction: column;
30
+ -ms-flex-direction: column;
31
+ flex-direction: column;
32
+ }
33
+
34
+ .c2 {
35
+ font-size: 16px;
36
+ line-height: 20px;
37
+ background: #ffffff;
38
+ border: 1px solid #E5E5E5;
39
+ box-sizing: border-box;
40
+ border-radius: 8px;
41
+ width: 100%;
42
+ padding: 16px;
43
+ color: #112035;
44
+ resize: both;
45
+ cursor: not-allowed;
46
+ opacity: 0.5;
47
+ border-color: #D2D2D2;
48
+ }
49
+
50
+ .c2:hover {
51
+ border-color: #9E9E9E;
52
+ }
53
+
54
+ .c2:focus {
55
+ border-color: #545E7E;
56
+ }
57
+
58
+ @media (min-width:768px) {
59
+ .c1 {
60
+ font-size: 10px;
61
+ }
62
+ }
63
+
64
+ <div
65
+ class="c0"
66
+ direction="column"
67
+ >
68
+ <label
69
+ class="c1"
70
+ color="grey5"
71
+ cursor="inherit"
72
+ title=""
73
+ >
74
+ Textarea label
75
+ </label>
76
+ <div
77
+ class="c0"
78
+ direction="column"
79
+ >
80
+ <textarea
81
+ class="c2"
82
+ disabled=""
83
+ id="textarea_id"
84
+ placeholder="Placeholder text!"
85
+ />
86
+ </div>
87
+ </div>
88
+ `;
89
+
90
+ exports[`renders 1`] = `
91
+ .c1 {
92
+ font-size: 8px;
93
+ line-height: 100%;
94
+ font-weight: 700;
95
+ text-transform: uppercase;
96
+ -webkit-letter-spacing: 0.75px;
97
+ -moz-letter-spacing: 0.75px;
98
+ -ms-letter-spacing: 0.75px;
99
+ letter-spacing: 0.75px;
100
+ margin: 0;
101
+ padding: 0;
102
+ color: #AEAEAE;
103
+ text-align: left;
104
+ cursor: inherit;
105
+ -webkit-letter-spacing: 0.15px;
106
+ -moz-letter-spacing: 0.15px;
107
+ -ms-letter-spacing: 0.15px;
108
+ letter-spacing: 0.15px;
109
+ }
110
+
111
+ .c0 {
112
+ display: -webkit-box;
113
+ display: -webkit-flex;
114
+ display: -ms-flexbox;
115
+ display: flex;
116
+ -webkit-flex-direction: column;
117
+ -ms-flex-direction: column;
118
+ flex-direction: column;
119
+ }
120
+
121
+ .c2 {
122
+ font-size: 16px;
123
+ line-height: 20px;
124
+ background: #ffffff;
125
+ border: 1px solid #E5E5E5;
126
+ box-sizing: border-box;
127
+ border-radius: 8px;
128
+ width: 100%;
129
+ padding: 16px;
130
+ color: #112035;
131
+ resize: both;
132
+ cursor: pointer;
133
+ opacity: 1;
134
+ border-color: #D2D2D2;
135
+ }
136
+
137
+ .c2:hover {
138
+ border-color: #9E9E9E;
139
+ }
140
+
141
+ .c2:focus {
142
+ border-color: #545E7E;
143
+ }
144
+
145
+ @media (min-width:768px) {
146
+ .c1 {
147
+ font-size: 10px;
148
+ }
149
+ }
150
+
151
+ <div
152
+ class="c0 Textarea"
153
+ direction="column"
154
+ >
155
+ <label
156
+ class="c1"
157
+ color="grey5"
158
+ cursor="inherit"
159
+ title=""
160
+ >
161
+ Textarea label
162
+ </label>
163
+ <div
164
+ class="c0"
165
+ direction="column"
166
+ >
167
+ <textarea
168
+ class="c2"
169
+ id="textarea_id"
170
+ placeholder="Placeholder text!"
171
+ />
172
+ </div>
173
+ </div>
174
+ `;
175
+
176
+ exports[`renders with error 1`] = `
177
+ .c1 {
178
+ font-size: 8px;
179
+ line-height: 100%;
180
+ font-weight: 700;
181
+ text-transform: uppercase;
182
+ -webkit-letter-spacing: 0.75px;
183
+ -moz-letter-spacing: 0.75px;
184
+ -ms-letter-spacing: 0.75px;
185
+ letter-spacing: 0.75px;
186
+ margin: 0;
187
+ padding: 0;
188
+ color: #AEAEAE;
189
+ text-align: left;
190
+ cursor: inherit;
191
+ -webkit-letter-spacing: 0.15px;
192
+ -moz-letter-spacing: 0.15px;
193
+ -ms-letter-spacing: 0.15px;
194
+ letter-spacing: 0.15px;
195
+ }
196
+
197
+ .c0 {
198
+ display: -webkit-box;
199
+ display: -webkit-flex;
200
+ display: -ms-flexbox;
201
+ display: flex;
202
+ -webkit-flex-direction: column;
203
+ -ms-flex-direction: column;
204
+ flex-direction: column;
205
+ }
206
+
207
+ .c2 {
208
+ font-size: 16px;
209
+ line-height: 20px;
210
+ background: #ffffff;
211
+ border: 1px solid #E5E5E5;
212
+ box-sizing: border-box;
213
+ border-radius: 8px;
214
+ width: 100%;
215
+ padding: 16px;
216
+ color: #112035;
217
+ resize: both;
218
+ cursor: pointer;
219
+ opacity: 1;
220
+ border-color: #B52525;
221
+ }
222
+
223
+ .c2:hover {
224
+ border-color: #B52525;
225
+ }
226
+
227
+ .c2:focus {
228
+ border-color: #B52525;
229
+ }
230
+
231
+ .c3 {
232
+ margin-top: 7px;
233
+ font-size: 12px;
234
+ color: #B52525;
235
+ }
236
+
237
+ @media (min-width:768px) {
238
+ .c1 {
239
+ font-size: 10px;
240
+ }
241
+ }
242
+
243
+ <div
244
+ class="c0"
245
+ direction="column"
246
+ >
247
+ <label
248
+ class="c1"
249
+ color="grey5"
250
+ cursor="inherit"
251
+ title=""
252
+ >
253
+ Textarea label
254
+ </label>
255
+ <div
256
+ class="c0"
257
+ direction="column"
258
+ >
259
+ <textarea
260
+ class="c2"
261
+ id="textarea_id"
262
+ placeholder="Placeholder text!"
263
+ />
264
+ </div>
265
+ <span
266
+ class="c3"
267
+ >
268
+ Something really quite terrible has gone wrong here!
269
+ </span>
270
+ </div>
271
+ `;
@@ -0,0 +1,70 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`renders 1`] = `
4
+ .c0 {
5
+ position: relative;
6
+ display: inline-block;
7
+ width: 50px;
8
+ height: 32px;
9
+ }
10
+
11
+ .c0 input {
12
+ opacity: 0;
13
+ width: 0;
14
+ height: 0;
15
+ }
16
+
17
+ .c3 {
18
+ position: absolute;
19
+ cursor: pointer;
20
+ top: 0;
21
+ left: 0;
22
+ right: 0;
23
+ bottom: 0;
24
+ background-color: #E5E5E5;
25
+ border: 1px solid;
26
+ border-color: #D2D2D2;
27
+ border-radius: 28px;
28
+ -webkit-transition: 0.2s background-color border-color;
29
+ transition: 0.2s background-color border-color;
30
+ outline: none;
31
+ }
32
+
33
+ .c3:before {
34
+ position: absolute;
35
+ content: '';
36
+ height: 24px;
37
+ width: 24px;
38
+ left: 3px;
39
+ bottom: 3px;
40
+ background-color: #ffffff;
41
+ -webkit-transition: 0.2s -webkit-transform;
42
+ -webkit-transition: 0.2s transform;
43
+ transition: 0.2s transform;
44
+ border-radius: 50%;
45
+ }
46
+
47
+ .c1:checked + .c2 {
48
+ background-color: #4CB99F;
49
+ border: 1px solid;
50
+ border-color: #469389;
51
+ }
52
+
53
+ .c1:checked + .c2:before {
54
+ -webkit-transform: translateX(18px);
55
+ -ms-transform: translateX(18px);
56
+ transform: translateX(18px);
57
+ }
58
+
59
+ <label
60
+ class="c0"
61
+ >
62
+ <input
63
+ class="c1"
64
+ type="checkbox"
65
+ />
66
+ <span
67
+ class="c2 c3"
68
+ />
69
+ </label>
70
+ `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mrshmllw/smores-react",
3
- "version": "2.1.23",
3
+ "version": "2.1.24",
4
4
  "main": "./dist/index.js",
5
5
  "description": "Collection of React components used by Marshmallow Technology",
6
6
  "keywords": [