@transferwise/components 46.150.0 → 46.151.1

package/src/pocketSurface/PocketSurface.css

@@ -0,0 +1,163 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+.wds-pocket-bright-blue {
+  --color-content-primary: #21231d;
+  --color-content-secondary: #0d0e0c;
+  --color-content-link: #21231d;
+  --color-content-link-hover: #354040;
+  --color-content-link-active: #4c5c5c;
+  --color-interactive-primary: #21231d;
+  --color-interactive-primary-hover: #354040;
+  --color-interactive-primary-active: #4c5c5c;
+  --color-interactive-accent: #21231d;
+  --color-interactive-accent-hover: #354040;
+  --color-interactive-accent-active: #4c5c5c;
+  --color-interactive-control: #a0e1e1;
+  --color-interactive-control-hover: #c5eded;
+  --color-interactive-control-active: #c5eded;
+  --color-background-screen: #a0e1e1;
+}
+
+
+.wds-pocket-bright-orange {
+  --color-content-primary: #260a2f;
+  --color-content-secondary: #110415;
+  --color-content-link: #260a2f;
+  --color-content-link-hover: #360e43;
+  --color-content-link-active: #471358;
+  --color-interactive-primary: #260a2f;
+  --color-interactive-primary-hover: #360e43;
+  --color-interactive-primary-active: #471358;
+  --color-interactive-accent: #260a2f;
+  --color-interactive-accent-hover: #360e43;
+  --color-interactive-accent-active: #471358;
+  --color-interactive-control: #ffc091;
+  --color-interactive-control-hover: #ffcda8;
+  --color-interactive-control-active: #ffdcc2;
+  --color-background-screen: #ffc091;
+}
+
+
+.wds-pocket-bright-pink {
+  --color-content-primary: #320707;
+  --color-content-secondary: #160303;
+  --color-content-link: #320707;
+  --color-content-link-hover: #1f0404;
+  --color-content-link-active: #0d0202;
+  --color-interactive-primary: #320707;
+  --color-interactive-primary-hover: #1f0404;
+  --color-interactive-primary-active: #0d0202;
+  --color-interactive-accent: #320707;
+  --color-interactive-accent-hover: #1f0404;
+  --color-interactive-accent-active: #0d0202;
+  --color-interactive-control: #ffd7ef;
+  --color-interactive-control-hover: #ffbde4;
+  --color-interactive-control-active: #ffbde4;
+  --color-background-screen: #ffd7ef;
+}
+
+
+.wds-pocket-bright-yellow {
+  --color-content-primary: #3a341c;
+  --color-content-secondary: #110f08;
+  --color-content-link: #3a341c;
+  --color-content-link-hover: #1b190d;
+  --color-content-link-active: #0a0a05;
+  --color-interactive-primary: #3a341c;
+  --color-interactive-primary-hover: #1b190d;
+  --color-interactive-primary-active: #0a0a05;
+  --color-interactive-accent: #3a341c;
+  --color-interactive-accent-hover: #1b190d;
+  --color-interactive-accent-active: #0a0a05;
+  --color-interactive-control: #ffeb69;
+  --color-interactive-control-hover: #ffef85;
+  --color-interactive-control-active: #fff29e;
+  --color-background-screen: #ffeb69;
+}
+
+
+.wds-pocket-dark-charcoal {
+  --color-content-primary: #a0e1e1;
+  --color-content-secondary: #ecf9f9;
+  --color-content-link: #a0e1e1;
+  --color-content-link-hover: #77d4d4;
+  --color-content-link-active: #51c8c8;
+  --color-interactive-primary: #a0e1e1;
+  --color-interactive-primary-hover: #77d4d4;
+  --color-interactive-primary-active: #51c8c8;
+  --color-interactive-accent: #a0e1e1;
+  --color-interactive-accent-hover: #77d4d4;
+  --color-interactive-accent-active: #51c8c8;
+  --color-interactive-control: #21231d;
+  --color-interactive-control-hover: #181915;
+  --color-interactive-control-active: #0d0e0c;
+  --color-background-screen: #21231d;
+}
+
+
+.wds-pocket-dark-gold {
+  --color-content-primary: #ffeb69;
+  --color-content-secondary: #fffce5;
+  --color-content-link: #ffeb69;
+  --color-content-link-hover: #ffe538;
+  --color-content-link-active: #ffde05;
+  --color-interactive-primary: #ffeb69;
+  --color-interactive-primary-hover: #ffe538;
+  --color-interactive-primary-active: #ffde05;
+  --color-interactive-accent: #ffeb69;
+  --color-interactive-accent-hover: #ffe538;
+  --color-interactive-accent-active: #ffde05;
+  --color-interactive-control: #3a341c;
+  --color-interactive-control-hover: #292514;
+  --color-interactive-control-active: #18160c;
+  --color-background-screen: #3a341c;
+}
+
+
+.wds-pocket-dark-maroon {
+  --color-content-primary: #ffd7ef;
+  --color-content-secondary: #ffe5f5;
+  --color-content-link: #ffd7ef;
+  --color-content-link-hover: #ffe5f5;
+  --color-content-link-active: #fff5fb;
+  --color-interactive-primary: #ffd7ef;
+  --color-interactive-primary-hover: #ffe5f5;
+  --color-interactive-primary-active: #fff5fb;
+  --color-interactive-accent: #ffd7ef;
+  --color-interactive-accent-hover: #ffe5f5;
+  --color-interactive-accent-active: #fff5fb;
+  --color-interactive-control: #320707;
+  --color-interactive-control-hover: #480a0a;
+  --color-interactive-control-active: #5e0d0d;
+  --color-background-screen: #320707;
+}
+
+
+.wds-pocket-dark-purple {
+  --color-content-primary: #ffc091;
+  --color-content-secondary: #fff0e5;
+  --color-content-link: #ffc091;
+  --color-content-link-hover: #ffdcc2;
+  --color-content-link-active: #fff9f5;
+  --color-interactive-primary: #ffc091;
+  --color-interactive-primary-hover: #ffdcc2;
+  --color-interactive-primary-active: #fff9f5;
+  --color-interactive-accent: #ffc091;
+  --color-interactive-accent-hover: #ffdcc2;
+  --color-interactive-accent-active: #fff9f5;
+  --color-interactive-control: #260a2f;
+  --color-interactive-control-hover: #360e43;
+  --color-interactive-control-active: #471358;
+  --color-background-screen: #260a2f;
+}
+
+
+.wds-pocket-surface {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  color: #37517e;
+  color: var(--color-content-primary);
+}

