From ef44f2a25b334366729d25b0772d1efe299f9108 Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Tue, 5 Nov 2024 09:08:13 +0100 Subject: [PATCH] [aksel.nav.no] Adjust exaples of Box and Bleed (#3321) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> --- .../react/src/layout/bleed/Bleed.stories.tsx | 24 ++--------- .../eksempler/primitive-bleed/as-child.tsx | 10 ++--- .../pages/eksempler/primitive-bleed/demo.tsx | 6 +-- .../eksempler/primitive-bleed/directions.tsx | 14 +++---- .../pages/eksempler/primitive-bleed/full.tsx | 42 ++++++++++--------- .../primitive-bleed/optical-alignment.tsx | 6 +-- .../primitive-bleed/reflective-padding.tsx | 13 +++--- .../eksempler/primitive-bleed/responsive.tsx | 12 +++--- .../eksempler/primitive-box/background.tsx | 15 +++---- .../eksempler/primitive-box/border-color.tsx | 12 +++--- .../eksempler/primitive-box/border-radius.tsx | 2 +- .../eksempler/primitive-box/border-width.tsx | 6 +-- .../pages/eksempler/primitive-box/header.tsx | 2 +- .../eksempler/primitive-box/padding-block.tsx | 2 +- .../primitive-box/padding-inline.tsx | 2 +- .../pages/eksempler/primitive-box/padding.tsx | 2 +- .../pages/eksempler/primitive-box/panel.tsx | 11 +++-- .../pages/eksempler/primitive-box/shadow.tsx | 6 +-- 18 files changed, 79 insertions(+), 108 deletions(-) diff --git a/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx b/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx index 1902d945a1..f257c137be 100644 --- a/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx +++ b/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx @@ -20,11 +20,7 @@ export const Default = { - + marginInline="10 0" @@ -33,11 +29,7 @@ export const Default = { - + marginInline="0 10" @@ -46,11 +38,7 @@ export const Default = { - + marginBlock="10 0" @@ -59,11 +47,7 @@ export const Default = { - + marginBlock="0 10" diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx index 1b33ec4f0b..1444c05d19 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx @@ -5,7 +5,7 @@ const Example = () => { return ( - + Med asChild @@ -24,9 +24,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) { } // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { @@ -34,6 +32,6 @@ export const Demo = { }; export const args = { - index: 4, - desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Bleed + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.", + index: 5, + desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer antall DOM-noder og forenkler output. [Les mer om asChild her](https://aksel.nav.no/grunnleggende/kode/layout-primitives#613715c234c8).", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/demo.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/demo.tsx index 54ad476218..c8d330f768 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-bleed/demo.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/demo.tsx @@ -5,7 +5,7 @@ const Example = () => { return ( - + marginInline @@ -24,9 +24,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) { } // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/directions.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/directions.tsx index f64f0d96b2..14d204ba79 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-bleed/directions.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/directions.tsx @@ -6,28 +6,28 @@ const Example = () => { - + marginInline start - + marginInline end - + marginBlock start - + marginBlock end @@ -47,9 +47,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) { } // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { @@ -57,5 +55,5 @@ export const Demo = { }; export const args = { - index: 1, + index: 2, }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx index d69ceb4745..9da8727236 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx @@ -1,32 +1,34 @@ -import { Bleed, Box, HStack } from "@navikt/ds-react"; +import { Bleed, BodyLong, Box, HStack, Page } from "@navikt/ds-react"; import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at + maximus mauris. Sed nec fermentum orci, vel tempus tortor. Praesent + lectus neque, hendrerit et sollicitudin quis, imperdiet vel est. + + - - Full + + + Bleed med marginInline="full" + - - ); -}; -function DemoWrapper({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - + + Sed euismod mi nec purus euismod scelerisque. Nam tristique tincidunt + nisi ultricies sollicitudin. Etiam maximus ex sit amet turpis vestibulum + pharetra. + + ); -} +}; // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { @@ -34,6 +36,6 @@ export const Demo = { }; export const args = { - index: 3, - desc: "I noen tilfeller må du også sette 'overflow-x: hidden;' på body for å unngå horisontal scrollbar. Full lar Bleed bryte ut av parent og dekke hele skjermbredden. Dette kan være nyttig for 'Heroes' eller lignende elementer som ønsker å bryte ut av parent-layout", + index: 1, + desc: "Med marginInline=full kan du få enkeltelementer til å dekke hele skjermbredden mens resten av innholdet følger bredden satt av parent-container som vanlig. OBS: Du må kanskje sette 'overflow-x: hidden' på body for å unngå horisontal scrollbar.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/optical-alignment.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/optical-alignment.tsx index 63bd9224b0..9408da79e0 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-bleed/optical-alignment.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/optical-alignment.tsx @@ -35,9 +35,7 @@ const Example = () => { }; // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { @@ -45,6 +43,6 @@ export const Demo = { }; export const args = { - index: 5, + index: 6, desc: "Noen ganger er det den ene pixelen som skal til for å optisk sentrere elementer.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/reflective-padding.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/reflective-padding.tsx index 83a88fbd8f..b4bc81615c 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-bleed/reflective-padding.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/reflective-padding.tsx @@ -5,15 +5,16 @@ const Example = () => { return ( - + reflectivePadding lar innhold forbli der det ville vært uten Bleed - - Uten reflectivePadding + + Bleed uten reflectivePadding + Uten Bleed ); }; @@ -29,9 +30,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) { } // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { @@ -39,5 +38,5 @@ export const Demo = { }; export const args = { - index: 2, + index: 4, }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/responsive.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/responsive.tsx index 992f03d750..fc732dd913 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-bleed/responsive.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/responsive.tsx @@ -4,10 +4,10 @@ import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - - + + - xs: 8, md: 12, lg: 16 + xs: 8, sm: 12, md: 16 @@ -20,7 +20,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) { @@ -41,6 +41,6 @@ export const Demo = { }; export const args = { - index: 1, - desc: "Margin block/inline er begge reponsive, som lar deg endre negativ margin dynamiskt basert på brekkpunkter.", + index: 3, + desc: "Både marginBlock og marginInline er reponsive, slik at du kan sette negativ margin dynamisk basert på brekkpunkter.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/background.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/background.tsx index 07e2bfb6e4..2a28f68a8d 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/background.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/background.tsx @@ -5,25 +5,20 @@ const Example = () => { return ( - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, - ipsum! + Denne boksen har background="surface-alt-3-subtle" - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, - ipsum! + Denne boksen har background="surface-info-subtle" - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, - ipsum! + Denne boksen har background="surface-success-subtle" ); }; // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { @@ -32,5 +27,5 @@ export const Demo = { export const args = { index: 0, - desc: "'Background'-prop lar deg endre farge basert på tilgjengelige tokens", + desc: "Propen 'background' lar deg sette bakgrunnsfarge basert på tokens.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/border-color.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/border-color.tsx index 58af1d287c..4cf39ea952 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/border-color.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/border-color.tsx @@ -5,25 +5,25 @@ const Example = () => { return ( Alt-3 Info Success @@ -33,9 +33,7 @@ const Example = () => { }; // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { @@ -44,5 +42,5 @@ export const Demo = { export const args = { index: 5, - desc: "'borderColor' lar deg endre border-color på Box basert på tokens", + desc: "Propen 'borderColor' lar deg endre border-color basert på tokens.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/border-radius.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/border-radius.tsx index 9b11b85431..45c8c183ba 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/border-radius.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/border-radius.tsx @@ -47,5 +47,5 @@ export const Demo = { export const args = { index: 6, - desc: "'borderRadius' lar deg endre border-radius på Box basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.", + desc: "Propen 'borderRadius' lar deg sette border-radius basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/border-width.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/border-width.tsx index 8062142c04..310e6e784f 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/border-width.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/border-width.tsx @@ -15,9 +15,7 @@ const Example = () => { }; // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { @@ -26,5 +24,5 @@ export const Demo = { export const args = { index: 4, - desc: "'borderWidth' gir deg kontroll over border på Box", + desc: "Propen 'borderWidth' gir deg kontroll over border.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/header.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/header.tsx index fd1dfeb481..857dc4e2b3 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/header.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/header.tsx @@ -113,5 +113,5 @@ export const Demo = { export const args = { index: 8, - desc: "Box lar deg enklere bygge opp kjente grensesnitt gjennom felles tokens og brekkpunkt", + desc: "Box lar deg enklere bygge opp kjente grensesnitt gjennom felles tokens og brekkpunkt.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/padding-block.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/padding-block.tsx index c60d7a4ed3..258052d292 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/padding-block.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/padding-block.tsx @@ -35,5 +35,5 @@ export const Demo = { export const args = { index: 3, - desc: "'paddingBlock' gir deg mer kontroll over vertikal padding.", + desc: "Propen 'paddingBlock' gir deg mer kontroll over vertikal padding.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/padding-inline.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/padding-inline.tsx index 830393c67f..f724f094a4 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/padding-inline.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/padding-inline.tsx @@ -35,5 +35,5 @@ export const Demo = { export const args = { index: 2, - desc: "'paddingInline' gir deg mer kontroll over horisontal padding", + desc: "Propen 'paddingInline' gir deg mer kontroll over horisontal padding.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/padding.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/padding.tsx index 4e81c071e4..5f5876b527 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/padding.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/padding.tsx @@ -30,5 +30,5 @@ export const Demo = { export const args = { index: 1, - desc: "'padding'-prop lar deg endre padding responsivt basert på brekkpunkt", + desc: "Propen 'padding' lar deg sette padding responsivt basert på brekkpunkt. Verdien mapper til tokens, så f.eks. '4' tilsvarer '--a-spacing-4' som er '1rem'.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/panel.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/panel.tsx index e39d57fdb3..d0b4bf19b9 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/panel.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/panel.tsx @@ -3,7 +3,13 @@ import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - + Hvis du er helt eller delvis arbeidsledig eller permittert, kan du ha rett til pengestøtte fra NAV. @@ -23,7 +29,6 @@ const Example = () => { // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE export default withDsExample(Example, { - showBreakpoints: true, background: "subtle", }); @@ -34,5 +39,5 @@ export const Demo = { export const args = { index: 9, - desc: "Box erstatter dagens Panel-komponent", + desc: "Box erstatter den avviklede komponenten Panel.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/shadow.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/shadow.tsx index eb5a14ec1d..65d3c5acff 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-box/shadow.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-box/shadow.tsx @@ -41,9 +41,7 @@ const Example = () => { }; // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example, { - showBreakpoints: true, -}); +export default withDsExample(Example); /* Storybook story */ export const Demo = { @@ -52,5 +50,5 @@ export const Demo = { export const args = { index: 7, - desc: "'shadow' lar deg endre box-shadow på Box basert på tokens.", + desc: "Propen 'shadow' lar deg sette box-shadow basert på tokens.", };