@transferwise/components 46.132.1 → 46.133.1

package/src/chips/Chips.test.story.tsx

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent } from 'storybook/test';
+import { useState } from 'react';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import Chips, { type ChipValue } from './Chips';
+
+export default {
+  component: Chips,
+  title: 'Actions/Chips/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Chips>;
+
+type Story = StoryObj<typeof Chips>;
+
+const wait = async (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+const filterChips = [
+  { value: 'all', label: 'All' },
+  { value: 'accounting', label: 'Accounting' },
+  { value: 'payroll', label: 'Payroll' },
+  { value: 'payments', label: 'Payments' },
+];
+
+const choiceChips = [
+  { value: 100, label: '100 GBP' },
+  { value: 200, label: '200 GBP' },
+  { value: 300, label: '300 GBP' },
+  { value: 500, label: '500 GBP+' },
+];
+
+/** Filter and choice chips across all themes. */
+export const Variants: Story = {
+  render: function Render() {
+    const [filterSelected, setFilterSelected] = useState<readonly ChipValue[]>([
+      'accounting',
+      'payments',
+    ]);
+    const [choiceSelected, setChoiceSelected] = useState<ChipValue>(300);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Chips
+          chips={filterChips}
+          multiple
+          selected={filterSelected}
+          aria-label="Category filter"
+          onChange={({ selectedValue, isEnabled }) => {
+            setFilterSelected((prev) =>
+              isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+            );
+          }}
+        />
+        <Chips
+          chips={choiceChips}
+          selected={choiceSelected}
+          aria-label="Transfer amount"
+          onChange={({ selectedValue }) => setChoiceSelected(selectedValue)}
+        />
+      </div>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+/**
+ * Tab moves between chips. Enter or Space toggles selection.
+ */
+export const ChoiceKeyboardInteraction: Story = {
+  render: function Render() {
+    const [selected, setSelected] = useState<ChipValue>(300);
+    return (
+      <Chips
+        chips={choiceChips}
+        selected={selected}
+        aria-label="Transfer amount"
+        onChange={({ selectedValue }) => setSelected(selectedValue)}
+      />
+    );
+  },
+  play: async () => {
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.keyboard('{Enter}');
+  },
+};
+
+/**
+ * Tab moves between chips. Enter or Space toggles selection.
+ */
+export const FilterKeyboardInteraction: Story = {
+  render: function Render() {
+    const [selected, setSelected] = useState<readonly ChipValue[]>(['accounting']);
+    return (
+      <Chips
+        chips={filterChips}
+        multiple
+        selected={selected}
+        aria-label="Category filter"
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelected((prev) =>
+            isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+          );
+        }}
+      />
+    );
+  },
+  play: async () => {
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.tab();
+    await wait(400);
+    await userEvent.keyboard('{Enter}');
+  },
+};
+
+/** Filter and choice chips in right-to-left layout. */
+export const RTL: Story = {
+  render: function Render() {
+    const [filterSelected, setFilterSelected] = useState<readonly ChipValue[]>([
+      'accounting',
+      'payments',
+    ]);
+    const [choiceSelected, setChoiceSelected] = useState<ChipValue>(300);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Chips
+          chips={filterChips}
+          multiple
+          selected={filterSelected}
+          aria-label="Category filter"
+          onChange={({ selectedValue, isEnabled }) => {
+            setFilterSelected((prev) =>
+              isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+            );
+          }}
+        />
+        <Chips
+          chips={choiceChips}
+          selected={choiceSelected}
+          aria-label="Transfer amount"
+          onChange={({ selectedValue }) => setChoiceSelected(selectedValue)}
+        />
+      </div>
+    );
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+/** Filter chips at 400% zoom for accessibility testing. */
+export const Zoom400: Story = {
+  render: function Render() {
+    const [selected, setSelected] = useState<readonly ChipValue[]>(['accounting']);
+    return (
+      <Chips
+        chips={filterChips}
+        multiple
+        selected={selected}
+        aria-label="Category filter"
+        onChange={({ selectedValue, isEnabled }) => {
+          setSelected((prev) =>
+            isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
+          );
+        }}
+      />
+    );
+  },
+  ...withVariantConfig(['400%']),
+};

package/src/chips/Chips.tsx

@@ -27,7 +27,7 @@ export type ChipsProps = CommonProps &
     }) => void;
     /** Used to manage which chips are selected */
     selected: ChipValue | readonly ChipValue[];
-    /** Used to activate multi-selection */
+    /** True turns on Filter-mode, False is Choice */
     multiple?: boolean;
   };
 

