@conduction/components 1.0.13 → 1.0.16

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

@@ -1,5 +1,6 @@
 import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox";
+import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple } from "./select/select";
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };
+export { InputRadio, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };

package/lib/components/formFields/index.js

@@ -1,5 +1,6 @@
 import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox";
+import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple } from "./select/select";
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };
+export { InputRadio, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { IReactHookFormProps } from "./types";
+interface IRadioProps {
+    label: string;
+    name: string;
+    value: any;
+}
+export declare const InputRadio: React.FC<IRadioProps & IReactHookFormProps>;
+export {};

package/lib/components/formFields/radio.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormControlLabel } from "@gemeente-denhaag/components-react";
+export const InputRadio = ({ name, validation, register, label, value, }) => (_jsx(FormControlLabel, { input: _jsx("input", { type: "radio", ...{ value }, ...register(name, { ...validation }) }), ...{ label } }));

package/lib/components/notificationPopUp/NotificationPopUp.module.css

@@ -1,3 +1,7 @@
+:root {
+  --conduction-notification-popup-box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 15%);
+}
+
 :export {
   animationDuration: 200ms;
 }
@@ -9,7 +13,7 @@
   padding-inline-end: var(--nlportal-space-inline-lg);
   padding-block-start: var(--nlportal-space-block-lg);
   padding-block-end: var(--nlportal-space-block-lg);
-  box-shadow: var(--conduction-notification-box-shadow);
+  box-shadow: var(--conduction-notification-popup-box-shadow);
   border-radius: var(--nlportal-document-border-radius);
 }
 

package/lib/index.d.ts

@@ -3,7 +3,7 @@ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle } from "./components/formFields";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, SelectMultiple, SelectSingle } from "./components/formFields";
 import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
@@ -19,4 +19,4 @@ declare const NotificationPopUp: {
     };
     NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
 };
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };

package/lib/index.js

@@ -2,7 +2,7 @@ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, } from "./components/formFields";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, SelectMultiple, SelectSingle, } from "./components/formFields";
 import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
@@ -12,4 +12,4 @@ import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
 import { Tag } from "./components/tag/Tag";
 import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };

package/package.json

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

package/src/components/formFields/index.tsx

@@ -1,9 +1,11 @@
 import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox";
+import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple } from "./select/select";
 
 export {
+  InputRadio,
   InputText,
   InputPassword,
   InputEmail,

package/src/components/formFields/input.tsx

@@ -92,3 +92,23 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
     invalid={errors[name]}
   />
 );
+
+interface IInputFileProps {
+  accept?: string;
+}
+
+export const InputFile: React.FC<IInputFileProps & IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  accept,
+  defaultValue,
+  validation,
+  register,
+}) => (
+  <input
+    className="denhaag-textfield__input"
+    type="file"
+    {...{ defaultValue, disabled, accept }}
+    {...register(name, { ...validation })}
+  />
+);

package/src/components/formFields/radio.tsx

@@ -0,0 +1,21 @@
+import { FormControlLabel } from "@gemeente-denhaag/components-react";
+import { IReactHookFormProps } from "./types";
+
+interface IRadioProps {
+  label: string;
+  name: string;
+  value: string;
+}
+
+export const InputRadio: React.FC<IRadioProps & IReactHookFormProps> = ({
+  name,
+  validation,
+  register,
+  label,
+  value,
+}) => (
+  <FormControlLabel
+    input={<input type="radio" {...{ value }} {...register(name, { ...validation })} />}
+    {...{ label }}
+  />
+);

package/src/components/notificationPopUp/NotificationPopUp.module.css

@@ -1,3 +1,7 @@
+:root {
+  --conduction-notification-popup-box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 15%);
+}
+
 :export {
   animationDuration: 200ms;
 }
@@ -9,7 +13,7 @@
   padding-inline-end: var(--nlportal-space-inline-lg);
   padding-block-start: var(--nlportal-space-block-lg);
   padding-block-end: var(--nlportal-space-block-lg);
-  box-shadow: var(--conduction-notification-box-shadow);
+  box-shadow: var(--conduction-notification-popup-box-shadow);
   border-radius: var(--nlportal-document-border-radius);
 }
 

package/src/index.ts

@@ -16,6 +16,7 @@ import {
   InputNumber,
   Textarea,
   InputCheckbox,
+  InputRadio,
   SelectMultiple,
   SelectSingle,
 } from "./components/formFields";
@@ -35,6 +36,7 @@ import {
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 
 export {
+  InputRadio,
   DownloadCard,
   HorizontalImageCard,
   ImageAndDetailsCard,

package/tsconfig.json

@@ -3,7 +3,10 @@
     "declaration": true,
     "outDir": "./lib",
     "target": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
@@ -12,7 +15,15 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "hooks": ["copy-files"],
-  "include": ["src", "src/**/*.css"],
-  "exclude": ["node_modules", "**/__tests__/*"]
-}
+  "hooks": [
+    "copy-files"
+  ],
+  "include": [
+    "src",
+    "src/**/*.css"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/__tests__/*"
+  ]
+}