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,9 +19,47 @@ const Popover = ({
   CustomBackground,
   popoverRef,
   centerTitle,
+  headerProps = {},
+  contentProps = {},
+  footerProps = {},
 }) => {
   const t = useI18nContext();
   const showHeader = title || onBack || subtitle || onClose;
+  const Header = () => {
+    return (
+      <Box {...headerProps} className="popover-header">
+        <div
+          className={classnames(
+            'popover-header__title',
+            centerTitle ? 'center' : '',
+          )}
+        >
+          <h2 title="popover">
+            {onBack ? (
+              <button
+                className="fas fa-chevron-left popover-header__button"
+                title={t('back')}
+                onClick={onBack}
+              />
+            ) : null}
+            {title}
+          </h2>
+          {onClose ? (
+            <button
+              className="fas fa-times popover-header__button"
+              title={t('close')}
+              data-testid="popover-close"
+              onClick={onClose}
+            />
+          ) : null}
+        </div>
+        {subtitle ? (
+          <p className="popover-header__subtitle">{subtitle}</p>
+        ) : null}
+      </Box>
+    );
+  };
+
   return (
     <div className="popover-container">
       {CustomBackground ? (
@@ -33,47 +72,22 @@ const Popover = ({
         ref={popoverRef}
       >
         {showArrow ? <div className="popover-arrow" /> : null}
-        {showHeader && (
+        {showHeader && <Header />}
-          <header className="popover-header">
-            <div
-              className={classnames(
-                'popover-header__title',
-                centerTitle ? 'center' : '',
-              )}
-            >
-              <h2 title="popover">
-                {onBack ? (
-                  <button
-                    className="fas fa-chevron-left popover-header__button"
-                    title={t('back')}
-                    onClick={onBack}
-                  />
-                ) : null}
-                {title}
-              </h2>
-              {onClose ? (
-                <button
-                  className="fas fa-times popover-header__button"
-                  title={t('close')}
-                  data-testid="popover-close"
-                  onClick={onClose}
-                />
-              ) : null}
-            </div>
-            {subtitle ? (
-              <p className="popover-header__subtitle">{subtitle}</p>
-            ) : null}
-          </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',
+    },
   },
 };