alert MAT disclaimer

libs/react-components/src/lib/components/Alert/Alert.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Alert from './index';
+import IconButton from '../IconButton';
+
+const meta = {
+  title: 'Components/Alert',
+  component: Alert,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    icon: 'info',
+    titleText: 'Alert title',
+    descriptionText: 'Alert description',
+    state: 'active',
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
+
+export const ActionElements: Story = {
+  render: (args) => {
+    return (
+      <Alert {...args}>
+          <IconButton slot="action-items" icon="close" />
+      </Alert>
+    );
+  },
+};

libs/react-components/src/lib/components/Alert/index.tsx

@@ -0,0 +1,37 @@
+import { CovalentAlert } from '@covalent/components/alert';
+import { createComponent } from '@lit/react';
+import React from 'react';
+import '@covalent/components/icon';
+
+interface AlertProps {
+    /** 
+     * Icon of the alert 
+     */
+    icon: string;
+    /**
+     * Title of the alert
+     */
+    titleText: string;
+    /**
+     * Description of the alert
+     */
+    descriptionText: string;
+    /** 
+     * State of the button
+     */
+    state: string;
+}
+const AlertComponent = createComponent({
+  tagName: 'cv-alert',
+  elementClass: CovalentAlert as never,
+  react: React,
+});
+
+const Alert: React.FC<AlertProps> = (props) => {
+  return (
+      <AlertComponent {...props}></AlertComponent>
+  );
+};
+
+Alert.displayName = 'Alert';
+export default Alert;