package/src/pocketSurface/PocketSurface.docs.mdx

@@ -0,0 +1,64 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as stories from './PocketSurface.story';
+
+<Meta title="Internal/PocketSurface/Developer Guide" />
+
+# PocketSurface
+
+<div
+  style={{
+    backgroundColor: '#fff3cd',
+    border: '1px solid #ffb800',
+    borderRadius: '8px',
+    padding: '16px 20px',
+    marginBottom: '24px',
+  }}
+>
+  <strong>⚠️ Use under extrict design guidelines</strong>
+  <p style={{ margin: '8px 0 0' }}>
+    This component is <strong>not exposed in Figma</strong> and is
+    <strong>not intended for free use by product teams</strong>. It has strict design directions and
+    must only be used within approved Pocket-themed surfaces.
+  </p>
+</div>
+
+`PocketSurface` is a polymorphic container that scopes pocket design tokens as CSS custom properties
+and applies background and text colours for the selected pocket palette variant.
+
+## Usage
+
+```tsx
+import PocketSurface from '@transferwise/components/pocketSurface';
+
+<PocketSurface pocket="dark-gold">
+  <p>Content inherits pocket palette colours</p>
+</PocketSurface>;
+```
+
+## Available Tokens
+
+Each `PocketSurface` exposes the following CSS custom properties scoped to its variant:
+
+```
+--color-content-primary
+--color-content-secondary
+--color-content-link
+--color-content-link-hover
+--color-content-link-active
+
+--color-interactive-primary
+--color-interactive-primary-hover
+--color-interactive-primary-active
+--color-interactive-accent
+--color-interactive-accent-hover
+--color-interactive-accent-active
+--color-interactive-control
+--color-interactive-control-hover
+--color-interactive-control-active
+
+--color-background-screen
+```
+
+## Variants
+
+<Canvas of={stories.Variants} />

package/src/pocketSurface/PocketSurface.less

