Update Alert and added Heading

packages/components-react/src/Alert.css

@@ -1,16 +1,20 @@
 .lux-alert {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
   gap: var(--lux-alert-column-gap);
 
-  .lux-alert-type-icon {
-    min-inline-size: var(--lux-alert-icon-size);
-    min-block-size: var(--lux-alert-icon-size);
+  * {
+    color: var(--lux-alert-color);
   }
 
-  .lux-alert-cross-icon {
-    min-inline-size: var(--lux-alert-close-button-size);
-    min-block-size: var(--lux-alert-close-button-size);
+  .lux-alert-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--lux-alert-column-gap);
+
+    .lux-alert-cross-icon {
+      margin-inline-start: auto;
+      min-inline-size: var(--lux-alert-close-button-size);
+      min-block-size: var(--lux-alert-close-button-size);
+    }
   }
 }

packages/components-react/src/Alert.tsx

@@ -40,10 +40,9 @@ export const LuxAlert = ({
     );
   return (
     !_closed && (
-      <UtrechtAlert icon={<></>} type={utrechtAlertType} {...props}>
-        <div className="lux-alert">
-          <UtrechtIcon className="lux-alert-type-icon">{icon}</UtrechtIcon>
-          {children}
+      <UtrechtAlert type={utrechtAlertType} className="lux-alert" icon={icon} {...props}>
+        <div className="lux-alert-container">
+          <div>{children}</div>
           {closable && (
             <UtrechtIcon
               className="lux-alert-cross-icon"

packages/components-react/src/Heading.tsx

@@ -0,0 +1,15 @@
+import {
+  Heading as UtrechtHeading,
+  HeadingProps as UtrechtHeadingProps,
+} from '@utrecht/component-library-react/dist/css-module';
+import { PropsWithChildren, ReactNode } from 'react';
+
+export interface LuxHeadingProps extends UtrechtHeadingProps {}
+
+export const LuxHeading = ({ children, level = 3, ...props }: PropsWithChildren<LuxHeadingProps>): ReactNode => {
+  return (
+    <UtrechtHeading level={level} {...props}>
+      {children}
+    </UtrechtHeading>
+  );
+};

packages/storybook/src/components-react/alert/alert.stories.tsx

@@ -1,4 +1,5 @@
 import { LuxAlert as Alert, LuxAlertProps } from '@lux-design-system/components-react/src/Alert';
+import { LuxHeading } from '@lux-design-system/components-react/src/Heading';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import { LuxButton as Button, LuxParagraph as Paragraph } from '@lux-design-system/web-components-react';
 import type { JSX } from '@lux-design-system/web-components-stencil';
@@ -53,6 +54,9 @@ export default meta;
 const AlertTemplate: Story = {
   render: ({ children, ...args }) => (
     <LuxAlert {...args}>
+      <LuxHeading level={3}>
+        {args.type ? args.type?.charAt(0).toUpperCase() + args.type?.slice(1) : 'Title'}
+      </LuxHeading>
       <LuxParagraph>{children}</LuxParagraph>
     </LuxAlert>
   ),
@@ -86,7 +90,6 @@ export const Info: Story = {
   args: {
     type: 'info',
     children: textTemplate('Info alert'),
-    title: 'Info',
     closable: true,
   },
 };
@@ -116,7 +119,6 @@ export const Error: Story = {
   name: 'Error',
   args: {
     type: 'error',
-    title: 'Error',
     children: textTemplate('Error alert'),
     closable: true,
   },

packages/storybook/src/components-react/heading/heading.stories.tsx

@@ -0,0 +1,107 @@
+import { LuxHeading as Heading, LuxHeadingProps } from '@lux-design-system/components-react/src/Heading';
+import tokens from '@lux-design-system/design-tokens/dist/index.json';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+
+const LuxHeading = (props: PropsWithChildren<LuxHeadingProps> & HTMLAttributes<HTMLHeadingElement>) => (
+  <Heading {...props} />
+);
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  title: 'Components React/Heading',
+  id: 'components-react-heading',
+  component: LuxHeading,
+  subcomponents: {},
+  parameters: {
+    tokens,
+    tokensPrefix: 'react-heading',
+  },
+  argTypes: {
+    children: {
+      name: 'content',
+      description: 'React text',
+      control: 'text',
+      table: {
+        type: {
+          summary: 'HTML Content',
+        },
+      },
+    },
+    level: {
+      type: 'number',
+      control: 'number',
+    },
+  },
+} satisfies Meta<typeof LuxHeading>;
+
+export default meta;
+
+const HeadingTemplate: Story = {
+  render: ({ children, ...args }) => <LuxHeading {...args}>{children}</LuxHeading>,
+  args: {
+    heading: 3,
+  },
+};
+
+const textTemplate = (name = 'Heading') => `${name}`;
+
+export const Playground: Story = {
+  ...HeadingTemplate,
+  name: 'Playground',
+  args: {
+    children: textTemplate(),
+  },
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+  tags: ['!autodocs'],
+};
+
+export const Heading1: Story = {
+  ...HeadingTemplate,
+  name: 'Heading 1',
+  args: {
+    children: textTemplate('Heading 1'),
+    level: 1,
+  },
+};
+
+export const Heading2: Story = {
+  ...HeadingTemplate,
+  name: 'Heading 2',
+  args: {
+    children: textTemplate('Heading 2'),
+    level: 2,
+  },
+};
+
+export const Heading3: Story = {
+  ...HeadingTemplate,
+  name: 'Heading 3',
+  args: {
+    children: textTemplate('Heading 3'),
+    level: 3,
+  },
+};
+
+export const Heading4: Story = {
+  ...HeadingTemplate,
+  name: 'Heading 4',
+  args: {
+    children: textTemplate('Heading 4'),
+    level: 4,
+  },
+};
+
+export const Heading5: Story = {
+  ...HeadingTemplate,
+  name: 'Heading 5',
+  args: {
+    children: textTemplate('Heading 5'),
+    level: 5,
+  },
+};