From 20fde22390efb7a58b5dd568d249015f146be35b Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Thu, 14 Nov 2024 11:32:05 +0100 Subject: [PATCH] [Docs] Use NAV-dekorator for Page examples (#3362) * [aksel.nav.no] Update examples of Page * comment * comment + rename + style->class * fix * :memo: Use NAV-dekorator for Page-examples * :truck: Moved content to separate __parts location * :refactor: Updated examples * Update aksel.nav.no/website/components/website-modules/examples/__parts/PageDemoContent.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * :bug: Use correct import syntax for parts * :memo: Add description to page-block default story * :lipstick: Removed spacing from all typo-headings in demo * :bug: Removed react import from content part --------- Co-authored-by: Halvor Haugan Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- .../examples/__parts/Dekorator.tsx | 2 +- .../examples/__parts/PageDemoContent.tsx | 23 ++++++++ .../eksempler/primitive-page/background.tsx | 40 +++++++------- .../eksempler/primitive-page/below-fold.tsx | 40 +++++++------- .../primitive-page/content-block-padding.tsx | 40 +++++++------- .../pages/eksempler/primitive-page/demo.tsx | 47 ++++++++--------- .../eksempler/primitive-page/gutters.tsx | 52 ++++++++++--------- .../pages/eksempler/primitive-page/width.tsx | 49 ++++++++--------- 8 files changed, 156 insertions(+), 137 deletions(-) create mode 100644 aksel.nav.no/website/components/website-modules/examples/__parts/PageDemoContent.tsx diff --git a/aksel.nav.no/website/components/website-modules/examples/__parts/Dekorator.tsx b/aksel.nav.no/website/components/website-modules/examples/__parts/Dekorator.tsx index a5b3a6a2cb..03fd6364f0 100644 --- a/aksel.nav.no/website/components/website-modules/examples/__parts/Dekorator.tsx +++ b/aksel.nav.no/website/components/website-modules/examples/__parts/Dekorator.tsx @@ -14,7 +14,7 @@ function Env() { return (
); } diff --git a/aksel.nav.no/website/components/website-modules/examples/__parts/PageDemoContent.tsx b/aksel.nav.no/website/components/website-modules/examples/__parts/PageDemoContent.tsx new file mode 100644 index 0000000000..580d78f0fc --- /dev/null +++ b/aksel.nav.no/website/components/website-modules/examples/__parts/PageDemoContent.tsx @@ -0,0 +1,23 @@ +function Content({ children }: { children: React.ReactNode }) { + return ( +
+ + {children} +
+ ); +} + +export { Content }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx index 3735bca8f9..8352b7948a 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx @@ -1,27 +1,27 @@ -import { Box, Page } from "@navikt/ds-react"; +import { Heading, Page } from "@navikt/ds-react"; import { withDsExample } from "@/web/examples/withDsExample"; +import { + Env, + Footer, + Header, + useDekorator, +} from "../../../components/website-modules/examples/__parts/Dekorator"; +import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent"; const Example = () => { + useDekorator(); + return ( - - Footer - - } - > - - Header - - - Content - + }> +
+ + + + Page.Block + + + + ); }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/below-fold.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/below-fold.tsx index d25960e39d..0bbd511b9c 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-page/below-fold.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-page/below-fold.tsx @@ -1,27 +1,27 @@ -import { Box, Page } from "@navikt/ds-react"; +import { Heading, Page } from "@navikt/ds-react"; import { withDsExample } from "@/web/examples/withDsExample"; +import { + Env, + Footer, + Header, + useDekorator, +} from "../../../components/website-modules/examples/__parts/Dekorator"; +import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent"; const Example = () => { + useDekorator(); + return ( - - Footer - - } - > - - Header - - - Content - + }> +
+ + + + Page.Block + + + + ); }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/content-block-padding.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/content-block-padding.tsx index d889c4cb6c..c8398b64d9 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-page/content-block-padding.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-page/content-block-padding.tsx @@ -1,27 +1,27 @@ -import { Box, Page } from "@navikt/ds-react"; +import { Heading, Page } from "@navikt/ds-react"; import { withDsExample } from "@/web/examples/withDsExample"; +import { + Env, + Footer, + Header, + useDekorator, +} from "../../../components/website-modules/examples/__parts/Dekorator"; +import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent"; const Example = () => { + useDekorator(); + return ( - - Footer - - } - > - - Header - - - Content - + }> +
+ + + + Page.Block + + + + ); }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx index c629f651e2..a975162915 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx @@ -1,32 +1,28 @@ -import { Box, Page } from "@navikt/ds-react"; +import { Heading, Page } from "@navikt/ds-react"; import { withDsExample } from "@/web/examples/withDsExample"; +import { + Env, + Footer, + Header, + useDekorator, +} from "../../../components/website-modules/examples/__parts/Dekorator"; +import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent"; const Example = () => { + useDekorator(); + return ( - - - Footer - - - } - > - - - Header - - - - - Content - - + }> +
+ + + + + Page.Block + + + + ); }; @@ -45,4 +41,5 @@ export const Demo = { export const args = { index: 0, title: "Standard", + desc: "`Page.Block` kan også brukes i header og footer for å sikre at innholdet er sentrert og har samme maksbredde som resten av innholdet.", }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx index 262b99f03b..d9a2449feb 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx @@ -1,32 +1,36 @@ -import { Box, Page } from "@navikt/ds-react"; +import { HStack, Heading, Page } from "@navikt/ds-react"; import { withDsExample } from "@/web/examples/withDsExample"; +import { + Env, + Footer, + Header, + useDekorator, +} from "../../../components/website-modules/examples/__parts/Dekorator"; +import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent"; const Example = () => { + useDekorator(); + return ( - - - Footer - + }> +
+ + + + + Page.Block med gutter + + + + + + + Page.Block uten gutter + + - } - > - - - Header - - - - - Med gutter - - - - - Uten gutter - - + + ); }; diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx index 9a1d088bc2..a58b59124f 100644 --- a/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx +++ b/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx @@ -1,34 +1,29 @@ -import { Box, Page } from "@navikt/ds-react"; +import { BodyLong, Page } from "@navikt/ds-react"; import { withDsExample } from "@/web/examples/withDsExample"; +import { + Env, + Footer, + Header, + useDekorator, +} from "../../../components/website-modules/examples/__parts/Dekorator"; +import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent"; const Example = () => { + useDekorator(); + return ( - - - Footer - - - } - > - - - Header - - - - - Vi anbefaler å bruke width="text" på - tekstblokker. Dette setter maksbredden til 576px + padding og skal gi - en behagelig linjelengde. - - + }> +
+ + + + Vi anbefaler å bruke width="text" på + tekstblokker. Dette setter maksbredden til 576px + padding og skal + gi en behagelig linjelengde. + + + + ); };