@statsbygg/layout 0.1.23 → 0.2.0

package/README.md

@@ -25,6 +25,7 @@ npm install @statsbygg/layout
 ## Peer Dependencies
 
 This package requires:
+
 - `next` >= 14.0.0
 - `react` >= 18.0.0
 - `react-dom` >= 18.0.0
@@ -71,22 +72,23 @@ The routing system uses **URL-Driven Logic**. You define a single `RouteNode` tr
 - **Internal Links**: Any relative path (e.g., `/`, `/about`) is treated as internal to your application (relative to your `basePath`).
 
 #### Scenario A: Standard Application
-*This app sits directly under the main Statsbygg site.*
+
+_This app sits directly under the main Statsbygg site._
 
 ```tsx
 // app/layout.tsx
-import { RootLayout, RouteNode } from '@statsbygg/layout';
+import { RootLayout, RouteNode } from "@statsbygg/layout";
 
 const ROUTES: RouteNode = {
-  label: 'Hjem',
-  path: 'https://statsbygg.no', // External Parent
+  label: "Hjem",
+  path: "https://statsbygg.no", // External Parent
   children: [
     {
-      label: 'My App',
-      path: '/', // App Root (relative to basePath)
+      label: "My App",
+      path: "/", // App Root (relative to basePath)
       children: [
-        { label: 'Page 1', path: '/page-1' },
-        { label: 'Page 2', path: '/page-2' },
+        { label: "Page 1", path: "/page-1" },
+        { label: "Page 2", path: "/page-2" },
       ],
     },
   ],
@@ -101,59 +103,53 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     </html>
   );
 }
-
 ```
 
 #### Scenario B: Deeply Nested Microfrontend
 
-*This app sits deep within a hierarchy of other applications.*
+_This app sits deep within a hierarchy of other applications._
 
 ```tsx
 // app/layout.tsx
 const ROUTES: RouteNode = {
-  label: 'Hjem',
-  path: 'https://statsbygg.no',
+  label: "Hjem",
+  path: "https://statsbygg.no",
   children: [
     {
-      label: 'Parent Route',
-      path: 'https://statsbygg.no/parent-route', // External Parent 2
+      label: "Parent Route",
+      path: "https://statsbygg.no/parent-route", // External Parent 2
       children: [
         {
-          label: 'Your App Name',
-          path: '/', // Your App Root
-          children: [
-            { label: 'Your App Route', path: '/your-app-route' }
-          ]
-        }
-      ]
-    }
-  ]
+          label: "Your App Name",
+          path: "/", // Your App Root
+          children: [{ label: "Your App Route", path: "/your-app-route" }],
+        },
+      ],
+    },
+  ],
 };
-
 ```
 
 ### 2. Handling Dynamic Routes
 
 For pages with dynamic IDs (e.g., `/properties/[id]`), use the `useBreadcrumbs` hook.
 
-**Note:** You only need to define the *dynamic* portion of the path. The layout package automatically prepends the static parents (Home, App Root, etc.) defined in your `ROUTES` tree.
+**Note:** You only need to define the _dynamic_ portion of the path. The layout package automatically prepends the static parents (Home, App Root, etc.) defined in your `ROUTES` tree.
 
 ```tsx
 // app/properties/[id]/page.tsx
-'use client';
-import { useBreadcrumbs } from '@statsbygg/layout';
+"use client";
+import { useBreadcrumbs } from "@statsbygg/layout";
 
 export default function PropertyPage({ params, propertyName }) {
-  
   useBreadcrumbs([
-    { label: 'Properties', href: '/properties' },
+    { label: "Properties", href: "/properties" },
     { label: propertyName, href: `/properties/${params.id}` },
   ]);
 
   return <div>...</div>;
 }
 // Resulting Breadcrumbs: Home > My App > Properties > [Property Name]
-
 ```
 
 ### Using the Global Store
