From e2ba14681b75427acc6cc5e0e9aaca933ae58971 Mon Sep 17 00:00:00 2001
From: Riya Lohia <riyalh1997@gmail.com>
Date: Fri, 17 Jul 2020 18:09:55 +0530
Subject: [PATCH] feat: adds spinner and buttonGroup example stories

---
 .../atoms/button/__stories__/Cancel.story.tsx |  2 +-
 .../button/__stories__/Download.story.tsx     | 26 +++++-----
 .../__stories__/IconLeftSecondary.story.tsx   | 24 +++++-----
 .../LargeIconRightPrimary.story.tsx           | 26 +++++-----
 .../__stories__/LoadingPrimary.story.tsx      | 23 ++++-----
 .../__stories__/MenuHorizontal.story.tsx      | 22 ++++-----
 .../atoms/button/__stories__/Submit.story.tsx |  2 +-
 .../atoms/chip/_stories_/Action.story.tsx     |  1 +
 .../atoms/chip/_stories_/Input.story.tsx      | 17 +++----
 .../atoms/chip/_stories_/Selection.story.tsx  | 18 +++----
 .../message/__stories__/Success.story.tsx     | 16 +++++++
 .../__stories__/SuccessWithTitle.story.tsx    | 17 +++++++
 .../__stories__/FiftyPercent.story.tsx        | 10 ++--
 .../__stories__/ZeroPercent.story.tsx         | 15 ------
 .../__stories__/SeventyFivePercent.story.tsx  | 16 -------
 .../__stories__/InlineLoader.story.tsx        | 20 ++++++++
 .../spinner/__stories__/ModalLoader.story.tsx | 15 ++++++
 .../__stories__/Completed.story.tsx           | 14 +++---
 .../statusHint/__stories__/Inactive.story.tsx | 14 +++---
 .../statusHint/__stories__/Ongoing.story.tsx  | 14 +++---
 .../statusHint/__stories__/alert.story.tsx    | 14 +++---
 .../statusHint/__stories__/default.story.tsx  | 12 ++---
 .../statusHint/__stories__/info.story.tsx     |  2 +
 .../statusHint/__stories__/success.story.tsx  | 14 +++---
 .../switchInput/__stories__/Regular.story.tsx |  1 +
 .../switchInput/__stories__/Tiny.story.tsx    |  1 +
 .../buttonGroup/IconButtonGroup.story.tsx     | 36 ++++++++++++++
 .../buttonGroup/LabelButtonGroup.story.tsx    | 39 +++++++++++++++
 .../buttonGroup/SplitButton.story.tsx         | 48 +++++++++++++++++++
 css/src/components/grid.css                   |  9 ++++
 30 files changed, 338 insertions(+), 150 deletions(-)
 create mode 100644 core/components/atoms/message/__stories__/Success.story.tsx
 create mode 100644 core/components/atoms/message/__stories__/SuccessWithTitle.story.tsx
 delete mode 100644 core/components/atoms/progressBar/__stories__/ZeroPercent.story.tsx
 delete mode 100644 core/components/atoms/progressRing/__stories__/SeventyFivePercent.story.tsx
 create mode 100644 core/components/atoms/spinner/__stories__/InlineLoader.story.tsx
 create mode 100644 core/components/atoms/spinner/__stories__/ModalLoader.story.tsx
 create mode 100644 core/components/molecules/buttonGroup/IconButtonGroup.story.tsx
 create mode 100644 core/components/molecules/buttonGroup/LabelButtonGroup.story.tsx
 create mode 100644 core/components/molecules/buttonGroup/SplitButton.story.tsx

