@conduction/components 2.0.7 → 2.0.8

package/README.md

@@ -4,10 +4,14 @@
 
 - **Version 2**
 
-  - 2.0.7: 
+  - 2.0.8: 
+    - added new Tooltip component using React-tooltip.
+    - added active status to PrimaryTopNav
+    - added active status to SecondaryTopNav
+  - 2.0.7:
     - Added new BadgeCounter component.
     - Added CodeBlock component.
-  - 2.0.6: 
+  - 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;

package/lib/components/toolTip/ToolTip.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import ReactTooltip from "react-tooltip";
+interface ToolTipProps {
+    children: React.ReactNode;
+    tooltip: string;
+    layoutClassName?: string;
+}
+export declare const ToolTip: React.FC<ToolTipProps>;
+export { ReactTooltip };

package/lib/components/toolTip/ToolTip.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactTooltip from "react-tooltip";
+import * as styles from "./ToolTip.module.css";
+export const ToolTip = ({ children, layoutClassName, tooltip }) => {
+    return (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { "data-tip": tooltip, className: layoutClassName && layoutClassName, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid" })] }));
+};
+export { ReactTooltip };

package/lib/components/toolTip/ToolTip.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  display: inline-block;
+  position: relative;
+}

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts

@@ -2,10 +2,12 @@ import * as React from "react";
 interface ITopNavItem {
     label: string;
     icon?: JSX.Element;
+    current?: boolean;
     handleClick?: () => any;
     subItems?: {
         label: string;
         icon?: JSX.Element;
+        current?: boolean;
         handleClick?: () => any;
     }[];
 }

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js

@@ -3,5 +3,5 @@ import { Link } from "@gemeente-denhaag/components-react";
 import * as styles from "./PrimaryTopNav.module.css";
 import clsx from "clsx";
 export const PrimaryTopNav = ({ items, layoutClassName }) => {
-    return (_jsx("div", { className: clsx(styles.primary, layoutClassName && layoutClassName), children: _jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick, subItems }, idx) => (_jsxs("li", { className: styles.li, children: [_jsx("div", { onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }))] }, idx))) }) }) }));
+    return (_jsx("div", { className: clsx(styles.primary, layoutClassName && layoutClassName), children: _jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { className: clsx(styles.li, current && styles.current), children: [_jsx("div", { onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }))] }, idx))) }) }) }));
 };

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -2,8 +2,15 @@
   --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
   --conduction-primary-top-nav-color: var(--skeleton-color-white);
   --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
-  --conduction-primary-top-nav-background-color-hover: var(--skeleton-color-secondary-5);
+  --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
   --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
+  --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
+}
+
+.primary {
+  font-weight: 500;
+  width: fit-content;
+  background-color: var(--conduction-primary-top-nav-background-color);
 }
 
 .primary:hover {
@@ -23,10 +30,12 @@
   position: relative;
 }
 