@@ -161,17 +157,17 @@ export default function PropertyPage({ params, propertyName }) {
 The package exports a zustand store for managing global state:
 
 ```tsx
-import { useGlobalStore } from '@statsbygg/layout';
+import { useGlobalStore } from "@statsbygg/layout";
 
 function MyComponent() {
   const { user, theme, setUser, setTheme } = useGlobalStore();
 
   function handleLogin() {
-    setUser({ name: 'John Doe', email: 'john@statsbygg.no' });
+    setUser({ name: "John Doe", email: "john@statsbygg.no" });
   }
 
   function toggleTheme() {
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    setTheme(theme === "light" ? "dark" : "light");
   }
 
   return (
@@ -183,6 +179,7 @@ function MyComponent() {
   );
 }
 ```
+
 ## API Reference
 
 ### RootLayout
@@ -204,16 +201,15 @@ Zustand store hook for global state management.
 ```tsx
 interface GlobalState {
   user: { name: string; email: string } | null;
-  theme: 'light' | 'dark';
-  locale: 'no' | 'en';
+  theme: "light" | "dark";
+  locale: "no" | "en";
   setUser: (user: { name: string; email: string } | null) => void;
-  setTheme: (theme: 'light' | 'dark') => void;
-  setLocale: (locale: 'no' | 'en') => void;
+  setTheme: (theme: "light" | "dark") => void;
+  setLocale: (locale: "no" | "en") => void;
   initialize: () => Promise<void>;
 }
 ```
 
-
 ## Breadcrumbs Behavior
 
 The Breadcrumbs component uses Designsystemet's responsive behavior:
@@ -241,6 +237,7 @@ This package uses [DigDir Designsystemet](https://designsystemet.no) components:
 - `Paragraph`
 
 All styling uses Designsystemet design tokens:
+
 - `--ds-spacing-*` for spacing
 - `--ds-color-*` for colors
 - `--ds-font-size-*` for typography
@@ -249,24 +246,25 @@ All styling uses Designsystemet design tokens:
 
 ```bash
 # Install dependencies
-npm install
+pnpm install
 
 # Build the package
-npm run build
+pnpm build
 
 # Watch mode for development
-npm run dev
+pnpm dev
 
 # Type checking
-npm run type-check
+pnpm type-check
 
 # Linting
-npm run lint
+pnpm lint
 ```
 
 ## Dependencies
 
 This package includes:
+
 - `@digdir/designsystemet-react` 1.12.1
 - `@statsbygg/design-tokens` ^0.2.0
 - `clsx` ^2.0.0
@@ -274,4 +272,4 @@ This package includes:
 
 ## License
 
-Internal use only - Statsbygg
+Internal use only - Statsbygg

package/dist/Breadcrumbs.module.css

@@ -1,6 +1,6 @@
 .wrapper {
   width: 100%;
-  background-color: var(--ds-color-background-tinted);
+  background-color: var(--layout-background, var(--ds-color-background-tinted));
 }
 
 .inner {
@@ -9,10 +9,6 @@
   margin: 0 auto;
 }
 
-.whiteBackground {
-  background-color: white;
-}
-
 .breadcrumbs {
   --dsc-breadcrumbs-color: var(--ds-color-text-default);
 }
@@ -64,8 +60,7 @@
   color: var(--ds-color-text-default);
 }
 
-.link:hover 
-.link:visited{
+.link:hover .link:visited {
   color: var(--ds-color-text-default);
 }
 
@@ -85,4 +80,4 @@
   .inner {
     padding: var(--ds-size-6) var(--ds-size-4) 0;
   }
-}
+}

package/dist/GlobalFooter.module.css

@@ -86,6 +86,11 @@
   font-weight: 500;
 }
 
+.shortcutsContainer .footerList a,
+.socialLinks .footerList a {
+  text-decoration: none;
+}
+
 .footerLeft .footerSection a:hover {
   text-decoration: underline;
 }

package/dist/GlobalHeader.module.css

@@ -4,27 +4,21 @@
   background-color: var(--ds-color-background-tinted);
   top: 0;
   z-index: 100;
-
+  background-color: var(--layout-background, var(--ds-color-background-tinted));
 }
 
