Alert design review improvements (#338)

# Contents Alert design review improvements --------- Co-authored-by: Jaap-Hein Wester <j.h.wester@setonix.nl>
nl-design-system · Dec 5, 2024 · 7d6a8bd · 7d6a8bd
1 parent 6bb5b39
commit 7d6a8bd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/.changeset/two-elephants-exist.md b/.changeset/two-elephants-exist.md
@@ -0,0 +1,7 @@
+---
+"@lux-design-system/components-react": patch
+---
+
+💡
+
+Bugfix: paragraph color
diff --git a/packages/components-react/src/alert/Alert.css b/packages/components-react/src/alert/Alert.css
@@ -17,4 +17,5 @@
   --utrecht-heading-6-color: var(--utrecht-alert-color);
   --utrecht-heading-6-font-size: var(--lux-alert-heading-font-size);
   --utrecht-heading-6-line-height: var(--lux-alert-heading-font-size);
+  --utrecht-paragraph-color: var(--utrecht-alert-color);
 }
diff --git a/packages/storybook/src/react-components/alert/alert.stories.tsx b/packages/storybook/src/react-components/alert/alert.stories.tsx
@@ -37,16 +37,17 @@ export default meta;
 const AlertTemplate: Story = {
   args: {
     type: 'info',
-    children: (
+  },
+  render: ({ ...args }: LuxAlertProps, context) => (
+    <LuxAlert {...args}>
       <>
-        <LuxHeading1>Heading</LuxHeading1>
+        <LuxHeading1>{context.name}</LuxHeading1>
         <LuxParagraph>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus.
         </LuxParagraph>
       </>
-    ),
-  },
-  render: ({ children, ...args }: LuxAlertProps) => <LuxAlert {...args}>{children}</LuxAlert>,
+    </LuxAlert>
+  ),
 };
 
 export const Playground: Story = {