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.

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

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

Merged
merged 20 commits into from
Apr 11, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
docs(storybook): add/update stories
- updates PageHeader story

+ adds PageHeaderContent and PageTempalte stories

- adds type for page directions prop to be reused
mgadewoll committed Apr 3, 2024

Verified

This commit was signed with the committer’s verified signature.
gsmet Guillaume Smet
commit 33dac8dc875a6c24358e6abd8f0ebda4202ff5ed
106 changes: 84 additions & 22 deletions src/components/page/page_header/page_header.stories.tsx
Original file line number Diff line number Diff line change
@@ -9,6 +9,10 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import {
hideStorybookControls,
moveStorybookControlsToCategory,
} from '../../../../.storybook/utils';
import { EuiButton } from '../../button';
import { EuiPageHeader, EuiPageHeaderProps } from '../page_header';

@@ -33,9 +37,55 @@ const meta: Meta<EuiPageHeaderProps> = {
},
};

moveStorybookControlsToCategory(
meta,
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
[
'pageTitle',
'pageTitleProps',
'iconType',
'iconProps',
'breadcrumbs',
'breadcrumbProps',
'tabs',
'tabsProps',
'description',
'responsive',
'alignItems',
'rightSideItems',
'rightSideGroupProps',
'children',
],
'EuiPageHeaderContent props'
);

export default meta;
type Story = StoryObj<EuiPageHeaderProps>;

const tabs = [
{
label: 'Tab 1',
isSelected: true,
},
{
label: 'Tab 2',
},
];

const breadcrumbs = [
{
text: 'Breadcrumb 1',
href: '#',
},
{
text: 'Breadcrumb 2',
href: '#',
},
{
text: 'Current',
href: '#',
},
];