-.header, .headerWrapper{
+.header,
+.headerWrapper {
   min-height: 128px;
 }
 
-.whiteBackground,
-.whiteBackground .topBarFixedWrapper,
-.whiteBackground .headerContainer {
-  background-color: white;
-}
-
 .topBarFixedWrapper {
   position: relative;
   left: 0;
   right: 0;
-  background: var(--ds-color-background-tinted);
+  background: var(--layout-background, var(--ds-color-background-tinted));
 }
 
-
 .topBarFixed {
   position: fixed;
   top: 0;
@@ -32,7 +26,7 @@
 
 .topBarContainer {
   max-height: 10rem;
-  max-width: 90rem;  
+  max-width: 90rem;
   margin: 0 auto;
   padding: 0 var(--ds-size-30);
 }
@@ -58,7 +52,7 @@
   left: 0;
   right: 0;
   top: 0;
-  background-color: var(--ds-color-background-tinted);
+  background-color: var(--layout-background, var(--ds-color-background-tinted));
 }
 
 .topBarInner {
@@ -95,8 +89,8 @@
 }
 
 @media (max-width: 1024px) {
-
-  .header, .headerWrapper{
+  .header,
+  .headerWrapper {
     min-height: 112px;
   }
 
@@ -110,8 +104,8 @@
 }
 
 @media (max-width: 768px) {
-
-  .header, .headerWrapper {
+  .header,
+  .headerWrapper {
     min-height: 96px;
   }
 
@@ -138,14 +132,14 @@
     display: none;
   }
 
-
-  .logo { inline-size: 8rem; }
-
+  .logo {
+    inline-size: 8rem;
+  }
 }
 
 @media (max-width: 600px) {
-
-  .header, .headerWrapper {
+  .header,
+  .headerWrapper {
     min-height: 80px;
   }
 
@@ -156,12 +150,11 @@
   .topBarContainer {
     padding: 0 var(--ds-size-6);
   }
-
 }
 
 @media (max-width: 360px) {
-
-  .header, .headerWrapper {
+  .header,
+  .headerWrapper {
     min-height: 74px;
   }
 
@@ -172,5 +165,4 @@
   .topBarInner {
     padding: var(--ds-size-4) 0;
   }
-
-}
+}

package/dist/RootLayout.module.css

@@ -28,4 +28,4 @@
   position: static;
   width: auto;
   height: auto;
-}
+}

package/dist/index.d.ts

@@ -7,10 +7,9 @@ type GlobalHeaderProps = {
     className?: string;
     appBasePath?: string;
     pathname?: string;
-    isWhiteBackground?: boolean;
 };
 
-declare function GlobalHeader({ className, appBasePath, isWhiteBackground }: GlobalHeaderProps): react_jsx_runtime.JSX.Element;
+declare function GlobalHeader({ className, appBasePath }: GlobalHeaderProps): react_jsx_runtime.JSX.Element;
 
 type RouteNode = {
     path: string;
@@ -28,15 +27,20 @@ type AncestorChain = {
 declare function findAppRootWithAncestors(node: RouteNode, ancestors?: RouteNode[]): AncestorChain;
 declare function getBreadcrumbs(routes: RouteNode, pathname: string): BreadcrumbItem[];
 
+/**
+ * Available background color schemes for the layout.
+ * These map to CSS custom properties in RootLayout.module.css
+ */
+type LayoutBackground = "default" | "white" | "alternative";
 type RootLayoutProps = {
     children: React.ReactNode;
     routes: RouteNode;
     appBasePath?: string;
     className?: string;
-    isWhiteBackground?: boolean;
+    background?: LayoutBackground;
 };
 
-declare function RootLayout({ children, routes, appBasePath, className, isWhiteBackground }: RootLayoutProps): react_jsx_runtime.JSX.Element;
+declare function RootLayout({ children, routes, appBasePath, className, background, }: RootLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface GlobalFooterProps {
     className?: string;
@@ -93,10 +97,9 @@ type BreadcrumbsProps = {
     routes: RouteNode;
     appBasePath?: string;
     pathname?: string;
-    isWhiteBackground?: boolean;
 };
 
-declare function SbBreadcrumbs({ className, routes, appBasePath, pathname: propPathname, isWhiteBackground }: BreadcrumbsProps): react_jsx_runtime.JSX.Element | null;
+declare function SbBreadcrumbs({ className, routes, appBasePath, pathname: propPathname, }: BreadcrumbsProps): react_jsx_runtime.JSX.Element | null;
 
 type SmartLinkProps = {
     href: string;