@justfixnyc/component-library 0.32.2 → 0.34.0

package/dist/src/assets/index.css

@@ -22,6 +22,17 @@
   font-style: normal;
   src: url("./Degular_Display-Medium-ca624b2b.woff2") format("woff2"), url("./Degular_Display-Medium-669217c9.woff") format("woff");
 }
+.jfcl-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -34,7 +45,7 @@
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 1.13rem;
+  font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
   cursor: pointer;
@@ -134,26 +145,30 @@
   border-right-color: transparent;
   border-top-color: transparent;
 }
-.jfcl-button.jfcl-variant-text {
+.jfcl-button.jfcl-variant-tertiary {
   color: #242323;
   background: none;
   border: none;
   box-shadow: none;
 }
-.jfcl-button.jfcl-variant-text:disabled {
+.jfcl-button.jfcl-variant-tertiary:disabled {
   cursor: inherit;
   color: #676565;
 }
-.jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
+.jfcl-button.jfcl-variant-tertiary:disabled .jfcl-button__text {
   border-bottom: none;
 }
-.jfcl-button.jfcl-variant-text:hover:not(:disabled) {
+.jfcl-button.jfcl-variant-tertiary:hover:not(:disabled) {
   background-color: #efe9dc;
+  box-shadow: none;
+}
+.jfcl-button.jfcl-variant-tertiary:active:not(:disabled) {
+  box-shadow: none;
 }
-.jfcl-button.jfcl-variant-text.jfcl-is-loading {
+.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading {
   background-color: #efe9dc;
 }
-.jfcl-button.jfcl-variant-text.jfcl-is-loading .jfcl-button__icon {
+.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading .jfcl-button__icon {
   display: block;
   animation: spin 500ms infinite linear;
   position: relative;
@@ -162,7 +177,7 @@
   border-right-color: transparent;
   border-top-color: transparent;
 }
-.jfcl-button.jfcl-variant-text:active(:disabled) {
+.jfcl-button.jfcl-variant-tertiary:active(:disabled) {
   background-color: rgba(239, 233, 220, 0.8);
 }
 @keyframes spin {
@@ -187,7 +202,7 @@
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 1.13rem;
+  font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
 }
@@ -208,7 +223,14 @@
   left: 0;
   bottom: 0;
 }
-.jfcl-alert .jfcl-alert__btn {
+.jfcl-alert button.jfcl-alert__btn,
+.jfcl-alert a.jfcl-alert__btn {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
   display: flex;
   background: transparent;
   padding: 0;
@@ -216,11 +238,14 @@
   margin-left: 0.5rem;
   cursor: pointer;
   font-size: 1em;
+  text-decoration: none;
 }
-.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text {
+.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text,
+.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text {
   border-bottom: 1px solid;
 }
-.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text:hover {
+.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
+.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
   color: #676565;
 }
 .jfcl-alert.jfcl-type-info::before {
@@ -236,10 +261,12 @@
   background-color: #242323;
   color: #faf8f4;
 }
-.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn {
+.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn,
+.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn {
   color: #faf8f4;
 }
-.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn.jfcl-alert__btn_text:hover {
+.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
+.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
   color: #9a9898;
 }
 .jfcl-alert.jfcl-variant-secondary {
@@ -247,7 +274,8 @@
   border: 1px solid #676565;
   color: #242323;
 }
-.jfcl-alert.jfcl-variant-secondary .jfcl-alert__btn {
+.jfcl-alert.jfcl-variant-secondary button.jfcl-alert__btn,
+.jfcl-alert.jfcl-variant-secondary a.jfcl-alert__btn {
   color: #242323;
   border-color: #242323;
 }
@@ -263,7 +291,7 @@
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 1.13rem;
+  font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
   color: #242323;
@@ -273,8 +301,5 @@
   color: #676565;
 }
 .jfcl-link .jfcl-link__icon {
-  display: inline;
   margin-left: 10px;
-  width: 1rem;
-  height: 1rem;
 }

package/dist/src/assets/index.es.css

@@ -22,6 +22,17 @@
   font-style: normal;
   src: url("./Degular_Display-Medium-ca624b2b.woff2") format("woff2"), url("./Degular_Display-Medium-669217c9.woff") format("woff");
 }
+.jfcl-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -34,7 +45,7 @@
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 1.13rem;
+  font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
   cursor: pointer;
@@ -134,26 +145,30 @@
   border-right-color: transparent;
   border-top-color: transparent;
 }
-.jfcl-button.jfcl-variant-text {
+.jfcl-button.jfcl-variant-tertiary {
   color: #242323;
   background: none;
   border: none;
   box-shadow: none;
 }
-.jfcl-button.jfcl-variant-text:disabled {
+.jfcl-button.jfcl-variant-tertiary:disabled {
   cursor: inherit;
   color: #676565;
 }
-.jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
+.jfcl-button.jfcl-variant-tertiary:disabled .jfcl-button__text {
   border-bottom: none;
 }
-.jfcl-button.jfcl-variant-text:hover:not(:disabled) {
+.jfcl-button.jfcl-variant-tertiary:hover:not(:disabled) {
   background-color: #efe9dc;
+  box-shadow: none;
+}
+.jfcl-button.jfcl-variant-tertiary:active:not(:disabled) {
+  box-shadow: none;
 }
-.jfcl-button.jfcl-variant-text.jfcl-is-loading {
+.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading {
   background-color: #efe9dc;
 }
-.jfcl-button.jfcl-variant-text.jfcl-is-loading .jfcl-button__icon {
+.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading .jfcl-button__icon {
   display: block;
   animation: spin 500ms infinite linear;
   position: relative;
@@ -162,7 +177,7 @@
   border-right-color: transparent;
   border-top-color: transparent;
 }
-.jfcl-button.jfcl-variant-text:active(:disabled) {
+.jfcl-button.jfcl-variant-tertiary:active(:disabled) {
   background-color: rgba(239, 233, 220, 0.8);
 }
 @keyframes spin {
@@ -187,7 +202,7 @@
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 1.13rem;
+  font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
 }
@@ -208,7 +223,14 @@
   left: 0;
   bottom: 0;
 }
-.jfcl-alert .jfcl-alert__btn {
+.jfcl-alert button.jfcl-alert__btn,
+.jfcl-alert a.jfcl-alert__btn {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
   display: flex;
   background: transparent;
   padding: 0;
@@ -216,11 +238,14 @@
   margin-left: 0.5rem;
   cursor: pointer;
   font-size: 1em;
+  text-decoration: none;
 }
-.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text {
+.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text,
+.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text {
   border-bottom: 1px solid;
 }
-.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text:hover {
+.jfcl-alert button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
+.jfcl-alert a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
   color: #676565;
 }
 .jfcl-alert.jfcl-type-info::before {
@@ -236,10 +261,12 @@
   background-color: #242323;
   color: #faf8f4;
 }
-.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn {
+.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn,
+.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn {
   color: #faf8f4;
 }
-.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn.jfcl-alert__btn_text:hover {
+.jfcl-alert.jfcl-variant-primary button.jfcl-alert__btn.jfcl-alert__btn_text:hover,
+.jfcl-alert.jfcl-variant-primary a.jfcl-alert__btn.jfcl-alert__btn_text:hover {
   color: #9a9898;
 }
 .jfcl-alert.jfcl-variant-secondary {
@@ -247,7 +274,8 @@
   border: 1px solid #676565;
   color: #242323;
 }
-.jfcl-alert.jfcl-variant-secondary .jfcl-alert__btn {
+.jfcl-alert.jfcl-variant-secondary button.jfcl-alert__btn,
+.jfcl-alert.jfcl-variant-secondary a.jfcl-alert__btn {
   color: #242323;
   border-color: #242323;
 }
@@ -263,7 +291,7 @@
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 1.13rem;
+  font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
   color: #242323;
@@ -273,8 +301,5 @@
   color: #676565;
 }
 .jfcl-link .jfcl-link__icon {
-  display: inline;
   margin-left: 10px;
-  width: 1rem;
-  height: 1rem;
 }

package/dist/src/index.es.js

@@ -1,6 +1,8 @@
 import _extends from '@babel/runtime/helpers/extends';
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
+import { faArrowRight, faSquareArrowUpRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 /**
  * Accepts all `ButtonHTMLAttributes`
@@ -81,7 +83,7 @@ const IconHamburger$2 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/Rea
   transform: "translate(1.31046 -0.00698853)"
 })))));
 IconHamburger$2.displayName = 'IconHamburger';
-var IconLinkExternal = IconHamburger$2;
+var IconHamburger$3 = IconHamburger$2;
 
 const IconLinkInternal = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
   ref: ref
@@ -125,6 +127,22 @@ const IconCheck = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.cre
 IconCheck.displayName = 'IconCheck';
 var IconCheck$1 = IconCheck;
 
+const IconCheck2 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "18",
+  height: "13",
+  viewBox: "0 0 18 13",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M1.66663 6.66671L6.33329 11.3334L16.3333 1.33337",
+  stroke: "#F4F8F4",
+  strokeWidth: "2"
+})));
+IconCheck2.displayName = 'IconCheck';
+var IconCheck2$1 = IconCheck2;
+
 const IconError = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
   ref: ref
 }, props, {
@@ -301,17 +319,54 @@ const IconFacebook = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.
 IconFacebook.displayName = 'IconFacebook';
 var IconFacebook$1 = IconFacebook;
 
+const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    icon,
+    children,
+    className,
+    target,
+    ...props
+  } = _ref;
+  const linkClassNames = classNames('jfcl-link', className);
+  const opensInNewTab = target === '_blank';
+  // When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
+  // Since this navigate function is not a normal anchor element attribute we want to remove it before applying the rest of
+  // the props to avoid browser errors.
+  // Github issue talking about what's happening:
+  // https://github.com/remix-run/react-router/issues/6962
+  // Reference to react-router-dom Link component code to see what it's doing:
+  // https://github.com/remix-run/react-router/blob/0c058adc5b56c6d9b409af5e4d8330c645fac00c/packages/react-router-dom/modules/Link.js
+  delete props.navigate;
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    ref: ref,
+    className: linkClassNames
+  }), children, icon === 'internal' && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRight,
+    className: "jfcl-link__icon"
+  }), icon === 'external' && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSquareArrowUpRight,
+    className: "jfcl-link__icon"
+  }), opensInNewTab && /*#__PURE__*/React.createElement("span", {
+    className: "jfcl-sr-only"
+  }, "(Opens in a new window)"));
+});
+Link.displayName = 'Link';
+
 const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     type = 'info',
     variant = 'primary',
     text,
     action,
+    actionHref,
     actionLabel,
     className,
     ...props
   } = _ref;
   const alertClassNames = classNames('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
+  const hasAction = !!action;
+  const showButton = hasAction && !actionHref;
+  const showLink = actionLabel && actionHref;
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     "data-testid": "jfcl-alert",
@@ -324,42 +379,20 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React.createElement("div", {
     className: "jfcl-alert__icon",
     "data-testid": "jfcl-alert__icon"
-  }, /*#__PURE__*/React.createElement(IconCheck$1, null)), text), !!action && /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(IconCheck$1, null)), text), showButton && /*#__PURE__*/React.createElement("button", {
     className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
     "data-testid": "jfcl-alert__btn",
     onClick: action
-  }, actionLabel ? actionLabel : /*#__PURE__*/React.createElement(IconClose$1, {
+  }, actionLabel || /*#__PURE__*/React.createElement(IconClose$1, {
     "aria-label": "Dismiss"
-  })));
+  })), showLink && /*#__PURE__*/React.createElement(Link, _extends({
+    href: actionHref,
+    className: actionLabel ? 'jfcl-alert__btn  jfcl-alert__btn_text' : 'jfcl-alert__btn',
+    "data-testid": "jfcl-alert__btn"
+  }, hasAction && {
+    onClick: action
+  }), actionLabel));
 });
 Alert.displayName = 'Alert';
 
-const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    icon,
-    children,
-    className,
-    ...props
-  } = _ref;
-  const linkClassNames = classNames('jfcl-link', className);
-
-  // When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
-  // Since this navigate function is not a normal anchor element attribute we want to remove it before applying the rest of
-  // the props to avoid browser errors.
-  // Github issue talking about what's happening:
-  // https://github.com/remix-run/react-router/issues/6962
-  // Reference to react-router-dom Link component code to see what it's doing:
-  // https://github.com/remix-run/react-router/blob/0c058adc5b56c6d9b409af5e4d8330c645fac00c/packages/react-router-dom/modules/Link.js
-  delete props.navigate;
-  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
-    ref: ref,
-    className: linkClassNames
-  }), children, icon === 'internal' && /*#__PURE__*/React.createElement(IconLinkInternal$1, {
-    className: "jfcl-link__icon"
-  }), icon === 'external' && /*#__PURE__*/React.createElement(IconLinkExternal, {
-    className: "jfcl-link__icon"
-  }));
-});
-Link.displayName = 'Link';
-
-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, IconLinkExternal, IconLinkInternal$1 as IconLinkInternal, IconLoading$1 as IconLoading, IconMail$1 as IconMail, IconPerson$1 as IconPerson, IconTwitter$1 as IconTwitter, Link };
+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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var classNames = require('classnames');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -91,7 +93,7 @@ const IconHamburger$2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE_
   transform: "translate(1.31046 -0.00698853)"
 })))));
 IconHamburger$2.displayName = 'IconHamburger';
