[Storybook] Add stories for more components (letter P) - Part 1

.storybook/utils.ts

@@ -11,6 +11,7 @@
  */
 
 import type { Args, ArgTypes, Meta, Preview, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
 type StorybookConfig<T> = Meta<T> | StoryObj<T> | Preview;
 
@@ -27,10 +28,12 @@ export const hideStorybookControls = <Props>(
   config: StorybookConfig<Props>,
   propNames: Array<keyof Props>
 ): StorybookConfig<Props> => {
-  const updatedConfig = _updateArgTypes(config, propNames, {
-    key: 'table',
-    value: { disable: true },
-  });
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    {
+      key: 'table',
+      value: { disable: true },
+    },
+  ]);
 
   return updatedConfig;
 };
@@ -49,10 +52,12 @@ export const disableStorybookControls = <Props>(
   config: StorybookConfig<Props>,
   propNames: Array<keyof Props>
 ): StorybookConfig<Props> => {
-  const updatedConfig = _updateArgTypes(config, propNames, {
-    key: 'control',
-    value: false,
-  });
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    {
+      key: 'control',
+      value: false,
+    },
+  ]);
 
   return updatedConfig;
 };
@@ -72,11 +77,44 @@ export const moveStorybookControlsToCategory = <Props>(
   propNames: Array<keyof Props>,
   category = 'Additional'
 ): StorybookConfig<Props> => {
-  const updatedConfig = _updateArgTypes(config, propNames, {
-    key: 'table',
-    value: { category },
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    {
+      key: 'table',
+      value: { category },
+    },
+  ]);
+
+  return updatedConfig;
+};
+
+/**
+ * Configures passed argTypes to be setup as toggle control
+ * which fires a Storybook action when enabled.
+ * Should be used for function props only.
+ *
+ * Can be used for preview (Preview), component (Meta) or story (Story)
+ * context by passing the config object for either. Use after defining
+ * the specific config to be able to pass the config to this util.
+ *
+ * @returns the mutated config
+ */
+export const enableFunctionToggleControls = <Props>(
+  config: StorybookConfig<Props>,
+  propNames: Array<keyof Props>
+) => {
+  const setAction = (propName: string | number) => ({
+    true: action(propName.toString()),
+    false: undefined,
   });
 
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    { key: 'control', value: 'boolean' },
+    {
+      key: 'mapping',
+      value: setAction,
+    },
+  ]);
+
   return updatedConfig;
 };
 
