@conduction/components 2.0.30 → 2.0.32

package/src/components/badgeCounter/BadgeCounter.module.css

@@ -1,27 +1,27 @@
-:root {
-  --conduction-badge-counter-color: hsl(0 0% 0%);
-  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
-  --conduction-badge-counter-height: var(--skeleton-size-md);
-  --conduction-badge-counter-width: var(--skeleton-size-md);
-  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
-  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
-}
-
-.content {
-  display: flex;
-}
-
-.badge {
-  height: var(--conduction-badge-counter-height);
-  width: var(--conduction-badge-counter-width);
-  border-radius: 50%;
-  font-size: var(--conduction-badge-counter-font-size);
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background-color: var(--conduction-badge-counter-background-color);
-  color: var(--conduction-badge-counter-color);
-}
-.maxNumber {
-  font-size: var(--conduction-badge-counter-max-number-font-size);
-}
+:root {
+  --conduction-badge-counter-color: hsl(0 0% 0%);
+  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
+  --conduction-badge-counter-height: var(--skeleton-size-md);
+  --conduction-badge-counter-width: var(--skeleton-size-md);
+  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
+  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
+}
+
+.content {
+  display: flex;
+}
+
+.badge {
+  height: var(--conduction-badge-counter-height);
+  width: var(--conduction-badge-counter-width);
+  border-radius: 50%;
+  font-size: var(--conduction-badge-counter-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--conduction-badge-counter-background-color);
+  color: var(--conduction-badge-counter-color);
+}
+.maxNumber {
+  font-size: var(--conduction-badge-counter-max-number-font-size);
+}

package/src/components/badgeCounter/BadgeCounter.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
-import * as styles from "./BadgeCounter.module.css";
-import clsx from "clsx";
-
-interface BadgeCounterProps {
-  number: string;
-  children: React.ReactNode;
-  layoutClassName?: string;
-}
-
-export const BadgeCounter: React.FC<BadgeCounterProps> = ({ number, children, layoutClassName }) => (
-  <div className={styles.content}>
-    {children}
-    <span className={clsx([layoutClassName && layoutClassName], styles.badge)}>{number}</span>
-  </div>
-);
+import * as React from "react";
+import * as styles from "./BadgeCounter.module.css";
+import clsx from "clsx";
+
+interface BadgeCounterProps {
+  number: string;
+  children: React.ReactNode;
+  layoutClassName?: string;
+}
+
+export const BadgeCounter: React.FC<BadgeCounterProps> = ({ number, children, layoutClassName }) => (
+  <div className={styles.content}>
+    {children}
+    <span className={clsx([layoutClassName && layoutClassName], styles.badge)}>{number}</span>
+  </div>
+);

package/src/components/card/detailsCard/DetailsCard.module.css

@@ -1,51 +1,51 @@
-:root {
-  --conduction-details-card-border: 1px solid var(--skeleton-color-grey-2);
-  --conduction-details-card-introduction-lines-clamp: 3;
-}
-
-.container {
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: var(--skeleton-border-radius-md);
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  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);
-  border: var(--conduction-details-card-border);
-}
-
-.content > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-md);
-}
-
-.title {
-  font-size: var(--skeleton-font-size-xl);
-  font-weight: var(--skeleton-font-weight-bold);
-}
-
-.subHeader {
-  color: var(--skeleton-color-grey-3);
-  font-size: var(--skeleton-font-size-sm);
-}
-
-.tags > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-sm);
-}
-
-.introduction {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: var(--conduction-details-card-introduction-lines-clamp);
-  -webkit-box-orient: vertical;
-}
-
-.link {
-  display: flex;
-  justify-content: flex-end;
-}
+:root {
+  --conduction-details-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-details-card-introduction-lines-clamp: 3;
+}
+
+.container {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--skeleton-border-radius-md);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  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);
+  border: var(--conduction-details-card-border);
+}
+
+.content > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-md);
+}
+
+.title {
+  font-size: var(--skeleton-font-size-xl);
+  font-weight: var(--skeleton-font-weight-bold);
+}
+
+.subHeader {
+  color: var(--skeleton-color-grey-3);
+  font-size: var(--skeleton-font-size-sm);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-sm);
+}
+
+.introduction {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--conduction-details-card-introduction-lines-clamp);
+  -webkit-box-orient: vertical;
+}
+
+.link {
+  display: flex;
+  justify-content: flex-end;
+}

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

