@transferwise/components 0.0.0-experimental-62f7040 → 0.0.0-experimental-adfacd1

package/build/index.esm.js

@@ -362,6 +362,11 @@ const DEFAULT_LOCALE = 'en-GB';
  * @type {string[]}
  */
 const RTL_LANGUAGES = ['ar', 'he'];
+
+/**
+ * @deprecated The source of truth for supported languages lives in Crab.
+ * @type {string[]}
+ */
 const SUPPORTED_LANGUAGES = [DEFAULT_LANG, 'de', 'es', 'fr', 'hu', 'id', 'it', 'ja', 'pl', 'pt', 'ro', 'ru', 'th', 'tr', 'uk', 'zh'];
 
 /**
@@ -391,8 +396,13 @@ function adjustLocale(locale) {
  * Provides corresponding lang (iso2) for provided locale
  * if locale is invalid or language is unsupported returns null
  *
+ * @deprecated The use of this function almost always breaks language variants
+ * e.g. Simplified and Traditional Chinese.
+ * There should be no use case for this function.
+ * To select the correct translations from a translations object, pass the
+ * locale directly into Crab's getLocalisedMessages.
  * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null}
+ * @returns {string|null} two-letter ISO639-1 language
  */
 function getLangFromLocale(locale) {
   const adjustedLocale = adjustLocale(locale);
@@ -5388,7 +5398,7 @@ const FlowHeader = /*#__PURE__*/React.forwardRef(({
     ref: reference,
     className: classNames('np-flow-header', 'd-flex', 'flex-wrap', 'align-items-center', className),
     children: [/*#__PURE__*/jsx("div", {
-      className: classNames('np-flow-header__left', {
+      className: classNames('np-flow-header__left', 'd-flex', 'align-items-center', 'justify-content-between', {
         'flex__item--8': isVertical
       }),
       children: leftContent
@@ -5493,11 +5503,6 @@ const Logo = ({
   });
   const isSmall = clientWidth < Breakpoint.SMALL;
   const LogoSvg = isSmall ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`] : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
-
-  // If clientWidth is not defined, don't render anything
-  if (clientWidth === null) {
-    return null;
-  }
   return /*#__PURE__*/jsx(LogoSvg, {
     className: classNames('np-logo-svg', className),
     alt: type === LogoType.WISE ? 'Wise' : 'Wise business'
@@ -5701,19 +5706,16 @@ var messages$5 = defineMessages({
 const AnimatedLabel = ({
   activeLabel,
   className,
-  labels,
-  'aria-label': ariaLabel
+  labels
 }) => {
-  const numberLabels = labels.length - 1;
-  return /*#__PURE__*/jsx("div", {
-    "aria-label": ariaLabel,
-    className: classNames('np-animated-label', 'np-text-body-large-bold', className),
+  return /*#__PURE__*/jsx(Body, {
+    type: Typography.BODY_LARGE_BOLD,
+    className: classNames('np-animated-label', className),
     children: labels.map((label, index) => {
       const nextLabel = index - 1;
       return /*#__PURE__*/jsx("div", {
-        className: classNames('text-xs-left', {
-          'np-animated-label--in': index === activeLabel,
-          'np-animated-label--out': nextLabel === activeLabel && nextLabel !== numberLabels
+        className: classNames('text-xs-center', {
+          'np-animated-label--in text-ellipsis': index === activeLabel
         }),
         children: label
       }, nextLabel);
@@ -5722,18 +5724,24 @@ const AnimatedLabel = ({
 };
 
 const BackButton = ({
-  label,
   className,
-  onClick
-}) => /*#__PURE__*/jsxs("button", {
-  type: "button",
-  className: classNames('np-back-button', 'align-items-center', 'btn-unstyled', className),
-  onClick: onClick,
-  children: [/*#__PURE__*/jsx(ArrowLeft, {
-    size: 24
-  }), label]
+  onClick,
+  'aria-label': ariaLabel
+}) => /*#__PURE__*/jsx(Avatar, {
+  type: AvatarType.ICON,
+  size: 40,
+  children: /*#__PURE__*/jsx("button", {
+    type: "button",
+    "aria-label": ariaLabel,
+    className: classNames('np-back-button', 'btn-unstyled', className),
+    onClick: onClick,
+    children: /*#__PURE__*/jsx(ArrowLeft, {
+      size: 24
+    })
+  })
 });
 BackButton.propTypes = {
+  'aria-label': PropTypes.string.isRequired,
   className: PropTypes.string,
   label: PropTypes.element,
   onClick: PropTypes.func
@@ -5766,16 +5774,17 @@ const FlowNavigation = ({
   const newAvatar = done ? null : avatar;
   const getLeftContentSmall = () => {
     const displayGoBack = onGoBack != null && activeStep > 0;
-    return /*#__PURE__*/jsx(Fragment, {
-      children: displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
-        label: /*#__PURE__*/jsx(AnimatedLabel, {
-          className: "m-x-1",
-          labels: steps.map(step => step.label),
-          activeLabel: activeStep - 1,
-          "aria-label": intl.formatMessage(messages$5.back)
-        }),
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
+        "aria-label": intl.formatMessage(messages$5.back),
         onClick: onGoBack
-      }) : logo
+      }) : logo, /*#__PURE__*/jsx(AnimatedLabel, {
+        className: "m-x-1",
+        labels: steps.map(step => step.label),
+        activeLabel: activeStep
+      }), /*#__PURE__*/jsx("span", {
+        className: "m-x-1"
+      })]
     });
   };
   return /*#__PURE__*/jsx("div", {
@@ -5784,7 +5793,7 @@ const FlowNavigation = ({
       'np-flow-navigation--border-bottom': !done
     }),
     children: /*#__PURE__*/jsx(FlowHeader, {
-      className: classNames('np-flow-navigation__content p-x-3', {
+      className: classNames('np-flow-navigation__content', isSmall ? 'p-x-2' : 'p-x-3', {
         'np-flow-navigation--hidden': !clientWidth,
         'np-flow-navigation--xs-max': isSmall,
         // Size switches on parent container which may or may not have the same size as the window.
@@ -5794,7 +5803,7 @@ const FlowNavigation = ({
       leftContent: isSmall ? getLeftContentSmall() : logo,
       rightContent: /*#__PURE__*/jsxs(Fragment, {
         children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: "separator"
+          className: "m-x-1"
         }), closeButton]
       }),
       bottomContent: !done && /*#__PURE__*/jsx(Stepper, {
@@ -8807,6 +8816,7 @@ const OverlayHeader = ({
   logo
 }) => {
   const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
+    size: Size.LARGE,
     onClick: onClose
   });
   return /*#__PURE__*/jsx("div", {
@@ -8816,7 +8826,7 @@ const OverlayHeader = ({
       leftContent: logo,
       rightContent: /*#__PURE__*/jsxs(Fragment, {
         children: [avatar, avatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: "separator"
+          className: classNames('m-x-1')
         }), closeButton]
       })
     })