diff --git a/.changeset/light-chairs-appear.md b/.changeset/light-chairs-appear.md new file mode 100644 index 000000000..ea271af20 --- /dev/null +++ b/.changeset/light-chairs-appear.md @@ -0,0 +1,5 @@ +--- +'@nl-design-system-candidate/heading-react': patch +--- + +Props zijn gedocumenteerd zodat de intellisense verbeterd diff --git a/.changeset/spicy-boxes-attend.md b/.changeset/spicy-boxes-attend.md new file mode 100644 index 000000000..3ab7d275d --- /dev/null +++ b/.changeset/spicy-boxes-attend.md @@ -0,0 +1,5 @@ +--- +'@nl-design-system-candidate/heading-docs': minor +--- + +Stories uitgebreid en props / classes gedocumenteerd diff --git a/packages/components-react/heading-react/src/heading.ts b/packages/components-react/heading-react/src/heading.ts index ed90a00e9..4860ab0a5 100644 --- a/packages/components-react/heading-react/src/heading.ts +++ b/packages/components-react/heading-react/src/heading.ts @@ -7,7 +7,10 @@ export type HeadingLevel = (typeof headingLevels)[number]; export type HeadingAppearance = `level-${HeadingLevel}`; export interface HeadingProps extends HTMLAttributes { + /** Sets the semantic level of the heading element */ level: HeadingLevel; + + /** Allows the appearance of the heading to differ from the semantic level */ appearance?: HeadingAppearance; } diff --git a/packages/docs/heading-docs/docs/description.md b/packages/docs/heading-docs/docs/description.md new file mode 100644 index 000000000..4488449ec --- /dev/null +++ b/packages/docs/heading-docs/docs/description.md @@ -0,0 +1 @@ +Koptekst die in de koppenstructuur ingesteld kan worden op het juiste niveau. diff --git a/packages/docs/heading-docs/stories/heading.css.meta.tsx b/packages/docs/heading-docs/stories/heading.css.meta.tsx index 989b07d09..1e0e41c0d 100644 --- a/packages/docs/heading-docs/stories/heading.css.meta.tsx +++ b/packages/docs/heading-docs/stories/heading.css.meta.tsx @@ -2,8 +2,17 @@ import type { Meta } from '@storybook/react-vite'; import { Heading } from '@nl-design-system-candidate/heading-react/css'; const CLASSES = 'classes'; +const API = 'api'; const meta = { + parameters: { + docs: { + description: { + component: + 'Het uiterlijk van de heading hoeft niet overeen te komen met de semantische waarde van de heading. Een heading kan een semantisch level 2 hebben (door het gebruik van een `

` element), maar visueel weer gegeven worden als een level 1 door het gebruik van de class `nl-heading--level-1`', + }, + }, + }, argTypes: { nlHeading: { name: 'nl-heading', @@ -15,11 +24,94 @@ const meta = { type: { summary: undefined }, }, }, + appearance1: { + name: 'nl-heading--level-1', + description: 'Geeft de heading het uiterlijk van een hoofdkop.', + control: 'boolean', + table: { + category: CLASSES, + type: { summary: undefined }, + }, + }, + appearance2: { + name: 'nl-heading--level-2', + description: 'Geeft de heading het uiterlijk van een koptekst van het tweede niveau.', + control: 'boolean', + table: { + category: CLASSES, + type: { summary: undefined }, + }, + }, + appearance3: { + name: 'nl-heading--level-3', + description: 'Geeft de heading het uiterlijk van een koptekst van het derde niveau.', + control: 'boolean', + table: { + category: CLASSES, + type: { summary: undefined }, + }, + }, + appearance4: { + name: 'nl-heading--level-4', + description: 'Geeft de heading het uiterlijk van een koptekst van het vierde niveau.', + control: 'boolean', + table: { + category: CLASSES, + type: { summary: undefined }, + }, + }, + appearance5: { + name: 'nl-heading--level-5', + description: 'Geeft de heading het uiterlijk van een koptekst van het vijfde niveau.', + control: 'boolean', + table: { + category: CLASSES, + type: { summary: undefined }, + }, + }, + appearance6: { + name: 'nl-heading--level-6', + description: 'Geeft de heading het uiterlijk van een koptekst van het zesde niveau.', + control: 'boolean', + table: { + category: CLASSES, + type: { summary: undefined }, + }, + }, children: { - table: { disable: true }, + name: 'content', + description: 'De inhoud van de heading.', + control: 'text', + table: { + category: API, + type: { summary: undefined }, + }, + }, + level: { + name: 'element', + control: { type: 'select', labels: { 1: '

', 2: '

', 3: '

', 4: '

', 5: '

', 6: '
' } }, + description: 'Het element van de heading', + options: [1, 2, 3, 4, 5, 6], + table: { + category: API, + type: { summary: undefined }, + }, }, }, - component: (props) => , + args: { + nlHeading: true, + level: 1, + }, + component: (props) => { + let appearance = props.appearance1 ? 1 : props.level; + appearance = props.appearance2 ? 2 : appearance; + appearance = props.appearance3 ? 3 : appearance; + appearance = props.appearance4 ? 4 : appearance; + appearance = props.appearance5 ? 5 : appearance; + appearance = props.appearance6 ? 6 : appearance; + + return ; + }, } satisfies Meta; export default meta; diff --git a/packages/docs/heading-docs/stories/heading.react.meta.tsx b/packages/docs/heading-docs/stories/heading.react.meta.tsx index 23bdef796..466a456cc 100644 --- a/packages/docs/heading-docs/stories/heading.react.meta.tsx +++ b/packages/docs/heading-docs/stories/heading.react.meta.tsx @@ -2,18 +2,35 @@ import type { Meta } from '@storybook/react-vite'; import { Heading } from '@nl-design-system-candidate/heading-react/css'; const meta = { - argTypes: { - appearance: { - control: { labels: { undefined: '(undefined)' }, type: 'select' }, - options: [undefined, 'level-1', 'level-2', 'level-3', 'level-4', 'level-5', 'level-6'], - table: { category: 'API', type: { summary: 'literal' } }, + parameters: { + docs: { + description: { + component: + 'Het uiterlijk van de heading hoeft niet overeen te komen met de semantische waarde van de heading. Een heading kan een semantisch level 2 hebben (door het gebruik van de `level` prop), maar visueel weer gegeven worden als een level 1 door het gebruik van de `appearance` prop', + }, }, - children: { table: { category: 'API' } }, + }, + argTypes: { level: { type: { name: 'other', value: 'select', required: true }, + description: 'Zet het semantische niveau van de heading', control: { type: 'select' }, options: [1, 2, 3, 4, 5, 6], - table: { category: 'API', type: { summary: 'unknown[number]' } }, + table: { category: 'API', type: { summary: '1 | 2 | 3 | 4 | 5 | 6' } }, + }, + appearance: { + description: 'Geeft de heading een uiterlijk dat afwijkt van het semantische niveau', + control: { labels: { undefined: '(undefined)' }, type: 'select' }, + options: [undefined, 'level-1', 'level-2', 'level-3', 'level-4', 'level-5', 'level-6'], + table: { + category: 'API', + type: { summary: '"level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6"' }, + }, + }, + children: { + description: 'De inhoud van de heading', + type: { value: 'text', required: true }, + table: { category: 'API', type: { summary: 'ReactNode' } }, }, }, component: Heading, diff --git a/packages/docs/heading-docs/stories/heading.stories.tsx b/packages/docs/heading-docs/stories/heading.stories.tsx index 1f647e710..456f89cab 100644 --- a/packages/docs/heading-docs/stories/heading.stories.tsx +++ b/packages/docs/heading-docs/stories/heading.stories.tsx @@ -5,6 +5,104 @@ import { Paragraph } from '@nl-design-system-candidate/paragraph-react/css'; type Story = StoryObj; +export const Heading: Story = { + name: 'Heading', + args: { + children: 'Heading', + level: 1, + }, +}; + +export const HeadingLevel1: Story = { + name: 'Heading level 1', + args: { + children: 'Heading level 1', + level: 1, + }, + parameters: { + docs: { + description: { + story: `Hoofdkop van een pagina.`, + }, + }, + }, +}; + +export const HeadingLevel2: Story = { + name: 'Heading level 2', + args: { + children: 'Heading level 2', + level: 2, + }, + parameters: { + docs: { + description: { + story: `Koptekst die volgt na de hoofdkop en in de koppenstructuur op het tweede niveau staat.`, + }, + }, + }, +}; + +export const HeadingLevel3: Story = { + name: 'Heading level 3', + args: { + children: 'Heading level 3', + level: 3, + }, + parameters: { + docs: { + description: { + story: `Koptekst die in de koppenstructuur op het derde niveau staat.`, + }, + }, + }, +}; + +export const HeadingLevel4: Story = { + name: 'Heading level 4', + args: { + children: 'Heading level 4', + level: 4, + }, + parameters: { + docs: { + description: { + story: `Koptekst die in de koppenstructuur op het vierde niveau staat.`, + }, + }, + }, +}; + +export const HeadingLevel5: Story = { + name: 'Heading level 5', + args: { + children: 'Heading level 5', + level: 5, + }, + parameters: { + docs: { + description: { + story: `Hoofdkop van een pagina.Koptekst die in de koppenstructuur op het vijfde niveau staat.`, + }, + }, + }, +}; + +export const HeadingLevel6: Story = { + name: 'Heading level 6', + args: { + children: 'Heading level 6', + level: 6, + }, + parameters: { + docs: { + description: { + story: `Koptekst die in de koppenstructuur op het zesde niveau staat.`, + }, + }, + }, +}; + export const Heading1MetMeerdereRegelsTekst: Story = { name: 'Heading 1 met meerdere regels tekst', args: { diff --git a/packages/storybook-shared/src/DocsHeader.tsx b/packages/storybook-shared/src/DocsHeader.tsx index 95eb7efe6..51a1fd798 100644 --- a/packages/storybook-shared/src/DocsHeader.tsx +++ b/packages/storybook-shared/src/DocsHeader.tsx @@ -12,10 +12,13 @@ export function DocsHeader() { return (
- {(externalLinks as ExternalLink[]).map(({ name, url }) => ( - - {name} - + {(externalLinks as ExternalLink[]).map(({ name, url }, index, list) => ( + <> + + {name} + + {index < list.length - 1 ? ⋅ : <>} + ))}
); diff --git a/packages/storybook/stories/heading.css.stories.tsx b/packages/storybook/stories/heading.css.stories.tsx index e260e0520..3930b1ab9 100644 --- a/packages/storybook/stories/heading.css.stories.tsx +++ b/packages/storybook/stories/heading.css.stories.tsx @@ -5,15 +5,33 @@ import headingMeta from '@nl-design-system-candidate/heading-docs/stories/headin import * as Stories from '@nl-design-system-candidate/heading-docs/stories/heading.stories'; import { mergeCssMeta } from '../src/helpers/merge-css-meta'; import { getExternalLinks } from '../src/helpers/external-links'; +import description from '@nl-design-system-candidate/heading-docs/docs/description.md?raw'; -const externalLinks = getExternalLinks('https://nldesignsystem.nl/heading', packageJSON.homepage); +const externalLinks = getExternalLinks( + 'https://nldesignsystem.nl/heading', + packageJSON.homepage, + 'https://www.npmjs.com/package/@nl-design-system-candidate/heading-css', +); const meta = { - ...mergeCssMeta(headingMeta, externalLinks), + ...mergeCssMeta(headingMeta, externalLinks, { + parameters: { + docs: { + subtitle: description, + }, + }, + }), title: 'CSS Componenten/Heading', id: 'css-heading', } satisfies Meta; export default meta; +export const Heading = Stories.Heading; +export const HeadingLevel1 = Stories.HeadingLevel1; +export const HeadingLevel2 = Stories.HeadingLevel2; +export const HeadingLevel3 = Stories.HeadingLevel3; +export const HeadingLevel4 = Stories.HeadingLevel4; +export const HeadingLevel5 = Stories.HeadingLevel5; +export const HeadingLevel6 = Stories.HeadingLevel6; export const Heading1MetMeerdereRegelsTekst = Stories.Heading1MetMeerdereRegelsTekst; diff --git a/packages/storybook/stories/heading.react.stories.tsx b/packages/storybook/stories/heading.react.stories.tsx index 89e0fec75..6be628640 100644 --- a/packages/storybook/stories/heading.react.stories.tsx +++ b/packages/storybook/stories/heading.react.stories.tsx @@ -1,19 +1,37 @@ +import { merge } from 'lodash-es'; import type { Meta } from '@storybook/react-vite'; import packageJSON from '../../components-react/heading-react/package.json'; import { Heading as HeadingComponent } from '@nl-design-system-candidate/heading-react'; import headingMeta from '@nl-design-system-candidate/heading-docs/stories/heading.react.meta'; import * as Stories from '@nl-design-system-candidate/heading-docs/stories/heading.stories'; import { getExternalLinks } from '../src/helpers/external-links'; +import description from '@nl-design-system-candidate/heading-docs/docs/description.md?raw'; -const externalLinks = getExternalLinks('https://nldesignsystem.nl/heading', packageJSON.homepage); +const externalLinks = getExternalLinks( + 'https://nldesignsystem.nl/heading', + packageJSON.homepage, + 'https://www.npmjs.com/package/@nl-design-system-candidate/heading-react', +); const meta = { - ...headingMeta, - ...externalLinks, + ...merge(headingMeta, externalLinks, { + parameters: { + docs: { + subtitle: description, + }, + }, + }), title: 'React Componenten/Heading', id: 'heading', } satisfies Meta; export default meta; +export const Heading = Stories.Heading; +export const HeadingLevel1 = Stories.HeadingLevel1; +export const HeadingLevel2 = Stories.HeadingLevel2; +export const HeadingLevel3 = Stories.HeadingLevel3; +export const HeadingLevel4 = Stories.HeadingLevel4; +export const HeadingLevel5 = Stories.HeadingLevel5; +export const HeadingLevel6 = Stories.HeadingLevel6; export const Heading1MetMeerdereRegelsTekst = Stories.Heading1MetMeerdereRegelsTekst; diff --git a/packages/storybook/stories/link.css.stories.tsx b/packages/storybook/stories/link.css.stories.tsx index 4188c1211..3786092b5 100644 --- a/packages/storybook/stories/link.css.stories.tsx +++ b/packages/storybook/stories/link.css.stories.tsx @@ -10,16 +10,18 @@ import { mergeCssMeta } from '../src/helpers/merge-css-meta'; import { getExternalLinks } from '../src/helpers/external-links'; import description from '@nl-design-system-candidate/link-docs/docs/description.md?raw'; -const externalLinks = getExternalLinks('https://nldesignsystem.nl/link', packageJSON.homepage); +const externalLinks = getExternalLinks( + 'https://nldesignsystem.nl/link', + packageJSON.homepage, + 'https://www.npmjs.com/package/@nl-design-system-candidate/link-css', +); const meta = { ...mergeCssMeta(linkMeta, externalLinks, { decorators: [ParagraphDecorator, ExampleBodyTextDecorator], parameters: { docs: { - description: { - component: description, - }, + subtitle: description, }, }, }), diff --git a/packages/storybook/stories/link.react.stories.tsx b/packages/storybook/stories/link.react.stories.tsx index e380f838b..b7d1b48de 100644 --- a/packages/storybook/stories/link.react.stories.tsx +++ b/packages/storybook/stories/link.react.stories.tsx @@ -10,16 +10,18 @@ import '../../components-css/paragraph-css/src/paragraph.scss'; import { getExternalLinks } from '../src/helpers/external-links'; import description from '@nl-design-system-candidate/link-docs/docs/description.md?raw'; -const externalLinks = getExternalLinks('https://nldesignsystem.nl/link', packageJSON.homepage); +const externalLinks = getExternalLinks( + 'https://nldesignsystem.nl/link', + packageJSON.homepage, + 'https://www.npmjs.com/package/@nl-design-system-candidate/link-react', +); const meta = { ...merge(linkMeta, externalLinks, { decorators: [ParagraphDecorator, ExampleBodyTextDecorator], parameters: { docs: { - description: { - component: description, - }, + subtitle: description, }, }, }),