@@ -1,56 +1,56 @@
-import * as React from "react";
-import * as styles from "./DetailsCard.module.css";
-import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
-import { Tag } from "../../tag/Tag";
-
-interface DetailsCardProps {
-  title: string;
-  introduction?: string;
-  link: {
-    href: string;
-    label: string;
-  };
-  tags?: string[];
-  subHeader?: string;
-  layoutClassName?: string;
-}
-
-export const DetailsCard: React.FC<DetailsCardProps> = ({
-  title,
-  subHeader,
-  introduction,
-  link,
-  tags,
-  layoutClassName,
-}) => {
-  return (
-    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
-      <div className={styles.content}>
-        <div>
-          <div className={styles.title}>{title}</div>
-
-          <span className={styles.subHeader}>{subHeader}</span>
-        </div>
-
-        {tags && (
-          <div className={styles.tags}>
-            {tags.map((tag, idx) => (
-              <Tag key={idx} label={tag} />
-            ))}
-          </div>
-        )}
-
-        <div className={styles.introduction}>{introduction}</div>
-
-        <div className={styles.link}>
-          <Link icon={<ArrowRightIcon />} iconAlign="start">
-            {link.label}
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./DetailsCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { Tag } from "../../tag/Tag";
+
+interface DetailsCardProps {
+  title: string;
+  introduction?: string;
+  link: {
+    href: string;
+    label: string;
+  };
+  tags?: string[];
+  subHeader?: string;
+  layoutClassName?: string;
+}
+
+export const DetailsCard: React.FC<DetailsCardProps> = ({
+  title,
+  subHeader,
+  introduction,
+  link,
+  tags,
+  layoutClassName,
+}) => {
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
+      <div className={styles.content}>
+        <div>
+          <div className={styles.title}>{title}</div>
+
+          <span className={styles.subHeader}>{subHeader}</span>
+        </div>
+
+        {tags && (
+          <div className={styles.tags}>
+            {tags.map((tag, idx) => (
+              <Tag key={idx} label={tag} />
+            ))}
+          </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/downloadCard/DownloadCard.js

@@ -1,10 +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") })] }));
-};
+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

@@ -1,27 +1,27 @@
-:root {
-  --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: var(--conduction-download-card-border);
-  border-radius: var(--skeleton-border-radius-md);
-  padding-inline-end: var(--skeleton-size-sm);
-}
-
-.content {
-  display: flex;
-  align-items: center;
-}
-
-.content > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-sm);
-}
-
-.icon {
-  padding-inline: var(--skeleton-size-sm);
-  padding-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
-}
+:root {
+  --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: var(--conduction-download-card-border);
+  border-radius: var(--skeleton-border-radius-md);
+  padding-inline-end: var(--skeleton-size-sm);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.content > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-sm);
+}
+
+.icon {
+  padding-inline: var(--skeleton-size-sm);
+  padding-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+}

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

@@ -1,40 +1,40 @@
-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";
-
-interface DownloadCardProps {
-  icon: JSX.Element;
-  label: string;
-  sizeKb: string;
-  downloadLabel: string;
-  layoutClassName?: string;
-  handleClick: () => any;
-}
-
-export const DownloadCard: React.FC<DownloadCardProps> = ({
-  icon,
-  label,
-  sizeKb,
-  layoutClassName,
-  downloadLabel,
-  handleClick,
-}) => {
-  return (
-    <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
-      <div className={styles.content}>
-        <div className={styles.icon}>{icon}</div>
-
-        <div>
-          {label} ({sizeKb}kb)
-        </div>
-      </div>
-      <div onClick={handleClick}>
-        <Link icon={<DownloadIcon />} iconAlign="start">
-          {downloadLabel}
-        </Link>
-      </div>
-    </div>
-  );
-};
+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";
+
+interface DownloadCardProps {
+  icon: JSX.Element;
+  label: string;
+  sizeKb: string;
+  downloadLabel: string;
+  layoutClassName?: string;
+  handleClick: () => any;
+}
+
+export const DownloadCard: React.FC<DownloadCardProps> = ({
+  icon,
+  label,
+  sizeKb,
+  layoutClassName,
+  downloadLabel,
+  handleClick,
+}) => {
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
+      <div className={styles.content}>
+        <div className={styles.icon}>{icon}</div>
+
+        <div>
+          {label} ({sizeKb}kb)
+        </div>
+      </div>
+      <div onClick={handleClick}>
+        <Link icon={<DownloadIcon />} iconAlign="start">
+          {downloadLabel}
+        </Link>
+      </div>
+    </div>
+  );
+};

