[Storybook] Add stories for more components (letters R-S) - Part 1 (e…

…lastic#7687)
mgadewoll · May 3, 2024 · e441fe8 · e441fe8
1 parent 061f3fa
commit e441fe8
Show file tree

Hide file tree

Showing 10 changed files with 672 additions and 4 deletions.
diff --git a/src/components/page_template/page_template.stories.tsx b/src/components/page_template/page_template.stories.tsx
@@ -148,7 +148,4 @@ export const Playground: Story = {
       },
     },
   },
-  // using render() over args to ensure dynamic update on prop changes
-  // Cee TODO: This doesn't appear to work for the `paddingSize` and `bottomBorder` props
-  // render: ({ ...args }) => <EuiPageTemplate {...args} />,
 };
diff --git a/src/components/resizable_container/resizable_container.stories.tsx b/src/components/resizable_container/resizable_container.stories.tsx
@@ -0,0 +1,209 @@
+/*
+ * 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 { faker } from '@faker-js/faker';
+
+import { enableFunctionToggleControls } from '../../../.storybook/utils';
+import { EuiText } from '../text';
+import {
+  EuiResizableContainer,
+  EuiResizableContainerProps,
+} from './resizable_container';
+
+faker.seed(42);
+
+const placeholderText = (
+  <>
+    <p>{faker.lorem.sentences(5)}</p>
+    <p>{faker.lorem.sentences(5)}</p>
+    <p>{faker.lorem.sentences(5)}</p>
+  </>
+);
+
+const TwoColumns: EuiResizableContainerProps['children'] = (
+  EuiResizablePanel,
+  EuiResizableButton
+) => (
+  <>
+    <EuiResizablePanel initialSize={50} tabIndex={0}>
+      <EuiText>{placeholderText}</EuiText>
+    </EuiResizablePanel>
+
+    <EuiResizableButton />
+
+    <EuiResizablePanel initialSize={50} tabIndex={0}>
+      <EuiText>{placeholderText}</EuiText>
+    </EuiResizablePanel>
+  </>
+);
+
+const ThreeColumns: EuiResizableContainerProps['children'] = (
+  EuiResizablePanel,
+  EuiResizableButton
+) => (
+  <>
+    <EuiResizablePanel initialSize={40} tabIndex={0}>
+      <EuiText>{placeholderText}</EuiText>
+    </EuiResizablePanel>
+
+    <EuiResizableButton />
+
+    <EuiResizablePanel initialSize={40} tabIndex={0}>
+      <EuiText>{placeholderText}</EuiText>
+    </EuiResizablePanel>
+
+    <EuiResizableButton />
+
+    <EuiResizablePanel initialSize={20} tabIndex={0}>
+      <EuiText>{placeholderText}</EuiText>
+    </EuiResizablePanel>
+  </>
+);
+
+const WithMinSize: EuiResizableContainerProps['children'] = (
+  EuiResizablePanel,
+  EuiResizableButton
+) => (
+  <>
+    <EuiResizablePanel initialSize={50} minSize="200px" tabIndex={0}>
+      <EuiText>
+        {placeholderText}
+        {placeholderText}
+        {placeholderText}
+      </EuiText>
+    </EuiResizablePanel>
+
+    <EuiResizableButton alignIndicator="center" />
+
+    <EuiResizablePanel initialSize={50} minSize="200px" tabIndex={0}>
+      <EuiText>
+        {placeholderText}
+        {placeholderText}
+        {placeholderText}
+      </EuiText>
+    </EuiResizablePanel>
+  </>
+);
+
+const SingleCollapsible: EuiResizableContainerProps['children'] = (
+  EuiResizablePanel,
+  EuiResizableButton
+) => (
+  <>
+    <EuiResizablePanel mode="collapsible" initialSize={30}>
+      <EuiText>
+        {placeholderText}
+        {placeholderText}
+        {placeholderText}
+      </EuiText>
+    </EuiResizablePanel>
+
+    <EuiResizableButton alignIndicator="center" />
+
+    <EuiResizablePanel initialSize={70} mode="main">
+      <EuiText>
+        {placeholderText}
+        {placeholderText}
+        {placeholderText}
+      </EuiText>
+    </EuiResizablePanel>
+  </>
+);
+
+const MultiCollapsible: EuiResizableContainerProps['children'] = (
+  EuiResizablePanel,
+  EuiResizableButton
+) => (
+  <>
+    <EuiResizablePanel initialSize={20} mode="collapsible">
+      <EuiText>
+        {placeholderText}
+        {placeholderText}
+        {placeholderText}
+      </EuiText>
+    </EuiResizablePanel>
+
+    <EuiResizableButton />
+
+    <EuiResizablePanel initialSize={60} mode="main">
+      <EuiText>
+        {placeholderText}
+        {placeholderText}
+        {placeholderText}
+      </EuiText>
+    </EuiResizablePanel>
+
+    <EuiResizableButton />
+
+    <EuiResizablePanel initialSize={20} mode="collapsible">
+      <EuiText>
+        {placeholderText}
+        {placeholderText}
+        {placeholderText}
+      </EuiText>
+    </EuiResizablePanel>
+  </>
+);
+
+const meta: Meta<EuiResizableContainerProps> = {
+  title: 'Layout/EuiResizableContainer/EuiResizableContainer',
+  component: EuiResizableContainer,
+  args: {
+    direction: 'horizontal',
+  },
+};
+enableFunctionToggleControls(meta, [
+  'onPanelWidthChange',
+  'onToggleCollapsed',
+  'onResizeStart',
+  'onResizeEnd',
+]);
+
+export default meta;
+type Story = StoryObj<EuiResizableContainerProps>;
+
+export const Playground: Story = {
+  argTypes: {
+    children: {
+      control: 'select',
+      options: ['2 columns', '3 columns', 'With MinSize'],
+      description:
+        'Select an option to show examples using EuiResizablePanel and EuiResizableButton',
+      mapping: {
+        '2 columns': TwoColumns,
+        '3 columns': ThreeColumns,
+        'With MinSize': WithMinSize,
+      },
+    },
+  },
+  args: {
+    children: '2 columns' as unknown as any, // overwriting expected type to use children select control instead of function
+    style: { height: '50vh' },
+  },
+};
+
+export const CollapsiblePanels: Story = {
+  argTypes: {
+    children: {
+      control: 'radio',
+      options: ['Single', 'Multiple'],
+      description:
+        'Select an option to show examples of EuiResizablePanel with mode={"collapsible" | "main"}. Click the resizable button element to collapse a column.',
+      mapping: {
+        Single: SingleCollapsible,
+        Multiple: MultiCollapsible,
+      },
+    },
+  },
+  args: {
+    children: 'Single' as unknown as any,
+    style: { height: '50vh' },
+  },
+};
diff --git a/src/components/resizable_container/resizable_panel.stories.tsx b/src/components/resizable_container/resizable_panel.stories.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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 { css } from '@emotion/react';
+import { faker } from '@faker-js/faker';
+
+import {
+  disableStorybookControls,
+  moveStorybookControlsToCategory,
+} from '../../../.storybook/utils';
+import { EuiResizableContainer } from './resizable_container';
+import { EuiResizablePanel, EuiResizablePanelProps } from './resizable_panel';
+
+faker.seed(42);
+
+const meta: Meta<EuiResizablePanelProps> = {
+  title: 'Layout/EuiResizableContainer/EuiResizablePanel',
+  component: EuiResizablePanel,
+  argTypes: {
+    mode: {
+      control: 'radio',
+      description:
+        'For use with collapsible panels. Will only be applied when used within EuiResizableContainer. View EuiResizableContainer stories for an example.',
+      options: [undefined, 'collapsible', 'main', 'custom'],
+    },
+  },
+  args: {
+    minSize: '0px',
+    scrollable: true,
+    hasShadow: false,
+    borderRadius: 'none',
+    color: 'transparent',
+    paddingSize: 'm',
+    wrapperPadding: 'none',
+    // for quicker/easier QA
+    grow: false,
+    hasBorder: false,
+  },
+};
+disableStorybookControls(meta, ['panelRef']);
+moveStorybookControlsToCategory(
+  meta,
+  [
+    'color',
+    'borderRadius',
+    'grow',
+    'hasBorder',
+    'hasShadow',
+    'paddingSize',
+    'panelRef',
+  ],
+  'EuiPanel props'
+);
+
+export default meta;
+type Story = StoryObj<EuiResizablePanelProps>;
+
+export const Playground: Story = {
+  args: {
+    children: faker.lorem.sentences(5),
+    initialSize: 50,
+  },
+  render: ({ mode, children, ...rest }) => {
+    const placeholderMode =
+      mode === 'collapsible'
+        ? 'main'
+        : mode === 'main'
+        ? 'collapsible'
+        : 'custom';
+    return (
+      <EuiResizableContainer>
+        {(EuiResizablePanel, EuiResizableButton) => (
+          <>
+            <EuiResizablePanel {...rest} mode={mode}>
+              {children}
+            </EuiResizablePanel>
+            <EuiResizableButton />
+            {/* NOTE: using the second panel only to ensure functionality, visually not required  */}
+            <EuiResizablePanel
+              css={css`
+                display: none;
+              `}
+              {...rest}
+              mode={placeholderMode}
+              size={0}
+            >
+              {children}
+            </EuiResizablePanel>
+          </>
+        )}
+      </EuiResizableContainer>
+    );
+  },
+};
diff --git a/src/components/responsive/show_for.stories.tsx b/src/components/responsive/show_for.stories.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { EuiShowFor, EuiShowForProps } from './show_for';
+
+const meta: Meta<EuiShowForProps> = {
+  title: 'Utilities/EuiShowFor',
+  component: EuiShowFor,
+};
+
+export default meta;
+type Story = StoryObj<EuiShowForProps>;
+
+export const Playground: Story = {
+  args: {
+    sizes: ['m', 'l', 'xl'],
+    children:
+      'Try changing the Storybook viewport, or add or remove additional sizes, to see how it affects the visibility of this text.',
+  },
+};