@transferwise/components 46.132.1 → 46.133.1

package/src/circularButton/CircularButton.test.story.tsx

@@ -1,11 +1,18 @@
-import { Freeze } from '@transferwise/icons';
+import { Freeze, Plus, Send, Convert, Card } from '@transferwise/icons';
 
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { useState } from 'react';
 import CircularButton from './CircularButton';
 import Title from '../title';
 import Body from '../body';
 import { withVariantConfig } from '../../.storybook/helpers';
 
+const wait = async (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton/Tests',
@@ -14,6 +21,188 @@ export default {
 
 type Story = StoryObj<typeof CircularButton>;
 
+/** All priorities, types, and states across all themes. */
+export const Variants: Story = {
+  render: () => {
+    const rowStyle = {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, minmax(0, 100px))',
+      gap: '16px',
+      textAlign: 'center' as const,
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+        <div style={rowStyle}>
+          <CircularButton priority="primary" type="default" icon={<Send />} onClick={fn()}>
+            Primary
+          </CircularButton>
+          <CircularButton priority="secondary" type="default" icon={<Plus />} onClick={fn()}>
+            Secondary
+          </CircularButton>
+          <CircularButton disabled priority="primary" type="default" icon={<Card />}>
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled priority="secondary" type="default" icon={<Card />}>
+            Secondary disabled
+          </CircularButton>
+        </div>
+        <div style={rowStyle}>
+          <CircularButton priority="primary" type="negative" icon={<Send />} onClick={fn()}>
+            Primary
+          </CircularButton>
+          <CircularButton priority="secondary" type="negative" icon={<Convert />} onClick={fn()}>
+            Secondary
+          </CircularButton>
+          <CircularButton disabled priority="primary" type="negative" icon={<Card />}>
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled priority="secondary" type="negative" icon={<Card />}>
+            Secondary disabled
+          </CircularButton>
+        </div>
+      </div>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+/**
+ * `Space` or `Enter` activates when focused. Tab skips disabled buttons.
+ */
+export const KeyboardInteraction: Story = {
+  render: () => {
+    const onClick = fn();
+    return (
+      <div style={{ display: 'flex', gap: '24px', padding: '16px' }}>
+        <CircularButton priority="primary" type="default" icon={<Send />} onClick={onClick}>
+          Send
+        </CircularButton>
+        <CircularButton priority="secondary" type="default" icon={<Plus />} onClick={onClick}>
+          Add funds
+        </CircularButton>
+        <CircularButton priority="primary" type="negative" icon={<Convert />} onClick={onClick}>
+          Convert
+        </CircularButton>
+        <CircularButton
+          priority="primary"
+          type="default"
+          icon={<Card />}
+          disabled
+          onClick={onClick}
+        >
+          Disabled
+        </CircularButton>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByRole('button');
+
+    await step('tab to Send and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[0]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab to Add funds and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[1]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab to Convert and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[2]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab skips Disabled button', async () => {
+      await userEvent.tab();
+      // Disabled button should be skipped, focus leaves the component
+      await expect(buttons[3]).not.toHaveFocus();
+    });
+  },
+};
+
+/** Base variants in right-to-left layout. */
+export const RTL: Story = {
+  render: function Render() {
+    const [clicks, setClicks] = useState(0);
+    const rowStyle = {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, minmax(0, 100px))',
+      gap: '16px',
+      textAlign: 'center' as const,
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '16px' }}>
+        <div style={rowStyle}>
+          <CircularButton
+            priority="primary"
+            type="default"
+            icon={<Send />}
+            onClick={() => setClicks((c) => c + 1)}
+          >
+            Primary
+          </CircularButton>
+          <CircularButton
+            priority="secondary"
+            type="default"
+            icon={<Plus />}
+            onClick={() => setClicks((c) => c + 1)}
+          >
+            Secondary
+          </CircularButton>
+          <CircularButton disabled priority="primary" type="default" icon={<Card />}>
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled priority="secondary" type="default" icon={<Card />}>
+            Secondary disabled
+          </CircularButton>
+        </div>
+        <div style={rowStyle}>
+          <CircularButton
+            priority="primary"
+            type="negative"
+            icon={<Send />}
+            onClick={() => setClicks((c) => c + 1)}
+          >
+            Primary
+          </CircularButton>
+          <CircularButton
+            priority="secondary"
+            type="negative"
+            icon={<Convert />}
+            onClick={() => setClicks((c) => c + 1)}
+          >
+            Secondary
+          </CircularButton>
+          <CircularButton disabled priority="primary" type="negative" icon={<Card />}>
+            Primary disabled
+          </CircularButton>
+          <CircularButton disabled priority="secondary" type="negative" icon={<Card />}>
+            Secondary disabled
+          </CircularButton>
+        </div>
+      </div>
+    );
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+/** Long labels are centered beneath the icon. */
 export const CenteredText: Story = {
   render: () => {
     return (
@@ -79,7 +268,8 @@ const All: Story = {
   },
 };
 
-export const All400Zoom: Story = {
+/** All variants at 400% zoom for accessibility testing. */
+export const Zoom400: Story = {
   ...All,
   ...withVariantConfig(['400%'], All),
 };

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -2,15 +2,13 @@ import { action } from 'storybook/actions';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag } from '@transferwise/icons';
 import { useState } from 'react';
-
-import Body from '../../body/Body';
 import Button from '../../button';
-import NavigationOption from '../../navigationOption';
-import { lorem10, lorem500 } from '../../test-utils';
+import { lorem10 } from '../../test-utils';
 import Title from '../../title/Title';
 import { Typography } from '../propsValues/typography';
 
 import BottomSheet from './BottomSheet';
+import ListItem from '../../listItem';
 
 export default {
   component: BottomSheet,
@@ -48,11 +46,15 @@ export const Basic: Story = {
         {lorem10}
         <br />
         <br />
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-          isContainerAligned
+        <ListItem
+          title="List item"
+          subtitle="Button and icon are vertically centered."
+          control={<ListItem.Navigation href="#" />}
+          media={
+            <ListItem.AvatarView>
+              <FastFlag />
+            </ListItem.AvatarView>
+          }
         />
       </>
     ),

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -8,8 +8,8 @@ import { Typography } from '../propsValues/typography';
 import Alert from '../../alert';
 import Body from '../../body';
 import Button from '../../button';
-import NavigationOption from '../../navigationOption';
 import Title from '../../title';
+import ListItem from '../../listItem';
 import BottomSheet from './BottomSheet';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
@@ -109,11 +109,15 @@ const Basic: Story = {
         {lorem10}
         <br />
         <br />
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-          isContainerAligned
+        <ListItem
+          title="List item"
+          subtitle="Button and icon are vertically centered."
+          control={<ListItem.Navigation href="#" />}
+          media={
+            <ListItem.AvatarView>
+              <FastFlag />
+            </ListItem.AvatarView>
+          }
         />
       </>
     ),
@@ -153,16 +157,25 @@ const WithOverflowContent: Story = {
       <>
         <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
         {lorem10}
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
+        <ListItem
+          title="List item"
+          subtitle="Button and icon are vertically centered."
+          control={<ListItem.Navigation href="#" />}
+          media={
+            <ListItem.AvatarView>
+              <FastFlag />
+            </ListItem.AvatarView>
+          }
         />
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-          isContainerAligned
+        <ListItem
+          title="List item"
+          subtitle="Button and icon are vertically centered."
+          control={<ListItem.Navigation href="#" />}
+          media={
+            <ListItem.AvatarView>
+              <FastFlag />
+            </ListItem.AvatarView>
+          }
         />
         {lorem500}
         <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>

package/src/common/commonProps.ts

@@ -1,10 +1,4 @@
 export type CommonProps = {
-  /**
-   * Space-separated list of the case-sensitive CSS classes,
-   * most would be applied to outermost element inside the component
-   *
-   * @see https://github.com/transferwise/neptune-web/blob/main/rfc/0001-always-pass-classname.md
-   */
   className?: string;
 };
 

package/src/divider/Divider.accessibility.docs.mdx

@@ -1,6 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
-import { NavigationOption } from '..';
-import { Bulb } from '@transferwise/icons';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 <Meta title="Layouts/Divider/Accessibility" />
 
@@ -8,13 +6,6 @@ import { Bulb } from '@transferwise/icons';
 
 A Divider is used to separate sections of content. While it doesn't directly announce anything to screen readers, there are a few considerations:
 
-<NavigationOption
-  media={<Bulb size={24} />}
-  title="Design guidance"
-  content="Before you start, please review the documentation on how separators should be used, announced or hidden from assistive tech."
-  href="https://wise.design/components/divider"
-/>
-
 <br />
 <br />
 

package/src/divider/Divider.story.tsx

@@ -84,7 +84,6 @@ export const Playground: Story = {
   args: {
     level: 'section',
   },
-  tags: ['!autodocs'],
 };
 
 /**

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -52,7 +52,7 @@ const withScrollbarProtector: Decorator = (Story) => (
 export default {
   title: 'Forms/ExpressiveMoneyInput',
   component: ExpressiveMoneyInput,
-  tags: ['contribution'],
+  tags: ['early-access', 'contribution'],
   parameters: {
     docs: {
       canvas: {
@@ -78,7 +78,6 @@ export default {
 type Story = StoryObj<ExpressiveMoneyInputProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
 };
 

package/src/header/Header.accessibility.docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
-import { NavigationOption } from '..';
 import { Bulb } from '@transferwise/icons';
+import ListItem from '../listItem';
 import * as stories from './Header.story';
 
 <Meta title="Typography/Header/Accessibility" />
@@ -9,11 +9,15 @@ import * as stories from './Header.story';
 
 Given the `Header` is a key component for structuring content and conveying hierarchy, ensuring its accessibility is crucial for an inclusive experience.
 
-<NavigationOption
-  media={<Bulb size={24} />}
+<ListItem
   title="Design guidance"
-  content="Before you start, familiarise yourself with the dedicated accessibility documentation."
-  href="https://wise.design/components/section-header#accessibility"
+  subtitle="Before you start, familiarise yourself with the provided guidance."
+  control={<ListItem.Navigation href="https://wise.design/components/section-header" />}
+  media={
+    <ListItem.AvatarView>
+      <Bulb />
+    </ListItem.AvatarView>
+  }
 />
 
 <br />