[Docs] Use NAV-dekorator for Page examples (#3362)

* [aksel.nav.no] Update examples of Page * comment * comment + rename + style->class * fix * 📝 Use NAV-dekorator for Page-examples * 🚚 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> * 🐛 Use correct import syntax for parts * 📝 Add description to page-block default story * 💄 Removed spacing from all typo-headings in demo * 🐛 Removed react import from content part --------- Co-authored-by: Halvor Haugan <halvor.haugan@nav.no> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
navikt · Nov 14, 2024 · 20fde22 · 20fde22
1 parent f400485
commit 20fde22
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 137 deletions.
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
@@ -14,7 +14,7 @@ function Env() {
   return (
     <div
       id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true`}
     />
   );
 }

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
@@ -0,0 +1,23 @@
+function Content({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="decorator-content">
+      <style>
+        {`.decorator-content {
+          padding-block: 5rem;
+          padding-inline: 0.25rem;
+          display: grid;
+          place-content: center;
+          background: repeating-linear-gradient(
+            45deg,
+            #eee,
+            #eee 10px,
+            #fff 10px,
+            #fff 20px
+          );`}
+      </style>
+      {children}
+    </div>
+  );
+}
+
+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
@@ -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 (
-    <Page
-      background="bg-subtle"
-      footer={
-        <Box as="footer" background="surface-neutral-moderate" padding="8">
-          <Page.Block gutters>Footer</Page.Block>
-        </Box>
-      }
-    >
-      <Box as="header" background="surface-neutral-moderate" padding="8">
-        <Page.Block gutters>Header</Page.Block>
-      </Box>
-      <Box
-        as="main"
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-      >
-        <Page.Block gutters>Content</Page.Block>
-      </Box>
+    <Page background="bg-subtle" footer={<Footer />}>
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Content>
+          <Heading level="1" size="large">
+            Page.Block
+          </Heading>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };

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
@@ -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 (
-    <Page
-      footerPosition="belowFold"
-      footer={
-        <Box as="footer" background="surface-neutral-moderate" padding="8">
-          <Page.Block gutters>Footer</Page.Block>
-        </Box>
-      }
-    >
-      <Box as="header" background="surface-neutral-moderate" padding="8">
-        <Page.Block gutters>Header</Page.Block>
-      </Box>
-      <Box
-        as="main"
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-      >
-        <Page.Block gutters>Content</Page.Block>
-      </Box>
+    <Page footerPosition="belowFold" footer={<Footer />}>
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Content>
+          <Heading level="1" size="large">
+            Page.Block
+          </Heading>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };

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
@@ -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 (
-    <Page
-      contentBlockPadding="end"
-      footer={
-        <Box as="footer" background="surface-neutral-moderate" padding="8">
-          <Page.Block gutters>Footer</Page.Block>
-        </Box>
-      }
-    >
-      <Box as="header" background="surface-neutral-moderate" padding="8">
-        <Page.Block gutters>Header</Page.Block>
-      </Box>
-      <Box
-        as="main"
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-      >
-        <Page.Block gutters>Content</Page.Block>
-      </Box>
+    <Page contentBlockPadding="end" footer={<Footer />}>
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Content>
+          <Heading level="1" size="large">
+            Page.Block
+          </Heading>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };

diff --git 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 (
-    <Page
-      footer={
-        <Box background="surface-neutral-moderate" padding="8" as="footer">
-          <Page.Block gutters width="lg">
-            Footer
-          </Page.Block>
-        </Box>
-      }
-    >
-      <Box background="surface-neutral-moderate" padding="8" as="header">
-        <Page.Block gutters width="lg">
-          Header
-        </Page.Block>
-      </Box>
-      <Box
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-        as="main"
-      >
-        <Page.Block gutters width="lg">
-          Content
-        </Page.Block>
-      </Box>
+    <Page footer={<Footer />}>
+      <Header />
+
+      <Page.Block as="main" width="xl" gutters>
+        <Content>
+          <Heading level="1" size="large">
+            Page.Block
+          </Heading>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };
@@ -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
@@ -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 (
-    <Page
-      footer={
-        <Page.Block gutters as="footer">
-          <Box background="surface-neutral-moderate" padding="8">
-            Footer
-          </Box>
+    <Page footer={<Footer />}>
+      <Header />
+      <HStack gap="4">
+        <Page.Block as="main" width="xl" gutters>
+          <Content>
+            <Heading level="1" size="large">
+              Page.Block med gutter
+            </Heading>
+          </Content>
+        </Page.Block>
+        <Page.Block as="main" width="xl">
+          <Content>
+            <Heading level="1" size="large">
+              Page.Block uten gutter
+            </Heading>
+          </Content>
         </Page.Block>
-      }
-    >
-      <Page.Block gutters as="header">
-        <Box background="surface-neutral-moderate" padding="8">
-          Header
-        </Box>
-      </Page.Block>
-      <Page.Block gutters as="main">
-        <Box background="surface-alt-3-moderate" paddingBlock="16" padding="8">
-          Med gutter
-        </Box>
-      </Page.Block>
-      <Page.Block as="main">
-        <Box background="surface-alt-3-subtle" paddingBlock="16" padding="8">
-          Uten gutter
-        </Box>
-      </Page.Block>
+      </HStack>
+      <Env />
     </Page>
   );
 };

diff --git 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 (
-    <Page
-      footer={
-        <Box as="footer" background="surface-neutral-moderate" padding="8">
-          <Page.Block gutters width="2xl">
-            Footer
-          </Page.Block>
-        </Box>
-      }
-    >
-      <Box as="header" background="surface-neutral-moderate" padding="8">
-        <Page.Block gutters width="2xl">
-          Header
-        </Page.Block>
-      </Box>
-      <Box
-        as="main"
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-      >
-        <Page.Block gutters width="text">
-          Vi anbefaler å bruke <code>width=&quot;text&quot;</code> på
-          tekstblokker. Dette setter maksbredden til 576px + padding og skal gi
-          en behagelig linjelengde.
-        </Page.Block>
-      </Box>
+    <Page footer={<Footer />}>
+      <Header />
+      <Page.Block as="main" width="text" gutters>
+        <Content>
+          <BodyLong>
+            Vi anbefaler å bruke <code>width=&quot;text&quot;</code> på
+            tekstblokker. Dette setter maksbredden til 576px + padding og skal
+            gi en behagelig linjelengde.
+          </BodyLong>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };