@conduction/components 1.0.19 → 1.0.22

package/lib/components/card/richContentCard/RichContentCard.js

@@ -5,7 +5,7 @@ import * as styles from "./RichContentCard.module.css";
 import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
 export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }) => (_jsx(LabelWithIcon, { ...{ label, icon } }))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { ...{ tag } }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }) => (_jsx(ContentLink, { ...{ title, subTitle, href } })))] }))] }));
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { ...{ tag } }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
 };
 const LabelWithIcon = ({ label, icon }) => {
     return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));

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

@@ -4,6 +4,8 @@ export interface IInputProps {
     name: string;
     disabled?: boolean;
     defaultValue?: string;
+    icon?: JSX.Element;
+    placeholder?: string;
 }
 export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;

package/lib/components/formFields/input.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { TextField } from "@gemeente-denhaag/components-react";
 import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
-export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
+export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, }) => {
     const [showPassword, setShowPassword] = React.useState(false);
-    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
+    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
 };
-export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled, placeholder, icon }, ...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 InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...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/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

@@ -19,4 +19,5 @@ declare const NotificationPopUp: {
     };
     NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
 };
-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, };
+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

@@ -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, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, 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.19",
+  "version": "1.0.22",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/card/richContentCard/RichContentCard.tsx

@@ -39,8 +39,8 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
       </div>
 
       <div className={styles.labelsWithIcon}>
-        {labelsWithIcon.map(({ label, icon }) => (
-          <LabelWithIcon {...{ label, icon }} />
+        {labelsWithIcon.map(({ label, icon }, idx) => (
+          <LabelWithIcon key={idx} {...{ label, icon }} />
         ))}
       </div>
 
@@ -53,8 +53,8 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
       {contentLinks && (
         <div className={styles.contentLinks}>
           <Divider />
-          {contentLinks.map(({ title, subTitle, href }) => (
-            <ContentLink {...{ title, subTitle, href }} />
+          {contentLinks.map(({ title, subTitle, href }, idx) => (
+            <ContentLink key={idx} {...{ title, subTitle, href }} />
           ))}
         </div>
       )}

package/src/components/formFields/input.tsx

@@ -1,12 +1,14 @@
 import * as React from "react";
 import { TextField } from "@gemeente-denhaag/components-react";
-import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
+import { ShowIcon, HideIcon, EmailIcon } from "@gemeente-denhaag/icons";
 import { IReactHookFormProps } from "./types";
 
 export interface IInputProps {
   name: string;
   disabled?: boolean;
   defaultValue?: string;
+  icon?: JSX.Element;
+  placeholder?: string;
 }
 
 export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -14,6 +16,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
   name,
   validation,
   register,
+  placeholder,
   errors,
 }) => {
   const [showPassword, setShowPassword] = React.useState<boolean>(false);
@@ -21,7 +24,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
   return (
     <TextField
       type={showPassword ? "text" : "password"}
-      {...{ disabled }}
+      {...{ disabled, placeholder }}
       {...register(name, { ...validation })}
       invalid={errors[name]}
       icon={<span onClick={() => setShowPassword(!showPassword)}>{showPassword ? <HideIcon /> : <ShowIcon />}</span>}
@@ -35,11 +38,13 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
   defaultValue,
   validation,
   register,
+  icon,
+  placeholder,
   errors,
 }) => (
   <TextField
     type="text"
-    {...{ defaultValue, disabled }}
+    {...{ defaultValue, disabled, placeholder, icon }}
     {...register(name, { ...validation })}
     invalid={errors[name]}
   />
@@ -51,11 +56,13 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
   defaultValue,
   validation,
   register,
+  icon,
+  placeholder,
   errors,
 }) => (
   <TextField
     type="email"
-    {...{ defaultValue, disabled }}
+    {...{ defaultValue, disabled, placeholder, icon }}
     {...register(name, { ...validation })}
     invalid={errors[name]}
   />
@@ -83,11 +90,13 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
   defaultValue,
   validation,
   register,
+  icon,
+  placeholder,
   errors,
 }) => (
   <TextField
     type="number"
-    {...{ defaultValue, disabled }}
+    {...{ defaultValue, disabled, placeholder, icon }}
     {...register(name, { ...validation })}
     invalid={errors[name]}
   />

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

@@ -29,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,
@@ -68,4 +67,5 @@ export {
   SecondaryTopNav,
   Tag,
   NotificationPopUp,
+  QuoteWrapper,
 };