-.primary {
-  font-weight: 500;
-  width: fit-content;
-  background-color: var(--conduction-primary-top-nav-background-color);
+.li:hover {
+  background-color: var(--conduction-primary-top-nav-background-color-hover);
+}
+
+.current {
+  background-color: var(--conduction-primary-top-nav-background-color-active);
 }
 
 .primary .link {
@@ -38,10 +47,6 @@
   padding-block-end: var(--conduction-primary-top-nav-item-padding);
 }
 
-.primary .li:hover {
-  background-color: var(--conduction-primary-top-nav-background-color-hover);
-}
-
 .primary .li:hover .dropdown {
   display: block;
   z-index: 1;

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.d.ts

@@ -3,6 +3,7 @@ interface TopNavProps {
     items: {
         label: string;
         icon?: JSX.Element;
+        current?: boolean;
         handleClick: () => any;
     }[];
     layoutClassName?: string;

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.js

@@ -3,5 +3,5 @@ import * as styles from "./SecondaryTopNav.module.css";
 import { Link } from "@gemeente-denhaag/components-react";
 import clsx from "clsx";
 export const SecondaryTopNav = ({ items, layoutClassName }) => {
-    return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
+    return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
 };

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.module.css

@@ -3,8 +3,9 @@
   --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
   --conduction-secondary-top-nav-color: var(--skeleton-color-white);
   --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5);
-  --conduction-secondary-top-nav-background-color-hover: var(--skeleton-color-secondary-3);
+  --conduction-secondary-top-nav-background-color-hover: rgba(0, 0, 0, 0.1);
   --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
+  --conduction-secondary-top-nav-color-active: rgba(0, 0, 0, 0.1);
 }
 
 .secondary:hover {
@@ -27,6 +28,14 @@
   padding-block-end: var(--conduction-secondary-top-nav-item-padding);
 }
 
+.li:hover {
+  background-color: var(--conduction-secondary-top-nav-background-color-hover);
+}
+
+.current {
+  background-color: var(--conduction-secondary-top-nav-color-active);
+}
+
 .secondary {
   font-weight: var(--conduction-secondary-top-nav-font-weight);
   width: fit-content;
@@ -37,7 +46,3 @@
 .secondary .link {
   color: var(--conduction-secondary-top-nav-color);
 }
-
-.secondary .li:hover {
-  background-color: var(--conduction-secondary-top-nav-background-color-hover);
-}

package/lib/index.d.ts

@@ -23,4 +23,5 @@ 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, 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, };
+import { ToolTip } from "./components/toolTip/ToolTip";
+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, ToolTip, };

package/lib/index.js

@@ -16,4 +16,5 @@ 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, 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, };
+import { ToolTip } from "./components/toolTip/ToolTip";
+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, ToolTip, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -30,7 +30,8 @@
     "gatsby": "^4.11.1",
     "react": "^17.0.1",
     "react-hook-form": "7.29.0",
-    "react-select": "5.3.2"
+    "react-select": "5.3.2",
+    "react-tooltip": "^4.2.21"
   },
   "devDependencies": {
     "@types/node": "^17.0.23",

package/src/components/toolTip/ToolTip.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  display: inline-block;
+  position: relative;
+}

package/src/components/toolTip/ToolTip.tsx

@@ -0,0 +1,24 @@
+import _ from "lodash";
+import * as React from "react";
+import ReactTooltip from "react-tooltip";
+import * as styles from "./ToolTip.module.css";
+
+interface ToolTipProps {
+  children: React.ReactNode;
+  tooltip: string;
+  layoutClassName?: string;
+}
+
+export const ToolTip: React.FC<ToolTipProps> = ({ children, layoutClassName, tooltip }) => {
+  return (
+    <div className={styles.wrapper}>
+      <div data-tip={tooltip} className={layoutClassName && layoutClassName}>
+        {children}
+      </div>
+
+      <ReactTooltip place={"top"} type={"dark"} effect={"solid"} />
+    </div>
+  );
+};
+
+export { ReactTooltip };

package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -2,8 +2,15 @@
   --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
   --conduction-primary-top-nav-color: var(--skeleton-color-white);
   --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
-  --conduction-primary-top-nav-background-color-hover: var(--skeleton-color-secondary-5);
+  --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
   --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
+  --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
+}
+
+.primary {
+  font-weight: 500;
+  width: fit-content;
+  background-color: var(--conduction-primary-top-nav-background-color);
 }
 
 .primary:hover {
@@ -23,10 +30,12 @@
   position: relative;
 }
 
-.primary {
-  font-weight: 500;
-  width: fit-content;
-  background-color: var(--conduction-primary-top-nav-background-color);
+.li:hover {
+  background-color: var(--conduction-primary-top-nav-background-color-hover);
+}
+
+.current {
+  background-color: var(--conduction-primary-top-nav-background-color-active);
 }
 
 .primary .link {
@@ -38,10 +47,6 @@
   padding-block-end: var(--conduction-primary-top-nav-item-padding);
 }
 
-.primary .li:hover {
-  background-color: var(--conduction-primary-top-nav-background-color-hover);
-}
-
 .primary .li:hover .dropdown {
   display: block;
   z-index: 1;

package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx

@@ -6,10 +6,12 @@ import clsx from "clsx";
 interface ITopNavItem {
   label: string;
   icon?: JSX.Element;
+  current?: boolean;
   handleClick?: () => any;
   subItems?: {
     label: string;
     icon?: JSX.Element;
+    current?: boolean;
     handleClick?: () => any;
   }[];
 }
@@ -24,8 +26,8 @@ export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName })
     <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
       <nav className={styles.primary}>
         <ul className={styles.ul}>
