@justfixnyc/component-library 0.29.1 → 0.30.0

package/dist/src/assets/index.css

@@ -34,7 +34,7 @@
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 18px;
+  font-size: 1.13rem;
   line-height: 120%;
   text-align: center;
   letter-spacing: 0.54px;
@@ -55,6 +55,12 @@
   transition: all 0.1s linear;
   transform: translateX(0rem);
 }
+.jfcl-button:focus-visible {
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #5188ff;
+}
 .jfcl-button:disabled {
   cursor: inherit;
 }
@@ -183,12 +189,13 @@
   padding-left: calc(12px + 0.75rem);
   position: relative;
   width: fit-content;
+  min-width: 10rem;
   border-radius: 0.25rem;
   overflow: hidden;
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 18px;
+  font-size: 1.13rem;
   line-height: 120%;
   text-align: center;
   letter-spacing: 0.54px;
@@ -239,10 +246,39 @@
 }
 .jf-alert.jfcl-variant-secondary {
   background-color: #faf8f4;
-  border: 1px solid #9a9898;
+  border: 1px solid #676565;
   color: #242323;
 }
 .jf-alert.jfcl-variant-secondary .jf-alert__btn {
   color: #242323;
   border-color: #242323;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.jfcl-link {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.13rem;
+  line-height: 120%;
+  text-align: center;
+  letter-spacing: 0.54px;
+  color: #242323;
+  text-underline-position: from-font;
+  display: inline-flex;
+  align-items: center;
+}
+.jfcl-link:hover {
+  color: #676565;
+}
+.jfcl-link .jfcl-link__icon {
+  margin-left: 10px;
+  width: 16px;
+  height: 16px;
 }

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

@@ -34,7 +34,7 @@
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 18px;
+  font-size: 1.13rem;
   line-height: 120%;
   text-align: center;
   letter-spacing: 0.54px;
@@ -55,6 +55,12 @@
   transition: all 0.1s linear;
   transform: translateX(0rem);
 }
+.jfcl-button:focus-visible {
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #5188ff;
+}
 .jfcl-button:disabled {
   cursor: inherit;
 }
@@ -183,12 +189,13 @@
   padding-left: calc(12px + 0.75rem);
   position: relative;
   width: fit-content;
+  min-width: 10rem;
   border-radius: 0.25rem;
   overflow: hidden;
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 500;
-  font-size: 18px;
+  font-size: 1.13rem;
   line-height: 120%;
   text-align: center;
   letter-spacing: 0.54px;
@@ -239,10 +246,39 @@
 }
 .jf-alert.jfcl-variant-secondary {
   background-color: #faf8f4;
-  border: 1px solid #9a9898;
+  border: 1px solid #676565;
   color: #242323;
 }
 .jf-alert.jfcl-variant-secondary .jf-alert__btn {
   color: #242323;
   border-color: #242323;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.jfcl-link {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.13rem;
+  line-height: 120%;
+  text-align: center;
+  letter-spacing: 0.54px;
+  color: #242323;
+  text-underline-position: from-font;
+  display: inline-flex;
+  align-items: center;
+}
+.jfcl-link:hover {
+  color: #676565;
+}
+.jfcl-link .jfcl-link__icon {
+  margin-left: 10px;
+  width: 16px;
+  height: 16px;
 }

package/dist/src/index.es.js

@@ -11,25 +11,31 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variant = 'primary',
     size = 'large',
     loading,
