.gitlab-ci.yml

 default:
-  image: node:20
+  image: node:20.15.0
+  interruptible: true
 
 include:
   - project: "asm/gitlab-ci-helpers"
@@ -21,6 +22,14 @@ variables:
       - .npm
     policy: pull
 
+workflow:
+  auto_cancel:
+    on_new_commit: interruptible
+  rules:
+    - if: $CI_MERGE_REQUEST_IID
+    - if: $CI_COMMIT_TAG
+    - if: $CI_COMMIT_BRANCH
+
 stages:
   - .pre
   - build
@@ -254,21 +263,28 @@ docker:
   dependencies:
     - docker
 
+.review-default:
+  only:
+    - branches
+  except:
+    - main
+    - schedules
+
 review:
   stage: deploy
   extends:
     - .review
+    - .review-default
     - .deploy
-  except:
-    - main
-    - schedules
+  only:
+    - branches
+    - merge_requests
 
 stop_review:
   stage: .post
-  extends: .stop_review
-  except:
-    - main
-    - schedules
+  extends:
+    - .stop_review
+    - .review-default
 
 prod:
   stage: deploy
@@ -317,6 +333,7 @@ publish:
   secrets:
     NPM_TOKEN:
       vault: "gitlab/${CI_PROJECT_PATH}/npm-token@secret"
+      token: $VAULT_ID_TOKEN
       file: false
   before_script:
     - echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" >> .npmrc

.gitlab/merge_request_templates/default.md

 /assign me  
-/assign_reviewer @eivinri @krnor @jobre @vesve @lakra @patsle @jakie
+/assign_reviewer @eivinri @jakie @jobre @krnor @lakra @patsle @venor @vesve

CONTRIBUTING.md

@@ -64,10 +64,10 @@ See [Accessibility](./docs/A11Y.md)
 Example:
 
 ```css
---sds-variable: value;
+--sds-<variable-name>: value;
 
 .sds-<package-name > {
-  --package-name-variable: value;
+  --<package-name>-<variable-name>: value;
 
   /* styling */
   &__<element > {
@@ -94,6 +94,7 @@ Build all packages with `npm run build` from root.
 
 ```sh
 npm ci
