From a3e312d8632a5ca1cb6bf278661b59b15e3c0bf8 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Sun, 7 Apr 2024 12:14:25 -0700
Subject: [PATCH] EuiPageTemplate cleanup

---
 .../page_template/page_template.stories.tsx   | 178 +++++++-----------
 1 file changed, 71 insertions(+), 107 deletions(-)

diff --git a/src/components/page_template/page_template.stories.tsx b/src/components/page_template/page_template.stories.tsx
index d864c3ac080..195d3667276 100644
--- a/src/components/page_template/page_template.stories.tsx
+++ b/src/components/page_template/page_template.stories.tsx
@@ -13,37 +13,53 @@ import {
   hideStorybookControls,
   moveStorybookControlsToCategory,
 } from '../../../.storybook/utils';
+import { EuiSkeletonText } from '../skeleton';
 import { EuiButton } from '../button';
 import { EuiText } from '../text';
-import { EuiPageHeaderProps } from '../page/page_header';
-import { EuiPageSectionProps } from '../page/page_section';
+
 import { EuiPageTemplate, EuiPageTemplateProps } from './page_template';
 import { PAGE_DIRECTIONS } from './outer/page_outer';
 
-const headerContent = (props?: EuiPageHeaderProps) => (
+const headerContent = (
   <EuiPageTemplate.Header
     iconType="logoElastic"
     pageTitle="Page title"
     rightSideItems={[<EuiButton>Button</EuiButton>]}
-    description="header description"
-    tabs={[
-      { label: 'Tab 1', isSelected: true },
-      {
-        label: 'Tab 2',
-      },
-    ]}
-    {...props}
+    description={
+      <EuiSkeletonText
+        lines={1}
+        contentAriaLabel="Page header example description"
+      />
+    }
+    tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}
   />
 );
