[Storybook] add stories for more components (letters I - L) (#7589)

src/components/i18n/i18n.stories.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiI18n, EuiI18nProps, I18nTokensShape } from './i18n';
+import { EuiCard } from '../card';
+
+type Props = EuiI18nProps<any, any, string[]>;
+
+const meta: Meta<Props> = {
+  title: 'Utilities/EuiI18n',
+  component: EuiI18n,
+};
+
+export default meta;
+type Story = StoryObj<Props>;
+
+export const SingleToken: Story = {
+  argTypes: {
+    default: { control: { type: 'text' } },
+    ...hideStorybookControls(['children', 'tokens', 'defaults']),
+  },
+  args: {
+    token: 'euiI18nBasic.basicexample',
+    default:
+      'This is the English copy that would be replaced by a translation defined by the euiI18nBasic.basicexample token.',
+  },
+};
+
+export const Interpolation: Story = {
+  argTypes: {
+    ...hideStorybookControls(['children', 'tokens', 'defaults']),
+  },
+  args: {
+    token: 'euiI18nInterpolation.clickedCount',
+    default: 'Clicked on button {count} times.',
+    values: { count: 3 },
+  },
+};
+
+export const MultipleTokens: Story = {
+  argTypes: {
+    ...hideStorybookControls(['token', 'default']),
+  },
+  args: {
+    tokens: ['euiI18n.title', 'euiI18n.description'],
+    defaults: ['Card title', 'Card description'],
+  },
+  render: ({ tokens, defaults }: I18nTokensShape<string[]>) => (
+    // eslint-disable-next-line local/i18n
+    <EuiI18n tokens={tokens} defaults={defaults}>
+      {([title, description]: string[]) => (
+        <EuiCard title={title} description={description} />
+      )}
+    </EuiI18n>
+  ),
+};
+
+export const MultipleTokenInterpolation: Story = {
+  argTypes: {
+    ...hideStorybookControls(['token', 'default']),
+  },
+  args: {
+    tokens: ['euiI18nMulti.title', 'euiI18nMulti.description'],
+    defaults: [
+      'How often was the {name} cuddled?',
+      'The {name} was cuddled {count} times.',
+    ],
+    values: { name: 'cat', count: 3 },
+  },
+  render: ({ tokens, defaults, values }: I18nTokensShape<string[]>) => (
+    // eslint-disable-next-line local/i18n
+    <EuiI18n tokens={tokens} defaults={defaults} values={values}>
+      {([title, description]: string[]) => (
+        <EuiCard title={title} description={description} />
+      )}
+    </EuiI18n>
+  ),
+};

src/components/i18n/i18n.tsx

@@ -90,13 +90,19 @@ type ResolvedType<T> = T extends (...args: any[]) => any ? ReturnType<T> : T;
 interface I18nTokenShape<T, DEFAULT extends Renderable<T>> {
   token: string;
   default: DEFAULT;
+  /**
+   * Render function that returns a ReactElement
+   */
   children?: (x: ResolvedType<DEFAULT>) => ReactChild;
   values?: T;
 }
 
-interface I18nTokensShape<T extends any[]> {
+export interface I18nTokensShape<T extends any[]> {
   tokens: string[];
   defaults: T;
+  /**
+   * Render function that returns a ReactElement
+   */
   children: (x: Array<T[number]>) => ReactChild;
   values?: Record<string, ReactChild>;
 }

src/components/i18n/i18n_number.stories.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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, { ReactChild } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiI18nNumber, EuiI18nNumberProps } from './i18n_number';
+import { EuiText } from '../text';
+
+const meta: Meta<EuiI18nNumberProps> = {
+  title: 'Utilities/EuiI18nNumber',
+  component: EuiI18nNumber,
+};
+
+export default meta;
+type Story = StoryObj<EuiI18nNumberProps>;
+
+export const SingleValue: Story = {
+  argTypes: hideStorybookControls(['children', 'values']),
+  args: {
+    value: 99,
+  },
+  render: (args: EuiI18nNumberProps) => (
+    <EuiText>
+      <span>Formatted number:</span> <EuiI18nNumber {...args} />
+    </EuiText>
+  ),
+};
+
+export const MultipleValues: Story = {
+  argTypes: hideStorybookControls(['value']),
+  args: {
+    values: [0, 1, 2],
+    children: (values: ReactChild[]) => (
+      <>
+        {values.map((value) => (
+          <EuiText>
+            <span>Formatted number: {value}</span>
+          </EuiText>
+        ))}
+      </>
+    ),
+  },
+};

