Merge pull request #114 from ConductionNL/development

Development to Main, week 40
ConductionNL · Oct 16, 2023 · 1ab61a7 · 1ab61a7
2 parents 8afdbb1 + adf42a3
commit 1ab61a7
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,7 @@
 
 - **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:

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

diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css b/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);
+  }
 }
diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx b/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>

diff --git a/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css b/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;