@conduction/components 2.2.38 → 2.2.40

package/README.md

@@ -4,6 +4,12 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.40:
+    - Updated DownloadCard to only accept fontawesome icons.
+    - Removed tooltip from PrimaryTopNav component and updated dropdown.
+  - 2.2.39:
+    - Updated PrimaryTopNav component to include tooltip and better dropdown.
+    - Updated Logo component to have navbar option.
   - 2.2.38: Updated DownloadCard to show only one icon.
   - 2.2.37: Updated DownloadCard to include tooltip and Removed opacity token from Tooltip the fix bug.
   - 2.2.35 & 2.2.36:

package/lib/components/card/downloadCard/DownloadCard.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 interface DownloadCardProps {
     label: string;
     size: string;
@@ -7,7 +8,7 @@ interface DownloadCardProps {
         id: string;
         tooltip: string;
     };
-    icon?: JSX.Element;
+    icon?: IconDefinition;
     layoutClassName?: string;
     handleClick: () => any;
 }

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

@@ -43,5 +43,5 @@ export const DownloadCard = ({ icon, label, size, type, labelTooltip, layoutClas
                 return faDatabase;
         }
     };
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsx("div", { className: styles.icon, children: icon ?? _jsx(FontAwesomeIcon, { icon: getIconFromType(type) }) }), _jsxs("div", { className: styles.content, children: [_jsx(Heading3, { "data-tooltip-id": labelTooltip && labelTooltip.id, "data-tooltip-content": labelTooltip && labelTooltip.tooltip, className: styles.title, children: label }), _jsxs("div", { children: ["(", _.toUpper(type), size && `, ${size}kB`, ")"] })] }), _jsxs(Link, { className: styles.link, href: "", onClick: (e) => onClick(e), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " Download"] })] }));
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsx("div", { className: styles.icon, children: _jsx(FontAwesomeIcon, { icon: icon ?? getIconFromType(type) }) }), _jsxs("div", { className: styles.content, children: [_jsx(Heading3, { "data-tooltip-id": labelTooltip && labelTooltip.id, "data-tooltip-content": labelTooltip && labelTooltip.tooltip, className: styles.title, children: label }), _jsxs("div", { children: ["(", _.toUpper(type), size && `, ${size}kB`, ")"] })] }), _jsxs(Link, { className: styles.link, href: "", onClick: (e) => onClick(e), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " Download"] })] }));
 };

package/lib/components/logo/Logo.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 interface LogoProps {
-    variant?: "header" | "footer";
+    variant?: "header" | "footer" | "navbar";
     onClick?: () => any;
     layoutClassName?: string;
 }

package/lib/components/logo/Logo.module.css

@@ -5,7 +5,11 @@
 
   --conduction-logo-footer-inline-size: 330px;
   --conduction-logo-footer-block-size: 60px;
-  --conduction-logo-footer-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+  --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
+
+  --conduction-logo-navbar-inline-size: 150px;
+  --conduction-logo-navbar-block-size: 40px;
+  --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
 }
 
 .container {
@@ -26,6 +30,12 @@
   background-image: var(--conduction-logo-footer-background-image);
 }
 
+.container.navbar {
+  inline-size: var(--conduction-logo-navbar-inline-size);
+  block-size: var(--conduction-logo-navbar-block-size);
+  background-image: var(--conduction-logo-navbar-background-image);
+}
+
 .container.clickable:hover {
   cursor: pointer;
 }

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

@@ -19,5 +19,5 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
         setIsOpen(false);
         handleClick();
     };
-    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: handleClick, 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 && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleSubItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
+    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: handleClick, className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon && icon, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow]), children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleSubItemClick(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

@@ -4,7 +4,7 @@
   --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-padding: 18px;
   --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
   /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
 
@@ -103,6 +103,7 @@
 .current:hover {
   box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
 }
+
 .current:hover > .currentLink {
   color: var(--conduction-primary-top-nav-hover-color) !important;
 }
@@ -111,8 +112,12 @@
   color: var(--conduction-primary-top-nav-current-color) !important;
 }
 
+.currentLink svg path {
+  fill: var(--conduction-primary-top-nav-current-color) !important;
+}
+
 .mobileLink {
-  margin-block-end: var(--skeleton-size-md);
+  margin-block-end: 18px;
 }
 .primary .link {
   text-decoration: none;
@@ -128,10 +133,18 @@
   color: var(--conduction-primary-top-nav-color);
 }
 
+.primary .link:not(.currentLink) svg path {
+  fill: var(--conduction-primary-top-nav-color);
+}
+
 .primary .li:hover .link {
   color: var(--conduction-primary-top-nav-hover-color);
 }
 