src/components/icon/icon.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 { EuiIcon, EuiIconProps } from './icon';
+
+const meta: Meta<EuiIconProps> = {
+  title: 'Display/EuiIcon',
+  component: EuiIcon,
+  argTypes: {
+    color: { control: { type: 'text' } },
+  },
+  // Component defaults
+  args: {
+    type: 'accessibility',
+    size: 'm',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiIconProps>;
+
+export const Playground: Story = {};

src/components/image/image.stories.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 { EuiImage } from './image';
+import { EuiImageProps } from './image_types';
+
+const meta: Meta<EuiImageProps> = {
+  title: 'Display/EuiImage',
+  component: EuiImage,
+  argTypes: {
+    size: { control: { type: 'text' } },
+    caption: { control: { type: 'text' } },
+  },
+  // Component defaults
+  args: {
+    size: 'original',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiImageProps>;
+
+export const Playground: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1650253618249-fb0d32d3865c?w=900&h=400&fit=crop&q=60',
+  },
+};

src/components/inline_edit/inline_edit_text.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 { EuiInlineEditText, EuiInlineEditTextProps } from './inline_edit_text';
+
+const meta: Meta<EuiInlineEditTextProps> = {
+  title: 'Forms/EuiInlineEditText',
+  component: EuiInlineEditText,
+  // Component defaults
+  args: {
+    size: 'm',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiInlineEditTextProps>;
+
+export const Playground: Story = {
+  args: {
+    defaultValue: 'Hello World!',
+    inputAriaLabel: 'Edit text inline',
+  },
+};
+
+export const EditMode: Story = {
+  args: {
+    defaultValue: 'Hello World!',
+    inputAriaLabel: 'Edit text inline',
+    startWithEditOpen: true,
+  },
+};

src/components/inline_edit/inline_edit_title.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 {
+  EuiInlineEditTitle,
+  EuiInlineEditTitleProps,
+} from './inline_edit_title';
+
+const meta: Meta<EuiInlineEditTitleProps> = {
+  title: 'Forms/EuiInlineEditTitle',
+  component: EuiInlineEditTitle,
+  // Component defaults
+  args: {
+    size: 'm',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiInlineEditTitleProps>;
+
+export const Playground: Story = {
+  args: {
+    heading: 'h1',
+    defaultValue: 'Hello World!',
+    inputAriaLabel: 'Edit title inline',
+  },
+};
+
+export const EditMode: Story = {
+  args: {
+    heading: 'h1',
+    defaultValue: 'Hello World!',
+    inputAriaLabel: 'Edit title inline',
+    startWithEditOpen: true,
+  },
+};

src/components/inner_text/inner_text.stories.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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 { EuiInnerText, EuiInnerTextProps } from './inner_text';
+import { EuiSpacer } from '../spacer';
+import { EuiCode } from '../code';
+
+const meta: Meta<EuiInnerTextProps> = {
+  title: 'Utilities/EuiInnerText',
+  component: EuiInnerText,
+};
+
+export default meta;
+type Story = StoryObj<EuiInnerTextProps>;
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      source: { language: 'tsx' },
+    },
+  },
+  argTypes: {
+    children: { control: { type: 'text' } },
+    fallback: { control: { type: 'text' } },
+  },
+  args: {
+    // overwrite the type to allow for an useable playground because
+    // so far storybook can't handle displaying function as control input
+    children: 'Simple text' as unknown as any,
+  },
+  render: ({ children, fallback }) => {
+    const content = children as unknown as string;
+
+    return (
+      <EuiInnerText>
+        {(ref, innerText) => (
+          <>
+            <span ref={ref} title={innerText}>
+              {content || fallback}
+            </span>
+            <EuiSpacer />
+            <p className="eui-displayInlineBlock">
+              <strong>Output:</strong>
+            </p>{' '}
+            <EuiCode>{innerText}</EuiCode>
+          </>
+        )}
+      </EuiInnerText>
+    );
+  },
+};