@transferwise/components 46.132.1 → 46.133.1

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/inputs/InputGroup.css

@@ -10,6 +10,10 @@
   grid-column-start: 1;
   grid-row-start: 1;
 }
+.np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
+  padding-left: 48px;
+  padding-left: var(--size-48);
+}
 .np-input-addon {
   pointer-events: none;
   z-index: 10;
@@ -21,14 +25,18 @@
   transition-timing-function: ease-out;
   transition-duration: 150ms;
 }
+.np-input-addon.np-input-addon--avatar > .np-avatar-view {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
 .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
   opacity: 0.45;
   mix-blend-mode: luminosity;
 }
-.np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
+.np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
   color: var(--color-interactive-primary);
 }
-.np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
+.np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
   color: #b5b7ba;
   color: var(--color-interactive-secondary-hover);
 }

package/src/inputs/InputGroup.less

@@ -10,9 +10,19 @@
 
   /* Prevent unwanted `group-hover/input` triggers */
   border-radius: var(--radius-full);
+
+  .np-input-addon--avatar
+    + fieldset
+    .form-control.np-form-control.np-form-control--size-md.np-button-input {
+    padding-left: 48px;
+    padding-left: var(--size-48);
+  }
 }
 
 .np-input-addon {
+  &.np-input-addon--avatar > .np-avatar-view {
+    margin-right: var(--size-8);
+  }
   pointer-events: none;
   z-index: 10;
   display: inline-flex;
@@ -27,11 +37,11 @@
     mix-blend-mode: luminosity;
   }
 
-  .np-input-group:has(>:is(input,button,select):focus-visible) & {
+  .np-input-group:has(> :is(input, button, select):focus-visible) & {
     color: var(--color-interactive-primary);
   }
 
-  .np-input-group:has(>:is(input,button,select):hover) & {
+  .np-input-group:has(> :is(input, button, select):hover) & {
     color: var(--color-interactive-secondary-hover);
   }
 

package/src/inputs/InputGroup.story.tsx

@@ -6,7 +6,10 @@ import { Button } from '..';
 import { Field } from '../field/Field';
 
 import { Input } from './Input';
+import { Flag } from '@wise/art';
 import { InputGroup } from './InputGroup';
+import AvatarView from '../avatarView';
+import PhoneNumberInput from '../phoneNumberInput';
 
 export default {
   component: InputGroup,
@@ -81,3 +84,27 @@ function InputGroupWithSuffix(args: NonNullable<Story['args']>) {
     </InputGroup>
   );
 }
+
+export const PhoneNumberWithPrefix: Story = {
+  render: (args) => <PhoneNumberInputGroupWithPrefix {...args} />,
+  args: {
+    disabled: false,
+  },
+};
+
+function PhoneNumberInputGroupWithPrefix(args: NonNullable<Story['args']>) {
+  return (
+    <InputGroup
+      {...args}
+      addonStart={{
+        content: (
+          <AvatarView size={24}>
+            <Flag code="gbp" />
+          </AvatarView>
+        ),
+      }}
+    >
+      <PhoneNumberInput onChange={() => {}} />
+    </InputGroup>
+  );
+}

package/src/inputs/InputGroup.tsx

@@ -126,6 +126,15 @@ function InputAddon({
     }
   });
 
+  const isAvatarView = (node: unknown): boolean => {
+    if (!node || typeof node !== 'object') return false;
+    const { type } = node as { type?: { displayName?: string; name?: string } };
+    if (!type || (typeof type !== 'function' && typeof type !== 'object')) return false;
+    return type.displayName === 'AvatarView' || type.name === 'AvatarView';
+  };
+
+  const hasAvatarView = Array.isArray(content) ? content.some(isAvatarView) : isAvatarView(content);
+
   return (
     /* Prevent nested controls from being labeled redundantly */
     <FieldLabelContextProvider value={undefined}>
@@ -145,6 +154,7 @@ function InputAddon({
                   'np-input-addon--padding-sm': padding === 'sm',
                   'np-input-addon--padding-md': padding === 'md',
                 },
+                hasAvatarView && 'np-input-addon--avatar',
               )}
             >
               {content}

package/src/inputs/SelectInput/_stories/SelectInput.story.tsx

@@ -61,7 +61,6 @@ const meta = {
   },
   parameters: {
     actions: { argTypesRegex: '' },
-    docs: { toc: true },
   },
 } satisfies Meta<typeof SelectInput>;
 export default meta;

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/legacylistItem/LegacyListItem.test.story.tsx

@@ -6,7 +6,7 @@ import List from '../list';
 
 export default {
   component: LegacyListItem,
-  tags: ['!autodocs', 'deprecated', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
   title: 'Content/LegacyListItem/Tests',
 };
 

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx

@@ -75,7 +75,6 @@ const previewArgTypes = {
 } as const;
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
   argTypes: previewArgTypes,
   args: {
     children: lorem20,

package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx

@@ -41,7 +41,6 @@ export default {
 type Story = StoryObj<ListItemAvatarLayoutProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemAvatarLayoutProps) => {
     return (
       <List>

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -117,7 +117,6 @@ export default {
 type Story = StoryObj<ListItemAvatarViewProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemAvatarViewProps) => {
     return (
       <List>

package/src/listItem/Button/ListItemButton.story.tsx

@@ -146,7 +146,6 @@ export default meta;
 type Story = StoryObj<ListItemButtonProps>;
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
   render: (args: PreviewStoryArgs) => {
     const [props, previewProps] = getPropsForPreview(args);
 

package/src/listItem/Checkbox/ListItemCheckbox.story.tsx

@@ -51,7 +51,6 @@ export default meta;
 type Story = StoryObj<ListItemCheckboxProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemCheckboxProps) => {
     return (
       <List>

package/src/listItem/IconButton/ListItemIconButton.story.tsx

@@ -84,7 +84,6 @@ export default meta;
 type Story = StoryObj<ListItemIconButtonProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemIconButtonProps) => {
     return (
       <List>

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