alert-circle-icon (#12651)

ui/components/ui/alert-circle-icon/README.mdx

@@ -0,0 +1,25 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import AlertCircleIcon from '.';
+
+# Alert Circle Icon
+
+<Canvas>
+  <Story id="ui-components-ui-alert-circle-icon-alert-circle-icon-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={AlertCircleIcon} />
+
+## Usage
+
+The following describes the props and example usage for this component.
+
+### Warning
+
+Render warning alert icon
+
+<Canvas>
+  <Story id="ui-components-ui-alert-circle-icon-alert-circle-icon-stories-js--warning" />
+</Canvas>

ui/components/ui/alert-circle-icon/alert-circle-icon.component.js

@@ -15,6 +15,9 @@ const typeConfig = {
 
 export default class AlertCircleIcon extends Component {
   static propTypes = {
+    /**
+     * giving different alert icon for the component
+     */
     type: PropTypes.oneOf(Object.keys(typeConfig)).isRequired,
   };
 

ui/components/ui/alert-circle-icon/alert-circle-icon.stories.js

@@ -1,11 +1,29 @@
 import React from 'react';
+import README from './README.mdx';
 import AlertCircleIcon from './alert-circle-icon.component';
 
 export default {
-  title: 'AlertCircleIcon',
+  title: 'Components/UI/Alert Circle Icon',
   id: __filename,
+  component: AlertCircleIcon,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    type: { options: ['warning', 'danger'], control: { type: 'select' } },
+  },
 };
 
-export const dangerCircleIcon = () => <AlertCircleIcon type="danger" />;
+export const DefaultStory = (args) => <AlertCircleIcon type={args.type} />;
+DefaultStory.storyName = 'Default';
 
-export const warningCircleIcon = () => <AlertCircleIcon type="warning" />;
+DefaultStory.args = {
+  type: 'danger',
+};
+
+export const Warning = (args) => <AlertCircleIcon type={args.type} />;
+Warning.args = {
+  type: 'warning',
+};