-    labelIcon,
+    labelIcon: ButtonIcon,
     iconOnRight,
     iconOnly,
     ...props
   } = _ref;
   const buttonClassNames = classNames('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''), "".concat(iconOnly ? 'jfcl-btn-icon-only' : ''));
   const iconClassNames = classNames('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
+  const arias = {};
+  if (iconOnly) {
+    arias['aria-label'] = labelText;
+  }
   return /*#__PURE__*/React.createElement("button", _extends({
     ref: ref,
     type: "button",
     className: buttonClassNames,
     "data-testid": "jfcl-button"
-  }, props), /*#__PURE__*/React.createElement("div", {
+  }, arias, props), /*#__PURE__*/React.createElement("div", {
     className: "jfcl-button__label"
   }, loading && /*#__PURE__*/React.createElement("span", {
     className: iconClassNames
-  }), !loading && labelIcon ? /*#__PURE__*/React.createElement("span", {
+  }), !loading && ButtonIcon ? /*#__PURE__*/React.createElement("span", {
     className: iconClassNames
-  }, labelIcon) : null, !iconOnly && /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(ButtonIcon, {
+    "aria-hidden": "true"
+  })) : null, !iconOnly && /*#__PURE__*/React.createElement("span", {
     className: "jfcl-button__text"
   }, labelText)));
 });
@@ -65,7 +71,27 @@ const IconHamburger$2 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/Rea
   d: "M11.9895 0C11.987 0 11.9845 0 11.9815 0C11.666 0 11.4105 0.256 11.4105 0.571C11.4105 0.886 11.666 1.142 11.9815 1.142C11.9845 1.142 11.987 1.142 11.99 1.142H14.037L4.735 10.444C4.6315 10.5475 4.5675 10.69 4.5675 10.848C4.5675 11.1635 4.8235 11.419 5.1385 11.419C5.296 11.419 5.439 11.355 5.542 11.252L14.844 1.95V3.997C14.844 3.9995 14.844 4.002 14.844 4.005C14.844 4.3205 15.0995 4.576 15.415 4.576C15.7305 4.576 15.986 4.3205 15.986 4.005C15.986 4.002 15.986 3.9995 15.986 3.9965V3.997V0.664C15.991 0.6365 15.9935 0.604 15.9935 0.5715C15.9935 0.256 15.738 0.0005 15.4225 0.0005C15.42 0.0005 15.4175 0.0005 15.4145 0.0005H11.989L11.9895 0ZM0.571 3.4255C0.256 3.4255 0 3.681 0 3.9965V15.415C0 15.7305 0.256 15.986 0.571 15.986H11.9895C12.305 15.986 12.5605 15.7305 12.5605 15.415V6.8C12.5605 6.7975 12.5605 6.795 12.5605 6.792C12.5605 6.4765 12.305 6.221 11.9895 6.221C11.674 6.221 11.4185 6.4765 11.4185 6.792C11.4185 6.795 11.4185 6.7975 11.4185 6.8005V6.8V14.844H1.1415V4.567H9.22C9.2225 4.567 9.225 4.567 9.228 4.567C9.5435 4.567 9.799 4.3115 9.799 3.996C9.799 3.6805 9.5435 3.425 9.228 3.425C9.225 3.425 9.2225 3.425 9.2195 3.425L0.571 3.4255Z"
 })));
 IconHamburger$2.displayName = 'IconHamburger';
-var IconHamburger$3 = IconHamburger$2;
+var IconLinkExternal = IconHamburger$2;
+
+const IconLinkInternal = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "17",
+  height: "17",
+  viewBox: "0 0 17 17",
+  fill: "none"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: "8.31371",
+  cy: "8.01465",
+  r: "7.5",
+  stroke: "#242323"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M4.62639 7.70676C4.35025 7.70676 4.12639 7.93061 4.12639 8.20676C4.12639 8.4829 4.35025 8.70676 4.62639 8.70676V7.70676ZM11.9344 8.56031C12.1297 8.36505 12.1297 8.04847 11.9344 7.8532L8.75241 4.67122C8.55715 4.47596 8.24056 4.47596 8.0453 4.67122C7.85004 4.86648 7.85004 5.18307 8.0453 5.37833L10.8737 8.20676L8.0453 11.0352C7.85004 11.2304 7.85004 11.547 8.0453 11.7423C8.24056 11.9376 8.55715 11.9376 8.75241 11.7423L11.9344 8.56031ZM4.62639 8.70676H11.5808V7.70676H4.62639V8.70676Z",
+  fill: "#242323"
+})));
+IconLinkInternal.displayName = 'IconLinkInternal';
+var IconLinkInternal$1 = IconLinkInternal;
 
 const IconCheck = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
   ref: ref