diff --git a/core/components/atoms/button/__stories__/Cancel.story.tsx b/core/components/atoms/button/__stories__/Cancel.story.tsx
index 171d6aee9b..b775650a25 100644
--- a/core/components/atoms/button/__stories__/Cancel.story.tsx
+++ b/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"
diff --git a/core/components/atoms/button/__stories__/Download.story.tsx b/core/components/atoms/button/__stories__/Download.story.tsx
index c2f1866990..6c0255a7f1 100644
--- a/core/components/atoms/button/__stories__/Download.story.tsx
+++ b/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',
diff --git a/core/components/atoms/button/__stories__/IconLeftSecondary.story.tsx b/core/components/atoms/button/__stories__/IconLeftSecondary.story.tsx
index 49ec7ea986..bdf76d589f 100644
--- a/core/components/atoms/button/__stories__/IconLeftSecondary.story.tsx
+++ b/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',
diff --git a/core/components/atoms/button/__stories__/LargeIconRightPrimary.story.tsx b/core/components/atoms/button/__stories__/LargeIconRightPrimary.story.tsx
index b242fb6df8..0a0b1fc9b8 100644
--- a/core/components/atoms/button/__stories__/LargeIconRightPrimary.story.tsx
+++ b/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',
diff --git a/core/components/atoms/button/__stories__/LoadingPrimary.story.tsx b/core/components/atoms/button/__stories__/LoadingPrimary.story.tsx
index 5b83ccf8dd..4d67ba57e6 100644
--- a/core/components/atoms/button/__stories__/LoadingPrimary.story.tsx
+++ b/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',
diff --git a/core/components/atoms/button/__stories__/MenuHorizontal.story.tsx b/core/components/atoms/button/__stories__/MenuHorizontal.story.tsx
index fc1553a21a..3d1830176f 100644
--- a/core/components/atoms/button/__stories__/MenuHorizontal.story.tsx
+++ b/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',
diff --git a/core/components/atoms/button/__stories__/Submit.story.tsx b/core/components/atoms/button/__stories__/Submit.story.tsx
index 5331d943e8..40fd1d7905 100644
--- a/core/components/atoms/button/__stories__/Submit.story.tsx
+++ b/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"
diff --git a/core/components/atoms/chip/_stories_/Action.story.tsx b/core/components/atoms/chip/_stories_/Action.story.tsx
index cc638f3def..76d69c2aa3 100644
--- a/core/components/atoms/chip/_stories_/Action.story.tsx
+++ b/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"
diff --git a/core/components/atoms/chip/_stories_/Input.story.tsx b/core/components/atoms/chip/_stories_/Input.story.tsx
index a51c4c7145..8a836a50f8 100644
--- a/core/components/atoms/chip/_stories_/Input.story.tsx
+++ b/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',
diff --git a/core/components/atoms/chip/_stories_/Selection.story.tsx b/core/components/atoms/chip/_stories_/Selection.story.tsx
index 88bbb89920..7bf336881e 100644
--- a/core/components/atoms/chip/_stories_/Selection.story.tsx
+++ b/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,
diff --git a/core/components/atoms/message/__stories__/Success.story.tsx b/core/components/atoms/message/__stories__/Success.story.tsx
new file mode 100644
index 0000000000..63837a9fff
--- /dev/null
+++ b/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
+};
diff --git a/core/components/atoms/message/__stories__/SuccessWithTitle.story.tsx b/core/components/atoms/message/__stories__/SuccessWithTitle.story.tsx
new file mode 100644
index 0000000000..48b55e3cd2
--- /dev/null
+++ b/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
+};
diff --git a/core/components/atoms/progressBar/__stories__/FiftyPercent.story.tsx b/core/components/atoms/progressBar/__stories__/FiftyPercent.story.tsx
index 0deb6696e0..fd11ee38fc 100644
--- a/core/components/atoms/progressBar/__stories__/FiftyPercent.story.tsx
+++ b/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',
diff --git a/core/components/atoms/progressBar/__stories__/ZeroPercent.story.tsx b/core/components/atoms/progressBar/__stories__/ZeroPercent.story.tsx
deleted file mode 100644
index 08ccc4c81e..0000000000
--- a/core/components/atoms/progressBar/__stories__/ZeroPercent.story.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import ProgressBar from '../ProgressBar';
-
-// CSF format story
-export const zeroPercent = () => (
-      <ProgressBar
-        value={Number(0)}
-        max={Number(100)}
-      />
-  );
-
-export default {
-  title: 'Atoms|ProgressBar',
-  component: ProgressBar
-};
diff --git a/core/components/atoms/progressRing/__stories__/SeventyFivePercent.story.tsx b/core/components/atoms/progressRing/__stories__/SeventyFivePercent.story.tsx
deleted file mode 100644
index cae0f00a8e..0000000000
--- a/core/components/atoms/progressRing/__stories__/SeventyFivePercent.story.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import ProgressRing from '../ProgressRing';
-
-// CSF format story
-export const seventyFivePercent = () => (
-  <ProgressRing
-    value={Number(75)}
-    size="small"
-    max={Number(100)}
-  />
-);
-
-export default {
-  title: 'Atoms|ProgressRing',
-  component: ProgressRing
-};
diff --git a/core/components/atoms/spinner/__stories__/InlineLoader.story.tsx b/core/components/atoms/spinner/__stories__/InlineLoader.story.tsx
new file mode 100644
index 0000000000..95175836bc
--- /dev/null
+++ b/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
+};
diff --git a/core/components/atoms/spinner/__stories__/ModalLoader.story.tsx b/core/components/atoms/spinner/__stories__/ModalLoader.story.tsx
new file mode 100644
index 0000000000..392277fe12
--- /dev/null
+++ b/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
+};
diff --git a/core/components/atoms/statusHint/__stories__/Completed.story.tsx b/core/components/atoms/statusHint/__stories__/Completed.story.tsx
index 33badf66f5..82236790c1 100644
--- a/core/components/atoms/statusHint/__stories__/Completed.story.tsx
+++ b/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,
diff --git a/core/components/atoms/statusHint/__stories__/Inactive.story.tsx b/core/components/atoms/statusHint/__stories__/Inactive.story.tsx
index 547cdc7b17..38ac7c4988 100644
--- a/core/components/atoms/statusHint/__stories__/Inactive.story.tsx
+++ b/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,
diff --git a/core/components/atoms/statusHint/__stories__/Ongoing.story.tsx b/core/components/atoms/statusHint/__stories__/Ongoing.story.tsx
index 186550f13f..303bf0dfd4 100644
--- a/core/components/atoms/statusHint/__stories__/Ongoing.story.tsx
+++ b/core/components/atoms/statusHint/__stories__/Ongoing.story.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import StatusHint from '../StatusHint';
+
 export const ongoing = () => (
-    <StatusHint
-      appearance="warning"
-    >
-      {'Ongoing'}
-    </StatusHint>
-  );
+  <StatusHint
+    appearance="warning"
+  >
+    {'Ongoing'}
+  </StatusHint>
+);
+
 export default {
   title: 'Atoms|StatusHint',
   component: StatusHint,
diff --git a/core/components/atoms/statusHint/__stories__/alert.story.tsx b/core/components/atoms/statusHint/__stories__/alert.story.tsx
index c3c41c9781..234fa4af75 100644
--- a/core/components/atoms/statusHint/__stories__/alert.story.tsx
+++ b/core/components/atoms/statusHint/__stories__/alert.story.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import StatusHint from '../StatusHint';
+
 export const alert = () => (
-    <StatusHint
-      appearance="alert"
-    >
-      {'Alert'}
-    </StatusHint>
-  );
+  <StatusHint
+    appearance="alert"
+  >
+    {'Alert'}
+  </StatusHint>
+);
+
 export default {
   title: 'Atoms|StatusHint',
   component: StatusHint,
diff --git a/core/components/atoms/statusHint/__stories__/default.story.tsx b/core/components/atoms/statusHint/__stories__/default.story.tsx
index 2f4920d3b0..9d3dbc2933 100644
--- a/core/components/atoms/statusHint/__stories__/default.story.tsx
+++ b/core/components/atoms/statusHint/__stories__/default.story.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 import StatusHint from '../StatusHint';
 
 export const defaultStatusHint = () => (
-    <StatusHint
-      appearance="default"
-    >
-      {'Default'}
-    </StatusHint>
-  );
+  <StatusHint
+    appearance="default"
+  >
+    {'Default'}
+  </StatusHint>
+);
 
 export default {
   title: 'Atoms|StatusHint',
diff --git a/core/components/atoms/statusHint/__stories__/info.story.tsx b/core/components/atoms/statusHint/__stories__/info.story.tsx
index d34ee86a1d..a8a4d575aa 100644
--- a/core/components/atoms/statusHint/__stories__/info.story.tsx
+++ b/core/components/atoms/statusHint/__stories__/info.story.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import StatusHint from '../StatusHint';
+
 export const info = () => (
   <StatusHint
     appearance="info"
@@ -7,6 +8,7 @@ export const info = () => (
     {'Info'}
   </StatusHint>
 );
+
 export default {
   title: 'Atoms|StatusHint',
   component: StatusHint,
diff --git a/core/components/atoms/statusHint/__stories__/success.story.tsx b/core/components/atoms/statusHint/__stories__/success.story.tsx
index d12f798d0d..d2582291ef 100644
--- a/core/components/atoms/statusHint/__stories__/success.story.tsx
+++ b/core/components/atoms/statusHint/__stories__/success.story.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import StatusHint from '../StatusHint';
+
 export const success = () => (
-    <StatusHint
-      appearance="success"
-    >
-      {'Success'}
-    </StatusHint>
-  );
+  <StatusHint
+    appearance="success"
+  >
+    {'Success'}
+  </StatusHint>
+);
+
 export default {
   title: 'Atoms|StatusHint',
   component: StatusHint,
diff --git a/core/components/atoms/switchInput/__stories__/Regular.story.tsx b/core/components/atoms/switchInput/__stories__/Regular.story.tsx
index c4a385ba38..d7de7b2131 100644
--- a/core/components/atoms/switchInput/__stories__/Regular.story.tsx
+++ b/core/components/atoms/switchInput/__stories__/Regular.story.tsx
@@ -9,6 +9,7 @@ export const regular = () => (
     appearance="primary"
   />
 );
+
 export default {
   title: 'Atoms|Switch',
   component: Switch,
diff --git a/core/components/atoms/switchInput/__stories__/Tiny.story.tsx b/core/components/atoms/switchInput/__stories__/Tiny.story.tsx
index a53459abd9..c2fd417661 100644
--- a/core/components/atoms/switchInput/__stories__/Tiny.story.tsx
+++ b/core/components/atoms/switchInput/__stories__/Tiny.story.tsx
@@ -9,6 +9,7 @@ export const tiny = () => (
     appearance="primary"
   />
 );
+
 export default {
   title: 'Atoms|Switch',
   component: Switch,
diff --git a/core/components/molecules/buttonGroup/IconButtonGroup.story.tsx b/core/components/molecules/buttonGroup/IconButtonGroup.story.tsx
new file mode 100644
index 0000000000..30497345e8
--- /dev/null
+++ b/core/components/molecules/buttonGroup/IconButtonGroup.story.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Button from '@/components/atoms/button';
+
+export const iconButtonGroup = () => (
+  <div className="d-flex">
+    <Button
+      appearance="basic"
+      size="tiny"
+      icon="content_copy"
+      className="mr-2"
+    />
+    <Button
+      appearance="basic"
+      size="tiny"
+      icon="content_paste"
+      className="mr-2"
+    />
+    <Button
+      appearance="basic"
+      size="tiny"
+      icon="delete"
+    />
+  </div>
+);
+
+export default {
+  title: 'Molecules|ButtonGroup',
+  component: Button,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Button'
+      }
+    }
+  }
+};
diff --git a/core/components/molecules/buttonGroup/LabelButtonGroup.story.tsx b/core/components/molecules/buttonGroup/LabelButtonGroup.story.tsx
new file mode 100644
index 0000000000..6942c891bf
--- /dev/null
+++ b/core/components/molecules/buttonGroup/LabelButtonGroup.story.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Button from '@/components/atoms/button';
+
+export const labelButtonGroup = () => (
+  <div className="d-flex">
+    <Button
+      appearance="basic"
+      size="tiny"
+      className="mr-2"
+    >
+      Copy
+    </Button>
+    <Button
+      appearance="basic"
+      size="tiny"
+      className="mr-2"
+    >
+      Paste
+    </Button>
+    <Button
+      appearance="basic"
+      size="tiny"
+    >
+      Delete
+    </Button>
+  </div>
+);
+
+export default {
+  title: 'Molecules|ButtonGroup',
+  component: Button,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Button'
+      }
+    }
+  }
+};
diff --git a/core/components/molecules/buttonGroup/SplitButton.story.tsx b/core/components/molecules/buttonGroup/SplitButton.story.tsx
new file mode 100644
index 0000000000..007ac576fe
--- /dev/null
+++ b/core/components/molecules/buttonGroup/SplitButton.story.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Button from '@/components/atoms/button';
+import Dropdown from '@/components/atoms/dropdown';
+
+const options = [
+  {
+    label: 'Download All',
+    value: 'Download All'
+  },
+  {
+    label: 'Download Selected',
+    value: 'Download Selected'
+  }
+];
+
+export const splitButton = () => (
+  <div className="d-flex">
+    <Button
+      appearance="basic"
+      size="regular"
+      expanded={false}
+      disabled={false}
+      loading={false}
+      className="mr-2"
+    >
+      Download
+    </Button>
+    <div className="mb-10" style={{ width: '150px' }}>
+      <Dropdown
+        menu={true}
+        icon="expand_more"
+        options={options}
+      />
+    </div>
+  </div>
+);
+
+export default {
+  title: 'Molecules|ButtonGroup',
+  component: Button,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Button'
+      }
+    }
+  }
+};
diff --git a/css/src/components/grid.css b/css/src/components/grid.css
index be122b648f..2183c02631 100644
--- a/css/src/components/grid.css
+++ b/css/src/components/grid.css
@@ -38,6 +38,15 @@
     border-right: 3px solid var(--secondary);
 }
 
+.Grid::-webkit-scrollbar {
+    width: var(--spacing);
+}
+
+.Grid::-webkit-scrollbar-thumb {
+    background: var(--secondary);
+    border-radius: var(--spacing-m);
+}
+
 .Grid-pinned::-webkit-scrollbar {
     display: none;
 }