feat: adds spinner and buttonGroup example stories

core/components/atoms/button/__stories__/Cancel.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const cancel = () => (
+export const cancelButton = () => (
   <Button
     appearance="basic"
     size="regular"

core/components/atoms/button/__stories__/Download.story.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const download = () => (
-    <Button
-      appearance="basic"
-      size="regular"
-      expanded={false}
-      disabled={false}
-      loading={false}
-      icon="get_app"
-      iconAlign="left"
-    >
-      Download
-    </Button>
-  );
+export const downloadButton = () => (
+  <Button
+    appearance="basic"
+    size="regular"
+    expanded={false}
+    disabled={false}
+    loading={false}
+    icon="get_app"
+    iconAlign="left"
+  >
+    Download
+  </Button>
+);
 
 export default {
   title: 'Atoms|Button',

core/components/atoms/button/__stories__/IconLeftSecondary.story.tsx

@@ -2,18 +2,18 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const iconLeftSecondary = () => (
-    <Button
-      appearance="basic"
-      size="regular"
-      expanded={false}
-      disabled={false}
-      loading={false}
-      icon={'refresh'}
-      iconAlign={'left'}
-    >
-      {'Button'}
-    </Button>
-  );
+  <Button
+    appearance="basic"
+    size="regular"
+    expanded={false}
+    disabled={false}
+    loading={false}
+    icon={'refresh'}
+    iconAlign={'left'}
+  >
+    {'Button'}
+  </Button>
+);
 
 export default {
   title: 'Atoms|Button',

core/components/atoms/button/__stories__/LargeIconRightPrimary.story.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const LargeIconRightPrimary = () =>  (
-    <Button
-      appearance="primary"
-      size="large"
-      expanded={false}
-      disabled={false}
-      loading={false}
-      icon={'refresh'}
-      iconAlign={'right'}
-    >
-      {'Button'}
-    </Button>
-  );
+export const LargeIconRightPrimary = () => (
+  <Button
+    appearance="primary"
+    size="large"
+    expanded={false}
+    disabled={false}
+    loading={false}
+    icon={'refresh'}
+    iconAlign={'right'}
+  >
+    {'Button'}
+  </Button>
+);
 
 export default {
   title: 'Atoms|Button',

core/components/atoms/button/__stories__/LoadingPrimary.story.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import Button from '../Button';
-export const loadingPrimary = () =>  (
-        <Button
-          appearance="primary"
-          size="regular"
-          expanded={false}
-          disabled={false}
-          loading={true}
-        >
-          {''}
-        </Button>
-  );
+
+export const loadingPrimary = () => (
+  <Button
+    appearance="primary"
+    size="regular"
+    expanded={false}
+    disabled={false}
+    loading={true}
+  >
+    {''}
+  </Button>
+);
 
 export default {
   title: 'Atoms|Button',

core/components/atoms/button/__stories__/MenuHorizontal.story.tsx

@@ -2,17 +2,17 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const menuHorizontal = () => (
-    <Button
-      appearance={'transparent'}
-      size="regular"
-      expanded={false}
-      disabled={false}
-      loading={false}
-      icon="more_horiz"
-    >
-      {''}
-    </Button>
-  );
+  <Button
+    appearance={'transparent'}
+    size="regular"
+    expanded={false}
+    disabled={false}
+    loading={false}
+    icon="more_horiz"
+  >
+    {''}
+  </Button>
+);
 
 export default {
   title: 'Atoms|Button',

core/components/atoms/button/__stories__/Submit.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const submit = () => (
+export const submitButton = () => (
   <Button
     appearance="primary"
     size="regular"

core/components/atoms/chip/_stories_/Action.story.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Chip from '../Chip';
+
 export const actionChip = () => (
   <Chip
     label="First Name"

core/components/atoms/chip/_stories_/Input.story.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import Chip from '../Chip';
+
 export const input = () => (
-    <Chip
-      label="First Name"
-      clearButton={false}
-      disabled={false}
-      type="input"
-      name={'chip'}
-    />
-  );
+  <Chip
+    label="First Name"
+    clearButton={false}
+    disabled={false}
+    type="input"
+    name={'chip'}
+  />
+);
 
 export default {
   title: 'Atoms|Chip',

core/components/atoms/chip/_stories_/Selection.story.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import Chip from '../Chip';
+
 export const selection = () => (
-    <Chip
-      label="Yes"
-      clearButton={false}
-      type="selection"
-      selected={false}
-      name={'chip'}
-    />
-  );
+  <Chip
+    label="Yes"
+    clearButton={false}
+    type="selection"
+    selected={false}
+    name={'chip'}
+  />
+);
+
 export default {
   title: 'Atoms|Chip',
   component: Chip,

core/components/atoms/message/__stories__/Success.story.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Message from '../index';
+
+// CSF format story
+export const successWithoutTitle = () => (
+  <Message
+    appearance={'success'}
+  >
+    {'Password updated. Login with your updated credentials.'}
+  </Message>
+);
+
+export default {
+  title: 'Atoms|Message',
+  component: Message
+};

core/components/atoms/message/__stories__/SuccessWithTitle.story.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Message from '../index';
+
+// CSF format story
+export const successWithTitle = () => (
+  <Message
+    appearance={'success'}
+    title={'Outreach successfully sent'}
+  >
+    {'2,340 messages sent.'}
+  </Message>
+);
+
+export default {
+  title: 'Atoms|Message',
+  component: Message
+};

core/components/atoms/progressBar/__stories__/FiftyPercent.story.tsx

@@ -3,11 +3,11 @@ import ProgressBar from '../ProgressBar';
 
 // CSF format story
 export const fiftyPercent = () => (
-      <ProgressBar
-        value={Number(50)}
-        max={Number(100)}
-      />
-  );
+  <ProgressBar
+    value={50}
+    max={100}
+  />
+);
 
 export default {
   title: 'Atoms|ProgressBar',

core/components/atoms/spinner/__stories__/InlineLoader.story.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Spinner from '../Spinner';
+import Text from '@/components/atoms/text';
+
+// CSF format story
+export const inlineLoader = () => (
+  <div className="d-flex">
+    <Spinner
+      appearance="primary"
+      size="small"
+      className="mr-3"
+    />
+    <Text>uploading...</Text>
+  </div>
+);
+
+export default {
+  title: 'Atoms|Loaders/Spinner',
+  component: Spinner
+};

core/components/atoms/spinner/__stories__/ModalLoader.story.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Spinner from '../Spinner';
+
+// CSF format story
+export const modalLoader = () => (
+  <Spinner
+    appearance="primary"
+    size="medium"
+  />
+);
+
+export default {
+  title: 'Atoms|Loaders/Spinner',
+  component: Spinner
+};

core/components/atoms/statusHint/__stories__/Completed.story.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import StatusHint from '../StatusHint';
+
 export const completed = () => (
-    <StatusHint
-      appearance="success"
-    >
-      {'Completed'}
-    </StatusHint>
-  );
+  <StatusHint
+    appearance="success"
+  >
+    {'Completed'}
+  </StatusHint>
+);
+
 export default {
   title: 'Atoms|StatusHint',
   component: StatusHint,

core/components/atoms/statusHint/__stories__/Inactive.story.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import StatusHint from '../StatusHint';
+
 export const inactive = () => (
-    <StatusHint
-      appearance="alert"
-    >
-      {'Inactive'}
-    </StatusHint>
-  );
+  <StatusHint
+    appearance="alert"
+  >
+    {'Inactive'}
+  </StatusHint>
+);
+
 export default {
   title: 'Atoms|StatusHint',
   component: StatusHint,