@@ -247,4 +273,23 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 Alert.displayName = 'Alert';
 
-export { Alert, Button, IconCheck$1 as IconCheck, IconChevron$1 as IconChevron, IconClose$1 as IconClose, IconError$1 as IconError, IconGlobe$1 as IconGlobe, IconHamburger$1 as IconHamburger, IconInternet$1 as IconInternet, IconHamburger$3 as IconLinkExternal, IconLoading$1 as IconLoading, IconPerson$1 as IconPerson };
+const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    icon,
+    children,
+    className,
+    ...props
+  } = _ref;
+  const linkClassNames = classNames('jfcl-link', className);
+  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, IconGlobe$1 as IconGlobe, IconHamburger$1 as IconHamburger, IconInternet$1 as IconInternet, IconLinkExternal, IconLinkInternal$1 as IconLinkInternal, IconLoading$1 as IconLoading, IconPerson$1 as IconPerson, Link };

package/dist/src/index.js

@@ -21,25 +21,31 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
     variant = 'primary',
     size = 'large',
     loading,
-    labelIcon,
+    labelIcon: ButtonIcon,
     iconOnRight,
     iconOnly,
     ...props
   } = _ref;
   const buttonClassNames = classNames__default["default"]('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''), "".concat(iconOnly ? 'jfcl-btn-icon-only' : ''));
   const iconClassNames = classNames__default["default"]('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
+  const arias = {};
+  if (iconOnly) {
+    arias['aria-label'] = labelText;
+  }
   return /*#__PURE__*/React__default["default"].createElement("button", _extends__default["default"]({
     ref: ref,
     type: "button",
     className: buttonClassNames,
     "data-testid": "jfcl-button"
-  }, props), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, arias, props), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "jfcl-button__label"
   }, loading && /*#__PURE__*/React__default["default"].createElement("span", {
     className: iconClassNames
-  }), !loading && labelIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }), !loading && ButtonIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: iconClassNames
-  }, labelIcon) : null, !iconOnly && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement(ButtonIcon, {
+    "aria-hidden": "true"
+  })) : null, !iconOnly && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "jfcl-button__text"
   }, labelText)));
 });
@@ -75,7 +81,27 @@ const IconHamburger$2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE_
   d: "M11.9895 0C11.987 0 11.9845 0 11.9815 0C11.666 0 11.4105 0.256 11.4105 0.571C11.4105 0.886 11.666 1.142 11.9815 1.142C11.9845 1.142 11.987 1.142 11.99 1.142H14.037L4.735 10.444C4.6315 10.5475 4.5675 10.69 4.5675 10.848C4.5675 11.1635 4.8235 11.419 5.1385 11.419C5.296 11.419 5.439 11.355 5.542 11.252L14.844 1.95V3.997C14.844 3.9995 14.844 4.002 14.844 4.005C14.844 4.3205 15.0995 4.576 15.415 4.576C15.7305 4.576 15.986 4.3205 15.986 4.005C15.986 4.002 15.986 3.9995 15.986 3.9965V3.997V0.664C15.991 0.6365 15.9935 0.604 15.9935 0.5715C15.9935 0.256 15.738 0.0005 15.4225 0.0005C15.42 0.0005 15.4175 0.0005 15.4145 0.0005H11.989L11.9895 0ZM0.571 3.4255C0.256 3.4255 0 3.681 0 3.9965V15.415C0 15.7305 0.256 15.986 0.571 15.986H11.9895C12.305 15.986 12.5605 15.7305 12.5605 15.415V6.8C12.5605 6.7975 12.5605 6.795 12.5605 6.792C12.5605 6.4765 12.305 6.221 11.9895 6.221C11.674 6.221 11.4185 6.4765 11.4185 6.792C11.4185 6.795 11.4185 6.7975 11.4185 6.8005V6.8V14.844H1.1415V4.567H9.22C9.2225 4.567 9.225 4.567 9.228 4.567C9.5435 4.567 9.799 4.3115 9.799 3.996C9.799 3.6805 9.5435 3.425 9.228 3.425C9.225 3.425 9.2225 3.425 9.2195 3.425L0.571 3.4255Z"
 })));
 IconHamburger$2.displayName = 'IconHamburger';
