@conduction/components 2.2.29 → 2.2.31

package/README.md

@@ -4,7 +4,11 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.29: updated build script to reslove css errors.
+  - 2.2.31:
+    - Added custom content to NotificationPopUp.
+    - Refactored DownloadCard to NLDS.
+  - 2.2.30: Renamed checkbox.module.css.
+  - 2.2.29: Updated build script to reslove css errors.
   - 2.2.27/2.2.28:
     - Updated dependencies to latest versions.
     - Updated Checkbox component to NLDS.

package/lib/components/card/downloadCard/DownloadCard.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 interface DownloadCardProps {
-    icon: JSX.Element;
     label: string;
-    sizeKb: string;
-    downloadLabel: string;
+    size: string;
+    type: string;
+    icon?: JSX.Element;
     layoutClassName?: string;
     handleClick: () => any;
 }
-export declare const DownloadCard: ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }: DownloadCardProps) => JSX.Element;
+export declare const DownloadCard: ({ icon, label, size, type, layoutClassName, handleClick, }: DownloadCardProps) => JSX.Element;
 export {};

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

@@ -1,9 +1,47 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./DownloadCard.module.css";
-import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { Heading3, 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)"] })] }), _jsxs(Link, { onClick: handleClick, children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " ", downloadLabel] })] }));
+import { faDatabase, faDownload, faFileAudio, faFileCsv, faFileImage, faFilePdf, faFileVideo, faFileWord, faFileZipper, } from "@fortawesome/free-solid-svg-icons";
+import _ from "lodash";
+export const DownloadCard = ({ icon, label, size, type, layoutClassName, handleClick, }) => {
+    const onClick = (e) => {
+        e.preventDefault();
+        handleClick();
+    };
+    const getIconFromType = (type) => {
+        switch (_.toUpper(type)) {
+            case "PDF":
+                return faFilePdf;
+            case "DOC":
+            case "DOCX":
+            case "RTF":
+            case "TXT":
+                return faFileWord;
+            case "CSV":
+                return faFileCsv;
+            case "JPG":
+            case "PNG":
+            case "SVG":
+            case "GIF":
+                return faFileImage;
+            case "MP3":
+            case "WAV":
+                return faFileAudio;
+            case "MP4":
+            case "AVI":
+            case "MPG":
+            case "MPEG":
+            case "MOV":
+                return faFileVideo;
+            case "7Z":
+            case "ZIP":
+            case "RAR":
+                return faFileZipper;
+            default:
+                return faDatabase;
+        }
+    };
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon ?? _jsx(FontAwesomeIcon, { icon: getIconFromType(type) }) }), _jsx(Heading3, { className: styles.title, children: label }), _jsxs("div", { children: ["(", _.toUpper(type), size && `, ${size} kb`, ")"] })] }), _jsxs(Link, { className: styles.link, href: "", onClick: (e) => onClick(e), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " Download"] })] }));
 };

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

@@ -1,4 +1,10 @@
 :root {
+  --conduction-download-card-title-color: #000000;
+  --conduction-download-card-title-font-size: 20px;
+  --conduction-download-card-title-font-weight: bold;
+  /* --conduction-download-card-title-font-family: ; */
+  --conduction-download-card-title-margin-inline-end: var(--skeleton-size-sm);
+
   --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
   --conduction-download-card-icon-gap: 8px;
   --conduction-download-card-padding: 14px;
@@ -13,15 +19,23 @@
   padding: var(--conduction-download-card-padding);
 }
 
+.title {
+  color: var(--conduction-download-card-title-color);
+  font-size: var(--conduction-download-card-title-font-size);
+  font-weight: var(--conduction-download-card-title-font-weight);
+  font-family: var(--conduction-download-card-title-font-family);
+  margin-inline-end: var(--conduction-download-card-title-margin-inline-end);
+}
+
 .content {
   display: flex;
   align-items: center;
 }
 
-.content > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-sm);
-}
-
 .icon {
   margin-inline-end: var(--conduction-download-card-icon-gap);
 }
+
+.link:hover {
+  cursor: pointer;
+}

package/lib/components/formFields/checkbox/{Checkbox.module.css → checkbox.module.css}

