chore(storefront): fix issues

apps/_components/src/CodeSnippet/CodeSnippet.tsx

@@ -28,16 +28,16 @@ const plugins = [
 
 type CodeSnippetProps = {
   language?: 'css' | 'html' | 'ts' | 'markdown' | 'json';
-  children?: string;
-  className?: string;
   syntax?: string;
-};
+  children: string;
+} & React.HTMLAttributes<HTMLDivElement>;
 
 const CodeSnippet = ({
   language = 'markdown',
-  children = '',
   className,
   syntax = 'js',
+  children,
+  ...rest
 }: CodeSnippetProps) => {
   const [toolTipText, setToolTipText] = useState('Kopier');
   const [snippet, setSnippet] = useState('');
@@ -76,6 +76,7 @@ const CodeSnippet = ({
     <div
       className={cl(classes.codeSnippet, className)}
       data-ds-color-mode='dark'
+      {...rest}
     >
       {snippet && (
         <>

apps/_components/src/Header/Header.module.css

@@ -49,6 +49,8 @@
   display: flex;
   margin: 0;
   padding: 0;
+  max-width: 100%;
+  align-items: flex-start;
 }
 
 .item {
@@ -113,8 +115,8 @@
   border-color: var(--ds-color-neutral-border-strong);
 }
 
-@media (max-width: 991.98px) {
-  .header {
+.hamburger {
+  &.header {
     height: 72px;
   }
 
@@ -134,6 +136,53 @@
     flex-direction: column;
     display: none;
     padding: 20px 0;
+    width: 100%;
+  }
+
+  .item {
+    padding: 20px 0;
+    margin-left: 16px;
+  }
+
+  .active {
+    display: block;
+  }
+
+  .item .active {
+    display: inline-block;
+  }
+
+  .linkIcon {
+    place-items: start;
+  }
+
+  .logo {
+    height: 26px;
+  }
+}
+
+@media (max-width: 900px) {
+  &.header {
+    height: 72px;
+  }
+
+  .toggle {
+    display: block;
+  }
+
+  .menu {
+    border-top: 1px solid #e2e2e2;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    right: 0;
+    top: 71px;
+    background-color: white;
+    box-shadow: var(--ds-shadow-lg);
+    flex-direction: column;
+    display: none;
+    padding: 20px 0;
+    width: 100%;
   }
 
   .item {

apps/_components/src/Header/Header.tsx

@@ -1,10 +1,10 @@
 'use client';
-import { SkipLink } from '@digdir/designsystemet-react';
+import { Paragraph, SkipLink } from '@digdir/designsystemet-react';
 import { MenuHamburgerIcon, XMarkIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import classes from './Header.module.css';
 import { DsLogo } from './logos/ds-logo';
@@ -14,19 +14,69 @@ import { GithubLogo } from './logos/github-logo';
 type HeaderProps = {
   menu: { name: string; href: string }[];
   betaTag?: boolean;
+  skipLink?: boolean;
+};
+
+/**
+ * Detect if any items have wrapped to a new line
+ */
+const detectWrap = (items: HTMLCollection) => {
+  const wrappedItems = [];
+  let prevItem: DOMRect | null = null;
+
+  for (let i = 0; i < items.length; i++) {
+    const currItem = items[i].getBoundingClientRect();
+
+    if (prevItem) {
+      const prevItemTop = prevItem.bottom;
+      const currItemTop = currItem.bottom;
+
+      // if current's item top position is different from previous
+      // that means that the item is wrapped
+      if (prevItemTop < currItemTop) {
+        wrappedItems.push(items[i]);
+      }
+    }
+
+    prevItem = currItem;
+  }
+
+  return wrappedItems;
 };
 
 /**
  * Only works in next.js projects
  */
-const Header = ({ menu, betaTag }: HeaderProps) => {
+const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => {
   const [open, setOpen] = useState(false);
+  const [isHamburger, setIsHamburger] = useState(false);
+  const menuRef = useRef<HTMLUListElement>(null);
+  const headerRef = useRef<HTMLElement>(null);
   const pathname = usePathname();
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (isHamburger) return;
+      if (menuRef.current && headerRef.current) {
+        const wrappedItems = detectWrap(menuRef.current.children);
+        setIsHamburger(wrappedItems.length > 0);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [menu, isHamburger]);
+
   return (
     <>
-      <SkipLink href='#main'>Hopp til hovedinnhold</SkipLink>
-      <header className={classes.header}>
+      {skipLink ? (
+        <SkipLink href='#main'>Hopp til hovedinnhold</SkipLink>
+      ) : null}
+      <header
+        className={cl(classes.header, isHamburger && classes.hamburger)}
+        ref={headerRef}
+      >
         <div className={classes.container}>
           <div className={classes.logoContainer}>
             <Link
@@ -44,31 +94,35 @@ const Header = ({ menu, betaTag }: HeaderProps) => {
             <button
               aria-expanded={open}
               aria-label='Meny'
-              className={classes.toggle}
+              className={cl(classes.toggle, 'ds-focus')}
               onClick={() => {
                 setOpen(!open);
               }}
             >
               {open && <XMarkIcon fontSize={26} color='#1E2B3C' />}
               {!open && <MenuHamburgerIcon fontSize={26} color='#1E2B3C' />}
             </button>
-            <ul className={cl(classes.menu, open && classes.active)}>
+            <ul
+              ref={menuRef}
+              className={cl(classes.menu, open && classes.active)}
+            >
               {menu.map((item, index) => (
                 <li className={classes.item} key={index}>
-                  <Link
-                    suppressHydrationWarning
-                    href={item.href}
-                    onClick={() => setOpen(false)}
-                    prefetch={false}
-                    className={cl(
-                      pathname.includes(item.href) && classes.active,
-                      classes.link,
-                      'ds-paragraph--md',
-                      'ds-focus',
-                    )}
-                  >
-                    {item.name}
-                  </Link>
+                  <Paragraph size='md' asChild>
+                    <Link
+                      suppressHydrationWarning
+                      href={item.href}
+                      onClick={() => setOpen(false)}
+                      prefetch={false}
+                      className={cl(
+                        pathname.includes(item.href) && classes.active,
+                        classes.link,
+                        'ds-focus',
+                      )}
+                    >
+                      {item.name}
+                    </Link>
+                  </Paragraph>
                 </li>
               ))}
               <li
@@ -80,7 +134,6 @@ const Header = ({ menu, betaTag }: HeaderProps) => {
               >
                 <Link
                   href='https://github.com/digdir/designsystemet'
-                  target='_blank'
                   className={cl(classes.linkIcon, classes.github, 'ds-focus')}
                   title='Designsystemets GitHub-repositorium'
                 >
@@ -90,7 +143,6 @@ const Header = ({ menu, betaTag }: HeaderProps) => {
               <li className={cl(classes.item, classes.itemIcon)}>
                 <Link
                   href='https://www.figma.com/@designsystemet'
-                  target='_blank'
                   className={cl(classes.linkIcon, classes.figma, 'ds-focus')}
                   title='Designsystemets Figma-prosjekt'
                 >

apps/_components/src/index.ts

@@ -3,3 +3,6 @@ export { Container } from './Container/Container';
 export { ClipboardButton } from './ClipboardButton/ClipboardButton';
 export { ColorModal } from './ColorModal/ColorModal';
 export { Header } from './Header/Header';
+export { Figma } from './logos/Figma';
+export { Github } from './logos/Github';
+export { Slack } from './logos/Slack';

apps/_components/src/logos/Figma.tsx

@@ -0,0 +1,30 @@
+type FigmaProps = React.HTMLAttributes<SVGElement>;
+
+export function Figma(rest: FigmaProps) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...rest}
+    >
+      <g clipPath='url(#clip0_38_168)'>
+        <path
+          d='M15.3321 8.66788C16.1984 8.64188 17.0204 8.27949 17.624 7.65755C18.2275 7.03561 18.5651 6.20304 18.5651 5.33638C18.5651 4.46973 18.2275 3.63715 17.624 3.01521C17.0204 2.39327 16.1984 2.03088 15.3321 2.00488H8.66809C7.80183 2.03088 6.97976 2.39327 6.3762 3.01521C5.77265 3.63715 5.43508 4.46973 5.43508 5.33638C5.43508 6.20304 5.77265 7.03561 6.3762 7.65755C6.97976 8.27949 7.80183 8.64188 8.66809 8.66788C7.79426 8.68302 6.96133 9.04078 6.34871 9.6641C5.7361 10.2874 5.39282 11.1264 5.39282 12.0004C5.39282 12.8744 5.7361 13.7134 6.34871 14.3367C6.96133 14.96 7.79426 15.3177 8.66809 15.3329C7.79852 15.3542 6.97174 15.7146 6.36426 16.3371C5.75677 16.9597 5.41673 17.7951 5.41673 18.6649C5.41673 19.5347 5.75677 20.3701 6.36426 20.9926C6.97174 21.6152 7.79852 21.9756 8.66809 21.9969C9.5518 21.9964 10.3992 21.645 11.0239 21.02C11.6487 20.3951 11.9998 19.5476 12.0001 18.6639V8.66788H15.3321Z'
+          fill='#202C3D'
+        />
+        <path
+          d='M15.332 15.3322C17.1722 15.3322 18.664 13.8404 18.664 12.0002C18.664 10.16 17.1722 8.66821 15.332 8.66821C13.4918 8.66821 12 10.16 12 12.0002C12 13.8404 13.4918 15.3322 15.332 15.3322Z'
+          fill='#202C3D'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_38_168'>
+          <rect width='24' height='24' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

apps/_components/src/logos/Github.tsx

@@ -0,0 +1,33 @@
+type GithubProps = React.HTMLAttributes<SVGElement>;
+
+export function Github(rest: GithubProps) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...rest}
+    >
+      <g clipPath='url(#clip0_38_169)'>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M12 2C6.475 2 2 6.475 2 12C2 16.425 4.8625 20.1625 8.8375 21.4875C9.3375 21.575 9.525 21.275 9.525 21.0125C9.525 20.775 9.5125 19.9875 9.5125 19.15C7 19.6125 6.35 18.5375 6.15 17.975C6.0375 17.6875 5.55 16.8 5.125 16.5625C4.775 16.375 4.275 15.9125 5.1125 15.9C5.9 15.8875 6.4625 16.625 6.65 16.925C7.55 18.4375 8.9875 18.0125 9.5625 17.75C9.65 17.1 9.9125 16.6625 10.2 16.4125C7.975 16.1625 5.65 15.3 5.65 11.475C5.65 10.3875 6.0375 9.4875 6.675 8.7875C6.575 8.5375 6.225 7.5125 6.775 6.1375C6.775 6.1375 7.6125 5.875 9.525 7.1625C10.325 6.9375 11.175 6.825 12.025 6.825C12.875 6.825 13.725 6.9375 14.525 7.1625C16.4375 5.8625 17.275 6.1375 17.275 6.1375C17.825 7.5125 17.475 8.5375 17.375 8.7875C18.0125 9.4875 18.4 10.375 18.4 11.475C18.4 15.3125 16.0625 16.1625 13.8375 16.4125C14.2 16.725 14.5125 17.325 14.5125 18.2625C14.5125 19.6 14.5 20.675 14.5 21.0125C14.5 21.275 14.6875 21.5875 15.1875 21.4875C19.1375 20.1625 22 16.4125 22 12C22 6.475 17.525 2 12 2Z'
+          fill='#202C3D'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_38_169'>
+          <rect
+            width='20'
+            height='20'
+            fill='white'
+            transform='translate(2 2)'
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

apps/_components/src/logos/Slack.tsx

@@ -0,0 +1,47 @@
+type SlackProps = React.HTMLAttributes<SVGElement>;
+
+export function Slack(rest: SlackProps) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...rest}
+    >
+      <path
+        d='M6.67289 14.424C6.67257 14.8057 6.55909 15.1787 6.3468 15.4959C6.13451 15.8131 5.83294 16.0603 5.48021 16.2061C5.12749 16.352 4.73944 16.39 4.36513 16.3153C3.99082 16.2406 3.64704 16.0567 3.37726 15.7867C3.10748 15.5166 2.92381 15.1727 2.84947 14.7983C2.77513 14.424 2.81345 14.036 2.95959 13.6834C3.10573 13.3307 3.35312 13.0294 3.67051 12.8174C3.98789 12.6054 4.36101 12.4922 4.7427 12.4922H6.67289V14.424Z'
+        fill='#202C3D'
+      />
+      <path
+        d='M7.64575 14.4241C7.64575 13.9122 7.84911 13.4212 8.21109 13.0592C8.57307 12.6973 9.06403 12.4939 9.57595 12.4939C10.0879 12.4939 10.5788 12.6973 10.9408 13.0592C11.3028 13.4212 11.5061 13.9122 11.5061 14.4241V19.2574C11.5061 19.7693 11.3028 20.2602 10.9408 20.6222C10.5788 20.9842 10.0879 21.1876 9.57595 21.1876C9.06403 21.1876 8.57307 20.9842 8.21109 20.6222C7.84911 20.2602 7.64575 19.7693 7.64575 19.2574V14.4241Z'
+        fill='#202C3D'
+      />
+      <path
+        d='M9.57602 6.67289C9.19433 6.67257 8.82131 6.55909 8.50411 6.3468C8.1869 6.13451 7.93976 5.83294 7.79392 5.48021C7.64808 5.12749 7.61009 4.73944 7.68475 4.36513C7.75941 3.99082 7.94337 3.64704 8.21338 3.37726C8.48339 3.10748 8.82732 2.92381 9.2017 2.84947C9.57607 2.77513 9.96409 2.81345 10.3167 2.95959C10.6693 3.10573 10.9706 3.35312 11.1827 3.67051C11.3947 3.98789 11.5079 4.36101 11.5079 4.7427V6.67289H9.57602Z'
+        fill='#202C3D'
+      />
+      <path
+        d='M9.57598 7.64575C10.0879 7.64575 10.5788 7.84911 10.9408 8.21109C11.3028 8.57307 11.5062 9.06403 11.5062 9.57595C11.5062 10.0879 11.3028 10.5788 10.9408 10.9408C10.5788 11.3028 10.0879 11.5061 9.57598 11.5061H4.7427C4.23078 11.5061 3.73982 11.3028 3.37784 10.9408C3.01586 10.5788 2.8125 10.0879 2.8125 9.57595C2.8125 9.06403 3.01586 8.57307 3.37784 8.21109C3.73982 7.84911 4.23078 7.64575 4.7427 7.64575H9.57598Z'
+        fill='#202C3D'
+      />
+      <path
+        d='M17.3271 9.57602C17.3275 9.19433 17.441 8.82131 17.6532 8.50411C17.8655 8.1869 18.1671 7.93976 18.5198 7.79392C18.8726 7.64808 19.2606 7.61009 19.6349 7.68475C20.0092 7.75941 20.353 7.94337 20.6228 8.21338C20.8926 8.48339 21.0762 8.82732 21.1506 9.2017C21.2249 9.57607 21.1866 9.96409 21.0405 10.3167C20.8943 10.6693 20.6469 10.9706 20.3295 11.1827C20.0121 11.3947 19.639 11.5079 19.2573 11.5079H17.3271V9.57602Z'
+        fill='#202C3D'
+      />
+      <path
+        d='M16.3543 9.57598C16.3543 10.0879 16.1509 10.5788 15.7889 10.9408C15.427 11.3028 14.936 11.5062 14.4241 11.5062C13.9122 11.5062 13.4212 11.3028 13.0592 10.9408C12.6973 10.5788 12.4939 10.0879 12.4939 9.57598V4.7427C12.4939 4.23078 12.6973 3.73982 13.0592 3.37784C13.4212 3.01586 13.9122 2.8125 14.4241 2.8125C14.936 2.8125 15.427 3.01586 15.7889 3.37784C16.1509 3.73982 16.3543 4.23078 16.3543 4.7427V9.57598Z'
+        fill='#202C3D'
+      />
+      <path
+        d='M14.424 17.3271C14.8057 17.3275 15.1787 17.441 15.4959 17.6532C15.8131 17.8655 16.0603 18.1671 16.2061 18.5198C16.352 18.8726 16.39 19.2606 16.3153 19.6349C16.2406 20.0092 16.0567 20.353 15.7867 20.6228C15.5166 20.8926 15.1727 21.0762 14.7983 21.1506C14.424 21.2249 14.036 21.1866 13.6834 21.0405C13.3307 20.8943 13.0294 20.6469 12.8174 20.3295C12.6054 20.0121 12.4922 19.639 12.4922 19.2573V17.3271H14.424Z'
+        fill='#202C3D'
+      />
+      <path
+        d='M14.4241 16.3543C13.9122 16.3543 13.4212 16.1509 13.0592 15.7889C12.6973 15.427 12.4939 14.936 12.4939 14.4241C12.4939 13.9122 12.6973 13.4212 13.0592 13.0592C13.4212 12.6973 13.9122 12.4939 14.4241 12.4939H19.2574C19.7693 12.4939 20.2602 12.6973 20.6222 13.0592C20.9842 13.4212 21.1876 13.9122 21.1876 14.4241C21.1876 14.936 20.9842 15.427 20.6222 15.7889C20.2602 16.1509 19.7693 16.3543 19.2574 16.3543H14.4241Z'
+        fill='#202C3D'
+      />
+    </svg>
+  );
+}