@transferwise/components 0.0.0-experimental-1a9f157 → 0.0.0-experimental-3ab1d06

package/src/popover/Popover.story.tsx

@@ -1,54 +1,66 @@
 import { action } from '@storybook/addon-actions';
-import { select } from '@storybook/addon-knobs';
 
 import Button from '../button';
 import { Position } from '../common';
 
 import Popover from './Popover';
+import { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Popover>;
+
+const Content = () => (
+  <>
+    You’ll get this rate as long as we receive your 10 EUR within the next 51 hours.
+    <div>
+      <a href="test1">Test 1</a>
+    </div>
+    <div>
+      <a href="test1">Test 2</a>
+    </div>
+    <div>
+      <a href="test1">Test 3</a>
+    </div>
+  </>
+);
 
 export default {
   component: Popover,
   title: 'Dialogs/Popover',
-};
+  tags: ['autodocs'],
+  args: {
+    preferredPlacement: Position.BOTTOM,
+    title: 'Guaranteed rate',
+    content: <Content />,
+    children: <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>,
+  },
+  argTypes: {
+    preferredPlacement: {
+      control: 'select',
+      options: [Position.TOP, Position.RIGHT, Position.BOTTOM, Position.LEFT],
+    },
+  },
+} satisfies Meta<typeof Popover>;
 
-export const Basic = () => {
-  const preferredPlacement = select(
-    'preferredPlacement',
-    [
-      Position.TOP,
-      Position.RIGHT,
-      Position.BOTTOM,
-      Position.LEFT,
-      Position.LEFT_TOP,
-      Position.RIGHT_TOP,
-      Position.BOTTOM_RIGHT,
-      Position.BOTTOM_LEFT,
-    ],
-    Position.TOP,
-  );
+export const Basic: Story = {};
 
-  return (
-    <div className="text-xs-center">
-      <Popover
-        content={
-          <>
-            You’ll get this rate as long as we receive your 10 EUR within the next 51 hours.
-            <div>
-              <a href="test1">Test 1</a>
-            </div>
-            <div>
-              <a href="test1">Test 2</a>
-            </div>
-            <div>
-              <a href="test1">Test 3</a>
-            </div>
-          </>
-        }
-        preferredPlacement={preferredPlacement}
-        title="Guaranteed rate"
-      >
-        <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>
-      </Popover>
-    </div>
-  );
-};
+/**
+ * While it might be easier for sighted users to associate the content
+ * of a `Popover` with the surrounding and trigger content, it's likely
+ * much harder for people relying on the assistive-tech.
+ *
+ * For that reason, the `Popover` must always have an accessible name —
+ * if `title` prop is set, the component will use it automatically,
+ * otherwise `aria-label` must be provided instead.
+ *
+ * **NB:** If both props are provided, then screen readers will prioritise
+ * `aria-label` over `title`.
+ */
+export const WithoutVisibleTitle: Story = {
+  args: {
+    preferredPlacement: Position.BOTTOM,
+    title: undefined,
+    'aria-label': 'Guaranteed rate',
+    content: <Content />,
+    children: <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>,
+  },
+} satisfies Meta<typeof Popover>;

