@transferwise/components 46.165.0 → 46.165.1

package/src/Section/_stories/Section.test.story.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Header from '../../Header';
 import Section from '..';
 
@@ -13,17 +13,33 @@ export default {
 type Story = StoryObj<typeof Section>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Section>
-        <Header title="Default section" />
-        Section content without horizontal padding.
-      </Section>
-      <Section withHorizontalPadding>
-        <Header title="With horizontal padding" />
-        Section content with horizontal padding applied.
-      </Section>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Section>
+          <Header title={i18n.defaultTitle} />
+          {i18n.defaultContent}
+        </Section>
+        <Section withHorizontalPadding>
+          <Header title={i18n.paddedTitle} />
+          {i18n.paddedContent}
+        </Section>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      defaultTitle: { en: 'Default section', ar: 'قسم افتراضي' },
+      defaultContent: {
+        en: 'Section content without horizontal padding.',
+        ar: 'محتوى القسم بدون حشو أفقي.',
+      },
+      paddedTitle: { en: 'With horizontal padding', ar: 'مع حشو أفقي' },
+      paddedContent: {
+        en: 'Section content with horizontal padding applied.',
+        ar: 'محتوى القسم مع تطبيق الحشو الأفقي.',
+      },
+    },
+  }),
 };

package/src/SegmentedControl/_stories/SegmentedControl.test.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import SegmentedControl from '../SegmentedControl';
 
 export default {
@@ -11,19 +11,15 @@ export default {
 
 type Story = StoryObj<typeof SegmentedControl>;
 
-const inputSegments = [
-  { id: 'seg-one', label: 'One', value: 'one' },
-  { id: 'seg-two', label: 'Two', value: 'two' },
-  { id: 'seg-three', label: 'Three', value: 'three' },
-] as const;
-
-const viewSegments = [
-  { id: 'seg-alpha', label: 'Alpha', value: 'alpha', controls: 'panel-alpha' },
-  { id: 'seg-beta', label: 'Beta', value: 'beta', controls: 'panel-beta' },
-  { id: 'seg-gamma', label: 'Gamma', value: 'gamma', controls: 'panel-gamma' },
-] as const;
+type InteractiveSegmentedControlProps = {
+  inputSegments: readonly { id: string; label: string; value: string }[];
+  viewSegments: readonly { id: string; label: string; value: string; controls: string }[];
+};
 
-function InteractiveSegmentedControl() {
+function InteractiveSegmentedControl({
+  inputSegments,
+  viewSegments,
+}: InteractiveSegmentedControlProps) {
   const [inputValue, setInputValue] = useState('one');
   const [viewValue, setViewValue] = useState('beta');
 
@@ -48,6 +44,33 @@ function InteractiveSegmentedControl() {
 }
 
 export const RTLDiff: Story = {
-  render: () => <InteractiveSegmentedControl />,
-  ...withRTLDiff({ width: 'stretch', renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <InteractiveSegmentedControl
+        inputSegments={[
+          { id: 'seg-one', label: i18n.segmentOne, value: 'one' },
+          { id: 'seg-two', label: i18n.segmentTwo, value: 'two' },
+          { id: 'seg-three', label: i18n.segmentThree, value: 'three' },
+        ]}
+        viewSegments={[
+          { id: 'seg-alpha', label: i18n.segmentAlpha, value: 'alpha', controls: 'panel-alpha' },
+          { id: 'seg-beta', label: i18n.segmentBeta, value: 'beta', controls: 'panel-beta' },
+          { id: 'seg-gamma', label: i18n.segmentGamma, value: 'gamma', controls: 'panel-gamma' },
+        ]}
+      />
+    );
+  },
+  ...withRTLDiff({
+    width: 'stretch',
+    renderAs: 'iframe',
+    i18n: {
+      segmentOne: { en: 'One', ar: 'واحد' },
+      segmentTwo: { en: 'Two', ar: 'اثنان' },
+      segmentThree: { en: 'Three', ar: 'ثلاثة' },
+      segmentAlpha: { en: 'Alpha', ar: 'ألفا' },
+      segmentBeta: { en: 'Beta', ar: 'بيتا' },
+      segmentGamma: { en: 'Gamma', ar: 'غاما' },
+    },
+  }),
 };

package/src/SlidingPanel/_stories/SlidingPanel.rtl.test.story.tsx

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import {
+  useRtlDiffI18n,
+  withRTLDiff,
+  type I18nMap,
+} from '../../../.storybook/decorators/RtlDiffDecorator';
 import SlidingPanel from '../SlidingPanel';
 
 export default {
@@ -11,7 +15,7 @@ export default {
 
 type Story = StoryObj<typeof SlidingPanel>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe', width: 'stretch' });
+const iframeDiff = (i18n: I18nMap) => withRTLDiff({ renderAs: 'iframe', width: 'stretch', i18n });
 
 const containerStyle: React.CSSProperties = {
   position: 'relative',
@@ -27,45 +31,65 @@ const panelContentStyle: React.CSSProperties = {
 };
 
 export const PositionLeft: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <SlidingPanel open position="left">
-        <div style={panelContentStyle}>Left panel content</div>
-      </SlidingPanel>
-    </div>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div style={containerStyle}>
+        <SlidingPanel open position="left">
+          <div style={panelContentStyle}>{i18n.panelContent}</div>
+        </SlidingPanel>
+      </div>
+    );
+  },
+  ...iframeDiff({
+    panelContent: { en: 'Left panel content', ar: 'محتوى اللوحة اليسرى' },
+  }),
 };
 
 export const PositionRight: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <SlidingPanel open position="right">
-        <div style={panelContentStyle}>Right panel content</div>
-      </SlidingPanel>
-    </div>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div style={containerStyle}>
+        <SlidingPanel open position="right">
+          <div style={panelContentStyle}>{i18n.panelContent}</div>
+        </SlidingPanel>
+      </div>
+    );
+  },
+  ...iframeDiff({
+    panelContent: { en: 'Right panel content', ar: 'محتوى اللوحة اليمنى' },
+  }),
 };
 
 export const PositionLeftWithBorder: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <SlidingPanel open position="left" showSlidingPanelBorder>
-        <div style={panelContentStyle}>Left panel with border</div>
-      </SlidingPanel>
-    </div>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div style={containerStyle}>
+        <SlidingPanel open position="left" showSlidingPanelBorder>
+          <div style={panelContentStyle}>{i18n.panelContent}</div>
+        </SlidingPanel>
+      </div>
+    );
+  },
+  ...iframeDiff({
+    panelContent: { en: 'Left panel with border', ar: 'اللوحة اليسرى مع حدود' },
+  }),
 };
 
 export const PositionRightWithBorder: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <SlidingPanel open position="right" showSlidingPanelBorder>
