From e6f52754edf59827222d23af33ee30315c89df23 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Fri, 5 Apr 2024 09:48:27 +0200 Subject: [PATCH] docs(storybook) PR feedback - updates restrictWidth control to select = adds additional stories for EuiPageTemplate --- .../page/page_header/page_header.stories.tsx | 42 ++--------- .../page_template/page_template.stories.tsx | 74 ++++++++++++++++--- 2 files changed, 70 insertions(+), 46 deletions(-) diff --git a/src/components/page/page_header/page_header.stories.tsx b/src/components/page/page_header/page_header.stories.tsx index 2fd58e1ed35..20dfd51d79d 100644 --- a/src/components/page/page_header/page_header.stories.tsx +++ b/src/components/page/page_header/page_header.stories.tsx @@ -9,10 +9,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { - hideStorybookControls, - moveStorybookControlsToCategory, -} from '../../../../.storybook/utils'; +import { moveStorybookControlsToCategory } from '../../../../.storybook/utils'; import { EuiButton } from '../../button'; import { EuiPageHeader, EuiPageHeaderProps } from '../page_header'; @@ -27,6 +24,10 @@ const meta: Meta = { pageTitleProps: { control: 'object' }, breadcrumbProps: { control: 'object' }, tabsProps: { control: 'object' }, + restrictWidth: { + control: 'select', + options: [true, false, 500, 900, 1800, '25%', '50%', '75%'], + }, }, args: { // Component defaults @@ -100,36 +101,3 @@ export const Playground: Story = { breadcrumbs, }, }; - -export const RestrictWidth: Story = { - args: { - pageTitle: 'Page title', - iconType: 'logoKibana', - description: 'Example of a description.', - bottomBorder: 'extended', - rightSideItems: [ - Add something, - Do something, - ], - 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', -]); diff --git a/src/components/page_template/page_template.stories.tsx b/src/components/page_template/page_template.stories.tsx index 05983cd7725..d96ba6e0c76 100644 --- a/src/components/page_template/page_template.stories.tsx +++ b/src/components/page_template/page_template.stories.tsx @@ -13,12 +13,14 @@ import { hideStorybookControls, moveStorybookControlsToCategory, } from '../../../.storybook/utils'; -import { EuiPageTemplate, EuiPageTemplateProps } from './page_template'; -import { PAGE_DIRECTIONS } from './outer/page_outer'; 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 = ( +const headerContent = (props?: EuiPageHeaderProps) => ( ); -const sectionContent = ( - Section content +const sectionContent = (props?: EuiPageSectionProps) => ( + Section content ); -const sidebarContent = ( - Sidebar content +const sidebarContent = (props?: Partial) => ( + Sidebar content ); const bottomBarContent = ( @@ -62,8 +65,8 @@ const comboContent = ( - {headerContent} - {sectionContent} + {headerContent()} + {sectionContent()} {bottomBarContent} ); @@ -83,6 +86,10 @@ const meta: Meta = { }, 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: [ @@ -134,3 +141,52 @@ export const Playground: Story = { // using render() over args to ensure dynamic update on prop changes render: (args) => , }; + +export const WithSidebar: Story = { + render: (args) => ( + + {sidebarContent(args)} + {headerContent(args)} + + + + Stack EuiPageTemplate sections and headers to create your custom + content order. + + + + {sectionContent(args)} + {bottomBarContent} + + ), +}; +hideStorybookControls(WithSidebar, [ + 'children', + 'direction', + 'grow', + 'minHeight', + 'responsive', + 'component', + 'contentBorder', + 'mainProps', +]); + +export const WithEmptyPrompt: Story = { + render: (args) => ( + + {sidebarContent(args)} + {headerContent(args)} + {emptyPromptContent} + + ), +}; +hideStorybookControls(WithEmptyPrompt, [ + 'children', + 'direction', + 'grow', + 'minHeight', + 'responsive', + 'component', + 'contentBorder', + 'mainProps', +]);