@conduction/components 2.1.20 → 2.1.22

package/src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -2,9 +2,12 @@ import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
-import { IInputProps } from "../input";
 import { Button } from "@gemeente-denhaag/components-react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import { ToolTip } from "../../toolTip/ToolTip";
+import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Export KeyValue input component (wrapped in FormFieldGroup)
@@ -14,6 +17,10 @@ interface CreateKeyValueProps {
   control: Control<FieldValues, any>;
   defaultValue?: IKeyValue[];
   disabled?: boolean;
+  copyValue?: {
+    canCopy: boolean;
+    onCopied?: () => any;
+  };
 }
 
 export interface IKeyValue {
@@ -28,13 +35,14 @@ export const CreateKeyValue = ({
   validation,
   defaultValue,
   disabled,
+  copyValue,
 }: CreateKeyValueProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
       {...{ control, name, errors }}
       rules={validation}
       render={({ field: { onChange } }) => {
-        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled }} />;
+        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled, copyValue }} />;
       }}
     />
   );
@@ -44,15 +52,25 @@ export const CreateKeyValue = ({
  * Internal KeyValueComponent (contains all required logic)
  */
 interface CreateKeyValueComponentProps {
-  defaultValue?: IKeyValue[];
   handleChange: (...event: any[]) => void;
+  defaultValue?: IKeyValue[];
   disabled?: boolean;
+  copyValue?: {
+    canCopy: boolean;
+    onCopied?: () => any;
+  };
 }
 
-const KeyValueComponent = ({ defaultValue, handleChange, disabled }: CreateKeyValueComponentProps): JSX.Element => {
+const KeyValueComponent = ({
+  defaultValue,
+  handleChange,
+  disabled,
+  copyValue,
+}: CreateKeyValueComponentProps): JSX.Element => {
   const [currentKey, setCurrentKey] = React.useState<string>("");
   const [currentValue, setCurrentValue] = React.useState<string>("");
   const [keyValues, setKeyValues] = React.useState<IKeyValue[]>(defaultValue ?? []);
+  const [currentCopyIdx, setCurrentCopyIdx] = React.useState<number>();
 
   const currentKeyRef = React.useRef(null);
   const currentValueRef = React.useRef(null);
@@ -66,6 +84,12 @@ const KeyValueComponent = ({ defaultValue, handleChange, disabled }: CreateKeyVa
     setKeyValues([...keyValues, keyValue]);
   };
 
+  const handleCopyToClipboard = (value: string, id: number) => {
+    navigator.clipboard.writeText(value);
+    setCurrentCopyIdx(id);
+    copyValue?.onCopied && copyValue.onCopied();
+  };
+
   React.useEffect(() => {
     defaultValue && setKeyValues(defaultValue);
   }, [defaultValue]);
@@ -87,16 +111,33 @@ const KeyValueComponent = ({ defaultValue, handleChange, disabled }: CreateKeyVa
           </TableHead>
           <TableBody>
             {keyValues.map((keyValue, idx) => (
-              <TableRow key={`${keyValue}${idx}`}>
+              <TableRow key={`${keyValue.key}${keyValue.value}${idx}`}>
                 <TableCell>{keyValue.key}</TableCell>
                 <TableCell>{keyValue.value}</TableCell>
-                <TableCell className={styles.tdDelete}>
-                  <Button
-                    {...{ disabled }}
-                    onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}
-                  >
-                    Delete
-                  </Button>
+                <TableCell>
+                  <div className={styles.buttonsContainer}>
+                    {copyValue && (
+                      <ToolTip tooltip="Copy value">
+                        <Button
+                          {...{ disabled }}
+                          className={styles.copyButton}
+                          onClick={() => handleCopyToClipboard(keyValue.value, idx)}
+                          variant={currentCopyIdx === idx ? "secondary-action" : "primary-action"}
+                        >
+                          <FontAwesomeIcon icon={faCopy} />
+                        </Button>
+                      </ToolTip>
+                    )}
+                    <ToolTip tooltip="Delete value">
+                      <Button
+                        {...{ disabled }}
+                        onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}
+                        className={clsx(styles.deleteButton)}
+                      >
+                        <FontAwesomeIcon icon={faTrash} />
+                      </Button>
+                    </ToolTip>
+                  </div>
                 </TableCell>
               </TableRow>
             ))}

package/src/components/formFields/date/Date.module.css

@@ -1,12 +1,12 @@
-.container {
-  display: flex;
-}
-
-.calendar {
-  display: flex;
-}
-
-.calendar > div::before,
-.calendar > div::after {
-  display: none;
-}
+.container {
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+}
+
+.calendar > div::before,
+.calendar > div::after {
+  display: none;
+}

package/src/components/formFields/errorMessage/ErrorMessage.module.css

@@ -0,0 +1,9 @@
+:root {
+  --conduction-error-message-color: var(--skeleton-color-red-3);
+  --conduction-error-message-font-size: var(--skeleton-font-size-sm);
+}
+
+.message {
+  color: var(--conduction-error-message-color);
+  font-size: var(--conduction-error-message-font-size);
+}

package/src/components/formFields/errorMessage/ErrorMessage.tsx

@@ -0,0 +1,9 @@
+import * as styles from "./ErrorMessage.module.css";
+
+export interface IErrorMessageProps {
+  message: string;
+}
+
+export const ErrorMessage = ({ message }: IErrorMessageProps): JSX.Element => (
+  <span className={styles.message}>{message}</span>
+);

package/src/components/formFields/index.js

@@ -1,4 +1,4 @@
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
-import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };

package/src/components/formFields/input.js

@@ -1,12 +1,12 @@
-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";
-export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
-    const [showPassword, setShowPassword] = React.useState(false);
-    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
-};
-export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputNumber = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+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";
+export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
+};
+export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputNumber = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));

