Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development to Main, week 40 #114

Merged
merged 27 commits into from
Oct 16, 2023
Merged

Development to Main, week 40 #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
bd509b1
updated Primary and Secondary topnav to NLDS
remko48 Oct 4, 2023
0e6df19
Updated version and readme
remko48 Oct 4, 2023
997222f
Merge remote-tracking branch 'origin/development' into feature/OP-67/…
remko48 Oct 4, 2023
757d765
Merge pull request #113 from ConductionNL/feature/OP-67/navigation-co…
remko48 Oct 4, 2023
130a605
added arialabel and roles to all select
remko48 Oct 11, 2023
8b6beb7
updated version and readme
remko48 Oct 11, 2023
bf68180
build fix
remko48 Oct 11, 2023
6d98186
Merge pull request #115 from ConductionNL/feature/XW-87/select-WCAG
remko48 Oct 11, 2023
3de1a7c
updated select
remko48 Oct 11, 2023
f2e4d35
updated input and textarea
remko48 Oct 11, 2023
70f9e36
Merge pull request #116 from ConductionNL/feature/XW-87/select-WCAG
remko48 Oct 11, 2023
ddc3c4c
updated select
remko48 Oct 11, 2023
1a40ac5
Merge pull request #117 from ConductionNL/feature/XW-87/select-WCAG
remko48 Oct 11, 2023
3334c8d
Pagination NLDS
remko48 Oct 13, 2023
00f2c0f
Merge pull request #118 from ConductionNL/feature/OP-57/pagination
remko48 Oct 13, 2023
367b8eb
updated pagination
remko48 Oct 13, 2023
74d94c3
Merge pull request #119 from ConductionNL/feature/OP-57/pagination
remko48 Oct 13, 2023
a31047e
Revert "feature/OP-57/pagination"
remko48 Oct 16, 2023
f492e7e
Merge pull request #120 from ConductionNL/revert-119-feature/OP-57/pa…
remko48 Oct 16, 2023
66c8723
Revert "feature/OP-57/pagination"
remko48 Oct 16, 2023
9c5d9df
Merge pull request #121 from ConductionNL/revert-118-feature/OP-57/pa…
remko48 Oct 16, 2023
5c48485
Revert "feature/XW-87/select-WCAG"
remko48 Oct 16, 2023
5e0deff
Merge pull request #122 from ConductionNL/revert-117-feature/XW-87/se…
remko48 Oct 16, 2023
7cacaef
Revert "feature/XW-87/select-WCAG"
remko48 Oct 16, 2023
7e7e899
Merge pull request #123 from ConductionNL/revert-116-feature/XW-87/se…
remko48 Oct 16, 2023
614a469
Revert "feature/XW-87/select-WCAG"
remko48 Oct 16, 2023
adf42a3
Merge pull request #124 from ConductionNL/revert-115-feature/XW-87/se…
remko48 Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
117 changes: 90 additions & 27 deletions src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
}
46 changes: 40 additions & 6 deletions src/components/topNav/primaryTopNav/PrimaryTopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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({});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should type this state, it's unclear what it's expecting.


const handleItemClick = (handleClick?: () => any) => {
if (handleClick) {
Expand All @@ -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,
});
};
Comment on lines +39 to +44
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like a complex way to keep track of the open sub items. Previously, I think, we just let the css handle everything. Why the change?


const screenWidth = window.innerWidth;

React.useEffect(() => {
if (screenWidth > 992) {
setSubNavIsOpen({});
}
}, [screenWidth]);
Comment on lines +46 to +52
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is not triggering on the "right" moments. screenWidth seems to update sometimes, I think whenever the React lifecycle is triggered by some other side effect.

To accurately keep track of a screen width, we can register (and un-register when needed) a listener, like so (dummy code):

const [screenWidth, setScreenWidth] = React.useState<number | undefined>(undefined);

  React.useEffect(() => {
    const handleScreenResize = (e: TypeThis) => setScreenWidth(e.path_to_width);

    window.addEventListener("resize", handleScreenResize); // add listener

    return () => window.removeEventListener("resize", handleScreenResize) // remove listener when component is removed
  }, []) // only trigger once

return (
<div className={clsx(styles.container, layoutClassName && layoutClassName)}>
<div className={styles.menuToggleContainer}>
Expand All @@ -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}
/>
)}
Comment on lines +67 to +92
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I find this a bit complex, see my other comment as well.

Is this because a top-level item can have a link and have sub-items?

</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>
Expand Down
31 changes: 22 additions & 9 deletions src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand Down