@conduction/components 2.1.30 → 2.1.31

package/README.md

@@ -4,6 +4,7 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.31: Removed Den Haag implementations which hold shapeRendering warnings.
   - 2.1.29/2.1.30: Added optional menuPlacement to all select elements.
   - 2.1.28: Fixed PrimaryTopNav dropdown token and added new features for dropdown.
   - 2.1.27: TimeFormat in DatePicker is now consistant with DateFormat.

package/lib/components/card/detailsCard/DetailsCard.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./DetailsCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
 import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 export const DetailsCard = ({ title, subHeader, introduction, link, tags, layoutClassName, }) => {
-    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] }) }));
+    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsxs(Link, { onClick: () => navigate(link.href), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faArrowRight }), " ", link.label] }) })] }) }));
 };

package/lib/components/card/detailsCard/DetailsCard.module.css

@@ -1,6 +1,7 @@
 :root {
   --conduction-details-card-border: 1px solid var(--skeleton-color-grey-2);
   --conduction-details-card-introduction-lines-clamp: 3;
+  --conduction-details-card-icon-gap: 8px;
 }
 
 .container {
@@ -49,3 +50,7 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.icon {
+  margin-inline-end: var(--conduction-details-card-icon-gap);
+}

package/lib/components/card/downloadCard/DownloadCard.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./DownloadCard.module.css";
-import { DownloadIcon } from "@gemeente-denhaag/icons";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
 export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }) => {
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsx("div", { onClick: handleClick, children: _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: downloadLabel }) })] }));
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsxs(Link, { onClick: handleClick, children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " ", downloadLabel] })] }));
 };

package/lib/components/card/downloadCard/DownloadCard.module.css

@@ -1,5 +1,7 @@
 :root {
   --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-download-card-icon-gap: 8px;
+  --conduction-download-card-padding: 14px;
 }
 
 .container {
@@ -8,7 +10,7 @@
   justify-content: space-between;
   border: var(--conduction-download-card-border);
   border-radius: var(--skeleton-border-radius-md);
-  padding-inline-end: var(--skeleton-size-sm);
+  padding: var(--conduction-download-card-padding);
 }
 
 .content {
@@ -21,7 +23,5 @@
 }
 
 .icon {
-  padding-inline: var(--skeleton-size-sm);
-  padding-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
+  margin-inline-end: var(--conduction-download-card-icon-gap);
 }

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./ImageAndDetailsCard.module.css";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export const ImageAndDetailsCard = ({ image, title, subHeader, introduction, link, layoutClassName, }) => {
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.image, children: image }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] })] }));
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.image, children: image }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsxs(Link, { onClick: () => navigate(link.href), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faArrowRight }), " ", link.label] }) })] })] }));
 };

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css

@@ -3,6 +3,7 @@
   --conduction-image-and-details-card-title-font-weight: bold;
   --conduction-image-and-details-card-introduction-lines-clamp: 3;
   --conduction-image-and-details-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-image-and-details-icon-gap: 8px;
 }
 
 .container {
@@ -61,3 +62,7 @@
   justify-content: flex-end;
   margin-block-start: auto;
 }
+
+.icon {
+  margin-inline-end: var(--conduction-image-and-details-icon-gap);
+}

package/lib/components/formFields/select/select.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Control, FieldValues } from "react-hook-form";
+import { MenuPlacement } from "react-select";
 import { IReactHookFormProps } from "../types";
 interface ISelectProps {
     control: Control<FieldValues, any>;
@@ -13,7 +14,7 @@ interface ISelectProps {
     disabled?: boolean;
     isClearable?: boolean;
     hideErrorMessage?: boolean;
-    menuPlacement?: "auto" | "bottom" | "top";
+    menuPlacement?: MenuPlacement;
 }
 export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, }: ISelectProps & IReactHookFormProps) => JSX.Element;
 export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, }: ISelectProps & IReactHookFormProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.30",
+  "version": "2.1.31",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -24,18 +24,19 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@gemeente-denhaag/button": "0.2.3-alpha.205",
-    "@gemeente-denhaag/link": "0.2.3-alpha.205",
-    "@gemeente-denhaag/divider": "0.2.3-alpha.205",
-    "@gemeente-denhaag/textfield": "0.2.3-alpha.205",
-    "@gemeente-denhaag/typography": "0.2.3-alpha.205",
-    "@gemeente-denhaag/stylesprovider": "0.1.1-alpha.222",
     "@gemeente-denhaag/design-tokens-components": "0.2.3-alpha.222",
+    "@gemeente-denhaag/divider": "0.2.3-alpha.205",
     "@gemeente-denhaag/form-field": "0.1.1-alpha.98",
     "@gemeente-denhaag/formcontrollabel": "0.2.3-alpha.222",
+    "@gemeente-denhaag/link": "0.2.3-alpha.205",
     "@gemeente-denhaag/process-steps": "0.1.0-alpha.51",
     "@gemeente-denhaag/sidenav": "0.1.0-alpha.40",
