@transferwise/components 0.0.0-experimental-a087360 → 0.0.0-experimental-5ac2a3c

package/build/index.esm.js

@@ -5396,8 +5396,19 @@ const FlowHeader = /*#__PURE__*/React.forwardRef(({
   const isVertical = layout === Layout$1.VERTICAL;
   return /*#__PURE__*/jsxs("div", {
     ref: reference,
-    className: classNames('np-flow-header', 'd-flex', 'flex-wrap', 'align-items-center', 'justify-content-between', 'flex__item--12', className),
-    children: [leftContent, rightContent, /*#__PURE__*/jsx("div", {
+    className: classNames('np-flow-header', 'd-flex', 'flex-wrap', 'align-items-center', className),
+    children: [/*#__PURE__*/jsx("div", {
+      className: classNames('np-flow-header__left', {
+        'flex__item--8': isVertical
+      }),
+      children: leftContent
+    }), /*#__PURE__*/jsx("div", {
+      className: classNames('align-items-center', 'd-flex', 'np-flow-header__right', 'justify-content-end', {
+        'flex__item--4 ': isVertical,
+        'order-2': !isVertical
+      }),
+      children: rightContent
+    }), /*#__PURE__*/jsx("div", {
       className: classNames('align-items-center', 'd-flex', 'justify-content-center', {
         'flex__item--12': isVertical,
         'order-1 flex-grow-1': !isVertical
@@ -5700,16 +5711,19 @@ var messages$5 = defineMessages({
 const AnimatedLabel = ({
   activeLabel,
   className,
-  labels
+  labels,
+  'aria-label': ariaLabel
 }) => {
-  return /*#__PURE__*/jsx(Body, {
-    type: Typography.BODY_LARGE_BOLD,
-    className: classNames('np-animated-label', className),
+  const numberLabels = labels.length - 1;
+  return /*#__PURE__*/jsx("div", {
+    "aria-label": ariaLabel,
+    className: classNames('np-animated-label', 'np-text-body-large-bold', className),
     children: labels.map((label, index) => {
       const nextLabel = index - 1;
       return /*#__PURE__*/jsx("div", {
-        className: classNames('text-xs-center', {
-          'np-animated-label--in text-ellipsis': index === activeLabel
+        className: classNames('text-xs-left', {
+          'np-animated-label--in': index === activeLabel,
+          'np-animated-label--out': nextLabel === activeLabel && nextLabel !== numberLabels
         }),
         children: label
       }, nextLabel);
@@ -5718,24 +5732,18 @@ const AnimatedLabel = ({
 };
 
 const BackButton = ({
+  label,
   className,
-  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
-    })
-  })
+  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]
 });
 BackButton.propTypes = {
-  'aria-label': PropTypes.string.isRequired,
   className: PropTypes.string,
   label: PropTypes.element,
   onClick: PropTypes.func
@@ -5765,9 +5773,21 @@ const FlowNavigation = ({
     onClick: onClose
   });
   const isSmall = clientWidth != null && clientWidth < Breakpoint.SMALL;
-  const isLarge = clientWidth != null && clientWidth >= Breakpoint.LARGE;
   const newAvatar = done ? null : avatar;
-  const displayGoBack = onGoBack != null && activeStep > 0;
+  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)
+        }),
+        onClick: onGoBack
+      }) : logo
+    });
+  };
   return /*#__PURE__*/jsx("div", {
     ref: reference,
     className: classNames('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
@@ -5779,24 +5799,12 @@ const FlowNavigation = ({
         'np-flow-navigation--xs-max': isSmall,
         // Size switches on parent container which may or may not have the same size as the window.
         'np-flow-navigation--sm': clientWidth != null && clientWidth >= Breakpoint.SMALL,
-        'np-flow-navigation--lg': isLarge
+        'np-flow-navigation--lg': clientWidth != null && clientWidth >= Breakpoint.LARGE
       }),
-      leftContent: /*#__PURE__*/jsxs(Fragment, {
-        children: [isSmall && displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
-          "aria-label": intl.formatMessage(messages$5.back),
-          onClick: onGoBack
-        }) : logo, isSmall && /*#__PURE__*/jsx(AnimatedLabel, {
-          className: "m-x-1",
-          labels: steps.map(step => step.label),
-          activeLabel: activeStep
-        })]
-      }),
-      rightContent: /*#__PURE__*/jsxs("div", {
-        className: classNames('d-flex', 'align-items-center', {
-          'order-2': isLarge
-        }),
+      leftContent: isSmall ? getLeftContentSmall() : logo,
+      rightContent: /*#__PURE__*/jsxs(Fragment, {
         children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: "m-x-1"
+          className: "separator"
         }), closeButton]
       }),
       bottomContent: !done && /*#__PURE__*/jsx(Stepper, {
@@ -5851,6 +5859,18 @@ const Header = ({
   title,
   className
 }) => {
+  if (!action) {
+    return /*#__PURE__*/jsx(Title, {
+      as: as,
+      type: Typography.TITLE_GROUP,
+      className: classNames('np-header', 'np-header__title', className),
+      children: title
+    });
+  }
+  if (as === 'legend') {
+    // eslint-disable-next-line no-console
+    console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
+  }
   return /*#__PURE__*/jsxs("div", {
     className: classNames('np-header', className),
     children: [/*#__PURE__*/jsx(Title, {
@@ -5858,7 +5878,7 @@ const Header = ({
       type: Typography.TITLE_GROUP,
       className: "np-header__title",
       children: title
-    }), action && /*#__PURE__*/jsx(HeaderAction, {
+    }), /*#__PURE__*/jsx(HeaderAction, {
       action: action
     })]
   });
@@ -8795,7 +8815,6 @@ const OverlayHeader = ({
   logo
 }) => {
   const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
-    size: Size.LARGE,
     onClick: onClose
   });
   return /*#__PURE__*/jsx("div", {
@@ -8803,10 +8822,9 @@ const OverlayHeader = ({
     children: /*#__PURE__*/jsx(FlowHeader, {
       className: "np-overlay-header__content p-a-3",
       leftContent: logo,
-      rightContent: /*#__PURE__*/jsxs("div", {
-        className: classNames('d-flex', 'align-items-center', 'order-2'),
+      rightContent: /*#__PURE__*/jsxs(Fragment, {
         children: [avatar, avatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: classNames('m-x-1')
+          className: "separator"
         }), closeButton]
       })
     })