@conduction/components 1.0.14 → 1.0.17

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/input.d.ts

@@ -10,3 +10,8 @@ export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputEmail: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputDate: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputNumber: React.FC<IInputProps & IReactHookFormProps>;
+interface IInputFileProps {
+    accept?: string;
+}
+export declare const InputFile: React.FC<IInputFileProps & IInputProps & IReactHookFormProps>;
+export {};

package/lib/components/formFields/input.js

@@ -10,3 +10,4 @@ export const InputText = ({ disabled, name, defaultValue, validation, register,
 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] }));
+export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));

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: string;
+}
+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/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.14",
+  "version": "1.0.17",
   "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/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,