@conduction/components 1.0.3 → 1.0.7

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,39 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+    branches:
+      - development
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: |
+          git --version
+          git config user.name "GitHub Version patch"
+          git config user.email "<>"
+          git checkout development
+          git clean -f -n
+      - run: npm install
+      - run: npm version patch
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/lib/components/card/detailsCard/DetailsCard.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface DetailsCardProps {
+    title: string;
+    introduction: string;
+    link: {
+        href: string;
+        label: string;
+    };
+    tags?: string[];
+    subHeader?: string;
+    layoutClassName?: string;
+}
+export declare const DetailsCard: React.FC<DetailsCardProps>;
+export {};

package/lib/components/card/detailsCard/DetailsCard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+export const DetailsCard = ({ title, subHeader, introduction, link, tags, layoutClassName, }) => {
+    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { ...{ tag } }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] }) }));
+};

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

@@ -0,0 +1,48 @@
+.container {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--nlportal-document-border-radius);
+}
+
+.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);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.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/lib/components/card/index.d.ts

@@ -1,5 +1,6 @@
 import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
 import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./RichContentCard/RichContentCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };
+import { RichContentCard } from "./richContentCard/RichContentCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };

package/lib/components/card/index.js

@@ -1,5 +1,6 @@
 import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
 import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./RichContentCard/RichContentCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };
+import { RichContentCard } from "./richContentCard/RichContentCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };

package/{src/components/card/RichContentCard → lib/components/card/richContentCard}/RichContentCard.js

@@ -3,15 +3,13 @@ import { Divider, Link } from "@gemeente-denhaag/components-react";
 import { navigate } from "gatsby";
 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) => (_jsx(Tag, { ...{ tag } }))) }), 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 }) => (_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 } })))] }))] }));
 };
 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/lib/components/card/{RichContentCard → richContentCard}/RichContentCard.module.css

@@ -56,17 +56,6 @@
   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;

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

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-import { ICheckboxProps, IReactHookFormProps } from "./types";
+import { IReactHookFormProps } from "./types";
+export interface ICheckboxProps {
+    label: string;
+    name: string;
+}
 export declare const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps>;

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

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { IInputProps, IReactHookFormProps } from "./types";
+import { IReactHookFormProps } from "./types";
+export interface IInputProps {
+    name: string;
+    disabled?: boolean;
+    defaultValue?: string;
+}
 export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputEmail: React.FC<IInputProps & IReactHookFormProps>;

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

@@ -1,3 +1,8 @@
 import * as React from "react";
-import { ITextAreaProps, IReactHookFormProps } from "./types";
+import { IReactHookFormProps } from "./types";
+export interface ITextAreaProps {
+    name: string;
+    disabled?: boolean;
+    defaultValue?: string;
+}
 export declare const Textarea: React.FC<ITextAreaProps & IReactHookFormProps>;

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

@@ -4,17 +4,3 @@ export interface IReactHookFormProps {
     errors: FieldErrors;
     validation?: Omit<RegisterOptions<FieldValues, any>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
 }
-export interface IInputProps {
-    name: string;
-    disabled?: boolean;
-    defaultValue?: string;
-}
-export interface ITextAreaProps {
-    name: string;
-    disabled?: boolean;
-    defaultValue?: string;
-}
-export interface ICheckboxProps {
-    label: string;
-    name: string;
-}

package/lib/components/tag/Tag.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface TagProps {
+    tag: string;
+}
+export declare const Tag: React.FC<TagProps>;
+export {};

package/lib/components/tag/Tag.js

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

package/lib/components/tag/Tag.module.css

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

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard } from "./components/card";
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard } from "./components/card";
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
@@ -9,4 +9,5 @@ import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, };
+import { Tag } from "./components/tag/Tag";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, };

package/lib/index.js

@@ -1,4 +1,4 @@
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard } from "./components/card";
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, } from "./components/card";
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
@@ -9,4 +9,5 @@ import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, };
+import { Tag } from "./components/tag/Tag";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

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

@@ -0,0 +1,48 @@
+.container {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--nlportal-document-border-radius);
+}
+
+.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);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.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/detailsCard/DetailsCard.tsx

@@ -0,0 +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} {...{ 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/index.tsx

@@ -1,6 +1,7 @@
 import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
 import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./RichContentCard/RichContentCard";
+import { RichContentCard } from "./richContentCard/RichContentCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
 
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };

package/src/components/card/{RichContentCard → richContentCard}/RichContentCard.module.css

@@ -56,17 +56,6 @@
   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;

package/src/components/card/{RichContentCard → richContentCard}/RichContentCard.tsx

@@ -3,6 +3,7 @@ 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: {
@@ -44,8 +45,8 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
       </div>
 
       <div className={styles.tags}>
-        {tags.map((tag) => (
-          <Tag {...{ tag }} />
+        {tags.map((tag, idx) => (
+          <Tag key={idx} {...{ tag }} />
         ))}
       </div>
 
@@ -75,14 +76,6 @@ const LabelWithIcon: React.FC<LabelWithIconProps> = ({ label, icon }) => {
   );
 };
 
-interface TagProps {
-  tag: string;
-}
-
-const Tag: React.FC<TagProps> = ({ tag }) => {
-  return <span className={styles.tag}>{tag}</span>;
-};
-
 interface ContentLinkProps {
   title: string;
   subTitle: string;

package/src/components/tag/Tag.module.css

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

package/src/components/tag/Tag.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as styles from "./Tag.module.css";
+
+interface TagProps {
+  tag: string;
+}
+
+export const Tag: React.FC<TagProps> = ({ tag }) => <span className={styles.tag}>{tag}</span>;

package/src/index.ts

@@ -1,4 +1,10 @@
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard } from "./components/card";
+import {
+  DownloadCard,
+  HorizontalImageCard,
+  ImageAndDetailsCard,
+  RichContentCard,
+  DetailsCard,
+} from "./components/card";
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
@@ -17,12 +23,14 @@ import { MetaIcon } from "./components/metaIcon/MetaIcon";
 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";
 
 export {
   DownloadCard,
   HorizontalImageCard,
   ImageAndDetailsCard,
   RichContentCard,
+  DetailsCard,
   Container,
   Breadcrumbs,
   EditableTableRow,
@@ -41,4 +49,5 @@ export {
   StatusSteps,
   PrimaryTopNav,
   SecondaryTopNav,
+  Tag,
 };