-const sectionContent = (props?: EuiPageSectionProps) => (
-  <EuiPageTemplate.Section {...props}>Section content</EuiPageTemplate.Section>
+const sectionContent = (
+  <>
+    <EuiPageTemplate.Section grow={false}>
+      <EuiText textAlign="center">
+        <strong>
+          Stack EuiPageTemplate sections and headers to create your custom
+          content order.
+        </strong>
+      </EuiText>
+    </EuiPageTemplate.Section>
+    <EuiPageTemplate.Section>
+      <EuiSkeletonText
+        lines={10}
+        contentAriaLabel="Page section example text"
+      />
+    </EuiPageTemplate.Section>
+  </>
 );
-const sidebarContent = (props?: Partial<EuiPageTemplateProps>) => (
-  <EuiPageTemplate.Sidebar {...props}>Sidebar content</EuiPageTemplate.Sidebar>
+const sidebarContent = (
+  <EuiPageTemplate.Sidebar>
+    <EuiSkeletonText lines={10} contentAriaLabel="Page sidebar example text" />
+  </EuiPageTemplate.Sidebar>
 );
 const bottomBarContent = (
   <EuiPageTemplate.BottomBar paddingSize="s">
-    BottomBar content
+    <EuiSkeletonText lines={1} contentAriaLabel="Bottom bar example text" />
   </EuiPageTemplate.BottomBar>
 );
 const emptyPromptContent = (
@@ -51,26 +67,10 @@ const emptyPromptContent = (
     title={<span>Empty prompt!</span>}
     footer={<EuiButton>Button</EuiButton>}
   >
-    EmptyPromp content
+    <EuiSkeletonText lines={3} contentAriaLabel="Empty prompt example text" />
   </EuiPageTemplate.EmptyPrompt>
 );
 
-const comboContent = (
-  <>
-    <EuiPageTemplate.Section grow={false}>
-      <EuiText textAlign="center">
-        <strong>
-          Stack EuiPageTemplate sections and headers to create your custom
-          content order.
-        </strong>
-      </EuiText>
-    </EuiPageTemplate.Section>
-    {headerContent()}
-    {sectionContent()}
-    {bottomBarContent}
-  </>
-);
-
 const meta: Meta<EuiPageTemplateProps> = {
   title: 'Templates/EuiPageTemplate',
   component: EuiPageTemplate,
@@ -89,29 +89,6 @@ const meta: Meta<EuiPageTemplateProps> = {
     },
     component: { control: 'text' },
     contentBorder: { control: 'radio', options: [undefined, true, false] },
-    restrictWidth: {
-      control: 'select',
-      options: [true, false, 500, 900, 1800, '25%', '50%', '75%'],
-    },
-    children: {
-      control: 'select',
-      options: [
-        'Combo',
-        'Header',
-        'Section',
-        'Sidebar',
-        'BottomBar',
-        'EmptyPrompt',
-      ],
-      mapping: {
-        Combo: comboContent,
-        Header: headerContent,
-        Section: sectionContent,
-        Sidebar: sidebarContent,
-        BottomBar: bottomBarContent,
-        EmptyPrompt: emptyPromptContent,
-      },
-    },
   },
   args: {
     minHeight: '460px',
@@ -139,57 +116,44 @@ type Story = StoryObj<EuiPageTemplateProps>;
 
 export const Playground: Story = {
   args: {
-    children: 'Combo',
+    children: 'With everything',
+  },
+  argTypes: {
+    restrictWidth: {
+      control: 'select',
+      options: [true, false, 500, 900, 1800, '25%', '50%', '75%'],
+    },
+    children: {
+      control: 'select',
+      description:
+        'For quicker testing, use the selection control to the right to select several examples of common EuiPageTemplate layouts',
+      options: [
+        'With everything',
+        'Without sidebar',
+        'Without header',
+        'Without bottom bar',
+        'With empty prompt content',
+      ],
+      mapping: {
+        'With everything': [
+          sidebarContent,
+          headerContent,
+          sectionContent,
+          bottomBarContent,
+        ],
+        'Without sidebar': [headerContent, sectionContent, bottomBarContent],
+        'Without header': [sidebarContent, sectionContent, bottomBarContent],
+        'Without bottom bar': [sidebarContent, headerContent, sectionContent],
+        'With empty prompt content': [
+          sidebarContent,
+          headerContent,
+          emptyPromptContent,
+          bottomBarContent,
+        ],
+      },
+    },
   },
   // using render() over args to ensure dynamic update on prop changes
-  render: (args) => <EuiPageTemplate {...args}></EuiPageTemplate>,
-};
-
-export const WithSidebar: Story = {
-  render: (args) => (
-    <EuiPageTemplate {...args}>
-      {sidebarContent(args)}
-      {headerContent(args)}
-      <EuiPageTemplate.Section grow={false} bottomBorder>
-        <EuiText textAlign="center">
-          <strong>
-            Stack EuiPageTemplate sections and headers to create your custom
-            content order.
-          </strong>
-        </EuiText>
-      </EuiPageTemplate.Section>
-      {sectionContent(args)}
-      {bottomBarContent}
-    </EuiPageTemplate>
-  ),
-};
-hideStorybookControls<EuiPageTemplateProps>(WithSidebar, [
-  'children',
-  'direction',
-  'grow',
-  'minHeight',
-  'responsive',
-  'component',
-  'contentBorder',
-  'mainProps',
-]);
-
-export const WithEmptyPrompt: Story = {
-  render: (args) => (
-    <EuiPageTemplate {...args}>
-      {sidebarContent(args)}
-      {headerContent(args)}
-      {emptyPromptContent}
-    </EuiPageTemplate>
-  ),
+  // Cee TODO: This doesn't appear to work for the `paddingSize` and `bottomBorder` props
+  // render: ({ ...args }) => <EuiPageTemplate {...args} />,
 };
-hideStorybookControls<EuiPageTemplateProps>(WithEmptyPrompt, [
-  'children',
-  'direction',
-  'grow',
-  'minHeight',
-  'responsive',
-  'component',
-  'contentBorder',
-  'mainProps',
-]);