@statsbygg/layout 0.1.17 → 0.1.19

package/README.md

@@ -267,7 +267,7 @@ npm run lint
 ## Dependencies
 
 This package includes:
-- `@digdir/designsystemet-react` ^1.5.1
+- `@digdir/designsystemet-react` 1.12.1
 - `@statsbygg/design-tokens` ^0.2.0
 - `clsx` ^2.0.0
 - `zustand` ^5.0.4

package/dist/Breadcrumbs.module.css

@@ -1,6 +1,5 @@
 .breadcrumbs {
   --dsc-breadcrumbs-color: var(--ds-color-text-default);
-  padding: 2.5rem 0 0 0;
 }
 
 .link {
@@ -16,7 +15,6 @@
 
 .currentLink {
   text-decoration: none;
-  font-weight: 500;
   pointer-events: none;
   color: var(--ds-color-text-default);
 }

package/dist/GlobalFooter.module.css

@@ -1,9 +1,17 @@
 .footer {
   background-color: var(--ds-color-accent-base-active);
-  color: var(--ds-color-neutral-base-contrast-default);
+  color: var(--ds-color-background-tinted);
   padding: var(--ds-size-12) var(--ds-size-8) var(--ds-size-12) var(--ds-size-8);
 }
 
+.footer a, 
+.footer a:hover,
+.footer a:active,
+.footer a:focus,
+.footer a:visited {
+  color: var(--ds-color-background-tinted);
+}
+
 .footerContent {
   font-family: var(--ds-font-family);
   display: grid;
@@ -43,7 +51,6 @@
 }
 
 .sectionHeading {
-  color: var(--ds-color-base-contrast-default);
   font-family: "IBM Plex Sans";
   font-size: var(--ds-font-size-4);
   font-style: normal;
@@ -71,15 +78,13 @@
   gap: var(--ds-size-1);
 }
 
+.footerList li {
+  margin-top: 0;
+}
+
 .footerSection a {
-  color: var(--ds-color-neutral-base-contrast-default);
   text-decoration: none;
   font-size: var(--ds-font-size-3);
-  transition: opacity 0.2s;
-}
-
-.footerSection a:hover {
-  opacity: 0.8;
 }
 
 .externalLink {
@@ -123,7 +128,6 @@
 .contactHeadingWide,
 .shortcutsHeadingWide {
   margin-top: 0;
-  color: var(--ds-color-background-default);
   font-family: var(--ds-font-family);
   font-size: var(--ds-font-size-4);
   font-style: normal;
@@ -136,7 +140,6 @@
 .contactHeading {
   margin-top: 0;
   margin-bottom: var(--ds-size-2);
-  color: var(--ds-color-background-default);
   font-family: var(--ds-font-family);
   font-size: var(--ds-font-size-4);
   font-style: normal;
@@ -149,7 +152,6 @@
 .contactSection a {
   font-size: 0.875rem;
   line-height: 1.6;
-  color: var(--ds-color-neutral-base-contrast-default);
   text-decoration: none;
   margin: 0;
 }
@@ -179,7 +181,6 @@
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--ds-color-neutral-base-contrast-default);
   text-align: right;
   margin: 0;
 }

package/dist/GlobalHeader.module.css

@@ -1,25 +1,70 @@
 .header {
+  position: relative;
+  min-height: 179px;
+  min-width: 360px;
   background-color: var(--ds-color-background-tinted);
-  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
   top: 0;
   z-index: 100;
+
+}
+
+.topBarFixedWrapper {
+  position: relative;
+  left: 0;
+  right: 0;
+  background: var(--ds-color-background-tinted);
+}
+
+.topBarFixed {
+  position: fixed;
+  top: 0;
+}
+
+.topBarContainer {
+  max-height: 10rem;
+  max-width: 90rem;  
+  margin: 0 auto;
+  padding: 0 var(--ds-size-30);
+}
+
+.topBarContainer.topBarHidden {
+  max-height: 0;
+  opacity: 0;
 }
 
 .header.menuOpen {
   background-color: var(--ds-color-accent-surface-tinted);
+  position: fixed;
+  left: 0;
+  right: 0;
 }
 
-.headerContainer {
+.header.menuOpen .topBarFixedWrapper {
+  background-color: var(--ds-color-accent-surface-tinted);
+}
+
+.headerBreadcrumbs {
+  max-width: 90rem;
+  padding: var(--ds-size-6) var(--ds-size-30) 0;
+  display: block;
   max-width: 90rem;
   margin: 0 auto;
-  padding: 0 var(--ds-size-30);
 }
 
-.topBarContainer {
+.headerContainer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  background-color: var(--ds-color-background-tinted);
+}
+
+.topBarInner {
   display: flex;
+  min-width: 19rem;
   justify-content: space-between;
   align-items: center;
-  padding: 1.25rem 0;
+  padding: var(--ds-size-10) 0;
 }
 
 .logo {
@@ -33,7 +78,7 @@
 .actionsContainer {
   display: flex;
   align-items: stretch;
-  gap: var(--ds-size-9);
+  gap: var(--ds-size-8);
   min-height: inherit;
 }
 
@@ -47,21 +92,43 @@
   background: transparent;
 }
 
+@media (max-width: 1024px) {
+
+  .header {
+    min-height: 155px;
+  }
+
+  .topBarContainer {
+    padding: 0 var(--ds-size-10);
+  }
+
+  .topBarInner {
+    padding: var(--ds-size-8) 0;
+  }
+
+  .headerBreadcrumbs {
+    padding: var(--ds-size-6) var(--ds-size-10) 0;
+  }
+}
+
 @media (max-width: 768px) {
-  .headerContainer {
-    padding: 0 var(--ds-spacing-4);
+
+  .header {
+    min-height: 144px;
   }
 
   .topBarContainer {
+    padding: 0 var(--ds-size-8);
+  }
+
+  .topBarInner {
     flex-wrap: wrap;
-    padding: var(--ds-spacing-4) 0;
+    padding: var(--ds-size-6) 0;
   }
 
   .actionsContainer {
     order: 3;
-    width: 100%;
-    flex-direction: column;
-    gap: var(--ds-spacing-3);
+    gap: var(--ds-size-6);
   }
 
   .searchInput {
@@ -69,6 +136,54 @@
     min-width: auto;
   }
 
+  .searchButtonLabel {
+    display: none;
+  }
+
 
   .logo { inline-size: 8rem; }
+
+  .headerBreadcrumbs {
+    padding: var(--ds-size-6) var(--ds-size-8) 0;
+  }
+}
+
+@media (max-width: 600px) {
+
+  .header {
+    min-height: 128px;
+  }
+
+  .topBarInner {
+    padding: var(--ds-size-4) 0;
+  }
+
+  .topBarContainer {
+    padding: 0 var(--ds-size-6);
+  }
+
+  .headerBreadcrumbs {
+    padding: var(--ds-size-6) var(--ds-size-6);
+  }
+
+}
+
+@media (max-width: 360px) {
+
+  .header {
+    min-height: 122px;
+  }
+
+  .topBarContainer {
+    padding: 0 var(--ds-size-4);
+  }
+
+  .topBarInner {
+    padding: var(--ds-size-4) 0;
+  }
+
+  .headerBreadcrumbs {
+    padding: var(--ds-size-6) var(--ds-size-4) 0;
+  }
+
 }

package/dist/MenuButton.module.css

@@ -20,6 +20,12 @@
   background-color: var(--ds-color-neutral-base-default);
 }
 
+@media (max-width: 768px) {
+  .menuButtonLabel {
+    display: none;
+  }
+}
+
 .devContainer {
   display: flex;
   gap: var(--ds-spacing-4);

package/dist/NavigationMenu.module.css

@@ -1,16 +1,16 @@
 .menuOverlay {
-  position: fixed;
-  top: 5rem;
+  position: absolute;
+  top: 70%;
   left: 0;
   right: 0;
   margin: 0 auto;
-  bottom: 0; 
+  height: calc(100vh - 5rem);
+  height: calc(100dvh - 5rem); 
   background-color: var(--ds-color-accent-surface-tinted);
   z-index: 99;
   overflow-y: auto;
   transform-origin: top right;
   border-radius: 0;
-  max-width: 90rem;
   opacity: 1;
   transform: scale(1);
   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
@@ -25,31 +25,32 @@
 
 .container {
   margin: 0 auto;
-  padding: var(--ds-size-18) var(--ds-size-8);
+  padding: var(--ds-size-22) var(--ds-size-18);
   display: flex;
   flex-direction: column;
-  gap: var(--ds-size-18);
+  max-width: 900px;
+  gap: var(--ds-size-22);
 }
 
 .searchSection {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--ds-size-8);
+  gap: var(--ds-size-2);
   opacity: 0;
   animation: fadeInScale 0.35s ease-out 0.1s forwards;
 
-  & h1 {
-    font-size: var(--ds-font-size-7);
-    font-weight: 500;
-    font-family: Arial, Helvetica, sans-serif;
-    line-height: 130%;
-    letter-spacing: -0.00469rem;
-  }
+
+}
+
+.helpTitle {
+  color: var(--ds-color-text-default);
+  font-weight: 700;
+  letter-spacing: 0.105px;
 }
 
 .searchField {
-  max-width: 32rem;
+  max-width: 37.5rem;
   width: 100%;
 }
 
@@ -81,9 +82,9 @@
 }
 
 .itemsGrid {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   gap: var(--ds-size-8);
-  flex-wrap: wrap;
 }
 
 .itemsGridThreeCol {
@@ -124,20 +125,9 @@
   gap: var(--ds-size-3);
 }
 
-@media (max-width: 768px) {
-  .subsectionsGrid {
-    flex-direction: column;
-    gap: 2rem;
-  }
-
-  .subsection {
-    min-width: 100%;
-  }
-}
-
 .backdrop {
   position: fixed;
-  top: 5rem;
+  top: 8rem;
 
   left: 0;
   right: 0;
@@ -194,19 +184,27 @@
 }
 
 @media (max-width: 1024px) {
-  .container {
-    padding: 2.5rem 3.75rem 3.5rem;
-  }
+
+
 }
 
 @media (max-width: 768px) {
+  .subsectionsGrid {
+    flex-direction: column;
+    gap: var(--ds-size-12);
+  }
+
+  .subsection {
+    min-width: 100%;
+  }
+
   .menuOverlay {
-    top: 4rem;
+    top: 5rem;
   }
 
   .container {
-    padding: 2rem 1.5rem 3rem;
-    gap: 2.5rem;
+    padding: var(--ds-size-12) var(--ds-size-12);
+    gap: var(--ds-size-18);
   }
 
   .searchSection {
@@ -219,6 +217,36 @@
 
   .itemsGrid {
     flex-direction: column;
-    gap: 1.5rem;
+  }
+
+  .searchField {
+    max-width: 48rem;
+  }
+}
+
+@media (max-width: 600px) {
+  .itemsGrid {
+    grid-template-columns: 1fr;
+    gap: var(--ds-size-7);
+  } 
+
+  .container {
+    padding: var(--ds-size-18) var(--ds-size-12);
+    gap: var(--ds-size-18);
+  }
+
+  .searchField {
+    max-width: 48rem;
+  }
+}
+
+@media (max-width: 360px) {
+  .itemsGrid {
+    grid-template-columns: 1fr;
+  } 
+
+  .container {
+    padding: var(--ds-size-18) var(--ds-size-4);
+    gap: var(--ds-size-18);
   }
 }

package/dist/NavigationMenuItem.module.css

@@ -10,17 +10,25 @@
 
 .parentLink {
   color: var(--ds-color-text-subtle);
-  font-size: var(--ds-font-size-5);
-  line-height: var(--ds-line-height-sm);
-  text-decoration: underline;
+  font-size: var(--ds-font-size-4);
+  line-height: 150%;
+  text-decoration: none;
   display: inline-flex;
-  align-items: center;
-  gap: var(--ds-size-2);
+  align-self: flex-start;
+  gap: var(--ds-size-1);
   line-height: 150%;
   letter-spacing: 0.00656rem;
   text-underline-offset: 6px;
 }
 
+.arrowIcon {
+  width: 1.6875rem; /* 27px */
+  height: 1.6875rem;
+  flex-shrink: 0;
+  margin-left: auto;
+  margin-top: 3px;
+}
+
 .childItems {
   list-style: none;
   margin: 0;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as zustand_middleware from 'zustand/middleware';
 import * as zustand from 'zustand';
-import { ReactNode } from 'react';
+import { RefObject, ReactNode } from 'react';
 
 type RouteNode = {
     path: string;
@@ -19,6 +19,17 @@ type AncestorChain = {
 declare function findAppRootWithAncestors(node: RouteNode, ancestors?: RouteNode[]): AncestorChain;
 declare function getBreadcrumbs(routes: RouteNode, pathname: string): BreadcrumbItem[];
 
+type GlobalHeaderProps = {
+    className?: string;
+    routes: RouteNode;
+    appBasePath?: string;
+    pathname?: string;
+};
+
+declare function GlobalHeader({ className, routes, appBasePath, pathname }: GlobalHeaderProps & {
+    pathname?: string;
+}): react_jsx_runtime.JSX.Element;
+
 type RootLayoutProps = {
     children: React.ReactNode;
     routes: RouteNode;
@@ -46,6 +57,8 @@ type GlobalState = {
     locale: string;
     isMenuOpen: boolean;
     breadcrumbs: BreadcrumbItem[] | null;
+    searchInputRef: RefObject<HTMLInputElement | null> | null;
+    setSearchInputRef: (ref: RefObject<HTMLInputElement | null> | null) => void;
     setUser: (user: GlobalState['user']) => void;
     setTheme: (theme: Theme) => void;
     setLocale: (locale: string) => void;
@@ -101,9 +114,10 @@ type MenuSubsection = {
 };
 type MenuSection = {
     title: string;
+    hideTitle?: boolean;
     layout?: 'columns' | 'subsections';
     items?: MenuItem[];
     subsections?: MenuSubsection[];
 };
 
-export { type BreadcrumbItem, GlobalFooter, type GlobalFooterProps, type GlobalState, type MenuItem, type MenuSection, type MenuSubsection, RootLayout, type RootLayoutProps, type RouteNode, SmartLink, type SmartLinkProps, findAppRootWithAncestors, getBreadcrumbs, useBreadcrumbs, useGlobalStore };
+export { type BreadcrumbItem, GlobalFooter, type GlobalFooterProps, GlobalHeader, type GlobalHeaderProps, type GlobalState, type MenuItem, type MenuSection, type MenuSubsection, RootLayout, type RootLayoutProps, type RouteNode, SmartLink, type SmartLinkProps, findAppRootWithAncestors, getBreadcrumbs, useBreadcrumbs, useGlobalStore };