From 6d3098930ab1d50a99cbf8422c4a936f2d72951e Mon Sep 17 00:00:00 2001
From: Julian Skinner <dev+github-bot@kajabi.com>
Date: Wed, 11 Oct 2023 16:02:44 -0600
Subject: [PATCH] docs(loader): update the react loader documentation

---
 packages/sage-react/lib/Loader/Loader.jsx     |  18 +++
 .../sage-react/lib/Loader/Loader.story.jsx    |  42 -------
 .../sage-react/lib/Loader/Loader.story.mdx    | 119 ++++++++++++++++++
 3 files changed, 137 insertions(+), 42 deletions(-)
 delete mode 100644 packages/sage-react/lib/Loader/Loader.story.jsx
 create mode 100644 packages/sage-react/lib/Loader/Loader.story.mdx

diff --git a/packages/sage-react/lib/Loader/Loader.jsx b/packages/sage-react/lib/Loader/Loader.jsx
index de5635745c..724f2043a2 100644
--- a/packages/sage-react/lib/Loader/Loader.jsx
+++ b/packages/sage-react/lib/Loader/Loader.jsx
@@ -93,10 +93,28 @@ Loader.defaultProps = {
 };
 
 Loader.propTypes = {
+  /**
+   * The name of the class you want to apply to the loader.
+   */
   className: PropTypes.string,
+  /**
+   * If true, will fill the space within the container.
+   */
   fillSpace: PropTypes.bool,
+  /**
+   *
+   */
   hideWhenDone: PropTypes.bool,
+  /**
+   * The text to display under the loader.
+   */
   label: PropTypes.string,
+  /**
+   * If true, it will display the loader.
+   */
   loading: PropTypes.bool.isRequired,
+  /**
+   * The type of Loader to be rendered
+   */
   type: PropTypes.oneOf(Object.values(LOADER_TYPES)),
 };
diff --git a/packages/sage-react/lib/Loader/Loader.story.jsx b/packages/sage-react/lib/Loader/Loader.story.jsx
deleted file mode 100644
index 10192aca79..0000000000
--- a/packages/sage-react/lib/Loader/Loader.story.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { selectArgs } from '../story-support/helpers';
-import { Card } from '../Card';
-import { Grid } from '../Grid';
-import { Loader } from './Loader';
-
-export default {
-  title: 'Sage/Loader',
-  component: Loader,
-  // displays description on Docs tab
-  parameters: {
-    docs: {
-      description: {
-        component: 'Stylized loading animations for use with components.'
-      },
-    },
-  },
-  argTypes: {
-    ...selectArgs({
-      type: Loader.TYPES
-    }),
-  },
-  args: {
-    fillSpace: true,
-    loading: true,
-    type: Loader.TYPES.BAR
-  }
-};
-const Template = (args) => <Loader {...args} />;
-
-export const Default = Template.bind({});
-Default.decorators = [
-  (Story) => (
-    <>
-      <Grid container={Grid.CONTAINER_SIZES.MD}>
-        <Card>
-          {Story()}
-        </Card>
-      </Grid>
-    </>
-  )
-];
diff --git a/packages/sage-react/lib/Loader/Loader.story.mdx b/packages/sage-react/lib/Loader/Loader.story.mdx
new file mode 100644
index 0000000000..058a12308b
--- /dev/null
+++ b/packages/sage-react/lib/Loader/Loader.story.mdx
@@ -0,0 +1,119 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Loader } from './Loader';
+
+<Meta
+  title="Sage/Loader"
+  component={Loader}
+  args={{
+    loading: true,
+  }}
+/>
+
+# Loader
+
+Animated UI elements indicating that a page, section, or action is loading.
+
+## Usage Guidelines
+
+-
+-
+-
+
+### When to use
+
+- Communicate to the user that something is loading.
+- Any action that cannot be performed instantly and will require a short time to process.
+
+### When not to use
+
+## Accessibility
+
+## Properties
+
+<ArgsTable story="Default" />
+
+### Types of Loaders
+- Bar
+- Spinner
+- Spinner in Button
+- Success
+- Typing
+
+## Variants
+
+### Default
+When using the compoennt in its default state, it will use the default type of `SPINNER`
+
+<Canvas>
+  <Story name="Default">
+    <Loader loading={true} />
+  </Story>
+</Canvas>
+
+### Bar
+The continuous progress bar is used when the content and the indefinable loading progress of the system
+are to be displayed in the view at the same time.
+
+<Canvas>
+ <Story name="Bar">
+  <Loader loading={true} type={Loader.TYPES.BAR} />
+ </Story>
+</Canvas>
+
+### Spinner
+The continuous spinner is used when loading progress cannont be determined. They indicate to the user
+with continuous movement that the system is still processing.
+
+<Canvas>
+ <Story name="Spinner">
+  <Loader loading={true} type={Loader.TYPES.SPINNER} />
+ </Story>
+</Canvas>
+
+### Success
+
+
+<Canvas>
+ <Story name="Success">
+  <Loader loading={true} type={Loader.TYPES.SUCCESS} />
+ </Story>
+</Canvas>
+
+
+### Typing
+This loading indictator is good when you want to provide feedback to the user that they are typing.
+
+<Canvas>
+ <Story name="Typing">
+  <Loader loading={true} type={Loader.TYPES.TYPING} />
+ </Story>
+</Canvas>
+
+## Additional Properties
+
+### Fill Space
+<Canvas>
+  <Story name="Fill Space">
+    <div>
+      <Loader loading={true} fillSpace={true} />
+    </div>
+  </Story>
+</Canvas>
+
+### Hide when Done
+
+<Canvas>
+  <Story name="Hide When Done">
+    <div>
+      <Loader hideWhenDone={true} />
+    </div>
+  </Story>
+</Canvas>
+
+### Label
+
+<Canvas>
+  <Story name="Label">
+    <Loader loading={true} label="My loading label...." types={Loader.TYPES.BAR} />
+  </Story>
+</Canvas>