Version Packages (#2160 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🎨 Fikset hardkodet border-radius i diverse komponenter (#2159 )
2026-10-15 02:02:02 +00:00 · 2023-08-14 14:43:22 +02:00 · 2023-08-14 14:40:47 +02:00 · 2023-08-14 13:40:10 +02:00 · 2023-08-13 20:56:42 +02:00 · 2023-08-13 20:50:54 +02:00
75 changed files with 1716 additions and 1066 deletions
@@ -96,7 +96,7 @@ jobs:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
-            ### [<img id="github-comment-finder" src="https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-inverse.svg" height="32"/>](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})

            ### [Endringer til review](${{steps.chromatic_tests.outputs.url}}): ${{steps.chromatic_tests.outputs.changeCount}}

@@ -1,5 +1,13 @@
 # @navikt/aksel-icons

+## 4.11.1
+
+## 4.11.0
+
+## 4.10.2
+
+## 4.10.1
+
 ## 4.10.0

 ## 4.9.1
@@ -58,7 +58,7 @@
 .icon-button {
  min-height: 3rem;
  min-width: 3rem;
-  border-radius: 2px;
+  border-radius: var(--a-border-radius-small);
  display: grid;
  place-content: center;
  background-color: var(--a-surface-default);
@@ -1,9 +1,9 @@
 import meta from "@navikt/aksel-icons/metadata";

 const subCategorizeIcons = (
-  icons: typeof meta[1][]
-): { sub_category: string; icons: typeof meta[1][] }[] => {
-  const categories: { sub_category: string; icons: typeof meta[1][] }[] = [];
+  icons: (typeof meta)[1][]
+): { sub_category: string; icons: (typeof meta)[1][] }[] => {
+  const categories: { sub_category: string; icons: (typeof meta)[1][] }[] = [];

  for (const icon of icons) {
    const i = categories.findIndex(
@@ -19,14 +19,14 @@ const subCategorizeIcons = (
 };

 export const categorizeIcons = (
-  icons: typeof meta[1][]
+  icons: (typeof meta)[1][]
 ): {
  category: string;
-  sub_categories: { sub_category: string; icons: typeof meta[1][] }[];
+  sub_categories: { sub_category: string; icons: (typeof meta)[1][] }[];
 }[] => {
  const categories: {
    category: string;
-    icons: typeof meta[1][];
+    icons: (typeof meta)[1][];
  }[] = [];

  for (const icon of icons) {
@@ -42,14 +42,14 @@ export const categorizeIcons = (
    .map((x) => ({ ...x, sub_categories: subCategorizeIcons(x.icons) }));
 };

-const noFill = (icon: typeof meta[1], icons: typeof meta[1][]) => {
+const noFill = (icon: (typeof meta)[1], icons: (typeof meta)[1][]) => {
  const foundFill = icons.find(
    (x) => x.name.endsWith("Fill") && x.name.replace("Fill", "") === icon.name
  );
  return !foundFill;
 };

-export const getFillIcon = (icons: typeof meta[1][]) => {
+export const getFillIcon = (icons: (typeof meta)[1][]) => {
  return icons.filter(
    (x, _, z) => x.variant.toLowerCase() === "fill" || noFill(x, z)
  );
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "4.10.0",
+  "version": "4.11.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,13 @@
 # @navikt/aksel-stylelint

+## 4.11.1
+
+## 4.11.0
+
+## 4.10.2
+
+## 4.10.1
+
 ## 4.10.0

 ## 4.9.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "4.10.0",
+  "version": "4.11.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^4.10.0",
-    "@navikt/ds-tokens": "^4.10.0",
+    "@navikt/ds-css": "^4.11.1",
+    "@navikt/ds-tokens": "^4.11.1",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,33 @@
 # @navikt/aksel

+## 4.11.1
+
+### Patch Changes
+
+- Updated dependencies [[`e68ab5cb2`](https://github.com/navikt/aksel/commit/e68ab5cb2cd91c2f0234c864ee71821ed07a8203)]:
+  - @navikt/ds-css@4.11.1
+
+## 4.11.0
+
+### Patch Changes
+
+- Updated dependencies [[`64901adcc`](https://github.com/navikt/aksel/commit/64901adccb8f19fbe06cdab4a70d47978e90e343), [`0de8238ec`](https://github.com/navikt/aksel/commit/0de8238ecf22e9f1fbc0e1b0cfe7a5cd7254901e), [`647b14a23`](https://github.com/navikt/aksel/commit/647b14a23888f82bacc4806d3afaacb5e39178fa)]:
+  - @navikt/ds-css@4.11.0
+
+## 4.10.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.10.2
+
+## 4.10.1
+
+### Patch Changes
+
+- Updated dependencies [[`d3bd1202e`](https://github.com/navikt/aksel/commit/d3bd1202eddb23dd3f1f09c3e4086ff3b19737d6)]:
+  - @navikt/ds-css@4.10.1
+
 ## 4.10.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "4.10.0",
+  "version": "4.11.1",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "4.10.0",
+    "@navikt/ds-css": "4.11.1",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,29 @@
 # @navikt/ds-css

+## 4.11.1
+
+### Patch Changes
+
+- Border-radius: Fikset hardkodet border-radius i Datepicker, ToggleGroup og Combobox. ([#2159](https://github.com/navikt/aksel/pull/2159))
+
+## 4.11.0
+
+### Minor Changes
+
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+
+### Patch Changes
+
+- List: Fikset alignment av ikoner ([#2149](https://github.com/navikt/aksel/pull/2149))
+
+- Font: La til egen font for semibold italic for bedre skalering cross-browser ([#2150](https://github.com/navikt/aksel/pull/2150))
+
+## 4.10.2
+
+### Patch Changes
+
+- Link: Fikset visited farger og inline SVG-reset ved bruk av tailwind
+
 ## 4.10.0

 ### Minor Changes
@@ -5,6 +5,13 @@
  font-display: swap;
  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
 }
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin-semibold") format("woff2");
+}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
@@ -99,6 +99,10 @@ const StyleMappings = {
      main: "help-text.css",
      dependencies: ["popover.css"],
    },
+    {
+      component: "HGrid",
+      main: "hgrid.css",
+    },
    { component: "Ingress", main: typoCss },
    {
      component: "InternalHeader",
@@ -233,7 +233,7 @@
  text-decoration: none;
  border: none;
  background: none;
-  border-radius: 3px;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
  padding: var(--a-spacing-3);
  align-items: center;
  justify-content: center;
@@ -283,7 +283,7 @@

 .navds-combobox__list-item__new-option--focus {
  box-shadow: var(--a-shadow-focus) inset, var(--a-border-action) 0 0 0 5px inset;
-  border-radius: 3px;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
 }

 /* Mobile */
@@ -0,0 +1,55 @@
+.navds-hgrid {
+  --__ac-hgrid-columns-xs: initial;
+  --__ac-hgrid-columns-sm: initial;
+  --__ac-hgrid-columns-md: initial;
+  --__ac-hgrid-columns-lg: initial;
+  --__ac-hgrid-columns-xl: initial;
+  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
+  --__ac-hgrid-gap-xs: initial;
+  --__ac-hgrid-gap-sm: initial;
+  --__ac-hgrid-gap-md: initial;
+  --__ac-hgrid-gap-lg: initial;
+  --__ac-hgrid-gap-xl: initial;
+  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
+
+  display: grid;
+  grid-template-columns: var(--__ac-hgrid-columns);
+  gap: var(--__ac-hgrid-gap);
+}
+
+@media (min-width: 480px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(
+      --__ac-hgrid-columns-lg,
+      var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
+    );
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(
+      --__ac-hgrid-columns-xl,
+      var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
+    );
+    --__ac-hgrid-gap: var(
+      --__ac-hgrid-gap-xl,
+      var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
+    );
+  }
+}
@@ -14,6 +14,7 @@
@import "guide-panel.css";
@import "form/index.css";
@import "help-text.css";
+@import "hgrid.css";
@import "internalheader.css";
@import "link.css";
@import "loader.css";
@@ -11,12 +11,11 @@
 }

 .navds-link.navds-link--inline-text > svg {
+  /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
  margin: 0.1em 0.1em -0.1em;
  transform: translateY(0.05em);
-}
-
-.navds-link:visited {
-  color: var(--ac-link-visited-text, var(--a-text-visited));
+  display: inline;
+  vertical-align: baseline;
 }

 .navds-link:hover {
@@ -43,6 +43,13 @@
 .navds-list__item-marker--icon {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+  display: flex;
+  align-items: center;
+  height: var(--a-font-line-height-medium);
+}
+
+.navds-list__item-marker--icon svg {
+  flex-shrink: 0;
 }

 .navds-list ul .navds-list__item-content {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "4.10.0",
+  "version": "4.11.1",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^4.10.0",
+    "@navikt/ds-tokens": "^4.11.1",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,22 +1,20 @@
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-/* stylelint-disable aksel/design-token-exists */
 .navds-stack {
-  --ac-stack-align: initial;
-  --ac-stack-justify: initial;
-  --ac-stack-direction: initial;
-  --ac-stack-wrap: initial;
-  --ac-stack-gap-xs: initial;
-  --ac-stack-gap-sm: initial;
-  --ac-stack-gap-md: initial;
-  --ac-stack-gap-lg: initial;
-  --ac-stack-gap-xl: initial;
-  --__ac-stack-gap: var(--ac-stack-gap-xs);
+  --__ac-stack-align: initial;
+  --__ac-stack-justify: initial;
+  --__ac-stack-direction: initial;
+  --__ac-stack-wrap: initial;
+  --__ac-stack-gap-xs: initial;
+  --__ac-stack-gap-sm: initial;
+  --__ac-stack-gap-md: initial;
+  --__ac-stack-gap-lg: initial;
+  --__ac-stack-gap-xl: initial;
+  --__ac-stack-gap: var(--__ac-stack-gap-xs);

  gap: var(--__ac-stack-gap);
  display: flex;
-  align-items: var(--ac-stack-align);
-  justify-content: var(--ac-stack-justify);
-  flex-flow: var(--ac-stack-direction) var(--ac-stack-wrap);
+  align-items: var(--__ac-stack-align);
+  justify-content: var(--__ac-stack-justify);
+  flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
 }

 .navds-stack__spacer {
@@ -35,27 +33,27 @@

@media (min-width: 480px) {
  .navds-stack {
-    --__ac-stack-gap: var(--ac-stack-gap-sm, var(--ac-stack-gap-xs));
+    --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs));
  }
 }

@media (min-width: 768px) {
  .navds-stack {
-    --__ac-stack-gap: var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs)));
+    --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
  }
 }

@media (min-width: 1024px) {
  .navds-stack {
-    --__ac-stack-gap: var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))));
+    --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))));
  }
 }

@media (min-width: 1280px) {
  .navds-stack {
    --__ac-stack-gap: var(
-      --ac-stack-gap-xl,
-      var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))))
+      --__ac-stack-gap-xl,
+      var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))))
    );
  }
 }
@@ -34,7 +34,7 @@
  cursor: pointer;
  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
  color: var(--ac-toggle-group-button-text, var(--a-text-default));
-  border-radius: 2px;
+  border-radius: var(--a-border-radius-small);
  min-width: fit-content;
  font-weight: var(--a-font-weight-regular);
 }
