Add custom CSS to Popover (#13740)

* add boxes to popover sections for custom css

* updated doc strings

* added default props

* render Boxes only if the props are not empty

* possible fix

* second fix

* removed prop check function, converted header, footer and div elements to Box components and updated storybook and readme.mdx

* remove non existing prop

* fixed export issue

* updated storybook

ui/components/ui/popover/README.mdx

@@ -1,16 +0,0 @@
-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

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import Box from '../box';
 
 const Popover = ({
   title,
@@ -18,23 +19,15 @@ const Popover = ({
   CustomBackground,
   popoverRef,
   centerTitle,
+  headerProps = {},
+  contentProps = {},
+  footerProps = {},
 }) => {
   const t = useI18nContext();
   const showHeader = title || onBack || subtitle || onClose;
+  const Header = () => {
     return (
-    <div className="popover-container">
+      <Box {...headerProps} className="popover-header">
-      {CustomBackground ? (
-        <CustomBackground onClose={onClose} />
-      ) : (
-        <div className="popover-bg" onClick={onClose} />
-      )}
-      <section
-        className={classnames('popover-wrap', className)}
-        ref={popoverRef}
-      >
-        {showArrow ? <div className="popover-arrow" /> : null}
-        {showHeader && (
-          <header className="popover-header">
         <div
           className={classnames(
             'popover-header__title',
@@ -63,17 +56,38 @@ const Popover = ({
         {subtitle ? (
           <p className="popover-header__subtitle">{subtitle}</p>
         ) : null}
-          </header>
+      </Box>
+    );
+  };
+
+  return (
+    <div className="popover-container">
+      {CustomBackground ? (
+        <CustomBackground onClose={onClose} />
+      ) : (
+        <div className="popover-bg" onClick={onClose} />
       )}
+      <section
+        className={classnames('popover-wrap', className)}
+        ref={popoverRef}
+      >
+        {showArrow ? <div className="popover-arrow" /> : null}
+        {showHeader && <Header />}
         {children ? (
-          <div className={classnames('popover-content', contentClassName)}>
+          <Box
+            className={classnames('popover-content', contentClassName)}
+            {...contentProps}
+          >
             {children}
-          </div>
+          </Box>
         ) : null}
         {footer ? (
-          <footer className={classnames('popover-footer', footerClassName)}>
+          <Box
+            className={classnames('popover-footer', footerClassName)}
+            {...footerProps}
+          >
             {footer}
-          </footer>
+          </Box>
         ) : null}
       </section>
     </div>
@@ -132,6 +146,18 @@ Popover.propTypes = {
    * Check if use centered title
    */
   centerTitle: PropTypes.bool,
+  /**
+   * Box props for the header
+   */
+  headerProps: PropTypes.shape({ ...Box.propTypes }),
+  /**
+   * Box props for the content
+   */
+  contentProps: PropTypes.shape({ ...Box.propTypes }),
+  /**
+   * Box props for the footer
+   */
+  footerProps: PropTypes.shape({ ...Box.propTypes }),
 };
 
 export default class PopoverPortal extends PureComponent {

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

@@ -1,18 +1,12 @@
 import React, { useState } from 'react';
 import Button from '../button';
 import Box from '../box';
-import README from './README.mdx';
 import Popover from './popover.component';
 
 export default {
   title: 'Components/UI/Popover',
   id: __filename,
   component: Popover,
-  parameters: {
-    docs: {
-      page: README,
-    },
-  },
   argTypes: {
     title: { control: 'text' },
     subtitle: { control: 'text' },
@@ -26,6 +20,21 @@ export default {
     showArrow: { control: 'boolean' },
     popoverRef: { control: 'object' },
     centerTitle: { control: 'boolean' },
+    headerProps: {
+      control: 'object',
+      description:
+        'Box component props used to add container CSS for the header',
+    },
+    contentProps: {
+      control: 'object',
+      description:
+        'Box component props used to add container CSS for the content',
+    },
+    footerProps: {
+      control: 'object',
+      description:
+        'Box component props used to add container CSS for the footer',
+    },
   },
 };