@transferwise/components 45.21.3 → 45.23.0

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-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)}
+.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)}

package/src/overlayHeader/OverlayHeader.js

@@ -1,22 +1,24 @@
+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 onClick={onClose} />;
+  const closeButton = onClose && <CloseButton size={Size.LARGE} 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="separator" />}
+            {avatar && closeButton && <span className={classNames('m-x-1')} />}
             {closeButton}
-          </>
+          </div>
         }
       />
     </div>

package/src/overlayHeader/OverlayHeader.less

@@ -7,14 +7,6 @@
     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('.separator')).toBeInTheDocument();
+    expect(container.querySelector('span.m-x-1')).toBeInTheDocument();
   });
 
   it("doesn't render separator if avatar or onClose are not provided", () => {

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

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

package/src/title/Title.tsx

@@ -18,7 +18,7 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     /**
      * Default value will based one `type` prop
      */
-    as?: 'span' | 'label' | 'li' | Heading;
+    as?: 'span' | 'label' | 'li' | 'legend' | Heading;
     /**
      * Default value: {@link DEFAULT_TYPE}
      */

package/src/flowNavigation/animatedLabel/AnimatedLabel.story.js

@@ -1,22 +0,0 @@
-import { select } from '@storybook/addon-knobs';
-
-import AnimatedLabel from './AnimatedLabel';
-
-export default {
-  component: AnimatedLabel,
-  title: 'Internal/AnimatedLabel',
-};
-
-export const Basic = () => {
-  const labels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-  const activeLabel = select('active label', labels, 10);
-
-  return (
-    <div style={{ width: '120px' }} className="p-a-1">
-      <AnimatedLabel
-        labels={labels.map((element) => `label-${element}`)}
-        activeLabel={activeLabel}
-      />
-    </div>
-  );
-};