@@ -178,8 +178,7 @@
    "--ac-link-active-border": "--a-border-focus",
    "--ac-link-action-text": "--a-text-action",
    "--ac-link-neutral-text": "--a-text-default",
-    "--ac-link-subtle-text": "--a-text-subtle",
-    "--ac-link-visited-text": "--a-text-visited"
+    "--ac-link-subtle-text": "--a-text-subtle"
  },
  "list": {
    "--ac-list-marker-ul-color": "--ac-list-marker-color",
@@ -1,5 +1,41 @@
 # @navikt/ds-react

+## 4.11.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.11.1
+
+## 4.11.0
+
+### Minor Changes
+
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+
+### Patch Changes
+
+- Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
+
+- Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.11.0
+
+## 4.10.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.10.2
+
+## 4.10.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.10.1
+
 ## 4.10.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "4.10.0",
+  "version": "4.11.1",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,7 +38,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.10.0",
+    "@navikt/aksel-icons": "^4.11.1",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -37,6 +37,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
      ariaDescribedBy,
      moveFocusToInput,
      moveFocusToEnd,
+      setFilteredOptionsIndex,
      shouldAutocomplete,
    } = useFilteredOptionsContext();

@@ -139,6 +140,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
      [filteredOptions.length, onChange, toggleIsListOpen]
    );

