@justfixnyc/component-library 0.33.0 → 0.34.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/dist/src/assets/index.css +33 -9
- package/dist/src/assets/index.es.css +33 -9
- package/dist/src/index.es.js +63 -34
- package/dist/src/index.js +63 -33
- package/dist/typings/Checkbox/Checkbox.d.ts +16 -0
- package/dist/typings/FormGroup/FormGroup.d.ts +13 -0
- package/dist/typings/InputHeader/InputHeader.d.ts +12 -0
- package/dist/typings/RadioButton/RadioButton.d.ts +16 -0
- package/dist/typings/alerts/Alert.d.ts +1 -0
- package/dist/typings/icons/Check2.d.ts +3 -0
- package/dist/typings/icons/Icons.d.ts +2 -1
- package/dist/typings/link/Link.d.ts +2 -1
- package/dist/typings/textInput/TextInput.d.ts +16 -0
- package/package.json +1 -1
|
@@ -22,6 +22,17 @@
|
|
|
22
22
|
font-style: normal;
|
|
23
23
|
src: url("./Degular_Display-Medium-ca624b2b.woff2") format("woff2"), url("./Degular_Display-Medium-669217c9.woff") format("woff");
|
|
24
24
|
}
|
|
25
|
+
.jfcl-sr-only {
|
|
26
|
+
position: absolute;
|
|
27
|
+
width: 1px;
|
|
28
|
+
height: 1px;
|
|
29
|
+
padding: 0;
|
|
30
|
+
margin: -1px;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
clip: rect(0, 0, 0, 0);
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
border: 0;
|
|
35
|
+
}
|
|
25
36
|
@keyframes spin {
|
|
26
37
|
from {
|
|
27
38
|
transform: rotate(0deg);
|
|
@@ -34,7 +45,7 @@
|
|
|
34
45
|
font-family: "Degular", Arial, Helvetica, sans-serif;
|
|
35
46
|
font-style: normal;
|
|
36
47
|
font-weight: 500;
|
|
37
|
-
font-size: 1.
|
|
48
|
+
font-size: 1.125rem;
|
|
38
49
|
line-height: 120%;
|
|
39
50
|
letter-spacing: 0.54px;
|
|
40
51
|
cursor: pointer;
|
|
@@ -191,7 +202,7 @@
|
|
|
191
202
|
font-family: "Degular", Arial, Helvetica, sans-serif;
|
|
192
203
|
font-style: normal;
|
|
193
204
|
font-weight: 500;
|
|
194
|
-
font-size: 1.
|
|
205
|
+
font-size: 1.125rem;
|
|
195
206
|
line-height: 120%;
|
|
196
207
|
letter-spacing: 0.54px;
|
|
197
208
|
}
|
|
@@ -212,7 +223,14 @@
|
|
|
212
223
|
left: 0;
|
|
213
224
|
bottom: 0;
|
|
214
225
|
}
|
|
215
|
-
.jfcl-alert .jfcl-alert__btn
|
|
226
|
+
.jfcl-alert button.jfcl-alert__btn,
|
|
227
|
+
.jfcl-alert a.jfcl-alert__btn {
|
|
228
|
+
font-family: "Degular", Arial, Helvetica, sans-serif;
|
|
229
|
+
font-style: normal;
|
|
230
|
+
font-weight: 500;
|
|
231
|
+
font-size: 1.125rem;
|
|
232
|
+
line-height: 120%;
|
|
233
|
+
letter-spacing: 0.54px;
|
|
216
234
|
display: flex;
|
|
217
235
|
background: transparent;
|
|
218
236
|
padding: 0;
|
|
@@ -220,11 +238,14 @@
|
|
|
220
238
|
margin-left: 0.5rem;
|
|
221
239
|
cursor: pointer;
|
|
222
240
|
font-size: 1em;
|
|
241
|
+
text-decoration: none;
|
|
223
242
|
}
|
|
224
|
-
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text
|
|
243
|
+
.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text,
|
|
244
|
+
.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text {
|
|
225
245
|
border-bottom: 1px solid;
|
|
226
246
|
}
|
|
227
|
-
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text:hover
|
|
247
|
+
.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
|
|
248
|
+
.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
228
249
|
color: #676565;
|
|
229
250
|
}
|
|
230
251
|
.jfcl-alert.jfcl-type-info::before {
|
|
@@ -240,10 +261,12 @@
|
|
|
240
261
|
background-color: #242323;
|
|
241
262
|
color: #faf8f4;
|
|
242
263
|
}
|
|
243
|
-
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn
|
|
264
|
+
.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn,
|
|
265
|
+
.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn {
|
|
244
266
|
color: #faf8f4;
|
|
245
267
|
}
|
|
246
|
-
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn.jfcl-alert__btn_text:hover
|
|
268
|
+
.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
|
|
269
|
+
.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
247
270
|
color: #9a9898;
|
|
248
271
|
}
|
|
249
272
|
.jfcl-alert.jfcl-variant-secondary {
|
|
@@ -251,7 +274,8 @@
|
|
|
251
274
|
border: 1px solid #676565;
|
|
252
275
|
color: #242323;
|
|
253
276
|
}
|
|
254
|
-
.jfcl-alert.jfcl-variant-secondary .jfcl-alert__btn
|
|
277
|
+
.jfcl-alert.jfcl-variant-secondary button.jfcl-alert__btn,
|
|
278
|
+
.jfcl-alert.jfcl-variant-secondary a.jfcl-alert__btn {
|
|
255
279
|
color: #242323;
|
|
256
280
|
border-color: #242323;
|
|
257
281
|
}
|
|
@@ -267,7 +291,7 @@
|
|
|
267
291
|
font-family: "Degular", Arial, Helvetica, sans-serif;
|
|
268
292
|
font-style: normal;
|
|
269
293
|
font-weight: 500;
|
|
270
|
-
font-size: 1.
|
|
294
|
+
font-size: 1.125rem;
|
|
271
295
|
line-height: 120%;
|
|
272
296
|
letter-spacing: 0.54px;
|
|
273
297
|
color: #242323;
|
|
@@ -22,6 +22,17 @@
|
|
|
22
22
|
font-style: normal;
|
|
23
23
|
src: url("./Degular_Display-Medium-ca624b2b.woff2") format("woff2"), url("./Degular_Display-Medium-669217c9.woff") format("woff");
|
|
24
24
|
}
|
|
25
|
+
.jfcl-sr-only {
|
|
26
|
+
position: absolute;
|
|
27
|
+
width: 1px;
|
|
28
|
+
height: 1px;
|
|
29
|
+
padding: 0;
|
|
30
|
+
margin: -1px;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
clip: rect(0, 0, 0, 0);
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
border: 0;
|
|
35
|
+
}
|
|
25
36
|
@keyframes spin {
|
|
26
37
|
from {
|
|
27
38
|
transform: rotate(0deg);
|
|
@@ -34,7 +45,7 @@
|
|
|
34
45
|
font-family: "Degular", Arial, Helvetica, sans-serif;
|
|
35
46
|
font-style: normal;
|
|
36
47
|
font-weight: 500;
|
|
37
|
-
font-size: 1.
|
|
48
|
+
font-size: 1.125rem;
|
|
38
49
|
line-height: 120%;
|
|
39
50
|
letter-spacing: 0.54px;
|
|
40
51
|
cursor: pointer;
|
|
@@ -191,7 +202,7 @@
|
|
|
191
202
|
font-family: "Degular", Arial, Helvetica, sans-serif;
|
|
192
203
|
font-style: normal;
|
|
193
204
|
font-weight: 500;
|
|
194
|
-
font-size: 1.
|
|
205
|
+
font-size: 1.125rem;
|
|
195
206
|
line-height: 120%;
|
|
196
207
|
letter-spacing: 0.54px;
|
|
197
208
|
}
|
|
@@ -212,7 +223,14 @@
|
|
|
212
223
|
left: 0;
|
|
213
224
|
bottom: 0;
|
|
214
225
|
}
|
|
215
|
-
.jfcl-alert .jfcl-alert__btn
|
|
226
|
+
.jfcl-alert button.jfcl-alert__btn,
|
|
227
|
+
.jfcl-alert a.jfcl-alert__btn {
|
|
228
|
+
font-family: "Degular", Arial, Helvetica, sans-serif;
|
|
229
|
+
font-style: normal;
|
|
230
|
+
font-weight: 500;
|
|
231
|
+
font-size: 1.125rem;
|
|
232
|
+
line-height: 120%;
|
|
233
|
+
letter-spacing: 0.54px;
|
|
216
234
|
display: flex;
|
|
217
235
|
background: transparent;
|
|
218
236
|
padding: 0;
|
|
@@ -220,11 +238,14 @@
|
|
|
220
238
|
margin-left: 0.5rem;
|
|
221
239
|
cursor: pointer;
|
|
222
240
|
font-size: 1em;
|
|
241
|
+
text-decoration: none;
|
|
223
242
|
}
|
|
224
|
-
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text
|
|
243
|
+
.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text,
|
|
244
|
+
.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text {
|
|
225
245
|
border-bottom: 1px solid;
|
|
226
246
|
}
|
|
227
|
-
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text:hover
|
|
247
|
+
.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
|
|
248
|
+
.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
228
249
|
color: #676565;
|
|
229
250
|
}
|
|
230
251
|
.jfcl-alert.jfcl-type-info::before {
|
|
@@ -240,10 +261,12 @@
|
|
|
240
261
|
background-color: #242323;
|
|
241
262
|
color: #faf8f4;
|
|
242
263
|
}
|
|
243
|
-
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn
|
|
264
|
+
.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn,
|
|
265
|
+
.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn {
|
|
244
266
|
color: #faf8f4;
|
|
245
267
|
}
|
|
246
|
-
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn.jfcl-alert__btn_text:hover
|
|
268
|
+
.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
|
|
269
|
+
.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
247
270
|
color: #9a9898;
|
|
248
271
|
}
|
|
249
272
|
.jfcl-alert.jfcl-variant-secondary {
|
|
@@ -251,7 +274,8 @@
|
|
|
251
274
|
border: 1px solid #676565;
|
|
252
275
|
color: #242323;
|
|
253
276
|
}
|
|
254
|
-
.jfcl-alert.jfcl-variant-secondary .jfcl-alert__btn
|
|
277
|
+
.jfcl-alert.jfcl-variant-secondary button.jfcl-alert__btn,
|
|
278
|
+
.jfcl-alert.jfcl-variant-secondary a.jfcl-alert__btn {
|
|
255
279
|
color: #242323;
|
|
256
280
|
border-color: #242323;
|
|
257
281
|
}
|
|
@@ -267,7 +291,7 @@
|
|
|
267
291
|
font-family: "Degular", Arial, Helvetica, sans-serif;
|
|
268
292
|
font-style: normal;
|
|
269
293
|
font-weight: 500;
|
|
270
|
-
font-size: 1.
|
|
294
|
+
font-size: 1.125rem;
|
|
271
295
|
line-height: 120%;
|
|
272
296
|
letter-spacing: 0.54px;
|
|
273
297
|
color: #242323;
|
package/dist/src/index.es.js
CHANGED
|
@@ -127,6 +127,22 @@ const IconCheck = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.cre
|
|
|
127
127
|
IconCheck.displayName = 'IconCheck';
|
|
128
128
|
var IconCheck$1 = IconCheck;
|
|
129
129
|
|
|
130
|
+
const IconCheck2 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
131
|
+
ref: ref
|
|
132
|
+
}, props, {
|
|
133
|
+
width: "18",
|
|
134
|
+
height: "13",
|
|
135
|
+
viewBox: "0 0 18 13",
|
|
136
|
+
fill: "none",
|
|
137
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
138
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
139
|
+
d: "M1.66663 6.66671L6.33329 11.3334L16.3333 1.33337",
|
|
140
|
+
stroke: "#F4F8F4",
|
|
141
|
+
strokeWidth: "2"
|
|
142
|
+
})));
|
|
143
|
+
IconCheck2.displayName = 'IconCheck';
|
|
144
|
+
var IconCheck2$1 = IconCheck2;
|
|
145
|
+
|
|
130
146
|
const IconError = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
131
147
|
ref: ref
|
|
132
148
|
}, props, {
|
|
@@ -303,17 +319,54 @@ const IconFacebook = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.
|
|
|
303
319
|
IconFacebook.displayName = 'IconFacebook';
|
|
304
320
|
var IconFacebook$1 = IconFacebook;
|
|
305
321
|
|
|
322
|
+
const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
323
|
+
let {
|
|
324
|
+
icon,
|
|
325
|
+
children,
|
|
326
|
+
className,
|
|
327
|
+
target,
|
|
328
|
+
...props
|
|
329
|
+
} = _ref;
|
|
330
|
+
const linkClassNames = classNames('jfcl-link', className);
|
|
331
|
+
const opensInNewTab = target === '_blank';
|
|
332
|
+
// When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
|
|
333
|
+
// Since this navigate function is not a normal anchor element attribute we want to remove it before applying the rest of
|
|
334
|
+
// the props to avoid browser errors.
|
|
335
|
+
// Github issue talking about what's happening:
|
|
336
|
+
// https://github.com/remix-run/react-router/issues/6962
|
|
337
|
+
// Reference to react-router-dom Link component code to see what it's doing:
|
|
338
|
+
// https://github.com/remix-run/react-router/blob/0c058adc5b56c6d9b409af5e4d8330c645fac00c/packages/react-router-dom/modules/Link.js
|
|
339
|
+
delete props.navigate;
|
|
340
|
+
return /*#__PURE__*/React.createElement("a", _extends({}, props, {
|
|
341
|
+
ref: ref,
|
|
342
|
+
className: linkClassNames
|
|
343
|
+
}), children, icon === 'internal' && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
344
|
+
icon: faArrowRight,
|
|
345
|
+
className: "jfcl-link__icon"
|
|
346
|
+
}), icon === 'external' && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
347
|
+
icon: faSquareArrowUpRight,
|
|
348
|
+
className: "jfcl-link__icon"
|
|
349
|
+
}), opensInNewTab && /*#__PURE__*/React.createElement("span", {
|
|
350
|
+
className: "jfcl-sr-only"
|
|
351
|
+
}, "(Opens in a new window)"));
|
|
352
|
+
});
|
|
353
|
+
Link.displayName = 'Link';
|
|
354
|
+
|
|
306
355
|
const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
307
356
|
let {
|
|
308
357
|
type = 'info',
|
|
309
358
|
variant = 'primary',
|
|
310
359
|
text,
|
|
311
360
|
action,
|
|
361
|
+
actionHref,
|
|
312
362
|
actionLabel,
|
|
313
363
|
className,
|
|
314
364
|
...props
|
|
315
365
|
} = _ref;
|
|
316
366
|
const alertClassNames = classNames('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
367
|
+
const hasAction = !!action;
|
|
368
|
+
const showButton = hasAction && !actionHref;
|
|
369
|
+
const showLink = actionLabel && actionHref;
|
|
317
370
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
318
371
|
ref: ref,
|
|
319
372
|
"data-testid": "jfcl-alert",
|
|
@@ -326,44 +379,20 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
326
379
|
}, /*#__PURE__*/React.createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React.createElement("div", {
|
|
327
380
|
className: "jfcl-alert__icon",
|
|
328
381
|
"data-testid": "jfcl-alert__icon"
|
|
329
|
-
}, /*#__PURE__*/React.createElement(IconCheck$1, null)), text),
|
|
382
|
+
}, /*#__PURE__*/React.createElement(IconCheck$1, null)), text), showButton && /*#__PURE__*/React.createElement("button", {
|
|
330
383
|
className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
|
|
331
384
|
"data-testid": "jfcl-alert__btn",
|
|
332
385
|
onClick: action
|
|
333
|
-
}, actionLabel
|
|
386
|
+
}, actionLabel || /*#__PURE__*/React.createElement(IconClose$1, {
|
|
334
387
|
"aria-label": "Dismiss"
|
|
335
|
-
}))
|
|
388
|
+
})), showLink && /*#__PURE__*/React.createElement(Link, _extends({
|
|
389
|
+
href: actionHref,
|
|
390
|
+
className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
|
|
391
|
+
"data-testid": "jfcl-alert__btn"
|
|
392
|
+
}, hasAction && {
|
|
393
|
+
onClick: action
|
|
394
|
+
}), actionLabel));
|
|
336
395
|
});
|
|
337
396
|
Alert.displayName = 'Alert';
|
|
338
397
|
|
|
339
|
-
|
|
340
|
-
let {
|
|
341
|
-
icon,
|
|
342
|
-
children,
|
|
343
|
-
className,
|
|
344
|
-
...props
|
|
345
|
-
} = _ref;
|
|
346
|
-
const linkClassNames = classNames('jfcl-link', className);
|
|
347
|
-
|
|
348
|
-
// When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
|
|
349
|
-
// Since this navigate function is not a normal anchor element attribute we want to remove it before applying the rest of
|
|
350
|
-
// the props to avoid browser errors.
|
|
351
|
-
// Github issue talking about what's happening:
|
|
352
|
-
// https://github.com/remix-run/react-router/issues/6962
|
|
353
|
-
// Reference to react-router-dom Link component code to see what it's doing:
|
|
354
|
-
// https://github.com/remix-run/react-router/blob/0c058adc5b56c6d9b409af5e4d8330c645fac00c/packages/react-router-dom/modules/Link.js
|
|
355
|
-
delete props.navigate;
|
|
356
|
-
return /*#__PURE__*/React.createElement("a", _extends({}, props, {
|
|
357
|
-
ref: ref,
|
|
358
|
-
className: linkClassNames
|
|
359
|
-
}), children, icon === 'internal' && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
360
|
-
icon: faArrowRight,
|
|
361
|
-
className: "jfcl-link__icon"
|
|
362
|
-
}), icon === 'external' && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
363
|
-
icon: faSquareArrowUpRight,
|
|
364
|
-
className: "jfcl-link__icon"
|
|
365
|
-
}));
|
|
366
|
-
});
|
|
367
|
-
Link.displayName = 'Link';
|
|
368
|
-
|
|
369
|
-
export { Alert, Button, IconCheck$1 as IconCheck, IconChevron$1 as IconChevron, IconClose$1 as IconClose, IconError$1 as IconError, IconFacebook$1 as IconFacebook, IconGlobe$1 as IconGlobe, IconHamburger$1 as IconHamburger, IconInternet$1 as IconInternet, IconHamburger$3 as IconLinkExternal, IconLinkInternal$1 as IconLinkInternal, IconLoading$1 as IconLoading, IconMail$1 as IconMail, IconPerson$1 as IconPerson, IconTwitter$1 as IconTwitter, Link };
|
|
398
|
+
export { Alert, Button, IconCheck$1 as IconCheck, IconCheck2$1 as IconCheck2, IconChevron$1 as IconChevron, IconClose$1 as IconClose, IconError$1 as IconError, IconFacebook$1 as IconFacebook, IconGlobe$1 as IconGlobe, IconHamburger$1 as IconHamburger, IconInternet$1 as IconInternet, IconHamburger$3 as IconLinkExternal, IconLinkInternal$1 as IconLinkInternal, IconLoading$1 as IconLoading, IconMail$1 as IconMail, IconPerson$1 as IconPerson, IconTwitter$1 as IconTwitter, Link };
|
package/dist/src/index.js
CHANGED
|
@@ -137,6 +137,22 @@ const IconCheck = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/Rea
|
|
|
137
137
|
IconCheck.displayName = 'IconCheck';
|
|
138
138
|
var IconCheck$1 = IconCheck;
|
|
139
139
|
|
|
140
|
+
const IconCheck2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
|
|
141
|
+
ref: ref
|
|
142
|
+
}, props, {
|
|
143
|
+
width: "18",
|
|
144
|
+
height: "13",
|
|
145
|
+
viewBox: "0 0 18 13",
|
|
146
|
+
fill: "none",
|
|
147
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
148
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
149
|
+
d: "M1.66663 6.66671L6.33329 11.3334L16.3333 1.33337",
|
|
150
|
+
stroke: "#F4F8F4",
|
|
151
|
+
strokeWidth: "2"
|
|
152
|
+
})));
|
|
153
|
+
IconCheck2.displayName = 'IconCheck';
|
|
154
|
+
var IconCheck2$1 = IconCheck2;
|
|
155
|
+
|
|
140
156
|
const IconError = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
|
|
141
157
|
ref: ref
|
|
142
158
|
}, props, {
|
|
@@ -313,17 +329,54 @@ const IconFacebook = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/
|
|
|
313
329
|
IconFacebook.displayName = 'IconFacebook';
|
|
314
330
|
var IconFacebook$1 = IconFacebook;
|
|
315
331
|
|
|
332
|
+
const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
333
|
+
let {
|
|
334
|
+
icon,
|
|
335
|
+
children,
|
|
336
|
+
className,
|
|
337
|
+
target,
|
|
338
|
+
...props
|
|
339
|
+
} = _ref;
|
|
340
|
+
const linkClassNames = classNames__default["default"]('jfcl-link', className);
|
|
341
|
+
const opensInNewTab = target === '_blank';
|
|
342
|
+
// When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
|
|
343
|
+
// Since this navigate function is not a normal anchor element attribute we want to remove it before applying the rest of
|
|
344
|
+
// the props to avoid browser errors.
|
|
345
|
+
// Github issue talking about what's happening:
|
|
346
|
+
// https://github.com/remix-run/react-router/issues/6962
|
|
347
|
+
// Reference to react-router-dom Link component code to see what it's doing:
|
|
348
|
+
// https://github.com/remix-run/react-router/blob/0c058adc5b56c6d9b409af5e4d8330c645fac00c/packages/react-router-dom/modules/Link.js
|
|
349
|
+
delete props.navigate;
|
|
350
|
+
return /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({}, props, {
|
|
351
|
+
ref: ref,
|
|
352
|
+
className: linkClassNames
|
|
353
|
+
}), children, icon === 'internal' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
354
|
+
icon: freeSolidSvgIcons.faArrowRight,
|
|
355
|
+
className: "jfcl-link__icon"
|
|
356
|
+
}), icon === 'external' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
357
|
+
icon: freeSolidSvgIcons.faSquareArrowUpRight,
|
|
358
|
+
className: "jfcl-link__icon"
|
|
359
|
+
}), opensInNewTab && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
360
|
+
className: "jfcl-sr-only"
|
|
361
|
+
}, "(Opens in a new window)"));
|
|
362
|
+
});
|
|
363
|
+
Link.displayName = 'Link';
|
|
364
|
+
|
|
316
365
|
const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
317
366
|
let {
|
|
318
367
|
type = 'info',
|
|
319
368
|
variant = 'primary',
|
|
320
369
|
text,
|
|
321
370
|
action,
|
|
371
|
+
actionHref,
|
|
322
372
|
actionLabel,
|
|
323
373
|
className,
|
|
324
374
|
...props
|
|
325
375
|
} = _ref;
|
|
326
376
|
const alertClassNames = classNames__default["default"]('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
377
|
+
const hasAction = !!action;
|
|
378
|
+
const showButton = hasAction && !actionHref;
|
|
379
|
+
const showLink = actionLabel && actionHref;
|
|
327
380
|
return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
|
|
328
381
|
ref: ref,
|
|
329
382
|
"data-testid": "jfcl-alert",
|
|
@@ -336,49 +389,26 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
336
389
|
}, /*#__PURE__*/React__default["default"].createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
337
390
|
className: "jfcl-alert__icon",
|
|
338
391
|
"data-testid": "jfcl-alert__icon"
|
|
339
|
-
}, /*#__PURE__*/React__default["default"].createElement(IconCheck$1, null)), text),
|
|
392
|
+
}, /*#__PURE__*/React__default["default"].createElement(IconCheck$1, null)), text), showButton && /*#__PURE__*/React__default["default"].createElement("button", {
|
|
340
393
|
className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
|
|
341
394
|
"data-testid": "jfcl-alert__btn",
|
|
342
395
|
onClick: action
|
|
343
|
-
}, actionLabel
|
|
396
|
+
}, actionLabel || /*#__PURE__*/React__default["default"].createElement(IconClose$1, {
|
|
344
397
|
"aria-label": "Dismiss"
|
|
345
|
-
}))
|
|
398
|
+
})), showLink && /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
|
|
399
|
+
href: actionHref,
|
|
400
|
+
className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
|
|
401
|
+
"data-testid": "jfcl-alert__btn"
|
|
402
|
+
}, hasAction && {
|
|
403
|
+
onClick: action
|
|
404
|
+
}), actionLabel));
|
|
346
405
|
});
|
|
347
406
|
Alert.displayName = 'Alert';
|
|
348
407
|
|
|
349
|
-
const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
350
|
-
let {
|
|
351
|
-
icon,
|
|
352
|
-
children,
|
|
353
|
-
className,
|
|
354
|
-
...props
|
|
355
|
-
} = _ref;
|
|
356
|
-
const linkClassNames = classNames__default["default"]('jfcl-link', className);
|
|
357
|
-
|
|
358
|
-
// When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
|
|
359
|
-
// Since this navigate function is not a normal anchor element attribute we want to remove it before applying the rest of
|
|
360
|
-
// the props to avoid browser errors.
|
|
361
|
-
// Github issue talking about what's happening:
|
|
362
|
-
// https://github.com/remix-run/react-router/issues/6962
|
|
363
|
-
// Reference to react-router-dom Link component code to see what it's doing:
|
|
364
|
-
// https://github.com/remix-run/react-router/blob/0c058adc5b56c6d9b409af5e4d8330c645fac00c/packages/react-router-dom/modules/Link.js
|
|
365
|
-
delete props.navigate;
|
|
366
|
-
return /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({}, props, {
|
|
367
|
-
ref: ref,
|
|
368
|
-
className: linkClassNames
|
|
369
|
-
}), children, icon === 'internal' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
370
|
-
icon: freeSolidSvgIcons.faArrowRight,
|
|
371
|
-
className: "jfcl-link__icon"
|
|
372
|
-
}), icon === 'external' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
373
|
-
icon: freeSolidSvgIcons.faSquareArrowUpRight,
|
|
374
|
-
className: "jfcl-link__icon"
|
|
375
|
-
}));
|
|
376
|
-
});
|
|
377
|
-
Link.displayName = 'Link';
|
|
378
|
-
|
|
379
408
|
exports.Alert = Alert;
|
|
380
409
|
exports.Button = Button;
|
|
381
410
|
exports.IconCheck = IconCheck$1;
|
|
411
|
+
exports.IconCheck2 = IconCheck2$1;
|
|
382
412
|
exports.IconChevron = IconChevron$1;
|
|
383
413
|
exports.IconClose = IconClose$1;
|
|
384
414
|
exports.IconError = IconError$1;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './styles.scss';
|
|
3
|
+
export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
4
|
+
labelText: string;
|
|
5
|
+
headerText?: string;
|
|
6
|
+
helperText?: string;
|
|
7
|
+
invalid?: boolean;
|
|
8
|
+
invalidText?: string;
|
|
9
|
+
className?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
id: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Accepts all `InputHTMLAttributes`
|
|
15
|
+
*/
|
|
16
|
+
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './styles.scss';
|
|
3
|
+
export interface FormGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
|
|
4
|
+
legendText: string;
|
|
5
|
+
helperText?: string;
|
|
6
|
+
invalid?: boolean;
|
|
7
|
+
invalidText?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Accepts all `HTMLFieldSetElement`
|
|
12
|
+
*/
|
|
13
|
+
export declare const FormGroup: React.ForwardRefExoticComponent<FormGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './style.scss';
|
|
3
|
+
export interface InputHeaderProps {
|
|
4
|
+
className?: string;
|
|
5
|
+
headerText?: string;
|
|
6
|
+
labelFor?: string;
|
|
7
|
+
isLegend?: boolean;
|
|
8
|
+
helperText?: string;
|
|
9
|
+
invalidText?: string;
|
|
10
|
+
invalid?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const InputHeader: React.FC<InputHeaderProps>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './styles.scss';
|
|
3
|
+
export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
4
|
+
labelText: string;
|
|
5
|
+
headerText?: string;
|
|
6
|
+
helperText?: string;
|
|
7
|
+
invalid?: boolean;
|
|
8
|
+
invalidText?: string;
|
|
9
|
+
className?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
id: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Accepts all `InputHTMLAttributes`
|
|
15
|
+
*/
|
|
16
|
+
export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -8,6 +8,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
8
8
|
text: string;
|
|
9
9
|
className?: string;
|
|
10
10
|
action?: () => void;
|
|
11
|
+
actionHref?: string;
|
|
11
12
|
actionLabel?: string;
|
|
12
13
|
}
|
|
13
14
|
export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -2,6 +2,7 @@ import IconLoading from './Loading';
|
|
|
2
2
|
import IconLinkExternal from './LinkExternal';
|
|
3
3
|
import IconLinkInternal from './LinkInternal';
|
|
4
4
|
import IconCheck from './Check';
|
|
5
|
+
import IconCheck2 from './Check2';
|
|
5
6
|
import IconError from './Error';
|
|
6
7
|
import IconChevron from './Chevron';
|
|
7
8
|
import IconClose from './Close';
|
|
@@ -12,4 +13,4 @@ import IconPerson from './Person';
|
|
|
12
13
|
import IconTwitter from './Twitter';
|
|
13
14
|
import IconMail from './Mail';
|
|
14
15
|
import IconFacebook from './Facebook';
|
|
15
|
-
export { IconLoading, IconLinkExternal, IconLinkInternal, IconCheck, IconError, IconTwitter, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, IconMail, IconFacebook, };
|
|
16
|
+
export { IconLoading, IconLinkExternal, IconLinkInternal, IconCheck, IconCheck2, IconError, IconTwitter, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, IconMail, IconFacebook, };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { HTMLAttributeAnchorTarget } from 'react';
|
|
2
2
|
import './styles.scss';
|
|
3
3
|
export type LinkIcon = 'internal' | 'external';
|
|
4
4
|
export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
@@ -6,5 +6,6 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
|
|
|
6
6
|
className?: string;
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
navigate?: () => void;
|
|
9
|
+
target?: HTMLAttributeAnchorTarget;
|
|
9
10
|
}
|
|
10
11
|
export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './styles.scss';
|
|
3
|
+
export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
4
|
+
labelText: string;
|
|
5
|
+
id: string;
|
|
6
|
+
size?: 'small' | 'medium' | 'large';
|
|
7
|
+
helperText?: string;
|
|
8
|
+
invalid?: boolean;
|
|
9
|
+
invalidText?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
type?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Accepts all `InputHTMLAttributes`
|
|
15
|
+
*/
|
|
16
|
+
export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
|