-var IconLinkExternal = IconHamburger$2;
+var IconHamburger$3 = IconHamburger$2;
 
 const IconLinkInternal = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
   ref: ref
@@ -135,6 +137,22 @@ const IconCheck = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/Rea
 IconCheck.displayName = 'IconCheck';
 var IconCheck$1 = IconCheck;
 
+const IconCheck2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
+  ref: ref
+}, props, {
+  width: "18",
+  height: "13",
+  viewBox: "0 0 18 13",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M1.66663 6.66671L6.33329 11.3334L16.3333 1.33337",
+  stroke: "#F4F8F4",
+  strokeWidth: "2"
+})));
+IconCheck2.displayName = 'IconCheck';
+var IconCheck2$1 = IconCheck2;
+
 const IconError = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
   ref: ref
 }, props, {
@@ -311,17 +329,54 @@ const IconFacebook = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/
 IconFacebook.displayName = 'IconFacebook';
 var IconFacebook$1 = IconFacebook;
 
+const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    icon,
+    children,
+    className,
+    target,
+    ...props
+  } = _ref;
+  const linkClassNames = classNames__default["default"]('jfcl-link', className);
+  const opensInNewTab = target === '_blank';
+  // When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
+  // Since this navigate function is not a normal anchor element attribute we want to remove it before applying the rest of
+  // the props to avoid browser errors.
+  // Github issue talking about what's happening:
+  // https://github.com/remix-run/react-router/issues/6962
+  // Reference to react-router-dom Link component code to see what it's doing:
+  // https://github.com/remix-run/react-router/blob/0c058adc5b56c6d9b409af5e4d8330c645fac00c/packages/react-router-dom/modules/Link.js
+  delete props.navigate;
+  return /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({}, props, {
+    ref: ref,
+    className: linkClassNames
+  }), children, icon === 'internal' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faArrowRight,
+    className: "jfcl-link__icon"
+  }), icon === 'external' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faSquareArrowUpRight,
+    className: "jfcl-link__icon"
+  }), opensInNewTab && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "jfcl-sr-only"
+  }, "(Opens in a new window)"));
+});
+Link.displayName = 'Link';
+
 const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     type = 'info',
     variant = 'primary',
     text,
     action,
