@transferwise/components 46.133.0 → 46.134.0

package/src/iconButton/IconButton.test.story.tsx

@@ -1,9 +1,25 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Menu, Plus, Settings, Star, Travel } from '@transferwise/icons';
-import { action } from 'storybook/actions';
+import {
+  Menu,
+  Plus,
+  Settings,
+  Star,
+  Travel,
+  Cross,
+  Edit,
+  Briefcase,
+  Bank,
+  Freeze,
+} from '@transferwise/icons';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import IconButton from './IconButton';
+import { withVariantConfig } from '../../.storybook/helpers';
 import SentimentSurface from '../sentimentSurface';
-import { allModes } from '../../.storybook/modes';
+
+const wait = async (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
 
 export default {
   title: 'Actions/IconButton/Tests',
@@ -16,11 +32,19 @@ type Story = StoryObj<typeof IconButton>;
 /**
  * IconButton displayed across all themes and sentiments for visual regression testing.
  */
-export const AllThemesAndSentiments: Story = {
+export const Variants: Story = {
   render: () => {
-    const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
-    const sentiments = ['negative', 'warning', 'neutral', 'success', 'proposition'] as const;
-    const icons = [Plus, Settings, Star, Travel];
+    const size = 32;
+    const priorities = [
+      { key: 'primary', label: 'primary' },
+      { key: 'secondary', label: 'secondary' },
+      { key: 'tertiary', label: 'tertiary' },
+      { key: 'minimal', label: 'minimal' },
+      { key: 'neg-primary', label: 'negative\nprimary' },
+      { key: 'neg-secondary', label: 'negative\nsecondary' },
+      { key: 'disabled', label: 'disabled' },
+    ] as const;
+    const sentiments = ['success', 'warning', 'negative', 'neutral', 'proposition'] as const;
 
     return (
       <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -29,21 +53,23 @@ export const AllThemesAndSentiments: Story = {
           <div style={{ width: '82px', paddingLeft: '8px' }} />
           {priorities.map((priority) => (
             <div
-              key={priority}
+              key={priority.key}
               style={{
-                width: '32px',
+                width: `${size}px`,
                 textAlign: 'center',
                 fontSize: '11px',
                 fontWeight: 'bold',
                 writingMode: 'vertical-rl',
                 transform: 'rotate(180deg)',
-                height: '60px',
+                height: '80px',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
+                whiteSpace: 'pre',
+                lineHeight: '1',
               }}
             >
-              {priority}
+              {priority.label}
             </div>
           ))}
         </div>
@@ -68,48 +94,66 @@ export const AllThemesAndSentiments: Story = {
               {sentiment} (base)
             </div>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Plus />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Settings />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Star />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Travel />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
+              aria-label="Negative primary action"
+              priority="primary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Cross />
+            </IconButton>
+            <IconButton
+              size={size}
+              aria-label="Negative secondary action"
+              priority="secondary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Edit />
+            </IconButton>
+            <IconButton
+              size={size}
               aria-label="Disabled action"
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Menu />
             </IconButton>
@@ -132,63 +176,192 @@ export const AllThemesAndSentiments: Story = {
               {sentiment} (elevated)
             </div>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Plus />
+              <Briefcase />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Settings />
+              <Bank />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Star />
+              <Freeze />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Travel />
+              <Edit />
             </IconButton>
             <IconButton
-              size={32}
+              size={size}
+              aria-label="Negative primary action"
+              priority="primary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Cross />
+            </IconButton>
+            <IconButton
+              size={size}
+              aria-label="Negative secondary action"
+              priority="secondary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Edit />
+            </IconButton>
+            <IconButton
+              size={size}
               aria-label="Disabled action"
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
-              <Menu />
+              <Cross />
             </IconButton>
           </SentimentSurface>,
         ])}
       </div>
     );
   },
-  parameters: {
-    padding: '16px',
-    variants: ['default', 'dark', 'bright-green', 'forest-green'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
-    },
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+/** Tab through each priority variant and activate with Space. */
+export const KeyboardInteraction: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', padding: '16px' }}>
+      <IconButton size={48} aria-label="Primary" priority="primary" type="default" onClick={fn()}>
+        <Plus />
+      </IconButton>
+      <IconButton
+        size={48}
+        aria-label="Secondary"
+        priority="secondary"
+        type="default"
+        onClick={fn()}
+      >
+        <Settings />
+      </IconButton>
+      <IconButton size={48} aria-label="Tertiary" priority="tertiary" type="default" onClick={fn()}>
+        <Star />
+      </IconButton>
+      <IconButton size={48} aria-label="Minimal" priority="minimal" type="default" onClick={fn()}>
+        <Travel />
+      </IconButton>
+      <IconButton
+        size={48}
+        aria-label="Disabled"
+        priority="primary"
+        type="default"
+        disabled
+        onClick={fn()}
+      >
+        <Menu />
+      </IconButton>
+    </div>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByRole('button');
+
+    await step('tab to Primary 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 Secondary 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 Tertiary and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[2]).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+    });
+
+    await wait(400);
+
+    await step('tab to Minimal and press Space', async () => {
+      await userEvent.tab();
+      await expect(buttons[3]).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
+      await expect(buttons[4]).not.toHaveFocus();
+    });
   },
 };
+
+/** IconButton at 400% zoom for accessibility testing. */
+export const Zoom400: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '8px', padding: '16px', flexWrap: 'wrap' }}>
+      <IconButton size={40} aria-label="Primary" priority="primary" type="default" onClick={fn()}>
+        <Plus />
+      </IconButton>
+      <IconButton
+        size={40}
+        aria-label="Secondary"
+        priority="secondary"
+        type="default"
+        onClick={fn()}
+      >
+        <Settings />
+      </IconButton>
+      <IconButton size={40} aria-label="Tertiary" priority="tertiary" type="default" onClick={fn()}>
+        <Star />
+      </IconButton>
+      <IconButton size={40} aria-label="Minimal" priority="minimal" type="default" onClick={fn()}>
+        <Travel />
+      </IconButton>
+      <IconButton
+        size={40}
+        aria-label="Disabled"
+        disabled
+        priority="primary"
+        type="default"
+        onClick={fn()}
+      >
+        <Menu />
+      </IconButton>
+    </div>
+  ),
+  ...withVariantConfig(['400%']),
+};

