docs: improve Color Sample stories

nl-design-system · Dec 18, 2024 · 16d38a3 · 16d38a3
1 parent 73ae792
commit 16d38a3
Showing 1 changed file with 73 additions and 0 deletions.
diff --git a/packages/storybook-test/stories/color-sample/color-sample.stories.tsx b/packages/storybook-test/stories/color-sample/color-sample.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { ExampleBodyTextDecorator } from '@nl-design-system-candidate/storybook-shared/src/ExampleBodyTextDecorator';
 import { useId } from 'react';
 import packageJSON from '../../../components-react/color-sample-react/package.json';
 import { ColorSample } from '../../../components-react/color-sample-react/src/css';
@@ -12,6 +13,7 @@ const meta = {
     value: { control: 'color', table: { category: 'API' } },
   },
   component: ColorSample,
+  decorators: [ExampleBodyTextDecorator],
   parameters: {
     docs: {
       description: {
@@ -41,6 +43,10 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   name: 'Color Sample voor "deep pink"',
   args: { value: '#ff1493' },
+  globals: {
+    dir: 'ltr',
+    lang: 'nl',
+  },
   parameters: {
     ariaLabelledBy: 'De kleur "#ff1493".',
     docs: {
@@ -65,6 +71,10 @@ export const Default: Story = {
 export const SemiTransparentColorSample: Story = {
   name: 'Color Sample met semi-transparente "deep pink"',
   args: { value: '#ff14937f' },
+  globals: {
+    dir: 'ltr',
+    lang: 'nl',
+  },
   parameters: {
     ariaLabelledBy: 'De semi-transparante kleur "#ff14937f".',
     docs: {
@@ -92,6 +102,10 @@ export const SoloColorSample: Story = {
     title: 'De kleur "#ff1493".',
     value: '#ff1493',
   },
+  globals: {
+    dir: 'ltr',
+    lang: 'nl',
+  },
   parameters: {
     docs: {
       description: {
@@ -102,3 +116,62 @@ export const SoloColorSample: Story = {
     status: { type: [] },
   },
 };
+
+export const Arabic: Story = {
+  name: 'Color Sample met beschrijving in Arabisch',
+  args: { value: 'rgb(58 131 73)' },
+  globals: {
+    dir: 'rtl',
+    lang: 'ar',
+    title: 'أخضر',
+  },
+  parameters: {
+    ariaLabelledBy: 'أخضر',
+    docs: {
+      description: {
+        story: 'Een kleurstaal met beschrijving in Arabisch.',
+      },
+    },
+    status: { type: [] },
+  },
+  render(props, context) {
+    const id = useId();
+
+    return (
+      <>
+        <ColorSample {...props} aria-labelledby={id} />
+        <Paragraph id={id}>{context.parameters['ariaLabelledBy']}</Paragraph>
+      </>
+    );
+  },
+};
+
+export const Japanese: Story = {
+  name: 'Color Sample met beschrijving in het Japans',
+  args: { value: '#00B16B' },
+  globals: {
+    dir: 'ltr',
+    lang: 'ja',
+    title: '緑',
+    writingMode: 'vertical-rl',
+  },
+  parameters: {
+    ariaLabelledBy: '緑',
+    docs: {
+      description: {
+        story: 'Een kleurstaal met beschrijving in het Japans.',
+      },
+    },
+    status: { type: [] },
+  },
+  render(props, context) {
+    const id = useId();
+
+    return (
+      <>
+        <ColorSample {...props} aria-labelledby={id} />
+        <Paragraph id={id}>{context.parameters['ariaLabelledBy']}</Paragraph>
+      </>
+    );
+  },
+};