+    actionHref,
     actionLabel,
     className,
     ...props
   } = _ref;
   const alertClassNames = classNames__default["default"]('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
+  const hasAction = !!action;
+  const showButton = hasAction && !actionHref;
+  const showLink = actionLabel && actionHref;
   return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
     ref: ref,
     "data-testid": "jfcl-alert",
@@ -334,47 +389,26 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React__default["default"].createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "jfcl-alert__icon",
     "data-testid": "jfcl-alert__icon"
-  }, /*#__PURE__*/React__default["default"].createElement(IconCheck$1, null)), text), !!action && /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement(IconCheck$1, null)), text), showButton && /*#__PURE__*/React__default["default"].createElement("button", {
     className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
     "data-testid": "jfcl-alert__btn",
     onClick: action
-  }, actionLabel ? actionLabel : /*#__PURE__*/React__default["default"].createElement(IconClose$1, {
+  }, actionLabel || /*#__PURE__*/React__default["default"].createElement(IconClose$1, {
     "aria-label": "Dismiss"
-  })));
+  })), showLink && /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
+    href: actionHref,
+    className: actionLabel ? 'jfcl-alert__btn  jfcl-alert__btn_text' : 'jfcl-alert__btn',
+    "data-testid": "jfcl-alert__btn"
+  }, hasAction && {
+    onClick: action
+  }), actionLabel));
 });
 Alert.displayName = 'Alert';
 
