From 6de83f82bab417f0f557fe57ce9f7364b1e17e02 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 1 Dec 2023 15:23:40 +0100 Subject: [PATCH] updated topnav and logo --- README.md | 3 +++ package.json | 2 +- src/components/logo/Logo.module.css | 12 ++++++++- src/components/logo/Logo.tsx | 2 +- .../primaryTopNav/PrimaryTopNav.module.css | 26 ++++++++++++++++--- .../topNav/primaryTopNav/PrimaryTopNav.tsx | 16 ++++++++---- 6 files changed, 50 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index b716181..42306a9 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,9 @@ - **Version 2.2 (breaking changes from 2.1.x)** + - 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: diff --git a/package.json b/package.json index 5f0c45a..bc05a67 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.38", + "version": "2.2.39", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/logo/Logo.module.css b/src/components/logo/Logo.module.css index 0f87a5b..8746312 100644 --- a/src/components/logo/Logo.module.css +++ b/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; } diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx index 470b321..bd5a047 100644 --- a/src/components/logo/Logo.tsx +++ b/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; } diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css index ba76f22..2c564c1 100644 --- a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +++ b/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; } @@ -146,6 +159,13 @@ background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color)); } +.dropdownOverflow { + display: none; + max-height: 430px; + overflow-y: scroll; + border: 1px solid rgba(0, 0, 0, 0.2); +} + .dropdown.isOpen { display: block; } @@ -168,7 +188,7 @@ } .dropdown > li { - padding-inline-start: var(--skeleton-size-md); + padding-inline-start: 18px; } .toggleIcon { diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx index 02ba3b2..150e2d5 100644 --- a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +++ b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx @@ -9,6 +9,7 @@ import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core"; interface ITopNavItemBase { label: string; icon?: JSX.Element; + showToolTip?: boolean; current?: boolean | ICurrentItemJSONFormat; } @@ -57,11 +58,12 @@ export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems; export interface TopNavProps { items: ITopNavItem[]; + tooltipId: string; mobileLogo?: JSX.Element; layoutClassName?: string; } -export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => { +export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }: TopNavProps): JSX.Element => { const [isOpen, setIsOpen] = React.useState(false); const [isMobile, setIsMobile] = React.useState(window.innerWidth < 992); @@ -103,20 +105,24 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp current && styles.currentLink, )} > - {icon} + {icon && icon} {label}{" "} {subItems && isMobile && } {subItems && ( -
    - {subItems.map(({ label, icon, current, handleClick }, idx) => ( +
      8 && styles.dropdownOverflow])}> + {subItems.map(({ label, icon, current, handleClick, showToolTip }, idx) => (
    • handleSubItemClick(handleClick)} > - + {icon} {label}