npm - @transferwise/components - Versions diffs - 46.133.0 → 46.134.0 - Mend

@transferwise/components 46.133.0 → 46.134.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/build/chips/Chips.js.map +1 -1
package/build/chips/Chips.mjs.map +1 -1
package/build/label/Label.js +1 -1
package/build/label/Label.js.map +1 -1
package/build/label/Label.mjs +1 -1
package/build/label/Label.mjs.map +1 -1
package/build/logo/Logo.js +6 -0
package/build/logo/Logo.js.map +1 -1
package/build/logo/Logo.mjs +6 -0
package/build/logo/Logo.mjs.map +1 -1
package/build/main.css +47 -9
package/build/moneyInput/MoneyInput.js +28 -12
package/build/moneyInput/MoneyInput.js.map +1 -1
package/build/moneyInput/MoneyInput.mjs +30 -14
package/build/moneyInput/MoneyInput.mjs.map +1 -1
package/build/moneyInput/currencyFormatting.js +8 -2
package/build/moneyInput/currencyFormatting.js.map +1 -1
package/build/moneyInput/currencyFormatting.mjs +5 -4
package/build/moneyInput/currencyFormatting.mjs.map +1 -1
package/build/statusIcon/StatusIcon.js +1 -12
package/build/statusIcon/StatusIcon.js.map +1 -1
package/build/statusIcon/StatusIcon.mjs +1 -12
package/build/statusIcon/StatusIcon.mjs.map +1 -1
package/build/styles/listItem/ListItem.css +4 -4
package/build/styles/listItem/ListItem.grid.css +3 -3
package/build/styles/main.css +47 -9
package/build/styles/sentimentSurface/SentimentSurface.css +1 -1
package/build/styles/statusIcon/StatusIcon.css +35 -4
package/build/types/chips/Chips.d.ts +1 -1
package/build/types/chips/Chips.d.ts.map +1 -1
package/build/types/common/commonProps.d.ts +0 -6
package/build/types/common/commonProps.d.ts.map +1 -1
package/build/types/label/Label.d.ts.map +1 -1
package/build/types/logo/Logo.d.ts +10 -1
package/build/types/logo/Logo.d.ts.map +1 -1
package/build/types/moneyInput/MoneyInput.d.ts +6 -0
package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
package/build/types/moneyInput/currencyFormatting.d.ts +4 -3
package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
package/package.json +8 -8
package/src/button/_stories/Button.story.tsx +15 -5
package/src/checkboxButton/CheckboxButton.story.tsx +125 -44
package/src/checkboxButton/CheckboxButton.test.story.tsx +236 -0
package/src/chips/Chips.story.tsx +141 -102
package/src/chips/Chips.test.story.tsx +177 -0
package/src/chips/Chips.tsx +1 -1
package/src/circularButton/CircularButton.story.tsx +261 -49
package/src/circularButton/CircularButton.test.story.tsx +192 -2
package/src/common/commonProps.ts +0 -6
package/src/iconButton/IconButton.story.tsx +315 -110
package/src/iconButton/IconButton.test.story.tsx +217 -44
package/src/label/Label.tsx +1 -2
package/src/listItem/ListItem.css +4 -4
package/src/listItem/ListItem.grid.css +3 -3
package/src/listItem/ListItem.grid.less +5 -3
package/src/listItem/ListItem.less +1 -1
package/src/listItem/ListItem.vars.less +2 -2
package/src/listItem/_stories/ListItem.layout.test.story.tsx +55 -0
package/src/logo/Logo.story.tsx +181 -21
package/src/logo/Logo.test.story.tsx +40 -7
package/src/logo/Logo.tsx +10 -1
package/src/main.css +47 -9
package/src/moneyInput/MoneyInput.story.tsx +10 -1
package/src/moneyInput/MoneyInput.test.story.tsx +141 -1
package/src/moneyInput/MoneyInput.test.tsx +45 -0
package/src/moneyInput/MoneyInput.tsx +27 -3
package/src/moneyInput/currencyFormatting.ts +11 -5
package/src/sentimentSurface/SentimentSurface.css +1 -1
package/src/sentimentSurface/SentimentSurface.less +1 -1
package/src/statusIcon/StatusIcon.css +35 -4
package/src/statusIcon/StatusIcon.less +35 -4
package/src/statusIcon/StatusIcon.story.tsx +119 -79
package/src/statusIcon/StatusIcon.test.story.tsx +125 -0
package/src/statusIcon/StatusIcon.test.tsx +16 -23
package/src/statusIcon/StatusIcon.tsx +2 -16
package/src/switch/Switch.story.tsx +64 -42
package/src/switch/Switch.test.story.tsx +123 -0

package/src/circularButton/CircularButton.story.tsx CHANGED Viewed

@@ -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' },
+    },
+  },
 };

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

@@ -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/commonProps.ts CHANGED Viewed

@@ -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;
 };