From 8ce0eff047324f1ff0d2b29e9143ad243a77204d Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Mon, 22 Nov 2021 19:40:33 -0600
Subject: [PATCH] alert-circle-icon (#12651)

---
 ui/components/ui/alert-circle-icon/README.mdx | 25 +++++++++++++++++++
 .../alert-circle-icon.component.js            |  3 +++
 .../alert-circle-icon.stories.js              | 24 +++++++++++++++---
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 ui/components/ui/alert-circle-icon/README.mdx

diff --git a/ui/components/ui/alert-circle-icon/README.mdx b/ui/components/ui/alert-circle-icon/README.mdx
new file mode 100644
index 000000000..c7d05782f
--- /dev/null
+++ b/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>
diff --git a/ui/components/ui/alert-circle-icon/alert-circle-icon.component.js b/ui/components/ui/alert-circle-icon/alert-circle-icon.component.js
index 71eca7783..689447810 100644
--- a/ui/components/ui/alert-circle-icon/alert-circle-icon.component.js
+++ b/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,
   };
 
diff --git a/ui/components/ui/alert-circle-icon/alert-circle-icon.stories.js b/ui/components/ui/alert-circle-icon/alert-circle-icon.stories.js
index 4053d9661..fe34a15a8 100644
--- a/ui/components/ui/alert-circle-icon/alert-circle-icon.stories.js
+++ b/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',
+};