@justfixnyc/component-library 0.30.1 → 0.31.1

package/dist/src/index.es.js

@@ -86,10 +86,10 @@ const IconLinkInternal = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/Re
   cx: "8.31371",
   cy: "8.01465",
   r: "7.5",
-  stroke: "#242323"
+  stroke: "currentcolor"
 }), /*#__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"
+  fill: "currentcolor"
 })));
 IconLinkInternal.displayName = 'IconLinkInternal';
 var IconLinkInternal$1 = IconLinkInternal;
@@ -241,6 +241,38 @@ const IconPerson = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.cr
 IconPerson.displayName = 'IconPerson';
 var IconPerson$1 = IconPerson;
 
+const IconTwitter = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "17",
+  height: "16",
+  viewBox: "0 0 17 16",
+  fill: "none"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M16.3219 2.63826C15.7321 2.92194 15.0999 3.11242 14.4352 3.19888C15.1136 2.75849 15.6348 2.06142 15.8793 1.23198C15.2458 1.63859 14.5412 1.93444 13.7943 2.09385C13.1958 1.40219 12.3428 0.971252 11.3989 0.971252C9.58574 0.971252 8.11555 2.56261 8.11555 4.52681C8.11555 4.80509 8.14548 5.07662 8.2016 5.33735C5.4732 5.18875 3.05531 3.77301 1.43548 1.62103C1.15242 2.14788 0.991558 2.75849 0.991558 3.40962C0.991558 4.64298 1.57016 5.73181 2.45177 6.37078C1.91308 6.35187 1.4068 6.19111 0.964125 5.92498C0.964125 5.93984 0.964125 5.9547 0.964125 5.96956C0.964125 7.69331 2.09638 9.12931 3.5965 9.45757C3.32216 9.53863 3.03162 9.58186 2.73234 9.58186C2.52036 9.58186 2.3146 9.56024 2.11384 9.51701C2.53283 10.9287 3.74489 11.9594 5.18016 11.9878C4.05788 12.9415 2.64256 13.5089 1.10379 13.5089C0.83818 13.5089 0.577561 13.4927 0.32193 13.4589C1.77341 14.4694 3.49923 15.057 5.35349 15.057C11.3914 15.057 14.6934 9.6386 14.6934 4.94018C14.6934 4.78618 14.6896 4.63083 14.6846 4.47953C15.3256 3.97834 15.8817 3.35153 16.3219 2.63826Z",
+  fill: "currentColor"
+})));
+IconTwitter.displayName = 'IconTwitter';
+var IconTwitter$1 = IconTwitter;
+
+const IconMail = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "17",
+  height: "12",
+  viewBox: "0 0 17 12",
+  fill: "none"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M16.3219 0.206634V0.0570068H0.32193V0.147015L8.33971 6.46405L16.3219 0.206634ZM0.32193 2.69319V11.6751H16.3219V2.74792L8.9551 8.52292L8.3366 9.00778L7.71928 8.52141L0.32193 2.69319Z",
+  fill: "currentColor"
+})));
+IconMail.displayName = 'IconMail';
+var IconMail$1 = IconMail;
+
 const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     type = 'info',
@@ -282,6 +314,15 @@ const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...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
@@ -293,4 +334,4 @@ const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 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 };
+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, IconMail$1 as IconMail, IconPerson$1 as IconPerson, IconTwitter$1 as IconTwitter, Link };

package/dist/src/index.js

@@ -96,10 +96,10 @@ const IconLinkInternal = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE
   cx: "8.31371",
   cy: "8.01465",
   r: "7.5",
-  stroke: "#242323"
+  stroke: "currentcolor"
 }), /*#__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"
+  fill: "currentcolor"
 })));
 IconLinkInternal.displayName = 'IconLinkInternal';
 var IconLinkInternal$1 = IconLinkInternal;
@@ -251,6 +251,38 @@ const IconPerson = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/Re
 IconPerson.displayName = 'IconPerson';
 var IconPerson$1 = IconPerson;
 
+const IconTwitter = /*#__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: "16",
+  viewBox: "0 0 17 16",
+  fill: "none"
+}), /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M16.3219 2.63826C15.7321 2.92194 15.0999 3.11242 14.4352 3.19888C15.1136 2.75849 15.6348 2.06142 15.8793 1.23198C15.2458 1.63859 14.5412 1.93444 13.7943 2.09385C13.1958 1.40219 12.3428 0.971252 11.3989 0.971252C9.58574 0.971252 8.11555 2.56261 8.11555 4.52681C8.11555 4.80509 8.14548 5.07662 8.2016 5.33735C5.4732 5.18875 3.05531 3.77301 1.43548 1.62103C1.15242 2.14788 0.991558 2.75849 0.991558 3.40962C0.991558 4.64298 1.57016 5.73181 2.45177 6.37078C1.91308 6.35187 1.4068 6.19111 0.964125 5.92498C0.964125 5.93984 0.964125 5.9547 0.964125 5.96956C0.964125 7.69331 2.09638 9.12931 3.5965 9.45757C3.32216 9.53863 3.03162 9.58186 2.73234 9.58186C2.52036 9.58186 2.3146 9.56024 2.11384 9.51701C2.53283 10.9287 3.74489 11.9594 5.18016 11.9878C4.05788 12.9415 2.64256 13.5089 1.10379 13.5089C0.83818 13.5089 0.577561 13.4927 0.32193 13.4589C1.77341 14.4694 3.49923 15.057 5.35349 15.057C11.3914 15.057 14.6934 9.6386 14.6934 4.94018C14.6934 4.78618 14.6896 4.63083 14.6846 4.47953C15.3256 3.97834 15.8817 3.35153 16.3219 2.63826Z",
+  fill: "currentColor"
+})));
+IconTwitter.displayName = 'IconTwitter';
+var IconTwitter$1 = IconTwitter;
+
+const IconMail = /*#__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: "12",
+  viewBox: "0 0 17 12",
+  fill: "none"
+}), /*#__PURE__*/React__default["default"].createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M16.3219 0.206634V0.0570068H0.32193V0.147015L8.33971 6.46405L16.3219 0.206634ZM0.32193 2.69319V11.6751H16.3219V2.74792L8.9551 8.52292L8.3366 9.00778L7.71928 8.52141L0.32193 2.69319Z",
+  fill: "currentColor"
+})));
+IconMail.displayName = 'IconMail';
+var IconMail$1 = IconMail;
+
 const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     type = 'info',
@@ -292,6 +324,15 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...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
@@ -315,5 +356,7 @@ exports.IconInternet = IconInternet$1;
 exports.IconLinkExternal = IconLinkExternal;
 exports.IconLinkInternal = IconLinkInternal$1;
 exports.IconLoading = IconLoading$1;
+exports.IconMail = IconMail$1;
 exports.IconPerson = IconPerson$1;
+exports.IconTwitter = IconTwitter$1;
 exports.Link = Link;

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

@@ -9,4 +9,6 @@ import IconGlobe from './Globe';
 import IconHamburger from './Hamburger';
 import IconInternet from './Internet';
 import IconPerson from './Person';
-export { IconLoading, IconLinkExternal, IconLinkInternal, IconCheck, IconError, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, };
+import IconTwitter from './Twitter';
+import IconMail from './Mail';
+export { IconLoading, IconLinkExternal, IconLinkInternal, IconCheck, IconError, IconTwitter, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, IconMail, };

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

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

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

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

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import './styles.scss';
 export type LinkIcon = 'internal' | 'external';
-export interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     icon?: LinkIcon;
     className?: string;
     children: React.ReactNode;
+    navigate?: () => void;
 }
 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.30.1",
+  "version": "0.31.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.es.js",
   "files": [