From 9d93f98f83ad675ee9ea0c3a5768be9c84e18dd3 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 4 Aug 2023 15:50:32 -0400 Subject: [PATCH 1/6] Create EmptyPrompt playground and import light theme sass file for components still using Sass. --- .storybook/preview.tsx | 3 + .../empty_prompt/empty_prompt.stories.tsx | 56 +++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 src/components/empty_prompt/empty_prompt.stories.tsx diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 23d20226efc..7479540c5ee 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -32,6 +32,9 @@ appendIconComponentCache(iconCache); import { EuiProvider } from '../src/components/provider'; import { writingModeStyles } from './writing_mode.styles'; +// Import light theme for components still using Sass styling +import '../dist/eui_theme_light.css'; + const preview: Preview = { decorators: [ (Story, context) => ( diff --git a/src/components/empty_prompt/empty_prompt.stories.tsx b/src/components/empty_prompt/empty_prompt.stories.tsx new file mode 100644 index 00000000000..7c01d3d90d4 --- /dev/null +++ b/src/components/empty_prompt/empty_prompt.stories.tsx @@ -0,0 +1,56 @@ +/* + * 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 { EuiEmptyPrompt, EuiEmptyPromptProps } from './empty_prompt'; + +import { EuiButton } from '../button'; +import { EuiTitle } from '../title'; +import { EuiLink } from '../link'; + +const meta: Meta = { + title: 'EuiEmptyPrompt', + component: EuiEmptyPrompt, + parameters: { + controls: { + exclude: ['data-test-subj'], + }, + }, + args: {}, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + layout: 'horizontal', + iconType: 'logoSecurity', + hasBorder: false, + hasShadow: false, + title: 'Empty Prompt', + body:

Add a new case or change your filter settings.

, + actions: ( + + Add a case + + ), + footer: ( + <> + +

Want to learn more?

+ + + Read the docs + + + ), + }, +}; From 305201a47e4a9b53975aa41d2c3735ce1e1005f7 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 8 Aug 2023 10:46:06 -0400 Subject: [PATCH 2/6] Added two stories for EuiEmptyPrompt --- .../empty_prompt/empty_prompt.stories.tsx | 72 ++++++++++++++++++- 1 file changed, 69 insertions(+), 3 deletions(-) diff --git a/src/components/empty_prompt/empty_prompt.stories.tsx b/src/components/empty_prompt/empty_prompt.stories.tsx index 7c01d3d90d4..eb1c503dabd 100644 --- a/src/components/empty_prompt/empty_prompt.stories.tsx +++ b/src/components/empty_prompt/empty_prompt.stories.tsx @@ -11,9 +11,12 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiEmptyPrompt, EuiEmptyPromptProps } from './empty_prompt'; -import { EuiButton } from '../button'; +import { EuiButton, EuiButtonEmpty } from '../button'; import { EuiTitle } from '../title'; import { EuiLink } from '../link'; +import { EuiImage } from '../image'; +import { EuiPageTemplate } from '../page_template'; +import illustration from '../../../src-docs/src/images/empty-prompt/illustration.svg'; const meta: Meta = { title: 'EuiEmptyPrompt', @@ -23,7 +26,6 @@ const meta: Meta = { exclude: ['data-test-subj'], }, }, - args: {}, }; export default meta; @@ -31,11 +33,11 @@ type Story = StoryObj; export const Playground: Story = { args: { + title:

Start adding cases

, layout: 'horizontal', iconType: 'logoSecurity', hasBorder: false, hasShadow: false, - title: 'Empty Prompt', body:

Add a new case or change your filter settings.

, actions: ( @@ -54,3 +56,67 @@ export const Playground: Story = { ), }, }; + +export const MultipleActions: Story = { + render: ({ ...args }) => ( + Upgrade your license to use Machine Learning} + actions={[ + + Upgrade + , + Start a trial, + ]} + {...args} + /> + ), + args: { + title:

Upgrade your license to use Machine Learning

, + actions: [ + + Upgrade + , + Start a trial, + ], + }, +}; + +export const PageTemplate: Story = { + render: ({ ...args }) => ( + + + + ), + args: { + title:

Create your first visualization

, + icon: , + color: 'plain', + layout: 'horizontal', + body: ( + <> +

+ There are no visualizations to display. This tool allows you to create + a wide range of charts, graphs, maps, and other graphics. +

+

+ The visualizations you create can be easily shared with your peers. +

+ + ), + actions: ( + + Create visualization + + ), + footer: ( + <> + + Want to learn more? + {' '} + + Read the docs + + + ), + }, +}; From ca7719b50d5802fc9eafb8a3336dceb007ef83e0 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Wed, 9 Aug 2023 16:05:06 -0400 Subject: [PATCH 3/6] [PR Feedback] - DRY our component defaults and spread them to component stories - Remove Multiple Actions story in favor of displaying this in the Playground --- .storybook/preview.tsx | 1 + .../empty_prompt/empty_prompt.stories.tsx | 67 ++++++------------- 2 files changed, 22 insertions(+), 46 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 7479540c5ee..8a4a103c979 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -33,6 +33,7 @@ import { EuiProvider } from '../src/components/provider'; import { writingModeStyles } from './writing_mode.styles'; // Import light theme for components still using Sass styling +// TODO: Remove once all EUI components are converted to Emotion import '../dist/eui_theme_light.css'; const preview: Preview = { diff --git a/src/components/empty_prompt/empty_prompt.stories.tsx b/src/components/empty_prompt/empty_prompt.stories.tsx index eb1c503dabd..026b2ef6e62 100644 --- a/src/components/empty_prompt/empty_prompt.stories.tsx +++ b/src/components/empty_prompt/empty_prompt.stories.tsx @@ -21,9 +21,10 @@ import illustration from '../../../src-docs/src/images/empty-prompt/illustration const meta: Meta = { title: 'EuiEmptyPrompt', component: EuiEmptyPrompt, - parameters: { - controls: { - exclude: ['data-test-subj'], + argTypes: { + element: { control: 'text' }, + body: { + control: 'text', }, }, }; @@ -31,19 +32,26 @@ const meta: Meta = { export default meta; type Story = StoryObj; +const componentDefaults: EuiEmptyPromptProps = { + titleSize: 'm', + paddingSize: 'l', + color: 'plain', + layout: 'vertical', +}; + export const Playground: Story = { args: { title:

