@transferwise/components 0.0.0-experimental-5d1d6d8 → 0.0.0-experimental-1a9f157

package/src/popover/Popover.story.tsx

@@ -1,66 +1,54 @@
 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: Story = {};
+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,
+  );
 
-/**
- * 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>;
+  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>
+  );
+};

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

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

@@ -2,7 +2,6 @@
 
 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"
@@ -18,7 +17,6 @@ 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,8 +1,10 @@
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
 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,8 +1,9 @@
 import Avatar, { AvatarType } from '../avatar';
-import { render } from '../test-utils';
+import { render, mockMatchMedia } 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;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 24px;"
           >
             HD
           </div>

package/src/statusIcon/StatusIcon.css

@@ -1,9 +1,3 @@
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -19,20 +13,6 @@
 .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,8 +1,3 @@
-.status-icon > svg {
-  height: var(--size-32);
-  width: var(--size-32);
-}
-
 .status-circle {
   .light {
     color: var(--color-contrast);
@@ -22,18 +17,6 @@
       }
     }
   }
-
-  &-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,15 +1,12 @@
-import { Sentiment, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { Sentiment, Size } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
-import StatusIcon from '.';
+import StatusIcon, { type StatusIconProps } from '.';
 
 mockMatchMedia();
 
 describe('StatusIcon', () => {
-  const renderStatusIcon = (props?: {
-    sentiment?: Sentiment;
-    size?: SizeLarge | SizeMedium | SizeSmall;
-  }) => {
+  const renderStatusIcon = (props?: StatusIconProps) => {
     return render(
       <StatusIcon
         sentiment={props?.sentiment || Sentiment.NEUTRAL}
@@ -25,23 +22,8 @@ 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 { Size, Sentiment } from '../common';
+import { Sentiment, Size } from '../common';
 
 import StatusIcon from './StatusIcon';
 
@@ -11,22 +11,45 @@ export default {
 
 type Story = StoryObj<typeof StatusIcon>;
 
-export const Basic: Story = {
-  render: (args) => (
-    <span style={{ display: 'flex' }}>
-      <StatusIcon {...args} />
+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>
+        );
+      })}
     </span>
   ),
 };
 
-export const Variants: Story = {
-  render: () => (
+export const LegacySizes: Story = {
+  render: (args) => (
     <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
       {[
         Sentiment.POSITIVE,
         Sentiment.NEGATIVE,
-        Sentiment.NEUTRAL,
         Sentiment.WARNING,
+        Sentiment.NEUTRAL,
         Sentiment.PENDING,
       ].map((sentiment) => {
         return (

package/src/statusIcon/StatusIcon.tsx

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

package/build/types/constants.d.ts

@@ -1,11 +0,0 @@
-/**
- * This file holds repository-wide constants that are reusable by more than 1 component.
- */
-/**
- * A delay [ms] after which it's OK to update a live region content,
- * taking under consideration delayed programmatic refocusing
- * of triggering components (e.g., SelectInput) and Accessibility
- * Tree updates that prevent the screen reader announcements.
- */
-export declare const WDS_LIVE_REGION_DELAY_MS = 175;
-//# sourceMappingURL=constants.d.ts.map

package/build/types/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,MAAM,CAAC"}

package/src/constants.ts

@@ -1,11 +0,0 @@
-/**
- * This file holds repository-wide constants that are reusable by more than 1 component.
- */
-
-/**
- * A delay [ms] after which it's OK to update a live region content,
- * taking under consideration delayed programmatic refocusing
- * of triggering components (e.g., SelectInput) and Accessibility
- * Tree updates that prevent the screen reader announcements.
- */
-export const WDS_LIVE_REGION_DELAY_MS = 175;