Nxt 583 update levels in section nav

web/.gitignore

@@ -44,3 +44,6 @@ public/sitemap-0.xml
 
 # JSON component structure from the Storyblok CLI
 components.*.json
+
+# JSON component backups from CLI scripts
+temp-components-backup-*/**

web/src/components/Storyblok/InfoPage/InfoPage.tsx

@@ -1,9 +1,10 @@
 import { StoryblokComponent } from "@storyblok/react";
 
 import { Grid, GridItem } from "@nice-digital/nds-grid";
-import { StackedNav, StackedNavLink } from "@nice-digital/nds-stacked-nav";
 
 import { StoryblokRichText } from "@/components/Storyblok/StoryblokRichText/StoryblokRichText";
+import { StoryblokSectionNav } from "@/components/Storyblok/StoryblokSectionNav/StoryblokSectionNav";
+import { type ExtendedSBLink } from "@/components/Storyblok/StoryblokSectionNav/utils/Utils";
 import { type Breadcrumb } from "@/types/Breadcrumb";
 import { type InfoPageStoryblok } from "@/types/storyblok";
 
@@ -12,13 +13,15 @@ import styles from "./InfoPage.module.scss";
 interface InfoPageBlokProps {
 	blok: InfoPageStoryblok;
 	breadcrumbs?: Breadcrumb[];
-	siblingPages?: string[];
+	tree: ExtendedSBLink[];
+	slug: string;
 }
 
 export const InfoPage = ({
 	blok,
 	breadcrumbs,
-	siblingPages,
+	tree,
+	slug,
 }: InfoPageBlokProps): React.ReactElement => {
 	return (
 		<>
@@ -38,20 +41,10 @@ export const InfoPage = ({
 			})}
 
 			<Grid gutter="loose">
-				<GridItem cols={12} sm={{ cols: 3 }}>
-					{siblingPages && siblingPages.length > 0 && (
-						<StackedNav label="Label of parent section" elementType="h2">
-							{siblingPages.map((page, index) => {
-								return (
-									<StackedNavLink destination="/" key={index}>
-										{page}
-									</StackedNavLink>
-								);
-							})}
-						</StackedNav>
-					)}
+				<GridItem cols={12} sm={{ cols: 4 }} md={{ cols: 3 }}>
+					<StoryblokSectionNav tree={tree} slug={slug} />
 				</GridItem>
-				<GridItem cols={12} sm={{ cols: 9 }}>
+				<GridItem cols={12} sm={{ cols: 8 }} md={{ cols: 9 }}>
 					<div className={styles.content}>
 						<StoryblokRichText content={blok.content} />
 					</div>

web/src/components/Storyblok/StoryblokSectionNav/StoryblokSectionNav.module.scss

@@ -0,0 +1,7 @@
+/* stylelint-disable selector-class-pattern */
+// TODO: Move to design system component
+.storyblok-section-nav {
+  :global(.stacked-nav__content-wrapper) {
+    word-wrap: break-word;
+  }
+}

