Skip to content

Commit 528d4af

Browse files
KenAJohKenAJoh
authored
[Aksel.nav.no] Add support for "standalone" articles (#3657)
* 📝 Reposition sanity fields * ✨ Added new standalone-category to sanity docs * ✨ Added validation to make sure standalone articles dont overlap with sections * 🐛 Always error out if using standalone articles until implemented * 🔥 Removed temp removal of feature * 🐛 Check for undefined slug * [Aksel.nav.no] Implemented support for new lvl 1 articles (#3658) * ✨ Added support for new lvl 1 articles * 🧪 Added tests for new sidebar * 🔥 Removed breadcrumb from WithSidebar layout * 🐛 Revert to prod dataset
1 parent 3d3e26a commit 528d4af

File tree

16 files changed

+217
-109
lines changed

16 files changed

+217
-109
lines changed

‎aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

+9-20
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,21 @@ import { useRouter } from "next/router";
44
import React, { useContext, useId, useState } from "react";
55
import { ChevronDownIcon } from "@navikt/aksel-icons";
66
import { BodyShort, Detail } from "@navikt/ds-react";
7+
import {
8+
DesignsystemSidebarSectionT,
9+
SidebarGroupedPagesT,
10+
SidebarPageT,
11+
} from "@/types";
712
import { StatusTag } from "@/web/StatusTag";
813
import styles from "./Sidebar.module.css";
914

10-
type SidebarInputNodeT = {
11-
heading: string;
12-
slug: string;
13-
kategori: string;
14-
tag: "beta" | "new" | "ready" | "deprecated";
15-
sidebarindex: number | null;
16-
};
17-
18-
type SidebarPageT = Pick<SidebarInputNodeT, "heading" | "slug" | "tag">;
19-
20-
type SidebarGroupedPagesT = {
21-
title: string;
22-
value: string;
23-
pages: SidebarPageT[];
24-
};
25-
26-
type DesignsystemSectionT = {
15+
type DesignsystemSidebarGroupT = {
2716
label: string;
28-
links: (SidebarPageT | SidebarGroupedPagesT)[];
17+
links: DesignsystemSidebarSectionT;
2918
};
3019

3120
type SidebarProps = {
32-
sidebarData: DesignsystemSectionT[];
21+
sidebarData: DesignsystemSidebarGroupT[];
3322
layout?: "sidebar" | "mobile";
3423
} & React.HTMLAttributes<HTMLDivElement>;
3524

@@ -72,7 +61,7 @@ function SidebarDivider() {
7261
return <li aria-hidden className={styles.navListDivider} />;
7362
}
7463

75-
function SidebarGroup(props: DesignsystemSectionT) {
64+
function SidebarGroup(props: DesignsystemSidebarGroupT) {
7665
const { label, links } = props;
7766
const id = useId();
7867
const layout = useContext(SidebarContext);

‎aksel.nav.no/website/components/layout/templates/WithSidebar.tsx

+3-16
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import cl from "clsx";
22
import Image from "next/legacy/image";
3-
import NextLink from "next/link";
4-
import { Box, Detail, Heading, Link, Show } from "@navikt/ds-react";
3+
import { Box, Heading, Show } from "@navikt/ds-react";
54
import { urlFor } from "@/sanity/interface";
6-
import { SidebarT, TableOfContentsT } from "@/types";
7-
import { capitalize } from "@/utils";
5+
import { DesignsystemSidebarSectionT, TableOfContentsT } from "@/types";
86
import { TableOfContents } from "@/web/toc/TableOfContents";
97
import { Sidebar } from "../sidebar/Sidebar";
108

@@ -19,7 +17,7 @@ export const WithSidebar = ({
1917
toc,
2018
}: {
2119
children: React.ReactNode;
22-
sidebar: SidebarT;
20+
sidebar: DesignsystemSidebarSectionT;
2321
toc?: TableOfContentsT;
2422
pageType: {
2523
type: "komponenter" | "grunnleggende" | "templates";
@@ -60,17 +58,6 @@ export const WithSidebar = ({
6058
)}
6159
>
6260
<div className="z-[1]">
63-
{variant === "page" && pageProps?.kategori && (
64-
<Detail as="div" className="mb-2">
65-
<NextLink href={pageType.rootUrl} passHref legacyBehavior>
66-
<Link className="text-text-default">
67-
{pageType.rootTitle}
68-
</Link>
69-
</NextLink>{" "}
70-
/ {capitalize(pageProps.kategori)}
71-
</Detail>
72-
)}
73-
7461
<Heading
7562
level="1"
7663
size="xlarge"

‎aksel.nav.no/website/components/types/sanity-schema.ts

+9-7
Original file line numberDiff line numberDiff line change
@@ -152,16 +152,18 @@ export type SidebarInputNodeT = {
152152
sidebarindex: number | null;
153153
};
154154

155-
export type SidebarOutputNodeT = Pick<
156-
SidebarInputNodeT,
157-
"heading" | "slug" | "tag"
158-
>;
155+
export type SidebarPageT = Pick<SidebarInputNodeT, "heading" | "slug" | "tag">;
159156

160-
export type SidebarT = {
161-
pages: SidebarOutputNodeT[];
157+
export type SidebarGroupedPagesT = {
162158
title: string;
163159
value: string;
164-
}[];
160+
pages: SidebarPageT[];
161+
};
162+
163+
export type DesignsystemSidebarSectionT = (
164+
| SidebarPageT
165+
| SidebarGroupedPagesT
166+
)[];
165167

166168
export type ArticleListT = {
167169
_id: string;

‎aksel.nav.no/website/components/utils/__tests__/generate-sidebar.test.ts

+54-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { describe, expect, test } from "vitest";
2-
import { SidebarInputNodeT, SidebarT } from "../../types/sanity-schema";
2+
import { DesignsystemSidebarSectionT, SidebarInputNodeT } from "@/types";
33
import {
44
generateSidebar,
55
sortDeprecated,
@@ -50,7 +50,7 @@ const outputIndex = [
5050
{ ...baseItem, kategori: "core", heading: "c", tag: "deprecated" as const },
5151
];
5252

53-
const outputComplete: SidebarT = [
53+
const outputComplete: DesignsystemSidebarSectionT = [
5454
{
5555
pages: [
5656
{ slug: "/123", tag: "beta", heading: "f" },
@@ -90,4 +90,56 @@ describe("generateSidebar function", () => {
9090
test("generated output is correct", () => {
9191
expect(generateSidebar(input, "komponenter")).toEqual(outputComplete);
9292
});
93+
94+
test("should place standalone articles on top", () => {
95+
expect(
96+
generateSidebar(
97+
[
98+
...input,
99+
{
100+
...baseItem,
101+
kategori: "standalone",
102+
heading: "B",
103+
},
104+
{
105+
...baseItem,
106+
kategori: "standalone",
107+
heading: "A",
108+
},
109+
],
110+
"komponenter",
111+
),
112+
).toEqual([
113+
{ slug: "/123", tag: "beta", heading: "A" },
114+
{ slug: "/123", tag: "beta", heading: "B" },
115+
...outputComplete,
116+
]);
117+
});
118+
119+
test("should sort standalone articles by index", () => {
120+
expect(
121+
generateSidebar(
122+
[
123+
...input,
124+
{
125+
...baseItem,
126+
kategori: "standalone",
127+
heading: "B",
128+
sidebarindex: 0,
129+
},
130+
{
131+
...baseItem,
132+
kategori: "standalone",
133+
heading: "A",
134+
sidebarindex: 1,
135+
},
136+
],
137+
"komponenter",
138+
),
139+
).toEqual([
140+
{ slug: "/123", tag: "beta", heading: "B" },
141+
{ slug: "/123", tag: "beta", heading: "A" },
142+
...outputComplete,
143+
]);
144+
});
93145
});

‎aksel.nav.no/website/components/utils/generate-sidebar.ts

+24-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,30 @@
1+
import {
2+
DesignsystemSidebarSectionT,
3+
SidebarInputNodeT,
4+
SidebarPageT,
5+
} from "@/types";
16
import { sanityCategoryLookup } from "../../sanity/config";
2-
import { SidebarInputNodeT, SidebarT } from "../types";
37

48
export function generateSidebar(
59
input: SidebarInputNodeT[],
610
type: "komponenter" | "grunnleggende" | "templates",
7-
): SidebarT {
8-
return sanityCategoryLookup(type)
11+
): DesignsystemSidebarSectionT {
12+
const categories = sanityCategoryLookup(type);
13+
14+
const standalonePages: SidebarPageT[] = input
15+
.filter((page) => page.kategori === "standalone")
16+
.sort((a, b) => {
17+
return a?.heading.localeCompare(b?.heading);
18+
})
19+
.sort(sortIndex)
20+
.sort(sortDeprecated)
21+
.map((page) => ({
22+
heading: page.heading,
23+
slug: page.slug,
24+
tag: page.tag,
25+
}));
26+
27+
const groupedPages = categories
928
.map((x) => ({
1029
...x,
1130
pages: input
@@ -25,6 +44,8 @@ export function generateSidebar(
2544
tag: page.tag,
2645
})),
2746
}));
47+
48+
return [...standalonePages, ...groupedPages];
2849
}
2950

3051
export function sortDeprecated(a: SidebarInputNodeT, b: SidebarInputNodeT) {

‎aksel.nav.no/website/pages/grunnleggende/[...slug].tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import { destructureBlocks, sidebarQuery } from "@/sanity/queries";
1111
import {
1212
AkselGrunnleggendeDocT,
1313
ArticleListT,
14+
DesignsystemSidebarSectionT,
1415
NextPageT,
1516
ResolveContributorsT,
1617
ResolveSlugT,
17-
SidebarT,
1818
TableOfContentsT,
1919
} from "@/types";
2020
import { dateStr, generateSidebar, generateTableOfContents } from "@/utils";
@@ -25,7 +25,7 @@ import NotFotfund from "../404";
2525

2626
type PageProps = NextPageT<{
2727
page: ResolveContributorsT<ResolveSlugT<AkselGrunnleggendeDocT>>;
28-
sidebar: SidebarT;
28+
sidebar: DesignsystemSidebarSectionT;
2929
seo: any;
3030
refs: ArticleListT;
3131
publishDate: string;

‎aksel.nav.no/website/pages/grunnleggende/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import { landingPageQuery, sidebarQuery } from "@/sanity/queries";
1111
import {
1212
AkselLandingPageDocT,
1313
ArticleListT,
14+
DesignsystemSidebarSectionT,
1415
NextPageT,
15-
SidebarT,
1616
} from "@/types";
1717
import { generateSidebar } from "@/utils";
1818
import { TextWithMarkdown } from "@/web/TextWithMarkdown";
@@ -22,7 +22,7 @@ import { grunnleggendeKategorier } from "../../sanity/config";
2222

2323
type PageProps = NextPageT<{
2424
page: AkselLandingPageDocT;
25-
sidebar: SidebarT;
25+
sidebar: DesignsystemSidebarSectionT;
2626
links: ArticleListT;
2727
}>;
2828

‎aksel.nav.no/website/pages/komponenter/[...slug].tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ import { destructureBlocks, sidebarQuery } from "@/sanity/queries";
1313
import {
1414
AkselKomponentDocT,
1515
ArticleListT,
16+
DesignsystemSidebarSectionT,
1617
NextPageT,
1718
ResolveContributorsT,
1819
ResolveSlugT,
19-
SidebarT,
2020
TableOfContentsT,
2121
} from "@/types";
2222
import { dateStr, generateSidebar, generateTableOfContents } from "@/utils";
@@ -55,7 +55,7 @@ const kodepakker = {
5555

5656
type PageProps = NextPageT<{
5757
page: ResolveContributorsT<ResolveSlugT<AkselKomponentDocT>>;
58-
sidebar: SidebarT;
58+
sidebar: DesignsystemSidebarSectionT;
5959
seo: any;
6060
refs: ArticleListT;
6161
publishDate: string;

‎aksel.nav.no/website/pages/komponenter/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ import { landingPageQuery, sidebarQuery } from "@/sanity/queries";
1919
import {
2020
AkselLandingPageDocT,
2121
ArticleListT,
22+
DesignsystemSidebarSectionT,
2223
NextPageT,
23-
SidebarT,
2424
} from "@/types";
2525
import { generateSidebar } from "@/utils";
2626
import { IntroCards } from "@/web/IntroCards";
@@ -31,7 +31,7 @@ import { komponentKategorier } from "../../sanity/config";
3131

3232
type PageProps = NextPageT<{
3333
page: AkselLandingPageDocT;
34-
sidebar: SidebarT;
34+
sidebar: DesignsystemSidebarSectionT;
3535
links: ArticleListT;
3636
}>;
3737

‎aksel.nav.no/website/pages/monster-maler/[...slug].tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ import {
1212
AkselTemplatesDocT,
1313
ArticleListT,
1414
CodeExampleSchemaT,
15+
DesignsystemSidebarSectionT,
1516
NextPageT,
1617
ResolveContributorsT,
1718
ResolveSlugT,
18-
SidebarT,
1919
TableOfContentsT,
2020
} from "@/types";
2121
import { dateStr, generateSidebar, generateTableOfContents } from "@/utils";
@@ -29,7 +29,7 @@ import NotFotfund from "../404";
2929

3030
type PageProps = NextPageT<{
3131
page: ResolveContributorsT<ResolveSlugT<AkselTemplatesDocT>>;
32-
sidebar: SidebarT;
32+
sidebar: DesignsystemSidebarSectionT;
3333
seo: any;
3434
refs: ArticleListT;
3535
publishDate: string;

‎aksel.nav.no/website/pages/monster-maler/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import { landingPageQuery, sidebarQuery } from "@/sanity/queries";
1111
import {
1212
AkselLandingPageDocT,
1313
ArticleListT,
14+
DesignsystemSidebarSectionT,
1415
NextPageT,
15-
SidebarT,
1616
} from "@/types";
1717
import { generateSidebar } from "@/utils";
1818
import { TextWithMarkdown } from "@/web/TextWithMarkdown";
@@ -22,7 +22,7 @@ import { templatesKategorier } from "../../sanity/config";
2222

2323
type PageProps = NextPageT<{
2424
page: AkselLandingPageDocT;
25-
sidebar: SidebarT;
25+
sidebar: DesignsystemSidebarSectionT;
2626
links: ArticleListT;
2727
}>;
2828

‎aksel.nav.no/website/sanity/config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const komponentKategorier = [
4646
{ title: "Primitives", value: "primitives" },
4747
{ title: "Core", value: "core" },
4848
{ title: "Alpha", value: "alpha" },
49-
{ title: "Legacy", value: "legacy" },
49+
{ title: "Avviklet", value: "legacy" },
5050
];
5151

5252
export const grunnleggendeKategorier = [

0 commit comments

Comments
 (0)