@conduction/components 2.1.40 → 2.2.1

package/lib/components/statusSteps/StatusSteps.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-interface IStatusStep {
-    title: string;
-    checked?: boolean;
-    current?: boolean;
-    expanded?: boolean;
-    subSteps?: string[];
-}
-interface StatusStepsProps {
-    steps: IStatusStep[];
-}
-export declare const StatusSteps: ({ steps }: StatusStepsProps) => JSX.Element;
-export {};

package/lib/components/statusSteps/StatusSteps.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Step, StepExpandedIcon, StepHeader, StepHeading, StepList, StepMarker, StepSection, SubStep, SubStepHeading, SubStepList, SubStepMarker, } from "@gemeente-denhaag/process-steps";
-export const StatusSteps = ({ steps }) => {
-    return (_jsx(StepList, { children: steps.map(({ title, checked, current, expanded, subSteps }, idx) => (_jsxs(Step, { ...{ checked, current, expanded }, children: [_jsx(StepSection, { children: _jsxs(StepHeader, { children: [_jsx(StepMarker, { children: idx + 1 }), _jsx(StepHeading, { children: title }), subSteps && _jsx(StepExpandedIcon, {})] }) }), subSteps && (_jsx(SubStepList, { children: subSteps.map((subStep) => (_jsxs(SubStep, { children: [_jsx(SubStepMarker, {}), _jsx(SubStepHeading, { children: subStep })] }, idx))) }))] }, idx))) }));
-};

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

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider } from "@gemeente-denhaag/divider";
-import { Link } from "@gemeente-denhaag/link";
-import { navigate } from "gatsby";
-import * as styles from "./RichContentCard.module.css";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-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) => (_jsx(Tag, { ...{ tag } }))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }) => (_jsx(ContentLink, { ...{ title, subTitle, href } })))] }))] }));
-};
-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 })] }));
-};
-const Tag = ({ tag }) => {
-    return _jsx("span", { className: styles.tag, children: tag });
-};
-const ContentLink = ({ title, subTitle, href }) => {
-    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(ArrowRightIcon, {}) })] }));
-};

package/src/components/card/richContentCard/RichContentCard.module.css

