@transferwise/components 0.0.0-experimental-6e04f56 → 0.0.0-experimental-542ae69

package/src/Snackbar/Snackbar.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import { Component, createRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import Button from '../Button';
 import Body from '../Body';
 import type { ThemeDark, ThemeLight } from '../common';
+import { DirectionContext } from '../Provider/Direction';
 import withNextPortal from '../WithNextPortal/WithNextPortal';
 
 const CSS_TRANSITION_DURATION = 400;
@@ -24,105 +25,102 @@ interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'>
   visible: boolean;
 }
 
-export const Snackbar = (props: SnackbarProps) => {
-  const bodyRef = useRef<HTMLSpanElement>(null);
-  const leaveTimeout = useRef(0);
-  const transitionTimeout = useRef(0);
-  /** The props of the last committed render, as `this.props` was in the class component. */
-  const committedProps = useRef(props);
-
-  const [state, setState] = useState<SnackbarState>({
-    visible: false,
-    text: '',
-  });
-
-  useEffect(
-    () => () => {
-      window.clearTimeout(leaveTimeout.current);
-      window.clearTimeout(transitionTimeout.current);
-    },
-    [],
-  );
-
-  // Runs after every render to mirror the componentDidUpdate lifecycle this component previously
-  // relied on, including the shouldComponentUpdate guard that ignored every update without text.
-  // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state
-  // updates are what keep this conversion behaviour-identical to the class component.
-  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-  useEffect(() => {
-    const previousProps = committedProps.current;
-    committedProps.current = props;
-
-    const { action, text, timeout, timestamp } = props;
-
-    // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the
-    // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is
-    // given text again. Preserved here deliberately to keep this refactor behaviour-identical.
-    const updateWhileTextIsPresent = (update: () => void) => {
-      if (committedProps.current.text) {
-        update();
-      }
-    };
+export class Snackbar extends Component<SnackbarProps, SnackbarState> {
+  bodyRef = createRef<HTMLSpanElement>();
+  timeout = 0;
+  transitionTimeout = 0;
 
-    const setLeaveTimeout = () => {
-      leaveTimeout.current = window.setTimeout(() => {
-        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));
-      }, timeout);
+  constructor(props: SnackbarProps) {
+    super(props);
+    this.state = {
+      visible: false,
+      text: '',
     };
+  }
 
-    const show = () => {
-      setState((current) => ({ ...current, visible: true, action, text }));
-      setLeaveTimeout();
-    };
+  componentWillUnmount() {
+    window.clearTimeout(this.timeout);
+    window.clearTimeout(this.transitionTimeout);
+  }
 
-    if (!text) {
-      return;
+  shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState) {
+    if (!nextProps.text) {
+      return false;
     }
+    if (
+      nextProps.timestamp === this.props.timestamp &&
+      nextState.visible === this.state.visible &&
+      nextState.text === this.state.text
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  setLeaveTimeout = () => {
+    const { timeout } = this.props;
+
+    this.timeout = window.setTimeout(() => {
+      this.setState({ visible: false });
+    }, timeout);
+  };
+
+  componentDidUpdate(previousProps: SnackbarProps) {
+    const { action, text, timestamp } = this.props;
 
     if (!previousProps.text) {
-      show();
+      this.setState({ visible: true, action, text }, () => {
+        this.setLeaveTimeout();
+      });
     } else if (previousProps.timestamp !== timestamp) {
-      window.clearTimeout(leaveTimeout.current);
-
-      if (state.visible) {
-        setState((current) => ({ ...current, visible: false }));
-        transitionTimeout.current = window.setTimeout(() => {
-          updateWhileTextIsPresent(show);
-        }, CSS_TRANSITION_DURATION);
+      window.clearTimeout(this.timeout);
+
+      if (this.state.visible) {
+        this.setState({ visible: false }, () => {
+          this.transitionTimeout = window.setTimeout(() => {
+            this.setState({ visible: true, action, text });
+            this.setLeaveTimeout();
+          }, CSS_TRANSITION_DURATION);
+        });
       } else {
-        show();
+        this.setState({ visible: true, action, text });
+        this.setLeaveTimeout();
       }
     }
-  });
-  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-
-  const { action, text, visible } = state;
-  const { timeout } = props;
-
-  return (
-    <div className="snackbar" aria-live="assertive" role="alert">
-      <CSSTransition
-        nodeRef={bodyRef}
-        in={visible}
-        classNames="snackbar__text-container"
-        timeout={{
-          appear: 0,
-          enter: timeout,
-          exit: CSS_TRANSITION_DURATION,
-        }}
-        unmountOnExit
-      >
-        <Body ref={bodyRef} as="span" className="snackbar__text">
-          {text}
-          {action ? (
-            <Button className="snackbar__text__action" v2 size="sm" onClick={action.onClick}>
-              {action.label}
-            </Button>
-          ) : null}
-        </Body>
-      </CSSTransition>
-    </div>
-  );
-};
+  }
+
+  render() {
+    const { action, text, visible } = this.state;
+    const { timeout } = this.props;
+
+    return (
+      <div className="snackbar" aria-live="assertive" role="alert">
+        <CSSTransition
+          nodeRef={this.bodyRef}
+          in={visible}
+          classNames="snackbar__text-container"
+          timeout={{
+            appear: 0,
+            enter: timeout,
+            exit: CSS_TRANSITION_DURATION,
+          }}
+          unmountOnExit
+        >
+          <Body ref={this.bodyRef} as="span" className="snackbar__text">
+            {text}
+            {action ? (
+              <Button className="snackbar__text__action" v2 size="sm" onClick={action.onClick}>
+                {action.label}
+              </Button>
+            ) : null}
+          </Body>
+        </CSSTransition>
+      </div>
+    );
+  }
+}
+
+Snackbar.contextType = DirectionContext;
 
 export default withNextPortal(Snackbar);

package/src/Stepper/Stepper.tsx

@@ -73,7 +73,7 @@ const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) =>
         className={clsx(
           'hidden-xs',
           'tw-stepper__step',
-          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',
+          active ? 'wds-text-body-default-bold tw-stepper__step--active' : 'wds-text-body-default',
           clickable && 'tw-stepper__step--clickable',
           step.hoverLabel && 'tw-stepper__step--has-tooltip',
         )}

package/src/Table/Header/TableHeader.tsx

@@ -50,7 +50,7 @@ const TableHeader = ({
     // If headers are empty, we still should render empty headers to keep visual consistency
     return (
       <div
-        className="np-table-header-content np-text-body-default-bold"
+        className="np-table-header-content wds-text-body-default-bold"
         data-testid="np-table-empty-header"
       >
         &nbsp;

package/src/Table/StatusText/TableStatusText.test.tsx

@@ -13,7 +13,7 @@ describe('TableStatusText Component', () => {
   it('renders the text and applies the default class', () => {
     renderComponent();
     expect(screen.getByText('Status Text')).toBeInTheDocument();
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default');
+    expect(screen.getByText('Status Text')).toHaveClass('wds-text-body-default');
   });
 
   it('applies the custom class name', () => {
@@ -23,12 +23,12 @@ describe('TableStatusText Component', () => {
 
   it('applies the default typography class when typography is not provided', () => {
     renderComponent();
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default');
+    expect(screen.getByText('Status Text')).toHaveClass('wds-text-body-default');
   });
 
   it('applies the typography class when typography equals `default-bold`', () => {
     renderComponent({ typography: 'default-bold' });
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
+    expect(screen.getByText('Status Text')).toHaveClass('wds-text-body-default-bold');
   });
 
   it('does not render any icon when status is not provided', () => {
@@ -39,14 +39,14 @@ describe('TableStatusText Component', () => {
 
   it('applies the typography and status classes, renders the error icon when status equals `error`', () => {
     renderComponent({ status: 'error' });
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
+    expect(screen.getByText('Status Text')).toHaveClass('wds-text-body-default-bold');
     expect(screen.getByText('Status Text')).toHaveClass('np-table-content--error');
     expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
   });
 
   it('applies the typography and status classes, renders the success icon when status equals `success`', () => {
     renderComponent({ status: 'success' });
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
+    expect(screen.getByText('Status Text')).toHaveClass('wds-text-body-default-bold');
     expect(screen.getByText('Status Text')).toHaveClass('np-table-content--success');
     expect(screen.getByTestId('check-icon')).toBeInTheDocument();
   });

package/src/Table/Table.css

@@ -40,10 +40,16 @@
 }
 .np-table-inner-container {
   background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
+  background-position: left center,
+      right center,
+      left center,
+      right center;
   background-repeat: no-repeat;
   background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
+  background-size: 15px 100%,
+      15px 100%,
+      15px 100%,
+      15px 100%;
   background-attachment: local, local, scroll, scroll;
   overflow-x: auto;
   border-radius: 10px;
@@ -138,7 +144,9 @@
   padding-inline-end: 0;
 }
 .np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default {
+.np-table-cell.np-table-cell--right > .np-text-body-default,
+.np-table-header.np-table-header--right > .wds-text-body-default,
+.np-table-cell.np-table-cell--right > .wds-text-body-default {
   text-align: end;
 }
 .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
@@ -197,7 +205,8 @@
 .np-table-cell--primary {
   min-inline-size: 200px;
 }
-.np-table-cell--currency .np-text-body-default {
+.np-table-cell--currency .np-text-body-default,
+.np-table-cell--currency .wds-text-body-default {
   white-space: nowrap;
 }
 .np-table-cell .tw-chevron {
@@ -214,7 +223,8 @@
   background-color: var(--color-background-neutral);
   padding: 0;
 }
-.np-table-cell .np-text-body-default-bold {
+.np-table-cell .np-text-body-default-bold,
+.np-table-cell .wds-text-body-default-bold {
   display: flex;
   align-items: center;
   color: #37517e;

package/src/Table/Table.less

@@ -59,10 +59,18 @@
       linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
       linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),
       linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-    background-position: left center, right center, left center, right center;
+    background-position:
+      left center,
+      right center,
+      left center,
+      right center;
     background-repeat: no-repeat;
     background-color: var(--color-contrast-overlay);
-    background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
+    background-size:
+      15px 100%,
+      15px 100%,
+      15px 100%,
+      15px 100%;
     background-attachment: local, local, scroll, scroll;
     overflow-x: auto;
     border-radius: @table-inner-border-radius;
@@ -188,7 +196,8 @@
 
   &-header.np-table-header--right,
   &-cell.np-table-cell--right {
-    > .np-text-body-default {
+    > .np-text-body-default,
+    > .wds-text-body-default {
       text-align: right;
     }
   }
@@ -249,7 +258,8 @@
     }
 
     &--currency {
-      .np-text-body-default {
+      .np-text-body-default,
+      .wds-text-body-default {
         white-space: nowrap;
       }
     }
@@ -266,7 +276,8 @@
       padding: 0;
     }
 
-    .np-text-body-default-bold {
+    .np-text-body-default-bold,
+    .wds-text-body-default-bold {
       display: flex;
       align-items: center;
       color: var(--color-content-primary);
@@ -306,7 +317,7 @@
     &-media {
       flex-shrink: 0;
     }
-    
+
     &-body {
       display: flex;
       flex-direction: column;

package/src/Tabs/Tab/Tab.tsx

@@ -49,7 +49,7 @@ const Tab = forwardRef(function Tab(
   return (
     <li
       ref={reference}
-      className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
+      className={clsx('tabs__tab', selected ? 'wds-text-body-large-bold' : 'wds-text-body-large', {
         'tabs__tab--selected': selected,
         clickable: !disabled,
         disabled,

package/src/Tag/Tag.tsx

@@ -58,7 +58,7 @@ const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
           'wds-tag',
           `wds-tag--${size}`,
           `wds-tag--${sentiment}`,
-          'np-text-body-default-bold',
+          'wds-text-body-default-bold',
           className,
         )}
       >

package/src/Tag/_stories/Tag.story.tsx

@@ -29,7 +29,7 @@ const PHOTO = '../card-payment-bakery.webp';
 
 const Label = ({ children }: { children: ReactNode }) => (
   <span
-    className="np-text-body-default"
+    className="wds-text-body-default"
     style={{
       color: 'var(--color-content-secondary)',
       textTransform: 'capitalize',

package/src/Tile/Tile.css

@@ -25,7 +25,8 @@
 .np-theme-personal .np-tile.decision:active {
   background-color: var(--color-background-neutral-active);
 }
-.np-theme-personal .np-tile.decision .np-text-body-default {
+.np-theme-personal .np-tile.decision .np-text-body-default,
+.np-theme-personal .np-tile.decision .wds-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/Tile/Tile.less

@@ -28,7 +28,8 @@
         background-color: var(--color-background-neutral-active);
       }
 
-      .np-text-body-default {
+      .np-text-body-default,
+      .wds-text-body-default {
         color: var(--color-content-secondary);
       }
     }

package/src/Typeahead/Typeahead.css

@@ -180,12 +180,14 @@
 .np-theme-personal .typeahead .np-chip {
   margin-block-start: 9px !important;
 }
-.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
+.np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
   padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
+  .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
     padding-inline-end: 32px;
     padding-inline-end: var(--size-32);
   }

package/src/Typeahead/Typeahead.less

@@ -232,7 +232,8 @@
       margin-top: 9px !important;
     }
     .np-chip--removable {
-      .np-text-body-default-bold {
+      .np-text-body-default-bold,
+      .wds-text-body-default-bold {
         padding-right: var(--size-16);
         @media (--screen-400-zoom) {
           padding-right: var(--size-32);

package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx

@@ -30,10 +30,10 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
     >
       <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <Highlight value={label} query={query} />
-        {note && <span className="np-text-body-default m-l-1">{note}</span>}
+        {note && <span className="wds-text-body-default m-l-1">{note}</span>}
         {secondary && (
           <Highlight
-            className="np-text-body-default text-ellipsis"
+            className="wds-text-body-default text-ellipsis"
             value={secondary}
             query={query}
           />

package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx

@@ -78,8 +78,8 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
       <div className="droppable-default-card" aria-hidden={isComplete}>
         <div className="droppable-card-content">
           <div className="m-b-3">{this.getImage()}</div>
-          {usLabel && <h4 className="np-text-title-body m-b-1">{usLabel}</h4>}
-          {usPlaceholder && <p className="np-text-body-large m-b-3">{String(usPlaceholder)}</p>}
+          {usLabel && <h4 className="wds-text-title-body m-b-1">{usLabel}</h4>}
+          {usPlaceholder && <p className="wds-text-body-large m-b-3">{String(usPlaceholder)}</p>}
           <label
             className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}
             role="button"

package/src/_deprecated/ActionButton/ActionButton.tsx

@@ -36,7 +36,7 @@ const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
       type="button"
       className={clsx(
         'np-action-btn',
-        'np-text-body-default-bold',
+        'wds-text-body-default-bold',
         priority === Priority.TERTIARY
           ? 'btn-priority-3'
           : priority === Priority.SECONDARY

package/src/_deprecated/Avatar/Avatar.tsx

@@ -86,7 +86,7 @@ const Avatar: React.FC<AvatarProps> = ({
       className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
         'tw-avatar--outlined': outlined,
         'tw-avatar--branded': Boolean(backgroundColorFromSeed),
-        'np-text-title-body': type === 'initials',
+        'wds-text-title-body': type === 'initials',
       })}
       aria-label={ariaLabel}
     >

package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css

@@ -8,7 +8,8 @@
   color: var(--color-sentiment-content-primary);
   margin-block-end: 0;
 }
-.critical-comms .alert .np-text-title-body {
+.critical-comms .alert .np-text-title-body,
+.critical-comms .alert .wds-text-title-body {
   color: var(--color-sentiment-content-primary);
 }
 .critical-comms .status-circle.negative {

package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less

@@ -7,7 +7,8 @@
     color: var(--color-sentiment-content-primary);
     margin-bottom: 0;
 
-    .np-text-title-body {
+    .np-text-title-body,
+    .wds-text-title-body {
       color: var(--color-sentiment-content-primary);
     }
   }

package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx

@@ -74,7 +74,7 @@ export const Variants: StoryObj<StoryArgs> = {
   render: ({ hasTitleOnly, ...args }: StoryArgs) => (
     <div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">Has Title Only</div>
+        <div className="wds-text-title-body m-b-1">Has Title Only</div>
         <NavigationOption
           {...args}
           content={null}
@@ -83,7 +83,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">Full Content</div>
+        <div className="wds-text-title-body m-b-1">Full Content</div>
         <NavigationOption
           {...args}
           content={hasTitleOnly ? null : args.content}
@@ -92,7 +92,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">With Icon</div>
+        <div className="wds-text-title-body m-b-1">With Icon</div>
         <NavigationOption
           {...args}
           media={<BankIcon size={24} />}
@@ -101,7 +101,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">With Icon Avatar</div>
+        <div className="wds-text-title-body m-b-1">With Icon Avatar</div>
         <NavigationOption
           {...args}
           showMediaCircle={false}
@@ -115,7 +115,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">With Contact Avatar</div>
+        <div className="wds-text-title-body m-b-1">With Contact Avatar</div>
         <NavigationOption
           {...args}
           showMediaCircle={false}
@@ -125,7 +125,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-t-4 m-b-2">
-        <div className="title-4 m-b-1">Not recommended usage</div>
+        <div className="wds-text-title-body m-b-1">Not recommended usage</div>
         <p>
           Rendering an Avatar on top of showMediaCircle causes the Avatar background-colour and the
           circle background-colour to overlap which also causes clipping issues with the Badge