@conduction/components 1.0.17 → 1.0.20

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,6 +1,6 @@
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile } 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, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };
+export { InputRadio, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, };

package/lib/components/formFields/index.js

@@ -1,6 +1,6 @@
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile } 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, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };
+export { InputRadio, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, };

package/lib/components/quoteWrapper/QuoteWrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface QuoteWrapperProps {
+    borderColor?: string;
+    borderWidth?: string;
+}
+export declare const QuoteWrapper: React.FC<QuoteWrapperProps>;
+export {};

package/lib/components/quoteWrapper/QuoteWrapper.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./QuoteWrapper.module.css";
+export const QuoteWrapper = ({ children, borderColor, borderWidth }) => {
+    return (_jsx("div", { style: { borderLeftColor: borderColor, borderLeftWidth: borderWidth }, className: styles.container, children: children }));
+};

package/lib/components/quoteWrapper/QuoteWrapper.module.css

@@ -0,0 +1,12 @@
+:root {
+  --conduction-quote-border-width: 12px;
+  --conduction-quote-border-color: #f5f5f5;
+  --conduction-quote-padding-inline: 24px;
+}
+
+.container {
+  border-left-width: var(--conduction-quote-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-border-color);
+  padding-inline-start: var(--conduction-quote-padding-inline);
+}

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, InputRadio, SelectMultiple, SelectSingle } from "./components/formFields";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, 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,5 @@ declare const NotificationPopUp: {
     };
     NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
 };
-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, };
+import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, };

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, InputRadio, SelectMultiple, SelectSingle, } from "./components/formFields";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, 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,5 @@ 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 { 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, };
+import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "1.0.17",
+  "version": "1.0.20",
   "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,4 +1,4 @@
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox";
 import { InputRadio } from "./radio";
@@ -12,6 +12,7 @@ export {
   InputDate,
   InputNumber,
   InputCheckbox,
+  InputFile,
   Textarea,
   SelectSingle,
   SelectMultiple,

package/src/components/quoteWrapper/QuoteWrapper.module.css

@@ -0,0 +1,12 @@
+:root {
+  --conduction-quote-border-width: 12px;
+  --conduction-quote-border-color: #f5f5f5;
+  --conduction-quote-padding-inline: 24px;
+}
+
+.container {
+  border-left-width: var(--conduction-quote-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-border-color);
+  padding-inline-start: var(--conduction-quote-padding-inline);
+}

package/src/components/quoteWrapper/QuoteWrapper.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as styles from "./QuoteWrapper.module.css";
+
+interface QuoteWrapperProps {
+  borderColor?: string;
+  borderWidth?: string;
+}
+
+export const QuoteWrapper: React.FC<QuoteWrapperProps> = ({ children, borderColor, borderWidth }) => {
+  return (
+    <div style={{ borderLeftColor: borderColor, borderLeftWidth: borderWidth }} className={styles.container}>
+      {children}
+    </div>
+  );
+};

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";
@@ -17,6 +18,7 @@ import {
   Textarea,
   InputCheckbox,
   InputRadio,
+  InputFile,
   SelectMultiple,
   SelectSingle,
 } from "./components/formFields";
@@ -27,13 +29,12 @@ import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { StatusSteps } from "./components/statusSteps/StatusSteps";
 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 };
+import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 
 export {
   InputRadio,
@@ -42,6 +43,7 @@ export {
   ImageAndDetailsCard,
   RichContentCard,
   DetailsCard,
+  InfoCard,
   Container,
   Breadcrumbs,
   EditableTableRow,
@@ -50,6 +52,7 @@ export {
   InputEmail,
   InputDate,
   InputNumber,
+  InputFile,
   Textarea,
   InputCheckbox,
   SelectMultiple,
@@ -64,4 +67,5 @@ export {
   SecondaryTopNav,
   Tag,
   NotificationPopUp,
+  QuoteWrapper,
 };