Version Packages (#1819 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
List komponent (#1807 )
2026-10-13 01:02:02 +00:00 · 2023-02-23 12:10:28 +01:00 · 2023-02-23 12:04:05 +01:00 · 2023-02-22 14:34:38 +01:00 · 2023-02-22 14:32:30 +01:00 · 2023-02-22 14:26:13 +01:00
48 changed files with 788 additions and 77 deletions
@@ -1,5 +1,11 @@
 # @navikt/ds-codemod

+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
 ## 2.2.0

 ## 2.1.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.2.0",
+  "version": "2.4.0",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -39,8 +39,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.2.0",
-    "@navikt/ds-react": "^2.2.0",
+    "@navikt/ds-icons": "^2.4.0",
+    "@navikt/ds-react": "^2.4.0",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,27 @@
 # @navikt/ds-css

+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+## 2.3.1
+
+### Patch Changes
+
+- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+
+## 2.3.0
+
+### Minor Changes
+
+- [#1813](https://github.com/navikt/aksel/pull/1813) [`7702c6527`](https://github.com/navikt/aksel/commit/7702c65275a4d86a8260852d091e6dd4cfe9217c) Thanks [@ingfo](https://github.com/ingfo)! - Fiksa sentrering av tekst i Select i Firefox
+
+### Patch Changes
+
+- [`51b62cca7`](https://github.com/navikt/aksel/commit/51b62cca7b857e92669cd0b09e620b131faf80e5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Select small 34px høyde -> 32px
+
 ## 2.2.0

 ### Minor Changes
@@ -25,7 +25,6 @@
  position: relative;
  display: flex;
  width: 100%;
-  align-items: center;
  color: var(--a-text-default);
 }

@@ -34,12 +33,12 @@
  font-size: 1rem;
  right: 0.5rem;
  pointer-events: none;
+  align-self: center;
 }

 .navds-form-field--small .navds-select__input {
  min-height: 32px;
-  padding: 0.25rem;
-  padding-right: 2rem;
+  padding: 0 2rem 0 0.25rem;
 }

 /**
@@ -63,7 +63,7 @@
 }

 .navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--a-surface-danger));
+  color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
 }

 .navds-textarea--resize .navds-textarea__input {
@@ -26,3 +26,4 @@
@import "stepper.css";
@import "table.css";
@import "tabs.css";
+@import "list.css";
@@ -0,0 +1,57 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+}
+
+.navds-list li:not(:first-child) {
+  margin-top: var(--a-spacing-5);
+}
+
+.navds-list ul .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-3);
+  padding-left: 0;
+}
+
+.navds-list ul .navds-list__item::marker {
+  content: none;
+}
+
+.navds-list ol .navds-list__item-marker--icon {
+  grid-column: 1 / 2;
+  display: flex;
+}
+
+.navds-list .navds-list__item-marker--bullet {
+  display: flex;
+  margin-top: 6px;
+  grid-column: 1 / 2;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.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)));
+}
+
+.navds-list ul .navds-list__item-content {
+  grid-column: 2 / 3;
+}
+
+.navds-list ol {
+  padding-left: var(--a-spacing-2);
+}
+
+.navds-list ol li {
+  padding-left: var(--a-spacing-1);
+  margin-left: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  font-size: var(--a-font-size-medium);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.2.0",
+  "version": "2.4.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -20,7 +20,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.2.0",
+    "@navikt/ds-tokens": "^2.4.0",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -129,6 +129,12 @@
    "--ac-link-active-bg": "--a-border-focus",
    "--ac-link-active-border": "--a-border-focus"
  },
+  "list": {
+    "--ac-list-marker-ul-color": "--ac-list-marker-color",
+    "--ac-list-marker-icon-color": "--ac-list-marker-color",
+    "--ac-list-marker-ol-color": "--ac-list-marker-color",
+    "--ac-list-marker-color": "--a-icon-default"
+  },
  "loader": {
    "--ac-loader-stroke": "--a-border-default",
    "--ac-loader-stroke-bg": "--a-surface-active",
@@ -324,7 +330,7 @@
    "--ac-textarea-placeholder": "--a-text-subtle",
    "--ac-textarea-hover-border": "--a-border-action",
    "--ac-textarea-counter-text": "--a-text-subtle",
-    "--ac-textarea-counter-error-text": "--a-surface-danger",
+    "--ac-textarea-counter-error-text": "--a-text-danger",
    "--ac-textarea-error-border": "--a-border-danger"
  }
 }
@@ -1,5 +1,30 @@
 # @navikt/ds-react

+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.1
+
+## 2.3.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.0
+
 ## 2.2.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.2.0",
+  "version": "2.4.0",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,7 +37,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.2.0",
+    "@navikt/ds-icons": "^2.4.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -1,27 +1,28 @@
 export * from "./accordion";
 export * from "./alert";
-export * from "./provider";
 export * from "./button";
+export * from "./chat";
+export * from "./chips";
 export * from "./date";
 export * from "./form";
 export * from "./grid";
-export * from "./help-text";
 export * from "./guide-panel";
+export * from "./help-text";
 export * from "./link";
 export * from "./link-panel";
+export * from "./list";
 export * from "./loader";
 export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./provider";
 export * from "./read-more";
-export * from "./chat";
-export * from "./chips";
 export * from "./stepper";
-export * from "./tag";
-export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tag";
+export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
@@ -0,0 +1,85 @@
+import cl from "clsx";
+import React, { createContext, forwardRef } from "react";
+import { BodyShort, Heading } from "../typography";
+import { useId } from "../util/useId";
+import { ListItem, ListItemType } from "./ListItem";
+
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * HTML list element to render
+   * @default "ul"
+   */
+  as?: "ul" | "ol";
+  /**
+   * List heading title
+   */
+  title?: string;
+  /**
+   * List heading description
+   */
+  description?: string;
+  /**
+   * Allows setting a different HTML h-tag
+   * @default "h3"
+   */
+  headingTag?: React.ElementType<any>;
+}
+
+interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
+  Item: ListItemType;
+}
+
+interface ListContextProps {
+  listType: "ul" | "ol";
+}
+
+export const ListContext = createContext<ListContextProps>({
+  listType: "ul",
+});
+
+export const List = forwardRef<HTMLDivElement, ListProps>(
+  (
+    {
+      children,
+      className,
+      as: ListTag = "ul",
+      title,
+      description,
+      headingTag = "h3",
+      ...rest
+    },
+    ref
+  ) => {
+    const ariaId = useId();
+
+    return (
+      <ListContext.Provider
+        value={{
+          listType: ListTag,
+        }}
+      >
+        <div {...rest} ref={ref} className={cl("navds-list", className)}>
+          {title && (
+            <Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <BodyShort id={`description-${ariaId}`}>{description}</BodyShort>
+          )}
+          <ListTag
+            aria-labelledby={title && `tittel-${ariaId}`}
+            aria-describedby={description && `description-${ariaId}`}
+          >
+            {children}
+          </ListTag>
+        </div>
+      </ListContext.Provider>
+    );
+  }
+) as ListComponent;
+
+List.Item = ListItem;
+
+export default List;
@@ -0,0 +1,71 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { BodyShort, Label } from "../typography";
+import { ListContext } from "./List";
+
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * Content for description of the list item
+   */
+  children: React.ReactNode;
+  /**
+   * Title for the list item
+   */
+  title?: string;
+  /*
+   * Icon to be used as list marker
+   */
+  icon?: React.ReactNode;
+}
+
+export interface ListItemType
+  extends React.ForwardRefExoticComponent<
+    ListItemProps & React.RefAttributes<HTMLLIElement>
+  > {}
+
+export const ListItem: ListItemType = forwardRef(
+  ({ className, children, title, icon, ...rest }, ref) => {
+    const { listType } = useContext(ListContext);
+
+    return (
+      <li {...rest} ref={ref} className={cl("navds-list__item", className)}>
+        {listType === "ul" && (
+          <div
+            className={cl({
+              "navds-list__item-marker--icon": icon,
+              "navds-list__item-marker--bullet": !icon,
+            })}
+          >
+            {icon ? (
+              icon
+            ) : (
+              <svg
+                width="6"
+                height="6"
+                viewBox="0 0 6 6"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden
+                focusable={false}
+                role="img"
+              >
+                <rect width="6" height="6" rx="3" fill="currentColor" />
+              </svg>
+            )}
+          </div>
+        )}
+
+        <BodyShort as="div" size="small" className="navds-list__item-content">
+          {title && (
+            <Label as="p" size="small">
+              {title}
+            </Label>
+          )}
+          {children}
+        </BodyShort>
+      </li>
+    );
+  }
+);
+
+export default ListItem;
@@ -0,0 +1,2 @@
+export { default as List } from "./List";
+export type { ListProps } from "./List";
@@ -0,0 +1,119 @@
+import {
+  BabyChangingRoom,
+  Braille,
+  Cognition,
+  Refresh,
+} from "@navikt/ds-icons";
+import { Meta } from "@storybook/react";
+import React from "react";
+import { List } from "..";
+
+export default {
+  title: "ds-react/List",
+  component: List,
+} as Meta;
+
+export const Default = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Ordered = {
+  render: () => {
+    return (
+      <List as="ol">
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Ut Labore Et Dolore Magna Aliqua">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Enim Ad Minim Veniam">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Quis Nostrud Exercitation Ullamco">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Laboris Nisi Ut Aliquip Ex Ea Commodo">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Duis Aute Irure Dolor In Reprehenderit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Voluptate Velit Esse Cillum Dolore">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Eu Fugiat Nulla Pariatur">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const WithHeading = {
+  render: () => {
+    return (
+      <List
+        title="Lorem Ipsum Dolor Sit Amet"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+      >
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Icons = {
+  render: () => {
+    return (
+      <List>
+        <List.Item
+          title="Lorem Ipsum Dolor Sit Amet"
+          icon={<Braille aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item
+          title="Consectetur Adipiscing Elit"
+          icon={<Cognition aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<BabyChangingRoom aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<Refresh aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind

+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
 ## 2.2.0

 ## 2.1.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.2.0",
+  "version": "2.4.0",
  "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": "^2.2.0",
+    "@navikt/ds-tokens": "^2.4.0",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,11 @@
 # @navikt/ds-tokens

+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
 ## 2.2.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.2.0",
+  "version": "2.4.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,11 @@
 # @navikt/ds-icons

+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
 ## 2.2.0

 ## 2.1.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.2.0",
+  "version": "2.4.0",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,15 @@
 # @navikt/ds-css-internal

+## 2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+
+## 2.3.0
+
 ## 2.2.0

 ## 2.1.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.2.0",
+  "version": "2.4.0",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -246,7 +246,7 @@
 }

 .navdsi-timeline__zoom-button:not([aria-pressed="true"]):hover {
-  background: var(--ac-timeline-zoom-hover, var(--a-surface-action-subtle-hover));
+  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
 }

 .navdsi-timeline__zoom-button[aria-pressed="true"] {
@@ -40,7 +40,7 @@
    "--ac-timeline-pin-bg-hover": "--a-surface-danger-hover",
    "--ac-timeline-zoom-border": "--a-border-default",
    "--ac-timeline-zoom-bg": "--a-surface-default",
-    "--ac-timeline-zoom-hover": "--a-surface-action-subtle-hover",
+    "--ac-timeline-zoom-bg-hover": "--a-surface-action-subtle-hover",
    "--ac-timeline-zoom-selected-bg": "--a-surface-inverted",
    "--ac-timeline-zoom-selected-text": "--a-text-on-inverted",
    "--ac-timeline-axislabel-text": "--a-text-subtle"
@@ -1,5 +1,29 @@
 # @navikt/ds-react-internal

+## 2.4.0
+
+### Patch Changes
+
+- Updated dependencies [[`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6)]:
+  - @navikt/ds-react@2.4.0
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.3.1
+  - @navikt/ds-icons@2.3.1
+
+## 2.3.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.3.0
+  - @navikt/ds-icons@2.3.0
+
 ## 2.2.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.2.0",
+  "version": "2.4.0",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -35,8 +35,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.2.0",
-    "@navikt/ds-react": "^2.2.0",
+    "@navikt/ds-icons": "^2.4.0",
+    "@navikt/ds-react": "^2.4.0",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -4,7 +4,7 @@ SIL Open Font License (OFL)

 # The MIT License

-Copyright 2022 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration
+Copyright 2023 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration

 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the "Software"),
@@ -15,14 +15,14 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/ds-codemod": "^2.2.0",
-    "@navikt/ds-css": "^2.2.0",
-    "@navikt/ds-css-internal": "^2.2.0",
-    "@navikt/ds-icons": "^2.2.0",
-    "@navikt/ds-react": "^2.2.0",
-    "@navikt/ds-react-internal": "^2.2.0",
-    "@navikt/ds-tailwind": "^2.2.0",
-    "@navikt/ds-tokens": "^2.2.0"
+    "@navikt/ds-codemod": "^2.4.0",
+    "@navikt/ds-css": "^2.4.0",
+    "@navikt/ds-css-internal": "^2.4.0",
+    "@navikt/ds-icons": "^2.4.0",
+    "@navikt/ds-react": "^2.4.0",
+    "@navikt/ds-react-internal": "^2.4.0",
+    "@navikt/ds-tailwind": "^2.4.0",
+    "@navikt/ds-tokens": "^2.4.0"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.1.13"
@@ -110,7 +110,7 @@ const Footer = () => {
            </NextLink>
          </div>
          <div className="block self-end xl:hidden">
-            &copy; 2022 NAV |{" "}
+            &copy; {new Date().getFullYear()} NAV |{" "}
            <NextLink href="/side/personvernerklaering" passHref>
              <a className="focus:bg-border-focus-on-inverted focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring">
                Personvernerklæring og informasjonskapsler
@@ -1,5 +1,5 @@
 import { LightBulb } from "@navikt/ds-icons";
-import { BodyLong, BodyShort, Heading } from "@navikt/ds-react";
+import { BodyLong, BodyShort, Button, Heading } from "@navikt/ds-react";
 import cl from "classnames";
 import { ChangeLogIconOutline } from "components/assets";

@@ -23,12 +23,14 @@ const SuggestionBlockComponent = ({
          {options[variant]?.heading}
        </Heading>
        <BodyLong className="mt-2">{options[variant]?.text}</BodyLong>
-        <a
+        <Button
+          variant="secondary-neutral"
+          as="a"
          href={options[variant].link + reference}
-          className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus mt-4 w-fit rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
+          className="mt-4 w-fit"
        >
          Send innspill
-        </a>
+        </Button>
      </div>
    </div>
  );
@@ -67,12 +69,13 @@ export const SuggestionBlock = ({
        <LightBulb aria-hidden className="shrink-0 text-2xl" />
        {options[variant]?.text}
      </BodyShort>
-      <a
+      <Button
+        variant="secondary-neutral"
+        as="a"
        href={options[variant]?.link + reference}
-        className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
      >
        Send forslag
-      </a>
+      </Button>
    </div>
  );
 };
@@ -0,0 +1,18 @@
+import { Edit } from "@navikt/ds-icons";
+import { Button } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return <Button icon={<Edit aria-hidden />} />;
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 9,
+};
@@ -0,0 +1,17 @@
+import { Button } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return <Button variant="primary-neutral">Primary</Button>;
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 11,
+};
@@ -2,12 +2,7 @@ import { Button } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
-  return (
-    <div className="flex gap-2">
-      <Button>Primary</Button>
-      <Button variant="primary-neutral">Primary</Button>
-    </div>
-  );
+  return <Button>Primary</Button>;
 };

 export default withDsExample(Example);
@@ -0,0 +1,17 @@
+import { Button } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return <Button variant="secondary-neutral">Secondary</Button>;
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 12,
+};
@@ -2,12 +2,7 @@ import { Button } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
-  return (
-    <div className="flex gap-2">
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="secondary-neutral">Secondary</Button>
-    </div>
-  );
+  return <Button variant="secondary">Secondary</Button>;
 };

 export default withDsExample(Example);
@@ -0,0 +1,17 @@
+import { Button } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return <Button variant="tertiary-neutral">Tertiary</Button>;
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 13,
+};
@@ -2,12 +2,7 @@ import { Button } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
-  return (
-    <div className="flex gap-2">
-      <Button variant="tertiary">Tertiary</Button>
-      <Button variant="tertiary-neutral">Tertiary</Button>
-    </div>
-  );
+  return <Button variant="tertiary">Tertiary</Button>;
 };

 export default withDsExample(Example);
@@ -0,0 +1,40 @@
+import {
+  BabyChangingRoom,
+  Braille,
+  Cognition,
+  Refresh,
+} from "@navikt/ds-icons";
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List>
+      <List.Item icon={<Braille aria-hidden />}>
+        Blinkende innhold. Vi vil ikke gi brukerne våre anfall.
+      </List.Item>
+      <List.Item icon={<Cognition aria-hidden />}>
+        Kritiske problemer og problemer med høye barrierer på innhold med høy
+        effekt.
+      </List.Item>
+      <List.Item icon={<BabyChangingRoom aria-hidden />}>
+        Middels barrierer på innhold med høy effekt.
+      </List.Item>
+      <List.Item icon={<Refresh aria-hidden />}>
+        Middels barrierer på innhold med middels effekt.
+      </List.Item>
+    </List>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+  desc: "Husk å sette aria-hidden på ikonet.",
+};
@@ -0,0 +1,33 @@
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List as="ol" title="Vi bør fikse uu-issues i følgende rekkefølge:">
+      <List.Item>
+        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
+        effekt.
+      </List.Item>
+      <List.Item>Middels barrierer på innhold med høy effekt.</List.Item>
+      <List.Item>Middels barrierer på innhold med middels effekt.</List.Item>
+    </List>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+  desc: "Husk å sette riktig nivå/tag på List elementet hvis du bruker en tittel.",
+};
@@ -0,0 +1,37 @@
+import { List } from "@navikt/ds-react";
+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>
+      <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.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: 3,
+};
@@ -0,0 +1,25 @@
+import { List } from "@navikt/ds-react";
+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.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>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
@@ -22,4 +22,5 @@ export const Demo = {

 export const args = {
  index: 4,
+  desc: "Vi har valgt å sette label som default skjult i søkfeltet. Dette kan lett endres på med prop `hideLabel`.",
 };
@@ -3,14 +3,8 @@ import { Footer } from "@/layout";
 import { akselForsideQuery, SanityT, urlFor } from "@/lib";
 import { getClient } from "@/sanity-client";
 import { BodyLong, Heading } from "@navikt/ds-react";
-import { logNav } from "../components";
-import {
-  ComponentIcon,
-  DownloadIcon,
-  PauseIcon,
-  PlayIcon,
-  TokenIcon,
-} from "@sanity/icons";
+import { ComponentIcon, PauseIcon, PlayIcon } from "@sanity/icons";
+import cl from "clsx";
 import { Header } from "components/layout/header/Header";
 import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import GodPraksisCard from "components/sanity-modules/cards/GodPraksisCard";
@@ -22,7 +16,7 @@ import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import Link from "next/link";
 import { lazy, useEffect, useState } from "react";
-import cl from "clsx";
+import { logNav } from "../components";

 function getPrefersReducedMotion() {
  const QUERY = "(prefers-reduced-motion: no-preference)";
@@ -314,7 +308,7 @@ const Forside = ({
              </ul>
              <div className="mx-auto mt-8">
                <AkselLink href="/god-praksis">
-                  {`Utforsk alle ${temaCount} god praksis tema`}
+                  {`Utforsk alle ${temaCount} tema i god praksis`}
                </AkselLink>
              </div>
              <div className="mt-20">
@@ -332,7 +326,7 @@ const Forside = ({
                  ))}
                </div>
                <AkselLink href="/god-praksis/artikler">
-                  Se alle artikler i god praksis
+                  Utforsk alle artikler i god praksis
                </AkselLink>
              </div>
            </div>
@@ -1,8 +1,15 @@
 import { komponentLandingQuery, SanityT, SidebarT, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
-import { Heading, Ingress } from "@navikt/ds-react";
+import { logAmplitudeEvent } from "@/utils";
+import { BodyShort, Heading, Ingress } from "@navikt/ds-react";
 import cl from "clsx";
+import {
+  GithubIcon,
+  YarnIcon,
+  FigmaIcon,
+  ChangelogIcon,
+} from "components/assets";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import ComponentOverview from "components/sanity-modules/component-overview";
 import { SuggestionBlock } from "components/website-modules/suggestionblock";
@@ -11,6 +18,76 @@ import Head from "next/head";
 import { lazy } from "react";
 import { komponentKategorier } from "../../sanity/config";

+function Links() {
+  return (
+    <BodyShort
+      as="span"
+      size="small"
+      className="text-text-subtle mb-6 flex flex-wrap gap-4"
+    >
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="https://github.com/navikt/aksel/tree/main/%40navikt"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "github",
+          })
+        }
+      >
+        <GithubIcon /> Github
+      </a>
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="https://yarnpkg.com/package/@navikt/ds-react"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "yarn",
+          })
+        }
+      >
+        <YarnIcon />
+        Yarn
+      </a>
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="/grunnleggende/kode/endringslogg"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker komponenter",
+            til: "endringslogg",
+          })
+        }
+      >
+        <ChangelogIcon />
+        Endringslogg
+      </a>
+
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="https://www.figma.com/@nav_aksel"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "figma",
+          })
+        }
+      >
+        <FigmaIcon /> Figma
+      </a>
+    </BodyShort>
+  );
+}
+
 const Page = ({
  page,
  sidebar,
@@ -58,6 +135,7 @@ const Page = ({
        intro={<Ingress className="text-text-on-action">{page?.intro}</Ingress>}
        pageProps={page}
      >
+        <Links />
        <SuggestionBlock variant="komponenter" />
        {komponentKategorier
          .filter(
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "2.2.0",
-    "@navikt/ds-react": "2.2.0",
+    "@navikt/ds-css": "2.4.0",
+    "@navikt/ds-react": "2.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	5c78776941	Version Packages (#1819 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-23 12:10:28 +01:00
Kai Erik Schieren Ken Ken Ken	70eeb24b38	List komponent (#1807 ) * 🎉 setup * 💄 add stylesheet * 🎨 conditional type * 🎨 add listitem * 🎨 add title + desc + refactor * 🎨 added title and description * ♿ add aria labels * 🎨 add headingTag prop * 🎨 add stories * 🎨 update ListItem API * 💄 ul markers * 🎨 update markers * 🎨 add icons story * 🎨 ordered markers * 🎨 update stories * 🎨 tweak list props * 💄 update classes * 💄 update classes again * 🎨 remove icon if ol * 🎨 update stories * 🎨 use default counter for ol * 🎨 h4 > span * 🎨 use bodyshort default * 🎨 update stories * 🎨 tweaks * 🎨 Css-tokens * 🎨 update aria Co-authored-by: Ken <KenAJoh@users.noreply.github.com> * 🎨 refactor css and remove test story co authored by OleJørgen and Ken * 🎨 add examples * 🎨 update examples * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * 🎨 La til tokens-doc * 🔖 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <KenAJoh@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-02-23 12:04:05 +01:00
Ken	2b98dd9c15	📝 Forbedret tekster på forside	2023-02-22 14:34:38 +01:00
Ken	84946d4d4d	🎨 Kode-lenker på /komponenter	2023-02-22 14:32:30 +01:00
Ken	ce7af9dd13	🐛 Fikset CC-år i footer	2023-02-22 14:26:13 +01:00
github-actions[bot]andgithub-actions[bot]	b769d21d7c	Version Packages (#1818 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-22 13:54:03 +01:00
Ken	241b2e678f	🐛 Fikset feil bruk av fallback-tokens i textarea, timeline	2023-02-22 13:48:15 +01:00
Ken	c3e7bc0ada	📝 Linter	2023-02-22 13:43:56 +01:00
github-actions[bot]andgithub-actions[bot]	90ae03a7fc	Version Packages (#1816 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-21 23:24:25 +01:00
Ken	51b62cca7b	📝 Changeset	2023-02-21 23:05:08 +01:00
Ken	b2213e934f	💄 Fikset select-small høyde 34px -> 32px	2023-02-21 23:03:30 +01:00
Ingrid Fosså	7702c65275	Fiksar midtstilling av tekst i Select for Firefox (#1813 )	2023-02-21 22:59:06 +01:00
Ken	176e78bc56	📝 Endre eksempel-tekst for button	2023-02-17 12:03:53 +01:00
Ken	4f510eaade	📄	2023-02-17 11:27:45 +01:00
Ken	2e712e77fa	🏷️ Fikset skrivefeil	2023-02-16 15:14:20 +01:00
Ken	30fca8acdd	🎨 Send-forslag knapp nå default button secondary neutral	2023-02-16 14:29:44 +01:00
Ken	8119d93ca9	🚚 Flyttet netural-varianter ut til egne demoer	2023-02-16 14:26:17 +01:00