Fix account-list-item component for new Storybook format (#12893)

* account-list-item

* Updates

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

ui/components/app/account-list-item/README.mdx

@@ -0,0 +1,14 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import AccountListItem from '.';
+
+# Account List Item
+
+Account List Item is referred for each account item on the Account List's component
+
+<Canvas>
+  <Story id="ui-components-app-account-list-item-account-list-item-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={AccountListItem} />

ui/components/app/account-list-item/account-list-item.js

@@ -39,9 +39,28 @@ export default function AccountListItem({
 }
 
 AccountListItem.propTypes = {
-  account: PropTypes.object,
+  /**
+   * An account object that has name, address, and balance data
+   */
+  account: PropTypes.shape({
+    address: PropTypes.string.isRequired,
+    balance: PropTypes.string,
+    name: PropTypes.string,
+  }),
+  /**
+   * Additional className to add to the root div element of AccountListItem
+   */
   className: PropTypes.string,
+  /**
+   * Display the address of the account object
+   */
   displayAddress: PropTypes.bool,
+  /**
+   * The onClick handler of the AccountListItem
+   */
   handleClick: PropTypes.func,
+  /**
+   * Pass icon component to be displayed. Currently not used
+   */
   icon: PropTypes.node,
 };

ui/components/app/account-list-item/account-list-item.stories.js

@@ -1,13 +1,40 @@
 import React from 'react';
+import README from './README.mdx';
 import AccountListItem from './account-list-item';
 
 export default {
   title: 'Components/App/AccountListItem',
   id: __filename,
+  component: AccountListItem,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    account: {
+      control: 'object',
+    },
+    className: { control: 'text' },
+    displayAddress: { control: 'boolean' },
+    handleClick: { action: 'handleClick' },
+  },
 };
 
-export const DefaultStory = () => {
+const account = {
-  return <AccountListItem />;
+  name: 'Account 2',
+  address: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
+  balance: '0x2d3142f5000',
+};
+
+export const DefaultStory = (args) => {
+  return <AccountListItem {...args} />;
+};
+
+DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  account,
+  displayAddress: false,
 };
 
 DefaultStory.storyName = 'Default';