Add status icon documentation

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I7fa990794533c80bc73bbcd15a0d7191ee70cd11

9 files changed, 75 insertions, 0 deletions

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 1cf949b1..7f286200 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -49,6 +49,7 @@ module.exports = {
             "/guide/components/",
             "/guide/components/alert",
             "/guide/components/buttons/",
+            "/guide/components/status-icon/",
             "/guide/components/table/",
             "/guide/components/toast",
           ]
diff --git a/docs/guide/components/status-icon/appHeaderWithStatusIcon.png b/docs/guide/components/status-icon/appHeaderWithStatusIcon.png
new file mode 100644
index 00000000..bb557f3c
--- /dev/null
+++ b/docs/guide/components/status-icon/appHeaderWithStatusIcon.png
diff --git a/docs/guide/components/status-icon/danger.png b/docs/guide/components/status-icon/danger.png
new file mode 100644
index 00000000..fb1ecd0a
--- /dev/null
+++ b/docs/guide/components/status-icon/danger.png
diff --git a/docs/guide/components/status-icon/eventLogsWithSatusIcon.png b/docs/guide/components/status-icon/eventLogsWithSatusIcon.png
new file mode 100644
index 00000000..dc276ac1
--- /dev/null
+++ b/docs/guide/components/status-icon/eventLogsWithSatusIcon.png
diff --git a/docs/guide/components/status-icon/info.png b/docs/guide/components/status-icon/info.png
new file mode 100644
index 00000000..672def46
--- /dev/null
+++ b/docs/guide/components/status-icon/info.png
diff --git a/docs/guide/components/status-icon/readme.md b/docs/guide/components/status-icon/readme.md
new file mode 100644
index 00000000..0c9cc394
--- /dev/null
+++ b/docs/guide/components/status-icon/readme.md
@@ -0,0 +1,74 @@
+# StatusIcon
+
+The StatusIcon component is used to add an icon that represents one of the following statuses:
+
+- success
+- info
+- warning
+- danger
+
+To use this component:
+1. Import it into the single file component (SFC)
+2. Add the `<status-icon />` tag
+3. Add the optional status prop and set the value to one of the statuses
+4. Add the translated text to associate with the icon
+
+```vue
+import StatusIcon from '@/components/Global/StatusIcon'
+```
+
+## Status icon with default status
+
+```vue
+<status-icon />
+```
+
+![StatusIcon default icon example](./secondary.png)
+
+## Status icon with success status
+
+```vue
+<status-icon
+:status="success"
+/>
+```
+
+![StatusIcon success icon example](./success.png)
+
+## Status icon with info status
+
+```vue
+<status-icon
+:status="info"
+/>
+```
+
+![StatusIcon info icon example](./info.png)
+
+## Status icon with warning status
+
+```vue
+<status-icon
+:status="warning"
+/>
+```
+
+![StatusIcon warning icon example](./warning.png)
+
+## Status icon with danger status
+
+```vue
+<status-icon
+:status="danger"
+/>
+```
+
+![StatusIcon danger icon example](./danger.png)
+
+### Example of AppHeader with status icon
+
+![AppHeader with status icon example](./appHeaderWithStatusIcon.png)
+
+### Example of Event logs with status icon
+
+![EventLogs with status icon example](./eventLogsWithSatusIcon.png)
diff --git a/docs/guide/components/status-icon/secondary.png b/docs/guide/components/status-icon/secondary.png
new file mode 100644
index 00000000..bda5f63b
--- /dev/null
+++ b/docs/guide/components/status-icon/secondary.png
diff --git a/docs/guide/components/status-icon/success.png b/docs/guide/components/status-icon/success.png
new file mode 100644
index 00000000..5ff670cb
--- /dev/null
+++ b/docs/guide/components/status-icon/success.png
diff --git a/docs/guide/components/status-icon/warning.png b/docs/guide/components/status-icon/warning.png
new file mode 100644
index 00000000..42f92476
--- /dev/null
+++ b/docs/guide/components/status-icon/warning.png