@transferwise/components 0.0.0-experimental-a087360 → 0.0.0-experimental-73ab65e

package/src/overlayHeader/OverlayHeader.css

@@ -1 +1 @@
-.np-overlay-header .np-overlay-header__content{max-width:1164px;min-height:97px;min-width:320px;width:100%}.np-theme-personal .np-overlay-header{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral)}.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,.np-theme-personal--dark .np-overlay-header .np-flow-header__left path,.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path{fill:var(--color-interactive-primary)}
+.np-overlay-header .np-overlay-header__content{max-width:1164px;min-height:97px;min-width:320px;width:100%}.np-overlay-header .np-overlay-header__content .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);width:1px}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important;margin-right:var(--size-16)!important}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator,html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-left:16px!important;margin-left:var(--size-16)!important}html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important;margin-right:var(--size-16)!important}.np-theme-personal .np-overlay-header{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral)}.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,.np-theme-personal--dark .np-overlay-header .np-flow-header__left path,.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path{fill:var(--color-interactive-primary)}

package/src/overlayHeader/OverlayHeader.js

@@ -1,24 +1,22 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { Size } from '../common';
 import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader/FlowHeader';
 import Logo from '../logo';
 
 const OverlayHeader = ({ avatar, onClose, logo }) => {
-  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
+  const closeButton = onClose && <CloseButton onClick={onClose} />;
   return (
     <div className="np-overlay-header d-flex justify-content-center">
       <FlowHeader
         className="np-overlay-header__content p-a-3"
         leftContent={logo}
         rightContent={
-          <div className={classNames('d-flex', 'align-items-center', 'order-2')}>
+          <>
             {avatar}
-            {avatar && closeButton && <span className={classNames('m-x-1')} />}
+            {avatar && closeButton && <span className="separator" />}
             {closeButton}
-          </div>
+          </>
         }
       />
     </div>

package/src/overlayHeader/OverlayHeader.less

@@ -7,6 +7,14 @@
     width: 100%;
     min-width: 320px;
     max-width: 1164px;
+
+    .separator {
+      .m-x-2;
+
+      height: var(--size-32);
+      width: 1px;
+      background-color: var(--color-border-neutral);
+    }
   }
 
   .np-theme-personal & {

package/src/overlayHeader/OverlayHeader.spec.js

@@ -20,7 +20,7 @@ describe('OverlayHeader', () => {
 
   it('renders separator only if avatar and onClose are provided', () => {
     const { container } = render(<OverlayHeader {...props} />);
-    expect(container.querySelector('span.m-x-1')).toBeInTheDocument();
+    expect(container.querySelector('.separator')).toBeInTheDocument();
   });
 
   it("doesn't render separator if avatar or onClose are not provided", () => {

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.js.snap

@@ -6,16 +6,20 @@ exports[`OverlayHeader renders as expected 1`] = `
     class="np-overlay-header d-flex justify-content-center"
   >
     <div
-      class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-overlay-header__content p-a-3"
+      class="np-flow-header d-flex flex-wrap align-items-center np-overlay-header__content p-a-3"
     >
-      <img
-        alt="logo_desktop"
-        height="24"
-        src="img_desktop"
-        width="138"
-      />
       <div
-        class="d-flex align-items-center order-2"
+        class="np-flow-header__left"
+      >
+        <img
+          alt="logo_desktop"
+          height="24"
+          src="img_desktop"
+          width="138"
+        />
+      </div>
+      <div
+        class="align-items-center d-flex np-flow-header__right justify-content-end order-2"
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -27,11 +31,11 @@ exports[`OverlayHeader renders as expected 1`] = `
           </div>
         </div>
         <span
-          class="m-x-1"
+          class="separator"
         />
         <button
           aria-label="Close"
-          class="np-close-button close btn-link text-no-decoration np-close-button--x-large"
+          class="np-close-button close btn-link text-no-decoration np-close-button--large"
           type="button"
         >
           <span