Add permissions-connect component to Storybook (#11644)

* add metadata

* fix image path for storybook

* fix lint

* separate components

ui/pages/permissions-connect/permissions-connect.stories.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { PermissionPageContainerContent } from '../../components/app/permission-page-container';
+import PermissionsConnectFooter from '../../components/app/permissions-connect-footer';
+import { PageContainerFooter } from '../../components/ui/page-container';
+import ChooseAccount from './choose-account';
+
+export default {
+  title: 'Permissions Connect',
+};
+
+export const ChooseAccountComponent = () => {
+  return (
+    <ChooseAccount
+      selectAccounts={action('Account(s) Selected')}
+      selectedAccountAddresses={
+        new Set([
+          '0xcb47e5e29f925e7482d1712297fb6b268f412344',
+          '0xf68a4b64162906eff0ff6ae34e2bb1cd42fef62d',
+          '0xbe0eb53f46cd790cd13851d5eff43d12404d33e8',
+        ])
+      }
+      targetDomainMetadata={{
+        host: 'gnosis-safe.io',
+        icon: './gnosis.svg',
+        lastUpdated: 1627423550860,
+        name: 'Gnosis - Manage Digital Assets',
+        origin: 'https://gnosis-safe.io',
+      }}
+      accounts={[
+        {
+          address: '0xcb47e5e29f925e7482d1712297fb6b268f412344',
+          addressLabel: 'Account 1 (...2344)',
+          balance: '0x176e5b6f173ebe66',
+          label: 'Account 1',
+        },
+        {
+          address: '0xf68a4b64162906eff0ff6ae34e2bb1cd42fef62d',
+          addressLabel: 'Account 2 (...f62d)',
+          balance: '0x176e5b6f173e',
+          label: 'Account 2',
+        },
+        {
+          address: '0xbe0eb53f46cd790cd13851d5eff43d12404d33e8',
+          addressLabel: 'Account 3 (...33e8)',
+          balance: '0x176e5b6f173ebe',
+          label: 'Account 3',
+        },
+      ]}
+    />
+  );
+};
+
+export const PermissionPageContainerComponent = () => {
+  return (
+    <div className="page-container permission-approval-container">
+      <PermissionPageContainerContent
+        domainMetadata={{
+          extensionId: '1',
+          host: 'gnosis-safe.io',
+          icon: './gnosis.svg',
+          lastUpdated: 1627423550860,
+          name: 'Gnosis - Manage Digital Assets',
+          origin: 'https://gnosis-safe.io',
+        }}
+        selectedPermissions={{
+          eth_accounts: true,
+        }}
+      />
+      <div className="permission-approval-container__footers">
+        <PermissionsConnectFooter />
+        <PageContainerFooter
+          cancelButtonType="default"
+          onSubmit={action('Account(s) Connected')}
+          submitText="connect"
+          submitButtonType="confirm"
+          buttonSizeLarge={false}
+        />
+      </div>
+    </div>
+  );
+};