@transferwise/components 0.0.0-experimental-3ab6847 → 0.0.0-experimental-0e85724

package/src/ListItem/_stories/ListItem.story.tsx

@@ -60,6 +60,7 @@ export default {
     disabled: false,
     disabledPromptMessage: undefined,
     spotlight: undefined,
+    paddingY: undefined,
     inverted: false,
     valueColumnWidth: undefined,
   },
@@ -73,6 +74,13 @@ export default {
         inactive: 'inactive',
       },
     },
+    paddingY: {
+      control: 'radio',
+      options: ['unset (undefined)', 12, 24],
+      mapping: {
+        'unset (undefined)': undefined,
+      },
+    },
   },
 } satisfies Meta<ListItemProps>;
 

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/i18n/de.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Ländercode",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonnummer",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Vorwahl",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
   "neptune.StatusIcon.iconLabel.error": "Fehler:",

package/src/i18n/fr.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
   "neptune.PhoneNumberInput.countryCodeLabel": "Code pays",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numéro de téléphone",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Indicatif",
   "neptune.Select.searchPlaceholder": "Recherche...",
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
   "neptune.StatusIcon.iconLabel.error": "Erreur :",

package/src/i18n/th.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",
   "neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "คำนำหน้า",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
   "neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",

package/src/main.css

@@ -23806,6 +23806,11 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-24 {
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 0;
+}
 .wds-list-item + .wds-list-item-spotlight,
 .wds-list-item-spotlight + .wds-list-item {
   margin-block-start: 16px;