From 3c9cd69bfa99bea748668dcea7b27164eba00efd Mon Sep 17 00:00:00 2001
From: Shane Kilkelly <shane@kilkelly.me>
Date: Thu, 29 Apr 2021 09:16:26 +0100
Subject: [PATCH] Merge pull request #3956 from overleaf/ae-icon-story

Add a story for the Icon component

GitOrigin-RevId: fd63c4138fdea197b941b56a404e2dd8b20f7324
---
 services/web/frontend/stories/icon.stories.js | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 services/web/frontend/stories/icon.stories.js

diff --git a/services/web/frontend/stories/icon.stories.js b/services/web/frontend/stories/icon.stories.js
new file mode 100644
index 0000000000..1c8aaa2626
--- /dev/null
+++ b/services/web/frontend/stories/icon.stories.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import Icon from '../js/shared/components/icon'
+
+export const Type = args => {
+  return (
+    <>
+      <Icon {...args} />
+      <div>
+        <a
+          href="https://fontawesome.com/v4.7.0/icons/"
+          target="_blank"
+          rel="noopener"
+        >
+          Font Awesome icons
+        </a>
+      </div>
+    </>
+  )
+}
+Type.args = {
+  type: 'tasks',
+}
+
+export const Spinner = args => {
+  return <Icon {...args} />
+}
+Spinner.args = {
+  type: 'spinner',
+  spin: true,
+}
+
+export const FixedWidth = args => {
+  return <Icon {...args} />
+}
+FixedWidth.args = {
+  type: 'tasks',
+  modifier: 'fw',
+}
+
+export const AccessibilityLabel = args => {
+  return <Icon {...args} />
+}
+AccessibilityLabel.args = {
+  type: 'check',
+  accessibilityLabel: 'Check',
+}
+
+export default {
+  title: 'Icon',
+  component: Icon,
+}