@agregio-solutions/design-system 1.90.1 → 1.92.0

package/dist/packages/components/Navigation/doc.md

@@ -0,0 +1,992 @@
+# Navigation
+
+## Props
+
+The complete Props documentation with JS doc for this component is available at this path:
+
+node_modules/@agregio-solutions/design-system/dist/packages/components/Navigation/Navigation.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Navigation from "./Navigation";
+import NavigationItem from "../NavigationItem/NavigationItem";
+import { I18nProvider } from "react-aria-components";
+import { fn } from "storybook/test";
+
+const meta: Meta<typeof Navigation> = {
+  component: Navigation,
+  parameters: {
+    layout: "none",
+  },
+  argTypes: {
+    children: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <I18nProvider locale="EN-en">
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    logo: "agregio",
+    onParametersClick: fn(),
+    onLogoutClick: fn(),
+    children: (
+      <>
+        <NavigationItem label="Item 1" href="/item-1" iconLeft="home" />
+
+        <NavigationItem
+          label="Item 2"
+          iconLeft="business"
+          subLinks={[
+            { href: "/item-2-1", label: "Item 2.1" },
+            { href: "/item-2-2", label: "Item 2.2" },
+          ]}
+        />
+
+        <NavigationItem
+          label="Item 3"
+          href="/item-3"
+          iconLeft="bolt"
+          isActive
+        />
+      </>
+    ),
+  },
+};
+
+export const NoSettings: Story = {
+  args: {
+    ...Playground.args,
+    onParametersClick: undefined,
+  },
+};
+
+export const NoLogout: Story = {
+  args: {
+    ...Playground.args,
+    onLogoutClick: undefined,
+  },
+};
+
+export const NoFooter: Story = {
+  args: {
+    ...Playground.args,
+    onParametersClick: undefined,
+    onLogoutClick: undefined,
+  },
+};
+
+export const InitialCollapsed: Story = {
+  args: {
+    ...Playground.args,
+    initialIsCollapsed: true,
+  },
+};
+
+export const WithSubItemActive: Story = {
+  args: {
+    ...Playground.args,
+    children: (
+      <>
+        <NavigationItem
+          label="Item 1"
+          iconLeft="business"
+          defaultOpen
+          subLinks={[
+            { href: "/item-2-1", label: "Item 1.1" },
+            { href: "/item-2-2", label: "Item 1.2", isActive: true },
+          ]}
+        />
+      </>
+    ),
+  },
+};
+
+export const LotsOfItems: Story = {
+  args: {
+    ...Playground.args,
+    children: (
+      <>
+        {Array.from({ length: 20 }).map((_, index) => (
+          <NavigationItem
+            key={index}
+            label={`Item ${index + 1}`}
+            iconLeft="business"
+          />
+        ))}
+      </>
+    ),
+  },
+};
+
+export const WithFooterElements: Story = {
+  args: {
+    ...Playground.args,
+    footerElements: (
+      <>
+        <NavigationItem label="FAQ" iconLeft="help_outline" />
+      </>
+    ),
+  },
+};
+```
+
+## How to test this component
+
+Here are some more advanced stories with more testing coverage and examples that you can read to understand how to test this component.
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Navigation from "../Navigation";
+import NavigationItem from "../../NavigationItem/NavigationItem";
+import * as NavigationStories from "../Navigation.stories";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import {
+  expectNotPresent,
+  expectPresent,
+} from "@internal/test-utils-storybook/test-utils-storybook";
+import { Link, Outlet, Route, Routes, useLocation } from "react-router-dom";
+
+const meta: Meta<typeof Navigation> = {
+  ...NavigationStories.default,
+  parameters: {
+    ...NavigationStories.default.parameters,
+    chromatic: { disableSnapshot: true },
+  },
+  component: Navigation,
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicExampleUsage: Story = {
+  render: () => (
+    <Navigation logo="agregio">
+      <NavigationItem
+        label="Item 1"
+        iconLeft="business"
+        subLinks={[
+          { href: "/page-2/item-1", label: "Item 1.1" },
+          { href: "/page-2/item-2", label: "Item 1.2" },
+        ]}
+      />
+    </Navigation>
+  ),
+};
+
+export const ShouldHandleSubLinksWhenTheNavigationIsNotCollapsed: Story = {
+  render: BasicExampleUsage.render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await canvas.findByText("Item 1");
+    await expectNotPresent(() => canvas.queryByText("Item 1.1"));
+    await expectNotPresent(() => canvas.queryByText("Item 1.2"));
+
+    await user.click(canvas.getByText("Item 1"));
+    await expectPresent(() => canvas.queryByText("Item 1.1"));
+    await expectPresent(() => canvas.queryByText("Item 1.2"));
+
+    await user.click(canvas.getByText("Item 1"));
+    await expectNotPresent(() => canvas.queryByText("Item 1.1"));
+    await expectNotPresent(() => canvas.queryByText("Item 1.2"));
+  },
+};
+
+export const ShouldHandleSubLinksWhenTheNavigationIsCollapsed: Story = {
+  render: BasicExampleUsage.render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await user.click(canvas.getByTestId("navigation-mobile-collapsed-menu"));
+
+    await expect(canvas.getByText("Item 1")).not.toBeVisible();
+    await expectNotPresent(() => canvas.queryByText("Item 1.1"));
+    await expectNotPresent(() => canvas.queryByText("Item 1.2"));
+
+    await user.click(canvas.getByLabelText("Item 1"));
+
+    await canvas.findByText("Item 1");
+    await expectPresent(() => canvas.queryByText("Item 1.1"));
+    await expectPresent(() => canvas.queryByText("Item 1.2"));
+
+    await user.click(canvas.getByTestId("navigation-mobile-collapsed-menu"));
+    await expect(canvas.getByText("Item 1")).not.toBeVisible();
+    await expectNotPresent(() => canvas.queryByText("Item 1.1"));
+    await expectNotPresent(() => canvas.queryByText("Item 1.2"));
+  },
+};
+
+export const BaseStoryForTheOpenStateTests: Story = {
+  render: () => {
+    const AppExample = () => {
+      const location = useLocation();
+      const path = location.pathname;
+
+      return (
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <Navigation logo="agregio" currentPath={path}>
+            <NavigationItem
+              label="Page 1"
+              iconLeft="business"
+              subLinks={[
+                { href: "/page-1/item-1", label: "Item 1.1" },
+                { href: "/page-1/item-2", label: "Item 1.2" },
+              ]}
+            />
+            <NavigationItem
+              label="Page 2"
+              iconLeft="access_time"
+              subLinks={[
+                { href: "/page-2/item-1", label: "Item 2.1" },
+                { href: "/page-2/item-2", label: "Item 2.2" },
+              ]}
+            />
+          </Navigation>
+
+          <main>
+            <ul>
+              <li>
+                <Link to="/">Link to: Home</Link>
+              </li>
+              <li>
+                <Link to="/page-1/item-1">Link to: Item 1.1</Link>
+              </li>
+              <li>
+                <Link to="/page-1/item-2">Link to: Item 1.2</Link>
+              </li>
+              <li>
+                <Link to="/page-2/item-1">Link to: Item 2.1</Link>
+              </li>
+              <li>
+                <Link to="/page-2/item-2">Link to: Item 2.2</Link>
+              </li>
+            </ul>
+
+            <Outlet />
+          </main>
+        </div>
+      );
+    };
+    return (
+      <Routes>
+        <Route element={<AppExample />}>
+          <Route path="/" element={<div>Page: /</div>} />
+          <Route
+            path="/page-1/item-1"
+            element={<div>Page: /page-1/item-1</div>}
+          />
+          <Route
+            path="/page-1/item-2"
+            element={<div>Page: /page-1/item-2</div>}
+          />
+          <Route
+            path="/page-2/item-1"
+            element={<div>Page: /page-2/item-1</div>}
+          />
+          <Route
+            path="/page-2/item-2"
+            element={<div>Page: /page-2/item-2</div>}
+          />
+        </Route>
+      </Routes>
+    );
+  },
+};
+
+// # Tests en commençant avec l'URL / et en cliquant en premier sur "Page 1"
+
+// ## Test : L'utilisateur clique sur "Page 1"
+// - le dropdown de "Page 1" s'ouvre
+
+export const ShouldOpenTheDropDownMenu: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /");
+    await canvas.findByText("Page 1");
+    await expect(canvas.queryByText("Item 1.1")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Item 1.2")).not.toBeInTheDocument();
+    await canvas.findByText("Page 2");
+    await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+
+    await user.click(canvas.getByText("Page 1"));
+
+    await canvas.findByText("Page 1");
+    await canvas.findByText("Item 1.1");
+    await canvas.findByText("Item 1.2");
+    await canvas.findByText("Page 2");
+    await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+    await canvas.findByText("Page: /");
+  },
+};
+
+// ## Test: L'utilisateur clique sur "Page 1" puis à nouveau sur "Page 1"
+// - le dropdown de "Page 1" s'ouvre puis se ferme
+
+export const ShouldToggleTheDropDownMenu: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /");
+    await canvas.findByText("Page 1");
+    await expect(canvas.queryByText("Item 1.1")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Item 1.2")).not.toBeInTheDocument();
+
+    await user.click(canvas.getByText("Page 1"));
+    await canvas.findByText("Item 1.1");
+    await canvas.findByText("Item 1.2");
+
+    await user.click(canvas.getByText("Page 1"));
+    await expect(canvas.queryByText("Item 1.1")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Item 1.2")).not.toBeInTheDocument();
+    await canvas.findByText("Page: /");
+  },
+};
+
+// ## Test : L'utilisateur clique sur "Page 1" puis sur "Page 2"
+// - le dropdown de "Page 1" s'ouvre
+// - le dropdown de "Page 2" s'ouvre
+// - les 2 dropdowns sont ouverts
+
+export const ShouldOpenBothDropDownMenus: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /");
+    await canvas.findByText("Page 1");
+    await expect(canvas.queryByText("Item 1.1")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Item 1.2")).not.toBeInTheDocument();
+    await canvas.findByText("Page 2");
+    await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+
+    await user.click(canvas.getByText("Page 1"));
+    await canvas.findByText("Page 1");
+    await canvas.findByText("Item 1.1");
+    await canvas.findByText("Item 1.2");
+    await canvas.findByText("Page 2");
+    await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+
+    await user.click(canvas.getByText("Page 2"));
+    await canvas.findByText("Page 1");
+    await canvas.findByText("Item 1.1");
+    await canvas.findByText("Item 1.2");
+    await canvas.findByText("Page 2");
+    await canvas.findByText("Item 2.1");
+    await canvas.findByText("Item 2.2");
+    await canvas.findByText("Page: /");
+  },
+};
+
+// ## Test : L'utilisateur clique sur "Page 1" puis sur "Sous menu 1.1"
+// - le dropdown de "Page 1" s'ouvre
+// - "Sous menu 1.1" devient "active"
+
+export const ShouldClickOnPage1AndThenOnItem1: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /");
+    await user.click(canvas.getByText("Page 1"));
+    await user.click(canvas.getByText("Item 1.1"));
+
+    await waitFor(async () => {
+      await canvas.findByText("Page: /page-1/item-1");
+      await canvas.findByText("Page 1");
+      await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await expect(canvas.getByText("Item 1.1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await canvas.findByText("Item 1.2");
+      await canvas.findByText("Page 2");
+      await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+      await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+    });
+  },
+};
+
+// ## Test : L'utilisateur clique sur "Page 1" puis sur "Sous menu 1.1" puis à nouveau sur "Page 1"
+// - le dropdown de "Page 1" s'ouvre
+// - "Sous menu 1.1" devient "active" ainsi que "Page 1"
+// - le dropdown de "Page 1" se ferme mais reste "active"
+
+export const DropdownShouldStayActiveIfItHasASubLinkActiveButIsCosed: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /");
+    await user.click(canvas.getByText("Page 1"));
+    await user.click(canvas.getByText("Item 1.1"));
+    await user.click(canvas.getByText("Page 1"));
+
+    await waitFor(async () => {
+      await canvas.findByText("Page: /page-1/item-1");
+      await canvas.findByText("Page 1");
+      await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await expect(canvas.queryByText("Item 1.1")).not.toBeInTheDocument();
+      await expect(canvas.queryByText("Item 1.2")).not.toBeInTheDocument();
+      await canvas.findByText("Page 2");
+      await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+      await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+    });
+  },
+};
+
+// # Tests en commençant avec l'URL / et en suivant un lien qui mène à "Sous menu 1.1"
+
+// ## Test : L'utilisateur suit un lien qui mène à "Sous menu 1.1"
+// - le dropdown de "Page 1" s'ouvre
+// - "Sous menu 1.1" devient "active"
+
+export const UserFollowsALinkThatLeadsToItem1: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /");
+    await user.click(canvas.getByText("Link to: Item 1.1"));
+
+    await waitFor(async () => {
+      await canvas.findByText("Page 1");
+      await canvas.findByText("Item 1.1");
+      await canvas.findByText("Item 1.2");
+      await canvas.findByText("Page 2");
+      await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+      await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+      await canvas.findByText("Page: /page-1/item-1");
+    });
+  },
+};
+
+// ## Test : L'utilisateur suit un lien qui mène à "Sous menu 1.1" puis clique sur "Page 1"
+// - le dropdown de "Page 1" s'ouvre
+// - "Sous menu 1.1" devient "active"
+// - puis le dropdown de "Page 1" se ferme
+
+export const UserFollowsALinkThatLeadsToItem1AndThenClosesTheDropdown: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /");
+    await user.click(canvas.getByText("Link to: Item 1.1"));
+    await user.click(canvas.getByText("Page 1"));
+
+    await waitFor(async () => {
+      await canvas.findByText("Page 1");
+      await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await expect(canvas.queryByText("Item 1.1")).not.toBeInTheDocument();
+      await expect(canvas.queryByText("Item 1.2")).not.toBeInTheDocument();
+      await canvas.findByText("Page 2");
+      await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+      await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+      await canvas.findByText("Page: /page-1/item-1");
+    });
+  },
+};
+
+// ## Test : L'utilisateur suit un lien qui mène à "Sous menu 1.1" puis clique sur "Page 2"
+// - le dropdown de "Page 1" s'ouvre
+// - "Sous menu 1.1" devient "active"
+// - le dropdown de "Page 2" s'ouvre
+// - les 2 dropdowns sont ouverts
+
+export const UserFollowsALinkThatLeadsToItem1AndThenOpensTheDropdown2: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /");
+    await user.click(canvas.getByText("Link to: Item 1.1"));
+    await user.click(canvas.getByText("Page 2"));
+
+    await waitFor(async () => {
+      await canvas.findByText("Page 1");
+      await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await expect(canvas.getByText("Item 1.1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await canvas.findByText("Item 1.2");
+      await canvas.findByText("Page 2");
+      await canvas.findByText("Item 2.1");
+      await canvas.findByText("Item 2.2");
+      await canvas.findByText("Page: /page-1/item-1");
+    });
+  },
+};
+
+// # Tests en commençant avec l'URL de "Sous menu 1.1"
+
+// ## Test : L'utilisateur ouvre une page qui mène à "Sous menu 1.1"
+
+// - le dropdown de "Page 1" est déjà ouvert
+// - "Sous menu 1.1" est déjà "active"
+
+export const UserStartsFromItem1: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/page-1/item-1"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText("Page: /page-1/item-1");
+    await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+    await canvas.findByText("Item 1.1");
+    await expect(canvas.getByText("Item 1.1").parentElement).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+    await canvas.findByText("Item 1.2");
+    await canvas.findByText("Page 2");
+    await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+    await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+    await canvas.findByText("Page: /page-1/item-1");
+  },
+};
+
+// ## Test : L'utilisateur ouvre une page qui mène à "Sous menu 1.1" puis clique sur "Page 1"
+
+// - le dropdown de "Page 1" est déjà ouvert
+// - "Sous menu 1.1" est déjà "active"
+// - puis le dropdown de "Page 1" se ferme
+export const UserStartsFromItem1AndThenOpensTheDropdown1: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/page-1/item-1"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /page-1/item-1");
+    await user.click(canvas.getByText("Page 1"));
+
+    await waitFor(async () => {
+      await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await expect(canvas.queryByText("Item 1.1")).not.toBeInTheDocument();
+      await expect(canvas.queryByText("Item 1.2")).not.toBeInTheDocument();
+      await canvas.findByText("Page 2");
+      await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+      await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+      await canvas.findByText("Page: /page-1/item-1");
+    });
+  },
+};
+
+// ## Test : L'utilisateur ouvre une page qui mène à "Sous menu 1.1" puis clique sur "Page 2"
+
+// - le dropdown de "Page 1" s'ouvre
+// - le dropdown de "Page 2" s'ouvre
+// - les 2 dropdowns sont ouverts
+export const UserStartsFromItem1AndThenOpensTheDropdown2: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/page-1/item-1"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /page-1/item-1");
+    await user.click(canvas.getByText("Page 2"));
+
+    await waitFor(async () => {
+      await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await expect(canvas.getByText("Item 1.1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await canvas.findByText("Item 1.2");
+      await canvas.findByText("Page 2");
+      await canvas.findByText("Item 2.1");
+      await canvas.findByText("Item 2.2");
+      await canvas.findByText("Page: /page-1/item-1");
+    });
+  },
+};
+
+// ## Test : L'utilisateur ouvre une page qui mène à "Sous menu 1.1" puis suit un lien vers "Sous menu 1.2"
+
+// - le dropdown de "Page 1" est déjà ouvert
+// - "Sous menu 1.1" est déjà "active"
+// - "Sous menu 1.2" devient "active" à la place de "Sous menu 1.1"
+export const UserStartsFromItem1AndThenFollowsALinkToItem12: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/page-1/item-1"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /page-1/item-1");
+    await user.click(canvas.getByText("Link to: Item 1.2"));
+
+    await waitFor(async () => {
+      await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await canvas.findByText("Item 1.1");
+      await expect(canvas.getByText("Item 1.2").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await canvas.findByText("Page 2");
+      await expect(canvas.queryByText("Item 2.1")).not.toBeInTheDocument();
+      await expect(canvas.queryByText("Item 2.2")).not.toBeInTheDocument();
+      await canvas.findByText("Page: /page-1/item-2");
+    });
+  },
+};
+
+// ## Test : L'utilisateur ouvre une page qui mène à "Sous menu 1.1" puis suit un lien vers "Sous menu 2.1"
+
+// - le dropdown de "Page 1" est déjà ouvert
+// - "Sous menu 1.1" est déjà "active"
+// - le dropdown de "Page 2" s'ouvre
+// - "Sous menu 2.1" devient "active" à la place de "Sous menu 1.1"
+// - les 2 dropdowns sont ouverts
+export const UserStartsFromItem1AndThenFollowsALinkToItem21: Story = {
+  render: BaseStoryForTheOpenStateTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/page-1/item-1"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await canvas.findByText("Page: /page-1/item-1");
+    await user.click(canvas.getByText("Link to: Item 2.1"));
+
+    await waitFor(async () => {
+      await canvas.findByText("Page 1");
+      await canvas.findByText("Item 1.1");
+      await canvas.findByText("Item 1.2");
+      await expect(canvas.getByText("Page 2").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await expect(canvas.getByText("Item 2.1").parentElement).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+      await canvas.findByText("Item 2.2");
+      await canvas.findByText("Page: /page-2/item-1");
+    });
+  },
+};
+
+// # Tests pour le NavigationItem avec href="/"
+export const BaseStoryForRootPathTests: Story = {
+  render: () => {
+    const AppExample = () => {
+      const location = useLocation();
+      const path = location.pathname;
+
+      return (
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <Navigation logo="agregio" currentPath={path}>
+            <NavigationItem label="Home" iconLeft="home" href="/" />
+            <NavigationItem label="Page 1" iconLeft="business" href="/page-1" />
+          </Navigation>
+
+          <main>
+            <ul>
+              <li>
+                <Link to="/">Link to: Home</Link>
+              </li>
+              <li>
+                <Link to="/page-1">Link to: Page 1</Link>
+              </li>
+            </ul>
+            <Outlet />
+          </main>
+        </div>
+      );
+    };
+    return (
+      <Routes>
+        <Route element={<AppExample />}>
+          <Route path="/" element={<div>Page: /</div>} />
+          <Route path="/page-1" element={<div>Page: /page-1</div>} />
+        </Route>
+      </Routes>
+    );
+  },
+};
+
+// ## Test : L'item "Home" (href="/") est actif sur la route "/"
+// - "Home" a data-active="true"
+// - "Page 1" a data-active="false"
+export const HomeItemShouldBeActiveOnRootPath: Story = {
+  render: BaseStoryForRootPathTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText("Page: /");
+    await expect(canvas.getByText("Home").parentElement).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+    await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+      "data-active",
+      "false",
+    );
+  },
+};
+
+// ## Test : L'item "Home" (href="/") n'est PAS actif sur une autre route
+// - "Home" a data-active="false"
+// - "Page 1" a data-active="true"
+export const HomeItemShouldNotBeActiveOnOtherPaths: Story = {
+  render: BaseStoryForRootPathTests.render,
+  parameters: {
+    reactRouter: {
+      initialEntries: ["/page-1"],
+      customRoutes: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText("Page: /page-1");
+    await expect(canvas.getByText("Home").parentElement).toHaveAttribute(
+      "data-active",
+      "false",
+    );
+    await expect(canvas.getByText("Page 1").parentElement).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+  },
+};
+
+export const WithPermissionsWrapperOnSubItem: Story = {
+  render: () => {
+    const PermissionsWrapper: React.FC<{ children: React.ReactNode }> = () => {
+      return null;
+    };
+
+    return (
+      <Navigation logo="agregio">
+        <NavigationItem
+          label="Item 1"
+          iconLeft="business"
+          subLinks={[
+            { href: "/page-2/item-1", label: "Item 1.1" },
+            {
+              href: "/page-2/item-2",
+              label: "Item 1.2",
+              wrapperComponent: (children) => (
+                <PermissionsWrapper>{children}</PermissionsWrapper>
+              ),
+            },
+            { href: "/page-2/item-3", label: "Item 1.3" },
+          ]}
+        />
+      </Navigation>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await user.click(canvas.getByText("Item 1"));
+    await canvas.findByText("Item 1.1");
+    await expectNotPresent(() => canvas.queryByText("Item 1.2"));
+    await canvas.findByText("Item 1.3");
+  },
+};
+```
+
+## Developer notes
+
+Here are the notes available for the developer on the built Storybook, you can read them to understand the component and how to use it.
+
+```mdx
+import {
+  Canvas,
+  Meta,
+  Stories,
+  Controls,
+  Source,
+} from "@storybook/addon-docs/blocks";
+
+import * as Navigation from "./Navigation.stories";
+import * as NavigationTests from "./tests/Navigation.stories";
+
+<Meta of={Navigation} />
+
+# Navigation
+
+<Controls of={Navigation.Playground} />
+
+## Usage
+
+Here is a basic example of how to use the `Navigation` component.
+
+The example includes :
+
+- a basic Routes definitions with react-router
+- the `Navigation` component (using the `currentPath` prop to highlight the current active page)
+- a `main` element that will display the page that is currently selected
+
+Your application code may be different (depending on your router and your application structure), but the `Navigation` should work the same way.
+
+<Source of={NavigationTests.BaseStoryForTheOpenStateTests} type="code" dark />
+
+**Please note that this example is using the `currentPath` prop, which is currently experimental.** We are actually testing this feature and it is the way we want to handle the open and active states of the navigation items.
+
+This prop enable a complete internal control of the open and active states of the navigation items.
+
+For example, with this prop, the `Navigation` component will be able to highlight the active item based on the current path.
+It will also allows the dropdown to open if the user follow a link that is one of its `subLinks`.
+
+## Manually control the open and active states of the navigation items
+
+In case you need more control over the open and active states of the navigation items, you can use some some of the following props:
+
+- `initialIsCollapsed` on the `Navigation` component
+- `isActive` on the `NavigationItem` component
+- `defaultOpen` on the `NavigationItem` component
+- `onClick` on the `NavigationItem` component
+- `isActive` on the `subLinks` of the `NavigationItem` component
+
+**Please note that those props are actually considered to be replaced by the `currentPath` prop in the future.**
+
+## Regarding the logos
+
+There is an exhaustive list of logos to display in the `Navigation` component.
+
+This allows us to adjust its position and size to fit the Navigation component.
+
+If you need a logo that is not in the list, feel free to ask us to add it!
+
+<Stories />
+```