[Storybook] Add playground stories for components beginning with the …

…letter B (#7459)

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<EuiBadgeProps> = {
+  title: 'EuiBadge',
+  component: EuiBadge,
+  argTypes: {
+    iconType: { control: 'text' },
+  },
+  args: {
+    // Component defaults
+    iconSide: 'left',
+    isDisabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiBadgeProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Badge text',
+  },
+};

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<EuiBadgeGroupProps> = {
+  title: 'EuiBadgeGroup',
+  component: EuiBadgeGroup,
+  args: {
+    // Component defaults
+    gutterSize: 'xs',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiBadgeGroupProps>;
+
+export const Playground: Story = {
+  args: {
+    children: (
+      <>
+        <EuiBadge>Badge</EuiBadge>
+        <EuiBadge>Badge</EuiBadge>
+        <EuiBadge>Badge</EuiBadge>
+      </>
+    ),
+  },
+};

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<EuiBetaBadgeProps> = {
+  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<EuiBetaBadgeProps>;
+
+export const Playground: Story = {
+  args: {
+    label: 'Beta',
+  },
+};

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<EuiNotificationBadgeProps> = {
+  title: 'EuiNotificationBadge',
+  component: EuiNotificationBadge,
+  args: {
+    // Component defaults
+    color: 'accent',
+    size: 's',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiNotificationBadgeProps>;
+
+export const Playground: Story = {
+  args: {
+    children: '5',
+  },
+};

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<EuiBeaconProps> = {
+  title: 'EuiBeacon',
+  component: EuiBeacon,
+  args: {
+    // Component defaults
+    color: 'success',
+    size: 12,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiBeaconProps>;
+
+export const Playground: Story = {};

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<EuiBottomBarProps> = {
+  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<EuiBottomBarProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Bottom bar content',
+  },
+};

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;
     /**

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<EuiBreadcrumbsProps> = {
+  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<EuiBreadcrumbsProps>;
+
+export const Playground: Story = {
+  args: {
+    breadcrumbs: [
+      {
+        text: 'Breadcrumb 1',
+        href: '#',
+      },
+      {
+        text: 'Breadcrumb 2',
+        href: '#',
+      },
+      {
+        text: 'Current',
+        href: '#',
+      },
+    ],
+  },
+};

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<EuiButtonProps> = {
+  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<EuiButtonProps>;
+
+export const Playground: Story = {
+  argTypes: disableStorybookControls(['buttonRef']),
+  args: {
+    children: 'Button',
+  },
+};

src/components/button/button.tsx

@@ -66,12 +66,14 @@ export type EuiButtonPropsForAnchor = PropsForAnchor<
   }
 >;
 
-export type EuiButtonPropsForButton = PropsForButton<
-  EuiButtonProps,
-  {
-    buttonRef?: Ref<HTMLButtonElement>;
-  }
->;
+// For some reason, Storybook doesn't parse `EuiButtonDisplayCommonProps` unless we include it here
+export type EuiButtonPropsForButton = EuiButtonDisplayCommonProps &
+  PropsForButton<
+    EuiButtonProps,
+    {
+      buttonRef?: Ref<HTMLButtonElement>;
+    }
+  >;
 
 export type Props = ExclusiveUnion<
   EuiButtonPropsForAnchor,

src/components/button/button_display/_button_display.tsx

@@ -68,6 +68,7 @@ export interface EuiButtonDisplayCommonProps
    */
   contentProps?: CommonProps & EuiButtonDisplayContentType;
   style?: CSSProperties;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
 }
 
 export type EuiButtonDisplayPropsForAnchor = PropsForAnchor<

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<EuiButtonEmptyProps> = {
   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<EuiButtonEmptyProps>;
 
 export const Playground: Story = {
+  argTypes: disableStorybookControls(['buttonRef']),
   args: {
     children: 'Tertiary action',
   },

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<HTMLButtonElement>['type'];
   buttonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
   /**
    * Object of props passed to the `<span>` wrapping the button's content