Version Packages (#1819 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
List komponent (#1807 )
2026-10-13 09:12:03 +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
34 changed files with 625 additions and 35 deletions
@@ -1,5 +1,7 @@
 # @navikt/ds-codemod

+## 2.4.0
+
 ## 2.3.1

 ## 2.3.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.3.1",
+  "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.3.1",
-    "@navikt/ds-react": "^2.3.1",
+    "@navikt/ds-icons": "^2.4.0",
+    "@navikt/ds-react": "^2.4.0",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,11 @@
 # @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
@@ -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.3.1",
+  "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.3.1",
+    "@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",
@@ -1,5 +1,16 @@
 # @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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.3.1",
+  "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.3.1",
+    "@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,7 @@
 # @navikt/ds-tailwind

+## 2.4.0
+
 ## 2.3.1

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

+## 2.4.0
+
 ## 2.3.1

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

+## 2.4.0
+
 ## 2.3.1

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

+## 2.4.0
+
 ## 2.3.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.3.1",
+  "version": "2.4.0",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,13 @@
 # @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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.3.1",
+  "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.3.1",
-    "@navikt/ds-react": "^2.3.1",
+    "@navikt/ds-icons": "^2.4.0",
+    "@navikt/ds-react": "^2.4.0",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -15,14 +15,14 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/ds-codemod": "^2.3.1",
-    "@navikt/ds-css": "^2.3.1",
-    "@navikt/ds-css-internal": "^2.3.1",
-    "@navikt/ds-icons": "^2.3.1",
-    "@navikt/ds-react": "^2.3.1",
-    "@navikt/ds-react-internal": "^2.3.1",
-    "@navikt/ds-tailwind": "^2.3.1",
-    "@navikt/ds-tokens": "^2.3.1"
+    "@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
@@ -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,
+};
@@ -308,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">
@@ -326,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.3.1",
-    "@navikt/ds-react": "2.3.1",
+    "@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