+    "@gemeente-denhaag/stylesprovider": "0.1.1-alpha.222",
     "@gemeente-denhaag/table": "0.1.1-alpha.123",
     "@gemeente-denhaag/textarea": "0.1.1-alpha.95",
+    "@gemeente-denhaag/textfield": "0.2.3-alpha.205",
+    "@gemeente-denhaag/typography": "0.2.3-alpha.205",
+    "@utrecht/component-library-react": "^1.0.0-alpha.319",
     "clsx": "^1.1.1",
     "gatsby": "^4.11.1",
     "react": "^17.0.1",

package/src/components/card/detailsCard/DetailsCard.module.css

@@ -1,6 +1,7 @@
 :root {
   --conduction-details-card-border: 1px solid var(--skeleton-color-grey-2);
   --conduction-details-card-introduction-lines-clamp: 3;
+  --conduction-details-card-icon-gap: 8px;
 }
 
 .container {
@@ -49,3 +50,7 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.icon {
+  margin-inline-end: var(--conduction-details-card-icon-gap);
+}

package/src/components/card/detailsCard/DetailsCard.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import * as styles from "./DetailsCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
 import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
 interface DetailsCardProps {
   title: string;
@@ -46,8 +47,8 @@ export const DetailsCard = ({
         <div className={styles.introduction}>{introduction}</div>
 
         <div className={styles.link}>
-          <Link icon={<ArrowRightIcon />} iconAlign="start">
-            {link.label}
+          <Link onClick={() => navigate(link.href)}>
+            <FontAwesomeIcon className={styles.icon} icon={faArrowRight} /> {link.label}
           </Link>
         </div>
       </div>

package/src/components/card/downloadCard/DownloadCard.module.css

@@ -1,5 +1,7 @@
 :root {
   --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-download-card-icon-gap: 8px;
+  --conduction-download-card-padding: 14px;
 }
 
 .container {
@@ -8,7 +10,7 @@
   justify-content: space-between;
   border: var(--conduction-download-card-border);
   border-radius: var(--skeleton-border-radius-md);
-  padding-inline-end: var(--skeleton-size-sm);
+  padding: var(--conduction-download-card-padding);
 }
 
 .content {
@@ -21,7 +23,5 @@
 }
 
 .icon {
-  padding-inline: var(--skeleton-size-sm);
-  padding-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
+  margin-inline-end: var(--conduction-download-card-icon-gap);
 }

package/src/components/card/downloadCard/DownloadCard.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import * as styles from "./DownloadCard.module.css";
-import { DownloadIcon } from "@gemeente-denhaag/icons";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
 
 interface DownloadCardProps {
   icon: JSX.Element;
@@ -30,11 +31,10 @@ export const DownloadCard = ({
           {label} ({sizeKb}kb)
         </div>
       </div>
-      <div onClick={handleClick}>
-        <Link icon={<DownloadIcon />} iconAlign="start">
-          {downloadLabel}
-        </Link>
-      </div>
+
+      <Link onClick={handleClick}>
+        <FontAwesomeIcon className={styles.icon} icon={faDownload} /> {downloadLabel}
+      </Link>
     </div>
   );
 };

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css

@@ -3,6 +3,7 @@
   --conduction-image-and-details-card-title-font-weight: bold;
   --conduction-image-and-details-card-introduction-lines-clamp: 3;
   --conduction-image-and-details-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-image-and-details-icon-gap: 8px;
 }
 
 .container {
@@ -61,3 +62,7 @@
   justify-content: flex-end;
   margin-block-start: auto;
 }
+
+.icon {
+  margin-inline-end: var(--conduction-image-and-details-icon-gap);
+}

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import * as styles from "./ImageAndDetailsCard.module.css";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface ImageAndDetailsCardProps {
   title: string;
@@ -39,8 +40,8 @@ export const ImageAndDetailsCard = ({
         <div className={styles.introduction}>{introduction}</div>
 
         <div className={styles.link}>
-          <Link icon={<ArrowRightIcon />} iconAlign="start">
-            {link.label}
+          <Link onClick={() => navigate(link.href)}>
+            <FontAwesomeIcon className={styles.icon} icon={faArrowRight} /> {link.label}
           </Link>
         </div>
       </div>

package/src/components/formFields/select/select.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./select.module.css";
 import { Control, Controller, FieldValues } from "react-hook-form";
-import ReactSelect from "react-select";
+import ReactSelect, { MenuPlacement } from "react-select";
 import CreatableSelect from "react-select/creatable";
 import { IReactHookFormProps } from "../types";
 import clsx from "clsx";
@@ -16,7 +16,7 @@ interface ISelectProps {
   disabled?: boolean;
   isClearable?: boolean;
   hideErrorMessage?: boolean;
-  menuPlacement?: "auto" | "bottom" | "top";
+  menuPlacement?: MenuPlacement;
 }
 
 export const SelectMultiple = ({