Work on navigation components

.storybook/preview.tsx

@@ -13,6 +13,7 @@ import { addons } from '@storybook/preview-api';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { DocsContainer, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
 
+import { NuqsAdapter } from 'nuqs/adapters/react';
 import { BaklavaProvider } from '../src/context/BaklavaProvider.tsx';
 
 
@@ -27,7 +28,13 @@ channel.on(DARK_MODE_EVENT_NAME, isDark => { isDarkInitial = isDark; });
 
 const preview = {
   decorators: [
-    Story => <BaklavaProvider><Story/></BaklavaProvider>,
+    Story => (
+      <NuqsAdapter>
+        <BaklavaProvider>
+          <Story/>
+        </BaklavaProvider>
+      </NuqsAdapter>
+    ),
   ],
 
   parameters: {
@@ -141,11 +148,6 @@ const preview = {
                 'TextAreaField',
               ],
             ],
-            'navigations',
-            [
-              'Tabs',
-              'Stepper',
-            ],
             'tables',
             [
               'DataTableEager',
@@ -154,6 +156,12 @@ const preview = {
               'SearchInput',
               'MultiSearch',
             ],
+            'navigation',
+            [
+              'Tabs',
+              'Stepper',
+              'Breadcrumbs',
+            ],
           ],
           'layouts',
           [
@@ -162,11 +170,9 @@ const preview = {
             'PageLayout',
             'AppLayout',
             [
-              'Logo',
               'Header',
               'Nav',
               'Sidebar',
-              'Breadcrumbs',
             ],
             'PublicLayout',
           ],

app/Demo.tsx

@@ -5,15 +5,15 @@
 import { Link } from '../src/components/actions/Link/Link.tsx';
 import { Icon } from '../src/components/graphics/Icon/Icon.tsx';
 import { Panel } from '../src/components/containers/Panel/Panel.tsx';
-
+import { Breadcrumbs } from '../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx';
 import { FortanixLogo } from '../src/fortanix/FortanixLogo/FortanixLogo.tsx';
+
 import { UserMenu } from '../src/layouts/AppLayout/Header/UserMenu.tsx';
 import { AccountSelector } from '../src/layouts/AppLayout/Header/AccountSelector.tsx';
 import { SolutionSelector } from '../src/layouts/AppLayout/Header/SolutionSelector.tsx';
 import { Header } from '../src/layouts/AppLayout/Header/Header.tsx';
 import { Sidebar } from '../src/layouts/AppLayout/Sidebar/Sidebar.tsx';
 import { Nav } from '../src/layouts/AppLayout/Nav/Nav.tsx';
-import { Breadcrumbs } from '../src/layouts/AppLayout/Breadcrumbs/Breadcrumbs.tsx';
 import { AppLayout } from '../src/layouts/AppLayout/AppLayout.tsx';
 
 

app/lib.ts

@@ -80,9 +80,11 @@ export { Tag } from '../src/components/text/Tag/Tag.tsx';
 // Lists
 export { PropertyList } from '../src/components/lists/PropertyList/PropertyList.tsx';
 
-// Navigations
-export { Stepper } from '../src/components/navigations/Stepper/Stepper.tsx';
-export { Tab, Tabs } from '../src/components/navigations/Tabs/Tabs.tsx';
+// Navigation
+export { Stepper } from '../src/components/navigation/Stepper/Stepper.tsx';
+export { Tabs } from '../src/components/navigation/Tabs/Tabs.tsx';
+export { Tab } from '../src/components/navigation/Tabs/Tabs.tsx'; // Deprecated, please use `<Tabs.Tab>` instead
+export { Breadcrumbs } from '../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx';
 
 // Overlays
 export { SpinnerModal } from '../src/components/overlays/SpinnerModal/SpinnerModal.tsx';
@@ -117,7 +119,6 @@ export { FormLayout } from '../src/layouts/FormLayout/FormLayout.tsx';
 
 export { PublicLayout } from '../src/layouts/PublicLayout/PublicLayout.tsx';
 
-export { Breadcrumbs } from '../src/layouts/AppLayout/Breadcrumbs/Breadcrumbs.tsx';
 export { Header } from '../src/layouts/AppLayout/Header/Header.tsx';
 export { AccountSelector } from '../src/layouts/AppLayout/Header/AccountSelector.tsx';
 export { SolutionSelector } from '../src/layouts/AppLayout/Header/SolutionSelector.tsx';

package.json

@@ -115,6 +115,7 @@
     "react-error-boundary": "^6.0.0",
     "classnames": "^2.5.1",
     "zustand": "^5.0.5",
+    "nuqs": "^2.4.3",
     "@floating-ui/react": "^0.27.12",
     "react-table": "^7.8.0",
     "react-datepicker": "^8.0.0",

package.json.js

@@ -176,6 +176,7 @@ const packageConfig = {
     'react-error-boundary': '^6.0.0',
     'classnames': '^2.5.1',
     'zustand': '^5.0.5',
+    'nuqs': '^2.4.3',
 
     '@floating-ui/react': '^0.27.12',
     'react-table': '^7.8.0',

src/layouts/AppLayout/Breadcrumbs/Breadcrumbs.tsx → src/components/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -114,7 +114,7 @@ type BreadcrumbsProps = React.PropsWithChildren<ComponentProps<'nav'> & {
 }>;
 
 /**
- * An ordered set of links forming the path of the current page.
+ * Breadcrumbs component, displaying an ordered set of links forming the path of the current location of the user.
  */
 export const Breadcrumbs = Object.assign(
   (props: BreadcrumbsProps) => {

src/components/navigation/Stepper/Stepper.module.scss

@@ -0,0 +1,182 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-stepper {
+    @include bk.component-base(bk-stepper);
+
+    --bk-stepper-indicator-size: #{bk.rem-from-px(28)};
+
+    > ol {
+      display: contents;
+    }
+
+    display: grid;
+
+    &.bk-stepper--vertical {
+      grid-auto-flow: row;
+      row-gap: bk.$spacing-9;
+    }
+    &.bk-stepper--horizontal {
+      grid-auto-flow: column;
+      column-gap: bk.$spacing-9;
+    }
+
+    .bk-stepper__step {
+      cursor: pointer;
+
+      display: list-item; // Needed for `counter(list-item)`
+      list-style: none; // Disable the default `::marker`
+      color: bk.$theme-stepper-text-disabled;
+
+      // Note: we need this container element, since we cannot make the `li` a flex container without also losing the
+      // `list-item` counter (including things like `<li value="5">` which is hard to replicate in CSS).
+      .bk-stepper__step__action {
+        // display: grid;
+        // place-content: center;
+
+        display: flex;
+        align-items: center;
+        gap: bk.$spacing-3;
+
+        .bk-stepper__step__indicator {
+          // Render as circle
+          flex-shrink: 0;
+          aspect-ratio: 1;
+          inline-size: var(--bk-stepper-indicator-size);
+          border: bk.$size-2 solid #{bk.$theme-stepper-border-disabled};
+          border-radius: 50%;
+
+          font-weight: bk.$font-weight-bold;
+          font-size: bk.$font-size-m;
+
+          display: grid;
+          place-content: center;
+
+          &:empty::before {
+            content: counter(list-item);
+          }
+
+          .bk-stepper__step__indicator__icon { --keep: ; }
+        }
+
+        .bk-stepper__step__label { --keep: ; }
+      }
+
+      // The currently active step
+      &[aria-current="step"] {
+        .bk-stepper__step__action {
+          color: bk.$theme-stepper-text-selected;
+
+          .bk-stepper__step__indicator {
+            border-color: bk.$theme-stepper-border-default;
+            background-color: bk.$theme-stepper-background-default;
+            color: bk.$theme-stepper-text-selected-number;
+          }
+        }
+      }
+    }
+
+
+
+
+    /*
+    --bk-stepper-indicator-size: #{bk.rem-from-px(28)};
+    display: flex;
+
+    > ol {
+      display: contents;
+    }
+
+    &.bk-stepper--horizontal {
+      flex-direction: row;
+      column-gap: bk.$spacing-9;
+    }
+
+    &.bk-stepper--vertical {
+      flex-direction: column;
+      row-gap: bk.$spacing-9;
+
+      // Draw a line between subsequent items
+      li + li .bk-stepper__step__indicator {
+        &::before {
+          content: '';
+          position: absolute;
+          inset-block-start: calc(-1 * bk.$spacing-9 - bk.$size-2);
+          inset-inline-start: calc(50% - bk.$size-2 / 2);
+          inline-size: 0;
+          block-size: bk.$spacing-9;
+          border-inline-start: bk.$size-2 solid bk.$theme-stepper-border-disabled;
+        }
+      }
+    }
+
+    .bk-stepper__step {
+      cursor: pointer;
+
+      display: flex;
+      align-items: center;
+      color: bk.$theme-stepper-text-disabled;
+
+      .bk-stepper__step__indicator {
+        position: relative; // Needed for the vertical line `position: absolute`
+        flex-shrink: 0;
+
+        margin-inline-end: bk.$spacing-3;
+        aspect-ratio: 1;
+        inline-size: var(--bk-stepper-indicator-size);
+
+        border: bk.$size-2 solid #{bk.$theme-stepper-border-disabled};
+        border-radius: 50%;
+        font-weight: bk.$font-weight-bold;
+        font-size: bk.$font-size-m;
+
+        display: grid;
+        place-content: center;
+
+        .bk-stepper__step__indicator__icon {
+          font-size: bk.$font-size-xs;
+        }
+      }
+
+      .bk-stepper__step__title {
+        font-size: bk.$font-size-m;
+      }
+
+      .bk-stepper__step__optional {
+        margin-inline-start: bk.$spacing-2;
+        font-size: bk.$font-size-xs;
+      }
+    }
+
+    // Any steps we've already visited
+    .bk-stepper__step--checked {
+      color: bk.$theme-stepper-text-selected;
+
+      .bk-stepper__step__indicator {
+        border-color: bk.$theme-stepper-border-default;
+      }
+    }
+
+    // The currently active step
+    [aria-current="true"] {
+      .bk-stepper__step {
+        color: bk.$theme-stepper-text-selected;
+
+        .bk-stepper__step__indicator {
+          border-color: bk.$theme-stepper-border-default;
+          background-color: bk.$theme-stepper-background-default;
+          color: bk.$theme-stepper-text-selected-number;
+        }
+      }
+    }
+
+    .bk-stepper__step--disabled {
+      cursor: not-allowed;
+    }
+    */
+  }
+}