style: support font-weight for paragraphs nested in form-field-error-…

…message
nl-design-system · May 6, 2024 · e4156e4 · e4156e4
1 parent 732b950
commit e4156e4
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 2 deletions.
diff --git a/components/form-field-error-message/css/_mixin.scss b/components/form-field-error-message/css/_mixin.scss
@@ -5,6 +5,7 @@
 
 @mixin utrecht-form-field-error-message {
   --utrecht-document-color: currentColor;
+  --utrecht-paragraph-font-weight: var(--utrecht-form-field-error-message-font-weight, initial);
 
   background-color: var(--utrecht-form-field-error-message-background-color);
   color: var(--utrecht-form-field-error-message-color);

diff --git a/packages/storybook-css/src/FormFieldErrorMessage.stories.tsx b/packages/storybook-css/src/FormFieldErrorMessage.stories.tsx
@@ -1,7 +1,13 @@
 /* @license CC0-1.0 */
 
 import { Meta, StoryObj } from '@storybook/react';
-import { FormFieldErrorMessage, Paragraph } from '@utrecht/component-library-react';
+import {
+  Code,
+  FormFieldErrorMessage,
+  Paragraph,
+  UnorderedList,
+  UnorderedListItem,
+} from '@utrecht/component-library-react';
 import readme from '@utrecht/components/form-field-error-message/README.md?raw';
 import tokensDefinition from '@utrecht/components/form-field-error-message/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
@@ -53,4 +59,77 @@ export const Default: Story = {
   },
 };
 
+export const PlainText: Story = {
+  args: {
+    id: 'f4f534ae-ed96-4af4-9cb0-3752194cde89',
+    children: 'Your password must contain at least 16 characters.',
+  },
+  name: 'Plain text',
+};
+
+export const PlainTextMultiline: Story = {
+  args: {
+    id: 'f4f534ae-ed96-4af4-9cb0-3752194cde89',
+    children: 'Your password must contain at least 16 characters. '.repeat(10),
+  },
+  name: 'Multiple lines of plain text',
+  parameters: {
+    docs: {
+      description: {
+        story: 'De `line-height` van foutmeldingen moet voldoende zijn voor goede leesbaarheid.',
+      },
+    },
+  },
+};
+
+export const UnorderedListStory: Story = {
+  args: {
+    id: 'f4f534ae-ed96-4af4-9cb0-3752194cde89',
+    children: (
+      <UnorderedList>
+        <UnorderedListItem>Your password must contain at least 16 characters.</UnorderedListItem>
+        <UnorderedListItem>Your password must contain at least 1 number.</UnorderedListItem>
+      </UnorderedList>
+    ),
+  },
+  name: 'Unordered list',
+};
+
+export const UnorderedListParagraphStory: Story = {
+  args: {
+    id: 'f4f534ae-ed96-4af4-9cb0-3752194cde89',
+    children: (
+      <UnorderedList>
+        <UnorderedListItem>
+          <Paragraph>Your password must contain at least 16 characters.</Paragraph>
+        </UnorderedListItem>
+        <UnorderedListItem>
+          <Paragraph>Your password must contain at least 1 number.</Paragraph>
+        </UnorderedListItem>
+      </UnorderedList>
+    ),
+  },
+  name: 'Unordered list with paragraphs',
+};
+
+export const CodeError: Story = {
+  args: {
+    id: '8a2e3430-d6b1-4575-8353-4c624c87aba9',
+    children: (
+      <Paragraph>
+        <Code>SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data</Code>
+      </Paragraph>
+    ),
+  },
+  name: 'Code error',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Gebruik een _paragraph_ en een _code_ component (en geen _code block_), zodat de tekst kan wrappen over meedere regels en de line-height voldoende is.',
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-react/src/stories/FormFieldErrorMessage.stories.tsx b/packages/storybook-react/src/stories/FormFieldErrorMessage.stories.tsx
@@ -1,5 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Code, FormFieldErrorMessage, Paragraph } from '@utrecht/component-library-react/dist/css-module';
+import {
+  Code,
+  FormFieldErrorMessage,
+  Paragraph,
+  UnorderedList,
+  UnorderedListItem,
+} from '@utrecht/component-library-react/dist/css-module';
 import readme from '@utrecht/components/form-field-error-message/README.md?raw';
 import tokensDefinition from '@utrecht/components/form-field-error-message/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
@@ -37,6 +43,35 @@ export const Default: Story = {
   },
 };
 
+export const PlainText: Story = {
+  args: {
+    id: 'f4f534ae-ed96-4af4-9cb0-3752194cde89',
+    children: 'Your password must contain at least 16 characters.',
+  },
+  name: 'Plain text',
+};
+
+export const PlainTextMultiline: Story = {
+  args: {
+    id: 'f4f534ae-ed96-4af4-9cb0-3752194cde89',
+    children: 'Your password must contain at least 16 characters. '.repeat(10),
+  },
+  name: 'Multiple lines of plain text',
+};
+
+export const UnorderedListStory: Story = {
+  args: {
+    id: 'f4f534ae-ed96-4af4-9cb0-3752194cde89',
+    children: (
+      <UnorderedList>
+        <UnorderedListItem>Your password must contain at least 16 characters.</UnorderedListItem>
+        <UnorderedListItem>Your password must contain at least 1 number.</UnorderedListItem>
+      </UnorderedList>
+    ),
+  },
+  name: 'Unordered list',
+};
+
 export const CodeError: Story = {
   args: {
     id: '8a2e3430-d6b1-4575-8353-4c624c87aba9',

diff --git a/packages/storybook-web-component/src/FormFieldErrorMessage.stories.tsx b/packages/storybook-web-component/src/FormFieldErrorMessage.stories.tsx
@@ -59,6 +59,7 @@ export const Default: Story = {
     children: <utrecht-paragraph>This is a required field and must not be left empty.</utrecht-paragraph>,
   },
 };
+
 export const CodeError: Story = {
   args: {
     id: '709e0cf1-91f4-480e-ae03-34ffbb1386c8',
@@ -79,4 +80,20 @@ export const CodeError: Story = {
   },
 };
 
+export const PlainText: Story = {
+  args: {
+    id: '3f1eba94-9a3b-4f1e-810d-03e8b0adb1da',
+    children: 'Your password must contain at least 16 characters.',
+  },
+  name: 'Plain text',
+};
+
+export const PlainTextMultiline: Story = {
+  args: {
+    id: '47407e39-478b-48f1-95a7-2a9de61b08af',
+    children: 'Your password must contain at least 16 characters. '.repeat(10),
+  },
+  name: 'Multiple lines of plain text',
+};
+
 export const DesignTokens = designTokenStory(meta);