List: ✨ New size 'large'

.changeset/proud-rabbits-boil.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+List: :sparkles: New size 'large'

@navikt/core/react/src/list/List.tsx

@@ -1,11 +1,20 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyLong, BodyShort, Heading } from "../typography";
+import { BodyLong, BodyShort, Heading, HeadingProps } from "../typography";
 import { ListItem } from "./ListItem";
 import { ListContext } from "./context";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { ListItemProps, ListProps } from "./types";
 
+const headingSizeMap: Record<
+  Exclude<ListProps["size"], undefined>,
+  HeadingProps["size"]
+> = {
+  small: "xsmall",
+  medium: "small",
+  large: "medium",
+};
+
 export interface ListComponent
   extends React.ForwardRefExoticComponent<
     ListProps & React.RefAttributes<HTMLDivElement>
@@ -58,15 +67,12 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
         <BodyLong
           as="div"
           {...rest}
-          size={size}
+          size={listSize}
           ref={ref}
           className={cl("navds-list", `navds-list--${listSize}`, className)}
         >
           {title && (
-            <Heading
-              size={listSize === "medium" ? "small" : "xsmall"}
-              as={headingTag}
-            >
+            <Heading size={headingSizeMap[listSize]} as={headingTag}>
               {title}
             </Heading>
           )}

@navikt/core/react/src/list/list.stories.tsx

@@ -64,7 +64,7 @@ export const Default: Story = {
     description: "",
   },
   argTypes: {
-    size: { control: { type: "radio" }, options: ["small", "medium"] },
+    size: { control: { type: "radio" }, options: ["small", "medium", "large"] },
     as: { control: { type: "radio" }, options: ["ul", "ol"] },
   },
 };
@@ -137,6 +137,21 @@ export const SizesUl: Story = {
   render: () => {
     return (
       <VStack gap="8">
+        <List
+          title="Large list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="large"
+        >
+          <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>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
         <List
           title="Medium list"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
@@ -176,6 +191,22 @@ export const SizesOl: Story = {
   render: () => {
     return (
       <VStack gap="8">
+        <List
+          title="Large list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="large"
+          as="ol"
+        >
+          <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>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
         <List
           title="Medium list"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
@@ -217,6 +248,27 @@ export const SizesIcons: Story = {
   render: () => {
     return (
       <VStack gap="8">
+        <List
+          title="Large list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="large"
+        >
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Lorem Ipsum Dolor Sit Amet"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Consectetur Adipiscing Elit"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item icon={<HeadHeartIcon aria-hidden />}>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
         <List
           title="Medium list"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
@@ -328,6 +380,33 @@ export const Spacing: Story = {
   render: () => {
     return (
       <>
+        <h2>Large</h2>
+        <BodyLong size="large" spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
+        <List size="large">
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+          <List.Item>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
+            fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum,
+            minus rerum recusandae. Consequuntur sint distinctio nulla
+            reprehenderit eum suscipit quae libero.
+          </List.Item>
+        </List>
+        <BodyLong size="large" spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus
+          aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta
+          voluptates iste maiores perspiciatis? Sapiente in possimus iusto
+          numquam? Esse, voluptatibus.
+        </BodyLong>
         <h2>Medium</h2>
         <BodyLong spacing>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus

@navikt/core/react/src/list/types.ts

@@ -22,7 +22,7 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
    * Changes margin-block on list and font size on items.
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "small" | "medium" | "large";
 }
 
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {

aksel.nav.no/website/pages/eksempler/list/description.tsx

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

aksel.nav.no/website/pages/eksempler/list/icons.tsx

@@ -39,6 +39,6 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 6,
   desc: "Husk å sette aria-hidden på dekorative ikoner.",
 };

aksel.nav.no/website/pages/eksempler/list/item-title.tsx

@@ -33,6 +33,6 @@ export const Demo = {
 };
 
 export const args = {
-  index: 4,
+  index: 5,
   desc: "Du kan også sette en tittel på hvert element i listen.",
 };

aksel.nav.no/website/pages/eksempler/list/large.tsx

@@ -0,0 +1,33 @@
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List as="ul" size="large" title="Det kan også være aktuelt hvis du:">
+      <List.Item>
+        står i fare for å miste jobben etter å ha vært sykmeldt helt eller
+        delvis i 12 måneder,
+      </List.Item>
+      <List.Item>
+        har full eller gradert uføretrygd, men ønsker å jobbe. NAV må ha vurdert
+        om andre arbeidsmarkedstiltak og virkemidler er aktuelle, eller
+      </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>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+};

aksel.nav.no/website/pages/eksempler/list/ordered.tsx

@@ -26,6 +26,6 @@ export const Demo = {
 };
 
 export const args = {
-  index: 2,
+  index: 3,
   desc: "Du kan bruke 'as' for å endre til 'ol' (nummerert liste).",
 };

aksel.nav.no/website/pages/eksempler/list/small.tsx

@@ -6,11 +6,11 @@ const Example = () => {
     <List as="ul" size="small" title="Det kan også være aktuelt hvis du:">
       <List.Item>
         står i fare for å miste jobben etter å ha vært sykmeldt helt eller
-        delvis i 12 måneder, eller
+        delvis i 12 måneder,
       </List.Item>
       <List.Item>
         har full eller gradert uføretrygd, men ønsker å jobbe. NAV må ha vurdert
-        om andre arbeidsmarkedstiltak og virkemidler er aktuelle.
+        om andre arbeidsmarkedstiltak og virkemidler er aktuelle, eller
       </List.Item>
       <List.Item>
         er en arbeidssøker med varig og vesentlig nedsatt arbeidsevne som kan

aksel.nav.no/website/pages/eksempler/list/unordered.tsx

@@ -6,11 +6,11 @@ const Example = () => {
     <List as="ul" title="Det kan også være aktuelt hvis du:">
       <List.Item>
         står i fare for å miste jobben etter å ha vært sykmeldt helt eller
-        delvis i 12 måneder, eller
+        delvis i 12 måneder,
       </List.Item>
       <List.Item>
         har full eller gradert uføretrygd, men ønsker å jobbe. NAV må ha vurdert
-        om andre arbeidsmarkedstiltak og virkemidler er aktuelle.
+        om andre arbeidsmarkedstiltak og virkemidler er aktuelle, eller
       </List.Item>
       <List.Item>
         er en arbeidssøker med varig og vesentlig nedsatt arbeidsevne som kan