@transferwise/components 46.97.0 → 46.97.1

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,7 +1,8 @@
-import { Sentiment, Size } from '../common';
+import { Sentiment, Size, Status } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
 import StatusIcon, { type StatusIconProps } from '.';
+import { StatusIconSentiment } from './StatusIcon';
 
 mockMatchMedia();
 
@@ -29,12 +30,13 @@ describe('StatusIcon', () => {
     [Sentiment.NEGATIVE, Sentiment.NEGATIVE],
     [Sentiment.NEUTRAL, Sentiment.NEUTRAL],
     [Sentiment.PENDING, Sentiment.PENDING],
+    [Status.PENDING, Status.PENDING],
     [Sentiment.POSITIVE, Sentiment.POSITIVE],
     [Sentiment.WARNING, Sentiment.WARNING],
   ])(
     "if prop 'sentiment' equals '%s' is passed, renders the status icon with class '%s'",
     (sentiment, expectedClass) => {
-      renderStatusIcon({ sentiment });
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
       cleanup();
@@ -48,6 +50,10 @@ describe('StatusIcon', () => {
 
     renderStatusIcon({ sentiment: Sentiment.PENDING });
     expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
+    cleanup();
+
+    renderStatusIcon({ sentiment: Status.PENDING });
+    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
   });
 
   it("'positive', 'negative', and 'neutral' sentiments generate 'light' colored icons", () => {
@@ -68,13 +74,13 @@ describe('StatusIcon', () => {
       ['Error', Sentiment.NEGATIVE],
       ['Success', Sentiment.POSITIVE],
       ['Warning', Sentiment.WARNING],
-      ['Pending', Sentiment.PENDING],
+      ['Pending', Status.PENDING],
       ['Information', Sentiment.NEUTRAL],
       ['Error', Sentiment.ERROR],
       ['Information', Sentiment.INFO],
       ['Success', Sentiment.SUCCESS],
     ])("should set '%s' as an accessible name for the '%s' sentiment", (label, sentiment) => {
-      renderStatusIcon({ sentiment });
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByLabelText(`${label}:`)).toBeInTheDocument();
     });

package/src/statusIcon/StatusIcon.story.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Sentiment, Size } from '../common';
+import { Sentiment, Size, Status } from '../common';
 
-import StatusIcon from './StatusIcon';
+import StatusIcon, { StatusIconSentiment } from './StatusIcon';
 import { storyConfig } from '../test-utils';
 
 export default {
@@ -42,6 +42,7 @@ export const Variants = storyConfig(
           Sentiment.WARNING,
           Sentiment.NEUTRAL,
           Sentiment.PENDING,
+          Status.PENDING,
         ].map((sentiment) => {
           return (
             <span
@@ -55,7 +56,9 @@ export const Variants = storyConfig(
               }}
             >
               {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
-                return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+                return (
+                  <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
+                );
               })}
             </span>
           );
@@ -74,7 +77,7 @@ export const LegacySizes: Story = {
         Sentiment.NEGATIVE,
         Sentiment.NEUTRAL,
         Sentiment.WARNING,
-        Sentiment.PENDING,
+        Status.PENDING,
       ].map((sentiment) => {
         return (
           <span
@@ -88,7 +91,9 @@ export const LegacySizes: Story = {
             }}
           >
             {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
-              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+              return (
+                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
+              );
             })}
           </span>
         );

package/src/statusIcon/StatusIcon.tsx

@@ -2,7 +2,7 @@ import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons'
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
@@ -13,8 +13,10 @@ import messages from './StatusIcon.messages';
  */
 type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 
+export type StatusIconSentiment = Sentiment | Status.PENDING;
+
 export type StatusIconProps = {
-  sentiment?: `${Sentiment}`;
+  sentiment?: `${StatusIconSentiment}`;
   size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /**
    * Override for the sentiment's-derived, default, accessible
@@ -34,7 +36,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
   const intl = useIntl();
 
   const iconMetaBySentiment: Record<
-    `${Sentiment}`,
+    `${Sentiment}` | Status.PENDING,
     {
       Icon: React.ElementType;
       defaultIconLabel: string;
@@ -52,7 +54,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
       Icon: Alert,
       defaultIconLabel: intl.formatMessage(messages.warningLabel),
     },
-    [Sentiment.PENDING]: {
+    [Status.PENDING]: {
       Icon: ClockBorderless,
       defaultIconLabel: intl.formatMessage(messages.pendingLabel),
     },

package/src/title/Title.test.story.tsx

@@ -1,5 +1,4 @@
 import { Typography } from '../common/propsValues/typography';
-import Modal from '../modal';
 import { lorem1000 } from '../test-utils';
 
 import Title from './Title';
@@ -7,19 +6,27 @@ import Title from './Title';
 export default {
   component: Title,
   title: 'Typography/Title/Tests',
+  args: {
+    children: lorem1000.replaceAll(' ', ''),
+  },
+  argTypes: {
+    as: {
+      table: {
+        disable: true,
+      },
+    },
+    type: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
-export const Hyphenation = () => {
+export const Hyphenation = ({ children }: { children: string }) => {
   return (
-    <Modal
-      open
-      body={
-        <Title type={Typography.TITLE_SCREEN} style={{ maxWidth: '600px' }}>
-          This Screen Title is mostly one very long word and it hyphenates{' '}
-          {lorem1000.replaceAll(' ', '')}
-        </Title>
-      }
-      onClose={() => {}}
-    />
+    <Title type={Typography.TITLE_SCREEN} style={{ maxWidth: '600px', wordWrap: 'break-word' }}>
+      {` ${children}`}
+    </Title>
   );
 };

package/src/title/Title.tsx

@@ -28,6 +28,7 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
 function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
   const mapping = titleTypeMapping[type];
   const isTypeSupported = mapping !== undefined;
+
   if (isTypeSupported) {
     const HeaderTag = as ?? mapping;
     return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;