From 435b0e46a0e8fe55111cd446f4b3b22d68ac46d2 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Mon, 22 Jan 2024 12:29:37 -0800
Subject: [PATCH] [Storybook] Add playground stories for basic C components
 (#7460)

---
 .storybook/manager-head.html                  |  6 ++
 changelogs/upcoming/7460.md                   |  3 +
 src/components/call_out/call_out.stories.tsx  | 35 ++++++++++
 src/components/card/card.stories.tsx          | 70 +++++++++++++++++++
 .../checkable_card/checkable_card.stories.tsx | 46 ++++++++++++
 src/components/code/code.stories.tsx          | 29 ++++++++
 src/components/code/code_block.stories.tsx    | 41 +++++++++++
 .../color_palette_display.stories.tsx         | 35 ++++++++++
 .../color_palette_picker.stories.tsx          | 54 ++++++++++++++
 .../color_picker/color_picker.stories.tsx     | 40 +++++++++++
 .../color_picker_swatch.stories.tsx           | 24 +++++++
 src/components/color_picker/index.ts          |  4 --
 src/components/copy/copy.stories.tsx          | 37 ++++++++++
 13 files changed, 420 insertions(+), 4 deletions(-)
 create mode 100644 .storybook/manager-head.html
 create mode 100644 changelogs/upcoming/7460.md
 create mode 100644 src/components/call_out/call_out.stories.tsx
 create mode 100644 src/components/card/card.stories.tsx
 create mode 100644 src/components/card/checkable_card/checkable_card.stories.tsx
 create mode 100644 src/components/code/code.stories.tsx
 create mode 100644 src/components/code/code_block.stories.tsx
 create mode 100644 src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
 create mode 100644 src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx
 create mode 100644 src/components/color_picker/color_picker.stories.tsx
 create mode 100644 src/components/color_picker/color_picker_swatch.stories.tsx
 create mode 100644 src/components/copy/copy.stories.tsx

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
new file mode 100644
index 00000000000..2ca734b9e0d
--- /dev/null
+++ b/.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>
diff --git a/changelogs/upcoming/7460.md b/changelogs/upcoming/7460.md
new file mode 100644
index 00000000000..7828c9b6dab
--- /dev/null
+++ b/changelogs/upcoming/7460.md
@@ -0,0 +1,3 @@
+**Deprecations**
+
+- Remove unused public `EuiHue` and `EuiSaturation` subcomponent exports. Use the parent `EuiColorPicker` component instead
diff --git a/src/components/call_out/call_out.stories.tsx b/src/components/call_out/call_out.stories.tsx
new file mode 100644
index 00000000000..f21fd4c5178
--- /dev/null
+++ b/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',
+  },
+};
diff --git a/src/components/card/card.stories.tsx b/src/components/card/card.stories.tsx
new file mode 100644
index 00000000000..18f9094ea9c
--- /dev/null
+++ b/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}
+      />
+    );
+  },
+};
diff --git a/src/components/card/checkable_card/checkable_card.stories.tsx b/src/components/card/checkable_card/checkable_card.stories.tsx
new file mode 100644
index 00000000000..67dc686aa7b
--- /dev/null
+++ b/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',
+  },
+};
diff --git a/src/components/code/code.stories.tsx b/src/components/code/code.stories.tsx
new file mode 100644
index 00000000000..c218d8b658e
--- /dev/null
+++ b/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 -->',
+  },
+};
diff --git a/src/components/code/code_block.stories.tsx b/src/components/code/code_block.stories.tsx
new file mode 100644
index 00000000000..0b0b0346053
--- /dev/null
+++ b/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>`,
+  },
+};
diff --git a/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx b/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
new file mode 100644
index 00000000000..00295386b3a
--- /dev/null
+++ b/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(),
+  },
+};
diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx
new file mode 100644
index 00000000000..1b702cb8308
--- /dev/null
+++ b/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',
+  },
+};
diff --git a/src/components/color_picker/color_picker.stories.tsx b/src/components/color_picker/color_picker.stories.tsx
new file mode 100644
index 00000000000..587cd3ef087
--- /dev/null
+++ b/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 = {};
diff --git a/src/components/color_picker/color_picker_swatch.stories.tsx b/src/components/color_picker/color_picker_swatch.stories.tsx
new file mode 100644
index 00000000000..b9983b18e31
--- /dev/null
+++ b/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 = {};
diff --git a/src/components/color_picker/index.ts b/src/components/color_picker/index.ts
index eba48810e49..8390631d48c 100644
--- a/src/components/color_picker/index.ts
+++ b/src/components/color_picker/index.ts
@@ -10,10 +10,6 @@ export type { EuiColorPickerProps } from './color_picker';
 export { EuiColorPicker } from './color_picker';
 export type { EuiColorPickerSwatchProps } from './color_picker_swatch';
 export { EuiColorPickerSwatch } from './color_picker_swatch';
-export type { EuiHueProps } from './hue';
-export { EuiHue } from './hue';
-export type { EuiSaturationProps } from './saturation';
-export { EuiSaturation } from './saturation';
 export type {
   EuiColorPalettePickerProps,
   EuiColorPalettePickerPaletteProps,
diff --git a/src/components/copy/copy.stories.tsx b/src/components/copy/copy.stories.tsx
new file mode 100644
index 00000000000..e3f0217ade7
--- /dev/null
+++ b/src/components/copy/copy.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 { EuiButton } from '../button';
+
+import { EuiCopy, EuiCopyProps } from './copy';
+
+const meta: Meta<EuiCopyProps> = {
+  title: 'EuiCopy',
+  component: EuiCopy,
+  argTypes: {
+    afterMessage: { control: 'text' },
+    beforeMessage: { control: 'text' },
+  },
+  args: {
+    // Component defaults
+    afterMessage: 'Copied',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiCopyProps>;
+
+export const Playground: Story = {
+  args: {
+    textToCopy: 'Hello world',
+    children: (copy) => <EuiButton onClick={copy}>Click to copy</EuiButton>,
+  },
+};