package/src/components/formFields/input.tsx

@@ -3,6 +3,7 @@ import { TextField } from "@gemeente-denhaag/components-react";
 import { IReactHookFormProps } from "./types";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ErrorMessage } from "./errorMessage/ErrorMessage";
 
 export interface IInputProps {
   name: string;
@@ -10,6 +11,7 @@ export interface IInputProps {
   defaultValue?: string;
   icon?: JSX.Element;
   placeholder?: string;
+  hideErrorMessage?: boolean;
 }
 
 export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -19,21 +21,25 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
   register,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => {
   const [showPassword, setShowPassword] = React.useState<boolean>(false);
 
   return (
-    <TextField
-      type={showPassword ? "text" : "password"}
-      {...{ disabled, placeholder }}
-      {...register(name, { ...validation })}
-      invalid={errors[name]}
-      icon={
-        <span onClick={() => setShowPassword(!showPassword)}>
-          {showPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
-        </span>
-      }
-    />
+    <>
+      <TextField
+        type={showPassword ? "text" : "password"}
+        {...{ disabled, placeholder }}
+        {...register(name, { ...validation })}
+        invalid={errors[name]}
+        icon={
+          <span onClick={() => setShowPassword(!showPassword)}>
+            {showPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
+          </span>
+        }
+      />
+      {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    </>
   );
 };
 
@@ -46,13 +52,17 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="text"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="text"
+      {...{ defaultValue, disabled, placeholder, icon }}
+      {...register(name, { ...validation })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -64,13 +74,18 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="email"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="email"
+      required={!!validation?.required}
+      {...{ defaultValue, disabled, placeholder, icon }}
+      {...register(name, { ...validation })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -82,13 +97,17 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="url"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="url"
+      {...{ defaultValue, disabled, placeholder, icon }}
+      {...register(name, { ...validation })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -100,13 +119,17 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="number"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation, valueAsNumber: true })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="number"
+      {...{ defaultValue, disabled, placeholder, icon }}
+      {...register(name, { ...validation, valueAsNumber: true })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -118,14 +141,18 @@ export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="number"
-    step=".01"
-    {...{ disabled, placeholder, icon, defaultValue }}
-    {...register(name, { ...validation, valueAsNumber: true })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="number"
+      step=".01"
+      {...{ disabled, placeholder, icon, defaultValue }}
+      {...register(name, { ...validation, valueAsNumber: true })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 interface IInputFileProps {

package/src/components/formFields/select/select.module.css

@@ -1,38 +1,38 @@
-:root {
-  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
-  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
-}
-
-.select > div {
-  background-color: var(--skeleton-color-white);
-  border: var(--conduction-input-select-border);
-  border-radius: var(--skeleton-border-radius-md);
-  box-sizing: border-box;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
-}
-
-.select.error > div {
-  border-color: var(
-    --utrecht-textbox-invalid-border-color,
-    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
-  );
-}
-
-.select .select > div:focus-within {
-  outline: none;
-  box-shadow: none;
-}
-
-.select > div:focus-within::after {
-  content: "";
-  display: block;
-  position: absolute;
-  pointer-events: none;
-  bottom: calc(var(--skeleton-size-2xs) * -1);
-  left: calc(var(--skeleton-size-2xs) * -1);
-  right: calc(var(--skeleton-size-2xs) * -1);
-  top: calc(var(--skeleton-size-2xs) * -1);
-  border: var(--conduction-input-select-border-focus);
-  border-radius: var(--skeleton-border-radius-md);
-}
+:root {
+  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
+  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
+}
+
+.select > div {
+  background-color: var(--skeleton-color-white);
+  border: var(--conduction-input-select-border);
+  border-radius: var(--skeleton-border-radius-md);
+  box-sizing: border-box;
+  padding-block-start: var(--skeleton-size-xs);
+  padding-block-end: var(--skeleton-size-xs);
+}
+
+.select.error > div {
+  border-color: var(
+    --utrecht-textbox-invalid-border-color,
+    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
+  );
+}
+
+.select .select > div:focus-within {
+  outline: none;
+  box-shadow: none;
+}
+
+.select > div:focus-within::after {
+  content: "";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  bottom: calc(var(--skeleton-size-2xs) * -1);
+  left: calc(var(--skeleton-size-2xs) * -1);
+  right: calc(var(--skeleton-size-2xs) * -1);
+  top: calc(var(--skeleton-size-2xs) * -1);
+  border: var(--conduction-input-select-border-focus);
+  border-radius: var(--skeleton-border-radius-md);
+}