-        <div style={panelContentStyle}>Right panel with border</div>
-      </SlidingPanel>
-    </div>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div style={containerStyle}>
+        <SlidingPanel open position="right" showSlidingPanelBorder>
+          <div style={panelContentStyle}>{i18n.panelContent}</div>
+        </SlidingPanel>
+      </div>
+    );
+  },
+  ...iframeDiff({
+    panelContent: { en: 'Right panel with border', ar: 'اللوحة اليمنى مع حدود' },
+  }),
 };

package/src/Snackbar/Snackbar.test.tsx

@@ -122,6 +122,22 @@ describe('Snackbar', () => {
     expect(screen.queryByText('Second message')).not.toBeInTheDocument();
   });
 
+  it('dismisses a delayed replacement on the timeout current when it appears', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
+    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
+    // Shortened while the replacement is still waiting out the exit transition.
+    rerender(<Snackbar text="Second message" timeout={1000} timestamp={2} />);
+
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+
+    advanceTimers(1000);
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+  });
+
   // Documents existing behaviour rather than endorsing it: clearing the text leaves the notification
   // on screen indefinitely, because the previous shouldComponentUpdate blocked the dismissal too.
   it('keeps the notification visible for as long as text is empty', () => {

package/src/Snackbar/Snackbar.tsx

@@ -1,10 +1,9 @@
-import { Component, createRef } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } 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;
@@ -25,102 +24,106 @@ interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'>
   visible: boolean;
 }
 
-export class Snackbar extends Component<SnackbarProps, SnackbarState> {
-  bodyRef = createRef<HTMLSpanElement>();
-  timeout = 0;
-  transitionTimeout = 0;
+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.
+  // Layout, not passive, so a notification is shown or replaced before the browser paints, as
+  // componentDidUpdate did. Both rules below are disabled on purpose: the dependency-less effect
+  // and its synchronous state updates are what keep this conversion behaviour-identical.
+  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
+  useLayoutEffect(() => {
+    const previousProps = committedProps.current;
+    committedProps.current = props;
+
+    const { action, text, 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();
+      }
+    };
 
-  constructor(props: SnackbarProps) {
-    super(props);
-    this.state = {
-      visible: false,
-      text: '',
+    const setLeaveTimeout = () => {
+      leaveTimeout.current = window.setTimeout(() => {
+        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));
+      }, committedProps.current.timeout);
     };
-  }
 
-  componentWillUnmount() {
-    window.clearTimeout(this.timeout);
-    window.clearTimeout(this.transitionTimeout);
-  }
+    const show = () => {
+      setState((current) => ({ ...current, visible: true, action, text }));
+      setLeaveTimeout();
+    };
 
-  shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState) {
-    if (!nextProps.text) {
-      return false;
+    if (!text) {
+      return;
     }
-    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) {
-      this.setState({ visible: true, action, text }, () => {
-        this.setLeaveTimeout();
-      });
+      show();
     } else if (previousProps.timestamp !== timestamp) {
-      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);
-        });
+      window.clearTimeout(leaveTimeout.current);
+
+      if (state.visible) {
+        setState((current) => ({ ...current, visible: false }));
+        transitionTimeout.current = window.setTimeout(() => {
+          updateWhileTextIsPresent(show);
+        }, CSS_TRANSITION_DURATION);
       } else {
-        this.setState({ visible: true, action, text });
-        this.setLeaveTimeout();
+        show();
       }
     }