+    const onBlur = () => {
+      setFilteredOptionsIndex(-1);
+    };
+
    return (
      <input
        {...rest}
@@ -148,6 +153,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
        onChange={onChangeHandler}
        type="text"
        role="combobox"
+        onBlur={onBlur}
        onKeyUp={handleKeyUp}
        onKeyDown={handleKeyDown}
        aria-controls={`${inputProps.id}-filtered-options`}
@@ -1,6 +1,7 @@
 import React from "react";
 import { Chips } from "../../..";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
+import { useInputContext } from "../Input/inputContext";

 interface SelectedOptionsProps {
  selectedOptions?: string[];
@@ -10,10 +11,12 @@ interface SelectedOptionsProps {

 const Option = ({ option }: { option: string }) => {
  const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
+  const { focusInput } = useInputContext();

  const onClick = (e) => {
    e.stopPropagation();
    removeSelectedOption(option);
+    focusInput();
  };

  if (!isMultiSelect) {
@@ -365,12 +365,20 @@ export const RemoveSelectedMultiSelectTest = {
    await sleep(250);
    userEvent.keyboard("{Enter}");
    await sleep(250);
-    userEvent.keyboard("{Escape}");
-    await sleep(250);

    const appleSlett = canvas.getByLabelText("apple slett");
+    appleSlett.focus();
+    await sleep(250);
    userEvent.click(appleSlett);
    await sleep(250);
+    const appleOption = canvas.getByRole("option", {
+      name: "apple",
+      selected: false,
+    });
+    expect(appleOption).toBeVisible();
+    userEvent.keyboard("{Escape}");
+    await sleep(250);
+    expect(appleOption).not.toBeVisible();

    const bananaSlett = canvas.getByLabelText("banana slett");
    expect(bananaSlett).toBeInTheDocument();
@@ -25,6 +25,10 @@ export interface CellProps extends HTMLAttributes<HTMLDivElement> {
  lg?: Column;
 }

+/**
+ * @deprecated Use <HGrid /> instead. <Grid /> will be removed in the future.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ */
 export const Cell = forwardRef<HTMLDivElement, CellProps>(
  ({ children, xs, sm, md, lg, className, ...rest }, ref) => {
    return (
@@ -8,6 +8,10 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
 }

+/**
+ * @deprecated Use <HGrid /> instead. <Grid /> will be removed in the future.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ */
 export const Grid = forwardRef<HTMLDivElement, GridProps>(
  ({ children, className, ...rest }, ref) => (
    <div ref={ref} className={cl("navds-grid", className)} {...rest}>
@@ -1,6 +1,2 @@
 export { default as Cell, type CellProps } from "./Cell";
 export { default as Grid, type GridProps } from "./Grid";
-export {
-  default as ContentContainer,
-  type ContentContainerProps,
-} from "./ContentContainer";
@@ -33,3 +33,5 @@ export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
 export * from "./layout/stack";
+export * from "./layout/grid";
+export * from "./layout/content-container";
@@ -0,0 +1,4 @@
+export {
+  default as ContentContainer,
+  type ContentContainerProps,
+} from "./ContentContainer";
@@ -0,0 +1,101 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "clsx";
+import {
+  getResponsiveProps,
+  getResponsiveValue,
+  ResponsiveProp,
+  SpacingScale,
+} from "../utilities/css";
+
+export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints.
+   * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
+   * @example
+   * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
+   * @example
+   * columns={3}
+   * @example
+   * columns="repeat(3, minmax(0, 1fr))"
+   */
+  columns?: ResponsiveProp<number | string>;
+  /** Spacing between columns. Based on spacing-tokens.
+   * @example
+   * gap="6"
+   * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
+   */
+  gap?: ResponsiveProp<SpacingScale>;
+}
+/**
+ * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ * @see 🏷️ {@link HGridProps}
+ *
+ * @example
+ * <HGrid gap="6" columns={3}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ * @example
+ * <HGrid gap={{xs: "2", md: "6"}} columns={3}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ * @example
+ * <HGrid gap="6" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ */
+export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
+  ({ className, columns, gap, style, ...rest }, ref) => {
+    const styles: React.CSSProperties = {
+      ...style,
+      ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
+      ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
+    };
+
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl("navds-hgrid", className)}
+        style={styles}
+      />
+    );
+  }
+);
+
+function formatGrid(
+  props?: ResponsiveProp<number | string>
+): ResponsiveProp<number | string> {
+  if (!props) {
+    return {};
+  }
+
+  if (typeof props === "string" || typeof props === "number") {
+    return getColumnValue(props);
+  }
+
+  return Object.fromEntries(
+    Object.entries(props).map(([breakpointToken, columnValue]) => [
+      breakpointToken,
+      getColumnValue(columnValue),
+    ])
+  );
+}
+
+const getColumnValue = (prop: number | string) => {
+  if (typeof prop === "number") {
+    return `repeat(${prop}, minmax(0, 1fr))`;
+  }
+
+  return prop;
+};
+
+export default HGrid;
@@ -0,0 +1,102 @@
+import React from "react";
+import { HGrid } from ".";
+
+const columnsVariants = {
+  Number: "columnNumber",
+  String: "columnString",
+  Object: "columnObject",
+};
+
+export default {
+  title: "ds-react/HGrid",
+  component: HGrid,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    columnsType: {
+      defaultValue: Object.keys(columnsVariants)[0],
+      options: Object.keys(columnsVariants),
+      control: { type: "radio" },
+    },
+  },
+};
+
+/* const getColumnsProp = () */
+
+export const Default = {
+  render: (props) => (
+    <HGrid
+      gap={props?.gap ?? 4}
+      columns={props[columnsVariants[props.columnsType]]}
+    >
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+  args: {
+    columnNumber: 4,
+    columnObject: { xs: 1, md: 4 },
+    columnString: "repeat(3, minmax(0, 1fr))",
+    gap: "4",
+  },
+};
+
+export const Gap = {
+  render: () => (
+    <HGrid gap="6">
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+};
+
+export const DynamicGap = {
+  render: () => (
+    <HGrid gap={{ xs: "2", md: "8" }}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+};
+
+export const Columns = {
+  render: () => (
+    <HGrid gap="4" columns={2}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+};
+
+export const DynamicColumns = {
+  render: () => (
+    <HGrid gap="4" columns={{ sm: "1fr 5fr", md: "2fr 2fr" }}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+    </HGrid>
+  ),
+};
+
+function Placeholder({ text }) {
+  return (
+    <div
+      style={{
+        background: "var(--a-deepblue-900)",
+        height: "5rem",
+        width: "auto",
+        color: "white",
+      }}
+    >
+      {text}
+    </div>
+  );
+}
@@ -0,0 +1 @@
+export { default as HGrid, type HGridProps } from "./HGrid";
@@ -53,12 +53,12 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
      ref
    ) => {
      const style = {
-        "--ac-stack-direction": direction,
-        "--ac-stack-align": align,
-        "--ac-stack-justify": justify,
-        "--ac-stack-wrap": wrap ? "wrap" : "nowrap",
-        ...getResponsiveProps(`stack`, "gap", "spacing", gap),
        ..._style,
+        "--__ac-stack-direction": direction,
+        "--__ac-stack-align": align,
+        "--__ac-stack-justify": justify,
+        "--__ac-stack-wrap": wrap ? "wrap" : "nowrap",
+        ...getResponsiveProps(`stack`, "gap", "spacing", gap),
      } as React.CSSProperties;

      return (
@@ -21,36 +21,58 @@ export type SpacingScale =
  | "24"
  | "32";

-export type ResponsiveProp<T> =
-  | T
-  | {
-      // eslint-disable-next-line no-unused-vars
-      [Breakpoint in BreakpointsAlias]?: T;
-    };
+type ResponsivePropConfig<T = string> = {
+  // eslint-disable-next-line no-unused-vars
+  [Breakpoint in BreakpointsAlias]?: T;
+};

-export function getResponsiveProps(
+export type ResponsiveProp<T> = T | ResponsivePropConfig<T>;
+
+export type ResponsiveValue<T = string> = undefined | ResponsiveProp<T>;
+
+export function getResponsiveProps<T = string>(
  componentName: string,
  componentProp: string,
  tokenSubgroup: string,
-  responsiveProp?:
-    | string
-    | {
-        // eslint-disable-next-line no-unused-vars
-        [Breakpoint in BreakpointsAlias]?: string;
-      }
+  responsiveProp?: ResponsiveProp<T>
 ) {
-  if (!responsiveProp) return {};
+  if (!responsiveProp) {
+    return {};
+  }

  if (typeof responsiveProp === "string") {
    return {
-      [`--ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+      [`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
    };
  }

  return Object.fromEntries(
    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
-      `--ac-${componentName}-${componentProp}-${breakpointAlias}`,
+      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
      `var(--a-${tokenSubgroup}-${aliasOrScale})`,
    ])
  );
 }
+
+export function getResponsiveValue<T = string>(
+  componentName: string,
+  componentProp: string,
+  responsiveProp?: ResponsiveValue<T>
+) {
+  if (!responsiveProp) {
+    return {};
+  }
+
+  if (typeof responsiveProp === "string") {
+    return {
+      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+    };
+  }
+
+  return Object.fromEntries(
+    Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
+      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+      responsiveValue,
+    ])
+  );
+}
@@ -197,3 +197,19 @@ export const Variants = {
    iconRight: false,
  },
 };
+
+export const InlineLink = {
+  render: () => (
+    <BodyLong>
+      Officia incididunt Culpa sit aute est duis minim in in voluptate velit
+      Incididunt laborum nisi nisi Lorem officia adipisicing non veniam{" "}
+      <Link href="#" inlineText={true}>
+        lenke til ny side
+        <PlusCircleFillIcon aria-hidden />
+      </Link>{" "}
+      Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
+      nisi nisi Lorem officia adipisicing non veniam occaecat commodo id ad
+      aliquip.
+    </BodyLong>
+  ),
+};
@@ -1,5 +1,13 @@
 # @navikt/ds-tailwind

+## 4.11.1
+
+## 4.11.0
+
+## 4.10.2
+
+## 4.10.1
+
 ## 4.10.0

 ## 4.9.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "4.10.0",
+  "version": "4.11.1",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^4.10.0",
+    "@navikt/ds-tokens": "^4.11.1",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,13 @@
 # @navikt/ds-tokens

+## 4.11.1
+
+## 4.11.0
+
+## 4.10.2
+
+## 4.10.1
+
 ## 4.10.0

 ## 4.9.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "4.10.0",
+  "version": "4.11.1",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,39 @@
 # Changelog

+## 4.11.1
+
+### @navikt/ds-css
+
+- Border-radius: Fikset hardkodet border-radius i Datepicker, ToggleGroup og Combobox. ([#2159](https://github.com/navikt/aksel/pull/2159))
+
+## 4.11.0
+
+### @navikt/ds-css
+
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+
+<!---->
+
+- List: Fikset alignment av ikoner ([#2149](https://github.com/navikt/aksel/pull/2149))
+
+- Font: La til egen font for semibold italic for bedre skalering cross-browser ([#2150](https://github.com/navikt/aksel/pull/2150))
+
+### @navikt/ds-react
+
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+
+<!---->
+
+- Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
+
+- Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
+
+## 4.10.2
+
+### @navikt/ds-css
+
+- Link: Fikset visited farger og inline SVG-reset ved bruk av tailwind
+
 ## 4.10.0

 ### @navikt/ds-css
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^4.10.0",
-    "@navikt/ds-css": "^4.10.0",
-    "@navikt/ds-react": "^4.10.0",
-    "@navikt/ds-tailwind": "^4.10.0",
-    "@navikt/ds-tokens": "^4.10.0"
+    "@navikt/aksel-icons": "^4.11.1",
+    "@navikt/ds-css": "^4.11.1",
+    "@navikt/ds-react": "^4.11.1",
+    "@navikt/ds-tailwind": "^4.11.1",
+    "@navikt/ds-tokens": "^4.11.1"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -1,4 +1,5 @@
 import { PencilIcon } from "@navikt/aksel-icons";
+import { Button } from "@navikt/ds-react";
 import { getParameters } from "codesandbox/lib/api/define";

 const indexTsx = `import React from 'react';
@@ -50,16 +51,18 @@ export const CodeSandbox = ({ code }: { code: string }) => {
      action="https://codesandbox.io/api/v1/sandboxes/define"
      method="POST"
      target="_blank"
+      className="h-8"
    >
      <input type="hidden" name="parameters" value={parameters} />
      <input type="hidden" name="query" value="module=App.js" />
-      <button
+      <Button
+        variant="tertiary-neutral"
+        size="small"
        type="submit"
-        className="focus-visible:shadow-focus-inset flex items-center justify-center gap-1 rounded-sm px-3 py-2 hover:bg-gray-100 focus:outline-none active:bg-gray-200"
+        icon={<PencilIcon aria-hidden fontSize="1.5rem" />}
      >
-        <PencilIcon aria-hidden fontSize="1.5rem" />
        CodeSandbox
-      </button>
+      </Button>
    </form>
  );
 };
@@ -1,11 +1,16 @@
 import { capitalize, Snippet } from "@/components";
 import { withErrorBoundary } from "@/error-boundary";
 import { CodeExapmplesT } from "@/types";
-import { BodyLong, Chips, Link } from "@navikt/ds-react";
+import {
+  ExternalLinkIcon,
+  LaptopIcon,
+  MobileSmallIcon,
+} from "@navikt/aksel-icons";
+import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
 import cl from "clsx";
-import { useEffect, useState } from "react";
-import { CodeSandbox } from "./CodeSandbox";
 import { useRouter } from "next/router";
+import { useEffect, useRef, useState } from "react";
+import { CodeSandbox } from "./CodeSandbox";

 const iframePadding = 192;
 const iframeId = "example-iframe";
@@ -15,6 +20,7 @@ const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {
  const [frameState, setFrameState] = useState(300);
  const [unloaded, setUnloaded] = useState(true);
  const router = useRouter();
+  const iframeRef = useRef<HTMLIFrameElement>(null);

  const handleExampleLoad = () => {
    let attempts = 0;
@@ -139,10 +145,11 @@ const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {
                    id={iframeId}
                    aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                    className={cl(
-                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
+                      "min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
                      { invisible: unloaded }
                    )}
                    title="Kode-eksempler"
+                    ref={iframeRef}
                  />
                  {unloaded && (
                    <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
@@ -153,18 +160,50 @@ const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {
                    </div>
                  )}
                </div>
-                <div className="mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base sm:justify-end ">
-                  <CodeSandbox code={fil.innhold.trim()} />
-                  <Link
-                    href={`/eksempler/${node.dir.title}/${fil.navn.replace(
-                      ".tsx",
-                      ""
-                    )}`}
-                    className="si-ignore text-gray-900"
-                    target="_blank"
-                  >
-                    Åpne i nytt vindu
-                  </Link>
+                <div className="mb-2 rounded-b border border-gray-300 p-1">
+                  <HStack gap="4" justify="space-between">
+                    <div className="hidden sm:block">
+                      <HStack gap="2">
+                        <Button
+                          variant="tertiary-neutral"
+                          size="small"
+                          icon={
+                            <MobileSmallIcon title="Sett eksempel til mobilbredde" />
+                          }
+                          onClick={() =>
+                            (iframeRef.current.style.width = "360px")
+                          }
+                        />
+
+                        <Button
+                          variant="tertiary-neutral"
+                          size="small"
+                          icon={
+                            <LaptopIcon title="Sett eksempel til desktopbredde" />
+                          }
+                          onClick={() => (iframeRef.current.style.width = "")}
+                        />
+                      </HStack>
+                    </div>
+
+                    <HStack gap="2">
+                      <CodeSandbox code={fil.innhold.trim()} />
+                      <Button
+                        variant="tertiary-neutral"
+                        size="small"
+                        icon={
+                          <ExternalLinkIcon title="Åpne eksempel i nytt vindu" />
+                        }
+                        target="_blank"
+                        className="si-ignore"
+                        as="a"
+                        href={`/eksempler/${node.dir.title}/${fil.navn.replace(
+                          ".tsx",
+                          ""
+                        )}`}
+                      />
+                    </HStack>
+                  </HStack>
                </div>

                <Snippet
@@ -137,7 +137,7 @@ export function TableOfContents({
          hidden: !renderToc,
          "col-start-3 max-w-prose md:sticky md:top-20 lg:flex":
            aksel && renderToc,
-          "mt-12 mr-auto h-full xl:flex": !aksel && renderToc,
+          "mr-auto mt-12 h-full xl:flex": !aksel && renderToc,
        }
      )}
    >
@@ -1,9 +1,9 @@
 import meta from "@navikt/aksel-icons/metadata";

 const subCategorizeIcons = (
-  icons: typeof meta[1][]
-): { sub_category: string; icons: typeof meta[1][] }[] => {
-  const categories: { sub_category: string; icons: typeof meta[1][] }[] = [];
+  icons: (typeof meta)[1][]
+): { sub_category: string; icons: (typeof meta)[1][] }[] => {
+  const categories: { sub_category: string; icons: (typeof meta)[1][] }[] = [];

  for (const icon of icons) {
    const i = categories.findIndex(
@@ -19,14 +19,14 @@ const subCategorizeIcons = (
 };

 export const categorizeIcons = (
-  icons: typeof meta[1][]
+  icons: (typeof meta)[1][]
 ): {
  category: string;
-  sub_categories: { sub_category: string; icons: typeof meta[1][] }[];
+  sub_categories: { sub_category: string; icons: (typeof meta)[1][] }[];
 }[] => {
  const categories: {
    category: string;
-    icons: typeof meta[1][];
+    icons: (typeof meta)[1][];
  }[] = [];

  for (const icon of icons) {
@@ -42,14 +42,14 @@ export const categorizeIcons = (
    .map((x) => ({ ...x, sub_categories: subCategorizeIcons(x.icons) }));
 };

-const noFill = (icon: typeof meta[1], icons: typeof meta[1][]) => {
+const noFill = (icon: (typeof meta)[1], icons: (typeof meta)[1][]) => {
  const foundFill = icons.find(
    (x) => x.name.endsWith("Fill") && x.name.replace("Fill", "") === icon.name
  );
  return !foundFill;
 };

-export const getFillIcon = (icons: typeof meta[1][]) => {
+export const getFillIcon = (icons: (typeof meta)[1][]) => {
  return icons.filter(
    (x, _, z) => x.variant.toLowerCase() === "fill" || noFill(x, z)
  );
@@ -30,15 +30,15 @@
  "dependencies": {
    "@amplitude/analytics-browser": "^2.0.0",
    "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/client": "^6.1.5",
+    "@sanity/client": "^6.4.6",
    "@sanity/code-input": "4.1.1",
    "@sanity/color-input": "^3.1.0",
    "@sanity/icons": "2.4.1",
    "@sanity/image-url": "1.0.2",
    "@sanity/preview-kit": "^2.3.0",
    "@sanity/table": "1.0.1",
-    "@sanity/ui": "^1.7.0",
-    "@sanity/vision": "3.14.1",
+    "@sanity/ui": "^1.7.4",
+    "@sanity/vision": "3.15.1",
    "@svgr/webpack": "^5.5.0",
    "boring-avatars": "1.10.1",
    "clsx": "^1.2.1",
@@ -48,7 +48,7 @@
    "lodash": "^4.17.21",
    "next": "^13.2.1",
    "next-logger": "^3.0.2",
-    "next-sanity": "^5.1.0",
+    "next-sanity": "^5.2.7",
    "pino": "^8.14.1",
    "prism-react-renderer": "^1.3.0",
    "prismjs": "^1.27.0",
@@ -56,14 +56,14 @@
    "react-dom": "^18.0.0",
    "react-modal": "3.15.1",
    "react-responsive-masonry": "^2.1.7",
-    "sanity": "3.14.1",
+    "sanity": "3.15.1",
    "sanity-plugin-asset-source-unsplash": "^1.1.0",
    "sanity-plugin-media": "^2.0.5",
    "sharp": "0.31.3",
    "sitemap": "^7.0.0",
    "styled-components": "^5.2",
    "swr": "^1.1.2",
-    "tailwindcss": "^3.2.0",
+    "tailwindcss": "^3.3.3",
    "tinycolor2": "^1.6.0"
  },
  "devDependencies": {
@@ -72,8 +72,8 @@
    "@next/bundle-analyzer": "^12.1.0",
    "@next/eslint-plugin-next": "^12.2.0",
    "@playwright/test": "1.35.1",
-    "@sanity/block-tools": "^3.12.2",
-    "@sanity/schema": "^3.12.2",
+    "@sanity/block-tools": "^3.15.1",
+    "@sanity/schema": "^3.15.1",
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^13.3.0",
    "@types/jest": "^29.0.0",
@@ -41,5 +41,5 @@ export const Demo = {
 };

 export const args = {
-  index: 1,
+  index: 4,
 };
@@ -40,5 +40,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 1,
 };
@@ -59,5 +59,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 2,
 };
@@ -40,5 +40,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 3,
 };
@@ -0,0 +1,63 @@
+import { HGrid } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Background>
+      <HGrid
+        gap="6"
+        columns={{ xs: "repeat(auto-fit, minmax(10rem, 1fr))", md: 4 }}
+      >
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+      </HGrid>
+    </Background>
+  );
+};
+
+const Placeholder = ({ height = "auto", width = "auto" }) => {
+  return (
+    <div
+      style={{
+        display: "inherit",
+        background: "var(--a-deepblue-500)",
+        height: height ?? undefined,
+        width: width ?? undefined,
+      }}
+    />
+  );
+};
+
+const Background = ({
+  children,
+  width = "100%",
+}: {
+  children: React.ReactNode;
+  width?: string;
+}) => {
+  return (
+    <div
+      style={{
+        background: "var(--a-deepblue-100)",
+        width,
+        height: "auto",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+  desc: "Columns støtter både statisk antall kolonner med 'number' og mer fleksible kolonner med 'string'. ",
+};
@@ -0,0 +1,59 @@
+import { HGrid } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Background>
+      <HGrid gap="6" columns={3}>
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+      </HGrid>
+    </Background>
+  );
+};
+
+const Placeholder = ({ height = "auto", width = "auto" }) => {
+  return (
+    <div
+      style={{
+        display: "inherit",
+        background: "var(--a-deepblue-500)",
+        height: height ?? undefined,
+        width: width ?? undefined,
+      }}
+    />
+  );
+};
+
+const Background = ({
+  children,
+  width = "100%",
+}: {
+  children: React.ReactNode;
+  width?: string;
+}) => {
+  return (
+    <div
+      style={{
+        background: "var(--a-deepblue-100)",
+        width,
+        height: "auto",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+  desc: "HGrid lar deg enkelt dele innholdet opp i kolonner. Basert på CSS-grid",
+};
@@ -0,0 +1,60 @@
+import { HGrid } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Background>
+      <HGrid gap="6" columns={{ xs: 1, sm: 2, md: 4 }}>
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+      </HGrid>
+    </Background>
+  );
+};
+
+const Placeholder = ({ height = "auto", width = "auto" }) => {
+  return (
+    <div
+      style={{
+        display: "inherit",
+        background: "var(--a-deepblue-500)",
+        height: height ?? undefined,
+        width: width ?? undefined,
+      }}
+    />
+  );
+};
+
+const Background = ({
+  children,
+  width = "100%",
+}: {
+  children: React.ReactNode;
+  width?: string;
+}) => {
+  return (
+    <div
+      style={{
+        background: "var(--a-deepblue-100)",
+        width,
+        height: "auto",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+  desc: "Med responsive kolonner kan man dynamiskt tilpasse dem basert på brekkpunktene våre.",
+};
@@ -0,0 +1,60 @@
+import { HGrid } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Background>
+      <HGrid gap={{ xs: "2", md: "8" }} columns={3}>
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+        <Placeholder height="240px" />
+      </HGrid>
+    </Background>
+  );
+};
+
+const Placeholder = ({ height = "auto", width = "auto" }) => {
+  return (
+    <div
+      style={{
+        display: "inherit",
+        background: "var(--a-deepblue-500)",
+        height: height ?? undefined,
+        width: width ?? undefined,
+      }}
+    />
+  );
+};
+
+const Background = ({
+  children,
+  width = "100%",
+}: {
+  children: React.ReactNode;
+  width?: string;
+}) => {
+  return (
+    <div
+      style={{
+        background: "var(--a-deepblue-100)",
+        width,
+        height: "auto",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 3,
+  desc: "Med responsiv gap kan man dynamiskt tilpasse spacing basert på brekkpunktene våre.",
+};
@@ -7,7 +7,7 @@ const Example = () => {
    <BodyLong>
      Officia incididunt Culpa sit aute est duis minim in in voluptate velit
      Incididunt laborum nisi nisi Lorem officia adipisicing non veniam{" "}
-      <Link href="#" inlineText={true}>
+      <Link href="#" inlineText>
        lenke til ny side
        <PlusCircleFillIcon aria-hidden />
      </Link>{" "}
@@ -1,8 +1,8 @@
 import {
-  ArrowCirclepathIcon,
-  BrailleIcon,
-  ChangingRoomIcon,
-  HeadHeartIcon,
+  ChevronDownCircleIcon,
+  ChevronUpCircleIcon,
+  ChevronUpDoubleCircleIcon,
+  ExclamationmarkTriangleIcon,
 } from "@navikt/aksel-icons";
 import { List } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
@@ -10,18 +10,24 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
 const Example = () => {
  return (
    <List>
-      <List.Item icon={<BrailleIcon aria-hidden />}>
-        Blinkende innhold. Vi vil ikke gi brukerne våre anfall.
+      <List.Item
+        title="Kritisk"
+        icon={<ExclamationmarkTriangleIcon aria-hidden />}
+      >
+        dette er problemer som må løses så fort som mulig. De hindrer bruk av
+        siden og kan i verste fall være farlig for bruker.
      </List.Item>
-      <List.Item icon={<HeadHeartIcon aria-hidden />}>
-        Kritiske problemer og problemer med høye barrierer på innhold med høy
-        effekt.
+      <List.Item title="Høy" icon={<ChevronUpDoubleCircleIcon aria-hidden />}>
+        brukere er forhindret i å forstå innholdet eller utføre kritiske
+        oppgaver, og det finnes ingen alternative løsninger.
      </List.Item>
-      <List.Item icon={<ChangingRoomIcon aria-hidden />}>
-        Middels barrierer på innhold med høy effekt.
+      <List.Item title="Medium" icon={<ChevronUpCircleIcon aria-hidden />}>
+        vanskelige, tidkrevende eller frustrerende for brukere å få tilgang til
+        innhold eller funksjonalitet.
      </List.Item>
-      <List.Item icon={<ArrowCirclepathIcon aria-hidden />}>
-        Middels barrierer på innhold med middels effekt.
+      <List.Item title="Lav" icon={<ChevronDownCircleIcon aria-hidden />}>
+        brukeren få tilgang til alt innhold og funksjonalitet, men
+        brukeropplevelsen er dårlig.
      </List.Item>
    </List>
  );
@@ -1,44 +0,0 @@
-import { List } from "@navikt/ds-react";
-import { withDsExample } from "components/website-modules/examples/withDsExample";
-
-const Example = () => {
-  return (
-    <List>
-      <List.Item title="Kritiske">
-        disse er problemer som må løses så fort som mulig—de hindrer folk i å
-        bruke siden i det hele tatt og kan være direkte farlig.
-      </List.Item>
-      <List.Item title="Høy">
-        brukere er forhindret i å forstå innholdet eller utføre kritiske
-        oppgaver, og det finnes ingen forsvarsstrategier eller alternative
-        løsninger.
-        <List>
-          <List.Item>
-            Rammeverket, inkludert navigasjon, påloggings- og søkefunksjoner
-          </List.Item>
-          <List.Item>Gjenbrukbare komponenter</List.Item>
-          <List.Item>Nøkkelstier gjennom nettstedet</List.Item>
-        </List>
-      </List.Item>
-      <List.Item title="Medium">
-        det er vanskelig, tidkrevende eller frustrerende for brukere å få
-        tilgang til innhold eller funksjonalitet.
-      </List.Item>
-      <List.Item title="Lav">
-        brukeren få tilgang til alt innhold og funksjonalitet, men
-        brukeropplevelsen er dårlig.
-      </List.Item>
-    </List>
-  );
-};
-
-export default withDsExample(Example);
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 4,
-};
@@ -8,10 +8,7 @@ const Example = () => {
        Blinkende innhold. Vi vil ikke gi brukerne våre anfall.
      </List.Item>
      <List.Item>
-        Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
-      </List.Item>
-      <List.Item>
-        Kritiske problemer og problemer med høye barrierer på innhold med høy
+        Kritiske problemer og problemer med høye barrierer for innhold med høy
        effekt.
      </List.Item>
      <List.Item>Middels barrierer på innhold med høy effekt.</List.Item>
@@ -4,18 +4,17 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
 const Example = () => {
  return (
    <List as="ul">
-      <List.Item title="Kritiske">
-        disse er problemer som må løses så fort som mulig—de hindrer folk i å
-        bruke siden i det hele tatt og kan være direkte farlig.
+      <List.Item title="Kritisk">
+        dette er problemer som må løses så fort som mulig. De hindrer bruk av
+        siden og kan i verste fall være farlig for bruker.
      </List.Item>
      <List.Item title="Høy">
        brukere er forhindret i å forstå innholdet eller utføre kritiske
-        oppgaver, og det finnes ingen forsvarsstrategier eller alternative
-        løsninger.
+        oppgaver, og det finnes ingen alternative løsninger.
      </List.Item>
      <List.Item title="Medium">
-        det er vanskelig, tidkrevende eller frustrerende for brukere å få
-        tilgang til innhold eller funksjonalitet.
+        vanskelige, tidkrevende eller frustrerende for brukere å få tilgang til
+        innhold eller funksjonalitet.
      </List.Item>
      <List.Item title="Lav">
        brukeren få tilgang til alt innhold og funksjonalitet, men
@@ -3,12 +3,19 @@ import { withDsExample } from "components/website-modules/examples/withDsExample

 const Example = () => {
  return (
-    <List as="ul" title="Vi bør fikse uu-issues i følgende rekkefølge:">
+    <List as="ul" title="Det kan også være aktuelt hvis du:">
      <List.Item>
-        Rammeverket, inkludert navigasjon, påloggings- og søkefunksjoner
+        står i fare for å miste jobben etter å ha vært sykmeldt helt eller
+        delvis i 12 måneder, eller
+      </List.Item>
+      <List.Item>
+        har full eller gradert uføretrygd, men ønsker å jobbe. NAV må ha vurdert
+        om andre arbeidsmarkedstiltak og virkemidler er aktuelle.
+      </List.Item>
+      <List.Item>
+        er en arbeidssøker med varig og vesentlig nedsatt arbeidsevne som kan
+        bli ansatt i en vanlig jobb.
      </List.Item>
-      <List.Item>Gjenbrukbare komponenter</List.Item>
-      <List.Item>Nøkkelstier gjennom nettstedet</List.Item>
    </List>
  );
 };
@@ -86,7 +86,7 @@ export const query = `*[_type == "aksel_forside"][0]{
          seo,
          ${contributorsAll}
        },
-        "artikler": *[_type == "aksel_artikkel" && defined(publishedAt) && !(_id in ^.highlights[]._ref)] | order(publishedAt desc)[0...3]{
+        "artikler": *[_type == "aksel_artikkel" && defined(publishedAt) && !(_id in ^.highlights[]._ref)] | order(publishedAt desc)[0...4]{
          _type,
          _id,
          heading,
@@ -95,7 +95,6 @@ export const structure = async (
  );

  outdated = outdated.filter((x) => isAfter(x.updateInfo?.lastVerified));
-  console.log(outdated.length);

  return S.list()
    .title("Innholdstyper")
@@ -125,7 +124,7 @@ export const structure = async (
        ? [
            S.listItem()
              .title(
-                `Nye tilbakemeldinger (${
+                `Tilbakemeldinger (${
                  feedback.filter(
                    (x) => !x._id.includes("draft") && x.behandlet === false
                  ).length
@@ -134,7 +133,7 @@ export const structure = async (
              .icon(CommentIcon)
              .child(
                S.list()
-                  .title("Tilbakemeldinger")
+                  .title("Tilbakemeldinger.")
                  .items([
                    S.listItem()
                      .title(
@@ -3,7 +3,7 @@ import { codeInput } from "@sanity/code-input";
 import { colorInput } from "@sanity/color-input";
 import { table } from "@sanity/table";
 import { visionTool } from "@sanity/vision";
-import { createAuthStore, defineConfig } from "sanity";
+import { defineConfig } from "sanity";
 import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";
 import { media } from "sanity-plugin-media";
 import { deskTool } from "sanity/desk";
@@ -94,9 +94,9 @@ function defaultConfig() {
 }

 function authStore(dataset: string) {
-  return createAuthStore({
+  return {
    redirectOnSingle: false,
-    mode: "replace",
+    mode: "replace" as const,
    projectId,
    dataset,
    providers: [
@@ -111,5 +111,5 @@ function authStore(dataset: string) {
        url: "https://api.sanity.io/v1/auth/login/github",
      },
    ],
-  });
+  };
 }
@@ -28,7 +28,7 @@ export const GodPraksisArtikkel = defineType({
    defineField({
      title: "Kobling til tema",
      description:
-        "Gjør det mulig for temaredaktør å vise artikkelen på en temaside",
+        "Lenker artikkel til Tema og tilgjengeliggjør den for tema-redaktører.",
      name: "tema",
      type: "array",
      of: [{ type: "reference", to: [{ type: "aksel_tema" }] }],
@@ -4,7 +4,7 @@ export const ingressField = defineField({
  title: "Ingress",
  name: "ingress",
  description:
-    "Brukes til ingress, card description og seo description-tag. Bør bære konsis og oppsummerende.",
+    "Brukes til diverse metadata-felt. Bør bære konsis og oppsummere for hva artikkel innebærer.",
  type: "text",
  group: "innhold",
  rows: 3,
@@ -7,8 +7,11 @@ export const titleField = defineField({
  type: "string",
  group: "innhold",
  description: "Bruk en kort og konsis tittel om mulig.",
-  validation: (Rule) =>
-    Rule.required().max(60).error("Sidetittel kan ikke være over 60 tegn"),
+
+  validation: (Rule) => [
+    Rule.required().min(8).error("Sidetittel må være på minst 8 tegn"),
+    Rule.max(60).error("Sidetittel kan ikke være over 60 tegn"),
+  ],
  options: {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    //@ts-ignore
@@ -30,7 +30,7 @@ p.override-text-no-max {
  position: absolute;
  width: 8px;
  height: 8px;
-  border-radius: 2px;
+  border-radius: var(--a-border-radius-small);
  background-color: var(--a-deepblue-500);
  transform: translateY(10px) translateX(2px) rotate(45deg);
  left: 0;
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "4.10.0",
-    "@navikt/ds-react": "4.10.0",
+    "@navikt/ds-css": "4.11.1",
+    "@navikt/ds-react": "4.11.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
@@ -211,22 +211,22 @@
  },
  "devDependencies": {
    "@changesets/cli": "2.26.2",
-    "@storybook/addon-a11y": "7.2.0",
-    "@storybook/addon-actions": "7.2.0",
-    "@storybook/addon-essentials": "7.2.0",
-    "@storybook/addon-interactions": "7.2.0",
-    "@storybook/addon-storysource": "7.2.0",
-    "@storybook/addons": "7.2.0",
-    "@storybook/csf-tools": "7.2.0",
+    "@storybook/addon-a11y": "7.2.3",
+    "@storybook/addon-actions": "7.2.3",
+    "@storybook/addon-essentials": "7.2.3",
+    "@storybook/addon-interactions": "7.2.3",
+    "@storybook/addon-storysource": "7.2.3",
+    "@storybook/addons": "7.2.3",
+    "@storybook/csf-tools": "7.2.3",
    "@storybook/jest": "^0.1.0",
-    "@storybook/react": "7.2.0",
-    "@storybook/react-vite": "7.2.0",
+    "@storybook/react": "7.2.3",
+    "@storybook/react-vite": "7.2.3",
    "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "7.2.0",
+    "@storybook/theming": "7.2.3",
    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
    "@typescript-eslint/parser": "^5.41.0",
    "@whitespace/storybook-addon-html": "^5.1.6",
-    "chromatic": "6.5.4",
+    "chromatic": "6.21.0",
    "concurrently": "7.2.1",
    "cross-env": "^7.0.0",
    "eslint": "^8.16.0",
@@ -244,7 +244,7 @@
    "react": "^18.0.0",
    "react-docgen-typescript": "2.2.2",
    "react-dom": "^18.0.0",
-    "storybook": "7.2.0",
+    "storybook": "7.2.3",
    "stylelint": "^14.8.5",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-standard": "^25.0.0",
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	44da7fcdc6	Version Packages (#2160 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-08-14 14:43:22 +02:00
Ken	e68ab5cb2c	🎨 Fikset hardkodet border-radius i diverse komponenter (#2159 )	2023-08-14 14:40:47 +02:00
Ken	c721b392f9	♻️ Chores Sanity, Storybook - Oppdatert Storybook, Sanity - Fikset validering for InputWithCounter i Sanity - Fikset Accordion-stories rekkefølge - La til egne knapper for Desktop/mobil-view for eksempler - Bruker DS-knapper i kode-eksempler på Aksel	2023-08-14 13:40:10 +02:00
Ken	1d0d0ce665	Merge branch 'main' of https://github.com/navikt/aksel	2023-08-13 20:56:42 +02:00
Ken	9d02940543	🔥 Fjernet console.log	2023-08-13 20:50:54 +02:00
Ken	7ff63a2c63	🐛 Fikset validering for sidetittel i sanity	2023-08-13 20:50:13 +02:00
github-actions[bot]andgithub-actions[bot]	49f33a78d8	Version Packages (#2151 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-08-11 15:59:23 +02:00
Ken	06aaec70f0	📝 Oppdatert changeset for HGrid	2023-08-11 15:43:40 +02:00
Ken	5fbf230e47	🎨 Justert antall viste artikkler i masonary	2023-08-11 13:24:26 +02:00
Vegard Haugstvedt	53265c247e	It is not possible to close combobox dropdown after clicking a chip (#2155 ) * Fixes bug where it is not possible to close dropdown by pressing escape or clicking outside the combobox after clicking the chips to de-select an option In short, the focus were lost/reset when the chip disappears, but now is reset to the input instead. Also fixed issue where clicking the chip while virtual focus is in the dropdown caused a click on both the option and the chip, causing it to be de-selected and instantly re-selected. * Updated "remove selected"-test to also check that closing the dropdown after clicking a chip is possible. * Added changeset	2023-08-11 12:38:22 +02:00
Ken	d78f33df79	🚚 Markert gammelt grid som deprecated (#2153 )	2023-08-11 12:37:02 +02:00
Ken	4375c55ab6	📝 Oppdatert storybook template i workflow	2023-08-11 09:45:02 +02:00
Christian SkrøvsethandKen	0de8238ecf	Add semibold (600) fonts (#2150 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-08-11 09:01:59 +02:00
KenandHalvor Haugan	647b14a238	[Primitives] HGrid (#1838 ) Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2023-08-10 15:38:58 +02:00
Ken	64901adccb	🎨 Oppdatert List-dokumentasjon, fikset bruk av ikoner med text (#2149 )	2023-08-10 13:06:48 +02:00
Ken	49ddb2094c	Hotfix: Fikset visited state for Link og vertical-align for SVG i tailwind	2023-08-09 17:06:15 +02:00
github-actions[bot]andgithub-actions[bot]	8a5f209735	Version Packages (#2148 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-08-09 16:30:12 +02:00
Ken	d3bd1202ed	Hotfix: Fikset visited state for Link og SVG-reset ved bruk av tailwind	2023-08-09 16:19:49 +02:00
				`@@ -0,0 +1 @@`
				`export { default as HGrid, type HGridProps } from "./HGrid";`