Add contact-list-tab to Storybook (#12079)

ui/pages/settings/contact-list-tab/contact-list-tab.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { object, boolean, select } from '@storybook/addon-knobs';
+
+import configureStore from '../../../store/store';
+import testData from '../../../../.storybook/test-data';
+import ContactListTab from './contact-list-tab.component';
+
+// Using Test Data For Redux
+const store = configureStore(testData);
+
+export default {
+  title: 'ContactListTab',
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
+};
+
+export const ContactListTabComponent = () => {
+  const { metamask } = store.getState();
+  const { addresses } = metamask;
+  const addressBook = object('Address Book', addresses);
+  const hideAddressBook = boolean('Hide Address Book', false);
+  const selectedAddress = select(
+    'Selected Address',
+    addresses.map(({ address }) => address),
+  );
+
+  return (
+    <div style={{ width: 300 }}>
+      <ContactListTab
+        addressBook={addressBook}
+        history={{ push: () => undefined }}
+        hideAddressBook={hideAddressBook}
+        selectedAddress={selectedAddress}
+      />
+    </div>
+  );
+};