Merge branch 'next' into fix/radio-use-input

digdir · Oct 16, 2024 · 1ac4871 · 1ac4871
2 parents ccb46c8 + f6eb237
commit 1ac4871
Show file tree

Hide file tree

Showing 71 changed files with 751 additions and 948 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -22,7 +22,6 @@
     "storefront",
     "@repo/components",
     "@designsystemet/storybook",
-    "figma-plugin",
-    "@digdir/create-tokens"
+    "figma-plugin"
   ]
 }
diff --git a/.changeset/mighty-buttons-yell.md b/.changeset/mighty-buttons-yell.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Button: Fix SVG and images shrinking in flex containers
diff --git a/.changeset/orange-months-listen.md b/.changeset/orange-months-listen.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Button: Use font-weight `--ds-font-weight-medium`
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -7,7 +7,6 @@
     "storefront": "0.1.0",
     "theme": "0.1.0",
     "@digdir/designsystemet": "0.1.0-alpha.19",
-    "@digdir/create-tokens": "0.1.0-alpha.7",
     "@digdir/designsystemet-css": "0.11.0-alpha.9",
     "@digdir/designsystemet-react": "1.0.0-rc.13",
     "@digdir/designsystemet-theme": "1.0.0-rc.13",

diff --git a/.changeset/rotten-zoos-live.md b/.changeset/rotten-zoos-live.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": patch
+---
+
+Removed `init` command. Use `tokens create` instead.
diff --git a/.changeset/twelve-onions-laugh.md b/.changeset/twelve-onions-laugh.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Modal backdrop was invisible in some browser versions. See https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element for affected versions.
diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/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 && (
         <>

diff --git a/apps/_components/src/Header/Header.module.css b/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 {

diff --git a/apps/_components/src/Header/Header.tsx b/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'
                 >

diff --git a/apps/_components/src/index.ts b/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';
diff --git a/apps/_components/src/logos/Figma.tsx b/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>
+  );
+}
diff --git a/apps/_components/src/logos/Github.tsx b/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>
+  );
+}