@conduction/components 2.0.5 → 2.0.7

package/README.md

@@ -4,6 +4,15 @@
 
 - **Version 2**
 
+  - 2.0.7: 
+    - Added new BadgeCounter component.
+    - Added CodeBlock component.
+  - 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/badgeCounter/BadgeCounter.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface BadgeCounterProps {
+    number: string;
+    children: React.ReactNode;
+    layoutClassName?: string;
+}
+export declare const BadgeCounter: React.FC<BadgeCounterProps>;
+export {};

package/lib/components/badgeCounter/BadgeCounter.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./BadgeCounter.module.css";
+import clsx from "clsx";
+export const BadgeCounter = ({ number, children, layoutClassName }) => (_jsxs("div", { className: styles.content, children: [children, _jsx("span", { className: clsx([layoutClassName && layoutClassName], styles.badge), children: number })] }));

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

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

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/codeBlock/CodeBlock.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface CodeBlockProps {
+    codeBlock: string | JSX.Element;
+}
+export declare const CodeBlock: React.FC<CodeBlockProps>;
+export {};

package/lib/components/codeBlock/CodeBlock.js

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

package/lib/components/codeBlock/CodeBlock.module.css

@@ -0,0 +1,6 @@
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

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/lib/index.d.ts

@@ -21,4 +21,6 @@ declare const NotificationPopUp: {
 };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };
+import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
+import { CodeBlock } from "./components/codeBlock/CodeBlock";
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, };

package/lib/index.js

@@ -14,4 +14,6 @@ import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, }
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };
+import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
+import { CodeBlock } from "./components/codeBlock/CodeBlock";
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, };

package/package.json

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

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

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

package/src/components/badgeCounter/BadgeCounter.tsx

@@ -0,0 +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>
+);

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/codeBlock/CodeBlock.module.css

@@ -0,0 +1,6 @@
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/src/components/codeBlock/CodeBlock.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as styles from "./CodeBlock.module.css";
+
+interface CodeBlockProps {
+  codeBlock: string | JSX.Element;
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({ codeBlock }) => <div className={styles.code}>{codeBlock}</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>
+);

package/src/index.ts

@@ -36,6 +36,8 @@ import {
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
+import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
+import { CodeBlock } from "./components/codeBlock/CodeBlock";
 
 export {
   InputRadio,
@@ -70,4 +72,6 @@ export {
   NotificationPopUp,
   QuoteWrapper,
   Pagination,
+  BadgeCounter,
+  CodeBlock,
 };