+npm run build
 npm run storybook
 ```
 
@@ -167,9 +168,9 @@ CI=true npx playwright test --update-snapshots
 #### Merge request
 
 Create a merge request & wait for a required code review before merging to `main`.  
-Review comments are closed by the reviewer & not the branch owner.  
+Review comments should be closed by the reviewer & not the branch owner.  
 Rebase before merge so that your commits end up on top of the history.  
-**Note** Storybook is published to URL `<review-environment>/komponenter/`
+**Note** Storybook is published to the URL `<review-environment>/storybook/`
 
 ℹ️ _Tip:_ Rebase commit history with [git-rebase](https://git-scm.com/docs/git-rebase)
 

bin/init-package.sh

@@ -15,14 +15,18 @@ echo "{
   \"main\": \"dist/index.js\",
   \"module\": \"dist/index.mjs\",
   \"exports\": {
-    \"import\": {
-      \"types\": \"./dist/index.d.mts\",
-      \"default\": \"./dist/index.mjs\"
-    },
-    \"require\": {
-      \"types\": \"./dist/index.d.ts\",
-      \"default\": \"./dist/index.js\"
+    \".\": {
+      \"import\": {
+        \"types\": \"./dist/index.d.mts\",
+        \"default\": \"./dist/index.mjs\"
+      },
+      \"require\": {
+        \"types\": \"./dist/index.d.ts\",
+        \"default\": \"./dist/index.js\"
+      },
+      \"style\": \"./dist/index.css\"
     },
+    \"./dist/*\": \"./dist/*\"
   },
   \"types\": \"dist/index.d.ts\",
   \"style\": \"dist/index.css\",
@@ -35,7 +39,7 @@ echo "{
     \"build\": \"tsup\"
   },
   \"dependencies\": {
-    \"@sikt/sds-core\": \"^2.2.0\"
+    \"@sikt/sds-core\": \"^3.0.0\"
   },
   \"peerDependencies\": {
     \"@types/react\": \"^18.0.0\",

docs/A11Y.md

@@ -14,7 +14,7 @@ All components should be tested for accessibility issues with [jest-axe](https:/
 
 ## Relative sizes
 
-Relative size tokens (`--sds-size-text-<size>`) should be used on user font size setting scalable properties like `font-size`, `line-height`, etc for accessibility purposes.
+Relative size tokens (`--sds-base-size-relative-<size>`) should be used on user font size setting scalable properties like `font-size`, `line-height`, etc for accessibility purposes.
 
 ## Motion
 

docs/tutorial/TUTORIAL_3.md

@@ -19,6 +19,16 @@ npm init -y -w ./packages/confetti-button
   "license": "UNLICENSED",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "exports": {
+    "import": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "require": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "types": "dist/index.d.ts",
   "style": "dist/index.css",
   "files": ["dist"],

docs/tutorial/TUTORIAL_4.md

@@ -12,7 +12,7 @@
 #### Story
 
 - Create `stories/` directory
-- Create `Readme.mdx`
+- Create `stories/Readme.mdx`
 - Import README.md in story
 
 💡️ _Hint:_ See `./docs/tutorial/__example__/` for Example component  

docs/tutorial/__example__/package.json

@@ -5,6 +5,16 @@
   "license": "UNLICENSED",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "exports": {
+    "import": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "require": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "types": "dist/index.d.ts",
   "style": "dist/index.css",
   "files": [

gatsby/gatsby-node.ts

@@ -49,11 +49,9 @@ export const createPages: GatsbyNode["createPages"] = async ({
 
   const getPackageDir = (contentFilePath: string) => {
     try {
-      return `${
-        contentFilePath
-          .split("/sds-komponentbibliotek/packages/")[1]
-          .split("/")[0]
-      }`;
+      return contentFilePath
+        .split("/sds-komponentbibliotek/packages/")[1]
+        .split("/")[0];
     } catch (e) {
       // @ts-ignore
       reporter.panicOnBuild("Error getting package path", e);

gatsby/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@phosphor-icons/react": "^2.1.4",
+    "@phosphor-icons/react": "^2.1.7",
     "@sikt/sds-accordion": "^2.0.2",
     "@sikt/sds-badge": "^2.0.0",
     "@sikt/sds-breadcrumbs": "^2.0.0",
@@ -28,30 +28,30 @@
     "@sikt/sds-section": "^3.0.0",
     "@sikt/sds-table": "^2.0.1",
     "@sikt/sds-tokens": "^1.0.1",
-    "canvas-confetti": "^1.9.2",
-    "clsx": "^2.1.0",
-    "gatsby": "^5.13.4",
+    "canvas-confetti": "^1.9.3",
+    "clsx": "^2.1.1",
+    "gatsby": "^5.13.6",
     "gatsby-plugin-matomo": "^0.16.2",
     "gatsby-plugin-mdx": "^5.13.1",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-source-filesystem": "^5.13.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-use-konami": "^1.1.0"
   },
   "devDependencies": {
     "@types/canvas-confetti": "^1.6.4",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.2.78",
-    "@types/react-dom": "^18.2.25",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "eslint-config-react-app": "^7.0.1",
     "gatsby-plugin-force-file-loader": "^5.0.1",
     "gatsby-plugin-layout": "^4.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-postcss": "^6.13.1",
-    "postcss": "^8.4.38",
-    "style-dictionary": "^3.9.2",
-    "typescript": "^5.4.5"
+    "postcss": "^8.4.39",
+    "style-dictionary": "^4.0.0",
+    "typescript": "^5.5.2"
   }
 }

gatsby/src/components/Contributors.tsx

@@ -27,6 +27,7 @@ const Contributors = ({
         : []),
     ],
     [
+      { name: "Kjartan", role: "Teknologi", team: "Opptak Søker" },
       { name: "Sondre S.", role: "Teknologi", team: "Opptak Søker" },
       { name: "Erik", role: "Teknologi", team: "Opptak Søker" },
       { name: "Vegard", role: "Teknologi", team: "Opptak Søker" },
@@ -34,6 +35,7 @@ const Contributors = ({
       { name: "Jakob", role: "Teknologi", team: "Opptak Søker" },
     ],
     [
+      { name: "Sigurd", role: "Teknologi", team: "Kudaf" },
       { name: "Rolf Anders", role: "Design", team: "Kudaf" },
       { name: "Glaysa", role: "Teknologi", team: "Kudaf" },
     ],
@@ -99,6 +101,8 @@ const Contributors = ({
                           .replaceAll(" ", "-")
                           .replaceAll(".", "")}.png`}
                         alt={contributor.name}
+                        aria-hidden="true"
+                        loading="lazy"
                       />
                     )}
                     <div>{contributor.name}</div>

gatsby/src/components/Hero.tsx