Start adding cases

, - layout: 'horizontal', iconType: 'logoSecurity', hasBorder: false, hasShadow: false, - body:

Add a new case or change your filter settings.

, - actions: ( + body: 'Add a new case or change your filter settings.', // Should be wrapped in a `

` in production usage, but using a string makes this easier to edit in Storybook controls + actions: [ - Add a case - - ), + Upgrade + , + Start a trial, + ], footer: ( <> @@ -54,30 +62,7 @@ export const Playground: Story = { ), - }, -}; - -export const MultipleActions: Story = { - render: ({ ...args }) => ( - Upgrade your license to use Machine Learning} - actions={[ - - Upgrade - , - Start a trial, - ]} - {...args} - /> - ), - args: { - title:

Upgrade your license to use Machine Learning

, - actions: [ - - Upgrade - , - Start a trial, - ], + ...componentDefaults, }, }; @@ -90,19 +75,8 @@ export const PageTemplate: Story = { args: { title:

Create your first visualization

, icon: , - color: 'plain', - layout: 'horizontal', - body: ( - <> -

- There are no visualizations to display. This tool allows you to create - a wide range of charts, graphs, maps, and other graphics. -

-

- The visualizations you create can be easily shared with your peers. -

- - ), + // Body should be wrapped in a `

` in production usage, but using a string makes this easier to edit in Storybook controls + body: 'There are no visualizations to display. This tool allows you to create a wide range of charts, graphs, maps, and other graphics. The visualizations you create can be easily shared with your peers.', actions: ( Create visualization @@ -118,5 +92,6 @@ export const PageTemplate: Story = { ), + ...componentDefaults, }, }; From 76dfdf6fc254a04bc358384b6a4311860589de55 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Wed, 9 Aug 2023 18:48:47 -0400 Subject: [PATCH 4/6] [EuiEmptyPrompt] Omit 'element' from EuiEmptyPromptProps as it is not used and does not affect the component. This was realized in the creation of the Storybook documentation for EuiEmptyPropmt --- src/components/empty_prompt/empty_prompt.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx index 455da694045..477f7575f98 100644 --- a/src/components/empty_prompt/empty_prompt.tsx +++ b/src/components/empty_prompt/empty_prompt.tsx @@ -32,7 +32,7 @@ export type PaddingSize = (typeof PADDING_SIZES)[number]; export type EuiEmptyPromptProps = CommonProps & Omit< _EuiPanelDivlike, - 'borderRadius' | 'grow' | 'panelRef' | 'paddingSize' | 'title' + 'borderRadius' | 'grow' | 'panelRef' | 'paddingSize' | 'title' | 'element' > & { /* * Accepts any [EuiIcon.type](#/display/icons) From 924b15b45c2f4bce0f34cc2c44f68957d644dadb Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Wed, 9 Aug 2023 18:57:12 -0400 Subject: [PATCH 5/6] [PR Feedback] Move allow common props to be overriden in stories; remove custom argTypes for the body and element props --- .../empty_prompt/empty_prompt.stories.tsx | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/components/empty_prompt/empty_prompt.stories.tsx b/src/components/empty_prompt/empty_prompt.stories.tsx index 026b2ef6e62..35b7ea192bb 100644 --- a/src/components/empty_prompt/empty_prompt.stories.tsx +++ b/src/components/empty_prompt/empty_prompt.stories.tsx @@ -21,12 +21,6 @@ import illustration from '../../../src-docs/src/images/empty-prompt/illustration const meta: Meta = { title: 'EuiEmptyPrompt', component: EuiEmptyPrompt, - argTypes: { - element: { control: 'text' }, - body: { - control: 'text', - }, - }, }; export default meta; @@ -35,12 +29,13 @@ type Story = StoryObj; const componentDefaults: EuiEmptyPromptProps = { titleSize: 'm', paddingSize: 'l', - color: 'plain', + color: 'plain', // The component default is actually 'transparent', but for the purposes of easier testing in Storybook we'll set it to plain layout: 'vertical', }; export const Playground: Story = { args: { + ...componentDefaults, title:

Start adding cases

, iconType: 'logoSecurity', hasBorder: false, @@ -62,7 +57,6 @@ export const Playground: Story = { ), - ...componentDefaults, }, }; @@ -73,10 +67,21 @@ export const PageTemplate: Story = { ), args: { + ...componentDefaults, title:

Create your first visualization

, + layout: 'horizontal', icon: , - // Body should be wrapped in a `

` in production usage, but using a string makes this easier to edit in Storybook controls - body: 'There are no visualizations to display. This tool allows you to create a wide range of charts, graphs, maps, and other graphics. The visualizations you create can be easily shared with your peers.', + body: ( + <> +

+ There are no visualizations to display. This tool allows you to create + a wide range of charts, graphs, maps, and other graphics. +

+

+ The visualizations you create can be easily shared with your peers. +

+ + ), actions: ( Create visualization @@ -92,6 +97,5 @@ export const PageTemplate: Story = { ), - ...componentDefaults, }, }; From 6bb2098cccc589925b8d44def738f6dcd5cd83c6 Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Thu, 10 Aug 2023 13:38:00 -0400 Subject: [PATCH 6/6] Update src/components/empty_prompt/empty_prompt.stories.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- src/components/empty_prompt/empty_prompt.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/empty_prompt/empty_prompt.stories.tsx b/src/components/empty_prompt/empty_prompt.stories.tsx index 35b7ea192bb..b71e1f06a46 100644 --- a/src/components/empty_prompt/empty_prompt.stories.tsx +++ b/src/components/empty_prompt/empty_prompt.stories.tsx @@ -9,14 +9,14 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { EuiEmptyPrompt, EuiEmptyPromptProps } from './empty_prompt'; - +import illustration from '../../../src-docs/src/images/empty-prompt/illustration.svg'; import { EuiButton, EuiButtonEmpty } from '../button'; import { EuiTitle } from '../title'; import { EuiLink } from '../link'; import { EuiImage } from '../image'; import { EuiPageTemplate } from '../page_template'; -import illustration from '../../../src-docs/src/images/empty-prompt/illustration.svg'; + +import { EuiEmptyPrompt, EuiEmptyPromptProps } from './empty_prompt'; const meta: Meta = { title: 'EuiEmptyPrompt',