@conduction/components 1.0.15 → 1.0.18

package/lib/components/card/detailsCard/DetailsCard.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 interface DetailsCardProps {
     title: string;
-    introduction: string;
+    introduction?: string;
     link: {
         href: string;
         label: string;

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

@@ -3,4 +3,5 @@ import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
 import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
 import { RichContentCard } from "./richContentCard/RichContentCard";
 import { DetailsCard } from "./detailsCard/DetailsCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };
+import { InfoCard } from "./infoCard/InfoCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };

package/lib/components/card/index.js

@@ -3,4 +3,5 @@ import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
 import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
 import { RichContentCard } from "./richContentCard/RichContentCard";
 import { DetailsCard } from "./detailsCard/DetailsCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };
+import { InfoCard } from "./infoCard/InfoCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };

package/lib/components/card/infoCard/InfoCard.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface InfoCardProps {
+    title: string;
+    content: JSX.Element | string;
+}
+export declare const InfoCard: React.FC<InfoCardProps>;
+export {};

package/lib/components/card/infoCard/InfoCard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./InfoCard.module.css";
+export const InfoCard = ({ title, content }) => {
+    return (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.title, children: title }), _jsx("div", { className: styles.content, children: content })] }));
+};

package/lib/components/card/infoCard/InfoCard.module.css

@@ -0,0 +1,37 @@
+:root {
+  --conduction-info-card-background-color: #f2f2f2;
+  --conduction-info-card-border-radius: 3px;
+  --conduction-info-card-title-weight: bold;
+  --conduction-info-card-title-font-size: 24px;
+  --conduction-info-card-title-color: #000000;
+  --conduction-info-card-content-color: #000000;
+  --conduction-info-card-padding: 16px;
+  --conduction-info-card-content-margin: 8px;
+}
+
+.container {
+  background-color: var(--conduction-info-card-background-color);
+  border-radius: var(--conduction-info-card-border-radius);
+  padding-inline-start: var(--conduction-info-card-padding);
+  padding-inline-end: var(--conduction-info-card-padding);
+  padding-block-start: var(--conduction-info-card-padding);
+  padding-block-end: var(--conduction-info-card-padding);
+}
+
+.container > * {
+  display: block;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--conduction-info-card-content-margin);
+}
+
+.container > .title {
+  font-weight: var(--conduction-info-card-title-weight);
+  font-size: var(--conduction-info-card-title-font-size);
+  color: var(--conduction-info-card-title-color);
+}
+
+.content {
+  color: var(--conduction-info-card-content-color);
+}

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: 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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard } from "./components/card";
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard } from "./components/card";
 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, InfoCard, 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

@@ -1,8 +1,8 @@
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, } from "./components/card";
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, } from "./components/card";
 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, InfoCard, 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.15",
+  "version": "1.0.18",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/card/detailsCard/DetailsCard.tsx

@@ -8,7 +8,7 @@ import { Tag } from "../../tag/Tag";
 
 interface DetailsCardProps {
   title: string;
-  introduction: string;
+  introduction?: string;
   link: {
     href: string;
     label: string;

package/src/components/card/index.tsx

@@ -3,5 +3,6 @@ import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
 import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
 import { RichContentCard } from "./richContentCard/RichContentCard";
 import { DetailsCard } from "./detailsCard/DetailsCard";
+import { InfoCard } from "./infoCard/InfoCard";
 
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };

package/src/components/card/infoCard/InfoCard.module.css

@@ -0,0 +1,37 @@
+:root {
+  --conduction-info-card-background-color: #f2f2f2;
+  --conduction-info-card-border-radius: 3px;
+  --conduction-info-card-title-weight: bold;
+  --conduction-info-card-title-font-size: 24px;
+  --conduction-info-card-title-color: #000000;
+  --conduction-info-card-content-color: #000000;
+  --conduction-info-card-padding: 16px;
+  --conduction-info-card-content-margin: 8px;
+}
+
+.container {
+  background-color: var(--conduction-info-card-background-color);
+  border-radius: var(--conduction-info-card-border-radius);
+  padding-inline-start: var(--conduction-info-card-padding);
+  padding-inline-end: var(--conduction-info-card-padding);
+  padding-block-start: var(--conduction-info-card-padding);
+  padding-block-end: var(--conduction-info-card-padding);
+}
+
+.container > * {
+  display: block;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--conduction-info-card-content-margin);
+}
+
+.container > .title {
+  font-weight: var(--conduction-info-card-title-weight);
+  font-size: var(--conduction-info-card-title-font-size);
+  color: var(--conduction-info-card-title-color);
+}
+
+.content {
+  color: var(--conduction-info-card-content-color);
+}

package/src/components/card/infoCard/InfoCard.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as styles from "./InfoCard.module.css";
+
+interface InfoCardProps {
+  title: string;
+  content: JSX.Element | string;
+}
+
+export const InfoCard: React.FC<InfoCardProps> = ({ title, content }) => {
+  return (
+    <div className={styles.container}>
+      <span className={styles.title}>{title}</span>
+
+      <div className={styles.content}>{content}</div>
+    </div>
+  );
+};

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/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

@@ -4,6 +4,7 @@ import {
   ImageAndDetailsCard,
   RichContentCard,
   DetailsCard,
+  InfoCard,
 } from "./components/card";
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
@@ -16,6 +17,7 @@ import {
   InputNumber,
   Textarea,
   InputCheckbox,
+  InputRadio,
   SelectMultiple,
   SelectSingle,
 } from "./components/formFields";
@@ -35,11 +37,13 @@ import {
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 
 export {
+  InputRadio,
   DownloadCard,
   HorizontalImageCard,
   ImageAndDetailsCard,
   RichContentCard,
   DetailsCard,
+  InfoCard,
   Container,
   Breadcrumbs,
   EditableTableRow,