@@ -1,6 +1,5 @@
 :root {
   --conduciton-input-checkbox-checkmark-url: url("data:image/svg+xml,%3Csvg id='eXTGSQIndRe1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 13 13' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cg transform='translate(-85.642166-156.631362)'%3E%3Cpath d='M86.73927,163.90021l1.92835-2.05763l4.165103,4.176559c-.692268.524-1.562158,1.361078-1.562158,2.198156L86.73927,163.90021Z' fill='%23fff' stroke-width='0'/%3E%3Cpath d='M95.2777,158.04542l2.26736,1.67416-6.27449,8.49772-1.917847-1.798161L95.2777,158.04542Z' fill='%23fff' stroke-width='0'/%3E%3C/g%3E%3C/svg%3E%0A");
-
   --conduction-input-checkbox-color: #ffffff;
   --conduction-input-checkbox-border-width: 1px;
   --conduction-input-checkbox-border-style: solid;

package/lib/components/notificationPopUp/NotificationPopUp.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 export interface NotificationPopUpProps {
     title: string;
-    description: string | JSX.Element;
+    description?: string | JSX.Element;
+    customContent?: JSX.Element;
     isVisible: boolean;
     hide: () => void;
     primaryButton: {
@@ -19,7 +20,7 @@ export interface NotificationPopUpProps {
     };
     layoutClassName?: string;
 }
-export declare const NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }: NotificationPopUpProps) => JSX.Element | null;
+export declare const NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, customContent, }: NotificationPopUpProps) => JSX.Element | null;
 export declare const NotificationPopUpController: () => {
     isVisible: boolean;
     show: () => void;

package/lib/components/notificationPopUp/NotificationPopUp.js

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { Heading3, Link, Paragraph, Button } from "@utrecht/component-library-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight, faClose } from "@fortawesome/free-solid-svg-icons";
-export const NotificationPopUp = ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }) => {
+export const NotificationPopUp = ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, customContent, }) => {
     const [animationVisible, setAnimationVisible] = React.useState(true);
     const animationDuration = parseInt(styles.animationDuration, 10);
     const handleClick = (clickFunction) => {
@@ -17,7 +17,7 @@ export const NotificationPopUp = ({ title, description, isVisible, hide, primary
             setAnimationVisible(true);
         }, animationDuration);
     };
-    const modal = (_jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { className: secondaryButton.layoutClassName, children: _jsxs(Link, { onClick: (e) => {
+    const modal = (_jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), description && _jsx(Paragraph, { children: description }), customContent && customContent, _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { className: secondaryButton.layoutClassName, children: _jsxs(Link, { onClick: (e) => {
                                 e.preventDefault(), handleClick(secondaryButton.handleClick);
                             }, className: styles.link, href: secondaryButton.href, children: [secondaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faClose }), secondaryButton.label] }) })), _jsxs(Button, { onClick: () => handleClick(primaryButton.handleClick), className: clsx(styles.button, primaryButton.layoutClassName), children: [primaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faArrowRight }), primaryButton.label] })] })] }));
     return isVisible ? ReactDOM.createPortal(modal, document.body) : null;

package/lib/index.d.ts

@@ -15,7 +15,7 @@ declare const NotificationPopUp: {
         show: () => void;
         hide: () => void;
     };
-    NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }: import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps) => JSX.Element | null;
+    NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, customContent, }: import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps) => JSX.Element | null;
 };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.29",
+  "version": "2.2.31",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -14,7 +14,12 @@
     "type": "git",
     "url": "git+https://github.com/ConductionNL/conduction-components.git"
   },
-  "keywords": ["React", "Gatsby", "Conduction", "Components"],
+  "keywords": [
+    "React",
+    "Gatsby",
+    "Conduction",
+    "Components"
+  ],
   "author": "Conduction B.V.",
   "license": "ISC",
   "bugs": {
@@ -42,6 +47,7 @@
     "@types/react-datepicker": "^4.19.3",
     "@types/react-dom": "^18.2.16",
     "copyfiles": "^2.4.1",
+    "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.5",
     "tsc-hooks": "^1.1.2",
     "typescript": "^5.3.2"

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

@@ -1,4 +1,10 @@
 :root {
+  --conduction-download-card-title-color: #000000;
+  --conduction-download-card-title-font-size: 20px;
+  --conduction-download-card-title-font-weight: bold;
+  /* --conduction-download-card-title-font-family: ; */
+  --conduction-download-card-title-margin-inline-end: var(--skeleton-size-sm);
+
   --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
   --conduction-download-card-icon-gap: 8px;
   --conduction-download-card-padding: 14px;
@@ -13,15 +19,23 @@
   padding: var(--conduction-download-card-padding);
 }
 
+.title {
+  color: var(--conduction-download-card-title-color);
+  font-size: var(--conduction-download-card-title-font-size);
+  font-weight: var(--conduction-download-card-title-font-weight);
+  font-family: var(--conduction-download-card-title-font-family);
+  margin-inline-end: var(--conduction-download-card-title-margin-inline-end);
+}
+
 .content {
   display: flex;
   align-items: center;
 }
 
-.content > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-sm);
-}
-
 .icon {
   margin-inline-end: var(--conduction-download-card-icon-gap);
 }
+
+.link:hover {
+  cursor: pointer;
+}

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

