Merge branch 'main' into improve-spinner

.eslintignore

@@ -4,4 +4,5 @@ dist/
 coverage/
 storybook-static/
 packages/tokens/brand/**/*
-tsc-build/
+tsc-build/
+.storybook

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
   ],
   plugins: ['import', 'react', 'jsx-a11y', 'prettier'],
   overrides: [

.storybook/manager-head.html

@@ -164,7 +164,7 @@
         class="header__logo-link"
         ><img
           class="header__logo"
-          src="https://i.imgur.com/a4EHRcN.png"
+          src="logo_designsystemet-dark.svg"
           alt="Designsystem forside"
       /></a>
     </div>
@@ -176,7 +176,7 @@
         title="Åpne meny"
       >
         <img
-          src="https://i.imgur.com/aj1Wv3j.png"
+          src="icons/menu.svg"
           alt="Åpne meny"
         />
       </button>
@@ -187,7 +187,7 @@
         title="Lukk meny"
       >
         <img
-          src="https://i.imgur.com/s3P5AWt.png"
+          src="icons/close.svg"
           alt="Lukk meny"
         />
       </button>

.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme';
+import { LinkHeading } from '../docs-components';
 
 import '@digdir/design-system-tokens/brand/digdir/tokens.css';
 import altinn from '!!style-loader?injectType=lazyStyleTag!css-loader!@digdir/design-system-tokens/brand/altinn/tokens.css';
@@ -12,12 +13,14 @@ import '@altinn/figma-design-tokens/dist/tokens.css';
 import {
   Paragraph,
   Link,
-  Heading,
   HeadingProps,
   LinkProps,
+  List,
+  ListItem,
 } from '@digdir/design-system-react';
 import customTheme from './customTheme';
 import metadata from '../design-tokens/$metadata.json';
+import { Heading } from '@digdir/design-system-react';
 
 type Viewport = {
   name: string;
@@ -43,13 +46,71 @@ const viewports: Viewport[] = metadata.tokenSetOrder
 
 type Props = Record<string, unknown>;
 
-const getHeading = (headingProps: HeadingProps) => (props: Props) =>
-  (
+const getHeading = (headingProps: HeadingProps) => (props: Props) => {
+  return (
     <Heading
       {...headingProps}
       {...props}
-    ></Heading>
+    />
   );
+};
+
+const getPath = (href: string | undefined): string => {
+  if (!href) {
+    return '';
+  }
+
+  // if link starts with /, add current path to link
+  if (href.startsWith('/')) {
+    const { origin = '' } = document?.location;
+
+    return `${origin}/?path=${href}`;
+  }
+
+  return href;
+};
+
+const components = {
+  h1: getHeading({ level: 1, size: 'xlarge' }),
+  h2: getHeading({ level: 2, size: 'large' }),
+  h3: getHeading({ level: 3, size: 'medium' }),
+  h4: getHeading({ level: 4, size: 'small' }),
+  h5: getHeading({ level: 5, size: 'xsmall' }),
+  p: Paragraph,
+  ol: (props: Props) => (
+    <List
+      {...props}
+      as='ol'
+      style={{ maxWidth: '70ch' }}
+      className='sb-unstyled'
+    ></List>
+  ),
+  ul: (props: Props) => (
+    <List
+      {...props}
+      style={{ maxWidth: '70ch' }}
+      className='sb-unstyled'
+    ></List>
+  ),
+  li: (props: Props) => (
+    <ListItem
+      {...props}
+      className='sb-unstyled'
+      style={{ maxWidth: '70ch' }}
+    ></ListItem>
+  ),
+  a: (props: LinkProps) => {
+    // if link starts with /, add current path to link
+    const href = getPath(props.href);
+
+    return (
+      <Link
+        {...props}
+        href={href}
+      ></Link>
+    );
+  },
+};
 
 const preview: Preview = {
   decorators: [cssVariablesTheme],
@@ -68,47 +129,7 @@ const preview: Preview = {
     actions: { argTypesRegex: '^on[A-Z].*' },
     docs: {
       theme: customTheme,
-      components: {
-        p: (props: Props) => (
-          <Paragraph
-            {...props}
-            style={{ maxWidth: '70ch' }}
-          ></Paragraph>
-        ),
-        // a: ({ href, ...rest }: LinkProps) => {
-        //   const { pathname = '', origin = '' } = document?.location;
-
-        //   return (
-        //     <Link
-        //       {...rest}
-        //       href={
-        //         href?.startsWith('/')
-        //           ? `${origin}${pathname}/?path=${href}`
-        //           : href
-        //       }
-        //     />
-        //   );
-        // },
-        h1: getHeading({ level: 1, size: 'xlarge' }),
-        h2: getHeading({ level: 2, size: 'large' }),
-        h3: getHeading({ level: 3, size: 'medium' }),
-        h4: getHeading({ level: 4, size: 'small' }),
-        h5: getHeading({ level: 5, size: 'xsmall' }),
-        ul: (props: Props) => (
-          <ul
-            style={{ maxWidth: '70ch' }}
-            {...props}
-          ></ul>
-        ),
-        li: (props: Props) => (
-          <Paragraph
-            as='li'
-            size='small'
-            style={{ maxWidth: '70ch' }}
-            {...props}
-          ></Paragraph>
-        ),
-      },
+      components,
     },
     controls: {
       matchers: {

docs-components/LinkHeading/LinkHeading.module.css

@@ -0,0 +1,21 @@
+.linkHeading {
+  position: relative;
+}
+
+.linkHeading a {
+  position: absolute;
+  top: 0;
+  left: -1em;
+  height: 100%;
+  text-decoration: none;
+  color: inherit;
+  z-index: 1;
+  opacity: 0;
+  font-size: 1rem;
+  width: 1em;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.linkHeading:hover a {
+  opacity: 1;
+}

docs-components/LinkHeading/LinkHeading.tsx

@@ -0,0 +1,32 @@
+import { Heading, Link } from '@digdir/design-system-react';
+import type { HeadingProps } from '@digdir/design-system-react';
+import { LinkIcon } from '@navikt/aksel-icons';
+import cn from 'classnames';
+import React from 'react';
+
+import classes from './LinkHeading.module.css';
+
+type LinkHeadingProps = {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+} & Omit<HeadingProps, 'id'>;
+
+export const LinkHeading = ({ ...rest }: LinkHeadingProps) => {
+  return (
+    <Heading
+      {...rest}
+      className={cn(classes.linkHeading, rest.className)}
+    >
+      <Link
+        aria-hidden='true'
+        href={`#${rest.id}`}
+        tabindex='-1'
+        target='_self'
+      >
+        <LinkIcon />
+      </Link>
+      {rest.children}
+    </Heading>
+  );
+};

docs-components/index.ts

@@ -8,4 +8,5 @@ export {
 export { Changelog } from './Changelog/Changelog';
 export { Stack } from './Stack/Stack';
 export { Do, Dont } from './DoAndDont/DoAndDont';
+export { LinkHeading } from './LinkHeading/LinkHeading';
 export * from './Information/Information';