[aksel.nav.no] Update examples of Page

navikt · Nov 11, 2024 · 88f460c · 88f460c
1 parent 85131a5
commit 88f460c
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 24 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
@@ -161,6 +161,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                       invisible: unloaded,
                     },
                   )}
+                  style={{ maxHeight: "calc(100vh - 200px)" }}
                 />
                 {unloaded && (
                   <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">

diff --git a/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx b/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
@@ -1,24 +1,30 @@
 import React from "react";
 import AkselLink from "@/web/AkselLink";
+import InlineCode from "./InlineCode";
 
 /**
  * Splits a string into text and links,
  * and returns an array of React elements.
  */
 const TextWithMarkdownLink = ({ children: input }: { children: string }) => {
-  const regex = /\[([^\]]+)\]\(([^\s)]+)\)/g;
+  const regex = /\[([^\]]+)\]\(([^\s)]+)\)|`([^`]+)`/g;
   let lastIndex = 0;
   const elements: React.ReactNode[] = [];
 
-  input.replace(regex, (match, text, url, index) => {
+  input.replace(regex, (match, text, url, code, index) => {
     if (index > lastIndex) {
       elements.push(input.slice(lastIndex, index));
     }
-    elements.push(
-      <AkselLink href={url} key={index}>
-        {text}
-      </AkselLink>,
-    );
+
+    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;

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.",
 };