@conduction/components 2.1.13 → 2.1.14

package/README.md

@@ -4,6 +4,7 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.14: Refactor checkbox to remove svg errors
   - 2.1.13: Refactor components to remove svg errors (e.g. shape-rendering => shapeRendering)
   - 2.1.12: Added ToolTip max-width and break-word
   - 2.1.11: Added CreateKeyValue component disabled state on delete buttons

package/lib/components/formFields/checkbox/Checkbox.module.css

@@ -0,0 +1,7 @@
+.container {
+  user-select: none;
+}
+
+.container:hover {
+  cursor: pointer;
+}

package/lib/components/formFields/{checkbox.d.ts → checkbox/checkbox.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IReactHookFormProps } from "./types";
+import { IReactHookFormProps } from "./../types";
 export interface ICheckboxProps {
     label: string;
     name: string;

package/lib/components/formFields/checkbox/checkbox.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./Checkbox.module.css";
+export const InputCheckbox = ({ name, validation, register, label, defaultChecked, disabled, }) => (_jsxs("div", { className: styles.container, children: [_jsx("input", { type: "checkbox", id: `checkbox${name}`, ...{ defaultChecked, disabled }, ...register(name, { ...validation }) }), _jsx("label", { htmlFor: `checkbox${name}`, children: label })] }));

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

@@ -1,6 +1,6 @@
 import { InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputFile } from "./input";
 import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
+import { InputCheckbox } from "./checkbox/checkbox";
 import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple, SelectCreate } from "./select/select";
 import { CreateKeyValue, IKeyValue } from "./createKeyValue/CreateKeyValue";

package/lib/components/formFields/index.js

@@ -1,6 +1,6 @@
 import { InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputFile, } from "./input";
 import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
+import { InputCheckbox } from "./checkbox/checkbox";
 import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple, SelectCreate } from "./select/select";
 import { CreateKeyValue } from "./createKeyValue/CreateKeyValue";

package/package.json

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

package/src/components/formFields/checkbox/Checkbox.module.css

@@ -0,0 +1,7 @@
+.container {
+  user-select: none;
+}
+
+.container:hover {
+  cursor: pointer;
+}

package/src/components/formFields/checkbox/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as styles from "./Checkbox.module.css";
+import { IReactHookFormProps } from "./../types";
+
+export interface ICheckboxProps {
+  label: string;
+  name: string;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+}
+
+export const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps> = ({
+  name,
+  validation,
+  register,
+  label,
+  defaultChecked,
+  disabled,
+}) => (
+  <div className={styles.container}>
+    <input
+      type="checkbox"
+      id={`checkbox${name}`}
+      {...{ defaultChecked, disabled }}
+      {...register(name, { ...validation })}
+    />
+    <label htmlFor={`checkbox${name}`}>{label}</label>
+  </div>
+);

package/src/components/formFields/index.tsx

@@ -9,7 +9,7 @@ import {
   InputFile,
 } from "./input";
 import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
+import { InputCheckbox } from "./checkbox/checkbox";
 import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple, SelectCreate } from "./select/select";
 import { CreateKeyValue, IKeyValue } from "./createKeyValue/CreateKeyValue";

package/lib/components/formFields/checkbox.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormControlLabel } from "@gemeente-denhaag/components-react";
-export const InputCheckbox = ({ name, validation, register, label, defaultChecked, disabled, }) => (_jsx(FormControlLabel, { input: _jsx("input", { type: "checkbox", id: `checkbox${name}`, ...{ defaultChecked, disabled }, ...register(name, { ...validation }) }), ...{ label } }));

package/src/components/formFields/checkbox.js

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

package/src/components/formFields/checkbox.tsx

@@ -1,30 +0,0 @@
-import { FormControlLabel } from "@gemeente-denhaag/components-react";
-import { IReactHookFormProps } from "./types";
-
-export interface ICheckboxProps {
-  label: string;
-  name: string;
-  defaultChecked?: boolean;
-  disabled?: boolean;
-}
-
-export const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps> = ({
-  name,
-  validation,
-  register,
-  label,
-  defaultChecked,
-  disabled,
-}) => (
-  <FormControlLabel
-    input={
-      <input
-        type="checkbox"
-        id={`checkbox${name}`}
-        {...{ defaultChecked, disabled }}
-        {...register(name, { ...validation })}
-      />
-    }
-    {...{ label }}
-  />
-);

package/src/index.js

@@ -1,14 +0,0 @@
-export * from "./components/card";
-export * from "./components/casesTable/CasesTable";
-export * from "./components/container/Container";
-export * from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
-export * from "./components/editableTableRow/EditableTableRow";
-export * from "./components/formFields";
-export * from "./components/imageDivider/ImageDivider";
-export * from "./components/logo/Logo";
-export * from "./components/messageForm/MessageForm";
-export * from "./components/messagesTable/MessagesTable";
-export * from "./components/metaIcon/MetaIcon";
-export * from "./components/privateRoute/PrivateRoute";
-export * from "./components/statusSteps/StatusSteps";
-export * from "./components/topNav/TopNav";