Development to main, week 47

README.md

@@ -4,7 +4,15 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.27: Updated Checkbox component to NLDS.
+  - 2.2.32: Added more tokens to DownloadCard.
+  - 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.
   - 2.2.26: Updated NotificationPopUp secondary button to have hover and href.
   - 2.2.25:
     - Added box-shadow to CardWrapper.

package.json

@@ -1,46 +1,55 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.27",
+  "version": "2.2.32",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
     "clean": "rimraf lib/",
-    "build": "tsc",
+    "build": "npm-run-all build:**",
+    "build:tsc": "tsc",
+    "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "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": {
     "url": "https://github.com/ConductionNL/conduction-components/issues"
   },
   "homepage": "https://github.com/ConductionNL/conduction-components#readme",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@utrecht/component-library-react": "1.0.0-alpha.394",
-    "clsx": "^1.1.1",
-    "gatsby": "^4.11.1",
+    "@utrecht/component-library-react": "2.0.0",
+    "clsx": "^2.0.0",
+    "gatsby": "^5.12.9",
     "react": "^18.2.0",
-    "react-datepicker": "^4.10.0",
-    "react-hook-form": "7.29.0",
+    "react-datepicker": "^4.23.0",
+    "react-hook-form": "7.48.2",
     "react-paginate": "^8.2.0",
-    "react-select": "5.3.2",
+    "react-select": "5.8.0",
     "react-tabs": "^6.0.2",
-    "react-tooltip": "^5.21.3"
+    "react-tooltip": "^5.23.0"
   },
   "devDependencies": {
-    "@types/node": "^17.0.23",
-    "@types/react": "^18.2.0",
-    "@types/react-datepicker": "^4.8.0",
-    "@types/react-dom": "^18.2.0",
-    "rimraf": "^4.4.0",
-    "tsc-hooks": "^1.1.1",
-    "typescript": "^4.6.3"
+    "@types/node": "^20.9.3",
+    "@types/react": "^18.2.38",
+    "@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"
   }
 }

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

@@ -1,27 +1,54 @@
 :root {
-  --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+  --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-width: 1px;
+  --conduction-download-card-border-style: solid;
+  --conduction-download-card-border-color: var(--skeleton-color-grey-2);
+  --conduction-download-card-border-radius: var(--skeleton-border-radius-md);
+
+  --conduction-download-card-padding-inline-end: 14px;
+  --conduction-download-card-padding-inline-start: 14px;
+  --conduction-download-card-padding-block-end: 14px;
+  --conduction-download-card-padding-block-start: 14px;
+
   --conduction-download-card-icon-gap: 8px;
-  --conduction-download-card-padding: 14px;
 }
 
 .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border: var(--conduction-download-card-border);
-  border-radius: var(--skeleton-border-radius-md);
-  padding: var(--conduction-download-card-padding);
+  border-width: var(--conduction-download-card-border-width);
+  border-style: var(--conduction-download-card-border-style);
+  border-color: var(--conduction-download-card-border-color);
+  border-radius: var(--conduction-download-card-border-radius);
+  padding-inline-start: var(--conduction-download-card-padding-inline-start);
+  padding-inline-end: var(--conduction-download-card-padding-inline-end);
+  padding-block-start: var(--conduction-download-card-padding-block-start);
+  padding-block-end: var(--conduction-download-card-padding-block-end);
+}
+
+.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;
+}

src/components/card/downloadCard/DownloadCard.tsx

@@ -1,39 +1,92 @@
 import * as React from "react";
 import * as styles from "./DownloadCard.module.css";
-import { Link } from "@utrecht/component-library-react/dist/css-module";
+import _ from "lodash";
 import clsx from "clsx";
+import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
 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";
 
 interface DownloadCardProps {
-  icon: JSX.Element;
   label: string;
-  sizeKb: string;
-  downloadLabel: string;
+  size: string;
+  type: string;
+  icon?: JSX.Element;
   layoutClassName?: string;
   handleClick: () => any;
 }
 
 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>
   );

src/components/formFields/checkbox/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;

src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
+import clsx from "clsx";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 import {
@@ -12,7 +13,6 @@ import {
   Textbox,
   Button,
 } from "@utrecht/component-library-react/dist/css-module";
-import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
@@ -55,7 +55,7 @@ export const CreateKeyValue = ({
         return (
           <>
             <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled, copyValue }} />
-            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
         );
       }}

src/components/formFields/input.tsx

@@ -29,10 +29,10 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
         type="password"
         {...{ disabled, placeholder }}
         {...register(name, { ...validation })}
-        invalid={errors[name]}
+        invalid={!!errors[name]}
         aria-label={ariaLabel}
       />
-      {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+      {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
     </>
   );
 };
@@ -54,10 +54,10 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
       type="text"
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
-      invalid={errors[name]}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );
 
@@ -79,10 +79,10 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
       required={!!validation?.required}
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
-      invalid={errors[name]}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );
 
@@ -103,10 +103,10 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
       type="url"
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
-      invalid={errors[name]}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );
 
@@ -126,11 +126,11 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
     <Textbox
       type="number"
       {...{ defaultValue, disabled, placeholder, icon }}
-      {...register(name, { ...validation, valueAsNumber: true })}
-      invalid={errors[name]}
+      {...register(name, { ...{ validation }, valueAsNumber: true })}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );
 
@@ -151,11 +151,11 @@ export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
       type="number"
       step=".01"
       {...{ disabled, placeholder, icon, defaultValue }}
-      {...register(name, { ...validation, valueAsNumber: true })}
-      invalid={errors[name]}
+      {...register(name, { ...{ validation }, valueAsNumber: true })}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );