@conduction/components 1.0.2

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

@@ -0,0 +1,100 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  border: var(--nlportal-document-border, 1px solid);
+  border-radius: var(--nlportal-border-radius);
+
+  padding-inline-start: var(--nlportal-space-inline-md);
+  padding-inline-end: var(--nlportal-space-inline-md);
+  padding-block-start: var(--nlportal-space-block-md);
+  padding-block-end: var(--nlportal-space-block-xl);
+}
+
+.container > *:not(.link):not(:last-child) {
+  margin-block-end: var(--nlportal-space-block-md);
+}
+
+.link {
+  margin-block-end: var(--nlportal-space-block-xs);
+}
+
+.link > :first-child {
+  display: flex;
+}
+
+.labelsWithIcon {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.labelsWithIcon > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-block-md);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.contentLinks > *:not(:last-child):not(hr) {
+  margin-block-end: var(--nlportal-space-block-xs);
+}
+
+/* Component: LabelWithIcon */
+.labelWithIcon {
+  display: flex;
+  align-items: center;
+  color: var(--denhaag-color-grey-3);
+}
+
+.labelWithIcon > .labelWithIcon_icon > svg {
+  height: var(--conduction-rich-card-label-with-icon-icon-size);
+  width: var(--conduction-rich-card-label-with-icon-icon-size);
+  margin-inline-end: var(--nlportal-space-inline-xs);
+}
+
+.labelWithIcon > .labelWithIcon_label {
+  font-size: var(--conduction-rich-card-label-with-icon-label-size);
+}
+
+/* Component: Tag */
+.tag {
+  font-size: var(--conduction-tag-font-size);
+  background-color: var(--denhaag-color-grey-1);
+  border-radius: var(--nlportal-document-border-radius);
+  padding-inline-start: var(--nlportal-space-inline-xs);
+  padding-inline-end: var(--nlportal-space-inline-xs);
+  padding-block-start: var(--nlportal-space-block-xs);
+  padding-block-end: var(--nlportal-space-block-xs);
+}
+
+/* Content Link */
+.contentLink {
+  display: flex;
+  padding-block-start: var(--nlportal-space-block-xs);
+  padding-block-end: var(--nlportal-space-block-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

@@ -0,0 +1,105 @@
+import { Divider, Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import * as React from "react";
+import * as styles from "./RichContentCard.module.css";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+
+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: React.FC<RichContentCardProps> = ({
+  link,
+  labelsWithIcon,
+  tags,
+  contentLinks,
+  linkIsExternal,
+}) => {
+  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 }) => (
+          <LabelWithIcon {...{ label, icon }} />
+        ))}
+      </div>
+
+      <div className={styles.tags}>
+        {tags.map((tag) => (
+          <Tag {...{ tag }} />
+        ))}
+      </div>
+
+      {contentLinks && (
+        <div className={styles.contentLinks}>
+          <Divider />
+          {contentLinks.map(({ title, subTitle, href }) => (
+            <ContentLink {...{ title, subTitle, href }} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface LabelWithIconProps {
+  label: string;
+  icon: JSX.Element;
+}
+
+const LabelWithIcon: React.FC<LabelWithIconProps> = ({ label, icon }) => {
+  return (
+    <div className={styles.labelWithIcon}>
+      <span className={styles.labelWithIcon_icon}>{icon}</span>
+      <span className={styles.labelWithIcon_label}>{label}</span>
+    </div>
+  );
+};
+
+interface TagProps {
+  tag: string;
+}
+
+const Tag: React.FC<TagProps> = ({ tag }) => {
+  return <span className={styles.tag}>{tag}</span>;
+};
+
+interface ContentLinkProps {
+  title: string;
+  subTitle: string;
+  href: string;
+}
+
+const ContentLink: React.FC<ContentLinkProps> = ({ title, subTitle, href }) => {
+  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/card/downloadCard/DownloadCard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./DownloadCard.module.css";
+import { DownloadIcon } from "@gemeente-denhaag/icons";
+import { Link } from "@gemeente-denhaag/components-react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+export const DownloadCard = ({ icon, label, sizeKb, layoutClassName }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: t("Download") })] }));
+};

package/src/components/card/downloadCard/DownloadCard.module.css

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: var(--nlportal-document-border, 1px solid);
+  border-radius: var(--nlportal-document-border-radius);
+  padding-inline-end: var(--nlportal-space-inline-md);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.content > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.icon {
+  padding-inline: var(--nlportal-space-inline-md);
+  padding-block: var(--nlportal-space-block-md);
+  background-color: var(--nlportal-document-icon-background-color);
+}

package/src/components/card/downloadCard/DownloadCard.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import * as styles from "./DownloadCard.module.css";
+import { DownloadIcon } from "@gemeente-denhaag/icons";
+import { Link } from "@gemeente-denhaag/components-react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+
+interface DownloadCardProps {
+  icon: JSX.Element;
+  label: string;
+  sizeKb: string;
+  layoutClassName?: string;
+}
+
+export const DownloadCard: React.FC<DownloadCardProps> = ({ icon, label, sizeKb, layoutClassName }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
+      <div className={styles.content}>
+        <div className={styles.icon}>{icon}</div>
+        
+        <div>
+          {label} ({sizeKb}kb)
+        </div>
+      </div>
+
+      <Link icon={<DownloadIcon />} iconAlign="start">
+        {t("Download")}
+      </Link>
+    </div>
+  );
+};

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./ImageAndDetailsCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+export const ImageAndDetailsCard = ({ image, title, subHeader, introduction, link, layoutClassName, }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.image, children: image }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] })] }));
+};

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css

