@conduction/components 2.2.9 → 2.2.11

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.11: Updated Primary and Secondary topnav to NLDS.
+  - 2.2.10: Added z-index to tooltip.
   - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index.
   - 2.2.8:
     - Updated Pagination to show current page.

package/lib/components/tableWrapper/TableWrapper.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
-interface TableWrapperProps {
-    touchScreen?: boolean;
-}
 export declare const TableWrapper: React.FC<{
     children: React.ReactNode;
-} & TableWrapperProps>;
-export {};
+}>;

package/lib/components/tableWrapper/TableWrapper.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from "react";
 import * as styles from "./TableWrapper.module.css";
-import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-export const TableWrapper = ({ children, touchScreen, }) => {
+export const TableWrapper = ({ children }) => {
     const [canScrollRight, setCanScrollRight] = useState(false);
     const [canScrollLeft, setCanScrollLeft] = useState(false);
     const wrapperRef = React.useRef(null);
@@ -27,5 +26,5 @@ export const TableWrapper = ({ children, touchScreen, }) => {
             setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
         }
     }, []);
-    return (_jsx("div", { className: styles.container, children: _jsxs("div", { onScroll: handleScroll, ref: wrapperRef, className: clsx(touchScreen ? styles.wrapperTouchscreen : styles.wrapper), children: [canScrollLeft && !touchScreen && (_jsx("div", { onClick: handleScrollLeft, className: styles.scrollLeftButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && !touchScreen && (_jsx("div", { onClick: handleScrollRight, className: styles.scrollRightButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }));
+    return (_jsx("div", { className: styles.container, children: _jsxs("div", { onScroll: handleScroll, ref: wrapperRef, className: styles.wrapper, children: [canScrollLeft && (_jsx("div", { onClick: handleScrollLeft, className: styles.scrollLeftButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && (_jsx("div", { onClick: handleScrollRight, className: styles.scrollRightButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }));
 };

package/lib/components/tableWrapper/TableWrapper.module.css

@@ -16,9 +16,7 @@
   position: relative;
 }
 
-.wrapper {
-  overflow-x: scroll;
-}
+.wrapper,
 .wrapperTouchscreen {
   overflow-x: scroll;
 }
@@ -35,9 +33,9 @@
   padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
   padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
   padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
-  border-width:var(--conduction-table-wrapper-scroll-button-border-width) ;
-  border-style:var(--conduction-table-wrapper-scroll-button-border-style) ;
-  border-color:var(--conduction-table-wrapper-scroll-button-border-color) ;
+  border-width: var(--conduction-table-wrapper-scroll-button-border-width);
+  border-style: var(--conduction-table-wrapper-scroll-button-border-style);
+  border-color: var(--conduction-table-wrapper-scroll-button-border-color);
 }
 
 .scrollLeftButton:hover,

package/lib/components/tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from "react";
+import * as React from "react";
 import * as styles from "./Tabs.module.css";
 import { Tabs as RTabs, TabList as RTabList, Tab as RTab, TabPanel as RTabPanel, } from "react-tabs";
 import clsx from "clsx";
@@ -10,8 +10,8 @@ export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { className: s
 Tabs.tabsRole = "Tabs";
 // TabList
 export const TabList = ({ children, ...otherProps }) => {
-    const [canScrollRight, setCanScrollRight] = useState(false);
-    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = React.useState(false);
+    const [canScrollLeft, setCanScrollLeft] = React.useState(false);
     const wrapperRef = React.useRef(null);
     const handleScroll = () => {
         if (wrapperRef.current) {
@@ -27,7 +27,7 @@ export const TabList = ({ children, ...otherProps }) => {
         if (wrapperRef.current)
             wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
     };
-    useEffect(() => {
+    React.useEffect(() => {
         if (wrapperRef.current) {
             setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
         }

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 interface ToolTipProps {
     id: string;
+    layoutClassName?: string;
 }
 /**
  * Implement this ToolTip only once, in a high-level wrapper.

package/lib/components/toolTip/ToolTip.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./ToolTip.module.css";
 import { Tooltip } from "react-tooltip";
+import clsx from "clsx";
 /**
  * Implement this ToolTip only once, in a high-level wrapper.
  * Use the ToolTip anywhere, in any element, by setting the following data props:
@@ -8,6 +9,6 @@ import { Tooltip } from "react-tooltip";
  * data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
  * data-tooltip-content="Hello world!"
  */
-export const ToolTip = ({ id }) => {
-    return _jsx(Tooltip, { className: styles.tooltip, ...{ id } });
+export const ToolTip = ({ id, layoutClassName }) => {
+    return _jsx(Tooltip, { className: clsx(styles.tooltip, layoutClassName, layoutClassName), ...{ id } });
 };

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

@@ -13,6 +13,7 @@
   --conduction-tooltip-border-radius: 0px;
 
   --conduction-tooltip-opacity: 1;
+  --conduction-tooltip-z-index: 9999;
 }
 
 .tooltip {
@@ -30,4 +31,5 @@
   border-radius: var(--conduction-tooltip-border-radius) !important;
 
   opacity: var(--conduction-tooltip-opacity);
+  z-index: var(--conduction-tooltip-z-index);
 }

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

@@ -4,14 +4,31 @@ import * as styles from "./PrimaryTopNav.module.css";
 import clsx from "clsx";
 import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
     const [isOpen, setIsOpen] = React.useState(false);
+    const [subNavIsOpen, setSubNavIsOpen] = React.useState({});
     const handleItemClick = (handleClick) => {
         if (handleClick) {
             handleClick();
             setIsOpen(false);
         }
     };
-    return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: () => handleItemClick(handleClick), className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label), children: [icon, 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: () => handleItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
+    const handleSubItemMenu = (idx, value) => {
+        setSubNavIsOpen({
+            ...subNavIsOpen,
+            [idx]: value,
+        });
+    };
+    const screenWidth = window.innerWidth;
+    React.useEffect(() => {
+        if (screenWidth > 992) {
+            setSubNavIsOpen({});
+        }
+    }, [screenWidth]);
+    return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: () => !subItems
+                            ? handleItemClick(handleClick)
+                            : screenWidth > 992
+                                ? handleItemClick(handleClick)
+                                : handleSubItemMenu(idx, !subNavIsOpen[idx] ?? true), className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon, label, " ", subItems && screenWidth < 992 && (_jsx(FontAwesomeIcon, { className: clsx(styles.toggleIcon, subNavIsOpen[idx] && styles.isOpen), icon: faChevronRight }))] }), subItems && (_jsx("ul", { className: clsx(styles.dropdown, subNavIsOpen[idx] && styles.isOpen), children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
 };

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

@@ -1,16 +1,31 @@
 :root {
-  --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: 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);
-  --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black;
+  --conduction-primary-top-nav-color: #4a4a4a;
+  --conduction-primary-top-nav-background-color: #ffffff;
   --conduction-primary-top-nav-toggle-icon-size: 24px;
   --conduction-primary-top-nav-mobile-logo-padding: 18px;
+
+  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
   --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
-  --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white);
-  --conduction-primary-top-nav-dropdown-background-color-hover: var(--skeleton-color-grey-1);
+
+  /* --conduction-primary-top-nav- */
+
+  /* --conduction-primary-top-nav-current-background-color: #ffffff; */
+  /* --conduction-primary-top-nav-current-color: #4376fc; */
+  /* --conduction-primary-top-nav-current-box-shadow: inset 0 -4px black; */
+  /* --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 black; */
+
+  /* --conduction-primary-top-nav-hover-color: #4376fc; */
+  /* --conduction-primary-top-nav-hover-background-color: #ffffff; */
+  /* --conduction-primary-top-nav-hover-box-shadow: inset 0 -4px black; */
+
+  /* --conduction-primary-top-nav-dropdown-color: #4a4a4a; */
+  /* --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white); */
+  /* --conduction-primary-top-nav-dropdown-border-width: 1px; */
+  /* --conduction-primary-top-nav-dropdown-border-style: solid; */
+  /* --conduction-primary-top-nav-dropdown-border-color: #4376fc; */
+  /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */
+  /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
+  /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
 }
 
 .container {
@@ -28,6 +43,7 @@
   all: unset;
   font-size: var(--conduction-primary-top-nav-toggle-icon-size);
   padding: var(--conduction-primary-top-nav-mobile-logo-padding);
+  color: var(--conduction-primary-top-nav-color);
 }
 
 .menuToggleContainer > .menuToggle:hover {
@@ -75,59 +91,89 @@
 }
 
 .li:hover {
-  background-color: var(--conduction-primary-top-nav-background-color-hover);
+  background-color: var(--conduction-primary-top-nav-hover-background-color);
+  box-shadow: var(--conduction-primary-top-nav-hover-box-shadow, inherit);
 }
 
 .current {
-  background-color: var(--conduction-primary-top-nav-background-color-active);
-  box-shadow: var(--conduction-primary-top-nav-box-shadow-active);
+  background-color: var(--conduction-primary-top-nav-current-background-color);
+  box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+}
+
+.current:hover {
+  box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+}
+.current:hover > .currentLink {
+  color: var(--conduction-primary-top-nav-hover-color) !important;
+}
+
+.currentLink {
+  color: var(--conduction-primary-top-nav-current-color) !important;
 }
 
+.mobileLink {
+  margin-block-end: var(--skeleton-size-md);
+}
 .primary .link {
-  display: block;
   text-decoration: none;
+}
+
+.primary .link:not(.currentLink) {
+  display: block;
   color: var(--conduction-primary-top-nav-color);
 }
 
 .primary .li:hover .link {
-  color: var(--conduction-primary-top-nav-color-hover);
+  color: var(--conduction-primary-top-nav-hover-color);
 }
 
 .link > * {
   margin-inline-end: 8px;
 }
 
-.primary .li:hover .dropdown {
-  display: block;
-  z-index: 1;
-}
-
 .dropdown {
   left: 0;
   top: 100%;
   padding: 0;
   width: 100%;
-  display: block;
+  display: none;
   list-style-type: none;
-  background-color: var(--conduction-primary-top-nav-dropdown-background-color);
-  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
-  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
+  background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
+}
+
+.dropdown.isOpen {
+  display: block;
+}
+
+.li.current {
+  box-shadow: var(--conduction-primary-top-nav-current-mobile-box-shadow);
 }
 
 .primary .dropdown .li .link {
-  color: var(--conduction-primary-top-nav-dropdown-color);
+  color: var(--conduction-primary-top-nav-dropdown-color, var(--conduction-primary-top-nav-color));
 }
 
 .primary .dropdown .li:hover .link {
-  color: var(--conduction-primary-top-nav-dropdown-color-hover);
+  color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color));
 }
 
 .dropdown .li:hover {
-  background: var(--conduction-primary-top-nav-dropdown-background-color-hover);
+  background: var(--conduction-primary-top-nav-dropdown-hover-background-color, var(--conduction-primary-top-nav-hover-background-color));
+  box-shadow: var(--conduction-primary-top-nav-dropdown-hover-box-shadow, var(--conduction-primary-top-nav-hover-box-shadow));
 }
 
 .dropdown > li {
-  padding-inline-start: var(--web-app-size-md);
+  padding-inline-start: var(--skeleton-size-md);
+}
+
+.toggleIcon {
+  margin-inline-start: var(--skeleton-size-xs);
+  transition: transform 100ms ease-in-out;
+}
+
+.toggleIcon.isOpen {
+  transform: rotate(90deg);
+  transition: transform 100ms ease-in-out;
 }
 
 .label {
@@ -159,9 +205,26 @@
   .dropdown {
     position: absolute;
     display: none;
+    border-width: var(--conduction-primary-top-nav-dropdown-border-width);
+    border-style: var(--conduction-primary-top-nav-dropdown-border-style);
+    border-color: var(--conduction-primary-top-nav-dropdown-border-color);
+    border-top: none;
   }
 
   .menuToggleContainer {
     display: none;
   }
+
+  .primary .li:hover .dropdown {
+    display: block;
+    z-index: 1;
+  }
+
+  .mobileLink {
+    margin-block-end: unset;
+  }
+
+  .li.current {
+    box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+  }
 }

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

@@ -1,13 +1,18 @@
 :root {
-  --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
-  --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: rgba(0, 0, 0, 0.1);
+  --conduction-secondary-top-nav-background-color: #ffffff;
+  --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
   --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
-  --conduction-secondary-top-nav-color-active: rgba(0, 0, 0, 0.1);
-  --conduction-secondary-top-nav-box-shadow-active: inset 0 -4px black;
+
+  --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
   --conduction-secondary-top-nav-item-icon-margin: var(--skeleton-size-2x);
+
+  /* --conduction-secondary-top-nav-curent-color: rgba(0, 0, 0, 0.1);
+  --conduction-secondary-top-nav-current-background-color: #ffffff;
+  --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px black;
+
+  --conduction-secondary-top-nav-hover-color: #4376fc;
+  --conduction-secondary-top-nav-hover-background-color: rgba(0, 0, 0, 0.1); */
 }
 
 .secondary:hover {
@@ -31,12 +36,16 @@
 }
 
 .li:hover {
-  background-color: var(--conduction-secondary-top-nav-background-color-hover);
+  background-color: var(--conduction-secondary-top-nav-hover-background-color);
 }
 
 .current {
-  background-color: var(--conduction-secondary-top-nav-color-active);
-  box-shadow: var(--conduction-secondary-top-nav-box-shadow-active);
+  background-color: var(--conduction-secondary-top-nav-current-background-color);
+  box-shadow: var(--conduction-secondary-top-nav-current-box-shadow);
+}
+
+.currentLink {
+  color: var(--conduction-primary-top-nav-current-color) !important;
 }
 
 .secondary {
@@ -46,6 +55,10 @@
   background-color: var(--conduction-secondary-top-nav-background-color);
 }
 
+.secondary .li:hover .link {
+  color: var(--conduction-secondary-top-nav-hover-color);
+  display: block;
+}
 .secondary .link {
   color: var(--conduction-secondary-top-nav-color);
   display: block;

package/package.json

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

package/src/components/tableWrapper/TableWrapper.module.css

@@ -16,9 +16,7 @@
   position: relative;
 }
 
-.wrapper {
-  overflow-x: scroll;
-}
+.wrapper,
 .wrapperTouchscreen {
   overflow-x: scroll;
 }
@@ -35,9 +33,9 @@
   padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
   padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
   padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
-  border-width:var(--conduction-table-wrapper-scroll-button-border-width) ;
-  border-style:var(--conduction-table-wrapper-scroll-button-border-style) ;
-  border-color:var(--conduction-table-wrapper-scroll-button-border-color) ;
+  border-width: var(--conduction-table-wrapper-scroll-button-border-width);
+  border-style: var(--conduction-table-wrapper-scroll-button-border-style);
+  border-color: var(--conduction-table-wrapper-scroll-button-border-color);
 }
 
 .scrollLeftButton:hover,

package/src/components/tableWrapper/TableWrapper.tsx

@@ -1,17 +1,9 @@
 import React, { useState, useEffect } from "react";
 import * as styles from "./TableWrapper.module.css";
-import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 
-interface TableWrapperProps {
-  touchScreen?: boolean;
-}
-
-export const TableWrapper: React.FC<{ children: React.ReactNode } & TableWrapperProps> = ({
-  children,
-  touchScreen,
-}) => {
+export const TableWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [canScrollRight, setCanScrollRight] = useState(false);
   const [canScrollLeft, setCanScrollLeft] = useState(false);
 
@@ -42,12 +34,8 @@ export const TableWrapper: React.FC<{ children: React.ReactNode } & TableWrapper
 
   return (
     <div className={styles.container}>
-      <div
-        onScroll={handleScroll}
-        ref={wrapperRef}
-        className={clsx(touchScreen ? styles.wrapperTouchscreen : styles.wrapper)}
-      >
-        {canScrollLeft && !touchScreen && (
+      <div onScroll={handleScroll} ref={wrapperRef} className={styles.wrapper}>
+        {canScrollLeft && (
           <div onClick={handleScrollLeft} className={styles.scrollLeftButton}>
             <div className={styles.scrollButton}>
               <FontAwesomeIcon icon={faChevronLeft} />
@@ -55,7 +43,7 @@ export const TableWrapper: React.FC<{ children: React.ReactNode } & TableWrapper
           </div>
         )}
         {children}
-        {canScrollRight && !touchScreen && (
+        {canScrollRight && (
           <div onClick={handleScrollRight} className={styles.scrollRightButton}>
             <div className={styles.scrollButton}>
               <FontAwesomeIcon icon={faChevronRight} />

package/src/components/tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import * as React from "react";
 import * as styles from "./Tabs.module.css";
 import {
   Tabs as RTabs,
@@ -26,8 +26,8 @@ Tabs.tabsRole = "Tabs";
 
 // TabList
 export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ...otherProps }) => {
-  const [canScrollRight, setCanScrollRight] = useState(false);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = React.useState(false);
+  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
 
   const wrapperRef = React.useRef<HTMLDivElement | null>(null);
 
@@ -48,7 +48,7 @@ export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ..
     if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (wrapperRef.current) {
       setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
     }

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

@@ -13,6 +13,7 @@
   --conduction-tooltip-border-radius: 0px;
 
   --conduction-tooltip-opacity: 1;
+  --conduction-tooltip-z-index: 9999;
 }
 
 .tooltip {
@@ -30,4 +31,5 @@
   border-radius: var(--conduction-tooltip-border-radius) !important;
 
   opacity: var(--conduction-tooltip-opacity);
+  z-index: var(--conduction-tooltip-z-index);
 }

package/src/components/toolTip/ToolTip.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import * as styles from "./ToolTip.module.css";
 import { Tooltip } from "react-tooltip";
+import clsx from "clsx";
 
 interface ToolTipProps {
   id: string;
+  layoutClassName?: string;
 }
 
 /**
@@ -14,6 +16,6 @@ interface ToolTipProps {
  * data-tooltip-content="Hello world!"
  */
 
-export const ToolTip: React.FC<ToolTipProps> = ({ id }) => {
-  return <Tooltip className={styles.tooltip} {...{ id }} />;
+export const ToolTip: React.FC<ToolTipProps> = ({ id, layoutClassName }) => {
+  return <Tooltip className={clsx(styles.tooltip, layoutClassName, layoutClassName)} {...{ id }} />;
 };

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

@@ -1,16 +1,31 @@
 :root {
-  --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: 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);
-  --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black;
+  --conduction-primary-top-nav-color: #4a4a4a;
+  --conduction-primary-top-nav-background-color: #ffffff;
   --conduction-primary-top-nav-toggle-icon-size: 24px;
   --conduction-primary-top-nav-mobile-logo-padding: 18px;
+
+  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
   --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
-  --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white);
-  --conduction-primary-top-nav-dropdown-background-color-hover: var(--skeleton-color-grey-1);
+
+  /* --conduction-primary-top-nav- */
+
+  /* --conduction-primary-top-nav-current-background-color: #ffffff; */
+  /* --conduction-primary-top-nav-current-color: #4376fc; */
+  /* --conduction-primary-top-nav-current-box-shadow: inset 0 -4px black; */
+  /* --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 black; */
+
+  /* --conduction-primary-top-nav-hover-color: #4376fc; */
+  /* --conduction-primary-top-nav-hover-background-color: #ffffff; */
+  /* --conduction-primary-top-nav-hover-box-shadow: inset 0 -4px black; */
+
+  /* --conduction-primary-top-nav-dropdown-color: #4a4a4a; */
+  /* --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white); */
+  /* --conduction-primary-top-nav-dropdown-border-width: 1px; */
+  /* --conduction-primary-top-nav-dropdown-border-style: solid; */
+  /* --conduction-primary-top-nav-dropdown-border-color: #4376fc; */
+  /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */
+  /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
+  /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
 }
 
 .container {
@@ -28,6 +43,7 @@
   all: unset;
   font-size: var(--conduction-primary-top-nav-toggle-icon-size);
   padding: var(--conduction-primary-top-nav-mobile-logo-padding);
+  color: var(--conduction-primary-top-nav-color);
 }
 
 .menuToggleContainer > .menuToggle:hover {
@@ -75,59 +91,89 @@
 }
 
 .li:hover {
-  background-color: var(--conduction-primary-top-nav-background-color-hover);
+  background-color: var(--conduction-primary-top-nav-hover-background-color);
+  box-shadow: var(--conduction-primary-top-nav-hover-box-shadow, inherit);
 }
 
 .current {
-  background-color: var(--conduction-primary-top-nav-background-color-active);
-  box-shadow: var(--conduction-primary-top-nav-box-shadow-active);
+  background-color: var(--conduction-primary-top-nav-current-background-color);
+  box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+}
+
+.current:hover {
+  box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+}
+.current:hover > .currentLink {
+  color: var(--conduction-primary-top-nav-hover-color) !important;
+}
+
+.currentLink {
+  color: var(--conduction-primary-top-nav-current-color) !important;
 }
 
+.mobileLink {
+  margin-block-end: var(--skeleton-size-md);
+}
 .primary .link {
-  display: block;
   text-decoration: none;
+}
+
+.primary .link:not(.currentLink) {
+  display: block;
   color: var(--conduction-primary-top-nav-color);
 }
 
 .primary .li:hover .link {
-  color: var(--conduction-primary-top-nav-color-hover);
+  color: var(--conduction-primary-top-nav-hover-color);
 }
 
 .link > * {
   margin-inline-end: 8px;
 }
 
-.primary .li:hover .dropdown {
-  display: block;
-  z-index: 1;
-}
-
 .dropdown {
   left: 0;
   top: 100%;
   padding: 0;
   width: 100%;
-  display: block;
+  display: none;
   list-style-type: none;
-  background-color: var(--conduction-primary-top-nav-dropdown-background-color);
-  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
-  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
+  background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
+}
+
+.dropdown.isOpen {
+  display: block;
+}
+
+.li.current {
+  box-shadow: var(--conduction-primary-top-nav-current-mobile-box-shadow);
 }
 
 .primary .dropdown .li .link {
-  color: var(--conduction-primary-top-nav-dropdown-color);
+  color: var(--conduction-primary-top-nav-dropdown-color, var(--conduction-primary-top-nav-color));
 }
 
 .primary .dropdown .li:hover .link {
-  color: var(--conduction-primary-top-nav-dropdown-color-hover);
+  color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color));
 }
 
 .dropdown .li:hover {
-  background: var(--conduction-primary-top-nav-dropdown-background-color-hover);
+  background: var(--conduction-primary-top-nav-dropdown-hover-background-color, var(--conduction-primary-top-nav-hover-background-color));
+  box-shadow: var(--conduction-primary-top-nav-dropdown-hover-box-shadow, var(--conduction-primary-top-nav-hover-box-shadow));
 }
 
 .dropdown > li {
-  padding-inline-start: var(--web-app-size-md);
+  padding-inline-start: var(--skeleton-size-md);
+}
+
+.toggleIcon {
+  margin-inline-start: var(--skeleton-size-xs);
+  transition: transform 100ms ease-in-out;
+}
+
+.toggleIcon.isOpen {
+  transform: rotate(90deg);
+  transition: transform 100ms ease-in-out;
 }
 
 .label {
@@ -159,9 +205,26 @@
   .dropdown {
     position: absolute;
     display: none;
+    border-width: var(--conduction-primary-top-nav-dropdown-border-width);
+    border-style: var(--conduction-primary-top-nav-dropdown-border-style);
+    border-color: var(--conduction-primary-top-nav-dropdown-border-color);
+    border-top: none;
   }
 
   .menuToggleContainer {
     display: none;
   }
+
+  .primary .li:hover .dropdown {
+    display: block;
+    z-index: 1;
+  }
+
+  .mobileLink {
+    margin-block-end: unset;
+  }
+
+  .li.current {
+    box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+  }
 }

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

@@ -3,7 +3,7 @@ import * as styles from "./PrimaryTopNav.module.css";
 import clsx from "clsx";
 import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 
 interface ITopNavItem {
   label: string;
@@ -26,6 +26,7 @@ export interface TopNavProps {
 
 export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [subNavIsOpen, setSubNavIsOpen] = React.useState({});
 
   const handleItemClick = (handleClick?: () => any) => {
     if (handleClick) {
@@ -35,6 +36,20 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
     }
   };
 
+  const handleSubItemMenu = (idx: number, value: boolean) => {
+    setSubNavIsOpen({
+      ...subNavIsOpen,
+      [idx as keyof typeof subNavIsOpen]: value,
+    });
+  };
+
+  const screenWidth = window.innerWidth;
+
+  React.useEffect(() => {
+    if (screenWidth > 992) {
+      setSubNavIsOpen({});
+    }
+  }, [screenWidth]);
   return (
     <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
       <div className={styles.menuToggleContainer}>
@@ -49,24 +64,43 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
         <ul className={styles.ul}>
           {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
             <li
-              onClick={() => handleItemClick(handleClick)}
+              onClick={() =>
+                !subItems
+                  ? handleItemClick(handleClick)
+                  : screenWidth > 992
+                  ? handleItemClick(handleClick)
+                  : handleSubItemMenu(idx, !subNavIsOpen[idx as keyof typeof subNavIsOpen] ?? true)
+              }
               className={clsx(styles.li, current && styles.current)}
               key={idx}
             >
-              <Link className={clsx(styles.link, styles.label)}>
+              <Link
+                className={clsx(
+                  styles.link,
+                  styles.label,
+                  subItems && styles.mobileLink,
+                  current && styles.currentLink,
+                )}
+              >
                 {icon}
-                {label}
+                {label}{" "}
+                {subItems && screenWidth < 992 && (
+                  <FontAwesomeIcon
+                    className={clsx(styles.toggleIcon, subNavIsOpen[idx as keyof typeof subNavIsOpen] && styles.isOpen)}
+                    icon={faChevronRight}
+                  />
+                )}
               </Link>
 
               {subItems && (
-                <ul className={styles.dropdown}>
+                <ul className={clsx(styles.dropdown, subNavIsOpen[idx as keyof typeof subNavIsOpen] && styles.isOpen)}>
                   {subItems.map(({ label, icon, current, handleClick }, idx) => (
                     <li
                       key={idx}
                       className={clsx(styles.li, current && styles.current)}
                       onClick={() => handleItemClick(handleClick)}
                     >
-                      <Link className={clsx(styles.link, styles.label)}>
+                      <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
                         {icon}
                         {label}
                       </Link>

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

@@ -1,13 +1,18 @@
 :root {
-  --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
-  --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: rgba(0, 0, 0, 0.1);
+  --conduction-secondary-top-nav-background-color: #ffffff;
+  --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
   --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
-  --conduction-secondary-top-nav-color-active: rgba(0, 0, 0, 0.1);
-  --conduction-secondary-top-nav-box-shadow-active: inset 0 -4px black;
+
+  --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
   --conduction-secondary-top-nav-item-icon-margin: var(--skeleton-size-2x);
+
+  /* --conduction-secondary-top-nav-curent-color: rgba(0, 0, 0, 0.1);
+  --conduction-secondary-top-nav-current-background-color: #ffffff;
+  --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px black;
+
+  --conduction-secondary-top-nav-hover-color: #4376fc;
+  --conduction-secondary-top-nav-hover-background-color: rgba(0, 0, 0, 0.1); */
 }
 
 .secondary:hover {
@@ -31,12 +36,16 @@
 }
 
 .li:hover {
-  background-color: var(--conduction-secondary-top-nav-background-color-hover);
+  background-color: var(--conduction-secondary-top-nav-hover-background-color);
 }
 
 .current {
-  background-color: var(--conduction-secondary-top-nav-color-active);
-  box-shadow: var(--conduction-secondary-top-nav-box-shadow-active);
+  background-color: var(--conduction-secondary-top-nav-current-background-color);
+  box-shadow: var(--conduction-secondary-top-nav-current-box-shadow);
+}
+
+.currentLink {
+  color: var(--conduction-primary-top-nav-current-color) !important;
 }
 
 .secondary {
@@ -46,6 +55,10 @@
   background-color: var(--conduction-secondary-top-nav-background-color);
 }
 
+.secondary .li:hover .link {
+  color: var(--conduction-secondary-top-nav-hover-color);
+  display: block;
+}
 .secondary .link {
   color: var(--conduction-secondary-top-nav-color);
   display: block;