From 9fcfbe7609ee96727550bf2f21dfb3d8e9f1fd6a Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Tue, 7 Dec 2021 07:08:13 +0800
Subject: [PATCH] Fix unlock-page component for new Storybook format  (#12894)

* unlock-page

* Updating comments and removing broken args table

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
---
 ui/pages/unlock-page/README.mdx               | 27 +++++++++++++
 ui/pages/unlock-page/unlock-page.component.js | 18 +++++++++
 ui/pages/unlock-page/unlock-page.stories.js   | 39 +++++++++++++------
 3 files changed, 72 insertions(+), 12 deletions(-)
 create mode 100644 ui/pages/unlock-page/README.mdx

diff --git a/ui/pages/unlock-page/README.mdx b/ui/pages/unlock-page/README.mdx
new file mode 100644
index 000000000..292d21265
--- /dev/null
+++ b/ui/pages/unlock-page/README.mdx
@@ -0,0 +1,27 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import UnlockPage from '.';
+
+# Unlock Page
+
+Portal page for user to auth the access of their account
+
+<Canvas>
+  <Story id="ui-pages-unlock-page-unlock-page-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<!--
+ArgsTable doesn't work with SectionShape
+<ArgsTable of={MetaMaskTranslation} />
+-->
+
+| Name                       | Description                                                                |
+| -------------------------- | -------------------------------------------------------------------------- |
+| `history`                  | History router for redirect after action `object`                          |
+| `isUnlocked`               | If isUnlocked is true will redirect to most recent route in history `bool` |
+| `onRestore`                | onClick handler for "import using Secret Recovery Phrase" link `func`      |
+| `onSubmit`                 | onSumbit handler when form is submitted `func`                             |
+| `forceUpdateMetamaskState` | Force update metamask data state `func`                                    |
+| `showOptInModal`           | Event handler to show metametrics modal `func`                             |
diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js
index a0bcedb94..bb7718e2e 100644
--- a/ui/pages/unlock-page/unlock-page.component.js
+++ b/ui/pages/unlock-page/unlock-page.component.js
@@ -14,11 +14,29 @@ export default class UnlockPage extends Component {
   };
 
   static propTypes = {
+    /**
+     * History router for redirect after action
+     */
     history: PropTypes.object.isRequired,
+    /**
+     * If isUnlocked is true will redirect to most recent route in history
+     */
     isUnlocked: PropTypes.bool,
+    /**
+     * onClick handler for "import using Secret Recovery Phrase" link
+     */
     onRestore: PropTypes.func,
+    /**
+     * onSumbit handler when form is submitted
+     */
     onSubmit: PropTypes.func,
+    /**
+     * Force update metamask data state
+     */
     forceUpdateMetamaskState: PropTypes.func,
+    /**
+     * Event handler to show metametrics modal
+     */
     showOptInModal: PropTypes.func,
   };
 
diff --git a/ui/pages/unlock-page/unlock-page.stories.js b/ui/pages/unlock-page/unlock-page.stories.js
index a256c7090..006e3e3bb 100644
--- a/ui/pages/unlock-page/unlock-page.stories.js
+++ b/ui/pages/unlock-page/unlock-page.stories.js
@@ -1,23 +1,38 @@
+import { createBrowserHistory } from 'history';
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import README from './README.mdx';
 import UnlockPage from './unlock-page.component';
 
 export default {
   title: 'Pages/UnlockPage',
   id: __filename,
+  component: UnlockPage,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    history: { control: 'object' },
+    isUnlocked: { control: 'boolean' },
+    onRestore: { action: 'onRestore' },
+    onSubmit: { action: 'onSubmit' },
+    forceUpdateMetamaskState: { action: 'forceUpdateMetamaskState' },
+    showOptInModal: { action: 'showOptInModal' },
+  },
 };
 
-export const DefaultStory = () => {
-  return (
-    <UnlockPage
-      onSubmit={action('Login')}
-      forceUpdateMetamaskState={() => ({
-        participateInMetaMetrics: true,
-      })}
-      showOptInModal={() => null}
-      history={{}}
-    />
-  );
+export const DefaultStory = (args) => {
+  const history = createBrowserHistory();
+  return <UnlockPage {...args} history={history} />;
+};
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  forceUpdateMetamaskState: () => ({
+    participateInMetaMetrics: true,
+  }),
 };
 
 DefaultStory.storyName = 'Default';