Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 20 commits into from
Apr 11, 2024
Merged

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

Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
14f1299
refactor(storybook): updates utils
mgadewoll Apr 3, 2024
33dac8d
docs(storybook): add/update stories
mgadewoll Apr 3, 2024
f01839e
docs(storybook): adds Pagination stories
mgadewoll Apr 3, 2024
4318eb9
docs(storybook): add EuiPanel stories
mgadewoll Apr 3, 2024
0425b2d
docs(storybook): cleanup and PR feedback
mgadewoll Apr 4, 2024
a741710
refactor(storybook): improve utils
mgadewoll Apr 4, 2024
3c8c5d6
docs: fix typo
mgadewoll Apr 4, 2024
8b704cf
refactor(storybook): update enableFunctionToggleControls default prop…
mgadewoll Apr 5, 2024
e6f5275
docs(storybook) PR feedback
mgadewoll Apr 5, 2024
659e964
docs(storybook) use fullscreen layout for EuiPageTemplate stories
mgadewoll Apr 5, 2024
a3e312d
EuiPageTemplate cleanup
cee-chen Apr 7, 2024
01892f4
Merge branch 'main' into storybook/7481-stories-p
mgadewoll Apr 9, 2024
256c55c
docs(storybook): PR feedback
mgadewoll Apr 10, 2024
16e3294
Fix child props not correctly updating from `TemplateContext`
cee-chen Apr 10, 2024
23bce58
More memoization & syntax cleanup
cee-chen Apr 10, 2024
f7d61ce
Refacator `EuiPageTemplate.Sidebar` to use context instead of `react.…
cee-chen Apr 10, 2024
58cc0c4
More memoization - children iteration
cee-chen Apr 10, 2024
315abfe
Fix ternary shenanigans :facepalm:
cee-chen Apr 10, 2024
ecb2221
changelog
cee-chen Apr 11, 2024
3069f38
Merge branch 'main' into storybook/7481-stories-p
mgadewoll Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 71 additions & 107 deletions src/components/page_template/page_template.stories.tsx
View file
Open in desktop
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
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
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
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,
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
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,
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
],
},
},
},
// 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',
]);
Loading