@transferwise/components 0.0.0-experimental-15273df → 0.0.0-experimental-d6d5b6e

package/src/Sticky/_stories/Sticky.test.story.tsx

@@ -1,177 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Card, Home, Payments, Recipients } from '@transferwise/icons';
-import type { CSSProperties } from 'react';
-import { useState } from 'react';
-import { expect, userEvent, within } from 'storybook/test';
-
-import { withVariantConfig } from '../../../.storybook/helpers';
-import Button from '../../Button';
-import { wait } from '../../test-utils/wait';
-import Sticky from '../Sticky';
-
-const SAFE_AREA_INSET = 64;
-const DEMO_HEIGHT = 400;
-const DEMO_WIDTH = 390;
-const SAFE_AREA_VIEWPORT = 'safe-area-demo';
-
-type SafeAreaDemoStyle = CSSProperties & {
-  '--np-sticky-safe-area-inset-bottom': string;
-};
-
-const safeAreaDemoStyle: SafeAreaDemoStyle = {
-  '--np-sticky-safe-area-inset-bottom': `${SAFE_AREA_INSET}px`,
-  background: 'var(--color-background-screen)',
-  height: DEMO_HEIGHT,
-  overflow: 'hidden',
-};
-
-const navigationItems = [
-  { Icon: Home, label: 'Home' },
-  { Icon: Card, label: 'Card' },
-  { Icon: Recipients, label: 'Recipients' },
-  { Icon: Payments, label: 'Payments' },
-] as const;
-
-function SafeAreaBottomBar() {
-  return (
-    <nav
-      aria-label="Safe area bottom bar"
-      data-testid="safe-area-bottom-bar"
-      style={{
-        alignItems: 'center',
-        background: 'var(--color-background-elevated)',
-        borderTop: '1px solid var(--color-border-neutral)',
-        bottom: 0,
-        display: 'flex',
-        height: SAFE_AREA_INSET,
-        justifyContent: 'space-around',
-        left: 0,
-        padding: '0 8px',
-        position: 'fixed',
-        right: 0,
-        zIndex: 1031,
-      }}
-    >
-      {navigationItems.map(({ Icon, label }) => (
-        <span
-          key={label}
-          style={{
-            alignItems: 'center',
-            color: 'var(--color-content-primary)',
-            display: 'flex',
-            flexDirection: 'column',
-            fontSize: 11,
-            gap: 2,
-          }}
-        >
-          <Icon size={24} />
-          {label}
-        </span>
-      ))}
-    </nav>
-  );
-}
-
-function SafeAreaDemo() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <main style={safeAreaDemoStyle}>
-      <section style={{ maxWidth: 520, padding: 32 }}>
-        <h1 style={{ fontSize: 32, lineHeight: 1.15, margin: '0 0 16px' }}>
-          Sticky respects safe area at bottom of screen
-        </h1>
-        <Button v2 onClick={() => setOpen((currentOpen) => !currentOpen)}>
-          {open ? 'Hide Sticky' : 'Show Sticky'}
-        </Button>
-      </section>
-
-      <SafeAreaBottomBar />
-
-      <Sticky open={open} position="bottom" testId="safe-area-sticky">
-        <div className="p-a-2" data-testid="sticky-content">
-          Sticky
-        </div>
-      </Sticky>
-    </main>
-  );
-}
-
-const meta = {
-  component: Sticky,
-  parameters: {
-    controls: { disable: true },
-    layout: 'fullscreen',
-  },
-  tags: ['!autodocs', '!manifest'],
-  title: 'Dialogs/Sticky/Tests',
-} satisfies Meta<typeof Sticky>;
-
-export default meta;
-
-type Story = StoryObj<typeof Sticky>;
-
-const SafeAreaRegression: Story = {
-  parameters: {
-    chromatic: { delay: 500 },
-    viewport: {
-      options: {
-        [SAFE_AREA_VIEWPORT]: {
-          name: 'Safe area demo',
-          styles: { height: `${DEMO_HEIGHT}px`, width: `${DEMO_WIDTH}px` },
-          type: 'mobile',
-        },
-      },
-    },
-  },
-  globals: {
-    viewport: SAFE_AREA_VIEWPORT,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    const expectStickyAboveSafeArea = async () => {
-      await wait(400);
-
-      const sticky = canvas.getByTestId('safe-area-sticky');
-      const stickyContent = canvas.getByTestId('sticky-content');
-      const safeArea = canvas.getByTestId('safe-area-bottom-bar');
-
-      await expect(sticky).toBeVisible();
-      await expect(window.getComputedStyle(sticky).paddingBottom).toBe(`${SAFE_AREA_INSET}px`);
-      await expect(Math.round(stickyContent.getBoundingClientRect().bottom)).toBe(
-        Math.round(safeArea.getBoundingClientRect().top),
-      );
-      await expect(stickyContent.getBoundingClientRect().bottom).toBeLessThanOrEqual(
-        safeArea.getBoundingClientRect().top,
-      );
-    };
-
-    await step('Open Sticky from the top button', async () => {
-      await userEvent.click(canvas.getByRole('button', { name: /^show sticky$/i }));
-    });
-
-    await step('Keep Sticky above the bottom safe area', expectStickyAboveSafeArea);
-
-    await step('Toggle Sticky closed and open again', async () => {
-      const hideStickyButton = canvas.getByRole('button', { name: /^hide sticky$/i });
-
-      await userEvent.click(hideStickyButton);
-      await wait(400);
-      await expect(canvas.queryByTestId('safe-area-sticky')).not.toBeInTheDocument();
-
-      await userEvent.click(canvas.getByRole('button', { name: /^show sticky$/i }));
-      await expectStickyAboveSafeArea();
-    });
-  },
-  render: () => <SafeAreaDemo />,
-};
-
-/**
- * Reproduces the MobileNav replacement from DS-7193 with a fixed bottom safe area.
- * It verifies that Sticky clears the inset.
- */
-export const MobileNavSafeArea: Story = {
-  ...SafeAreaRegression,
-  ...withVariantConfig(['mobile'], SafeAreaRegression),
-};