Fix popover component to for new Storybook format (#12896)

* popover

* add proptype comments

* Update

* updating use state var name

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

ui/components/ui/popover/README.mdx

@@ -0,0 +1,16 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Popover from './popover.component';
+
+# Popover
+
+A modal component to show info
+
+<Canvas>
+  <Story id="ui-components-ui-popover-popover-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={Popover} />
+

ui/components/ui/popover/popover.component.js

@@ -81,20 +81,56 @@ const Popover = ({
 };
 
 Popover.propTypes = {
+  /**
+   * Show title of the popover
+   */
   title: PropTypes.string,
+  /**
+   * Show subtitle label on popover
+   */
   subtitle: PropTypes.string,
+  /**
+   * Show children content could be react child or text
+   */
   children: PropTypes.node,
+  /**
+   * Show footer content could be react child or text
+   */
   footer: PropTypes.node,
+  /**
+   * Add custom CSS class for footer
+   */
   footerClassName: PropTypes.string,
+  /**
+   * onBack handler
+   */
   onBack: PropTypes.func,
+  /**
+   * onClose handler
+   */
   onClose: PropTypes.func,
   CustomBackground: PropTypes.func,
+  /**
+   * Add custom CSS class for content
+   */
   contentClassName: PropTypes.string,
+  /**
+   * Add custom CSS class
+   */
   className: PropTypes.string,
+  /**
+   * Check if component would show arror
+   */
   showArrow: PropTypes.bool,
+  /**
+   * The ref of the popover-wrap element
+   */
   popoverRef: PropTypes.shape({
     current: PropTypes.instanceOf(window.Element),
   }),
+  /**
+   * Check if use centered title
+   */
   centerTitle: PropTypes.bool,
 };
 

ui/components/ui/popover/popover.stories.js

@@ -1,67 +1,83 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { text } from '@storybook/addon-knobs';
+import Button from '../button';
-import { action } from '@storybook/addon-actions';
+import Box from '../box';
+import README from './README.mdx';
 import Popover from './popover.component';
 
-const containerStyle = {
-  width: 800,
-  height: 600,
-  background: 'pink',
-  position: 'relative',
-};
-
-const mainWrapperStyle = {
-  padding: '0 24px 24px',
-};
-
 export default {
   title: 'Components/UI/Popover',
   id: __filename,
+  component: Popover,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    children: { control: 'object' },
+    footer: { control: 'object' },
+    footerClassName: { control: 'text' },
+    onBack: { action: 'onBack' },
+    onClose: { action: 'onClose' },
+    contentClassName: { control: 'text' },
+    className: { control: 'text' },
+    showArrow: { control: 'boolean' },
+    popoverRef: { control: 'object' },
+    centerTitle: { control: 'boolean' },
+  },
 };
 
-export const DefaultStory = () => (
+export const DefaultStory = (args) => {
-  <div style={containerStyle}>
+  const [isShowingPopover, setIsShowingPopover] = useState(false);
-    <Popover
+  return (
-      title={text('title', 'Approve spend limit')}
+    <div>
-      subtitle={text('subtitle', 'This is the new limit')}
+      <Button
-      onClose={action('clicked')}
+        style={{ width: 'auto' }}
-      footer={<button>Example Footer</button>}
+        onClick={() => setIsShowingPopover(true)}
-    >
+      >
-      <main style={mainWrapperStyle}>
+        Show Popover
-        <p>
+      </Button>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+      {isShowingPopover && (
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper
+        <Popover
-          eget duis at tellus at urna condimentum. Posuere urna nec tincidunt
+          {...args}
-          praesent semper. Arcu dictum varius duis at. A lacus vestibulum sed
+          onClose={() => setIsShowingPopover(false)}
-          arcu. Orci porta non pulvinar neque laoreet suspendisse interdum.
+          title={args.title}
-          Pretium fusce id velit ut. Ut consequat semper viverra nam libero
+          subtitle={args.subtitle}
-          justo laoreet sit. In ante metus dictum at tempor commodo ullamcorper
+          footer={args.footer}
-          a lacus. Posuere morbi leo urna molestie at elementum eu facilisis
+        >
-          sed. Libero enim sed faucibus turpis in eu mi bibendum neque. Amet
+          {args.children}
-          massa vitae tortor condimentum lacinia quis. Pretium viverra
+        </Popover>
-          suspendisse potenti nullam ac. Pellentesque elit eget gravida cum
+      )}
-          sociis natoque penatibus. Proin libero nunc consequat interdum varius
+    </div>
-          sit amet. Est ultricies integer quis auctor elit sed vulputate. Ornare
+  );
-          arcu odio ut sem nulla pharetra. Eget nullam non nisi est sit. Leo vel
+};
-          fringilla est ullamcorper eget nulla.
-        </p>
-        <p>
-          Mattis pellentesque id nibh tortor id. Commodo sed egestas egestas
-          fringilla phasellus. Semper eget duis at tellus at urna. Tristique
-          nulla aliquet enim tortor at auctor urna nunc. Pellentesque habitant
-          morbi tristique senectus et netus et. Turpis egestas sed tempus urna
-          et pharetra pharetra massa massa. Mi eget mauris pharetra et ultrices
-          neque ornare aenean. Facilisis volutpat est velit egestas dui id
-          ornare arcu odio. Lacus sed turpis tincidunt id aliquet risus feugiat
-          in. Cras tincidunt lobortis feugiat vivamus. Blandit libero volutpat
-          sed cras ornare arcu. Facilisi morbi tempus iaculis urna id volutpat.
-          Risus viverra adipiscing at in tellus. Leo vel orci porta non pulvinar
-          neque. Malesuada fames ac turpis egestas integer. Euismod nisi porta
-          lorem mollis aliquam.
-        </p>
-      </main>
-    </Popover>
-  </div>
-);
 
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  title: 'Approve spend limit',
+  subtitle: 'This is the new limit',
+  footer: <button>Example Footer</button>,
+  showArrow: false,
+  children: (
+    <Box padding={4}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Semper eget duis at
+        tellus at urna condimentum. Posuere urna nec tincidunt praesent semper.
+        Arcu dictum varius duis at. A lacus vestibulum sed arcu. Orci porta non
+        pulvinar neque laoreet suspendisse interdum. Pretium fusce id velit ut.
+        Ut consequat semper viverra nam libero justo laoreet sit. In ante metus
+        dictum at tempor commodo ullamcorper a lacus. Posuere morbi leo urna
+        molestie at elementum eu facilisis sed. Libero enim sed faucibus turpis
+        in eu mi bibendum neque. Amet massa vitae tortor condimentum lacinia
+        quis. Pretium viverra suspendisse potenti nullam ac. Pellentesque elit
+        eget gravida cum sociis natoque penatibus. Proin libero nunc consequat
+        interdum varius sit amet. Est ultricies integer quis auctor elit sed
+        vulputate. Ornare arcu odio ut sem nulla pharetra. Eget nullam non nisi
+        est sit. Leo vel fringilla est ullamcorper eget nulla.
+      </p>
+    </Box>
+  ),
+};