Creating stories for LoadingHeartBeat and LoadingIndicator (#19495)

* Creating stories

* lint fix

* Updating LoadingHeartbeat story

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/ui/loading-heartbeat/loading-heartbeat.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import LoadingHeartBeat from '.';
+
+export default {
+  title: 'Components/UI/LoadingHeartBeat',
+  component: LoadingHeartBeat,
+  argTypes: {
+    backgroundColor: {
+      control: 'text',
+    },
+    estimateUsed: {
+      control: 'text',
+    },
+  },
+  args: {
+    backgroundColor: 'var(--color-background-default)',
+    estimateUsed: 'low',
+  },
+};
+
+export const DefaultStory = (args) => (
+  <div>
+    <LoadingHeartBeat {...args} />
+    Text underneath LoadingHeartBeat
+  </div>
+);
+
+DefaultStory.storyName = 'Default';

ui/components/ui/loading-indicator/loading-indicator.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import LoadingIndicator from './loading-indicator';
+
+export default {
+  title: 'Components/UI/LoadingIndicator',
+  component: LoadingIndicator,
+  argTypes: {
+    isLoading: {
+      control: 'boolean',
+    },
+    alt: {
+      control: 'text',
+    },
+    title: {
+      control: 'text',
+    },
+    children: {
+      control: 'text',
+    },
+  },
+  args: {
+    isLoading: true,
+    alt: '',
+    title: '',
+    children: '',
+  },
+};
+
+export const DefaultStory = (args) => <LoadingIndicator {...args} />;
+
+DefaultStory.storyName = 'Default';