diff --git a/packages/sage-react/lib/Loader/Loader.jsx b/packages/sage-react/lib/Loader/Loader.jsx
index de5635745c..115193c292 100644
--- a/packages/sage-react/lib/Loader/Loader.jsx
+++ b/packages/sage-react/lib/Loader/Loader.jsx
@@ -89,14 +89,32 @@ Loader.defaultProps = {
fillSpace: false,
label: 'Loading...',
hideWhenDone: true,
- type: LOADER_TYPES.SPINNER,
+ type: Loader.TYPES.SPINNER,
};
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,
+ /**
+ * If true, will hide the loader when loading is false.
+ */
hideWhenDone: PropTypes.bool,
+ /**
+ * The text that aligns with the loader.
+ */
label: PropTypes.string,
+ /**
+ * If true, it will display the loader.
+ */
loading: PropTypes.bool.isRequired,
- type: PropTypes.oneOf(Object.values(LOADER_TYPES)),
+ /**
+ * 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) => ;
-
-export const Default = Template.bind({});
-Default.decorators = [
- (Story) => (
- <>
-
-
- {Story()}
-
-
- >
- )
-];
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..9c9fdd7ff2
--- /dev/null
+++ b/packages/sage-react/lib/Loader/Loader.story.mdx
@@ -0,0 +1,129 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Loader } from './Loader';
+
+
+
+# Loader
+
+Animated UI elements indicating that a page, section, or action is loading.
+
+## Usage Guidelines
+
+- Communicate that the system is working on a request.
+
+### 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.
+
+## Accessibility
+
+We achieve accessibility by leveraging the ARIA attributes `aria-live` and `aria-busy`. Each of these provide information to
+screen readers and assitive tech.
+
+- ARIA Busy indicates that an element is currently in a state of being updated or undergoing changes.
+- ARIA Live at its core defines how dynamic content changes are announced to the user. We use the `Polite` option, which informs the user
+without interrupting the user.
+
+## Properties
+
+
+
+### Types of Loaders
+- Bar
+- Spinner
+- Spinner in Button
+- Success
+- Typing
+
+## Variants
+
+### Default
+When using the component in its default state, it will use the default type of `SPINNER`
+
+
+
+### 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.
+
+
+
+### 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.
+
+
+
+### Success
+This should be used to notify the user that the process/request has been completed succesfully.
+
+
+
+### Typing
+This loading indicator is good when you want to provide feedback to the user that they are typing.
+
+
+
+## Additional Properties
+
+### Fill Space (deprecated)
+
+
+### Hide when Done
+Seting this property will hide the loader when the process/request has been completed.
+
+
+### Label
+Allows you to provide custom text to be used as the label.
+
+