feat: refactor popover component and add theme prop

docs/components/Example/styles.scss

@@ -17,12 +17,12 @@
     }
   }
 
-  h2 {
+  & > h2 {
     margin-bottom: $spacing-etalon;
     font-size: $font-size-header;
   }
 
-  h3 {
+  & > h3 {
     margin-bottom: 18px;
     font-size: $font-size-subheader;
   }

docs/components/Layout/index.jsx

@@ -34,6 +34,7 @@ import TabExample from '../../examples/TabExample';
 import EmptyExample from '../../examples/EmptyExample';
 import GridExample from '../../examples/GridExample';
 import PrettyDiffExample from '../../examples/PrettyDiffExample';
+import PopoverExample from '../../examples/PopoverExample';
 import SpinnerExample from '../../examples/SpinnerExample';
 import SvgSymbolExample from '../../examples/SvgSymbolExample';
 import SvgSymbolCircleExample from '../../examples/SvgSymbolCircleExample';
@@ -88,7 +89,7 @@ const componentsBySection = {
   'icons-and-graphics': ['svg-symbol', 'svg-symbol-circle'],
   navigation: ['breadcrumb', 'tab', 'hover-dropdown-menu', 'navigation-tabs'],
   'feedback-and-states': ['alert', 'empty', 'spinner', 'pretty-diff'],
-  dialogue: ['help-icon-popover', 'avatar'],
+  dialogue: ['popover', 'help-icon-popover', 'avatar'],
   modals: ['confirm-modal'],
   search: ['search', 'search-bar', 'tag'],
   grouping: [
@@ -211,6 +212,7 @@ class PageLayout extends React.Component {
             <PrettyDiffExample />
 
             <PageTitle title="Dialogue" />
+            <PopoverExample />
             <HelpIconPopoverExample />
             <AvatarExample />
 

docs/examples/HelpIconPopoverExample.jsx

@@ -15,7 +15,7 @@ class HelpIconPopoverExample extends React.PureComponent {
 }
 
 const exampleProps = {
-  componentName: 'Help Icon',
+  componentName: 'Help Icon Popover',
   designNotes: (
     <div>
       <p>

docs/examples/PopoverExample.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import Example from '../components/Example';
+import { Popover } from '../../src';
+
+class PopoverExample extends React.PureComponent {
+  render() {
+    return (
+      <>
+        <label>Placement (left, right, bottom, top)</label>
+        <div style={{ display: 'flex' }}>
+          <Popover id="popover-example-left" placement="left" title="Popover Title">
+            LEFT
+          </Popover>
+          <Popover id="popover-example-right" placement="right" title="Popover Title">
+            RIGHT
+          </Popover>
+          <Popover id="popover-example-bottom" placement="bottom" title="Popover Title">
+            BOTTOM
+          </Popover>
+          <Popover id="popover-example-top" placement="top" title="Popover Title">
+            TOP
+          </Popover>
+        </div>
+        <label>Theme (light, dark, warn, error)</label>
+        <div style={{ display: 'flex' }}>
+          <Popover id="popover-example-light" placement="bottom" theme="light" title="Popover Title">
+            LIGHT
+          </Popover>
+          <Popover id="popover-example-dark" placement="bottom" theme="dark" title="Popover Title">
+            DARK
+          </Popover>
+          <Popover id="popover-example-warn" placement="bottom" theme="warn" title="Popover Title">
+            WARN
+          </Popover>
+          <Popover id="popover-example-error" placement="bottom" theme="error" title="Popover Title">
+            ERROR
+          </Popover>
+        </div>
+      </>
+    );
+  }
+}
+
+const exampleProps = {
+  componentName: 'Popover',
+  exampleCodeSnippet: `
+    <Popover id="popover-example-left" placement="left" title="Popover Title">
+      LEFT
+    </Popover>
+
+    <Popover id="popover-example-right" placement="right" title="Popover Title">
+      RIGHT
+    </Popover>
+
+    <Popover id="popover-example-bottom" placement="bottom" title="Popover Title">
+      BOTTOM
+    </Popover>
+
+    <Popover id="popover-example-top" placement="top" title="Popover Title">
+      TOP
+    </Popover>
+
+    <Popover id="popover-example-light" placement="bottom" theme="light" title="Popover Title">
+      LIGHT
+    </Popover>
+
+    <Popover id="popover-example-dark" placement="bottom" theme="dark" title="Popover Title">
+      DARK
+    </Popover>
+
+    <Popover id="popover-example-warn" placement="bottom" theme="warn" title="Popover Title">
+      WARN
+    </Popover>
+
+    <Popover id="popover-example-error" placement="bottom" theme="error" title="Popover Title">
+      ERROR
+    </Popover>
+  `,
+  propTypeSectionArray: [
+    {
+      propTypes: [
+        {
+          propType: 'id',
+          type: 'string',
+          note: 'A unique identifier for the element.',
+        },
+        {
+          propType: 'title',
+          type: 'node',
+          note: 'Title for this popover.',
+        },
+        {
+          propType: 'children',
+          type: 'node',
+          note: 'Message content for this popover.',
+        },
+        {
+          propType: 'bsClass',
+          type: 'text',
+          defaultValue: 'popover',
+          note: `Base className. The default value is 'popover'.`,
+        },
+        {
+          propType: 'className',
+          type: 'text',
+          note: 'Additional className for the component',
+        },
+        {
+          propType: 'placement',
+          type: 'oneOf[top, right, bottom, left]',
+          defaultValue: 'right',
+        },
+        {
+          propType: 'theme',
+          type: 'oneOf[light, dark, warn, error]',
+          defaultValue: 'light',
+        },
+      ],
+    },
+  ],
+};
+
+export default () => (
+  <Example {...exampleProps}>
+    <PopoverExample />
+  </Example>
+);

docs/examples/styles.scss

@@ -62,6 +62,15 @@
       }
     }
   }
+
+  &.popover-example {
+    .adslot-ui-example {
+      .popover {
+        position: relative;
+        margin: 20px;
+      }
+    }
+  }
 }
 
 .full-width {

src/components/adslot-ui/AlertInput/index.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Overlay from 'react-bootstrap/lib/Overlay';
-import Popover from 'react-bootstrap/lib/Popover';
+import { Popover } from 'third-party';
 import './styles.scss';
 
 export const baseClass = 'alert-input-component';

src/components/adslot-ui/HelpIconPopover/index.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
-import Popover from 'react-bootstrap/lib/Popover';
 import { expandDts } from 'lib/utils';
+import { Popover } from 'third-party';
 
-require('./styles.scss');
+import './styles.scss';
 
 const HelpIconPopover = ({ children, id, placement }) => {
   const popover = <Popover id={`popover-${id}`}>{children}</Popover>;

src/components/adslot-ui/HelpIconPopover/index.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
-import Popover from 'react-bootstrap/lib/Popover';
+import { Popover } from 'third-party';
 import HelpIconPopover from 'adslot-ui/HelpIconPopover';
 
 describe('HelpIconPopoverComponent', () => {

src/components/adslot-ui/HoverDropdownMenu/index.jsx

@@ -1,7 +1,8 @@
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Overlay, Popover } from 'react-bootstrap';
+import { Overlay } from 'react-bootstrap';
+import { Popover } from 'third-party';
 import PopoverLinkItem from './PopoverLinkItem';
 import './styles.scss';
 

src/components/adslot-ui/TextEllipsis/index.jsx

@@ -1,7 +1,8 @@
 import _ from 'lodash';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { OverlayTrigger, Popover } from 'react-bootstrap';
+import { OverlayTrigger } from 'react-bootstrap';
+import { Popover } from 'third-party';
 
 require('./styles.scss');
 

src/components/third-party/bootstrap/Button/index.jsx → src/components/third-party/Button/index.jsx

@@ -4,8 +4,8 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Popover } from 'third-party';
 import BootstrapButton from 'react-bootstrap/lib/Button';
-import BootstrapPopover from 'react-bootstrap/lib/Popover';
 import BootstrapOverlay from 'react-bootstrap/lib/Overlay';
 import Spinner from 'alexandria/Spinner';
 import { expandDts } from 'lib/utils';
@@ -47,9 +47,9 @@ class Button extends React.PureComponent {
   renderReason() {
     return (
       <BootstrapOverlay placement="bottom" show={this.state.show} target={this.buttonRef.current}>
-        <BootstrapPopover id="btn-reason" className="btn-popover-reason">
+        <Popover id="btn-reason" className="btn-popover-reason">
           {this.props.reason}
-        </BootstrapPopover>
+        </Popover>
       </BootstrapOverlay>
     );
   }

src/components/third-party/bootstrap/Button/index.spec.jsx → src/components/third-party/Button/index.spec.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Overlay from 'react-bootstrap/lib/Overlay';
-import BootstrapPopover from 'react-bootstrap/lib/Popover';
 import BootstrapButton from 'react-bootstrap/lib/Button';
-import { Button } from 'third-party';
+import { Button, Popover } from 'third-party';
 import Spinner from 'alexandria/Spinner';
 
 describe('ButtonComponent', () => {
@@ -73,7 +72,7 @@ describe('ButtonComponent', () => {
     button.simulate('mouseOver');
     expect(wrapper.find(Overlay).prop('show')).to.eql(true);
     wrapper.update();
-    expect(wrapper.find(BootstrapPopover).prop('children')).to.eql('Because');
+    expect(wrapper.find(Popover).prop('children')).to.eql('Because');
     button.simulate('mouseOut');
     expect(wrapper.find(Overlay).prop('show')).to.eql(false);
   });