@justfixnyc/component-library 0.33.0 → 0.35.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.
@@ -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.13rem;
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.13rem;
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.13rem;
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.13rem;
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.13rem;
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.13rem;
294
+ font-size: 1.125rem;
271
295
  line-height: 120%;
272
296
  letter-spacing: 0.54px;
273
297
  color: #242323;
@@ -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), !!action && /*#__PURE__*/React.createElement("button", {
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 ? actionLabel : /*#__PURE__*/React.createElement(IconClose$1, {
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
- const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
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), !!action && /*#__PURE__*/React__default["default"].createElement("button", {
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 ? actionLabel : /*#__PURE__*/React__default["default"].createElement(IconClose$1, {
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,17 @@
1
+ import React from 'react';
2
+ import './styles.scss';
3
+ export interface DropdownProps {
4
+ onChange?: () => void;
5
+ className?: string;
6
+ options: {
7
+ value: string;
8
+ label: string;
9
+ isDisabled?: boolean;
10
+ }[];
11
+ labelText: string;
12
+ helperText?: string;
13
+ invalidText?: string;
14
+ invalid?: boolean;
15
+ disabled?: boolean;
16
+ }
17
+ export declare const Dropdown: React.FC<DropdownProps>;
@@ -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>>;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const IconCheck2: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
3
+ export default IconCheck2;
@@ -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>>;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@justfixnyc/component-library",
3
3
  "description": "JustFix Component Library",
4
4
  "license": "MIT",
5
- "version": "0.33.0",
5
+ "version": "0.35.0",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.es.js",
8
8
  "files": [
@@ -31,7 +31,8 @@
31
31
  "@babel/runtime": "^7.12.5",
32
32
  "@fortawesome/fontawesome-svg-core": "^6.5.1",
33
33
  "@fortawesome/free-solid-svg-icons": "^6.5.1",
34
- "@fortawesome/react-fontawesome": "^0.2.0"
34
+ "@fortawesome/react-fontawesome": "^0.2.0",
35
+ "react-select": "^5.7.2"
35
36
  },
36
37
  "peerDependencies": {
37
38
  "@lingui/cli": ">=2.9.1",