@@ -1,93 +0,0 @@
-:root {
-  --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  border: var(--conduction-rich-content-card-border);
-  border-radius: var(--skeleton-border-radius-md);
-
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-}
-
-.container > *:not(.link):not(:last-child) {
-  margin-block-end: var(--skeleton-size-md);
-}
-
-.link {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.link > :first-child {
-  display: flex;
-}
-
-.labelsWithIcon {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.labelsWithIcon > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.tags > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.contentLinks > *:not(:last-child):not(hr) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-/* Component: LabelWithIcon */
-.labelWithIcon {
-  display: flex;
-  align-items: center;
-  color: var(--skeleton-color-grey-3);
-}
-
-.labelWithIcon > .labelWithIcon_icon > svg {
-  height: var(--skeleton-size-sm);
-  width: var(--skeleton-size-sm);
-  margin-inline-end: var(--skeleton-size-xs);
-}
-
-.labelWithIcon > .labelWithIcon_label {
-  font-size: var(--skeleton-size-sm);
-}
-
-/* Content Link */
-.contentLink {
-  display: flex;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
-  text-decoration: none !important;
-}
-
-.contentLink > span {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-.contentLink:hover {
-  cursor: pointer;
-}
-
-.contentLink_content {
-  display: flex;
-  flex-direction: column;
-}
-
-.contentLink_title {
-  font-size: var(--conduction-content-link-font-size);
-}
-
-.contentLink_subTitle {
-  font-size: var(--conduction-content-link-font-size);
-  color: var(--denhaag-color-grey-3);
-}

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

@@ -1,99 +0,0 @@
-import { Divider } from "@gemeente-denhaag/divider";
-import { Link } from "@gemeente-denhaag/link";
-import { navigate } from "gatsby";
-import * as React from "react";
-import * as styles from "./RichContentCard.module.css";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-import { Tag } from "../../tag/Tag";
-
-export interface RichContentCardProps {
-  link: {
-    label: string;
-    href: string;
-  };
-  labelsWithIcon: {
-    label: string;
-    icon: JSX.Element;
-  }[];
-  tags: string[];
-  contentLinks?: {
-    title: string;
-    subTitle: string;
-    href: string;
-  }[];
-  linkIsExternal?: boolean;
-}
-
-export const RichContentCard = ({
-  link,
-  labelsWithIcon,
-  tags,
-  contentLinks,
-  linkIsExternal,
-}: RichContentCardProps): JSX.Element => {
-  return (
-    <div className={styles.container}>
-      <div className={styles.link} onClick={() => navigate(link.href)}>
-        <Link icon={linkIsExternal ? <ExternalLinkIcon /> : <ArrowRightIcon />} iconAlign="start">
-          {link.label}
-        </Link>
-      </div>
-
-      <div className={styles.labelsWithIcon}>
-        {labelsWithIcon.map(({ label, icon }, idx) => (
-          <LabelWithIcon key={idx} {...{ label, icon }} />
-        ))}
-      </div>
-
-      <div className={styles.tags}>
-        {tags.map((tag, idx) => (
-          <Tag key={idx} label={tag} />
-        ))}
-      </div>
-
-      {contentLinks && (
-        <div className={styles.contentLinks}>
-          <Divider />
-          {contentLinks.map(({ title, subTitle, href }, idx) => (
-            <ContentLink key={idx} {...{ title, subTitle, href }} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-interface LabelWithIconProps {
-  label: string;
-  icon: JSX.Element;
-}
-
-const LabelWithIcon = ({ label, icon }: LabelWithIconProps): JSX.Element => {
-  return (
-    <div className={styles.labelWithIcon}>
-      <span className={styles.labelWithIcon_icon}>{icon}</span>
-      <span className={styles.labelWithIcon_label}>{label}</span>
-    </div>
-  );
-};
-
-interface ContentLinkProps {
-  title: string;
-  subTitle: string;
-  href: string;
-}
-
-const ContentLink = ({ title, subTitle, href }: ContentLinkProps): JSX.Element => {
-  return (
-    <Link className={styles.contentLink}>
-      <div className={styles.contentLink_content}>
-        <span className={styles.contentLink_title}>{title}</span>
-        <span className={styles.contentLink_subTitle}>{subTitle}</span>
-      </div>
-
-      <div>
-        <ArrowRightIcon />
-      </div>
-    </Link>
-  );
-};

package/src/components/editableTableRow/EditableTableRow.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
-import * as styles from "./EditableTableRow.module.css";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "@gemeente-denhaag/link";
-import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
-import { useForm } from "react-hook-form";
-import { InputEmail, InputText } from "../formFields";
-export const EditableTableRow = ({ thead, value, inputType, handleSave, }) => {
-    const [editing, setEditing] = React.useState(false);
-    return (_jsxs(TableRow, { children: [_jsx(TableHeader, { className: styles.th, children: thead }), editing && _jsx(EditingTableRow, { ...{ value, inputType, handleSave, setEditing } }), !editing && _jsx(RegularTableRow, { ...{ value, setEditing } })] }));
-};
-const RegularTableRow = ({ value, setEditing }) => {
-    const { t } = useTranslation();
-    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: value }), _jsx(TableCell, { children: _jsx("div", { className: styles.editButton, onClick: () => setEditing(true), children: _jsx(Link, { icon: _jsx(EditIcon, {}), iconAlign: "start", children: t("Edit") }) }) })] }));
-};
-const EditingTableRow = ({ value, setEditing, handleSave, inputType, }) => {
-    const { t } = useTranslation();
-    const { register, handleSubmit, formState: { errors }, } = useForm();
-    const onSubmit = (data) => {
-        handleSave(data.value);
-        setEditing(false);
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsx(FormField, { ...{ inputType, value, register, errors } }), _jsxs("div", { className: styles.editButtonsContainer, children: [_jsx("button", { type: "submit", className: styles.submit, children: _jsx(Link, { icon: _jsx(CheckedIcon, {}), iconAlign: "start", children: t("Save") }) }), _jsx("div", { onClick: () => setEditing(false), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", className: styles.cancel, children: t("Cancel") }) })] })] }) }), _jsx(TableCell, {})] }));
-};
-const FormField = ({ inputType, value, register, errors }) => {
-    switch (inputType) {
-        case "email":
-            return _jsx(InputEmail, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
-        case "text":
-            return _jsx(InputText, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
-    }
-};

package/src/components/editableTableRow/EditableTableRow.module.css

@@ -1,25 +0,0 @@
-.th {
-  width: 35%;
-}
-
-.cancel {
-  color: var(--skeleton-color-grey-3) !important;
-}
-
-.editButtonsContainer {
-  display: flex;
-  margin-block-start: var(--skeleton-size-xs);
-}
-
-.editButtonsContainer > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.submit {
-  all: unset;
-}
-
-.editButton {
-  display: flex;
-  justify-content: flex-end;
-}

package/src/components/editableTableRow/EditableTableRow.tsx

@@ -1,138 +0,0 @@
-import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
-import * as styles from "./EditableTableRow.module.css";
-import * as React from "react";
-import { Link } from "@gemeente-denhaag/link";
-import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
-import { FieldValues, useForm, UseFormRegister } from "react-hook-form";
-import { InputEmail, InputText } from "../formFields";
-
-interface InputTypes {
-  inputType: "text" | "email";
-}
-
-interface EditableTableRowProps {
-  thead: string;
-  value: string;
-  saveLabel: string;
-  cancelLabel: string;
-  editLabel: string;
-  handleSave: (value: any) => void;
-}
-
-export const EditableTableRow = ({
-  thead,
-  value,
-  inputType,
-  editLabel,
-  cancelLabel,
-  saveLabel,
-  handleSave,
-}: EditableTableRowProps & InputTypes): JSX.Element => {
-  const [editing, setEditing] = React.useState<boolean>(false);
-
-  return (
-    <TableRow>
-      <TableHeader className={styles.th}>{thead}</TableHeader>
-
-      {editing && <EditingTableRow {...{ value, inputType, handleSave, setEditing, saveLabel, cancelLabel }} />}
-      {!editing && <RegularTableRow {...{ value, setEditing, editLabel }} />}
-    </TableRow>
-  );
-};
-
-/**
- * Specific rows based on editing (Regular: not editing & Editing: editing)
- */
-
-interface RegularTableRowProps {
-  value: string;
-  editLabel: string;
-  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const RegularTableRow = ({ value, editLabel, setEditing }: RegularTableRowProps): JSX.Element => {
-  return (
-    <>
-      <TableCell>{value}</TableCell>
-
-      <TableCell>
-        <div className={styles.editButton} onClick={() => setEditing(true)}>
-          <Link icon={<EditIcon />} iconAlign="start">
-            {editLabel}
-          </Link>
-        </div>
-      </TableCell>
-    </>
-  );
-};
-
-interface EditingTableRowProps {
-  value: string;
-  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
-  saveLabel: string;
-  cancelLabel: string;
-  handleSave: (value: any) => void;
-}
-
-const EditingTableRow = ({
-  value,
-  setEditing,
-  handleSave,
-  inputType,
-  saveLabel,
-  cancelLabel,
-}: EditingTableRowProps & InputTypes): JSX.Element => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm();
-
-  const onSubmit = (data: any): void => {
-    handleSave(data.value);
-    setEditing(false);
-  };
-
-  return (
-    <>
-      <TableCell>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <FormField {...{ inputType, value, register, errors }} />
-
-          <div className={styles.editButtonsContainer}>
-            <button type="submit" className={styles.submit}>
-              <Link icon={<CheckedIcon />} iconAlign="start">
-                {saveLabel}
-              </Link>
-            </button>
-
-            <div onClick={() => setEditing(false)}>
-              <Link icon={<CloseIcon />} iconAlign="start" className={styles.cancel}>
-                {cancelLabel}
-              </Link>
-            </div>
-          </div>
-        </form>
-      </TableCell>
-
-      <TableCell />
-    </>
-  );
-};
-
-interface FormFieldProps {
-  value: string;
-  register: UseFormRegister<FieldValues>;
-  errors: {
-    [x: string]: any;
-  };
-}
-
-const FormField = ({ inputType, value, register, errors }: FormFieldProps & InputTypes): JSX.Element => {
-  switch (inputType) {
-    case "email":
-      return <InputEmail defaultValue={value} {...{ register, errors }} name="value" validation={{ required: true }} />;
-    case "text":
-      return <InputText defaultValue={value} {...{ register, errors }} name="value" validation={{ required: true }} />;
-  }
-};

package/src/components/formFields/radio.tsx

@@ -1,21 +0,0 @@
-import { FormControlLabel } from "@gemeente-denhaag/formcontrollabel";
-import { IReactHookFormProps } from "./types";
-
-interface IRadioProps {
-  label: string;
-  name: string;
-  value: string;
-}
-
-export const InputRadio = ({
-  name,
-  validation,
-  register,
-  label,
-  value,
-}: IRadioProps & IReactHookFormProps): JSX.Element => (
-  <FormControlLabel
-    input={<input type="radio" {...{ value }} {...register(name, { ...validation })} />}
-    {...{ label }}
-  />
-);