@transferwise/components 46.96.1 → 46.97.1

package/src/popover/Popover.css

@@ -24,8 +24,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -34,6 +32,34 @@
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/progressBar/ProgressBar.spec.tsx

@@ -3,15 +3,15 @@ import { render, screen } from '../test-utils';
 import ProgressBar from './ProgressBar';
 
 describe('ProgressBar', () => {
-  const props = {
-    description: 'description',
-    title: 'title',
-    progress: { value: 50, max: 100 },
-    textEnd: 'textEnd',
-    className: 'className',
-    id: 'id',
-  };
   describe('by default', () => {
+    const props = {
+      description: 'description',
+      title: 'title',
+      progress: { value: 50, max: 100 },
+      textEnd: 'textEnd',
+      className: 'className',
+      id: 'id',
+    };
     beforeEach(() => {
       render(<ProgressBar {...props} />);
     });
@@ -28,4 +28,29 @@ describe('ProgressBar', () => {
       expect(screen.getByText('textEnd')).toBeInTheDocument();
     });
   });
+  describe('with custom React node type as props', () => {
+    const props = {
+      description: <span>Custom Description</span>,
+      title: <span>Custom Title</span>,
+      progress: { value: 50, max: 100 },
+      textEnd: <span>Custom TextEnd</span>,
+      className: 'className',
+      id: 'id',
+    };
+    beforeEach(() => {
+      render(<ProgressBar {...props} />);
+    });
+
+    it('renders the custom title', () => {
+      expect(screen.getByText('Custom Title')).toBeInTheDocument();
+    });
+
+    it('renders the custom description', () => {
+      expect(screen.getByText('Custom Description')).toBeInTheDocument();
+    });
+
+    it('renders the custom textEnd', () => {
+      expect(screen.getByText('Custom TextEnd')).toBeInTheDocument();
+    });
+  });
 });

package/src/progressBar/ProgressBar.story.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import ProgressBar from './ProgressBar';
+import Info from '../info';
 
 export default {
   component: ProgressBar,
@@ -19,3 +20,17 @@ export const Basic: Story = {
     textEnd: '200 GBP to go',
   },
 };
+
+export const WithInfoTooltip: Story = {
+  args: {
+    description: <span>1,000 GBP</span>,
+    id: 'progress-bar-id',
+    title: (
+      <span>
+        Total limit <Info content="This is the total limit of your Wise account" />
+      </span>
+    ),
+    progress: { value: 800, max: 1000 },
+    textEnd: <span>200 GBP remaining</span>,
+  },
+};

package/src/progressBar/ProgressBar.tsx

@@ -8,11 +8,11 @@ import Title from '../title/Title';
 
 export type ProgressBarProps = {
   className?: string;
-  description?: string;
+  description?: React.ReactNode;
   id: string;
-  title: string;
+  title: React.ReactNode;
   progress: { value: number; max: number };
-  textEnd: string;
+  textEnd: React.ReactNode;
 };
 
 const ProgressBar = ({

package/src/statusIcon/StatusIcon.docs.mdx

@@ -10,7 +10,7 @@ By default, the component offers accessible names for all the icons, to ensure t
 Sentiment.NEGATIVE -> 'Error:'
 Sentiment.POSITIVE -> 'Success:'
 Sentiment.WARNING -> 'Warning:'
-Sentiment.PENDING -> 'Pending:'
+Status.PENDING -> 'Pending:'
 Sentiment.NEUTRAL -> 'Information:'
 
 // deprecated

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