+.primary .li:hover svg path {
+  fill: var(--conduction-primary-top-nav-hover-color);
+}
+
 .link > * {
   margin-inline-end: 8px;
 }
@@ -144,6 +157,15 @@
   display: none;
   list-style-type: none;
   background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
+  width: fit-content;
+  max-width: 200px;
+}
+
+.dropdownOverflow {
+  display: none;
+  max-height: 430px;
+  overflow-y: scroll;
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .dropdown.isOpen {
@@ -168,7 +190,7 @@
 }
 
 .dropdown > li {
-  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-start: 18px;
 }
 
 .toggleIcon {

package/package.json

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

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

@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+  IconDefinition,
   faDatabase,
   faDownload,
   faFileAudio,
@@ -24,7 +25,7 @@ interface DownloadCardProps {
     id: string;
     tooltip: string;
   };
-  icon?: JSX.Element;
+  icon?: IconDefinition;
   layoutClassName?: string;
   handleClick: () => any;
 }
@@ -79,7 +80,7 @@ export const DownloadCard = ({
 
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
-      <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
+      <div className={styles.icon}>{<FontAwesomeIcon icon={icon ?? getIconFromType(type)} />}</div>
       <div className={styles.content}>
         <Heading3
           data-tooltip-id={labelTooltip && labelTooltip.id}

package/src/components/logo/Logo.module.css

@@ -5,7 +5,11 @@
 
   --conduction-logo-footer-inline-size: 330px;
   --conduction-logo-footer-block-size: 60px;
-  --conduction-logo-footer-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+  --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
+
+  --conduction-logo-navbar-inline-size: 150px;
+  --conduction-logo-navbar-block-size: 40px;
+  --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
 }
 
 .container {
@@ -26,6 +30,12 @@
   background-image: var(--conduction-logo-footer-background-image);
 }
 
+.container.navbar {
+  inline-size: var(--conduction-logo-navbar-inline-size);
+  block-size: var(--conduction-logo-navbar-block-size);
+  background-image: var(--conduction-logo-navbar-background-image);
+}
+
 .container.clickable:hover {
   cursor: pointer;
 }

package/src/components/logo/Logo.tsx

@@ -3,7 +3,7 @@ import * as styles from "./Logo.module.css";
 import clsx from "clsx";
 
 interface LogoProps {
-  variant?: "header" | "footer";
+  variant?: "header" | "footer" | "navbar";
   onClick?: () => any;
   layoutClassName?: string;
 }

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

@@ -4,7 +4,7 @@
   --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-padding: 18px;
   --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
   /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
 
@@ -103,6 +103,7 @@
 .current:hover {
   box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
 }
+
 .current:hover > .currentLink {
   color: var(--conduction-primary-top-nav-hover-color) !important;
 }
@@ -111,8 +112,12 @@
   color: var(--conduction-primary-top-nav-current-color) !important;
 }
 
+.currentLink svg path {
+  fill: var(--conduction-primary-top-nav-current-color) !important;
+}
+
 .mobileLink {
-  margin-block-end: var(--skeleton-size-md);
+  margin-block-end: 18px;
 }
 .primary .link {
   text-decoration: none;
@@ -128,10 +133,18 @@
   color: var(--conduction-primary-top-nav-color);
 }
 
+.primary .link:not(.currentLink) svg path {
+  fill: var(--conduction-primary-top-nav-color);
+}
+
 .primary .li:hover .link {
   color: var(--conduction-primary-top-nav-hover-color);
 }
 
+.primary .li:hover svg path {
+  fill: var(--conduction-primary-top-nav-hover-color);
+}
+
 .link > * {
   margin-inline-end: 8px;
 }
@@ -144,6 +157,15 @@
   display: none;
   list-style-type: none;
   background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
+  width: fit-content;
+  max-width: 200px;
+}
+
+.dropdownOverflow {
+  display: none;
+  max-height: 430px;
+  overflow-y: scroll;
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .dropdown.isOpen {
@@ -168,7 +190,7 @@
 }
 
 .dropdown > li {
-  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-start: 18px;
 }
 
 .toggleIcon {

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

@@ -103,13 +103,13 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
                   current && styles.currentLink,
                 )}
               >
-                {icon}
+                {icon && icon}
                 {label}{" "}
                 {subItems && isMobile && <FontAwesomeIcon className={styles.toggleIcon} icon={faChevronRight} />}
               </Link>
 
               {subItems && (
-                <ul className={styles.dropdown}>
+                <ul className={clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow])}>
                   {subItems.map(({ label, icon, current, handleClick }, idx) => (
                     <li
                       key={idx}