-const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    icon,
-    children,
-    className,
-    ...props
-  } = _ref;
-  const linkClassNames = classNames__default["default"]('jfcl-link', className);
-
-  // When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
-  // Since this navigate function is not a normal anchor element attribute we want to remove it before applying the rest of
-  // the props to avoid browser errors.
-  // Github issue talking about what's happening:
-  // https://github.com/remix-run/react-router/issues/6962
-  // Reference to react-router-dom Link component code to see what it's doing:
-  // https://github.com/remix-run/react-router/blob/0c058adc5b56c6d9b409af5e4d8330c645fac00c/packages/react-router-dom/modules/Link.js
-  delete props.navigate;
-  return /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({}, props, {
-    ref: ref,
-    className: linkClassNames
-  }), children, icon === 'internal' && /*#__PURE__*/React__default["default"].createElement(IconLinkInternal$1, {
-    className: "jfcl-link__icon"
-  }), icon === 'external' && /*#__PURE__*/React__default["default"].createElement(IconLinkExternal, {
-    className: "jfcl-link__icon"
-  }));
-});
-Link.displayName = 'Link';
-
 exports.Alert = Alert;
 exports.Button = Button;
 exports.IconCheck = IconCheck$1;
+exports.IconCheck2 = IconCheck2$1;
 exports.IconChevron = IconChevron$1;
 exports.IconClose = IconClose$1;
 exports.IconError = IconError$1;
