diff --git a/.changeset/proud-rabbits-boil.md b/.changeset/proud-rabbits-boil.md new file mode 100644 index 0000000000..19795b6f23 --- /dev/null +++ b/.changeset/proud-rabbits-boil.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": minor +--- + +List: :sparkles: New size 'large' diff --git a/@navikt/core/react/src/list/List.tsx b/@navikt/core/react/src/list/List.tsx index 56bc093acd..70c7d06bb8 100644 --- a/@navikt/core/react/src/list/List.tsx +++ b/@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, + HeadingProps["size"] +> = { + small: "xsmall", + medium: "small", + large: "medium", +}; + export interface ListComponent extends React.ForwardRefExoticComponent< ListProps & React.RefAttributes @@ -58,15 +67,12 @@ export const List = forwardRef( {title && ( - + {title} )} diff --git a/@navikt/core/react/src/list/list.stories.tsx b/@navikt/core/react/src/list/list.stories.tsx index 16017151d0..85193e6c6e 100644 --- a/@navikt/core/react/src/list/list.stories.tsx +++ b/@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 ( + + + Beskrivelsen på punkter er nærmere forklart her + + + Beskrivelsen på punkter er nærmere forklart her + + + Beskrivelsen på punkter er nærmere forklart her + + { return ( + + + Beskrivelsen på punkter er nærmere forklart her + + + Beskrivelsen på punkter er nærmere forklart her + + + Beskrivelsen på punkter er nærmere forklart her + + { return ( + + } + title="Lorem Ipsum Dolor Sit Amet" + > + Beskrivelsen på punkter er nærmere forklart her + + } + title="Consectetur Adipiscing Elit" + > + Beskrivelsen på punkter er nærmere forklart her + + }> + Beskrivelsen på punkter er nærmere forklart her + + { return ( <> +

Large

+ + 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. + + + + 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. + + + 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. + + + + 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. +

Medium

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus diff --git a/@navikt/core/react/src/list/types.ts b/@navikt/core/react/src/list/types.ts index a79d8ccacf..655a48f6a1 100644 --- a/@navikt/core/react/src/list/types.ts +++ b/@navikt/core/react/src/list/types.ts @@ -22,7 +22,7 @@ export interface ListProps extends React.HTMLAttributes { * 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 { diff --git a/aksel.nav.no/website/pages/eksempler/list/description.tsx b/aksel.nav.no/website/pages/eksempler/list/description.tsx index 6a13ef4de0..baeaf9e191 100644 --- a/aksel.nav.no/website/pages/eksempler/list/description.tsx +++ b/aksel.nav.no/website/pages/eksempler/list/description.tsx @@ -28,5 +28,5 @@ export const Demo = { }; export const args = { - index: 3, + index: 4, }; diff --git a/aksel.nav.no/website/pages/eksempler/list/icons.tsx b/aksel.nav.no/website/pages/eksempler/list/icons.tsx index d6467549f1..66c5ac6997 100644 --- a/aksel.nav.no/website/pages/eksempler/list/icons.tsx +++ b/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.", }; diff --git a/aksel.nav.no/website/pages/eksempler/list/item-title.tsx b/aksel.nav.no/website/pages/eksempler/list/item-title.tsx index c218086126..f4196f6edd 100644 --- a/aksel.nav.no/website/pages/eksempler/list/item-title.tsx +++ b/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.", }; diff --git a/aksel.nav.no/website/pages/eksempler/list/large.tsx b/aksel.nav.no/website/pages/eksempler/list/large.tsx new file mode 100644 index 0000000000..4c7b2e7343 --- /dev/null +++ b/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 ( + + + står i fare for å miste jobben etter å ha vært sykmeldt helt eller + delvis i 12 måneder, + + + har full eller gradert uføretrygd, men ønsker å jobbe. NAV må ha vurdert + om andre arbeidsmarkedstiltak og virkemidler er aktuelle, eller + + + er en arbeidssøker med varig og vesentlig nedsatt arbeidsevne som kan + bli ansatt i en vanlig jobb. + + + ); +}; + +// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE +export default withDsExample(Example); + +/* Storybook story */ +export const Demo = { + render: Example, +}; + +export const args = { + index: 2, +}; diff --git a/aksel.nav.no/website/pages/eksempler/list/ordered.tsx b/aksel.nav.no/website/pages/eksempler/list/ordered.tsx index 6f7acaecad..3fe3ded52c 100644 --- a/aksel.nav.no/website/pages/eksempler/list/ordered.tsx +++ b/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).", }; diff --git a/aksel.nav.no/website/pages/eksempler/list/small.tsx b/aksel.nav.no/website/pages/eksempler/list/small.tsx index 3f2b5e67b3..bda8f0100f 100644 --- a/aksel.nav.no/website/pages/eksempler/list/small.tsx +++ b/aksel.nav.no/website/pages/eksempler/list/small.tsx @@ -6,11 +6,11 @@ const Example = () => { 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, 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 er en arbeidssøker med varig og vesentlig nedsatt arbeidsevne som kan diff --git a/aksel.nav.no/website/pages/eksempler/list/unordered.tsx b/aksel.nav.no/website/pages/eksempler/list/unordered.tsx index f4af407251..03a6c6f122 100644 --- a/aksel.nav.no/website/pages/eksempler/list/unordered.tsx +++ b/aksel.nav.no/website/pages/eksempler/list/unordered.tsx @@ -6,11 +6,11 @@ const Example = () => { 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, 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 er en arbeidssøker med varig og vesentlig nedsatt arbeidsevne som kan