add stories for EuiPortal and EuiProgress

src/components/portal/portal.stories.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 { EuiButton } from '../button';
+import { EuiSpacer } from '../spacer';
+import { EuiPortal, EuiPortalProps } from './portal';
+
+const meta: Meta<EuiPortalProps> = {
+  title: 'Utilities/EuiPortal',
+  component: EuiPortal,
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiPortalProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'This element is appended to the body in the DOM if you inspect',
+  },
+  render: (args) => <StatefulPlayground {...args} />,
+};
+
+const StatefulPlayground = (args: EuiPortalProps) => {
+  const [isActive, setActive] = useState(true);
+
+  return (
+    <>
+      <EuiButton onClick={() => setActive(!isActive)}>Toggle portal</EuiButton>
+      {isActive && (
+        <>
+          <EuiSpacer />
+          <EuiPortal {...args} />
+        </>
+      )}
+    </>
+  );
+};

src/components/progress/progress.stories.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiProgress, COLORS } from './progress';
+
+const meta: Meta<typeof EuiProgress> = {
+  title: 'Display/EuiProgress',
+  component: EuiProgress,
+  argTypes: {
+    color: { control: 'select', options: [...COLORS] },
+    // for quicker/easier QA
+    label: { control: 'text' },
+    value: { control: 'number' },
+    valueText: { control: 'boolean' },
+  },
+  args: {
+    color: 'success',
+    size: 'm',
+    position: 'static',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EuiProgress>;
+
+export const Indeterminate: Story = {};
+hideStorybookControls(Indeterminate, [
+  'max',
+  'value',
+  'valueText',
+  'label',
+  'labelProps',
+]);
+
+export const Determinate: Story = {
+  args: {
+    label: '',
+    value: 70,
+    max: 100,
+  },
+};