package/src/popover/Popover.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';
+import { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';
 
 import { Position, Typography } from '../common';
 import ResponsivePanel from '../common/responsivePanel';
@@ -23,11 +23,13 @@ export type PopoverPreferredPlacement =
 
 export interface PopoverProps {
   children?: React.ReactNode;
-  className?: string;
-  content: React.ReactNode;
+  title?: React.ReactNode;
+  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */
+  'aria-label'?: string;
   preferredPlacement?: PopoverPreferredPlacement;
+  content: React.ReactNode;
   onClose?: () => void;
-  title?: React.ReactNode;
+  className?: string;
 }
 
 function resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {
@@ -50,7 +52,10 @@ export default function Popover({
   preferredPlacement = Position.RIGHT,
   title,
   onClose,
+  'aria-label': ariaLabel,
 }: PopoverProps) {
+  const titleId = useId();
+
   const resolvedPlacement = resolvePlacement(preferredPlacement);
   useEffect(() => {
     if (resolvedPlacement !== preferredPlacement) {
@@ -81,6 +86,8 @@ export default function Popover({
           : children}
       </span>
       <ResponsivePanel
+        aria-label={ariaLabel}
+        aria-labelledby={title && !ariaLabel ? titleId : undefined}
         open={open}
         anchorRef={anchorReference}
         position={resolvedPlacement}
@@ -90,7 +97,7 @@ export default function Popover({
       >
         <div className="np-popover__content np-text-default-body">
           {title && (
-            <Title type={Typography.TITLE_BODY} className="m-b-1">
+            <Title type={Typography.TITLE_BODY} id={titleId} className="m-b-1">
               {title}
             </Title>
           )}

package/src/popover/__snapshots__/Popover.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Popover on desktop renders when is open 1`] = `
 <div
+  aria-labelledby=":r0:"
   class="np-panel np-panel--open np-popover__container"
   data-popper-escaped="true"
   data-popper-placement="right"
@@ -17,6 +18,7 @@ exports[`Popover on desktop renders when is open 1`] = `
     >
       <h4
         class="np-text-title-body m-b-1"
+        id=":r0:"
       >
         title
       </h4>

package/src/promoCard/PromoCard.spec.tsx

@@ -1,10 +1,8 @@
-import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
+import { render, fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 
 import PromoCard, { PromoCardProps, PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
 
-mockMatchMedia();
-
 describe('PromoCard', () => {
   const defaultProps = {
     title: 'Test Title',

package/src/radio/Radio.rtl.spec.tsx

@@ -1,9 +1,8 @@
 import Avatar, { AvatarType } from '../avatar';
-import { render, mockMatchMedia } from '../test-utils';
+import { render } from '../test-utils';
 
 import Radio from '.';
 
-mockMatchMedia();
 jest.mock('../common/hooks');
 
 describe('Radio', () => {

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -35,11 +35,11 @@ exports[`Radio shows the avatar when supplied 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px; --circle-icon-size: 24px;"
+          style="--circle-size: 48px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px; --circle-icon-size: 24px;"
+            style="--circle-size: 48px;"
           >
             HD
           </div>

package/src/statusIcon/StatusIcon.css

@@ -1,3 +1,9 @@
+.status-icon > svg {
+  height: 32px;
+  height: var(--size-32);
+  width: 32px;
+  width: var(--size-32);
+}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -13,6 +19,20 @@
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
+.status-circle-sm .status-icon > svg {
+  height: 14px;
+  height: var(--size-14);
+  width: 14px;
+  width: var(--size-14);
+}
+@media (max-width: 320px) {
+  .status-circle-sm .status-icon > svg {
+    width: 24px;
+    width: var(--size-24);
+    height: 24px;
+    height: var(--size-24);
+  }
+}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/statusIcon/StatusIcon.less

@@ -1,3 +1,8 @@
+.status-icon > svg {
+  height: var(--size-32);
+  width: var(--size-32);
+}
+
 .status-circle {
   .light {
     color: var(--color-contrast);
@@ -17,6 +22,18 @@
       }
     }
   }
+
+  &-sm {
+    .status-icon > svg {
+      height: var(--size-14);
+      width: var(--size-14);
+
+      @media (--screen-400-zoom) {
+        width: var(--size-24);
+        height: var(--size-24);
+      }
+    }
+  }
 }
 
 .status-circle.negative,

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,12 +1,15 @@
-import { Sentiment, Size } from '../common';
+import { Sentiment, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
-import StatusIcon, { type StatusIconProps } from '.';
+import StatusIcon from '.';
 
 mockMatchMedia();
 
 describe('StatusIcon', () => {
-  const renderStatusIcon = (props?: StatusIconProps) => {
+  const renderStatusIcon = (props?: {
+    sentiment?: Sentiment;
+    size?: SizeLarge | SizeMedium | SizeSmall;
+  }) => {
     return render(
       <StatusIcon
         sentiment={props?.sentiment || Sentiment.NEUTRAL}
@@ -22,8 +25,23 @@ describe('StatusIcon', () => {
 
     expect(screen.getByTestId('status-icon')).toHaveClass('neutral');
     expect(screen.getByTestId('status-icon')).toHaveClass('status-circle');
+    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-md');
   });
 
+  it.each([
+    [Size.SMALL as const, 'status-circle-sm'],
+    [Size.MEDIUM as const, 'status-circle-md'],
+    [Size.LARGE as const, 'status-circle-lg'],
+  ])(
+    "if prop 'size' equals '%s' is passed, renders the status icon with class '%s'",
+    (size, expectedClass) => {
+      renderStatusIcon({ size });
+
+      expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
+      cleanup();
+    },
+  );
+
   it.each([
     [Sentiment.NEGATIVE, Sentiment.NEGATIVE],
     [Sentiment.NEUTRAL, Sentiment.NEUTRAL],

package/src/statusIcon/StatusIcon.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Sentiment, Size } from '../common';
+import { Size, Sentiment } from '../common';
 
 import StatusIcon from './StatusIcon';
 
@@ -11,45 +11,22 @@ export default {
 
 type Story = StoryObj<typeof StatusIcon>;
 
-export const Variants: Story = {
-  render: () => (
-    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-      {[
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.WARNING,
-        Sentiment.NEUTRAL,
-        Sentiment.PENDING,
-      ].map((sentiment) => {
-        return (
-          <span
-            key={sentiment}
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexDirection: 'column',
-              minHeight: '150px',
-              alignItems: 'center',
-            }}
-          >
-            {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
-              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
-            })}
-          </span>
-        );
-      })}
+export const Basic: Story = {
+  render: (args) => (
+    <span style={{ display: 'flex' }}>
+      <StatusIcon {...args} />
     </span>
   ),
 };
 
-export const LegacySizes: Story = {
-  render: (args) => (
+export const Variants: Story = {
+  render: () => (
     <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
       {[
         Sentiment.POSITIVE,
         Sentiment.NEGATIVE,
-        Sentiment.WARNING,
         Sentiment.NEUTRAL,
+        Sentiment.WARNING,
         Sentiment.PENDING,
       ].map((sentiment) => {
         return (

package/src/statusIcon/StatusIcon.tsx

@@ -5,14 +5,9 @@ import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '.
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
-/**
- * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead
- */
-type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
-
 export type StatusIconProps = {
-  sentiment?: `${Sentiment}`;
-  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  sentiment: `${Sentiment}`;
+  size: SizeSmall | SizeMedium | SizeLarge;
 };
 
 const iconTypeMap = {
@@ -32,17 +27,17 @@ const mapLegacySize = {
   [String(Size.LARGE)]: 48,
 } satisfies Record<string, CircleProps['size']>;
 
-const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40 }: StatusIconProps) => {
+const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  const size = mapLegacySize[sizeProp] ?? sizeProp;
+  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
   return (
     <Circle
       as="span"
-      size={isTinyViewport && size < 40 ? 32 : size}
+      size={size}
       data-testid="status-icon"
-      className={clsx('status-circle', sentiment)}
+      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}
     >
       <Icon className={clsx('status-icon', iconColor)} />
     </Circle>