@conduction/components 2.1.11 → 2.1.13

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.13: Refactor components to remove svg errors (e.g. shape-rendering => shapeRendering)
+  - 2.1.12: Added ToolTip max-width and break-word
   - 2.1.11: Added CreateKeyValue component disabled state on delete buttons
   - 2.1.10: PrimaryTopNav overflow scroll removed from desktop
   - 2.1.8 & 2.1.9: PrimaryTopNav will always show subItems on mobile

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js

@@ -16,5 +16,5 @@ export const Breadcrumbs = ({ crumbs }) => {
                 return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
             }) }) }));
 };
-const CrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { className: "denhaag-breadcrumb__link", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", focusable: "false", height: "1em", "shape-rendering": "auto", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z", fill: "currentColor" }) }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));
+const CrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { className: "denhaag-breadcrumb__link", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", focusable: "false", height: "1em", shapeRendering: "auto", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z", fill: "currentColor" }) }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));
 const LastCrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { "aria-current": "page", className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { "aria-current": "page", className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));

package/lib/components/formFields/input.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { TextField } from "@gemeente-denhaag/components-react";
-import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, }) => {
     const [showPassword, setShowPassword] = React.useState(false);
-    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
+    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(FontAwesomeIcon, { icon: faEye }) : _jsx(FontAwesomeIcon, { icon: faEyeSlash }) }) }));
 };
 export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
 export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));

package/lib/components/toolTip/ToolTip.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactTooltip from "react-tooltip";
 import * as styles from "./ToolTip.module.css";
 export const ToolTip = ({ children, layoutClassName, tooltip }) => {
-    return (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { "data-tip": tooltip, className: layoutClassName && layoutClassName, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid" })] }));
+    return (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { "data-tip": tooltip, className: layoutClassName && layoutClassName, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid", className: styles.tooltip })] }));
 };
 export { ReactTooltip };

package/lib/components/toolTip/ToolTip.module.css

@@ -1,4 +1,13 @@
+:root {
+  --conduction-tooltip-max-width: 500px;
+}
+
 .wrapper {
   display: inline-block;
   position: relative;
 }
+
+.tooltip {
+  max-width: var(--conduction-tooltip-max-width);
+  word-break: break-word;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.11",
+  "version": "2.1.13",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js

@@ -9,12 +9,76 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link } from "gatsby";
 import "./Breadcrumbs.css";
 export const Breadcrumbs = ({ crumbs }) => {
-    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "denhaag-breadcrumb", children: _jsx("ol", { className: "denhaag-breadcrumb__list", itemScope: true, itemType: "https://schema.org/BreadcrumbList", children: crumbs.map((crumb, idx) => {
-                if (crumbs.length !== idx + 1) {
-                    return _jsx(CrumbItem, { ...crumb, ...{ idx } }, idx);
-                }
-                return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
-            }) }) }));
+  return _jsx("nav", {
+    "aria-label": "Breadcrumb",
+    className: "denhaag-breadcrumb",
+    children: _jsx("ol", {
+      className: "denhaag-breadcrumb__list",
+      itemScope: true,
+      itemType: "https://schema.org/BreadcrumbList",
+      children: crumbs.map((crumb, idx) => {
+        if (crumbs.length !== idx + 1) {
+          return _jsx(CrumbItem, { ...crumb, ...{ idx } }, idx);
+        }
+        return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
+      }),
+    }),
+  });
 };
-const CrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { className: "denhaag-breadcrumb__link", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", focusable: "false", height: "1em", "shape-rendering": "auto", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z", fill: "currentColor" }) }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));
-const LastCrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { "aria-current": "page", className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { "aria-current": "page", className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));
+const CrumbItem = ({ pathname, crumbLabel, idx }) =>
+  _jsx("li", {
+    className: "denhaag-breadcrumb__item",
+    itemProp: "itemListElement",
+    itemScope: true,
+    itemType: "https://schema.org/ListItem",
+    children: _jsxs(Link, {
+      className: "denhaag-breadcrumb__link",
+      to: pathname,
+      itemProp: "item",
+      children: [
+        _jsx("span", {
+          className: "denhaag-breadcrumb__text",
+          itemProp: "name",
+          children: crumbLabel,
+        }),
+        _jsx("svg", {
+          "aria-hidden": "true",
+          className: "denhaag-icon",
+          fill: "none",
+          focusable: "false",
+          height: "1em",
+          shapeRendering: "auto",
+          viewBox: "0 0 24 24",
+          width: "1em",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: _jsx("path", {
+            d: "M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z",
+            fill: "currentColor",
+          }),
+        }),
+        _jsx("meta", { content: idx.toString(), itemProp: "position" }),
+      ],
+    }),
+  });
+const LastCrumbItem = ({ pathname, crumbLabel, idx }) =>
+  _jsx("li", {
+    "aria-current": "page",
+    className: "denhaag-breadcrumb__item",
+    itemProp: "itemListElement",
+    itemScope: true,
+    itemType: "https://schema.org/ListItem",
+    children: _jsxs(Link, {
+      "aria-current": "page",
+      className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current",
+      to: pathname,
+      itemProp: "item",
+      children: [
+        _jsx("span", {
+          className: "denhaag-breadcrumb__text",
+          itemProp: "name",
+          children: crumbLabel,
+        }),
+        _jsx("meta", { content: idx.toString(), itemProp: "position" }),
+      ],
+    }),
+  });

package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.tsx

@@ -51,7 +51,7 @@ const CrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
         fill="none"
         focusable="false"
         height="1em"
-        shape-rendering="auto"
+        shapeRendering="auto"
         viewBox="0 0 24 24"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"

package/src/components/formFields/input.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { TextField } from "@gemeente-denhaag/components-react";
-import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
 import { IReactHookFormProps } from "./types";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export interface IInputProps {
   name: string;
@@ -27,7 +28,11 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
       {...{ disabled, placeholder }}
       {...register(name, { ...validation })}
       invalid={errors[name]}
-      icon={<span onClick={() => setShowPassword(!showPassword)}>{showPassword ? <HideIcon /> : <ShowIcon />}</span>}
+      icon={
+        <span onClick={() => setShowPassword(!showPassword)}>
+          {showPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
+        </span>
+      }
     />
   );
 };

package/src/components/toolTip/ToolTip.module.css

@@ -1,4 +1,13 @@
+:root {
+  --conduction-tooltip-max-width: 500px;
+}
+
 .wrapper {
   display: inline-block;
   position: relative;
 }
+
+.tooltip {
+  max-width: var(--conduction-tooltip-max-width);
+  word-break: break-word;
+}

package/src/components/toolTip/ToolTip.tsx

@@ -16,7 +16,7 @@ export const ToolTip: React.FC<ToolTipProps> = ({ children, layoutClassName, too
         {children}
       </div>
 
-      <ReactTooltip place={"top"} type={"dark"} effect={"solid"} />
+      <ReactTooltip place={"top"} type={"dark"} effect={"solid"} className={styles.tooltip} />
     </div>
   );
 };