@transferwise/components 46.157.1 → 46.159.0

package/src/common/PropsValues/position.ts

@@ -1,13 +1,19 @@
+import type { Placement } from '@floating-ui/react';
+
 export enum Position {
   BOTTOM = 'bottom',
   BOTTOM_LEFT = 'bottom-left',
   BOTTOM_RIGHT = 'bottom-right',
   CENTER = 'center',
   LEFT = 'left',
+  LEFT_BOTTOM = 'left-bottom',
   LEFT_TOP = 'left-top',
   RIGHT = 'right',
+  RIGHT_BOTTOM = 'right-bottom',
   RIGHT_TOP = 'right-top',
   TOP = 'top',
+  TOP_LEFT = 'top-left',
+  TOP_RIGHT = 'top-right',
 }
 
 export type PositionCenter = 'center';
@@ -15,3 +21,51 @@ export type PositionTop = 'top';
 export type PositionRight = 'right';
 export type PositionBottom = 'bottom';
 export type PositionLeft = 'left';
+
+export type PositionTopLeft = 'top-left';
+export type PositionTopRight = 'top-right';
+export type PositionBottomLeft = 'bottom-left';
+export type PositionBottomRight = 'bottom-right';
+export type PositionLeftTop = 'left-top';
+export type PositionLeftBottom = 'left-bottom';
+export type PositionRightTop = 'right-top';
+export type PositionRightBottom = 'right-bottom';
+
+/** Neptune position values that can be converted to floating-ui Placement */
+export type FloatingPlacement =
+  | PositionTop
+  | PositionRight
+  | PositionBottom
+  | PositionLeft
+  | PositionTopLeft
+  | PositionTopRight
+  | PositionRightTop
+  | PositionRightBottom
+  | PositionBottomLeft
+  | PositionBottomRight
+  | PositionLeftTop
+  | PositionLeftBottom;
+
+/** Maps Neptune position values to floating-ui Placement */
+export const positionToPlacement = (position: FloatingPlacement): Placement => {
+  switch (position) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    case 'left-top':
+      return 'left-start';
+    case 'left-bottom':
+      return 'left-end';
+    case 'right-top':
+      return 'right-start';
+    case 'right-bottom':
+      return 'right-end';
+    default:
+      return position;
+  }
+};

package/src/i18n/en.json

@@ -50,6 +50,7 @@
   "neptune.Table.loaded": "Table data has loaded",
   "neptune.Table.loading": "Table data is loading",
   "neptune.Table.refreshPage": "Refresh page",
+  "neptune.Typeahead.suggestionsLabel": "Suggestions",
   "neptune.Upload.csButtonText": "Upload another file?",
   "neptune.Upload.csFailureText": "Upload failed. Please, try again",
   "neptune.Upload.csSuccessText": "Upload complete!",

package/src/index.ts

@@ -95,7 +95,7 @@ export type { LegacyListItemProps } from './_deprecated/LegacyListItem';
 export type { LinkProps } from './Link';
 export type { LoaderProps } from './Loader';
 export type { MarkdownProps } from './Markdown';
-export type { MarkupActionHandler, MarkupActions, MarkupNode, MarkupProps } from './Markup';
+export type { MarkupActionHandler, MarkupNode, MarkupProps, MarkupTextOptions } from './Markup';
 export type { ModalProps } from './Modal';
 export type { MoneyProps } from './Money';
 export type {

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;
 }

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);
-    }
-  }
-}