@@ -1,15 +1,26 @@
 import * as React from "react";
 import * as styles from "./DownloadCard.module.css";
-import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { Heading3, 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";
+import {
+  faDatabase,
+  faDownload,
+  faFileAudio,
+  faFileCsv,
+  faFileImage,
+  faFilePdf,
+  faFileVideo,
+  faFileWord,
+  faFileZipper,
+} from "@fortawesome/free-solid-svg-icons";
+import _ from "lodash";
 
 interface DownloadCardProps {
-  icon: JSX.Element;
   label: string;
-  sizeKb: string;
-  downloadLabel: string;
+  size: string;
+  type: string;
+  icon?: JSX.Element;
   layoutClassName?: string;
   handleClick: () => any;
 }
@@ -17,23 +28,65 @@ interface DownloadCardProps {
 export const DownloadCard = ({
   icon,
   label,
-  sizeKb,
+  size,
+  type,
   layoutClassName,
-  downloadLabel,
   handleClick,
 }: DownloadCardProps): JSX.Element => {
+  const onClick = (e: any) => {
+    e.preventDefault();
+    handleClick();
+  };
+
+  const getIconFromType = (type: any) => {
+    switch (_.toUpper(type)) {
+      case "PDF":
+        return faFilePdf;
+      case "DOC":
+      case "DOCX":
+      case "RTF":
+      case "TXT":
+        return faFileWord;
+      case "CSV":
+        return faFileCsv;
+      case "JPG":
+      case "PNG":
+      case "SVG":
+      case "GIF":
+        return faFileImage;
+      case "MP3":
+      case "WAV":
+        return faFileAudio;
+      case "MP4":
+      case "AVI":
+      case "MPG":
+      case "MPEG":
+      case "MOV":
+        return faFileVideo;
+      case "7Z":
+      case "ZIP":
+      case "RAR":
+        return faFileZipper;
+      default:
+        return faDatabase;
+    }
+  };
+
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
       <div className={styles.content}>
-        <div className={styles.icon}>{icon}</div>
+        <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
+
+        <Heading3 className={styles.title}>{label}</Heading3>
 
         <div>
-          {label} ({sizeKb}kb)
+          ({_.toUpper(type)}
+          {size && `, ${size} kb`})
         </div>
       </div>
 
-      <Link onClick={handleClick}>
-        <FontAwesomeIcon className={styles.icon} icon={faDownload} /> {downloadLabel}
+      <Link className={styles.link} href="" onClick={(e) => onClick(e)}>
+        <FontAwesomeIcon className={styles.icon} icon={faDownload} /> Download
       </Link>
     </div>
   );

package/src/components/formFields/checkbox/{Checkbox.module.css → checkbox.module.css}

@@ -1,6 +1,5 @@
 :root {
   --conduciton-input-checkbox-checkmark-url: url("data:image/svg+xml,%3Csvg id='eXTGSQIndRe1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 13 13' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cg transform='translate(-85.642166-156.631362)'%3E%3Cpath d='M86.73927,163.90021l1.92835-2.05763l4.165103,4.176559c-.692268.524-1.562158,1.361078-1.562158,2.198156L86.73927,163.90021Z' fill='%23fff' stroke-width='0'/%3E%3Cpath d='M95.2777,158.04542l2.26736,1.67416-6.27449,8.49772-1.917847-1.798161L95.2777,158.04542Z' fill='%23fff' stroke-width='0'/%3E%3C/g%3E%3C/svg%3E%0A");
-
   --conduction-input-checkbox-color: #ffffff;
   --conduction-input-checkbox-border-width: 1px;
   --conduction-input-checkbox-border-style: solid;

package/src/components/notificationPopUp/NotificationPopUp.tsx

@@ -8,7 +8,8 @@ import { faArrowRight, faClose } from "@fortawesome/free-solid-svg-icons";
 
 export interface NotificationPopUpProps {
   title: string;
-  description: string | JSX.Element;
+  description?: string | JSX.Element;
+  customContent?: JSX.Element;
   isVisible: boolean;
   hide: () => void;
   primaryButton: {
@@ -35,6 +36,7 @@ export const NotificationPopUp = ({
   primaryButton,
   secondaryButton,
   layoutClassName,
+  customContent,
 }: NotificationPopUpProps): JSX.Element | null => {
   const [animationVisible, setAnimationVisible] = React.useState<boolean>(true);
 
@@ -56,7 +58,8 @@ export const NotificationPopUp = ({
     >
       <Heading3>{title}</Heading3>
 
-      <Paragraph>{description}</Paragraph>
+      {description && <Paragraph>{description}</Paragraph>}
+      {customContent && customContent}
 
       <div className={styles.buttons}>
         {secondaryButton && (