feat(react): add Alert component

packages/react/.storybook/story-config.ts

@@ -35,6 +35,8 @@ export type Stories =
   | 'Accordion'
   | 'AccountOverview'
   | 'ActionCard'
+  | 'Alert'
+  | 'AlertTitle'
   | 'AppBar'
   | 'AppShell'
   | 'Avatar'
@@ -126,6 +128,12 @@ const StoryConfig: StorybookConfig = {
   AppBar: {
     hierarchy: `${StorybookCategories.Surfaces}/App Bar`,
   },
+  Alert: {
+    hierarchy: `${ StorybookCategories.Feedback }/Alert`,
+  },
+  AlertTitle: {
+    hierarchy: `${ StorybookCategories.Feedback }/Alert Title`,
+  },
   AppShell: {
     hierarchy: `${StorybookCategories.Layout}/App Shell`,
   },

packages/react/src/components/Alert/Alert.stories.mdx

@@ -0,0 +1,47 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Alert from './Alert.tsx';
+
+export const meta = {
+  component: Alert,
+  title: StoryConfig.Alert.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Alert {...args} />;
+
+# Alert
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The Alert can be used to display messages.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{severity: 'success', children:'This is a success message!'}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Alert` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import Alert from '@oxygen-ui/react/Alert';\n`}
+/>

packages/react/src/components/Alert/Alert.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiAlert, {AlertProps as MuiAlertProps} from '@mui/material/Alert';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './alert.scss';
+
+export type AlertProps = MuiAlertProps;
+
+const COMPONENT_NAME: string = 'Alert';
+
+const Alert: ForwardRefExoticComponent<AlertProps> & WithWrapperProps = forwardRef(
+  (props: AlertProps): ReactElement => {
+    const {className, ...rest} = props;
+
+    const classes: string = clsx('oxygen-alert', className);
+
+    return <MuiAlert className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<AlertProps> & WithWrapperProps;
+
+Alert.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Alert.muiName = COMPONENT_NAME;
+Alert.defaultProps = {};
+
+export default Alert;

packages/react/src/components/Alert/__tests__/Alert.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import Alert from '../Alert';
+
+describe('Alert', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<Alert>Test message</Alert>);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Alert>Test message</Alert>);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

packages/react/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alert should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardSuccess MuiAlert-standard oxygen-alert css-r11jwr-MuiPaper-root-MuiAlert-root"
+      role="alert"
+    >
+      <div
+        class="MuiAlert-icon css-1ytlwq5-MuiAlert-icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1vooibu-MuiSvgIcon-root"
+          data-testid="SuccessOutlinedIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"
+          />
+        </svg>
+      </div>
+      <div
+        class="MuiAlert-message css-1pxa9xg-MuiAlert-message"
+      >
+        Test message
+      </div>
+    </div>
+  </div>
+</body>
+`;

packages/react/src/components/Alert/alert.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-alert {
+  /* Add Styles */
+}

packages/react/src/components/Alert/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './Alert';
+export type {AlertProps} from './Alert';

packages/react/src/components/AlertTitle/AlertTitle.stories.mdx

@@ -0,0 +1,47 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import AlertTitle from './AlertTitle.tsx';
+
+export const meta = {
+  component: AlertTitle,
+  title: StoryConfig.AlertTitle.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <AlertTitle {...args} />;
+
+# AlertTitle
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The AlertTitle can be used to display an alert title.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{children:'This is a title'}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `AlertTitle` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import AlertTitle from '@oxygen-ui/react/AlertTitle';\n`}
+/>

packages/react/src/components/AlertTitle/AlertTitle.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiAlertTitle, {AlertTitleProps as MuiAlertProps} from '@mui/material/AlertTitle';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './alert-title.scss';
+
+export type AlertProps = MuiAlertProps;
+
+const COMPONENT_NAME: string = 'AlertTitle';
+
+const AlertTitle: ForwardRefExoticComponent<AlertProps> & WithWrapperProps = forwardRef(
+  (props: AlertProps): ReactElement => {
+    const {className, ...rest} = props;
+
+    const classes: string = clsx('oxygen-alert-title', className);
+
+    return <MuiAlertTitle className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<AlertProps> & WithWrapperProps;
+
+AlertTitle.displayName = composeComponentDisplayName(COMPONENT_NAME);
+AlertTitle.muiName = COMPONENT_NAME;
+AlertTitle.defaultProps = {};
+
+export default AlertTitle;

packages/react/src/components/AlertTitle/__tests__/AlertTitle.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import AlertTitle from '../AlertTitle';
+
+describe('AlertTitle', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<AlertTitle>Test title</AlertTitle>);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<AlertTitle>Test title</AlertTitle>);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

packages/react/src/components/AlertTitle/__tests__/__snapshots__/AlertTitle.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertTitle should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom MuiAlertTitle-root oxygen-alert-title css-2e5qgq-MuiTypography-root-MuiAlertTitle-root"
+    >
+      Test title
+    </div>
+  </div>
+</body>
+`;

packages/react/src/components/AlertTitle/alert-title.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-alert-title {
+  /* Add Styles */
+}