package/src/circularButton/CircularButton.story.tsx

@@ -1,18 +1,26 @@
 import * as Icons from '@transferwise/icons';
 
-import { ControlType, Priority } from '../common';
-
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import CircularButton from './CircularButton';
+import { fn } from 'storybook/test';
+import CircularButton, { CircularButtonProps } from './CircularButton';
 import Title from '../title';
-import Body from '../body';
+import SentimentSurface from '../sentimentSurface';
 
+/**
+ * An <a href="?path=/docs/actions-iconbutton--docs">IconButton</a> with a text label below it.
+ *
+ * **Design guidance**: <a href="https://wise.design/components/circular-button" target="_blank">wise.design/components/circular-button</a>
+ */
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
   args: {
     children: 'Button text',
     icon: <Icons.Freeze />,
+    onClick: fn(),
+    priority: 'primary',
+    type: 'default',
+    disabled: false,
   },
   argTypes: {
     icon: {
@@ -21,66 +29,270 @@ export default {
         Object.entries(Icons).map(([name, Icon]) => [name, <Icon key={name} />]),
       ),
     },
+    className: { table: { category: 'Common' } },
+    onClick: { table: { category: 'Common', type: { summary: 'function' } } },
+  },
+  parameters: {
+    docs: { toc: true },
   },
 } satisfies Meta<typeof CircularButton>;
 
 type Story = StoryObj<typeof CircularButton>;
 
-export const Basic: Story = {
+/** Explore all props via the controls panel. */
+export const Playground: Story = {};
+
+/**
+ * Priorities set a visual hierarchy amongst the buttons displayed on the
+ * screen to help more important buttons to take precedence over others. <br />
+ * [Design documentation](https://wise.design/components/circular-button#priority)
+ */
+export const Priority: Story = {
   args: {
-    priority: 'primary',
     type: 'default',
-    disabled: false,
   },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['default', 'negative'],
+    },
+    priority: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    icon: { table: { disable: true } },
+    children: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', gap: '24px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args: CircularButtonProps) => (
+    <>
+      <CircularButton priority="primary" type={args.type} icon={<Icons.Send />} onClick={fn()}>
+        Primary
+      </CircularButton>
+      <CircularButton priority="secondary" type={args.type} icon={<Icons.Plus />} onClick={fn()}>
+        Secondary
+      </CircularButton>
+    </>
+  ),
 };
 