@@ -24,30 +24,25 @@ export const Hero = ({
   leadParagraph,
 }: HeroProps) => {
   return (
-    <>
-      <section className={clsx(style.hero__section, className)}>
-        <div className={style.hero__sectionContent}>
-          {breadcrumbs && (
-            <Breadcrumbs aria-label="Navigasjonssti">
-              {breadcrumbs.map((breadcrumb) => (
-                <BreadcrumbItem key={breadcrumb.to}>
-                  <GatsbyLink
-                    className="sds-typography-link"
-                    to={breadcrumb.to}
-                  >
-                    {breadcrumb.title}
-                  </GatsbyLink>
-                </BreadcrumbItem>
-              ))}
-            </Breadcrumbs>
-          )}
-          <Heading1 variant="huge">{heading}</Heading1>
-          {leadParagraph && (
-            <p className={style.hero__paragraph}>{leadParagraph}</p>
-          )}
-        </div>
-        <div className={style.hero__sectionImage}></div>
-      </section>
-    </>
+    <section className={clsx(style.hero__section, className)}>
+      <div className={style.hero__sectionContent}>
+        {breadcrumbs && (
+          <Breadcrumbs aria-label="Navigasjonssti">
+            {breadcrumbs.map((breadcrumb) => (
+              <BreadcrumbItem key={breadcrumb.to}>
+                <GatsbyLink className="sds-typography-link" to={breadcrumb.to}>
+                  {breadcrumb.title}
+                </GatsbyLink>
+              </BreadcrumbItem>
+            ))}
+          </Breadcrumbs>
+        )}
+        <Heading1 variant="huge">{heading}</Heading1>
+        {leadParagraph && (
+          <p className={style.hero__paragraph}>{leadParagraph}</p>
+        )}
+      </div>
+      <div className={style.hero__sectionImage} />
+    </section>
   );
 };

gatsby/src/components/Swatch.tsx

 import * as style from "./swatch.module.css";
 
 export const Swatch = ({ color }: { color: string }) => {
-  return (
-    <div className={style.swatch} style={{ backgroundColor: color }}></div>
-  );
+  return <div className={style.swatch} style={{ backgroundColor: color }} />;
 };

gatsby/src/components/komponenter/SubNav.tsx

