diff --git a/.changeset/happy-stingrays-judge.md b/.changeset/happy-stingrays-judge.md new file mode 100644 index 0000000000..0067a5e481 --- /dev/null +++ b/.changeset/happy-stingrays-judge.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": minor +"@navikt/ds-css": minor +--- + +:sparkles: Ny komponent FormSummary diff --git a/@navikt/core/css/config/_mappings.js b/@navikt/core/css/config/_mappings.js index 23059b1b79..06414de137 100644 --- a/@navikt/core/css/config/_mappings.js +++ b/@navikt/core/css/config/_mappings.js @@ -178,6 +178,11 @@ const StyleMappings = { { component: "Tag", main: "tag.css", dependencies: [typoCss] }, { component: "TextField", main: formCss, dependencies: [typoCss] }, { component: "Textarea", main: formCss, dependencies: [typoCss] }, + { + component: "FormSummary", + main: formCss, + dependencies: [typoCss, "link.css"], + }, { component: "ToggleGroup", main: "toggle-group.css", diff --git a/@navikt/core/css/form/form-summary.css b/@navikt/core/css/form/form-summary.css new file mode 100644 index 0000000000..42635576b3 --- /dev/null +++ b/@navikt/core/css/form/form-summary.css @@ -0,0 +1,66 @@ +.navds-form-summary { + overflow: hidden; + border: 1px solid var(--a-border-subtle); + border-radius: var(--a-border-radius-large); +} + +.navds-form-summary__header { + background-color: var(--a-surface-subtle); + padding: var(--a-spacing-4) var(--a-spacing-6); + display: flex; + justify-content: space-between; + gap: 0 var(--a-spacing-2); +} + +@media (max-width: 479px) { + .navds-form-summary__header { + padding: var(--a-spacing-3) var(--a-spacing-4); + flex-wrap: wrap; + } +} + +.navds-form-summary__edit { + flex-shrink: 0; + margin-top: var(--a-spacing-1); + align-self: flex-start; +} + +.navds-form-summary > .navds-form-summary__answers { + border-top: 1px solid var(--a-border-subtle); +} + +.navds-form-summary__answers { + padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6); + margin: 0; +} + +@media (max-width: 479px) { + .navds-form-summary__answers { + padding: var(--a-spacing-4); + } +} + +.navds-form-summary__answer:not(:last-child) { + margin-bottom: var(--a-spacing-4); + padding-bottom: var(--a-spacing-4); + border-bottom: 1px solid var(--a-border-divider); +} + +.navds-form-summary__answer:has(.navds-form-summary__answer) { + padding-bottom: var(--a-spacing-6); +} + +.navds-form-summary__answer:has(.navds-form-summary__answer):last-child { + padding-bottom: 0; +} + +.navds-form-summary__value:first-of-type { + margin-top: var(--a-spacing-1); +} + +.navds-form-summary__value :where(.navds-form-summary__answers) { + margin-top: var(--a-spacing-2); + padding: var(--a-spacing-4); + background: var(--a-surface-selected); + border-radius: var(--a-border-radius-large); +} diff --git a/@navikt/core/css/form/index.css b/@navikt/core/css/form/index.css index 3144fbd96d..5c9d51eb75 100644 --- a/@navikt/core/css/form/index.css +++ b/@navikt/core/css/form/index.css @@ -13,3 +13,4 @@ @import "textarea.css"; @import "search.css"; @import "combobox.css"; +@import "form-summary.css"; diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json index d74e174732..93d9a8fadb 100644 --- a/@navikt/core/react/package.json +++ b/@navikt/core/react/package.json @@ -549,6 +549,16 @@ "default": "./cjs/form/file-upload/index.js" } }, + "./FormSummary": { + "import": { + "types": "./esm/form/form-summary/index.d.ts", + "default": "./esm/form/form-summary/index.js" + }, + "require": { + "types": "./cjs/form/form-summary/index.d.ts", + "default": "./cjs/form/form-summary/index.js" + } + }, "./package.json": "./package.json" }, "scripts": { diff --git a/@navikt/core/react/src/form/form-summary/FormSummary.stories.tsx b/@navikt/core/react/src/form/form-summary/FormSummary.stories.tsx new file mode 100644 index 0000000000..19a2826d9b --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/FormSummary.stories.tsx @@ -0,0 +1,372 @@ +import { Meta, StoryFn, StoryObj } from "@storybook/react"; +import React from "react"; +import { LinkIcon } from "@navikt/aksel-icons"; +import { VStack } from "../../layout/stack"; +import { Link } from "../../link"; +import FormSummary from "./FormSummary"; + +const meta: Meta = { + title: "ds-react/FormSummary", + component: FormSummary, + decorators: [ + (story) => ( +
+ {story()} +
+ ), + ], + parameters: { layout: "padded", chromatic: { disable: true } }, +}; +export default meta; + +export const Default: StoryFn = () => ( + + + Personalia + + + + + + Navn + Ola Nordmann + + + + Adresse + + Gate 123 +
+ 1234 Sted + + + + + Fødselsnummer + 12345678910 + + + + Barn nr. 1 + + + + Navn + Kari Nordmann + + + Kjønn + Jente + + + Alder + 6 + + + + + + + Barn nr. 2 + + + + Navn + Per Nordmann + + + Kjønn + Gutt + + + Alder + 7 + + + + + + + Kontaktinformasjon + + Fyll ut kontaktinformasjon + + + + + Hvordan vil du bli varslet? + E-post + SMS + + + +); + +export const LongTexts: StoryFn = () => ( + + + + Arbeidsforhold som du har i eller utenfor EØS-området + + + + Jeg vil endre dette svaret + + + + + + Har du jobbet i et annet EØS-land, Sveits eller Storbritannia i løpet + av de siste 36 månedene? Om ja, hvilket land og hvor lenge jobbet du + der? Kan du fortelle litt om hva du jobbet med? + + + Nei, jeg har ikke jobbet i et annet EØS-land, Sveits eller + Storbritannia i løpet av de siste 36 månedene. Og jeg har heller ikke + jobbet i Norge i løpet av de siste 36 månedene. Men jeg har jobbet i + et annet land utenfor EØS-området. Det var i Sør-Korea, og jeg jobbet + som lærer på en internasjonal skole. Jeg jobbet der i 12 måneder, og + det var en veldig spennende opplevelse. Jeg lærte mye om koreansk + kultur og språk, og jeg fikk mange nye venner. Jeg savner Sør-Korea + veldig mye, og jeg håper å kunne dra tilbake. + + + + Har du jobbet i et annet EØS-land, Sveits eller Storbritannia i + løpet av de siste 36 månedene? Om ja, hvilket land og hvor lenge + jobbet du der? Kan du fortelle litt om hva du jobbet med? + + + Nei, jeg har ikke jobbet i et annet EØS-land, Sveits eller + Storbritannia i løpet av de siste 36 månedene. Og jeg har heller + ikke jobbet i Norge i løpet av de siste 36 månedene. Men jeg har + jobbet i et annet land utenfor EØS-området. Det var i Sør-Korea, + og jeg jobbet som lærer på en internasjonal skole. Jeg jobbet + der i 12 måneder, og det var en veldig spennende opplevelse. Jeg + lærte mye om koreansk kultur og språk, og jeg fikk mange nye + venner. Jeg savner Sør-Korea veldig mye, og jeg håper å kunne + dra tilbake. + + + + + + + +); + +export const NoLink: StoryFn = () => ( + + + + Arbeidsforhold som du har i eller utenfor EØS-området + + + + + + Navn + Ola Nordmann + + + + Fødselsnummer + 12345678910 + + + +); + +const answers = [ + { + label: "Fortell din livshistorie", + value: `Det hele startet da jeg ble født en kald vinterdag i desember. + Jeg var en litt spesiell baby, for jeg hadde masse hår på hodet. Mamma + og pappa ble veldig overrasket da de så meg for første gang. De hadde egentlig + forventet at jeg skulle være helt normal og kjedelig. Du vil kanskje ikke høre resten + av historien min, for den er ganske lang og kjedelig...`, + }, + { + label: "Fødselsnummer", + value: "12345678910", + }, + { + label: "Ting du har i sekken.", + value: [ + { + label: "Saks x2", + value: `Jeg liker å ha med meg en saks i sekken min. Det er alltid kjekt å ha en saks. Jeg pakker gjerne med meg to saks. Da har jeg en reserve hvis den første saksen min skulle bli borte. Det er veldig kjekt.`, + }, + { + label: "Blyant", + value: + "Det er ikke mulig å skrive uten en blyant. Da blir det bare rot.", + }, + { + label: "Kake", + value: `Jeg har alltid en kake i sekken min. Den blir litt most etter en + stund i sekken min men det gjør ingenting. Jeg liker moste kaker. Det er veldig godt.`, + }, + { + label: "Kaffekopp", + value: "Dette har jeg ikke i sekken min", + }, + ], + }, + { + label: "Flere ting du har i sekken.", + value: [ + { + label: "Saks", + value: `En saks til`, + }, + ], + }, +]; + +export const RealisticUsage: StoryFn = () => ( + + + + Diverse informasjon om forskjellige ting og tang. Kjekt å vite. + + + + + + {answers.map((answer, index) => ( + + {answer.label} + + {Array.isArray(answer.value) ? ( + + {answer.value.map((subAnswer, subIndex) => ( + + {subAnswer.label} + {subAnswer.value} + + ))} + + ) : ( + answer.value + )} + + + ))} + + +); + +export const Empty: StoryFn = () => ( + + + + Just Header + + + + + + + Empty Answers + + + + {null} + + + + + Empty Answer + + + + + {null} + + + + + + Empty Label & Value + + + + + + {null} + {null} + + + + + + + Empty Value + + + + + + Adresse + {null} + + + + +); + +export const Chromatic: StoryObj = { + render: () => ( +
+
+

Default

+ {null} +
+
+

Long Texts

+ {null} +
+
+

No Link

+ {null} +
+
+

Realistic Usage

+ {null} +
+
+

Empty

+ {null} +
+
+ ), + parameters: { chromatic: { disable: false } }, +}; + +export const CommaSeparated: StoryFn = () => ( + + + Personalia + + + + + + + Hvilket transportmiddel er du mest kjent for? + + + sykkel, tog, bil, buss, sparkesykkel + + + + + Favoritt slagord? + {`I'll be back.`} + Hasta la vista, baby. + Say hello to my little friend. + + + +); diff --git a/@navikt/core/react/src/form/form-summary/FormSummary.tsx b/@navikt/core/react/src/form/form-summary/FormSummary.tsx new file mode 100644 index 0000000000..e62160f379 --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/FormSummary.tsx @@ -0,0 +1,104 @@ +import cl from "clsx"; +import React, { HTMLAttributes, forwardRef } from "react"; +import FormSummaryAnswer from "./FormSummaryAnswer"; +import FormSummaryAnswers from "./FormSummaryAnswers"; +import FormSummaryEditLink from "./FormSummaryEditLink"; +import FormSummaryHeader from "./FormSummaryHeader"; +import FormSummaryHeading from "./FormSummaryHeading"; +import FormSummaryLabel from "./FormSummaryLabel"; +import FormSummaryValue from "./FormSummaryValue"; + +interface FormSummaryComponent + extends React.ForwardRefExoticComponent< + FormSummaryProps & React.RefAttributes + > { + /** + * Must include `` and optionally ``. + */ + Header: typeof FormSummaryHeader; + /** + * Typographic Heading to use in the `FormSummary.Header` component. + */ + Heading: typeof FormSummaryHeading; + /** + * Link to edit the answers to use in the `FormSummary.Header` component. Should link to the relevant part of the form. + */ + EditLink: typeof FormSummaryEditLink; + /** + * Wrapper component for the answers. + */ + Answers: typeof FormSummaryAnswers; + /** + * Wrapper component for each answer. To be used in the `FormSummary.Answers` component. + */ + Answer: typeof FormSummaryAnswer; + /** + * Corresponds to the question in the form. To be used in the `FormSummary.Answer` component. + */ + Label: typeof FormSummaryLabel; + /** + * Corresponds to the answer in the form. To be used in the `FormSummary.Answer` component. + */ + Value: typeof FormSummaryValue; +} + +export interface FormSummaryProps extends HTMLAttributes { + /** + * Must include: + * + * - `` + * - `` + * + * @example + * + * + * HeadingTekst + * + * + * + * + * Navn + * Ola Nordmann + * + * + * + */ + children: React.ReactNode; +} + +/** + * A summary of a previously answered form. + * + * @example + * + * + * HeadingTekst + * + * + * + * + * Navn + * Ola Nordmann + * + * + * + */ +export const FormSummary = forwardRef( + ({ children, className, ...rest }, ref) => { + return ( +
+ {children} +
+ ); + }, +) as FormSummaryComponent; + +FormSummary.Header = FormSummaryHeader; +FormSummary.Heading = FormSummaryHeading; +FormSummary.EditLink = FormSummaryEditLink; +FormSummary.Answers = FormSummaryAnswers; +FormSummary.Answer = FormSummaryAnswer; +FormSummary.Label = FormSummaryLabel; +FormSummary.Value = FormSummaryValue; + +export default FormSummary; diff --git a/@navikt/core/react/src/form/form-summary/FormSummaryAnswer.tsx b/@navikt/core/react/src/form/form-summary/FormSummaryAnswer.tsx new file mode 100644 index 0000000000..0a1044f22c --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/FormSummaryAnswer.tsx @@ -0,0 +1,27 @@ +import cl from "clsx"; +import React from "react"; + +export interface FormSummaryAnswerProps + extends React.HTMLAttributes { + /** + * Must include: + * - `` + * - `` + */ + children: React.ReactNode; +} + +export const FormSummaryAnswer = React.forwardRef< + HTMLDivElement, + FormSummaryAnswerProps +>(({ children, className, ...rest }, ref) => ( +
+ {children} +
+)); + +export default FormSummaryAnswer; diff --git a/@navikt/core/react/src/form/form-summary/FormSummaryAnswers.tsx b/@navikt/core/react/src/form/form-summary/FormSummaryAnswers.tsx new file mode 100644 index 0000000000..0a86dd3d17 --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/FormSummaryAnswers.tsx @@ -0,0 +1,25 @@ +import cl from "clsx"; +import React, { forwardRef } from "react"; + +export interface FormSummaryAnswersProps + extends React.HTMLAttributes { + /** + * Must include one or more of ``. + */ + children: React.ReactNode; +} + +export const FormSummaryAnswers = forwardRef< + HTMLDListElement, + FormSummaryAnswersProps +>(({ children, className, ...rest }: FormSummaryAnswersProps, ref) => ( +
+ {children} +
+)); + +export default FormSummaryAnswers; diff --git a/@navikt/core/react/src/form/form-summary/FormSummaryEditLink.tsx b/@navikt/core/react/src/form/form-summary/FormSummaryEditLink.tsx new file mode 100644 index 0000000000..83e2aff700 --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/FormSummaryEditLink.tsx @@ -0,0 +1,35 @@ +import cl from "clsx"; +import React, { forwardRef } from "react"; +import { Link } from "../../link"; +import { OverridableComponent } from "../../util/types"; + +// export type FormSummaryEditProps = Partial; +export interface FormSummaryEditProps + extends React.AnchorHTMLAttributes { + /** + * URL to the relevant part of the form, where the answers can be edited. + */ + href?: string; + /** + * Link text. + * + * [How to write good links](https://aksel.nav.no/god-praksis/artikler/lenker). + * @default "Endre svar" + */ + children?: React.ReactNode; +} + +export const FormSummaryEditLink: OverridableComponent< + FormSummaryEditProps, + HTMLAnchorElement +> = forwardRef(({ children = "Endre svar", className, ...rest }, ref) => ( + + {children} + +)); + +export default FormSummaryEditLink; diff --git a/@navikt/core/react/src/form/form-summary/FormSummaryHeader.tsx b/@navikt/core/react/src/form/form-summary/FormSummaryHeader.tsx new file mode 100644 index 0000000000..f486856a67 --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/FormSummaryHeader.tsx @@ -0,0 +1,25 @@ +import cl from "clsx"; +import React, { forwardRef } from "react"; + +export interface FormSummaryHeaderProps + extends React.HTMLAttributes { + /** + * Must include `` and optionally ``. + */ + children: React.ReactNode; +} + +export const FormSummaryHeader = forwardRef< + HTMLDivElement, + FormSummaryHeaderProps +>(({ children, className, ...rest }, ref) => ( +
+ {children} +
+)); + +export default FormSummaryHeader; diff --git a/@navikt/core/react/src/form/form-summary/FormSummaryHeading.tsx b/@navikt/core/react/src/form/form-summary/FormSummaryHeading.tsx new file mode 100644 index 0000000000..d3a14161d9 --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/FormSummaryHeading.tsx @@ -0,0 +1,25 @@ +import React, { forwardRef } from "react"; +import { Heading, HeadingProps } from "../../typography"; +import { OverridableComponent } from "../../util/types"; + +export interface FormSummaryHeadingProps + extends React.HTMLAttributes { + /** + * Heading text. + */ + children: React.ReactNode; + /** + * The heading level. + * @default "3" + */ + level?: Exclude; +} + +export const FormSummaryHeading: OverridableComponent< + FormSummaryHeadingProps, + HTMLHeadingElement +> = forwardRef(({ level = "3", ...rest }, ref) => ( + +)); + +export default FormSummaryHeading; diff --git a/@navikt/core/react/src/form/form-summary/FormSummaryLabel.tsx b/@navikt/core/react/src/form/form-summary/FormSummaryLabel.tsx new file mode 100644 index 0000000000..1e2b57c12c --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/FormSummaryLabel.tsx @@ -0,0 +1,17 @@ +import React, { forwardRef } from "react"; +import { Label } from "../../typography"; + +export interface FormSummaryLabelProps + extends React.HTMLAttributes { + children: React.ReactNode; +} + +export const FormSummaryLabel = forwardRef( + ({ children, ...rest }, ref) => ( + + ), +); + +export default FormSummaryLabel; diff --git a/@navikt/core/react/src/form/form-summary/FormSummaryValue.tsx b/@navikt/core/react/src/form/form-summary/FormSummaryValue.tsx new file mode 100644 index 0000000000..08d1b93ff3 --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/FormSummaryValue.tsx @@ -0,0 +1,24 @@ +import cl from "clsx"; +import React, { forwardRef } from "react"; +import { BodyLong } from "../../typography"; + +export interface FormSummaryValueProps + extends React.HTMLAttributes { + children: React.ReactNode; +} + +export const FormSummaryValue = forwardRef< + HTMLDivElement, + FormSummaryValueProps +>(({ children, className, ...rest }, ref) => ( + + {children} + +)); + +export default FormSummaryValue; diff --git a/@navikt/core/react/src/form/form-summary/index.ts b/@navikt/core/react/src/form/form-summary/index.ts new file mode 100644 index 0000000000..a1335e5ead --- /dev/null +++ b/@navikt/core/react/src/form/form-summary/index.ts @@ -0,0 +1,30 @@ +"use client"; +export { default as FormSummary, type FormSummaryProps } from "./FormSummary"; +export { + default as FormSummaryAnswer, + type FormSummaryAnswerProps, +} from "./FormSummaryAnswer"; +export { + default as FormSummaryAnswers, + type FormSummaryAnswersProps, +} from "./FormSummaryAnswers"; +export { + default as FormSummaryEditLink, + type FormSummaryEditProps, +} from "./FormSummaryEditLink"; +export { + default as FormSummaryHeader, + type FormSummaryHeaderProps, +} from "./FormSummaryHeader"; +export { + default as FormSummaryHeading, + type FormSummaryHeadingProps, +} from "./FormSummaryHeading"; +export { + default as FormSummaryLabel, + type FormSummaryLabelProps, +} from "./FormSummaryLabel"; +export { + default as FormSummaryValue, + type FormSummaryValueProps, +} from "./FormSummaryValue"; diff --git a/@navikt/core/react/src/index.ts b/@navikt/core/react/src/index.ts index 19f651588f..de30c7b377 100644 --- a/@navikt/core/react/src/index.ts +++ b/@navikt/core/react/src/index.ts @@ -26,8 +26,8 @@ export { Dropdown, type DropdownProps } from "./dropdown"; export { ExpansionCard, type ExpansionCardProps } from "./expansion-card"; export { GuidePanel, - type GuidePanelProps, GuidePanelDefaultIllustration, + type GuidePanelProps, } from "./guide-panel"; export { HelpText, type HelpTextProps } from "./help-text"; export { @@ -125,6 +125,21 @@ export { } from "./form/confirmation-panel"; export { ErrorSummary, type ErrorSummaryProps } from "./form/error-summary"; export { Fieldset, type FieldsetProps } from "./form/fieldset"; +export { + UNSAFE_FileUpload, + type FileAccepted, + type FileItem, + type FileMetadata, + type FileObject, + type FileRejected, + type FileRejectedPartitioned, + type FileRejectionReason, + type FileUploadDropzoneProps, + type FileUploadItemProps, + type FileUploadTriggerProps, + type FilesPartitioned, +} from "./form/file-upload"; +export { FormSummary, type FormSummaryProps } from "./form/form-summary"; export { Radio, RadioGroup, @@ -136,20 +151,6 @@ export { Select, type SelectProps } from "./form/select"; export { Switch, type SwitchProps } from "./form/switch"; export { Textarea, type TextareaProps } from "./form/textarea"; export { TextField, type TextFieldProps } from "./form/textfield"; -export { - UNSAFE_FileUpload, - type FileUploadDropzoneProps, - type FileUploadTriggerProps, - type FileObject, - type FileRejected, - type FileAccepted, - type FileRejectedPartitioned, - type FilesPartitioned, - type FileRejectionReason, - type FileUploadItemProps, - type FileItem, - type FileMetadata, -} from "./form/file-upload"; /** * @deprecated diff --git a/aksel.nav.no/website/pages/eksempler/README.md b/aksel.nav.no/website/pages/eksempler/README.md index 0af702ce01..f20871ed8b 100644 --- a/aksel.nav.no/website/pages/eksempler/README.md +++ b/aksel.nav.no/website/pages/eksempler/README.md @@ -14,6 +14,8 @@ Alle linjer som inneholder `examples/withDsExample` + alt under `// EXAMPLES DO Demo-komponent må ha navn `Example` for at CodeSandbox-knapp skal fungere riktig. +`withDsExample` tar imot parametere, e.g. `{variant: 'static'}` for å sette bredde på komponent til "page width", eller `{variant: 'full'}` for full bredde. + ### Args For å håndtere sortering, kan man sette en index i `args` som da brukes for å bedre sortere eksemplene. diff --git a/aksel.nav.no/website/pages/eksempler/formsummary/demo.tsx b/aksel.nav.no/website/pages/eksempler/formsummary/demo.tsx new file mode 100644 index 0000000000..87b7a44164 --- /dev/null +++ b/aksel.nav.no/website/pages/eksempler/formsummary/demo.tsx @@ -0,0 +1,99 @@ +import { FormSummary, Link } from "@navikt/ds-react"; +import { withDsExample } from "@/web/examples/withDsExample"; + +const Example = () => { + return ( + + + Personalia + + + + + + Navn + Ola Nordmann + + + + Adresse + + Gate 123 +
+ 1234 Sted + + + + + Fødselsnummer + 12345678910 + + + + Barn nr. 1 + + + + Navn + Kari Nordmann + + + Kjønn + Jente + + + Alder + 6 + + + + + + + Barn nr. 2 + + + + Navn + Per Nordmann + + + Kjønn + Gutt + + + Alder + 7 + + + + + + + Kontaktinformasjon + + Fyll ut kontaktinformasjon + + + + + Hvordan vil du bli varslet? + E-post + SMS + + + + ); +}; + +// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE +export default withDsExample(Example, { variant: "static" }); + +/* Storybook story */ +export const Demo = { + render: Example, +}; + +export const args = { + index: 0, +}; diff --git a/aksel.nav.no/website/pages/eksempler/formsummary/editlink-variation.tsx b/aksel.nav.no/website/pages/eksempler/formsummary/editlink-variation.tsx new file mode 100644 index 0000000000..8c9d73a4ca --- /dev/null +++ b/aksel.nav.no/website/pages/eksempler/formsummary/editlink-variation.tsx @@ -0,0 +1,48 @@ +import { FormSummary, VStack } from "@navikt/ds-react"; +import { withDsExample } from "@/web/examples/withDsExample"; + +const Example = () => { + return ( + + + + Personalia + + + + + Navn + Ola Nordmann + + + + + + + Personal information + + Edit + + + + + Name + John Doe + + + + + ); +}; + +// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE +export default withDsExample(Example, { variant: "static" }); + +/* Storybook story */ +export const Demo = { + render: Example, +}; + +export const args = { + index: 0, +};