-export const All: Story = {
+/**
+ * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
+ * [Design documentation](https://wise.design/components/circular-button#types)
+ */
+export const Type: Story = {
   args: {
-    className: 'm-r-2',
+    priority: 'primary',
   },
-  render: (props) => {
-    return (
-      <>
-        <Title type="title-subsection" className="m-y-2">
-          Default (Primary and secondary)
-        </Title>
-        <Body>
-          <CircularButton {...props} priority="primary" type="default" />
-          <CircularButton {...props} priority="secondary" type="default" />
-          <CircularButton {...props} priority="primary" type="default" disabled />
-          <CircularButton {...props} priority="secondary" type="default" disabled />
-        </Body>
+  argTypes: {
+    priority: {
+      control: 'radio',
+      options: ['primary', 'secondary'],
+    },
+    type: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    icon: { table: { disable: true } },
+    children: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', gap: '24px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args: CircularButtonProps) => (
+    <>
+      <CircularButton priority={args.priority} type="default" icon={<Icons.Send />} onClick={fn()}>
+        Default
+      </CircularButton>
+      <CircularButton
+        priority={args.priority}
+        type="negative"
+        icon={<Icons.Cross />}
+        onClick={fn()}
+      >
+        Negative
+      </CircularButton>
+    </>
+  ),
+};
 
-        <Title type="title-subsection" className="m-y-2">
-          Negative (Primary and secondary)
-        </Title>
-        <Body>
-          <CircularButton {...props} priority="primary" type="negative" />
-          <CircularButton {...props} priority="secondary" type="negative" />
-          <CircularButton {...props} priority="primary" type="negative" disabled />
-          <CircularButton {...props} priority="secondary" type="negative" disabled />
-        </Body>
+/**
+ * Disabled buttons cannot be interacted with and are visually distinct.
+ */
+export const Disabled: Story = {
+  args: {
+    priority: 'primary',
+    type: 'default',
+  },
+  argTypes: {
+    priority: {
+      control: 'radio',
+      options: ['primary', 'secondary'],
+    },
+    type: {
+      control: 'radio',
+      options: ['default', 'negative'],
+    },
+    disabled: { table: { disable: true } },
+    icon: { table: { disable: true } },
+    children: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args: CircularButtonProps) => (
+    <CircularButton disabled priority={args.priority} type={args.type} icon={<Icons.Card />}>
+      Disabled
+    </CircularButton>
+  ),
+};
 
-        <Title type="title-body" className="m-y-2">
-          Accent (Deprecated)
-        </Title>
-        <Body>
-          <CircularButton {...props} priority="primary" type="accent" />
-          <CircularButton {...props} priority="secondary" type="accent" />
-          <CircularButton {...props} priority="primary" type="accent" disabled />
-          <CircularButton {...props} priority="secondary" type="accent" disabled />
-        </Body>
+/**
+ * `CircularButton` is sentiment-aware and will automatically adjust its colours if wrapped inside
+ * the <a href="?path=/docs/foundations-sentimentsurface--docs">SentimentSurface</a> component. <br />
+ * [Design documentation](https://wise.design/components/circular-button)
+ */
+export const SentimentAwareness: Story = {
+  render: () => {
+    const buttons = [
+      {
+        priority: 'primary',
+        type: 'default',
+        icon: <Icons.Send />,
+        label: 'primary',
+        disabled: false,
+      },
+      {
+        priority: 'secondary',
+        type: 'default',
+        icon: <Icons.Plus />,
+        label: 'secondary',
+        disabled: false,
+      },
+      {
+        priority: 'primary',
+        type: 'negative',
+        icon: <Icons.Cross />,
+        label: 'neg primary',
+        disabled: false,
+      },
+      {
+        priority: 'secondary',
+        type: 'negative',
+        icon: <Icons.Edit />,
+        label: 'neg secondary',
+        disabled: false,
+      },
+      {
+        priority: 'primary',
+        type: 'default',
+        icon: <Icons.Card />,
+        label: 'disabled',
+        disabled: true,
+      },
+    ] as const;
+    const sentiments = ['success', 'warning', 'negative', 'neutral', 'proposition'] as const;
 
-        <Title type="title-body" className="m-y-2">
-          Positive (Deprecated)
-        </Title>
-        <Body>
-          <CircularButton {...props} priority="primary" type="positive" />
-          <CircularButton {...props} priority="secondary" type="positive" />
-          <CircularButton {...props} priority="primary" type="positive" disabled />
-          <CircularButton {...props} priority="secondary" type="positive" disabled />
-        </Body>
-      </>
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {/* Rows for each sentiment with base and elevated emphasis */}
+        {sentiments.flatMap((sentiment) => [
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            sentiment={sentiment}
+            emphasis="base"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '120px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (base)
+            </div>
+            {buttons.map((button) => (
+              <div
+                key={button.label}
+                style={{
+                  width: '100px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+              >
+                <CircularButton
+                  priority={button.priority}
+                  type={button.type}
+                  icon={button.icon}
+                  disabled={button.disabled}
+                  onClick={fn()}
+                >
+                  {button.label}
+                </CircularButton>
+              </div>
+            ))}
+          </SentimentSurface>,
+          <SentimentSurface
+            key={`${sentiment}-elevated`}
+            sentiment={sentiment}
+            emphasis="elevated"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '120px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (elevated)
+            </div>
+            {buttons.map((button) => (
+              <div
+                key={button.label}
+                style={{
+                  width: '100px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+              >
+                <CircularButton
+                  priority={button.priority}
+                  type={button.type}
+                  icon={button.icon}
+                  disabled={button.disabled}
+                  onClick={fn()}
+                >
+                  {button.label}
+                </CircularButton>
+              </div>
+            ))}
+          </SentimentSurface>,
+        ])}
+      </div>
     );
   },
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'hidden' },
+    },
+  },
 };