[Storybook] Add playground stories for basic C components (#7460)

.storybook/manager-head.html

@@ -0,0 +1,6 @@
+<style>
+  /* Ensure long code snippets in our props docs don't cause the controls table to stretch */
+  .docblock-argstable code {
+    white-space: pre-wrap !important;
+  }
+</style>

changelogs/upcoming/7460.md

@@ -0,0 +1,3 @@
+**Deprecations**
+
+- Remove unused public `EuiHue` and `EuiSaturation` subcomponent exports. Use the parent `EuiColorPicker` component instead

src/components/call_out/call_out.stories.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { EuiCallOut, EuiCallOutProps } from './call_out';
+
+const meta: Meta<EuiCallOutProps> = {
+  title: 'EuiCallOut',
+  component: EuiCallOut,
+  argTypes: {
+    iconType: { control: 'text' },
+  },
+  args: {
+    // Component defaults
+    color: 'primary',
+    heading: 'p',
+    size: 'm',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiCallOutProps>;
+
+export const Playground: Story = {
+  args: {
+    title: 'Callout title',
+    children: 'Callout text',
+  },
+};

src/components/card/card.stories.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { BACKGROUND_COLORS } from '../../global_styling';
+import { EuiIcon } from '../icon';
+
+import { EuiCard, EuiCardProps } from './card';
+
+const meta: Meta<EuiCardProps> = {
+  title: 'EuiCard',
+  component: EuiCard,
+  argTypes: {
+    display: { options: [undefined, ...BACKGROUND_COLORS] },
+    image: { control: 'text' },
+  },
+  args: {
+    // Component defaults
+    hasBorder: false,
+    paddingSize: 'm',
+    textAlign: 'center',
+    titleElement: 'p',
+    titleSize: 's',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiCardProps>;
+
+export const Playground: Story = {
+  argTypes: {
+    // For quicker/easier testing
+    onClick: { control: 'boolean' },
+    selectable: { control: 'boolean' },
+    icon: { control: 'boolean' },
+  },
+  args: {
+    title: 'Card title',
+    description: 'Card description',
+    footer: '',
+  },
+  render: function Render({
+    icon,
+    selectable,
+    onClick,
+    ...args
+  }: EuiCardProps) {
+    const [isSelected, setIsSelected] = useState(false);
+    const selectableOnClick = () => setIsSelected((isSelected) => !isSelected);
+
+    return (
+      <EuiCard
+        onClick={onClick ? action('onClick') : undefined}
+        icon={icon ? <EuiIcon type="logoElastic" size="xxl" /> : undefined}
+        selectable={
+          selectable ? { onClick: selectableOnClick, isSelected } : undefined
+        }
+        {...args}
+      />
+    );
+  },
+};

src/components/card/checkable_card/checkable_card.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 { EuiCheckableCard, EuiCheckableCardProps } from './checkable_card';
+
+const meta: Meta<EuiCheckableCardProps> = {
+  title: 'EuiCheckableCard',
+  component: EuiCheckableCard,
+  // NOTE: Storybook isn't correctly inheriting certain props due to the exclusive union,
+  // so we have to do some manual polyfilling
+  argTypes: {
+    checkableType: {
+      options: ['radio', 'checkbox'],
+      control: 'radio',
+    },
+    onChange: {
+      action: 'onChange',
+      type: { name: 'function', required: true },
+    },
+  },
+  args: {
+    // Component defaults
+    checkableType: 'radio',
+    checked: false,
+    disabled: false,
+    hasBorder: true,
+    hasShadow: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiCheckableCardProps>;
+
+export const Playground: Story = {
+  args: {
+    id: 'id',
+    label: 'Checkable option',
+  },
+};

src/components/code/code.stories.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 { EuiCode, EuiCodeProps } from './code';
+
+const meta: Meta<EuiCodeProps> = {
+  title: 'EuiCode',
+  component: EuiCode,
+  args: {
+    // Component defaults
+    transparentBackground: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiCodeProps>;
+
+export const Playground: Story = {
+  args: {
+    children: '<!-- Hello world -->',
+  },
+};

src/components/code/code_block.stories.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
+
+const meta: Meta<EuiCodeBlockProps> = {
+  title: 'EuiCodeBlock',
+  component: EuiCodeBlock,
+  argTypes: {
+    lineNumbers: { control: 'boolean' },
+    overflowHeight: { control: 'number' },
+  },
+  args: {
+    // Component defaults
+    fontSize: 's',
+    paddingSize: 'l',
+    whiteSpace: 'pre-wrap',
+    lineNumbers: false,
+    isCopyable: false,
+    isVirtualized: false,
+    transparentBackground: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiCodeBlockProps>;
+
+export const Playground: Story = {
+  args: {
+    children: `<p>
+  <!-- Hello world -->
+</p>`,
+  },
+};

src/components/color_picker/color_palette_display/color_palette_display.stories.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { euiPaletteColorBlind } from '../../../services';
+
+import {
+  EuiColorPaletteDisplay,
+  EuiColorPaletteDisplayProps,
+} from './color_palette_display';
+
+const meta: Meta<EuiColorPaletteDisplayProps> = {
+  title: 'EuiColorPaletteDisplay',
+  component: EuiColorPaletteDisplay,
+  args: {
+    // Component defaults
+    type: 'fixed',
+    size: 's',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiColorPaletteDisplayProps>;
+
+export const Playground: Story = {
+  args: {
+    palette: euiPaletteColorBlind(),
+  },
+};

src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { euiPaletteColorBlind } from '../../../services';
+
+import {
+  EuiColorPalettePicker,
+  EuiColorPalettePickerProps,
+} from './color_palette_picker';
+
+const meta: Meta<EuiColorPalettePickerProps<string>> = {
+  title: 'EuiColorPalettePicker',
+  component: EuiColorPalettePicker,
+  argTypes: {
+    placeholder: { control: 'text' },
+    append: { control: 'text' },
+    prepend: { control: 'text' },
+  },
+  args: {
+    // Component defaults
+    selectionDisplay: 'palette',
+    disabled: false,
+    readOnly: false,
+    fullWidth: false,
+    compressed: false,
+    isLoading: false,
+    isInvalid: false,
+    isOpen: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiColorPalettePickerProps<string>>;
+
+export const Playground: Story = {
+  args: {
+    palettes: [
+      {
+        value: 'palette1',
+        title: 'Palette 1',
+        palette: euiPaletteColorBlind(),
+        type: 'fixed',
+      },
+    ],
+    valueOfSelected: 'palette1',
+  },
+};

src/components/color_picker/color_picker.stories.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 { EuiColorPicker, EuiColorPickerProps } from './color_picker';
+
+const meta: Meta<EuiColorPickerProps> = {
+  title: 'EuiColorPicker',
+  component: EuiColorPicker,
+  argTypes: {
+    color: { control: 'color' },
+    swatches: { control: 'array' }, // TODO: crashes if clicked in Storybook
+    append: { control: 'text' },
+    prepend: { control: 'text' },
+  },
+  args: {
+    // Component defaults
+    showAlpha: false,
+    disabled: false,
+    readOnly: false,
+    fullWidth: false,
+    compressed: false,
+    isClearable: false,
+    isInvalid: false,
+    display: 'default',
+    mode: 'default',
+    secondaryInputDisplay: 'none',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiColorPickerProps>;
+
+export const Playground: Story = {};

src/components/color_picker/color_picker_swatch.stories.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 {
+  EuiColorPickerSwatch,
+  EuiColorPickerSwatchProps,
+} from './color_picker_swatch';
+
+const meta: Meta<EuiColorPickerSwatchProps> = {
+  title: 'EuiColorPickerSwatch',
+  component: EuiColorPickerSwatch,
+};
+
+export default meta;
+type Story = StoryObj<EuiColorPickerSwatchProps>;
+
+export const Playground: Story = {};