@@ -22,7 +22,7 @@ export const SubNav = ({
   return (
     <div className={style.subNav}>
       <span className="sds-typography-heading--paragraph">Komponenter</span>
-      <SideNav heading="Alle" aria-label={`Sidenavigasjon, alle komponenter`}>
+      <SideNav heading="Alle" aria-label="Sidenavigasjon, alle komponenter">
         <li>
           <SideNavButtonLink icon={<Code />} href="/storybook/">
             Se <span className="sds-screen-reader-only">alle komponenter</span>{" "}

gatsby/src/pages/404.tsx

@@ -6,22 +6,20 @@ import { ArrowCircleLeftIcon } from "@sikt/sds-icons";
 
 const NotFoundPage: React.FC<PageProps> = () => {
   return (
-    <>
-      <Hero
-        breadcrumbs={[{ title: "Komponentbiblioteket", to: "/" }]}
-        heading={<>Siden finnes ikke</>}
-        leadParagraph={
-          <ButtonLink
-            variant="strong"
-            icon={<ArrowCircleLeftIcon />}
-            iconVariant="left"
-            href="/"
-          >
-            Tilbake til forsiden
-          </ButtonLink>
-        }
-      />
-    </>
+    <Hero
+      breadcrumbs={[{ title: "Komponentbiblioteket", to: "/" }]}
+      heading={<>Siden finnes ikke</>}
+      leadParagraph={
+        <ButtonLink
+          variant="strong"
+          icon={<ArrowCircleLeftIcon />}
+          iconVariant="left"
+          href="/"
+        >
+          Tilbake til forsiden
+        </ButtonLink>
+      }
+    />
   );
 };
 

gatsby/src/pages/500.tsx

@@ -6,22 +6,20 @@ import { ArrowCircleLeftIcon } from "@sikt/sds-icons";
 
 const ErrorPage: React.FC<PageProps> = () => {
   return (
-    <>
-      <Hero
-        breadcrumbs={[{ title: "Komponentbiblioteket", to: "/" }]}
-        heading={<>En feil har skjedd</>}
-        leadParagraph={
-          <ButtonLink
-            variant="strong"
-            icon={<ArrowCircleLeftIcon />}
-            iconVariant="left"
-            href="/"
-          >
-            Tilbake til forsiden
-          </ButtonLink>
-        }
-      />
-    </>
+    <Hero
+      breadcrumbs={[{ title: "Komponentbiblioteket", to: "/" }]}
+      heading={<>En feil har skjedd</>}
+      leadParagraph={
+        <ButtonLink
+          variant="strong"
+          icon={<ArrowCircleLeftIcon />}
+          iconVariant="left"
+          href="/"
+        >
+          Tilbake til forsiden
+        </ButtonLink>
+      }
+    />
   );
 };
 

gatsby/src/pages/grunnleggende/farger/index.tsx

@@ -547,13 +547,13 @@ const FargerPage: React.FC<PageProps> = ({ location }) => {
                                 <div className={moduleStyle.farger__flex}>
                                   <Swatch
                                     color={
-                                      dark.default.color.brand?.[token[0]]?.[
+                                      dark.default.color.brand[token[0]]?.[
                                         subtoken[0]
                                       ].value ?? subtoken[1].value
                                     }
                                   />
                                   <Badge>
-                                    {dark.default.color.brand?.[token[0]]?.[
+                                    {dark.default.color.brand[token[0]]?.[
                                       subtoken[0]
                                     ].value ?? subtoken[1].value}
                                   </Badge>
@@ -743,13 +743,13 @@ const FargerPage: React.FC<PageProps> = ({ location }) => {
                                 <div className={moduleStyle.farger__flex}>
                                   <Swatch
                                     color={
-                                      dark.default.color.support?.[token[0]]?.[
+                                      dark.default.color.support[token[0]]?.[
                                         subtoken[0]
                                       ].value ?? subtoken[1].value
                                     }
                                   />
                                   <Badge>
-                                    {dark.default.color.support?.[token[0]]?.[
+                                    {dark.default.color.support[token[0]]?.[
                                       subtoken[0]
                                     ].value ?? subtoken[1].value}
                                   </Badge>
@@ -830,14 +830,14 @@ const FargerPage: React.FC<PageProps> = ({ location }) => {
                                 <div className={moduleStyle.farger__flex}>
                                   <Swatch
                                     color={
-                                      dark.default.color.layout?.[token[0]]?.[
+                                      dark.default.color.layout[token[0]]?.[
                                         subtoken[0]
                                       ].value
                                     }
                                   />
                                   <Badge>
                                     {
-                                      dark.default.color.layout?.[token[0]]?.[
+                                      dark.default.color.layout[token[0]]?.[
                                         subtoken[0]
                                       ].value
                                     }

gatsby/src/pages/grunnleggende/ikoner/index.tsx

+import { ElementType } from "react";
 import { PageProps } from "gatsby";
 import { Hero } from "../../../components/Hero";
 import clsx from "clsx";
@@ -179,14 +180,14 @@ const IkonerPage: React.FC<PageProps> = ({ location }) => {
                     moduleStyle.ikoner__ikoner,
                   )}
                 >
-                  {config.map((icon) => {
-                    const iconName = `${icon
+                  {(config as string[]).map((icon) => {
+                    const iconName = icon
                       .split("-")
                       .map(
                         (part) =>
                           `${part.charAt(0).toUpperCase()}${part.slice(1)}`,
                       )
-                      .join(" ")}`;
+                      .join(" ");
                     const iconComponentName = `${icon
                       .split("-")
                       .map(
@@ -194,10 +195,13 @@ const IkonerPage: React.FC<PageProps> = ({ location }) => {
                           `${part.charAt(0).toUpperCase()}${part.slice(1)}`,
                       )
                       .join("")}Icon`;
-                    const I = icons[iconComponentName];
+                    const I = icons[iconComponentName] as ElementType;
 
                     return (
-                      <div className={moduleStyle.ikoner__ikonWrapper}>
+                      <div
+                        className={moduleStyle.ikoner__ikonWrapper}
+                        key={iconName}
+                      >
                         <I className={moduleStyle.ikoner__ikon} />
                         <Paragraph as="span" variant="small">
                           {iconName}

gatsby/src/pages/grunnleggende/storrelser/index.tsx

@@ -131,15 +131,14 @@ const StorrelserPage: React.FC<PageProps> = ({ location }) => {
                         <TableCell data-th="Verdi @ tablet">
                           <Token
                             token={
-                              tablet.default.space.padding?.[token[0]] ??
-                              token[1]
+                              tablet.default.space.padding[token[0]] ?? token[1]
                             }
                           />
                         </TableCell>
                         <TableCell data-th="Verdi @ desktop">
                           <Token
                             token={
-                              desktop.default.space.padding?.[token[0]] ??
+                              desktop.default.space.padding[token[0]] ??
                               token[1]
                             }
                           />
@@ -237,38 +236,40 @@ const StorrelserPage: React.FC<PageProps> = ({ location }) => {
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {Object.entries(tokens.space.border.weight).map((token) => {
-                    return (
-                      <TableRow key={token[1].name}>
-                        <TableCell data-th="Navn">{token[0]}</TableCell>
-                        <TableCell data-th="Verdi @ mobile">
-                          <Token token={token[1]} />
-                        </TableCell>
-                        <TableCell data-th="Verdi @ tablet">
-                          <Token
-                            token={
-                              tablet.space.border?.weight?.[token[0]] ??
-                              token[1]
-                            }
-                          />
-                        </TableCell>
-                        <TableCell data-th="Verdi @ desktop">
-                          <Token
-                            token={
-                              desktop.default.space.border?.weight?.[
-                                token[0]
-                              ] ?? token[1]
-                            }
-                          />
-                        </TableCell>
-                        <TableCell data-th="Token">
-                          <Badge visibility="strong" icon={<Nut />}>
-                            {`--sds-${Object.values(token[1].path).join("-")}`}
-                          </Badge>
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
+                  {Object.entries(tokens.default.space.border.weight).map(
+                    (token) => {
+                      return (
+                        <TableRow key={token[1].name}>
+                          <TableCell data-th="Navn">{token[0]}</TableCell>
+                          <TableCell data-th="Verdi @ mobile">
+                            <Token token={token[1]} />
+                          </TableCell>
+                          <TableCell data-th="Verdi @ tablet">
+                            <Token
+                              token={
+                                tablet.space.border?.weight?.[token[0]] ??
+                                token[1]
+                              }
+                            />
+                          </TableCell>
+                          <TableCell data-th="Verdi @ desktop">
+                            <Token
+                              token={
+                                desktop.default.space.border?.weight?.[
+                                  token[0]
+                                ] ?? token[1]
+                              }
+                            />
+                          </TableCell>
+                          <TableCell data-th="Token">
+                            <Badge visibility="strong" icon={<Nut />}>
+                              {`--sds-${Object.values(token[1].path).join("-")}`}
+                            </Badge>
+                          </TableCell>
+                        </TableRow>
+                      );
+                    },
+                  )}
                 </TableBody>
               </Table>
             </div>

gatsby/src/templates/komponenter.tsx

@@ -19,6 +19,7 @@ import { Section } from "@sikt/sds-section";
 import { ButtonLink, ButtonGroup } from "@sikt/sds-button";
 import { OrderedList, UnorderedList, ListItem } from "@sikt/sds-list";
 import { SubNav } from "../components/komponenter/SubNav";
+import { ReactNode } from "react";
 
 export { Head } from "../components/Head";
 
@@ -26,12 +27,24 @@ export { Head } from "../components/Head";
 // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
 const components = {
   p: Paragraph,
-  h1: Heading1,
-  h2: Heading2,
-  h3: Heading3,
-  h4: Heading4,
-  h5: Heading5,
-  h6: Heading6,
+  h1: ({ children }: { children: ReactNode }) => (
+    <Heading1 variant="large">{children}</Heading1>
+  ),
+  h2: ({ children }: { children: ReactNode }) => (
+    <Heading2 variant="medium">{children}</Heading2>
+  ),
+  h3: ({ children }: { children: ReactNode }) => (
+    <Heading3 variant="small">{children}</Heading3>
+  ),
+  h4: ({ children }: { children: ReactNode }) => (
+    <Heading4 variant="paragraph">{children}</Heading4>
+  ),
+  h5: ({ children }: { children: ReactNode }) => (
+    <Heading5 variant="overline">{children}</Heading5>
+  ),
+  h6: ({ children }: { children: ReactNode }) => (
+    <Heading6 variant="overline">{children}</Heading6>
+  ),
   ul: UnorderedList,
   ol: OrderedList,
   li: ListItem,
@@ -88,7 +101,7 @@ export default function PageTemplate({
 
         <div>
           <Section
-            headingText={frontmatter?.title || ""}
+            headingText={frontmatter?.title ?? ""}
             className={style.komponenter__sdsSection}
             callToAction={
               <ButtonGroup variant="right">
@@ -102,7 +115,7 @@ export default function PageTemplate({
                 <ButtonLink
                   variant="transparent"
                   icon={<FigmaLogo />}
-                  href={frontmatter?.figma || ""}
+                  href={frontmatter?.figma ?? ""}
                 >
                   Se i Figma
                 </ButtonLink>