@@ -112,29 +150,43 @@ export const hidePanel = {
 const _updateArgTypes = <Props>(
   config: StorybookConfig<Props>,
   propNames: Array<keyof Props>,
-  {
-    key,
-    value,
-  }: { key: string; value: Record<string, string | boolean> | boolean }
+  controls: Array<{
+    key: string;
+    value:
+      | Record<string, any>
+      | boolean
+      | string
+      | ((propName: any) => Record<string, any>);
+  }>
 ): StorybookConfig<Props> => {
   const currentArgTypes = config.argTypes as Partial<ArgTypes<Props>>;
   const newArgTypes = { ...currentArgTypes };
 
   for (const propName of propNames) {
-    const currentArgTypeValue = newArgTypes?.[propName] ?? ({} as Args);
-    const currentControlValue = currentArgTypeValue.hasOwnProperty(key)
-      ? currentArgTypeValue[key]
-      : ({} as Record<string, any>);
-
-    const newValue =
-      typeof value === 'object' && typeof currentArgTypeValue[key] === 'object'
-        ? { ...currentControlValue, ...value }
-        : value;
-
-    newArgTypes[propName] = {
-      ...currentArgTypeValue,
-      [key]: newValue,
-    };
+    for (const { key, value } of controls) {
+      const currentArgTypeValue = newArgTypes?.[propName] ?? ({} as Args);
+      const currentControlValue = currentArgTypeValue.hasOwnProperty(key)
+        ? currentArgTypeValue[key]
+        : ({} as Record<string, any>);
+
+      let newValue = value;
+
+      if (typeof value === 'function') {
+        newValue = value(propName);
+      }
+
+      if (
+        typeof value === 'object' &&
+        typeof currentArgTypeValue[key] === 'object'
+      ) {
+        newValue = { ...currentControlValue, ...value };
+      }
+
+      newArgTypes[propName] = {
+        ...currentArgTypeValue,
+        [key]: newValue,
+      };
+    }
   }
 
   config.argTypes = newArgTypes;

src/components/page/page_header/page_header.stories.tsx

@@ -9,6 +9,10 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import {
+  hideStorybookControls,
+  moveStorybookControlsToCategory,
+} from '../../../../.storybook/utils';
 import { EuiButton } from '../../button';
 import { EuiPageHeader, EuiPageHeaderProps } from '../page_header';
 
@@ -33,9 +37,55 @@ const meta: Meta<EuiPageHeaderProps> = {
   },
 };
 
+moveStorybookControlsToCategory(
+  meta,
+  [
+    'pageTitle',
+    'pageTitleProps',
+    'iconType',
+    'iconProps',
+    'breadcrumbs',
+    'breadcrumbProps',
+    'tabs',
+    'tabsProps',
+    'description',
+    'responsive',
+    'alignItems',
+    'rightSideItems',
+    'rightSideGroupProps',
+    'children',
+  ],
+  'EuiPageHeaderContent props'
+);
+
 export default meta;
 type Story = StoryObj<EuiPageHeaderProps>;
 
+const tabs = [
+  {
+    label: 'Tab 1',
+    isSelected: true,
+  },
+  {
+    label: 'Tab 2',
+  },
+];
+
+const breadcrumbs = [
+  {
+    text: 'Breadcrumb 1',
+    href: '#',
+  },
+  {
+    text: 'Breadcrumb 2',
+    href: '#',
+  },
+  {
+    text: 'Current',
+    href: '#',
+  },
+];
+
 export const Playground: Story = {
   args: {
     pageTitle: 'Page title',
@@ -46,28 +96,40 @@ export const Playground: Story = {
       <EuiButton fill>Add something</EuiButton>,
       <EuiButton>Do something</EuiButton>,
     ],
-    tabs: [
-      {
-        label: 'Tab 1',
-        isSelected: true,
-      },
-      {
-        label: 'Tab 2',
-      },
-    ],
-    breadcrumbs: [
-      {
-        text: 'Breadcrumb 1',
-        href: '#',
-      },
-      {
-        text: 'Breadcrumb 2',
-        href: '#',
-      },
-      {
-        text: 'Current',
-        href: '#',
-      },
+    tabs,
+    breadcrumbs,
+  },
+};
+
+export const RestrictWidth: Story = {
+  args: {
+    pageTitle: 'Page title',
+    iconType: 'logoKibana',
+    description: 'Example of a description.',
+    bottomBorder: 'extended',
+    rightSideItems: [
+      <EuiButton fill>Add something</EuiButton>,
+      <EuiButton>Do something</EuiButton>,
     ],
+    tabs,
+    breadcrumbs,
+    restrictWidth: 500,
   },
 };
+// This story displays the restrictWidth functionality; removing other content props to prevent confusion
+hideStorybookControls(RestrictWidth, [
+  'pageTitle',
+  'pageTitleProps',
+  'iconType',
+  'iconProps',
+  'breadcrumbs',
+  'breadcrumbProps',
+  'tabs',
+  'tabsProps',
+  'description',
+  'responsive',
+  'alignItems',
+  'rightSideItems',
+  'rightSideGroupProps',
+  'children',
+]);

src/components/page/page_header/page_header_content.stories.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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 { EuiButton } from '../../button';
+import {
+  EuiPageHeaderContent,
+  EuiPageHeaderContentProps,
+} from './page_header_content';
+
+const meta: Meta<EuiPageHeaderContentProps> = {
+  title: 'Layout/EuiPage/EuiPageHeader/EuiPageHeaderContent',
+  component: EuiPageHeaderContent,
+  argTypes: {
+    alignItems: {
+      control: 'select',
+      options: ['center', 'bottom', 'top', 'stretch', undefined],
+    },
+  },
+  args: {
+    // Component defaults
+    paddingSize: 'none',
+    responsive: true,
+    restrictWidth: false,
+    alignItems: undefined,
+    bottomBorder: false,
+  },
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiPageHeaderContentProps>;
+
+export const Playground: Story = {
+  args: {
+    pageTitle: 'Page title',
+    iconType: 'logoKibana',
+    description: 'Example of a description.',
+    bottomBorder: false,
+    rightSideItems: [
+      <EuiButton fill>Add something</EuiButton>,
+      <EuiButton>Do something</EuiButton>,
+    ],
+    tabs: [
+      {
+        label: 'Tab 1',
+        isSelected: true,
+      },
+      {
+        label: 'Tab 2',
+      },
+    ],
+    breadcrumbs: [
+      {
+        text: 'Breadcrumb 1',
+        href: '#',
+      },
+      {
+        text: 'Breadcrumb 2',
+        href: '#',
+      },
+      {
+        text: 'Current',
+        href: '#',
+      },
+    ],
+  },
+};

src/components/page_template/outer/page_outer.tsx

@@ -12,6 +12,9 @@ import { useEuiTheme, useIsWithinBreakpoints } from '../../../services';
 import { _EuiThemeBreakpoint } from '../../../global_styling';
 import { euiPageOuterStyles } from './page_outer.styles';
 
+export const PAGE_DIRECTIONS = ['row', 'column'] as const;
+type PageDirections = (typeof PAGE_DIRECTIONS)[number];
+
 export interface _EuiPageOuterProps
   extends CommonProps,
     HTMLAttributes<HTMLDivElement> {
@@ -24,7 +27,7 @@ export interface _EuiPageOuterProps
    * Changes the `flex-direction` property.
    * Flip to `column` when not including a sidebar.
    */
-  direction?: 'row' | 'column';
+  direction?: PageDirections;
   /**
    * When direction is `row`, it will flip to `column` when within these breakpoints.
    */