Skip to content

Commit cb9d2fe

Browse files
authored
Merge 98bb23f into f99fa01
2 parents f99fa01 + 98bb23f commit cb9d2fe

File tree

5 files changed

+47
-9
lines changed

5 files changed

+47
-9
lines changed

@navikt/core/css/baseline/_inline-reset.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,5 +50,5 @@ legend {
5050
/* Make elements with the HTML hidden attribute stay hidden by default. */
5151

5252
[hidden] {
53-
display: none !important;
53+
/* display: none !important; */
5454
}

@navikt/core/css/darkside/baseline/baseline.darkside.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ body,
99
/* ---------------------------- Inline utilities ---------------------------- */
1010
[hidden] {
1111
/* CSS-layers reverses "!important" ordering, so we can't set this to important if we want to override it later. */
12-
display: none;
12+
13+
/* display: none; */
1314
}
1415

1516
/* https://web.dev/prefers-reduced-motion/ */

@navikt/core/css/expansioncard.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,10 @@
196196
}
197197

198198
.navds-expansioncard__content--closed {
199-
display: none;
199+
padding: 0;
200+
border: none;
201+
202+
/* TODO: Fix animation in Chrome */
200203
}
201204

202205
:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {

@navikt/core/react/src/expansion-card/ExpansionCardContent.tsx

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { forwardRef, useContext } from "react";
1+
import React, { forwardRef, useContext, useEffect, useRef } from "react";
22
import { useRenameCSS } from "../theme/Theme";
33
import { BodyLong } from "../typography";
4+
import { useMergeRefs } from "../util/hooks/useMergeRefs";
45
import { ExpansionCardContext } from "./context";
56

67
export interface ExpansionCardContentProps
@@ -14,6 +15,28 @@ const ExpansionCardContent = forwardRef<
1415
>(({ children, className, ...rest }, ref) => {
1516
const { cn } = useRenameCSS();
1617
const panelContext = useContext(ExpansionCardContext);
18+
const localRef = useRef<HTMLDivElement>(null);
19+
const mergedRef = useMergeRefs(localRef, ref);
20+
21+
useEffect(() => {
22+
if (!localRef.current) return;
23+
24+
if (!panelContext.open) {
25+
// @ts-expect-error - "until-found" is not supported in all browsers yet
26+
localRef.current.hidden = "until-found";
27+
}
28+
}, [panelContext.open]);
29+
30+
useEffect(() => {
31+
if (!localRef.current) return;
32+
33+
// @ts-expect-error - onbeforematch is not supported in all browsers yet
34+
localRef.current.onbeforematch = () => {
35+
console.warn("before match");
36+
panelContext.toggleOpen();
37+
};
38+
// TODO: do we need cleanup?
39+
}, [panelContext]);
1740

1841
if (panelContext === null) {
1942
console.error(
@@ -25,14 +48,15 @@ const ExpansionCardContent = forwardRef<
2548
return (
2649
<BodyLong
2750
{...rest}
28-
ref={ref}
51+
ref={mergedRef}
2952
as="div"
3053
className={cn("navds-expansioncard__content", className, {
3154
"navds-expansioncard__content--closed": !panelContext.open,
3255
})}
3356
aria-hidden={!panelContext.open}
3457
size={panelContext.size}
3558
data-open={panelContext.open}
59+
hidden={!panelContext.open}
3660
>
3761
<div className={cn("navds-expansioncard__content-inner")}>{children}</div>
3862
</BodyLong>

aksel.nav.no/website/app/(routes)/(designsystemet)/_ui/sidebar/Sidebar.subnav.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import cl from "clsx";
44
import { stegaClean } from "next-sanity";
55
import { usePathname } from "next/navigation";
6-
import { useState } from "react";
6+
import { useEffect, useRef } from "react";
77
import { ChevronDownIcon, SparklesIcon } from "@navikt/aksel-icons";
88
import { HStack } from "@navikt/ds-react";
99
import { umamiTrack } from "@/app/_ui/umami/Umami.track";
@@ -16,14 +16,21 @@ function DesignsystemSidebarSubNav(
1616
) {
1717
const { pages, title, layout } = props;
1818
const pathName = usePathname();
19+
const ref = useRef<HTMLUListElement>(null);
1920

2021
const isDarkside = title.toLowerCase() === "darkside";
2122

2223
const isSectionActive = pages.some((page) => {
2324
return pathName?.split("#")[0] === stegaClean(`/${page.slug}`);
2425
});
2526

26-
const [open, setOpen] = useState(isSectionActive);
27+
//const [open, setOpen] = useState(isSectionActive);
28+
const open = ref.current?.hidden === false; // TODO: Toggling open does not trigger rerender
29+
30+
useEffect(() => {
31+
if (!ref.current) return;
32+
if (isSectionActive) ref.current.hidden = false;
33+
}, [isSectionActive]);
2734

2835
return (
2936
<li
@@ -33,7 +40,10 @@ function DesignsystemSidebarSubNav(
3340
>
3441
<button
3542
onClick={() => {
36-
setOpen(!open);
43+
//setOpen(!open);
44+
if (!ref.current) return;
45+
// @ts-expect-error - "until-found" is not supported in all browsers yet, and not in React.
46+
ref.current.hidden = ref.current.hidden ? false : "until-found";
3747
umamiTrack("sidebar-subnav", {
3848
kategori: title,
3949
});
@@ -52,7 +62,7 @@ function DesignsystemSidebarSubNav(
5262

5363
<ChevronDownIcon aria-hidden className={styles.navListSubButtonIcon} />
5464
</button>
55-
<ul hidden={!open}>
65+
<ul ref={ref} hidden>
5666
{pages.map((page) => (
5767
<DesignsystemSidebarItem
5868
key={page.heading}

0 commit comments

Comments
 (0)