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..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: () => ( @@ -321,41 +316,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. - - ), -};