[aksel.nav.no] Update examples of Page (#3349)

navikt · Nov 13, 2024 · 0be3a08 · 0be3a08
1 parent 6483d6b
commit 0be3a08
Show file tree

Hide file tree

Showing 15 changed files with 77 additions and 65 deletions.
diff --git a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
@@ -11,7 +11,7 @@ import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
 import SnippetLazy from "@/cms/code-snippet/SnippetLazy";
 import ErrorBoundary from "@/error-boundary";
 import { CodeExamplesT } from "@/types";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { CodeSandbox } from "./parts/CodeSandbox";
 import { Sandbox } from "./parts/Sandbox";
 
@@ -134,7 +134,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
         >
           {fil?.description && (
             <BodyLong className="mb-2">
-              <TextWithMarkdownLink>{fil.description}</TextWithMarkdownLink>
+              <TextWithMarkdown>{fil.description}</TextWithMarkdown>
             </BodyLong>
           )}
 

diff --git a/aksel.nav.no/website/components/sanity-modules/intro-seksjon/IntroSeksjon.tsx b/aksel.nav.no/website/components/sanity-modules/intro-seksjon/IntroSeksjon.tsx
@@ -2,7 +2,7 @@ import ErrorBoundary from "@/error-boundary";
 import { SanityBlockContent } from "@/sanity-block";
 import { AkselGrunnleggendeDocT, AkselKomponentDocT } from "@/types";
 import { List, ListItem } from "@/web/List";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 
 type IntroProps = {
   node: AkselKomponentDocT["intro"] | AkselGrunnleggendeDocT["intro"];
@@ -25,15 +25,15 @@ const Intro = ({ node, internal }: IntroProps) => {
           {internal && <ListItem icon>Bruk på interne flater</ListItem>}
           {node.brukes_til.map((x) => (
             <ListItem icon key={x}>
-              <TextWithMarkdownLink>{x}</TextWithMarkdownLink>
+              <TextWithMarkdown>{x}</TextWithMarkdown>
             </ListItem>
           ))}
         </List>
         {node?.brukes_ikke_til && (
           <List title="Uegnet til:">
             {node.brukes_ikke_til.map((x) => (
               <ListItem icon key={x}>
-                <TextWithMarkdownLink>{x}</TextWithMarkdownLink>
+                <TextWithMarkdown>{x}</TextWithMarkdown>
               </ListItem>
             ))}
           </List>

diff --git a/aksel.nav.no/website/components/website-modules/TextWithMarkdown.tsx b/aksel.nav.no/website/components/website-modules/TextWithMarkdown.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import AkselLink from "@/web/AkselLink";
+import InlineCode from "./InlineCode";
+
+/**
+ * Takes a string and replaces markdown links with Link components
+ * and backticks with InlineCode components.
+ */
+const TextWithMarkdown = ({ children: input }: { children: string }) => {
+  const regex = /\[([^\]]+)\]\(([^\s)]+)\)|`([^`]+)`/g; // The part before the pipe finds links, the part after finds backticks.
+  let lastIndex = 0;
+  const elements: React.ReactNode[] = [];
+
+  input.replace(regex, (match, text, url, code, index) => {
+    if (index > lastIndex) {
+      elements.push(input.slice(lastIndex, index));
+    }
+
+    if (code) {
+      elements.push(<InlineCode key={index}>{code}</InlineCode>);
+    } else {
+      elements.push(
+        <AkselLink href={url} key={index}>
+          {text}
+        </AkselLink>,
+      );
+    }
+
+    lastIndex = index + match.length;
+    return match;
+  });
+
+  if (lastIndex < input.length) {
+    elements.push(input.slice(lastIndex));
+  }
+
+  return <>{elements}</>;
+};
+
+export { TextWithMarkdown };
diff --git a/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx b/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
diff --git a/aksel.nav.no/website/components/website-modules/examples/examples.module.css b/aksel.nav.no/website/components/website-modules/examples/examples.module.css
@@ -36,3 +36,7 @@
 .containerStaticFull {
   padding-block: 1.5rem;
 }
+
+.containerFullscreen {
+  padding: 0;
+}
diff --git a/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx b/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx
@@ -12,11 +12,12 @@ import styles from "./examples.module.css";
 
 type withDsT = {
   /**
-   * Full: No horizontal centering (i.e. full width).
+   * Full: No horizontal centering (i.e. full width with padding).
    * Static: No vertical centering and static (but responsive) width. Used for dynamic-height examples like ExpansionCard.
    * Static-full: No centering in any direction.
+   * Fullscreen: No centering and no padding.
    */
-  variant?: "full" | "static" | "static-full";
+  variant?: "full" | "static" | "static-full" | "fullscreen";
   background?: "inverted" | "subtle";
   showBreakpoints?: boolean;
 };
@@ -84,6 +85,7 @@ export const withDsExample = (
           [styles.containerStatic]: variant === "static",
           [styles.containerFull]: variant === "full",
           [styles.containerStaticFull]: variant === "static-full",
+          [styles.containerFullscreen]: variant === "fullscreen",
         })}
         style={{ background: getBg(background) }}
       >

diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx
@@ -29,7 +29,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -40,5 +40,5 @@ export const Demo = {
 export const args = {
   index: 5,
   title: "Bakgrunn",
-  desc: "Background-prop lar deg velge mellom `default` og `subtle` bakgrunn.",
+  desc: "Propen `background` lar deg velge mellom `default` og `subtle` bakgrunn.",
 };
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
@@ -29,7 +29,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -40,5 +40,5 @@ export const Demo = {
 export const args = {
   index: 1,
   title: "Footer belowFold",
-  desc: "Sikrer at footer aldri vil vises før man begynner å scrolle. Dette hjelper med å redusere layout-shifts ved navigering mellom sider.",
+  desc: "`footerPosition=belowFold` sikrer at footer aldri vil vises før man begynner å scrolle. Dette hjelper med å redusere layout-shifts ved navigering mellom sider.",
 };
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
@@ -29,7 +29,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -40,5 +40,5 @@ export const Demo = {
 export const args = {
   index: 3,
   title: "Content Padding",
-  desc: "contentBlockPadding på Page sikrer at det alltid vil være minimumspadding mellom innhold og footer. Dette vil være en god fallback, men layouts vil ofte trenge ekstra padding top/bottom",
+  desc: "Propen `contentBlockPadding` på Page sikrer at det alltid vil være en minimumspadding mellom innhold og footer. Dette vil være en god fallback, men mange layouts vil trenge ekstra padding top/bottom.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx
@@ -34,7 +34,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -45,5 +45,4 @@ export const Demo = {
 export const args = {
   index: 0,
   title: "Standard",
-  desc: "Page gjør det enklere å bygge opp layout med riktig maksbredde og gutters.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx
@@ -34,7 +34,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -45,5 +45,5 @@ export const Demo = {
 export const args = {
   index: 2,
   title: "Gutters",
-  desc: "Gutters-prop på Page.Block setter responsive gutters (padding-inline)",
+  desc: "Propen `gutters` på Page.Block setter responsive gutters (padding-inline).",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx
@@ -4,7 +4,6 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
   return (
     <Page
-      background="bg-subtle"
       footer={
         <Box as="footer" background="surface-neutral-moderate" padding="8">
           <Page.Block gutters width="2xl">
@@ -24,8 +23,10 @@ const Example = () => {
         padding="8"
         paddingBlock="16"
       >
-        <Page.Block gutters width="2xl">
-          Content
+        <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>
@@ -35,7 +36,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -46,5 +47,5 @@ export const Demo = {
 export const args = {
   index: 6,
   title: "Maksbredde",
-  desc: "Width-prop på Page.Block sentrerer innhold og legger på maksbredde.",
+  desc: "Propen `width` på Page.Block sentrerer innhold og legger på maksbredde.",
 };
diff --git a/aksel.nav.no/website/pages/grunnleggende/index.tsx b/aksel.nav.no/website/pages/grunnleggende/index.tsx
@@ -15,7 +15,7 @@ import {
   SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { grunnleggendeKategorier } from "../../sanity/config";
@@ -98,9 +98,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
               <div>
                 {page?.[`ingress_${kat.value}`] && (
                   <BodyLong size="large" className="mb-4 only:mb-7">
-                    <TextWithMarkdownLink>
+                    <TextWithMarkdown>
                       {page[`ingress_${kat.value}`]}
-                    </TextWithMarkdownLink>
+                    </TextWithMarkdown>
                   </BodyLong>
                 )}
                 {page?.[`intro_${kat.value}`] && (

diff --git a/aksel.nav.no/website/pages/komponenter/index.tsx b/aksel.nav.no/website/pages/komponenter/index.tsx
@@ -25,7 +25,7 @@ import {
 } from "@/types";
 import { generateSidebar } from "@/utils";
 import { IntroCards } from "@/web/IntroCards";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { komponentKategorier } from "../../sanity/config";
@@ -134,9 +134,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
               <div>
                 {page?.[`ingress_${kat.value}`] && (
                   <BodyLong size="large" className="mb-4 only:mb-7">
-                    <TextWithMarkdownLink>
+                    <TextWithMarkdown>
                       {page[`ingress_${kat.value}`]}
-                    </TextWithMarkdownLink>
+                    </TextWithMarkdown>
                   </BodyLong>
                 )}
                 {page?.[`intro_${kat.value}`] && (

diff --git a/aksel.nav.no/website/pages/monster-maler/index.tsx b/aksel.nav.no/website/pages/monster-maler/index.tsx
@@ -15,7 +15,7 @@ import {
   SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { templatesKategorier } from "../../sanity/config";
@@ -98,9 +98,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
               <div>
                 {page?.[`ingress_${kat.value}`] && (
                   <BodyLong size="large" className="mb-4 only:mb-7">
-                    <TextWithMarkdownLink>
+                    <TextWithMarkdown>
                       {page[`ingress_${kat.value}`]}
-                    </TextWithMarkdownLink>
+                    </TextWithMarkdown>
                   </BodyLong>
                 )}
                 {page?.[`intro_${kat.value}`] && (