@sproutsocial/racine 11.3.1-beta-deps.5 → 11.4.1-input-beta.0
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/CHANGELOG.md +34 -0
- package/__flow__/Button/__snapshots__/index.test.js.snap +511 -0
- package/__flow__/Button/index.js +0 -2
- package/__flow__/Button/index.stories.js +67 -51
- package/__flow__/Button/index.test.js +113 -0
- package/__flow__/Button/styles.js +1 -1
- package/__flow__/EmptyState/index.test.js +1 -1
- package/__flow__/Input/index.js +187 -67
- package/__flow__/Input/index.stories.js +65 -0
- package/__flow__/Input/index.test.js +230 -1
- package/__flow__/Input/styles.js +1 -1
- package/__flow__/Link/index.js +2 -1
- package/__flow__/Menu/__snapshots__/index.test.js.snap +2 -2
- package/__flow__/TokenInput/index.js +1 -1
- package/__flow__/setupTests.js +1 -1
- package/__flow__/systemProps/tests/__snapshots__/layout.test.js.snap +14 -0
- package/__flow__/systemProps/tests/layout.test.js +9 -0
- package/__flow__/themes/dark/theme.js +3 -0
- package/__flow__/themes/light/theme.js +3 -0
- package/__flow__/types/theme.colors.flow.js +3 -0
- package/__flow__/utils/index.js +23 -0
- package/commonjs/Button/index.js +0 -1
- package/commonjs/Button/styles.js +0 -1
- package/commonjs/Input/index.js +124 -32
- package/commonjs/Input/styles.js +1 -1
- package/commonjs/Message/styles.js +1 -1
- package/commonjs/TokenInput/index.js +1 -1
- package/commonjs/themes/dark/theme.js +4 -1
- package/commonjs/themes/light/theme.js +4 -1
- package/commonjs/utils/index.js +29 -2
- package/dist/themes/dark/dark.scss +4 -1
- package/dist/themes/light/light.scss +4 -1
- package/lib/Button/index.js +0 -1
- package/lib/Button/styles.js +0 -1
- package/lib/Input/index.js +116 -32
- package/lib/Input/styles.js +1 -1
- package/lib/Message/styles.js +1 -1
- package/lib/TokenInput/index.js +1 -1
- package/lib/themes/dark/theme.js +4 -1
- package/lib/themes/light/theme.js +4 -1
- package/lib/utils/index.js +24 -0
- package/package.json +20 -24
- package/bin/buildNpm.js +0 -58
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 11.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- d888fa0: Add search icon to type "search" Input
|
|
8
|
+
- "<Icon name="search" />" is added to Inputs with type "search" unless an elemBefore prop is passed to override it.
|
|
9
|
+
- d888fa0: Add Input.ClearButton
|
|
10
|
+
- This button is automatically included when Input has type "search" and no "elemAfter" prop is passed
|
|
11
|
+
- This button can be manually included with the "elemAfter" prop for non-search inputs
|
|
12
|
+
- In either case, the button will only be rendered if an "onClear" callback is passed to the Input component
|
|
13
|
+
- A "clearButtonLabel" prop should also be passed to the Input component
|
|
14
|
+
|
|
15
|
+
## 11.3.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- e8a9df6: Add text highlight style to theme
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- 9e66592: Pass TokenInput autocomplete prop to input as autoComplete to suppress JSX console warnings
|
|
24
|
+
|
|
25
|
+
## 11.2.5
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- a73cdfb: remove weird characters from props descriptions
|
|
30
|
+
|
|
31
|
+
## 11.2.4
|
|
32
|
+
|
|
33
|
+
### Patch Changes
|
|
34
|
+
|
|
35
|
+
- 206bd32: copy updates to the TypeProps comments that power Seeds prop tables
|
|
36
|
+
|
|
3
37
|
## 11.2.3
|
|
4
38
|
|
|
5
39
|
### Patch Changes
|
|
@@ -0,0 +1,511 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Racine Button should render in active state 1`] = `
|
|
4
|
+
.c0 {
|
|
5
|
+
display: inline-block;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
text-align: center;
|
|
8
|
+
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
9
|
+
border: 1px solid #364141;
|
|
10
|
+
border-radius: 6px;
|
|
11
|
+
border-style: solid;
|
|
12
|
+
background: transparent;
|
|
13
|
+
color: #364141;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
-webkit-text-decoration: none;
|
|
16
|
+
text-decoration: none;
|
|
17
|
+
line-height: 16px;
|
|
18
|
+
white-space: nowrap;
|
|
19
|
+
font-weight: 700;
|
|
20
|
+
-webkit-transition: all .15s linear;
|
|
21
|
+
transition: all .15s linear;
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 8px;
|
|
24
|
+
font-size: 13px;
|
|
25
|
+
color: #FFFFFF !important;
|
|
26
|
+
background: #273333 !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.c0:visited {
|
|
30
|
+
color: #364141;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.c0:hover {
|
|
34
|
+
color: #FFFFFF;
|
|
35
|
+
background: #364141;
|
|
36
|
+
-webkit-text-decoration: none;
|
|
37
|
+
text-decoration: none;
|
|
38
|
+
box-shadow: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.c0:active {
|
|
42
|
+
color: #FFFFFF;
|
|
43
|
+
background: #273333;
|
|
44
|
+
-webkit-transform: translateY(1px);
|
|
45
|
+
-ms-transform: translateY(1px);
|
|
46
|
+
transform: translateY(1px);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.c0:focus {
|
|
50
|
+
box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
|
|
51
|
+
outline: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.c0:focus::-moz-focus-inner {
|
|
55
|
+
border: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.c0:focus:active {
|
|
59
|
+
box-shadow: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.c0 .styles__Container-x0vwa5-0 {
|
|
63
|
+
vertical-align: text-bottom;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
<div>
|
|
67
|
+
<button
|
|
68
|
+
class="c0"
|
|
69
|
+
data-qa-button=""
|
|
70
|
+
data-qa-button-isdisabled="false"
|
|
71
|
+
type="button"
|
|
72
|
+
>
|
|
73
|
+
Button
|
|
74
|
+
</button>
|
|
75
|
+
</div>
|
|
76
|
+
`;
|
|
77
|
+
|
|
78
|
+
exports[`Racine Button should render in an anchor tag with external target 1`] = `
|
|
79
|
+
.c0 {
|
|
80
|
+
display: inline-block;
|
|
81
|
+
box-sizing: border-box;
|
|
82
|
+
text-align: center;
|
|
83
|
+
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
84
|
+
border: 1px solid transparent;
|
|
85
|
+
border-radius: 6px;
|
|
86
|
+
border-style: solid;
|
|
87
|
+
background: transparent;
|
|
88
|
+
color: #515e5f;
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
-webkit-text-decoration: none;
|
|
91
|
+
text-decoration: none;
|
|
92
|
+
line-height: 16px;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
font-weight: 700;
|
|
95
|
+
-webkit-transition: all .15s linear;
|
|
96
|
+
transition: all .15s linear;
|
|
97
|
+
margin: 0;
|
|
98
|
+
padding: 8px;
|
|
99
|
+
font-size: 13px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.c0:visited {
|
|
103
|
+
color: #515e5f;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.c0:hover {
|
|
107
|
+
color: #273333;
|
|
108
|
+
-webkit-text-decoration: none;
|
|
109
|
+
text-decoration: none;
|
|
110
|
+
box-shadow: none;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.c0:active {
|
|
114
|
+
color: #273333;
|
|
115
|
+
-webkit-transform: translateY(1px);
|
|
116
|
+
-ms-transform: translateY(1px);
|
|
117
|
+
transform: translateY(1px);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.c0:focus {
|
|
121
|
+
box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
|
|
122
|
+
outline: none;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.c0:focus::-moz-focus-inner {
|
|
126
|
+
border: 0;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.c0:focus:active {
|
|
130
|
+
box-shadow: none;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.c0 .styles__Container-x0vwa5-0 {
|
|
134
|
+
vertical-align: text-bottom;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
<div>
|
|
138
|
+
<a
|
|
139
|
+
class="c0"
|
|
140
|
+
data-qa-button=""
|
|
141
|
+
data-qa-button-isdisabled="false"
|
|
142
|
+
href="http://sproutsocial.style"
|
|
143
|
+
rel="noopener noreferrer"
|
|
144
|
+
target="_blank"
|
|
145
|
+
>
|
|
146
|
+
Button
|
|
147
|
+
</a>
|
|
148
|
+
</div>
|
|
149
|
+
`;
|
|
150
|
+
|
|
151
|
+
exports[`Racine Button should render in default style 1`] = `
|
|
152
|
+
.c0 {
|
|
153
|
+
display: inline-block;
|
|
154
|
+
box-sizing: border-box;
|
|
155
|
+
text-align: center;
|
|
156
|
+
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
157
|
+
border: 1px solid transparent;
|
|
158
|
+
border-radius: 6px;
|
|
159
|
+
border-style: solid;
|
|
160
|
+
background: transparent;
|
|
161
|
+
color: #515e5f;
|
|
162
|
+
cursor: pointer;
|
|
163
|
+
-webkit-text-decoration: none;
|
|
164
|
+
text-decoration: none;
|
|
165
|
+
line-height: 16px;
|
|
166
|
+
white-space: nowrap;
|
|
167
|
+
font-weight: 700;
|
|
168
|
+
-webkit-transition: all .15s linear;
|
|
169
|
+
transition: all .15s linear;
|
|
170
|
+
margin: 0;
|
|
171
|
+
padding: 8px;
|
|
172
|
+
font-size: 13px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.c0:visited {
|
|
176
|
+
color: #515e5f;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.c0:hover {
|
|
180
|
+
color: #273333;
|
|
181
|
+
-webkit-text-decoration: none;
|
|
182
|
+
text-decoration: none;
|
|
183
|
+
box-shadow: none;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.c0:active {
|
|
187
|
+
color: #273333;
|
|
188
|
+
-webkit-transform: translateY(1px);
|
|
189
|
+
-ms-transform: translateY(1px);
|
|
190
|
+
transform: translateY(1px);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.c0:focus {
|
|
194
|
+
box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
|
|
195
|
+
outline: none;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.c0:focus::-moz-focus-inner {
|
|
199
|
+
border: 0;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.c0:focus:active {
|
|
203
|
+
box-shadow: none;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.c0 .styles__Container-x0vwa5-0 {
|
|
207
|
+
vertical-align: text-bottom;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
<div>
|
|
211
|
+
<button
|
|
212
|
+
class="c0"
|
|
213
|
+
data-qa-button=""
|
|
214
|
+
data-qa-button-isdisabled="false"
|
|
215
|
+
type="button"
|
|
216
|
+
>
|
|
217
|
+
Button
|
|
218
|
+
</button>
|
|
219
|
+
</div>
|
|
220
|
+
`;
|
|
221
|
+
|
|
222
|
+
exports[`Racine Button should render in large size 1`] = `
|
|
223
|
+
.c0 {
|
|
224
|
+
display: inline-block;
|
|
225
|
+
box-sizing: border-box;
|
|
226
|
+
text-align: center;
|
|
227
|
+
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
228
|
+
border: 1px solid #364141;
|
|
229
|
+
border-radius: 6px;
|
|
230
|
+
border-style: solid;
|
|
231
|
+
background: transparent;
|
|
232
|
+
color: #364141;
|
|
233
|
+
cursor: pointer;
|
|
234
|
+
-webkit-text-decoration: none;
|
|
235
|
+
text-decoration: none;
|
|
236
|
+
line-height: 16px;
|
|
237
|
+
white-space: nowrap;
|
|
238
|
+
font-weight: 700;
|
|
239
|
+
-webkit-transition: all .15s linear;
|
|
240
|
+
transition: all .15s linear;
|
|
241
|
+
margin: 0;
|
|
242
|
+
padding: 12px;
|
|
243
|
+
font-size: 16px;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.c0:visited {
|
|
247
|
+
color: #364141;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.c0:hover {
|
|
251
|
+
color: #FFFFFF;
|
|
252
|
+
background: #364141;
|
|
253
|
+
-webkit-text-decoration: none;
|
|
254
|
+
text-decoration: none;
|
|
255
|
+
box-shadow: none;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.c0:active {
|
|
259
|
+
color: #FFFFFF;
|
|
260
|
+
background: #273333;
|
|
261
|
+
-webkit-transform: translateY(1px);
|
|
262
|
+
-ms-transform: translateY(1px);
|
|
263
|
+
transform: translateY(1px);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.c0:focus {
|
|
267
|
+
box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
|
|
268
|
+
outline: none;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.c0:focus::-moz-focus-inner {
|
|
272
|
+
border: 0;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.c0:focus:active {
|
|
276
|
+
box-shadow: none;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.c0 .styles__Container-x0vwa5-0 {
|
|
280
|
+
vertical-align: text-bottom;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
<div>
|
|
284
|
+
<button
|
|
285
|
+
class="c0"
|
|
286
|
+
data-qa-button=""
|
|
287
|
+
data-qa-button-isdisabled="false"
|
|
288
|
+
type="button"
|
|
289
|
+
>
|
|
290
|
+
Button
|
|
291
|
+
</button>
|
|
292
|
+
</div>
|
|
293
|
+
`;
|
|
294
|
+
|
|
295
|
+
exports[`Racine Button should render in pill style 1`] = `
|
|
296
|
+
.c0 {
|
|
297
|
+
display: inline-block;
|
|
298
|
+
box-sizing: border-box;
|
|
299
|
+
text-align: center;
|
|
300
|
+
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
301
|
+
border: 1px solid transparent;
|
|
302
|
+
border-radius: 6px;
|
|
303
|
+
border-style: solid;
|
|
304
|
+
background: transparent;
|
|
305
|
+
color: #515e5f;
|
|
306
|
+
cursor: pointer;
|
|
307
|
+
-webkit-text-decoration: none;
|
|
308
|
+
text-decoration: none;
|
|
309
|
+
line-height: 16px;
|
|
310
|
+
white-space: nowrap;
|
|
311
|
+
font-weight: 700;
|
|
312
|
+
-webkit-transition: all .15s linear;
|
|
313
|
+
transition: all .15s linear;
|
|
314
|
+
margin: 0;
|
|
315
|
+
padding: 8px;
|
|
316
|
+
font-size: 13px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.c0:visited {
|
|
320
|
+
color: #515e5f;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.c0:hover {
|
|
324
|
+
color: #273333;
|
|
325
|
+
-webkit-text-decoration: none;
|
|
326
|
+
text-decoration: none;
|
|
327
|
+
box-shadow: none;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.c0:active {
|
|
331
|
+
color: #273333;
|
|
332
|
+
-webkit-transform: translateY(1px);
|
|
333
|
+
-ms-transform: translateY(1px);
|
|
334
|
+
transform: translateY(1px);
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.c0:focus {
|
|
338
|
+
box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
|
|
339
|
+
outline: none;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.c0:focus::-moz-focus-inner {
|
|
343
|
+
border: 0;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.c0:focus:active {
|
|
347
|
+
box-shadow: none;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.c0 .styles__Container-x0vwa5-0 {
|
|
351
|
+
vertical-align: text-bottom;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
<div>
|
|
355
|
+
<button
|
|
356
|
+
class="c0"
|
|
357
|
+
data-qa-button=""
|
|
358
|
+
data-qa-button-isdisabled="false"
|
|
359
|
+
shape="pill"
|
|
360
|
+
type="button"
|
|
361
|
+
>
|
|
362
|
+
Button
|
|
363
|
+
</button>
|
|
364
|
+
</div>
|
|
365
|
+
`;
|
|
366
|
+
|
|
367
|
+
exports[`Racine Button should render in primary style 1`] = `
|
|
368
|
+
.c0 {
|
|
369
|
+
display: inline-block;
|
|
370
|
+
box-sizing: border-box;
|
|
371
|
+
text-align: center;
|
|
372
|
+
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
373
|
+
border: 1px solid transparent;
|
|
374
|
+
border-radius: 6px;
|
|
375
|
+
border-style: solid;
|
|
376
|
+
background: #2079c3;
|
|
377
|
+
color: #FFFFFF;
|
|
378
|
+
cursor: pointer;
|
|
379
|
+
-webkit-text-decoration: none;
|
|
380
|
+
text-decoration: none;
|
|
381
|
+
line-height: 16px;
|
|
382
|
+
white-space: nowrap;
|
|
383
|
+
font-weight: 700;
|
|
384
|
+
-webkit-transition: all .15s linear;
|
|
385
|
+
transition: all .15s linear;
|
|
386
|
+
margin: 0;
|
|
387
|
+
padding: 8px;
|
|
388
|
+
font-size: 13px;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.c0:visited {
|
|
392
|
+
color: #FFFFFF;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.c0:hover {
|
|
396
|
+
color: #FFFFFF;
|
|
397
|
+
background: #116daa;
|
|
398
|
+
-webkit-text-decoration: none;
|
|
399
|
+
text-decoration: none;
|
|
400
|
+
box-shadow: none;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.c0:active {
|
|
404
|
+
color: #FFFFFF;
|
|
405
|
+
background: #0c5689;
|
|
406
|
+
-webkit-transform: translateY(1px);
|
|
407
|
+
-ms-transform: translateY(1px);
|
|
408
|
+
transform: translateY(1px);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.c0:focus {
|
|
412
|
+
box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
|
|
413
|
+
outline: none;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.c0:focus::-moz-focus-inner {
|
|
417
|
+
border: 0;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.c0:focus:active {
|
|
421
|
+
box-shadow: none;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.c0 .styles__Container-x0vwa5-0 {
|
|
425
|
+
vertical-align: text-bottom;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
<div>
|
|
429
|
+
<button
|
|
430
|
+
class="c0"
|
|
431
|
+
data-qa-button=""
|
|
432
|
+
data-qa-button-isdisabled="false"
|
|
433
|
+
type="button"
|
|
434
|
+
>
|
|
435
|
+
Button
|
|
436
|
+
</button>
|
|
437
|
+
</div>
|
|
438
|
+
`;
|
|
439
|
+
|
|
440
|
+
exports[`Racine Button should render in secondary style 1`] = `
|
|
441
|
+
.c0 {
|
|
442
|
+
display: inline-block;
|
|
443
|
+
box-sizing: border-box;
|
|
444
|
+
text-align: center;
|
|
445
|
+
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
446
|
+
border: 1px solid #364141;
|
|
447
|
+
border-radius: 6px;
|
|
448
|
+
border-style: solid;
|
|
449
|
+
background: transparent;
|
|
450
|
+
color: #364141;
|
|
451
|
+
cursor: pointer;
|
|
452
|
+
-webkit-text-decoration: none;
|
|
453
|
+
text-decoration: none;
|
|
454
|
+
line-height: 16px;
|
|
455
|
+
white-space: nowrap;
|
|
456
|
+
font-weight: 700;
|
|
457
|
+
-webkit-transition: all .15s linear;
|
|
458
|
+
transition: all .15s linear;
|
|
459
|
+
margin: 0;
|
|
460
|
+
padding: 8px;
|
|
461
|
+
font-size: 13px;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.c0:visited {
|
|
465
|
+
color: #364141;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.c0:hover {
|
|
469
|
+
color: #FFFFFF;
|
|
470
|
+
background: #364141;
|
|
471
|
+
-webkit-text-decoration: none;
|
|
472
|
+
text-decoration: none;
|
|
473
|
+
box-shadow: none;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.c0:active {
|
|
477
|
+
color: #FFFFFF;
|
|
478
|
+
background: #273333;
|
|
479
|
+
-webkit-transform: translateY(1px);
|
|
480
|
+
-ms-transform: translateY(1px);
|
|
481
|
+
transform: translateY(1px);
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.c0:focus {
|
|
485
|
+
box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
|
|
486
|
+
outline: none;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.c0:focus::-moz-focus-inner {
|
|
490
|
+
border: 0;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.c0:focus:active {
|
|
494
|
+
box-shadow: none;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.c0 .styles__Container-x0vwa5-0 {
|
|
498
|
+
vertical-align: text-bottom;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
<div>
|
|
502
|
+
<button
|
|
503
|
+
class="c0"
|
|
504
|
+
data-qa-button=""
|
|
505
|
+
data-qa-button-isdisabled="false"
|
|
506
|
+
type="button"
|
|
507
|
+
>
|
|
508
|
+
Button
|
|
509
|
+
</button>
|
|
510
|
+
</div>
|
|
511
|
+
`;
|