-  }
-
-  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;
+  });
+  /* 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>
+  );
+};
 
 export default withNextPortal(Snackbar);

package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Snackbar } from '../Snackbar';
 
 export default {
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Snackbar>;
 
 const TIMEOUT = 10_000_000;
 
-function SnackbarStory({ action }: { action?: { label: string } }) {
+function SnackbarStory({ text, action }: { text: string; action?: { label: string } }) {
   const [timestamp, setTimestamp] = useState(0);
 
   useEffect(() => {
@@ -23,21 +23,33 @@ function SnackbarStory({ action }: { action?: { label: string } }) {
   }, []);
 
   return (
-    <Snackbar
-      text={<span>Transfer completed successfully</span>}
-      timestamp={timestamp}
-      timeout={TIMEOUT}
-      action={action}
-    />
+    <Snackbar text={<span>{text}</span>} timestamp={timestamp} timeout={TIMEOUT} action={action} />
   );
 }
 
 export const WithAction: Story = {
-  render: () => <SnackbarStory action={{ label: 'View' }} />,
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return <SnackbarStory text={i18n.text} action={{ label: i18n.actionLabel }} />;
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      text: { en: 'Transfer completed successfully', ar: 'تم إتمام التحويل بنجاح' },
+      actionLabel: { en: 'View', ar: 'عرض' },
+    },
+  }),
 };
 
 export const WithoutAction: Story = {
-  render: () => <SnackbarStory />,
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return <SnackbarStory text={i18n.text} />;
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      text: { en: 'Transfer completed successfully', ar: 'تم إتمام التحويل بنجاح' },
+    },
+  }),
 };

package/src/Stepper/_stories/Stepper.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn, within, expect, screen } from 'storybook/test';
 import Stepper from '../Stepper';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const STEPS = [
   {
@@ -90,18 +90,36 @@ export const ProgressbarWidth: Story = {
   },
 };
 
+// `steps` is a required prop, so `args` must supply it even though `render` builds its own
+// translated steps from the i18n map and ignores this value.
 const RTL_STEPS = [{ label: 'Amount' }, { label: 'You' }, { label: 'Review' }, { label: 'Pay' }];
 
 export const RTLDiff: Story = {
   args: {
     steps: RTL_STEPS,
   },
-  render: () => (
-    <div style={{ width: '80%', marginLeft: 'auto', marginRight: 'auto' }}>
-      <Stepper steps={RTL_STEPS} activeStep={0} />
-      <Stepper steps={RTL_STEPS} activeStep={2} />
-      <Stepper steps={RTL_STEPS} activeStep={4} />
-    </div>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const steps = [
+      { label: i18n.amount },
+      { label: i18n.you },
+      { label: i18n.review },
+      { label: i18n.pay },
+    ];
+    return (
+      <div style={{ width: '80%', marginLeft: 'auto', marginRight: 'auto' }}>
+        <Stepper steps={steps} activeStep={0} />
+        <Stepper steps={steps} activeStep={2} />
+        <Stepper steps={steps} activeStep={4} />
+      </div>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      amount: { en: 'Amount', ar: 'المبلغ' },
+      you: { en: 'You', ar: 'بياناتك' },
+      review: { en: 'Review', ar: 'المراجعة' },
+      pay: { en: 'Pay', ar: 'الدفع' },
+    },
+  }),
 };

package/src/Switch/_stories/Switch.test.story.tsx

@@ -3,7 +3,7 @@ import { expect, userEvent, within } from 'storybook/test';
 import { useState } from 'react';
 
 import { withVariantConfig } from '../../../.storybook/helpers';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
 import Switch from '../Switch';
 
@@ -103,15 +103,23 @@ export const Zoom400: Story = {
  * the thumb direction flips correctly between writing modes.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Field label="Unchecked">
-        <Switch checked={false} onClick={() => {}} />
-      </Field>
-      <Field label="Checked">
-        <Switch checked onClick={() => {}} />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Field label={i18n.unchecked}>
+          <Switch checked={false} onClick={() => {}} />
+        </Field>
+        <Field label={i18n.checked}>
+          <Switch checked onClick={() => {}} />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      unchecked: { en: 'Unchecked', ar: 'غير محدد' },
+      checked: { en: 'Checked', ar: 'محدد' },
+    },
+  }),
 };