[Storybook] Add stories for more components (letter P) - Part 1

src/components/page_template/page_template.stories.tsx

@@ -53,9 +53,7 @@ const sidebarContent = (
   </EuiPageTemplate.Sidebar>
 );
 const bottomBarContent = (
-  // adding parent="" here to prevent using a portal and to ensure the
-  // last position on changes when the parent does not change
-  <EuiPageTemplate.BottomBar paddingSize="s" parent="">
+  <EuiPageTemplate.BottomBar>
     <EuiSkeletonText lines={1} contentAriaLabel="Bottom bar example text" />
   </EuiPageTemplate.BottomBar>
 );

src/components/page_template/page_template.tsx

@@ -12,6 +12,7 @@ import React, {
   FunctionComponent,
   HTMLAttributes,
   useContext,
+  useMemo,
 } from 'react';
 import classNames from 'classnames';
 
@@ -100,8 +101,6 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
   minHeight = '460px',
   ...rest
 }) => {
-  const templateContext = useContext(TemplateContext);
-
   // Used as a target to insert the bottom bar component
   const pageInnerId = useGeneratedHtmlId({
     prefix: 'EuiPageTemplateInner',
@@ -112,54 +111,19 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
   const sections: React.ReactElement[] = [];
   const sidebar: React.ReactElement[] = [];
 
-  const getBottomBorder = () => {
-    if (bottomBorder !== undefined) {
-      return bottomBorder;
-    } else {
-      return sidebar.length ? true : 'extended';
-    }
-  };
-
-  const getHeaderProps = () => ({
-    restrictWidth,
-    paddingSize,
-    bottomBorder: getBottomBorder(),
-  });
-
-  const getSectionProps = (): EuiPageSectionProps => ({
-    restrictWidth,
-    paddingSize,
-    color: panelled === false ? 'transparent' : 'plain',
-  });
-
-  const getSideBarProps = () => ({
-    paddingSize,
-    responsive,
-  });
-
-  const getBottomBarProps = () => ({
-    restrictWidth,
-    paddingSize,
-    // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
-    parent: `#${pageInnerId.replaceAll(':', '\\:')}`,
-  });
-
-  const innerPanelled = () => panelled ?? Boolean(sidebar.length > 0);
-
-  const innerBordered = () =>
-    contentBorder !== undefined ? contentBorder : Boolean(sidebar.length > 0);
-
   React.Children.toArray(children).forEach((child, index) => {
     if (!React.isValidElement(child)) return; // Skip non-components
 
     if (
       child.type === EuiPageSidebar ||
       child.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ === EuiPageSidebar
     ) {
+      const sidebarProps = { paddingSize, responsive };
+
       sidebar.push(
         React.cloneElement(child, {
           key: `sidebar${index}`,
-          ...getSideBarProps(),
+          ...sidebarProps,
           // Allow their props overridden by appending the child props spread at the end
           ...child.props,
         })
@@ -178,13 +142,42 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
     ...rest.style,
   };
 
-  templateContext.header = getHeaderProps();
-  templateContext.section = getSectionProps();
-  templateContext.emptyPrompt = {
-    panelled: innerPanelled() ? true : panelled,
-    grow: true,
-  };
-  templateContext.bottomBar = getBottomBarProps();
+  const innerPanelled = panelled ?? Boolean(sidebar.length > 0);
+  const innerBordered = contentBorder ?? Boolean(sidebar.length > 0);
+  const headerBottomBorder = bottomBorder ?? sidebar.length ? true : 'extended';
+
+  const templateContext = useMemo(() => {
+    return {
+      header: {
+        restrictWidth,
+        paddingSize,
+        bottomBorder: headerBottomBorder,
+      },
+      section: {
+        restrictWidth,
+        paddingSize,
+        color: panelled === false ? 'transparent' : 'plain',
+        grow: true,
+      },
+      emptyPrompt: {
+        panelled: innerPanelled ? true : panelled,
+        grow: true,
+      },
+      bottomBar: {
+        restrictWidth,
+        paddingSize,
+        // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
+        parent: `#${pageInnerId.replaceAll(':', '\\:')}`,
+      },
+    };
+  }, [
+    pageInnerId,
+    restrictWidth,
+    paddingSize,
+    panelled,
+    innerPanelled,
+    headerBottomBorder,
+  ]);
 
   return (
     <TemplateContext.Provider value={templateContext}>
@@ -200,8 +193,8 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
           {...mainProps}
           component={component}
           id={pageInnerId}
-          border={innerBordered()}
-          panelled={innerPanelled()}
+          border={innerBordered}
+          panelled={innerPanelled}
           responsive={responsive}
         >
           {sections}
@@ -212,23 +205,23 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
 };
 
 const _EuiPageSection: FunctionComponent<EuiPageSectionProps> = (props) => {
-  const templateContext = useContext(TemplateContext);
+  const { section } = useContext(TemplateContext);
 
-  return <EuiPageSection {...templateContext.section} grow {...props} />;
+  return <EuiPageSection {...section} {...props} />;
 };
 
 const _EuiPageHeader: FunctionComponent<EuiPageHeaderProps> = (props) => {
-  const templateContext = useContext(TemplateContext);
+  const { header } = useContext(TemplateContext);
 
-  return <EuiPageHeader {...templateContext.header} {...props} />;
+  return <EuiPageHeader {...header} {...props} />;
 };
 
 const _EuiPageEmptyPrompt: FunctionComponent<_EuiPageEmptyPromptProps> = (
   props
 ) => {
-  const templateContext = useContext(TemplateContext);
+  const { emptyPrompt } = useContext(TemplateContext);
 
-  return <EuiPageEmptyPrompt {...templateContext.emptyPrompt} {...props} />;
+  return <EuiPageEmptyPrompt {...emptyPrompt} {...props} />;
 };
 
 const _EuiPageBottomBar: FunctionComponent<_EuiPageBottomBarProps> = (