From 12295fb6b33eef68a0ce75265b9f9a8d3f03163c Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Mon, 22 Jan 2024 09:15:40 -0800 Subject: [PATCH] [Storybook] Add playground stories for components beginning with the letter B (#7459) --- src/components/badge/badge.stories.tsx | 33 +++++++++++++ .../badge/badge_group/badge_group.stories.tsx | 37 +++++++++++++++ .../badge/beta_badge/beta_badge.stories.tsx | 36 +++++++++++++++ .../badge_notification.stories.tsx | 33 +++++++++++++ src/components/beacon/beacon.stories.tsx | 26 +++++++++++ .../bottom_bar/bottom_bar.stories.tsx | 38 +++++++++++++++ src/components/bottom_bar/bottom_bar.tsx | 4 +- .../breadcrumbs/breadcrumbs.stories.tsx | 46 +++++++++++++++++++ src/components/button/button.stories.tsx | 46 +++++++++++++++++++ src/components/button/button.tsx | 14 +++--- .../button/button_display/_button_display.tsx | 1 + .../button_empty/button_empty.stories.tsx | 7 ++- .../button/button_empty/button_empty.tsx | 4 +- .../button/button_group/button_group.tsx | 9 +++- .../button/button_icon/button_icon.tsx | 4 +- 15 files changed, 323 insertions(+), 15 deletions(-) create mode 100644 src/components/badge/badge.stories.tsx create mode 100644 src/components/badge/badge_group/badge_group.stories.tsx create mode 100644 src/components/badge/beta_badge/beta_badge.stories.tsx create mode 100644 src/components/badge/notification_badge/badge_notification.stories.tsx create mode 100644 src/components/beacon/beacon.stories.tsx create mode 100644 src/components/bottom_bar/bottom_bar.stories.tsx create mode 100644 src/components/breadcrumbs/breadcrumbs.stories.tsx create mode 100644 src/components/button/button.stories.tsx diff --git a/src/components/badge/badge.stories.tsx b/src/components/badge/badge.stories.tsx new file mode 100644 index 00000000000..b031b0c09e4 --- /dev/null +++ b/src/components/badge/badge.stories.tsx @@ -0,0 +1,33 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react'; + +import { EuiBadge, EuiBadgeProps } from './badge'; + +const meta: Meta = { + title: 'EuiBadge', + component: EuiBadge, + argTypes: { + iconType: { control: 'text' }, + }, + args: { + // Component defaults + iconSide: 'left', + isDisabled: false, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: 'Badge text', + }, +}; diff --git a/src/components/badge/badge_group/badge_group.stories.tsx b/src/components/badge/badge_group/badge_group.stories.tsx new file mode 100644 index 00000000000..99d40b1d106 --- /dev/null +++ b/src/components/badge/badge_group/badge_group.stories.tsx @@ -0,0 +1,37 @@ +/* + * 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 { EuiBadge } from '../badge'; +import { EuiBadgeGroup, EuiBadgeGroupProps } from './badge_group'; + +const meta: Meta = { + title: 'EuiBadgeGroup', + component: EuiBadgeGroup, + args: { + // Component defaults + gutterSize: 'xs', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: ( + <> + Badge + Badge + Badge + + ), + }, +}; diff --git a/src/components/badge/beta_badge/beta_badge.stories.tsx b/src/components/badge/beta_badge/beta_badge.stories.tsx new file mode 100644 index 00000000000..3298df62165 --- /dev/null +++ b/src/components/badge/beta_badge/beta_badge.stories.tsx @@ -0,0 +1,36 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react'; + +import { EuiBetaBadge, EuiBetaBadgeProps } from './beta_badge'; + +const meta: Meta = { + title: 'EuiBetaBadge', + component: EuiBetaBadge, + argTypes: { + iconType: { control: 'text' }, + tooltipContent: { control: 'text' }, + }, + args: { + // Component defaults + color: 'hollow', + size: 'm', + alignment: 'baseline', + tooltipPosition: 'top', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + label: 'Beta', + }, +}; diff --git a/src/components/badge/notification_badge/badge_notification.stories.tsx b/src/components/badge/notification_badge/badge_notification.stories.tsx new file mode 100644 index 00000000000..239df9aebe1 --- /dev/null +++ b/src/components/badge/notification_badge/badge_notification.stories.tsx @@ -0,0 +1,33 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react'; + +import { + EuiNotificationBadge, + EuiNotificationBadgeProps, +} from './badge_notification'; + +const meta: Meta = { + title: 'EuiNotificationBadge', + component: EuiNotificationBadge, + args: { + // Component defaults + color: 'accent', + size: 's', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: '5', + }, +}; diff --git a/src/components/beacon/beacon.stories.tsx b/src/components/beacon/beacon.stories.tsx new file mode 100644 index 00000000000..7f587bf1230 --- /dev/null +++ b/src/components/beacon/beacon.stories.tsx @@ -0,0 +1,26 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react'; + +import { EuiBeacon, EuiBeaconProps } from './beacon'; + +const meta: Meta = { + title: 'EuiBeacon', + component: EuiBeacon, + args: { + // Component defaults + color: 'success', + size: 12, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = {}; diff --git a/src/components/bottom_bar/bottom_bar.stories.tsx b/src/components/bottom_bar/bottom_bar.stories.tsx new file mode 100644 index 00000000000..25d86631587 --- /dev/null +++ b/src/components/bottom_bar/bottom_bar.stories.tsx @@ -0,0 +1,38 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react'; + +import { EuiBottomBar, EuiBottomBarProps } from './bottom_bar'; + +const meta: Meta = { + title: 'EuiBottomBar', + component: EuiBottomBar, + argTypes: { + top: { control: 'number' }, + }, + args: { + // Component defaults + bottom: 0, + left: 0, + right: 0, + paddingSize: 'm', + position: 'fixed', + usePortal: true, + affordForDisplacement: true, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: 'Bottom bar content', + }, +}; diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx index 5a3be3656a5..b30d07ba55b 100644 --- a/src/components/bottom_bar/bottom_bar.tsx +++ b/src/components/bottom_bar/bottom_bar.tsx @@ -71,7 +71,9 @@ export type EuiBottomBarProps = CommonProps & */ bodyClassName?: string; /** - * Customize the screen reader heading that helps users find this control. Default is 'Page level controls'. + * Customize the screen reader heading that helps users find this control. + * + * @default Page level controls */ landmarkHeading?: string; /** diff --git a/src/components/breadcrumbs/breadcrumbs.stories.tsx b/src/components/breadcrumbs/breadcrumbs.stories.tsx new file mode 100644 index 00000000000..df822f86782 --- /dev/null +++ b/src/components/breadcrumbs/breadcrumbs.stories.tsx @@ -0,0 +1,46 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react'; + +import { EuiBreadcrumbs, EuiBreadcrumbsProps } from './breadcrumbs'; + +const meta: Meta = { + title: 'EuiBreadcrumbs', + component: EuiBreadcrumbs, + args: { + // Component defaults + type: 'page', + max: 5, + truncate: true, + responsive: { xs: 1, s: 2, m: 4 }, + lastBreadcrumbIsCurrentPage: true, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + breadcrumbs: [ + { + text: 'Breadcrumb 1', + href: '#', + }, + { + text: 'Breadcrumb 2', + href: '#', + }, + { + text: 'Current', + href: '#', + }, + ], + }, +}; diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx new file mode 100644 index 00000000000..409027df8ad --- /dev/null +++ b/src/components/button/button.stories.tsx @@ -0,0 +1,46 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react'; +import { disableStorybookControls } from '../../../.storybook/utils'; + +import { EuiButton, Props as EuiButtonProps } from './button'; + +const meta: Meta = { + title: 'EuiButton', + component: EuiButton, + argTypes: { + iconType: { control: 'text' }, + // TODO: the `minWidth` prop takes many different types (bool, string, number) + // - we should consider adding our own custom control + }, + args: { + // Component defaults + element: 'button', + type: 'button', + color: 'primary', + size: 'm', + fill: false, + iconSize: 'm', + iconSide: 'left', + fullWidth: false, + isDisabled: false, + isLoading: false, + isSelected: false, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + argTypes: disableStorybookControls(['buttonRef']), + args: { + children: 'Button', + }, +}; diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index e850b01b434..63a0ad3a319 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -66,12 +66,14 @@ export type EuiButtonPropsForAnchor = PropsForAnchor< } >; -export type EuiButtonPropsForButton = PropsForButton< - EuiButtonProps, - { - buttonRef?: Ref; - } ->; +// For some reason, Storybook doesn't parse `EuiButtonDisplayCommonProps` unless we include it here +export type EuiButtonPropsForButton = EuiButtonDisplayCommonProps & + PropsForButton< + EuiButtonProps, + { + buttonRef?: Ref; + } + >; export type Props = ExclusiveUnion< EuiButtonPropsForAnchor, diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx index 8fee8d3b81e..c73acb9f5a8 100644 --- a/src/components/button/button_display/_button_display.tsx +++ b/src/components/button/button_display/_button_display.tsx @@ -68,6 +68,7 @@ export interface EuiButtonDisplayCommonProps */ contentProps?: CommonProps & EuiButtonDisplayContentType; style?: CSSProperties; + type?: ButtonHTMLAttributes['type']; } export type EuiButtonDisplayPropsForAnchor = PropsForAnchor< diff --git a/src/components/button/button_empty/button_empty.stories.tsx b/src/components/button/button_empty/button_empty.stories.tsx index ccf9cd2c12a..e34c206a60f 100644 --- a/src/components/button/button_empty/button_empty.stories.tsx +++ b/src/components/button/button_empty/button_empty.stories.tsx @@ -7,21 +7,23 @@ */ import type { Meta, StoryObj } from '@storybook/react'; +import { disableStorybookControls } from '../../../../.storybook/utils'; import { EuiButtonEmpty, EuiButtonEmptyProps } from './button_empty'; const meta: Meta = { title: 'EuiButtonEmpty', - component: EuiButtonEmpty as any, + component: EuiButtonEmpty, argTypes: { flush: { options: [undefined, 'left', 'right', 'both'], - control: 'select', }, iconType: { control: 'text' }, + target: { control: 'text' }, }, args: { // Component defaults + type: 'button', color: 'primary', size: 'm', iconSize: 'm', @@ -36,6 +38,7 @@ export default meta; type Story = StoryObj; export const Playground: Story = { + argTypes: disableStorybookControls(['buttonRef']), args: { children: 'Tertiary action', }, diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx index 12db368b473..acaf74a4ce7 100644 --- a/src/components/button/button_empty/button_empty.tsx +++ b/src/components/button/button_empty/button_empty.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, Ref } from 'react'; +import React, { FunctionComponent, Ref, ButtonHTMLAttributes } from 'react'; import classNames from 'classnames'; import { @@ -69,7 +69,7 @@ export interface CommonEuiButtonEmptyProps href?: string; target?: string; rel?: string; - type?: 'button' | 'submit'; + type?: ButtonHTMLAttributes['type']; buttonRef?: Ref; /** * Object of props passed to the `` wrapping the button's content diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx index 0c9cc5ab908..066dffefc08 100644 --- a/src/components/button/button_group/button_group.tsx +++ b/src/components/button/button_group/button_group.tsx @@ -7,7 +7,12 @@ */ import classNames from 'classnames'; -import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; +import React, { + FunctionComponent, + HTMLAttributes, + ButtonHTMLAttributes, + ReactNode, +} from 'react'; import { useEuiTheme } from '../../../services'; import { EuiScreenReaderOnly } from '../../accessibility'; @@ -40,7 +45,7 @@ export interface EuiButtonGroupOptionProps /** * The type of the underlying HTML button */ - type?: 'button' | 'submit' | 'reset'; + type?: ButtonHTMLAttributes['type']; } export type EuiButtonGroupProps = CommonProps & { diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx index 5995f45dd87..b522ea80394 100644 --- a/src/components/button/button_icon/button_icon.tsx +++ b/src/components/button/button_icon/button_icon.tsx @@ -78,7 +78,7 @@ export interface EuiButtonIconProps extends CommonProps { } export type EuiButtonIconPropsForAnchor = { - type?: string; + type?: AnchorHTMLAttributes['type']; } & PropsForAnchor< EuiButtonIconProps, { @@ -87,7 +87,7 @@ export type EuiButtonIconPropsForAnchor = { >; export type EuiButtonIconPropsForButton = { - type?: 'submit' | 'reset' | 'button'; + type?: ButtonHTMLAttributes['type']; } & PropsForButton< EuiButtonIconProps, {