Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Nov 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -134,7 +134,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
>
{fil?.description && (
<BodyLong className="mb-2">
<TextWithMarkdownLink>{fil.description}</TextWithMarkdownLink>
<TextWithMarkdown>{fil.description}</TextWithMarkdown>
</BodyLong>
)}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"];
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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 };

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,7 @@
.containerStaticFull {
padding-block: 1.5rem;
}

.containerFullscreen {
padding: 0;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down Expand Up @@ -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) }}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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.",
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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.",
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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.",
};
3 changes: 1 addition & 2 deletions aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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.",
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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).",
};
11 changes: 6 additions & 5 deletions aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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 */
Expand All @@ -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.",
};
6 changes: 3 additions & 3 deletions aksel.nav.no/website/pages/grunnleggende/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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}`] && (
Expand Down
6 changes: 3 additions & 3 deletions aksel.nav.no/website/pages/komponenter/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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}`] && (
Expand Down
6 changes: 3 additions & 3 deletions aksel.nav.no/website/pages/monster-maler/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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}`] && (
Expand Down