@conduction/components 2.0.5 → 2.0.6

package/README.md

@@ -4,6 +4,12 @@
 
 - **Version 2**
 
+  - 2.0.6: 
+    - Added optional icon with default icon to the primary and secondary button in NotificationPopUp
+    - Added a handleClick function to the DownloadCard;
+    - Added clickFunction, layoutClassName and renamed tag to label in the Tag component;
+    - Edited DetailsCard to accommodate changes made to Tag component;
+    - Edited RichContentCard to accommodate changes made to Tag component;
   - 2.0.5: wrong camelcase in npm publish/build fix;
   - 2.0.4: added layoutClassName to InfoCard;
   - 2.0.3: Bugfix: --conduction-container typo removed;

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

@@ -6,5 +6,5 @@ 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 }) })] }) }));
+    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, { label: 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/downloadCard/DownloadCard.d.ts

@@ -5,6 +5,7 @@ interface DownloadCardProps {
     sizeKb: string;
     downloadLabel: string;
     layoutClassName?: string;
+    handleClick: () => any;
 }
 export declare const DownloadCard: React.FC<DownloadCardProps>;
 export {};

package/lib/components/card/downloadCard/DownloadCard.js

@@ -3,6 +3,6 @@ import * as styles from "./DownloadCard.module.css";
 import { DownloadIcon } from "@gemeente-denhaag/icons";
 import { Link } from "@gemeente-denhaag/components-react";
 import clsx from "clsx";
-export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel }) => {
-    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: downloadLabel })] }));
+export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }) => {
+    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("div", { onClick: handleClick, children: _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: downloadLabel }) })] }));
 };

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 }, 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)))] }))] }));
+    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, { label: 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/notificationPopUp/NotificationPopUp.d.ts

@@ -6,10 +6,12 @@ export interface NotificationPopUpProps {
     hide: () => void;
     primaryButton: {
         label: string;
+        icon?: JSX.Element;
         handleClick: () => any;
     };
     secondaryButton?: {
         label: string;
+        icon?: JSX.Element;
         handleClick: () => any;
     };
     layoutClassName?: string;

package/lib/components/notificationPopUp/NotificationPopUp.js

@@ -16,7 +16,7 @@ export const NotificationPopUp = ({ title, description, isVisible, hide, primary
             setAnimationVisible(true);
         }, animationDuration);
     };
-    const modal = (_jsx(StylesProvider, { children: _jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", children: secondaryButton.label }) })), _jsx(Button, { icon: _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
+    const modal = (_jsx(StylesProvider, { children: _jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), children: _jsx(Link, { icon: secondaryButton.icon ?? _jsx(CloseIcon, {}), iconAlign: "start", children: secondaryButton.label }) })), _jsx(Button, { icon: primaryButton.icon ?? _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
     return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
 };
 export const NotificationPopUpController = () => {

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

@@ -1,6 +1,9 @@
 import * as React from "react";
 interface TagProps {
-    tag: string;
+    label: string;
+    icon?: JSX.Element;
+    onClick?: () => any;
+    layoutClassName?: string;
 }
 export declare const Tag: React.FC<TagProps>;
 export {};

package/lib/components/tag/Tag.js

@@ -1,3 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./Tag.module.css";
-export const Tag = ({ tag }) => _jsx("span", { className: styles.tag, children: tag });
+import clsx from "clsx";
+export const Tag = ({ label, icon, onClick, layoutClassName }) => (_jsxs("div", { className: clsx(styles.tag, [layoutClassName && layoutClassName], onClick && styles.clickable), ...{ onClick }, children: [icon && _jsx("span", { children: icon }), _jsx("span", { children: label })] }));

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

@@ -1,9 +1,10 @@
 :root {
   --conduction-tag-font-size: var(--skeleton-font-size-sm);
   --conduction-tag-color: var(--skeleton-black);
-  --conduction-tag-backgrond-color: var(--skeleton-color-grey-1);
+  --conduction-tag-background-color: var(--skeleton-color-grey-1);
   --conduction-tag-border-radius: var(--skeleton-border-radius-md);
   --conduction-tag-padding: var(--skeleton-size-xs);
+  --conduction-tag-child-margin-inline: var(--skeleton-size-2xs);
 }
 
 .tag {
@@ -11,10 +12,18 @@
   width: fit-content;
   font-size: var(--conduction-tag-font-size);
   color: var(--conduction-tag-color);
-  background-color: var(--conduction-tag-backgrond-color);
+  background-color: var(--conduction-tag-background-color);
   border-radius: var(--conduction-tag-border-radius);
   padding-inline-start: var(--conduction-tag-padding);
   padding-inline-end: var(--conduction-tag-padding);
   padding-block-start: var(--conduction-tag-padding);
   padding-block-end: var(--conduction-tag-padding);
 }
+
+.tag > *:not(:last-child) {
+  margin-inline-end: var(--conduction-tag-child-margin-inline);
+}
+
+.clickable :hover {
+  cursor: pointer;
+}

package/package.json

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

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

@@ -38,7 +38,7 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
         {tags && (
           <div className={styles.tags}>
             {tags.map((tag, idx) => (
-              <Tag key={idx} {...{ tag }} />
+              <Tag key={idx} label={tag} />
             ))}
           </div>
         )}

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

@@ -10,9 +10,17 @@ interface DownloadCardProps {
   sizeKb: string;
   downloadLabel: string;
   layoutClassName?: string;
+  handleClick: () => any;
 }
 
-export const DownloadCard: React.FC<DownloadCardProps> = ({ icon, label, sizeKb, layoutClassName, downloadLabel }) => {
+export const DownloadCard: React.FC<DownloadCardProps> = ({
+  icon,
+  label,
+  sizeKb,
+  layoutClassName,
+  downloadLabel,
+  handleClick,
+}) => {
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
       <div className={styles.content}>
@@ -22,10 +30,11 @@ export const DownloadCard: React.FC<DownloadCardProps> = ({ icon, label, sizeKb,
           {label} ({sizeKb}kb)
         </div>
       </div>
-
-      <Link icon={<DownloadIcon />} iconAlign="start">
-        {downloadLabel}
-      </Link>
+      <div onClick={handleClick}>
+        <Link icon={<DownloadIcon />} iconAlign="start">
+          {downloadLabel}
+        </Link>
+      </div>
     </div>
   );
 };

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

@@ -46,7 +46,7 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
 
       <div className={styles.tags}>
         {tags.map((tag, idx) => (
-          <Tag key={idx} {...{ tag }} />
+          <Tag key={idx} label={tag} />
         ))}
       </div>
 

package/src/components/notificationPopUp/NotificationPopUp.tsx

@@ -12,10 +12,12 @@ export interface NotificationPopUpProps {
   hide: () => void;
   primaryButton: {
     label: string;
+    icon?: JSX.Element;
     handleClick: () => any;
   };
   secondaryButton?: {
     label: string;
+    icon?: JSX.Element;
     handleClick: () => any;
   };
   layoutClassName?: string;
@@ -54,12 +56,15 @@ export const NotificationPopUp: React.FC<NotificationPopUpProps> = ({
         <div className={styles.buttons}>
           {secondaryButton && (
             <div onClick={() => handleClick(secondaryButton.handleClick)}>
-              <Link icon={<CloseIcon />} iconAlign="start">
+              <Link icon={secondaryButton.icon ?? <CloseIcon />} iconAlign="start">
                 {secondaryButton.label}
               </Link>
             </div>
           )}
-          <Button icon={<ArrowRightIcon />} onClick={() => handleClick(primaryButton.handleClick)}>
+          <Button
+            icon={primaryButton.icon ?? <ArrowRightIcon />}
+            onClick={() => handleClick(primaryButton.handleClick)}
+          >
             {primaryButton.label}
           </Button>
         </div>

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

@@ -1,9 +1,10 @@
 :root {
   --conduction-tag-font-size: var(--skeleton-font-size-sm);
   --conduction-tag-color: var(--skeleton-black);
-  --conduction-tag-backgrond-color: var(--skeleton-color-grey-1);
+  --conduction-tag-background-color: var(--skeleton-color-grey-1);
   --conduction-tag-border-radius: var(--skeleton-border-radius-md);
   --conduction-tag-padding: var(--skeleton-size-xs);
+  --conduction-tag-child-margin-inline: var(--skeleton-size-2xs);
 }
 
 .tag {
@@ -11,10 +12,18 @@
   width: fit-content;
   font-size: var(--conduction-tag-font-size);
   color: var(--conduction-tag-color);
-  background-color: var(--conduction-tag-backgrond-color);
+  background-color: var(--conduction-tag-background-color);
   border-radius: var(--conduction-tag-border-radius);
   padding-inline-start: var(--conduction-tag-padding);
   padding-inline-end: var(--conduction-tag-padding);
   padding-block-start: var(--conduction-tag-padding);
   padding-block-end: var(--conduction-tag-padding);
 }
+
+.tag > *:not(:last-child) {
+  margin-inline-end: var(--conduction-tag-child-margin-inline);
+}
+
+.clickable :hover {
+  cursor: pointer;
+}

package/src/components/tag/Tag.tsx

@@ -1,8 +1,17 @@
 import * as React from "react";
 import * as styles from "./Tag.module.css";
+import clsx from "clsx";
 
 interface TagProps {
-  tag: string;
+  label: string;
+  icon?: JSX.Element;
+  onClick?: () => any;
+  layoutClassName?: string;
 }
 
-export const Tag: React.FC<TagProps> = ({ tag }) => <span className={styles.tag}>{tag}</span>;
+export const Tag: React.FC<TagProps> = ({ label, icon, onClick, layoutClassName }) => (
+  <div className={clsx(styles.tag, [layoutClassName && layoutClassName], onClick && styles.clickable)} {...{ onClick }}>
+    {icon && <span>{icon}</span>}
+    <span>{label}</span>
+  </div>
+);