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.

Sign up for GitHub

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

docs: add test results for Code #398

Merged
merged 2 commits into from
Dec 18, 2024
Merged

docs: add test results for Code #398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
43f7221
chore: move non-conforming Code story to new Storybook
Robbert Dec 17, 2024
d467433
docs: add test results for Code
Robbert Dec 17, 2024
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
27 changes: 22 additions & 5 deletions packages/storybook-non-conforming/stories/code/code.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { ExampleBodyTextDecorator } from '@nl-design-system-candidate/storybook-shared/src/ExampleBodyTextDecorator';
import packageJSON from '../../../components-react/code-react/package.json';
import { Code } from '../../../components-react/code-react/src/css';
import { Paragraph } from '../../../components-react/paragraph-react/src/css';
import componentMarkdown from '../../../docs/code-docs/docs/component.md?raw';

const meta = {
Expand Down Expand Up @@ -34,17 +35,33 @@ export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
name: 'Code',
args: {
children: `import { Code } from '@nl-design-system-candidate/code-react';`,
export const NewlineCharacters: Story = {
name: 'Code met "newline characters"',
decorators: ExampleBodyTextDecorator,
globals: {
dir: 'ltr',
lang: 'nl',
},
parameters: {
docs: {
description: {
story: 'Non-conforming',
story: `Een fragment Code in een Paragraph waar "newline characters" worden weergegeven, door regels code op een eigen regel te tonen. In tegenstelling tot newline characters die in een Paragraph worden genegeerd, worden new line characters in Code wel weergegeven.

Dit voorbeeld voldoet niet aan NL Design System acceptatiecriteria, omdat voor code met meerdere regels Code Block gebruikt moet worden in plaats van Code.`,
},
},
status: { type: [] },
testReport: {
date: '2024-12-17',
fail: ['https://nldesignsystem.nl/code/#acceptatiecriteria'],
},
},
render: () => (
<Paragraph>
Je kunt een comment plaatsen op een eigen regel om uit te leggen dat de fout genegeerd moet worden:{' '}
<Code>{'catch (error) {\n // Een parse-fout kan in deze situatie genegeerd worden\n}'}</Code> Op deze manier is
later duidelijk dat er opzettelijk geen code in het <Code>catch</Code>-block staat, en dat het niet per ongeluk is
vergeten.
</Paragraph>
),
};
95 changes: 26 additions & 69 deletions packages/storybook-test/stories/code/code.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const meta = {
url: packageJSON.homepage,
},
],
testReport: {
testResult: {
notApplicable: [
WCAG22_111_NON_TEXT_CONTENT,
WCAG22_121_AUDIO_ONLY_AND_VIDEO_ONLY_PRERECORDED,
Expand Down Expand Up @@ -137,6 +137,7 @@ const meta = {
WCAG22_412_NAME_ROLE_VALUE,
WCAG22_413_STATUS_MESSAGES,
],
notTested: [WCAG22_1410_REFLOW, WCAG22_1411_NON_TEXT_CONTRAST, WCAG22_312_LANGUAGE_OF_PARTS],
},
tokens,
},
Expand All @@ -154,17 +155,15 @@ export const Default: Story = {
},
parameters: {
status: { type: [] },
testReport: {
testResult: {
date: '2024-12-17',
notTested: [
pass: [
WCAG22_131_INFO_AND_RELATIONSHIPS,
WCAG22_1410_REFLOW,
WCAG22_1412_TEXT_SPACING,
WCAG22_141_USE_OF_COLOR,
WCAG22_143_CONTRAST_MINIMUM,
WCAG22_144_RESIZE_TEXT,
WCAG22_312_LANGUAGE_OF_PARTS,
WCAG22_1412_TEXT_SPACING,
],
pass: [],
},
},
};
Expand All @@ -188,17 +187,16 @@ export const BodyText: Story = {
},
},
status: { type: [] },
testReport: {
testResult: {
date: '2024-12-17',
notTested: [
notTested: [WCAG22_1410_REFLOW, WCAG22_1411_NON_TEXT_CONTRAST, WCAG22_312_LANGUAGE_OF_PARTS],
pass: [
WCAG22_131_INFO_AND_RELATIONSHIPS,
WCAG22_1410_REFLOW,
WCAG22_1412_TEXT_SPACING,
WCAG22_141_USE_OF_COLOR,
WCAG22_143_CONTRAST_MINIMUM,
WCAG22_144_RESIZE_TEXT,
WCAG22_312_LANGUAGE_OF_PARTS,
WCAG22_1412_TEXT_SPACING,
],
pass: [],
},
},
render: ({ children }) => (
Expand Down Expand Up @@ -227,17 +225,16 @@ De ronde haakjes in de code na "parseFloat" worden aan rechts van "parseFloat" g
},
},
status: { type: [] },
testReport: {
testResult: {
date: '2024-12-17',
notTested: [
notTested: [WCAG22_1410_REFLOW, WCAG22_1411_NON_TEXT_CONTRAST, WCAG22_312_LANGUAGE_OF_PARTS],
pass: [
WCAG22_131_INFO_AND_RELATIONSHIPS,
WCAG22_1410_REFLOW,
WCAG22_1412_TEXT_SPACING,
WCAG22_141_USE_OF_COLOR,
WCAG22_143_CONTRAST_MINIMUM,
WCAG22_144_RESIZE_TEXT,
WCAG22_312_LANGUAGE_OF_PARTS,
WCAG22_1412_TEXT_SPACING,
],
pass: [],
},
},
render: ({ children }) => (
Expand Down Expand Up @@ -265,17 +262,16 @@ export const HypenatedBodyText: Story = {
},
},
status: { type: [] },
testReport: {
testResult: {
date: '2024-12-17',
notTested: [
notTested: [WCAG22_1410_REFLOW, WCAG22_1411_NON_TEXT_CONTRAST, WCAG22_312_LANGUAGE_OF_PARTS],
pass: [
WCAG22_131_INFO_AND_RELATIONSHIPS,
WCAG22_1410_REFLOW,
WCAG22_1412_TEXT_SPACING,
WCAG22_141_USE_OF_COLOR,
WCAG22_143_CONTRAST_MINIMUM,
WCAG22_144_RESIZE_TEXT,
WCAG22_312_LANGUAGE_OF_PARTS,
WCAG22_1412_TEXT_SPACING,
],
pass: [],
},
},
render: ({ children }) => (
Expand All @@ -301,17 +297,16 @@ export const WhiteSpaceCharacters: Story = {
},
},
status: { type: [] },
testReport: {
testResult: {
date: '2024-12-17',
notTested: [
notTested: [WCAG22_1410_REFLOW, WCAG22_1411_NON_TEXT_CONTRAST, WCAG22_312_LANGUAGE_OF_PARTS],
pass: [
WCAG22_131_INFO_AND_RELATIONSHIPS,
WCAG22_1410_REFLOW,
WCAG22_1412_TEXT_SPACING,
WCAG22_141_USE_OF_COLOR,
WCAG22_143_CONTRAST_MINIMUM,
WCAG22_144_RESIZE_TEXT,
WCAG22_312_LANGUAGE_OF_PARTS,
WCAG22_1412_TEXT_SPACING,
],
pass: [],
},
},
render: () => (
Expand All @@ -321,41 +316,3 @@ export const WhiteSpaceCharacters: Story = {
</Paragraph>
),
};

export const NewlineCharacters: Story = {
name: 'Code met "newline characters"',
decorators: ExampleBodyTextDecorator,
globals: {
dir: 'ltr',
lang: 'nl',
},
parameters: {
docs: {
description: {
story:
'Een fragment Code in een Paragraph waar "newline characters" worden weergegeven, door regels code op een eigen regel te tonen. In tegenstelling tot newline characters die in een Paragraph worden genegeerd, worden new line characters in Code wel weergegeven.',
},
},
status: { type: [] },
testReport: {
date: '2024-12-17',
notTested: [
WCAG22_131_INFO_AND_RELATIONSHIPS,
WCAG22_1410_REFLOW,
WCAG22_1412_TEXT_SPACING,
WCAG22_143_CONTRAST_MINIMUM,
WCAG22_144_RESIZE_TEXT,
WCAG22_312_LANGUAGE_OF_PARTS,
],
pass: [],
},
},
render: () => (
<Paragraph>
Je kunt een comment plaatsen op een eigen regel om uit te leggen dat de fout genegeerd moet worden:{' '}
<Code>{'catch (error) {\n // Een parse-fout kan in deze situatie genegeerd worden\n}'}</Code> Op deze manier is
later duidelijk dat er opzettelijk geen code in het <Code>catch</Code>-block staat, en dat het niet per ongeluk is
vergeten.
</Paragraph>
),
};
Loading