web/src/components/Storyblok/StoryblokSectionNav/StoryblokSectionNav.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from "@testing-library/react";
+
+import mockData from "@/mockData/storyblok/sectionNavData.json";
+
+import { StoryblokSectionNav } from "./StoryblokSectionNav";
+
+describe("StoryblokSectionNav", () => {
+	it("should render the parent and child links correctly", () => {
+		render(<StoryblokSectionNav tree={mockData.tree} slug={mockData.slug} />);
+
+		// Check if the parent link is rendered
+		const parentLink = screen.getByText("Implementing NICE guidance");
+		expect(parentLink).toBeInTheDocument();
+		expect(parentLink).toHaveClass(
+			"stacked-nav__root stacked-nav__root--no-link"
+		);
+	});
+	it("should not render the parent and child links correctly", () => {
+		render(<StoryblokSectionNav tree={[]} slug={mockData.slug} />);
+
+		// Check if the parent link is rendered
+		const parentLink = screen.queryByText("Implementing NICE guidance");
+		expect(parentLink).not.toBeInTheDocument();
+	});
+	it("should render the current level and level above it correctly when there are no children", () => {
+		render(
+			<StoryblokSectionNav
+				tree={mockData.currentPageNoChildrenTree}
+				slug={
+					"implementing-nice-guidance/cost-saving-resource-planning-and-audit/nice-and-health-inequalities/nice-and-core20plus5-adults/smoking-cessation"
+				}
+			/>
+		);
+
+		// Check if the correct child link has the "content-wrapper" class
+		const childLink1 = screen.getByText("Core20PLUS5 adults-OG");
+		const childLink2 = screen.getByText("smoking cessation");
+
+		expect(childLink1).toHaveClass("stacked-nav__content-wrapper");
+		expect(childLink2).toHaveClass("stacked-nav__content-wrapper");
+	});
+
+	it("should highlight the current child link based on the slug", () => {
+		render(
+			<StoryblokSectionNav
+				tree={mockData.currentPageNoChildrenTree}
+				slug={
+					"implementing-nice-guidance/cost-saving-resource-planning-and-audit/nice-and-health-inequalities/nice-and-core20plus5-adults/smoking-cessation"
+				}
+			/>
+		);
+
+		const link = screen.getByRole("link", { name: /smoking cessation/i });
+		expect(link).toHaveAttribute("aria-current", "true");
+	});
+
+	it("should not highlight the child link if the slug doesn't match", () => {
+		render(
+			<StoryblokSectionNav
+				tree={mockData.currentPageNoChildrenTree}
+				slug={
+					"implementing-nice-guidance/cost-saving-resource-planning-and-audit/nice-and-health-inequalities/nice-and-core20plus5-adults/nice-and-core20plus5-adults"
+				}
+			/>
+		);
+
+		const link = screen.getByRole("link", { name: /smoking cessation/i });
+		console.log(link.outerHTML);
+		expect(link).toHaveAttribute("aria-current", "false");
+	});
+	it("should highlight the current  link based on the slug", () => {
+		render(
+			<StoryblokSectionNav tree={mockData.topLevelTree} slug={"contact-us"} />
+		);
+
+		const link = screen.getByRole("link", { name: /Contact us/i });
+		expect(link).toHaveAttribute("aria-current", "true");
+	});
+});

web/src/components/Storyblok/StoryblokSectionNav/StoryblokSectionNav.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { StackedNav, StackedNavLink } from "@nice-digital/nds-stacked-nav";
+
+import styles from "./StoryblokSectionNav.module.scss";
+import { type ExtendedSBLink } from "./utils/Utils";
+
+type StoryblokSectionNavProps = {
+	tree: ExtendedSBLink[];
+	slug: string;
+};
+
+export const StoryblokSectionNav = ({
+	tree,
+	slug,
+}: StoryblokSectionNavProps): JSX.Element => {
+	const sectionNavLabel = tree.filter((item) => item.is_startpage);
+
+	const sectionNavTreeWithoutLabel = tree.filter(
+		(item) => item.is_startpage === false
+	);
+
+	return (
+		<>
+			<StackedNav
+				label={sectionNavLabel[0]?.name}
+				className={styles["storyblok-section-nav"]}
+			>
+				{sectionNavTreeWithoutLabel?.map((parent) => (
+					<StackedNavLink
+						destination={parent.real_path}
+						key={parent.id}
+						isCurrent={parent.slug === slug ? true : false}
+						nested={
+							parent.childLinks?.length
+								? parent.childLinks?.map((child: ExtendedSBLink) => (
+										<StackedNavLink
+											destination={child.real_path}
+											key={child.id}
+											isCurrent={child.slug === slug ? true : false}
+										>
+											{child.name}
+										</StackedNavLink>
+								  ))
+								: undefined
+						}
+					>
+						{parent.name}
+					</StackedNavLink>
+				))}
+			</StackedNav>
+		</>
+	);
+};