-          {items.map(({ label, icon, handleClick, subItems }, idx) => (
-            <li className={styles.li} key={idx}>
+          {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
+            <li className={clsx(styles.li, current && styles.current)} key={idx}>
               <div onClick={handleClick}>
                 <Link className={styles.link} icon={icon} iconAlign="start">
                   {label}
@@ -34,8 +36,8 @@ export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName })
 
               {subItems && (
                 <ul className={styles.dropdown}>
-                  {subItems.map(({ label, icon, handleClick }, idx) => (
-                    <li key={idx} className={styles.li} onClick={handleClick}>
+                  {subItems.map(({ label, icon, current, handleClick }, idx) => (
+                    <li key={idx} className={clsx(styles.li, current && styles.current)} onClick={handleClick}>
                       <Link className={styles.link} icon={icon} iconAlign="start">
                         {label}
                       </Link>

package/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css

@@ -3,8 +3,9 @@
   --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
   --conduction-secondary-top-nav-color: var(--skeleton-color-white);
   --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5);
-  --conduction-secondary-top-nav-background-color-hover: var(--skeleton-color-secondary-3);
+  --conduction-secondary-top-nav-background-color-hover: rgba(0, 0, 0, 0.1);
   --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
+  --conduction-secondary-top-nav-color-active: rgba(0, 0, 0, 0.1);
 }
 
 .secondary:hover {
@@ -27,6 +28,14 @@
   padding-block-end: var(--conduction-secondary-top-nav-item-padding);
 }
 
+.li:hover {
+  background-color: var(--conduction-secondary-top-nav-background-color-hover);
+}
+
+.current {
+  background-color: var(--conduction-secondary-top-nav-color-active);
+}
+
 .secondary {
   font-weight: var(--conduction-secondary-top-nav-font-weight);
   width: fit-content;
@@ -37,7 +46,3 @@
 .secondary .link {
   color: var(--conduction-secondary-top-nav-color);
 }
-
-.secondary .li:hover {
-  background-color: var(--conduction-secondary-top-nav-background-color-hover);
-}

package/src/components/topNav/secondaryTopNav/SecondaryTopNav.tsx

@@ -4,7 +4,7 @@ import { Link } from "@gemeente-denhaag/components-react";
 import clsx from "clsx";
 
 interface TopNavProps {
-  items: { label: string; icon?: JSX.Element; handleClick: () => any }[];
+  items: { label: string; icon?: JSX.Element; current?: boolean; handleClick: () => any }[];
   layoutClassName?: string;
 }
 
@@ -13,8 +13,8 @@ export const SecondaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName
     <div className={clsx(styles.secondary, layoutClassName && layoutClassName)}>
       <nav>
         <ul className={styles.ul}>
-          {items.map(({ label, icon, handleClick }, idx) => (
-            <li className={styles.li} key={idx} onClick={handleClick}>
+          {items.map(({ label, icon, current, handleClick }, idx) => (
+            <li className={clsx(styles.li, current && styles.current)} key={idx} onClick={handleClick}>
               <Link className={styles.link} icon={icon} iconAlign="start">
                 {label}
               </Link>

package/src/index.ts

@@ -38,6 +38,7 @@ 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";
+import { ToolTip } from "./components/toolTip/ToolTip";
 
 export {
   InputRadio,
@@ -74,4 +75,5 @@ export {
   Pagination,
   BadgeCounter,
   CodeBlock,
+  ToolTip,
 };