@@ -0,0 +1,6 @@
+@import "@transferwise/neptune-tokens/pocket/pocket.css";
+
+.wds-pocket-surface {
+  background-color: var(--color-background-screen);
+  color: var(--color-content-primary);
+}

package/src/pocketSurface/PocketSurface.story.tsx

@@ -0,0 +1,278 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import Button from '../button';
+import Link from '../link';
+import PocketSurface from './PocketSurface';
+import type { PocketVariant } from './PocketSurface.types';
+
+const PocketCard = ({ variant }: { variant?: PocketVariant } = {}) => (
+  <div className="p-a-2 d-flex flex-column" style={{ gap: '0.75rem', maxWidth: '280px' }}>
+    {variant && (
+      <span
+        style={{
+          fontSize: '11px',
+          opacity: 0.7,
+          textTransform: 'uppercase',
+          letterSpacing: '0.5px',
+        }}
+      >
+        {variant}
+      </span>
+    )}
+    <strong className="np-text-title-screen" style={{ color: 'inherit' }}>
+      Some headline text
+    </strong>
+    <p style={{ margin: 0 }}>A bit of body copy</p>
+    <div className="d-flex" style={{ gap: '0.5rem', flexWrap: 'wrap' }}>
+      <Button v2 priority="primary" size="sm">
+        Primary
+      </Button>
+    </div>
+  </div>
+);
+
+/**
+ * ⚠️ This component is not exposed in Figma and is not intended for use by product teams freely.
+ *
+ * PocketSurface is a polymorphic container component that scopes pocket design tokens
+ * as CSS custom properties and applies background and text colours for the selected
+ * pocket palette variant.
+ */
+const meta: Meta<typeof PocketSurface> = {
+  component: PocketSurface,
+  title: 'Internal/PocketSurface',
+  tags: ['early-access'],
+  argTypes: {
+    pocket: {
+      control: 'select',
+      options: [
+        'bright-blue',
+        'bright-orange',
+        'bright-pink',
+        'bright-yellow',
+        'dark-charcoal',
+        'dark-gold',
+        'dark-maroon',
+        'dark-purple',
+      ],
+      description: 'The pocket palette variant that determines the colour scheme',
+      table: {
+        type: { summary: 'PocketVariant' },
+      },
+    },
+    as: {
+      control: 'text',
+      description: 'The underlying HTML element to render.',
+      table: {
+        defaultValue: { summary: '"div"' },
+        type: { summary: 'string' },
+      },
+    },
+    className: {
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+    id: {
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+    'data-testid': {
+      control: 'text',
+      table: { type: { summary: 'string' } },
+    },
+    children: {
+      table: { type: { summary: 'ReactNode' } },
+      control: false,
+    },
+  },
+  args: {
+    pocket: 'bright-blue',
+    as: undefined,
+    className: undefined,
+    id: undefined,
+    'data-testid': undefined,
+    children: 'This is a pocket surface',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PocketSurface>;
+
+/**
+ * The Playground story allows you to experiment with all the props of the PocketSurface component.
+ * Use the controls below to customise the pocket variant and content.
+ */
+export const Playground: Story = {
+  args: {
+    pocket: 'bright-blue',
+    children: <PocketCard />,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<PocketSurface pocket="bright-blue">
+  <p>Content that inherits pocket palette colours</p>
+  <Button v2 priority="primary" size="sm">Primary</Button>
+</PocketSurface>`,
+      },
+    },
+  },
+};
+
+export const Sandbox = createSandboxStory({
+  code: `<PocketSurface pocket="dark-gold" className="p-a-2">
+  <p>
+    This text and its <Link href="#">inline links</Link> use pocket-matched colour.
+  </p>
+  <Button v2 size="sm">Primary</Button>
+</PocketSurface>`,
+  scope: { ...globalScope, Link, PocketSurface },
+});
+
+const variants: PocketVariant[] = [
+  'bright-blue',
+  'bright-orange',
+  'bright-pink',
+  'bright-yellow',
+  'dark-charcoal',
+  'dark-gold',
+  'dark-maroon',
+  'dark-purple',
+];
+
+/**
+ * All 8 pocket palette variants, each applying its own background and text colours via
+ * CSS custom properties scoped to the `.wds-pocket-{variant}` class.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      {variants.map((variant) => (
+        <PocketSurface key={variant} pocket={variant}>
+          <PocketCard variant={variant} />
+        </PocketSurface>
+      ))}
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};
+
+const tokenCategories = [
+  {
+    name: 'Content',
+    tokens: [
+      '--color-content-primary',
+      '--color-content-secondary',
+      '--color-content-link',
+      '--color-content-link-hover',
+      '--color-content-link-active',
+    ],
+  },
+  {
+    name: 'Interactive',
+    tokens: [
+      '--color-interactive-primary',
+      '--color-interactive-primary-hover',
+      '--color-interactive-primary-active',
+      '--color-interactive-accent',
+      '--color-interactive-accent-hover',
+      '--color-interactive-accent-active',
+      '--color-interactive-control',
+      '--color-interactive-control-hover',
+      '--color-interactive-control-active',
+    ],
+  },
+  {
+    name: 'Background',
+    tokens: ['--color-background-screen'],
+  },
+];
+
+const TokenSwatch = ({ token }: { token: string }) => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '4px' }}>
+    <div
+      style={{
+        width: '32px',
+        height: '32px',
+        borderRadius: '4px',
+        backgroundColor: `var(${token})`,
+        border: '1px solid rgba(0,0,0,0.1)',
+        flexShrink: 0,
+      }}
+    />
+    <code style={{ fontSize: '12px', color: 'var(--color-content-primary)' }}>{token}</code>
+  </div>
+);
+
+/**
+ * All exposed CSS custom properties for each pocket variant.
+ */
+export const ExposedTokens: Story = {
+  render: () => (
+    <section style={{ display: 'flex', flexDirection: 'column', gap: '32px', maxWidth: '100%' }}>
+      {variants.map((variant) => (
+        <PocketSurface key={variant} pocket={variant}>
+          <div className="p-a-3">
+            <h4
+              className="d-block m-b-2 text-capitalize np-text-title-body"
+              style={{ color: 'inherit' }}
+            >
+              {variant}
+            </h4>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+                gap: '24px',
+              }}
+            >
+              {tokenCategories.map((category) => (
+                <div key={category.name}>
+                  <h5
+                    style={{
+                      color: 'inherit',
+                      fontSize: '12px',
+                      fontWeight: 600,
+                      marginBottom: '8px',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                      opacity: 0.8,
+                    }}
+                  >
+                    {category.name}
+                  </h5>
+                  {category.tokens.map((token) => (
+                    <TokenSwatch key={token} token={token} />
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        </PocketSurface>
+      ))}
+    </section>
+  ),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      canvas: { sourceState: 'hidden' },
+    },
+  },
+  decorators: [
+    (Story: () => JSX.Element) => (
+      <div style={{ padding: '2rem', maxWidth: '1200px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/pocketSurface/PocketSurface.test.tsx

@@ -0,0 +1,107 @@
+import { render, screen } from '../test-utils';
+import PocketSurface from './PocketSurface';
+import { PocketVariant } from './PocketSurface.types';
+
+describe('PocketSurface', () => {
+  const testContent = 'Test content';
+
+  describe('rendering', () => {
+    it('renders with children', () => {
+      render(<PocketSurface pocket="bright-blue">{testContent}</PocketSurface>);
+      expect(screen.getByText(testContent)).toBeInTheDocument();
+    });
+
+    it('renders as div by default', () => {
+      render(
+        <PocketSurface pocket="bright-blue" data-testid="surface">
+          {testContent}
+        </PocketSurface>,
+      );
+      expect(screen.getByTestId('surface').tagName).toBe('DIV');
+    });
+
+    it('renders as custom element when as prop is provided', () => {
+      render(
+        <PocketSurface pocket="bright-blue" as="section" data-testid="surface">
+          {testContent}
+        </PocketSurface>,
+      );
+      expect(screen.getByTestId('surface').tagName).toBe('SECTION');
+    });
+  });
+
+  describe('pocket variants', () => {
+    const variants: PocketVariant[] = [
+      'bright-blue',
+      'bright-orange',
+      'bright-pink',
+      'bright-yellow',
+      'dark-charcoal',
+      'dark-gold',
+      'dark-maroon',
+      'dark-purple',
+    ];
+
+    variants.forEach((variant) => {
+      it(`renders ${variant} variant with correct classes`, () => {
+        render(
+          <PocketSurface pocket={variant} data-testid="surface">
+            {testContent}
+          </PocketSurface>,
+        );
+        const element = screen.getByTestId('surface');
+        expect(element).toHaveClass('wds-pocket-surface');
+        expect(element).toHaveClass(`wds-pocket-${variant}`);
+      });
+    });
+  });
+
+  describe('custom props', () => {
+    it('applies custom className', () => {
+      render(
+        <PocketSurface pocket="bright-blue" className="custom-class" data-testid="surface">
+          {testContent}
+        </PocketSurface>,
+      );
+      expect(screen.getByTestId('surface')).toHaveClass('custom-class');
+    });
+
+    it('applies custom id', () => {
+      render(
+        <PocketSurface pocket="bright-blue" id="custom-id">
+          {testContent}
+        </PocketSurface>,
+      );
+      expect(screen.getByText(testContent)).toHaveAttribute('id', 'custom-id');
+    });
+
+    it('applies data-testid attribute', () => {
+      render(
+        <PocketSurface pocket="bright-blue" data-testid="test-surface">
+          {testContent}
+        </PocketSurface>,
+      );
+      expect(screen.getByTestId('test-surface')).toBeInTheDocument();
+    });
+  });
+
+  describe('HTML attributes', () => {
+    it('supports aria-label attribute', () => {
+      render(
+        <PocketSurface pocket="bright-blue" aria-label="Surface label" data-testid="surface">
+          {testContent}
+        </PocketSurface>,
+      );
+      expect(screen.getByTestId('surface')).toHaveAttribute('aria-label', 'Surface label');
+    });
+
+    it('supports role attribute', () => {
+      render(
+        <PocketSurface pocket="bright-blue" role="region" data-testid="surface">
+          {testContent}
+        </PocketSurface>,
+      );
+      expect(screen.getByTestId('surface')).toHaveAttribute('role', 'region');
+    });
+  });
+});

package/src/pocketSurface/PocketSurface.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, ElementType, ForwardedRef } from 'react';
+import { clsx } from 'clsx';
+
+import { PocketSurfaceComponentProps, PocketSurfaceComponent } from './PocketSurface.types';
+
+// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/
+const PocketSurface: PocketSurfaceComponent = forwardRef(function PocketSurface<
+  T extends ElementType = 'div',
+>(
+  {
+    as,
+    pocket,
+    className,
+    children,
+    id,
+    'data-testid': dataTestId,
+    ...props
+  }: PocketSurfaceComponentProps<T>,
+  ref: ForwardedRef<HTMLElement>,
+) {
+  const Element = as ?? 'div';
+
+  const classNames = clsx('wds-pocket-surface', `wds-pocket-${pocket}`, className);
+
+  const pocketProps = {
+    ref,
+    id,
+    'data-testid': dataTestId,
+    className: classNames,
+    ...props,
+  };
+
+  return (
+    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/
+    <Element {...pocketProps}>{children}</Element>
+  );
+});
+
+PocketSurface.displayName = 'PocketSurface';
+
+export default PocketSurface;

package/src/pocketSurface/PocketSurface.types.ts

@@ -0,0 +1,37 @@
+import { ReactNode, ElementType, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+
+export type PocketVariant =
+  | 'bright-blue'
+  | 'bright-orange'
+  | 'bright-pink'
+  | 'bright-yellow'
+  | 'dark-charcoal'
+  | 'dark-gold'
+  | 'dark-maroon'
+  | 'dark-purple';
+
+export interface CommonProps {
+  pocket: PocketVariant;
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+  'data-testid'?: string;
+}
+
+export type PocketSurfaceDivProps<T extends ElementType = 'div'> = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  keyof CommonProps
+> &
+  CommonProps & {
+    as?: T;
+  };
+
+export type PocketSurfaceProps<T extends ElementType = 'div'> = PocketSurfaceDivProps<T>;
+
+export type PocketSurfaceComponentProps<T extends ElementType = 'div'> = PocketSurfaceProps<T> &
+  Omit<ComponentPropsWithoutRef<T>, keyof PocketSurfaceProps<T>>;
+
+export interface PocketSurfaceComponent {
+  <T extends ElementType = 'div'>(props: PocketSurfaceComponentProps<T>): ReactNode;
+  displayName?: string;
+}