@transferwise/components 0.0.0-experimental-a6aaad9 → 0.0.0-experimental-a39eaa6

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -21,7 +21,6 @@ const wait = async (ms: number) =>
   });
 
 const ANIMATION_DURATION = 200; // 150ms animation + 50ms buffer
-const ENTRY_ANIMATION_DURATION = 450; // 400ms animation + 50ms buffer
 
 const longDescription =
   'We have detected unusual activity on your account that does not match your typical usage patterns. To protect your funds and personal information, we have temporarily restricted access. Please verify your identity to restore full access to your account.';
@@ -151,7 +150,7 @@ export const MobileVariants: Story = {
   ...withVariantConfig(['mobile']),
 };
 
-/** Neutral background regression test with page content scrolled under the sticky banner. */
+/** Neutral background regression test with page content scrolled under the mobile overhang. */
 export const BackgroundIsNotTransparent: Story = {
   args: {
     sentiment: 'neutral',
@@ -198,7 +197,6 @@ export const BackgroundIsNotTransparent: Story = {
 
     if (scrollContainer) {
       scrollContainer.scrollTop = 250;
-      await wait(ENTRY_ANIMATION_DURATION);
     }
   },
   ...withVariantConfig(['mobile'], {
@@ -208,25 +206,6 @@ export const BackgroundIsNotTransparent: Story = {
   }),
 };
 
-/** Mobile entry animation visual regression test. */
-export const AnimatedEntryMobile: Story = {
-  render: function Render() {
-    return (
-      <CriticalBanner
-        sentiment="negative"
-        title="Your account is restricted."
-        description="Review your personal details to get your account active again."
-        action={{ label: 'Review details', onClick: fn() }}
-      />
-    );
-  },
-  ...withVariantConfig(['mobile'], {
-    parameters: {
-      chromatic: { pauseAnimationAtEnd: true },
-    },
-  }),
-};
-
 /**
  * Tests keyboard navigation and interaction:
  * - Tab focuses the first chevron toggle button

package/src/_deprecated/OverlayHeader/OverlayHeader.tsx

@@ -1,9 +1,5 @@
-import { clsx } from 'clsx';
-
-import { Size } from '../../common';
-import { CloseButton } from '../../common/CloseButton';
-import FlowHeader from '../../common/FlowHeader';
 import Logo from '../../Logo';
+import FlowNavigation from '../../FlowNavigation';
 
 /**
  * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`
@@ -22,20 +18,5 @@ const defaultLogo = <Logo />;
  * @deprecated Use `FlowNavigation` component instead
  */
 export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
-  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={clsx('d-flex', 'align-items-center', 'order-2')}>
-            {avatar}
-            {avatar && closeButton && <span className={clsx('m-x-1')} />}
-            {closeButton}
-          </div>
-        }
-      />
-    </div>
-  );
+  return <FlowNavigation {...{ avatar, onClose, logo }} />;
 }

package/src/main.css

@@ -29013,7 +29013,13 @@ button.np-option {
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 
 .np-flow-navigation--border-bottom {
@@ -29024,7 +29030,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 
 .np-flow-navigation__stepper {
@@ -29101,20 +29107,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   visibility: hidden;
 }
 
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
-
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
@@ -31650,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
           text-decoration: var(--nudge-link-text-decoration);
 }
 
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.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 {
-  fill: var(--color-interactive-primary);
-}
-
 .tw-telephone {
   display: flex;
 }
@@ -32416,28 +32390,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
-.wds-critical-banner__entry-mask {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) both;
-}
-
-.wds-critical-banner__entry-track {
-  min-height: 0;
-}
-
-@keyframes wds-critical-banner-reveal-height {
-  from {
-    grid-template-rows: 0fr;
-    overflow: hidden;
-  }
-  to {
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -32445,11 +32397,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }
 
 .wds-expander-toggle {

package/src/main.less

@@ -63,7 +63,6 @@
 @import "./_deprecated/NavigationOption/NavigationOption.less";
 @import "./_deprecated/NavigationOptionsList/NavigationOptionsList.less";
 @import "./Nudge/Nudge.less";
-@import "./_deprecated/OverlayHeader/OverlayHeader.less";
 @import "./PhoneNumberInput/PhoneNumberInput.less";
 @import "./Popover/Popover.less";
 @import "./PromoCard/PromoCard.less";

package/build/styles/_deprecated/OverlayHeader/OverlayHeader.css

@@ -1,15 +0,0 @@
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.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 {
-  fill: var(--color-interactive-primary);
-}

package/src/_deprecated/OverlayHeader/OverlayHeader.css

@@ -1,15 +0,0 @@
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.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 {
-  fill: var(--color-interactive-primary);
-}

package/src/_deprecated/OverlayHeader/OverlayHeader.less

@@ -1,24 +0,0 @@
-@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
-@import (reference) "./../../styles/less/addons/_spacing-utilities.less";
-
-.np-overlay-header {
-  .np-overlay-header__content {
-    // Same height and width as in FlowNavigation
-    min-height: 97px;
-    width: 100%;
-    min-width: @screen-xs-min;
-    max-width: calc(@screen-lg-min - 36px);
-  }
-
-  .np-theme-personal & {
-    border-bottom: 1px solid var(--color-border-neutral);
-  }
-
-  .np-theme-personal--forest-green &,
-  .np-theme-personal--bright-green &,
-  .np-theme-personal--dark & {
-    .np-flow-header__left path {
-      fill: var(--color-interactive-primary);
-    }
-  }
-}