From 43f7221f9ecaeaac302337549e196f6edc4a33eb Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Tue, 17 Dec 2024 21:39:42 +0100 Subject: [PATCH 1/2] chore: move non-conforming Code story to new Storybook --- .../stories/code/code.stories.tsx | 27 ++++++++++--- .../stories/code/code.stories.tsx | 38 ------------------- 2 files changed, 22 insertions(+), 43 deletions(-) diff --git a/packages/storybook-non-conforming/stories/code/code.stories.tsx b/packages/storybook-non-conforming/stories/code/code.stories.tsx index b36ba640..6ee0ade9 100644 --- a/packages/storybook-non-conforming/stories/code/code.stories.tsx +++ b/packages/storybook-non-conforming/stories/code/code.stories.tsx @@ -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 = { @@ -34,17 +35,33 @@ export default meta; type Story = StoryObj; -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: () => ( + + Je kunt een comment plaatsen op een eigen regel om uit te leggen dat de fout genegeerd moet worden:{' '} + {'catch (error) {\n // Een parse-fout kan in deze situatie genegeerd worden\n}'} Op deze manier is + later duidelijk dat er opzettelijk geen code in het catch-block staat, en dat het niet per ongeluk is + vergeten. + + ), }; diff --git a/packages/storybook-test/stories/code/code.stories.tsx b/packages/storybook-test/stories/code/code.stories.tsx index 88363187..cc366617 100644 --- a/packages/storybook-test/stories/code/code.stories.tsx +++ b/packages/storybook-test/stories/code/code.stories.tsx @@ -321,41 +321,3 @@ export const WhiteSpaceCharacters: Story = { ), }; - -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: () => ( - - Je kunt een comment plaatsen op een eigen regel om uit te leggen dat de fout genegeerd moet worden:{' '} - {'catch (error) {\n // Een parse-fout kan in deze situatie genegeerd worden\n}'} Op deze manier is - later duidelijk dat er opzettelijk geen code in het catch-block staat, en dat het niet per ongeluk is - vergeten. - - ), -}; From d4674337886e1c7f7255be51e62d92c16b3a4f69 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Tue, 17 Dec 2024 21:40:41 +0100 Subject: [PATCH 2/2] docs: add test results for Code --- .../stories/code/code.stories.tsx | 57 +++++++++---------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/packages/storybook-test/stories/code/code.stories.tsx b/packages/storybook-test/stories/code/code.stories.tsx index cc366617..f3167cf8 100644 --- a/packages/storybook-test/stories/code/code.stories.tsx +++ b/packages/storybook-test/stories/code/code.stories.tsx @@ -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, @@ -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, }, @@ -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: [], }, }, }; @@ -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 }) => ( @@ -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 }) => ( @@ -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 }) => ( @@ -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: () => (