package/src/components/card/horizontalImageCard/HorizontalImageCard.js

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

package/src/components/card/horizontalImageCard/HorizontalImageCard.module.css

@@ -1,34 +1,34 @@
-:root {
-  --conduction-horizontal-image-card-image-size: 52px;
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-border-radius-md);
-}
-
-.link {
-  display: flex;
-  flex-direction: column;
-  padding-block-start: var(--skeleton-size-lg);
-  padding-block-end: var(--skeleton-size-lg);
-  padding-inline-end: var(--skeleton-size-lg);
-}
-
-.imageOrIconContainer > :first-child {
-  width: var(--conduction-horizontal-image-card-image-size);
-  height: var(--conduction-horizontal-image-card-image-size);
-
-  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);
-}
-
-.title {
-  font-weight: var(--skeleton-font-weight-bold);
-  font-size: var(--skeleton-font-size-xl);
-}
+:root {
+  --conduction-horizontal-image-card-image-size: 52px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-border-radius-md);
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  padding-block-start: var(--skeleton-size-lg);
+  padding-block-end: var(--skeleton-size-lg);
+  padding-inline-end: var(--skeleton-size-lg);
+}
+
+.imageOrIconContainer > :first-child {
+  width: var(--conduction-horizontal-image-card-image-size);
+  height: var(--conduction-horizontal-image-card-image-size);
+
+  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);
+}
+
+.title {
+  font-weight: var(--skeleton-font-weight-bold);
+  font-size: var(--skeleton-font-size-xl);
+}

package/src/components/card/horizontalImageCard/HorizontalImageCard.tsx

@@ -1,37 +1,37 @@
-import * as React from "react";
-import * as styles from "./HorizontalImageCard.module.css";
-import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-
-interface HorizontalImageCardProps {
-  iconOrImage: JSX.Element;
-  title: string;
-  link: {
-    label: string;
-    href: string;
-  };
-  layoutClassName?: string;
-  external?: boolean;
-}
-
-export const HorizontalImageCard: React.FC<HorizontalImageCardProps> = ({
-  title,
-  layoutClassName,
-  external,
-  link,
-  iconOrImage,
-}) => {
-  return (
-    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
-      <div className={styles.imageOrIconContainer}>{iconOrImage}</div>
-      <div className={styles.link}>
-        <div className={styles.title}>{title}</div>
-        <Link icon={external ? <ExternalLinkIcon /> : <ArrowRightIcon />} iconAlign="start">
-          {link.label}
-        </Link>
-      </div>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./HorizontalImageCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+
+interface HorizontalImageCardProps {
+  iconOrImage: JSX.Element;
+  title: string;
+  link: {
+    label: string;
+    href: string;
+  };
+  layoutClassName?: string;
+  external?: boolean;
+}
+
+export const HorizontalImageCard: React.FC<HorizontalImageCardProps> = ({
+  title,
+  layoutClassName,
+  external,
+  link,
+  iconOrImage,
+}) => {
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
+      <div className={styles.imageOrIconContainer}>{iconOrImage}</div>
+      <div className={styles.link}>
+        <div className={styles.title}>{title}</div>
+        <Link icon={external ? <ExternalLinkIcon /> : <ArrowRightIcon />} iconAlign="start">
+          {link.label}
+        </Link>
+      </div>
+    </div>
+  );
+};

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

@@ -1,9 +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 }) })] })] }));
-};
+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 }) })] })] }));
+};