package/src/label/Label.tsx

@@ -39,8 +39,6 @@ const Label = forwardRef<HTMLLabelElement, LabelProps>(
   },
 );
 
-Label.displayName = 'Label';
-
 export type LabelOptionalProps = PropsWithChildren<CommonProps>;
 
 const Optional = function Optional({ children, className }: LabelOptionalProps) {
@@ -68,4 +66,5 @@ const Description = function Description({ id, children, className }: LabelDescr
 // eslint-disable-next-line functional/immutable-data
 const LabelNamespace = Object.assign(Label, { Optional, Description });
 
+LabelNamespace.displayName = 'Label';
 export { LabelNamespace as Label };

package/src/listItem/ListItem.css

@@ -9,7 +9,7 @@
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 241px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -236,7 +236,7 @@
     margin-top: var(--size-4);
   }
 }
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -531,7 +531,7 @@
   flex-direction: column;
   justify-content: center;
 }
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;

package/src/listItem/ListItem.grid.css

@@ -9,7 +9,7 @@
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 241px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -236,7 +236,7 @@
     margin-top: var(--size-4);
   }
 }
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }

package/src/listItem/ListItem.grid.less

@@ -14,7 +14,7 @@
       }
     }
 
-    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
+    @container (width > @wds-list-item-cq-max) {
       .wds-list-item-control-wrapper {
         height: var(--wds-list-item-control-wrapper-height);
         align-content: center;
@@ -169,7 +169,9 @@
       }
     }
 
-    @container (min-width: unit(@wds-list-item-cq-min + 1, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
+    // LESS struggles with ranged container queries so
+    // we need to escape the interpolated expression.
+    @container (~"@{wds-list-item-cq-min} < width <= @{wds-list-item-cq-max}") {
       .wds-list-item-media-image{
         object-position: bottom left;
       }
@@ -404,7 +406,7 @@
       }
     }
 
-    @container (max-width: unit(@wds-list-item-cq-min, px)) {
+    @container (width <= @wds-list-item-cq-min) {
       .wds-list-item-control-wrapper {
         align-content: start;
       }

package/src/listItem/ListItem.less

@@ -189,7 +189,7 @@
     flex-direction: column;
     justify-content: center;
 
-    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
+    @container (width > @wds-list-item-cq-max) {
       min-height: var(--wds-list-item-value-min-height, 100%);
     }
   }

package/src/listItem/ListItem.vars.less

@@ -7,5 +7,5 @@
 // `packages/components/src/listItem/constants.ts`
 //
 // @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
-@wds-list-item-cq-min: 240;
-@wds-list-item-cq-max: 308;
+@wds-list-item-cq-min: 240px;
+@wds-list-item-cq-max: 308px;

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -225,3 +225,58 @@ export const ImageAlignment: StoryObj<PreviewStoryArgs> = {
     );
   },
 };
+
+// Our container queries left 1px gap between breakpoint definitions.
+// This test makes sure that LI placed in a parent of {width} still
+// works fine, where: {breakpoint} < {width} < {breakpoint} + 1px
+export const SubPixelWidths: StoryObj<PreviewStoryArgs> = {
+  parameters: {
+    controls: { disable: false },
+  },
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    previewImageSize: 48,
+    previewWithLineGuides: true,
+    previewPrompt: false,
+  },
+  argTypes: previewArgTypes,
+  render: (args: PreviewStoryArgs) => {
+    const [props] = getPropsForPreview(args);
+
+    return (
+      <>
+        <List
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            width: `${2 * LISTITEM_CQ.MIN + 1}px`,
+          }}
+        >
+          <ListItem
+            {...props}
+            title={`This list item is ${LISTITEM_CQ.MIN + 0.5}px wide`}
+            subtitle="this translates to '@wds-list-item-cq-min + 0.5px'"
+            media={<ListItem.Image src={portraitImage} alt="portrait image" />}
+          />
+          <li />
+        </List>
+        <List
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            width: `${2 * LISTITEM_CQ.MAX + 1}px`,
+          }}
+        >
+          <ListItem
+            {...props}
+            title={`This list item is ${LISTITEM_CQ.MAX + 0.5}px wide`}
+            subtitle="this translates to '@wds-list-item-cq-max + 0.5px'"
+            media={<ListItem.Image src={portraitImage} alt="portrait image" />}
+          />
+          <li />
+        </List>
+      </>
+    );
+  },
+};