export const Playground: Story = {
args: {
pageTitle: 'Page title',
@@ -46,28 +96,40 @@ export const Playground: Story = {
<EuiButton fill>Add something</EuiButton>,
<EuiButton>Do something</EuiButton>,
],
tabs: [
{
label: 'Tab 1',
isSelected: true,
},
{
label: 'Tab 2',
},
],
breadcrumbs: [
{
text: 'Breadcrumb 1',
href: '#',
},
{
text: 'Breadcrumb 2',
href: '#',
},
{
text: 'Current',
href: '#',
},
tabs,
breadcrumbs,
},
};

export const RestrictWidth: Story = {
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
args: {
pageTitle: 'Page title',
iconType: 'logoKibana',
description: 'Example of a description.',
bottomBorder: 'extended',
rightSideItems: [
<EuiButton fill>Add something</EuiButton>,
<EuiButton>Do something</EuiButton>,
],
tabs,
breadcrumbs,
restrictWidth: 500,
},
};
// This story displays the restrictWidth functionality; removing other content props to prevent confusion
hideStorybookControls(RestrictWidth, [
'pageTitle',
'pageTitleProps',
'iconType',
'iconProps',
'breadcrumbs',
'breadcrumbProps',
'tabs',
'tabsProps',
'description',
'responsive',
'alignItems',
'rightSideItems',
'rightSideGroupProps',
'children',
]);
76 changes: 76 additions & 0 deletions src/components/page/page_header/page_header_content.stories.tsx
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import { hideStorybookControls } from '../../../../.storybook/utils';
import { EuiButton } from '../../button';
import {
EuiPageHeaderContent,
EuiPageHeaderContentProps,
} from './page_header_content';

const meta: Meta<EuiPageHeaderContentProps> = {
title: 'Layout/EuiPage/EuiPageHeader/EuiPageHeaderContent',
component: EuiPageHeaderContent,
argTypes: {
alignItems: {
control: 'select',
options: ['center', 'bottom', 'top', 'stretch', undefined],
},
},
args: {
// Component defaults
paddingSize: 'none',
responsive: true,
restrictWidth: false,
alignItems: undefined,
bottomBorder: false,
},
};
hideStorybookControls(meta, ['aria-label']);

export default meta;
type Story = StoryObj<EuiPageHeaderContentProps>;

export const Playground: Story = {
args: {
pageTitle: 'Page title',
iconType: 'logoKibana',
description: 'Example of a description.',
bottomBorder: false,
rightSideItems: [
<EuiButton fill>Add something</EuiButton>,
<EuiButton>Do something</EuiButton>,
],
tabs: [
{
label: 'Tab 1',
isSelected: true,
},
{
label: 'Tab 2',
},
],
breadcrumbs: [
{
text: 'Breadcrumb 1',
href: '#',
},
{
text: 'Breadcrumb 2',
href: '#',
},
{
text: 'Current',
href: '#',
},
],
},
};
5 changes: 4 additions & 1 deletion src/components/page_template/outer/page_outer.tsx
Original file line number Diff line number Diff line change
@@ -12,6 +12,9 @@ import { useEuiTheme, useIsWithinBreakpoints } from '../../../services';
import { _EuiThemeBreakpoint } from '../../../global_styling';
import { euiPageOuterStyles } from './page_outer.styles';

export const PAGE_DIRECTIONS = ['row', 'column'] as const;
type PageDirections = (typeof PAGE_DIRECTIONS)[number];

export interface _EuiPageOuterProps
extends CommonProps,
HTMLAttributes<HTMLDivElement> {
@@ -24,7 +27,7 @@ export interface _EuiPageOuterProps
* Changes the `flex-direction` property.
* Flip to `column` when not including a sidebar.
*/
direction?: 'row' | 'column';
direction?: PageDirections;
/**
* When direction is `row`, it will flip to `column` when within these breakpoints.
*/
136 changes: 136 additions & 0 deletions src/components/page_template/page_template.stories.tsx
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import {
hideStorybookControls,
moveStorybookControlsToCategory,
} from '../../../.storybook/utils';
import { PAGE_DIRECTIONS } from './outer/page_outer';
import { EuiPageTemplate, EuiPageTemplateProps } from './page_template';
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
import { EuiButton } from '../button';
import { EuiText } from '../text';

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',
},
]}
/>
);
const sectionContent = (
<EuiPageTemplate.Section>Section content</EuiPageTemplate.Section>
);
const sidebarContent = (
<EuiPageTemplate.Sidebar>Sidebar content</EuiPageTemplate.Sidebar>
);
const bottomBarContent = (
<EuiPageTemplate.BottomBar paddingSize="s">
BottomBar content
</EuiPageTemplate.BottomBar>
);
const emptyPromptContent = (
<EuiPageTemplate.EmptyPrompt
title={<span>Empty prompt!</span>}
footer={<EuiButton>Button</EuiButton>}
>
EmptyPromp content
</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
argTypes: {
bottomBorder: {
control: 'radio',
options: [undefined, true, false, 'extended'],
},
panelled: { control: 'radio', options: [undefined, true, false] },
direction: {
control: 'radio',
options: [undefined, ...PAGE_DIRECTIONS],
},
component: { control: 'text' },
contentBorder: { control: 'radio', options: [undefined, true, false] },
children: {
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
control: 'select',
options: [
'Combo',
'Header',
'Section',
'Sidebar',
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
'BottomBar',
'EmptyPrompt',
],
mapping: {
Combo: comboContent,
Header: headerContent,
Section: sectionContent,
Sidebar: sidebarContent,
BottomBar: bottomBarContent,
EmptyPrompt: emptyPromptContent,
},
},
},
args: {
minHeight: '460px',
responsive: ['xs', 's'],
paddingSize: 'l',
grow: true,
restrictWidth: true,
component: 'main',
},
};
moveStorybookControlsToCategory(
meta,
['minHeight', 'grow', 'direction', 'responsive'],
'Outer props'
);
moveStorybookControlsToCategory(
meta,
['contentBorder', 'component', 'mainProps'],
'Inner props'
);
hideStorybookControls(meta, ['aria-label']);

export default meta;
type Story = StoryObj<EuiPageTemplateProps>;

export const Playground: Story = {
args: {
children: 'Combo',
},
// using render() over args to ensure dynamic update on prop changes
render: (args) => <EuiPageTemplate {...args}></EuiPageTemplate>,
};