[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

Author: KenAJoh

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

@@ -4,32 +4,21 @@ import { useRouter } from "next/router";
 import React, { useContext, useId, useState } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, Detail } from "@navikt/ds-react";
+import {
+  DesignsystemSidebarSectionT,
+  SidebarGroupedPagesT,
+  SidebarPageT,
+} from "@/types";
 import { StatusTag } from "@/web/StatusTag";
 import styles from "./Sidebar.module.css";
 
-type SidebarInputNodeT = {
-  heading: string;
-  slug: string;
-  kategori: string;
-  tag: "beta" | "new" | "ready" | "deprecated";
-  sidebarindex: number | null;
-};
-
-type SidebarPageT = Pick<SidebarInputNodeT, "heading" | "slug" | "tag">;
-
-type SidebarGroupedPagesT = {
-  title: string;
-  value: string;
-  pages: SidebarPageT[];
-};
-
-type DesignsystemSectionT = {
+type DesignsystemSidebarGroupT = {
   label: string;
-  links: (SidebarPageT | SidebarGroupedPagesT)[];
+  links: DesignsystemSidebarSectionT;
 };
 
 type SidebarProps = {
-  sidebarData: DesignsystemSectionT[];
+  sidebarData: DesignsystemSidebarGroupT[];
   layout?: "sidebar" | "mobile";
 } & React.HTMLAttributes<HTMLDivElement>;
 
@@ -72,7 +61,7 @@ function SidebarDivider() {
   return <li aria-hidden className={styles.navListDivider} />;
 }
 
-function SidebarGroup(props: DesignsystemSectionT) {
+function SidebarGroup(props: DesignsystemSidebarGroupT) {
   const { label, links } = props;
   const id = useId();
   const layout = useContext(SidebarContext);

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

@@ -1,10 +1,8 @@
 import cl from "clsx";
 import Image from "next/legacy/image";
-import NextLink from "next/link";
-import { Box, Detail, Heading, Link, Show } from "@navikt/ds-react";
+import { Box, Heading, Show } from "@navikt/ds-react";
 import { urlFor } from "@/sanity/interface";
-import { SidebarT, TableOfContentsT } from "@/types";
-import { capitalize } from "@/utils";
+import { DesignsystemSidebarSectionT, TableOfContentsT } from "@/types";
 import { TableOfContents } from "@/web/toc/TableOfContents";
 import { Sidebar } from "../sidebar/Sidebar";
 
@@ -19,7 +17,7 @@ export const WithSidebar = ({
   toc,
 }: {
   children: React.ReactNode;
-  sidebar: SidebarT;
+  sidebar: DesignsystemSidebarSectionT;
   toc?: TableOfContentsT;
   pageType: {
     type: "komponenter" | "grunnleggende" | "templates";
@@ -60,17 +58,6 @@ export const WithSidebar = ({
             )}
           >
             <div className="z-[1]">
-              {variant === "page" && pageProps?.kategori && (
-                <Detail as="div" className="mb-2">
-                  <NextLink href={pageType.rootUrl} passHref legacyBehavior>
-                    <Link className="text-text-default">
-                      {pageType.rootTitle}
-                    </Link>
-                  </NextLink>{" "}
-                  / {capitalize(pageProps.kategori)}
-                </Detail>
-              )}
-
               <Heading
                 level="1"
                 size="xlarge"

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

@@ -152,16 +152,18 @@ export type SidebarInputNodeT = {
   sidebarindex: number | null;
 };
 
-export type SidebarOutputNodeT = Pick<
-  SidebarInputNodeT,
-  "heading" | "slug" | "tag"
->;
+export type SidebarPageT = Pick<SidebarInputNodeT, "heading" | "slug" | "tag">;
 
-export type SidebarT = {
-  pages: SidebarOutputNodeT[];
+export type SidebarGroupedPagesT = {
   title: string;
   value: string;
-}[];
+  pages: SidebarPageT[];
+};
+
+export type DesignsystemSidebarSectionT = (
+  | SidebarPageT
+  | SidebarGroupedPagesT
+)[];
 
 export type ArticleListT = {
   _id: string;

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import { SidebarInputNodeT, SidebarT } from "../../types/sanity-schema";
+import { DesignsystemSidebarSectionT, SidebarInputNodeT } from "@/types";
 import {
   generateSidebar,
   sortDeprecated,
@@ -50,7 +50,7 @@ const outputIndex = [
   { ...baseItem, kategori: "core", heading: "c", tag: "deprecated" as const },
 ];
 
-const outputComplete: SidebarT = [
+const outputComplete: DesignsystemSidebarSectionT = [
   {
     pages: [
       { slug: "/123", tag: "beta", heading: "f" },
@@ -90,4 +90,56 @@ describe("generateSidebar function", () => {
   test("generated output is correct", () => {
     expect(generateSidebar(input, "komponenter")).toEqual(outputComplete);
   });
+
+  test("should place standalone articles on top", () => {
+    expect(
+      generateSidebar(
+        [
+          ...input,
+          {
+            ...baseItem,
+            kategori: "standalone",
+            heading: "B",
+          },
+          {
+            ...baseItem,
+            kategori: "standalone",
+            heading: "A",
+          },
+        ],
+        "komponenter",
+      ),
+    ).toEqual([
+      { slug: "/123", tag: "beta", heading: "A" },
+      { slug: "/123", tag: "beta", heading: "B" },
+      ...outputComplete,
+    ]);
+  });
+
+  test("should sort standalone articles by index", () => {
+    expect(
+      generateSidebar(
+        [
+          ...input,
+          {
+            ...baseItem,
+            kategori: "standalone",
+            heading: "B",
+            sidebarindex: 0,
+          },
+          {
+            ...baseItem,
+            kategori: "standalone",
+            heading: "A",
+            sidebarindex: 1,
+          },
+        ],
+        "komponenter",
+      ),
+    ).toEqual([
+      { slug: "/123", tag: "beta", heading: "B" },
+      { slug: "/123", tag: "beta", heading: "A" },
+      ...outputComplete,
+    ]);
+  });
 });

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

@@ -1,11 +1,30 @@
+import {
+  DesignsystemSidebarSectionT,
+  SidebarInputNodeT,
+  SidebarPageT,
+} from "@/types";
 import { sanityCategoryLookup } from "../../sanity/config";
-import { SidebarInputNodeT, SidebarT } from "../types";
 
 export function generateSidebar(
   input: SidebarInputNodeT[],
   type: "komponenter" | "grunnleggende" | "templates",
-): SidebarT {
-  return sanityCategoryLookup(type)
+): DesignsystemSidebarSectionT {
+  const categories = sanityCategoryLookup(type);
+
+  const standalonePages: SidebarPageT[] = input
+    .filter((page) => page.kategori === "standalone")
+    .sort((a, b) => {
+      return a?.heading.localeCompare(b?.heading);
+    })
+    .sort(sortIndex)
+    .sort(sortDeprecated)
+    .map((page) => ({
+      heading: page.heading,
+      slug: page.slug,
+      tag: page.tag,
+    }));
+
+  const groupedPages = categories
     .map((x) => ({
       ...x,
       pages: input
@@ -25,6 +44,8 @@ export function generateSidebar(
         tag: page.tag,
       })),
     }));
+
+  return [...standalonePages, ...groupedPages];
 }
 
 export function sortDeprecated(a: SidebarInputNodeT, b: SidebarInputNodeT) {

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

@@ -11,10 +11,10 @@ import { destructureBlocks, sidebarQuery } from "@/sanity/queries";
 import {
   AkselGrunnleggendeDocT,
   ArticleListT,
+  DesignsystemSidebarSectionT,
   NextPageT,
   ResolveContributorsT,
   ResolveSlugT,
-  SidebarT,
   TableOfContentsT,
 } from "@/types";
 import { dateStr, generateSidebar, generateTableOfContents } from "@/utils";
@@ -25,7 +25,7 @@ import NotFotfund from "../404";
 
 type PageProps = NextPageT<{
   page: ResolveContributorsT<ResolveSlugT<AkselGrunnleggendeDocT>>;
-  sidebar: SidebarT;
+  sidebar: DesignsystemSidebarSectionT;
   seo: any;
   refs: ArticleListT;
   publishDate: string;

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

@@ -11,8 +11,8 @@ import { landingPageQuery, sidebarQuery } from "@/sanity/queries";
 import {
   AkselLandingPageDocT,
   ArticleListT,
+  DesignsystemSidebarSectionT,
   NextPageT,
-  SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
 import { TextWithMarkdown } from "@/web/TextWithMarkdown";
@@ -22,7 +22,7 @@ import { grunnleggendeKategorier } from "../../sanity/config";
 
 type PageProps = NextPageT<{
   page: AkselLandingPageDocT;
-  sidebar: SidebarT;
+  sidebar: DesignsystemSidebarSectionT;
   links: ArticleListT;
 }>;
 

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

@@ -13,10 +13,10 @@ import { destructureBlocks, sidebarQuery } from "@/sanity/queries";
 import {
   AkselKomponentDocT,
   ArticleListT,
+  DesignsystemSidebarSectionT,
   NextPageT,
   ResolveContributorsT,
   ResolveSlugT,
-  SidebarT,
   TableOfContentsT,
 } from "@/types";
 import { dateStr, generateSidebar, generateTableOfContents } from "@/utils";
@@ -55,7 +55,7 @@ const kodepakker = {
 
 type PageProps = NextPageT<{
   page: ResolveContributorsT<ResolveSlugT<AkselKomponentDocT>>;
-  sidebar: SidebarT;
+  sidebar: DesignsystemSidebarSectionT;
   seo: any;
   refs: ArticleListT;
   publishDate: string;

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

@@ -19,8 +19,8 @@ import { landingPageQuery, sidebarQuery } from "@/sanity/queries";
 import {
   AkselLandingPageDocT,
   ArticleListT,
+  DesignsystemSidebarSectionT,
   NextPageT,
-  SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
 import { IntroCards } from "@/web/IntroCards";
@@ -31,7 +31,7 @@ import { komponentKategorier } from "../../sanity/config";
 
 type PageProps = NextPageT<{
   page: AkselLandingPageDocT;
-  sidebar: SidebarT;
+  sidebar: DesignsystemSidebarSectionT;
   links: ArticleListT;
 }>;
 

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

@@ -12,10 +12,10 @@ import {
   AkselTemplatesDocT,
   ArticleListT,
   CodeExampleSchemaT,
+  DesignsystemSidebarSectionT,
   NextPageT,
   ResolveContributorsT,
   ResolveSlugT,
-  SidebarT,
   TableOfContentsT,
 } from "@/types";
 import { dateStr, generateSidebar, generateTableOfContents } from "@/utils";
@@ -29,7 +29,7 @@ import NotFotfund from "../404";
 
 type PageProps = NextPageT<{
   page: ResolveContributorsT<ResolveSlugT<AkselTemplatesDocT>>;
-  sidebar: SidebarT;
+  sidebar: DesignsystemSidebarSectionT;
   seo: any;
   refs: ArticleListT;
   publishDate: string;

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

@@ -11,8 +11,8 @@ import { landingPageQuery, sidebarQuery } from "@/sanity/queries";
 import {
   AkselLandingPageDocT,
   ArticleListT,
+  DesignsystemSidebarSectionT,
   NextPageT,
-  SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
 import { TextWithMarkdown } from "@/web/TextWithMarkdown";
@@ -22,7 +22,7 @@ import { templatesKategorier } from "../../sanity/config";
 
 type PageProps = NextPageT<{
   page: AkselLandingPageDocT;
-  sidebar: SidebarT;
+  sidebar: DesignsystemSidebarSectionT;
   links: ArticleListT;
 }>;
 

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

@@ -46,7 +46,7 @@ export const komponentKategorier = [
   { title: "Primitives", value: "primitives" },
   { title: "Core", value: "core" },
   { title: "Alpha", value: "alpha" },
-  { title: "Legacy", value: "legacy" },
+  { title: "Avviklet", value: "legacy" },
 ];
 
 export const grunnleggendeKategorier = [