-var IconHamburger$3 = IconHamburger$2;
+var IconLinkExternal = IconHamburger$2;
+
+const IconLinkInternal = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
+  ref: ref
+}, props, {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "17",
+  height: "17",
+  viewBox: "0 0 17 17",
+  fill: "none"
+}), /*#__PURE__*/React__default["default"].createElement("circle", {
+  cx: "8.31371",
+  cy: "8.01465",
+  r: "7.5",
+  stroke: "#242323"
+}), /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M4.62639 7.70676C4.35025 7.70676 4.12639 7.93061 4.12639 8.20676C4.12639 8.4829 4.35025 8.70676 4.62639 8.70676V7.70676ZM11.9344 8.56031C12.1297 8.36505 12.1297 8.04847 11.9344 7.8532L8.75241 4.67122C8.55715 4.47596 8.24056 4.47596 8.0453 4.67122C7.85004 4.86648 7.85004 5.18307 8.0453 5.37833L10.8737 8.20676L8.0453 11.0352C7.85004 11.2304 7.85004 11.547 8.0453 11.7423C8.24056 11.9376 8.55715 11.9376 8.75241 11.7423L11.9344 8.56031ZM4.62639 8.70676H11.5808V7.70676H4.62639V8.70676Z",
+  fill: "#242323"
+})));
+IconLinkInternal.displayName = 'IconLinkInternal';
+var IconLinkInternal$1 = IconLinkInternal;
 
 const IconCheck = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
   ref: ref
@@ -257,6 +283,25 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Alert.displayName = 'Alert';
 
+const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    icon,
+    children,
+    className,
+    ...props
+  } = _ref;
+  const linkClassNames = classNames__default["default"]('jfcl-link', className);
+  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;
@@ -266,6 +311,8 @@ exports.IconError = IconError$1;
 exports.IconGlobe = IconGlobe$1;
 exports.IconHamburger = IconHamburger$1;
 exports.IconInternet = IconInternet$1;
-exports.IconLinkExternal = IconHamburger$3;
+exports.IconLinkExternal = IconLinkExternal;
+exports.IconLinkInternal = IconLinkInternal$1;
 exports.IconLoading = IconLoading$1;
 exports.IconPerson = IconPerson$1;
+exports.Link = Link;

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

@@ -1,11 +1,11 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import './styles.scss';
 export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
     labelText: string;
+    labelIcon?: React.ElementType;
     variant?: 'primary' | 'secondary' | 'text';
     size?: 'small' | 'large';
     loading?: boolean;
-    labelIcon?: ReactNode;
     iconOnRight?: boolean;
     iconOnly?: boolean;
 }

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

@@ -1,5 +1,6 @@
 import IconLoading from './Loading';
 import IconLinkExternal from './LinkExternal';
+import IconLinkInternal from './LinkInternal';
 import IconCheck from './Check';
 import IconError from './Error';
 import IconChevron from './Chevron';
@@ -8,4 +9,4 @@ import IconGlobe from './Globe';
 import IconHamburger from './Hamburger';
 import IconInternet from './Internet';
 import IconPerson from './Person';
-export { IconLoading, IconLinkExternal, IconCheck, IconError, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, };
+export { IconLoading, IconLinkExternal, IconLinkInternal, IconCheck, IconError, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, };

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

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

package/dist/typings/index.d.ts

@@ -1,4 +1,5 @@
 import './styles/global.scss';
 export * from './buttons/Button';
 export * from './alerts/Alert';
+export * from './link/Link';
 export * from './icons/Icons';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './styles.scss';
+export type LinkIcon = 'internal' | 'external';
+export interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
+    icon?: LinkIcon;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@justfixnyc/component-library",
   "description": "JustFix Component Library",
   "license": "MIT",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.es.js",
   "files": [