Skip to content

Commit

Permalink
EuiPageTemplate cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen committed Apr 7, 2024
1 parent 659e964 commit a3e312d
Showing 1 changed file with 71 additions and 107 deletions.
178 changes: 71 additions & 107 deletions src/components/page_template/page_template.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,64 +13,64 @@ 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 = (
<EuiPageTemplate.EmptyPrompt
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,
Expand All @@ -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',
Expand Down Expand Up @@ -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',
]);

0 comments on commit a3e312d

Please sign in to comment.