@@ -382,7 +416,7 @@ exports.IconFacebook = IconFacebook$1;
 exports.IconGlobe = IconGlobe$1;
 exports.IconHamburger = IconHamburger$1;
 exports.IconInternet = IconInternet$1;
-exports.IconLinkExternal = IconLinkExternal;
+exports.IconLinkExternal = IconHamburger$3;
 exports.IconLinkInternal = IconLinkInternal$1;
 exports.IconLoading = IconLoading$1;
 exports.IconMail = IconMail$1;

package/dist/typings/Checkbox/Checkbox.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './styles.scss';
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    labelText: string;
+    headerText?: string;
+    helperText?: string;
+    invalid?: boolean;
+    invalidText?: string;
+    className?: string;
+    disabled?: boolean;
+    id: string;
+}
+/**
+ * Accepts all `InputHTMLAttributes`
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/typings/FormGroup/FormGroup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './styles.scss';
+export interface FormGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    legendText: string;
+    helperText?: string;
+    invalid?: boolean;
+    invalidText?: string;
+    className?: string;
+}
+/**
+ * Accepts all `HTMLFieldSetElement`
+ */
+export declare const FormGroup: React.ForwardRefExoticComponent<FormGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/typings/InputHeader/InputHeader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './style.scss';
+export interface InputHeaderProps {
+    className?: string;
+    headerText?: string;
+    labelFor?: string;
+    isLegend?: boolean;
+    helperText?: string;
+    invalidText?: string;
+    invalid?: boolean;
+}
+export declare const InputHeader: React.FC<InputHeaderProps>;