@@ -0,0 +1,54 @@
+.container {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--nlportal-document-border-radius);
+}
+
+.image {
+  height: var(--conduction-image-and-details-card-image-height);
+}
+
+.image > :first-child {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: var(--nlportal-space-inline-lg);
+  padding-inline-end: var(--nlportal-space-inline-lg);
+  padding-block-start: var(--nlportal-space-block-lg);
+  padding-block-end: var(--nlportal-space-block-lg);
+  border: var(--nlportal-document-border, 1px solid);
+}
+
+.content > *:not(:last-child) {
+  margin-block-end: var(--nlportal-space-block-md);
+}
+
+.title {
+  font-size: var(--denhaag-typography-scale-xl-font-size);
+  font-weight: var(--conduction-image-and-details-card-title-font-weight);
+}
+
+.subHeader {
+  color: var(--denhaag-color-grey-3);
+  font-size: var(--denhaag-typography-scale-s-font-size);
+}
+
+.introduction {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(
+    --conduction-image-and-details-card-introduction-lines-clamp
+  );
+  -webkit-box-orient: vertical;
+}
+
+.link {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as styles from "./ImageAndDetailsCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+
+interface ImageAndDetailsCardProps {
+  title: string;
+  image: JSX.Element;
+  introduction: string;
+  link: {
+    href: string;
+    label: string;
+  };
+  subHeader?: string;
+  layoutClassName?: string;
+}
+
+export const ImageAndDetailsCard: React.FC<ImageAndDetailsCardProps> = ({
+  image,
+  title,
+  subHeader,
+  introduction,
+  link,
+  layoutClassName,
+}) => {
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
+      <div className={styles.image}>{image}</div>
+
+      <div className={styles.content}>
+        <div>
+          <div className={styles.title}>{title}</div>
+
+          <span className={styles.subHeader}>{subHeader}</span>
+        </div>
+
+        <div className={styles.introduction}>{introduction}</div>
+
+        <div className={styles.link}>
+          <Link icon={<ArrowRightIcon />} iconAlign="start">
+            {link.label}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/card/index.js

@@ -0,0 +1,5 @@
+import { DownloadCard } from "./downloadCard/DownloadCard";
+import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
+import { RichContentCard } from "./RichContentCard/RichContentCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };

package/src/components/card/index.tsx

@@ -0,0 +1,6 @@
+import { DownloadCard } from "./downloadCard/DownloadCard";
+import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
+import { RichContentCard } from "./RichContentCard/RichContentCard";
+
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };

package/src/components/casesTable/CasesTable.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./CasesTable.module.css";
+import { Link } from "@gemeente-denhaag/components-react";
+import { Table, TableBody, TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import { useTranslation } from "react-i18next";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { navigate } from "gatsby";
+export const CasesTable = ({ cases }) => {
+    const { t } = useTranslation();
+    return (_jsx(Table, { children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableHeader, { children: t("Title") }), _jsx(TableHeader, { children: t("Status") }), _jsx(TableHeader, { children: t("Date") }), _jsx(TableHeader, {})] }), cases.map((_case) => (_jsxs(TableRow, { className: styles.contentRow, children: [_jsx(TableCell, { children: _case.omschrijving }), _jsx(TableCell, { children: _case.status }), _jsx(TableCell, { children: _case.startdatum }), _jsx(TableCell, { onClick: () => navigate(`/my-cases/${_case.id}`), children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: t("View case") }) })] }, _case.id)))] }) }));
+};

package/src/components/casesTable/CasesTable.module.css

@@ -0,0 +1,4 @@
+.contentRow > :last-child {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/casesTable/CasesTable.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import * as styles from "./CasesTable.module.css";
+import { Link } from "@gemeente-denhaag/components-react";
+import { Table, TableBody, TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import { useTranslation } from "react-i18next";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { navigate } from "gatsby";
+
+interface CasesTableProps {
+  cases: any[];
+}
+
+export const CasesTable: React.FC<CasesTableProps> = ({ cases }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableHeader>{t("Title")}</TableHeader>
+          <TableHeader>{t("Status")}</TableHeader>
+          <TableHeader>{t("Date")}</TableHeader>
+          <TableHeader />
+        </TableRow>
+        {cases.map((_case) => (
+          <TableRow key={_case.id} className={styles.contentRow}>
+            <TableCell>{_case.omschrijving}</TableCell>
+            <TableCell>{_case.status}</TableCell>
+            <TableCell>{_case.startdatum}</TableCell>
+
+            <TableCell onClick={() => navigate(`/my-cases/${_case.id}`)}>
+              <Link icon={<ArrowRightIcon />} iconAlign="start">
+                {t("View case")}
+              </Link>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};

package/src/components/container/Container.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./Container.module.css";
+export const Container = ({ children }) => _jsx("div", { className: styles.container, children: children });

package/src/components/container/Container.module.css

@@ -0,0 +1,5 @@
+.container {
+  width: 100%;
+  margin-inline: auto;
+  max-width: var(--nlportal-max-page-width);
+}

package/src/components/container/Container.tsx

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as styles from "./Container.module.css";
+
+export const Container: React.FC = ({ children }) => <div className={styles.container}>{children}</div>;