package/dist/typings/RadioButton/RadioButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './styles.scss';
+export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    labelText: string;
+    headerText?: string;
+    helperText?: string;
+    invalid?: boolean;
+    invalidText?: string;
+    className?: string;
+    disabled?: boolean;
+    id: string;
+}
+/**
+ * Accepts all `InputHTMLAttributes`
+ */
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/dist/typings/alerts/Alert.d.ts

@@ -8,6 +8,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     text: string;
     className?: string;
     action?: () => void;
+    actionHref?: string;
     actionLabel?: string;
 }
 export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/buttons/Button.d.ts

@@ -3,7 +3,7 @@ import './styles.scss';
 export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
     labelText: string;
     labelIcon?: React.ElementType;
-    variant?: 'primary' | 'secondary' | 'text';
+    variant?: 'primary' | 'secondary' | 'tertiary';
     size?: 'small' | 'large';
     loading?: boolean;
     iconOnRight?: boolean;

package/dist/typings/icons/Check2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const IconCheck2: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export default IconCheck2;

package/dist/typings/icons/Icons.d.ts

@@ -2,6 +2,7 @@ import IconLoading from './Loading';
 import IconLinkExternal from './LinkExternal';
 import IconLinkInternal from './LinkInternal';
 import IconCheck from './Check';
+import IconCheck2 from './Check2';
 import IconError from './Error';
 import IconChevron from './Chevron';
 import IconClose from './Close';
@@ -12,4 +13,4 @@ import IconPerson from './Person';
 import IconTwitter from './Twitter';
 import IconMail from './Mail';
 import IconFacebook from './Facebook';
-export { IconLoading, IconLinkExternal, IconLinkInternal, IconCheck, IconError, IconTwitter, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, IconMail, IconFacebook, };
+export { IconLoading, IconLinkExternal, IconLinkInternal, IconCheck, IconCheck2, IconError, IconTwitter, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, IconMail, IconFacebook, };

package/dist/typings/link/Link.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLAttributeAnchorTarget } from 'react';
 import './styles.scss';
 export type LinkIcon = 'internal' | 'external';
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -6,5 +6,6 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
     className?: string;
     children: React.ReactNode;
     navigate?: () => void;
+    target?: HTMLAttributeAnchorTarget;
 }
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/typings/textInput/TextInput.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './styles.scss';
+export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    labelText: string;
+    id: string;
+    size?: 'small' | 'medium' | 'large';
+    helperText?: string;
+    invalid?: boolean;
+    invalidText?: string;
+    className?: string;
+    type?: string;
+}
+/**
+ * Accepts all `InputHTMLAttributes`
+ */
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@justfixnyc/component-library",
   "description": "JustFix Component Library",
   "license": "MIT",
-  "version": "0.32.2",
+  "version": "0.34.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.es.js",
   "files": [
@@ -28,7 +28,10 @@
     "jackspeak": "2.1.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.12.5"
+    "@babel/runtime": "^7.12.5",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0"
   },
   "peerDependencies": {
     "@lingui/cli": ">=2.9.1",