@transferwise/components 0.0.0-experimental-fa56c29 → 0.0.0-experimental-644f437

package/src/promoCard/PromoCard.tsx

@@ -1,19 +1,19 @@
 import { useId } from '@radix-ui/react-id';
 import { Check } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { forwardRef, type FunctionComponent, useEffect, useState } from 'react';
+import React, { forwardRef, FunctionComponent, useEffect, useState } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
-import Card, { type CardProps } from '../common/card';
+import Card, { CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
 import Title from '../title';
 
 import { usePromoCardContext } from './PromoCardContext';
-import PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';
+import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
 
-export type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;
+export type ReferenceType = React.Ref<HTMLInputElement>;
 export type RelatedTypes =
   | ''
   | 'alternate'
@@ -68,9 +68,6 @@ export interface PromoCardCommonProps {
   /** Specify an onClick event handler */
   onClick?: () => void;
 
-  /** Specify an onKeyDown event handler */
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-
   /** Optional prop to specify the ID used for testing */
   testId?: string;
 
@@ -79,8 +76,6 @@ export interface PromoCardCommonProps {
 
   /** Set to false to use body font style for the title   */
   useDisplayFont?: boolean;
-
-  ref?: ReferenceType;
 }
 
 export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
@@ -96,14 +91,6 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   /** Optionally specify the language of the linked URL */
   hrefLang?: string;
 
-  /** Optional property that can be pass a ref for the anchor. */
-  anchorRef?: React.Ref<HTMLAnchorElement>;
-
-  /**
-   * Optional prop to specify the ID of the anchor element which can be useful when using a ref.
-   */
-  anchorId?: string;
-
   /**
    * Relationship between the PromoCard href URL and the current page. See
    * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
@@ -118,7 +105,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   isChecked?: never;
   tabIndex?: never;
   type?: never;
-  ref?: ReferenceType;
+  reference?: never;
   value?: never;
 }
 
@@ -133,7 +120,7 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   tabIndex?: number;
 
   /** Optional property to provide component Ref */
-  ref?: ReferenceType;
+  reference?: ReferenceType;
 
   /** Optional prop to specify the input type of the PromoCard  */
   type?: 'checkbox' | 'radio';
@@ -144,8 +131,6 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   /** Only applies to <a />s */
   download?: never;
   href?: never;
-  anchorRef?: never;
-  anchorId?: never;
   hrefLang?: never;
   rel?: never;
   target?: never;
@@ -217,7 +202,6 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       isChecked,
       isDisabled,
       onClick,
-      onKeyDown,
       rel,
       tabIndex,
       target,
@@ -227,11 +211,9 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       value,
       isSmall,
       useDisplayFont = true,
-      anchorRef,
-      anchorId,
       ...props
     },
-    ref: ReferenceType,
+    reference,
   ) => {
     // Set the `checked` state to the value of `defaultChecked` if it is truthy,
     // or the value of `isChecked` if it is truthy, or `false` if neither
@@ -282,7 +264,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       'np-Card--checked': !href && type,
       'np-Card--link': href && !type,
       'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
-      [String(className || '')]: className,
+      [`${className || ''}`]: className,
     });
 
     // Object with common props that will be passed to the `Card` components
@@ -291,8 +273,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       id: componentId,
       isDisabled: isDisabled || contextIsDisabled,
       onClick,
-      onKeyDown,
-      ref,
+      ref: reference,
       'data-testid': testId,
       isSmall,
     };
@@ -307,8 +288,6 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
             hrefLang,
             rel,
             target,
-            ref: anchorRef,
-            id: anchorId,
           }
         : {};
 
@@ -329,7 +308,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
                 handleClick();
               }
             },
-            ref,
+            ref: reference,
             tabIndex: 0,
           }
         : {};

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -169,10 +169,10 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     let newFormattedValue = '';
 
     if (this.detectUndoRedo(event) === 'Undo') {
-      newFormattedValue = formatWithPattern(historyNavigator.undo(), displayPattern);
+      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);
       this.setState({ value: newFormattedValue, triggerType: 'Undo' });
     } else if (this.detectUndoRedo(event) === 'Redo') {
-      newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
+      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);
       this.setState({ value: newFormattedValue, triggerType: 'Redo' });
     } else {
       this.setState({

package/build/styles/carousel/Carousel.css

@@ -1,138 +0,0 @@
-.carousel {
-  display: flex;
-  align-items: center;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  gap: 16px;
-  gap: var(--size-16);
-}
-@media (max-width: 767px) {
-  .carousel {
-    gap: 8px;
-    gap: var(--size-8);
-  }
-}
-.carousel__header {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  min-height: 32px;
-  min-height: var(--size-32);
-  padding-bottom: 16px;
-  padding-bottom: var(--size-16);
-}
-.carousel__card,
-.carousel__card:hover,
-.carousel__card:focus,
-.carousel__card:focus-within {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none !important;
-}
-.carousel__card {
-  display: block;
-  position: relative;
-  text-align: left;
-  border: none;
-  overflow: hidden;
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
-  border-radius: 32px;
-  border-radius: var(--size-32);
-  scroll-snap-align: center;
-  -webkit-scroll-snap-align: center;
-  transition: all 0.4s !important;
-}
-@media (min-width: 1200px) {
-  .carousel__card {
-    min-width: 280px;
-    width: 280px;
-    height: 280px;
-  }
-}
-@media (max-width: 1199px) {
-  .carousel__card {
-    min-width: 242px;
-    width: 242px;
-    height: 242px;
-  }
-}
-@media (max-width: 767px) {
-  .carousel__card {
-    min-width: 336px;
-    width: 336px;
-    height: 336px;
-    scroll-snap-stop: always;
-  }
-}
-.carousel__card:focus {
-  outline: 0;
-}
-.carousel__card:focus:after,
-.carousel__card:focus-within:after {
-  content: '';
-  position: absolute;
-  z-index: 4;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 32px;
-  border-radius: var(--size-32);
-  box-shadow: inset 0 0 0 2px var(--ring-outline-color);
-}
-.carousel__card:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.carousel__card:focus {
-  background-color: var(--color-background-neutral-hover);
-}
-.carousel__card-content {
-  height: 100%;
-  font-weight: normal;
-  padding: 24px;
-  padding: var(--size-24);
-}
-.carousel__scroll-button {
-  width: 32px;
-  width: var(--size-32);
-  height: 32px;
-  height: var(--size-32);
-  align-items: center;
-  justify-content: center;
-}
-.carousel__indicators {
-  display: flex;
-  justify-content: center;
-  padding-top: 8px;
-  padding-top: var(--size-8);
-  gap: 8px;
-  gap: var(--size-8);
-}
-.carousel__indicator {
-  width: 12px;
-  width: var(--size-12);
-  height: 12px;
-  height: var(--size-12);
-  border-radius: 8px;
-  border-radius: var(--size-8);
-  background: #c9cbce;
-  background: var(--color-interactive-secondary);
-  border: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  transition: all 0.1s;
-}
-.carousel__indicator:hover {
-  width: 16px;
-  width: var(--size-16);
-}
-.carousel__indicator--selected,
-.carousel__indicator--selected:hover {
-  background: var(--color-interactive-primary);
-  width: 24px;
-  width: var(--size-24);
-}

package/build/types/carousel/Carousel.d.ts

@@ -1,26 +0,0 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import type { PromoCardLinkProps } from '../promoCard/PromoCard';
-export type CarouselCardCommon = {
-    id: string;
-    href?: string;
-    onClick?: () => void;
-    className?: string;
-    styles?: CSSProperties;
-};
-export type CarouselDefaultCard = CarouselCardCommon & {
-    type: 'anchor' | 'button';
-    content: ReactNode;
-};
-export type CarouselPromoCard = CarouselCardCommon & {
-    type: 'promo';
-} & Omit<PromoCardLinkProps, 'type'>;
-export type CarouselCard = CarouselDefaultCard | CarouselPromoCard;
-export interface CarouselProps {
-    header: string | ReactNode;
-    className?: string;
-    cards: CarouselCard[];
-    onClick?: (cardId: string) => void;
-}
-declare const Carousel: React.FC<CarouselProps>;
-export default Carousel;
-//# sourceMappingURL=Carousel.d.ts.map

package/build/types/carousel/Carousel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}

package/build/types/carousel/index.d.ts

@@ -1,3 +0,0 @@
-export * from './Carousel';
-export { default } from './Carousel';
-//# sourceMappingURL=index.d.ts.map

package/build/types/carousel/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/carousel/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/src/carousel/Carousel.css

@@ -1,138 +0,0 @@
-.carousel {
-  display: flex;
-  align-items: center;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  gap: 16px;
-  gap: var(--size-16);
-}
-@media (max-width: 767px) {
-  .carousel {
-    gap: 8px;
-    gap: var(--size-8);
-  }
-}
-.carousel__header {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  min-height: 32px;
-  min-height: var(--size-32);
-  padding-bottom: 16px;
-  padding-bottom: var(--size-16);
-}
-.carousel__card,
-.carousel__card:hover,
-.carousel__card:focus,
-.carousel__card:focus-within {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none !important;
-}
-.carousel__card {
-  display: block;
-  position: relative;
-  text-align: left;
-  border: none;
-  overflow: hidden;
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
-  border-radius: 32px;
-  border-radius: var(--size-32);
-  scroll-snap-align: center;
-  -webkit-scroll-snap-align: center;
-  transition: all 0.4s !important;
-}
-@media (min-width: 1200px) {
-  .carousel__card {
-    min-width: 280px;
-    width: 280px;
-    height: 280px;
-  }
-}
-@media (max-width: 1199px) {
-  .carousel__card {
-    min-width: 242px;
-    width: 242px;
-    height: 242px;
-  }
-}
-@media (max-width: 767px) {
-  .carousel__card {
-    min-width: 336px;
-    width: 336px;
-    height: 336px;
-    scroll-snap-stop: always;
-  }
-}
-.carousel__card:focus {
-  outline: 0;
-}
-.carousel__card:focus:after,
-.carousel__card:focus-within:after {
-  content: '';
-  position: absolute;
-  z-index: 4;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 32px;
-  border-radius: var(--size-32);
-  box-shadow: inset 0 0 0 2px var(--ring-outline-color);
-}
-.carousel__card:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.carousel__card:focus {
-  background-color: var(--color-background-neutral-hover);
-}
-.carousel__card-content {
-  height: 100%;
-  font-weight: normal;
-  padding: 24px;
-  padding: var(--size-24);
-}
-.carousel__scroll-button {
-  width: 32px;
-  width: var(--size-32);
-  height: 32px;
-  height: var(--size-32);
-  align-items: center;
-  justify-content: center;
-}
-.carousel__indicators {
-  display: flex;
-  justify-content: center;
-  padding-top: 8px;
-  padding-top: var(--size-8);
-  gap: 8px;
-  gap: var(--size-8);
-}
-.carousel__indicator {
-  width: 12px;
-  width: var(--size-12);
-  height: 12px;
-  height: var(--size-12);
-  border-radius: 8px;
-  border-radius: var(--size-8);
-  background: #c9cbce;
-  background: var(--color-interactive-secondary);
-  border: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  transition: all 0.1s;
-}
-.carousel__indicator:hover {
-  width: 16px;
-  width: var(--size-16);
-}
-.carousel__indicator--selected,
-.carousel__indicator--selected:hover {
-  background: var(--color-interactive-primary);
-  width: 24px;
-  width: var(--size-24);
-}

package/src/carousel/Carousel.less

@@ -1,137 +0,0 @@
-.carousel {
-  display: flex;
-  align-items: center;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  gap: var(--size-16);
-}
-
-@media (--screen-sm-max) {
-  .carousel {
-    gap: var(--size-8);
-  }
-}
-
-
-.carousel__header {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  min-height: var(--size-32);
-  padding-bottom: var(--size-16)
-}
-
-.carousel__card,
-.carousel__card:hover,
-.carousel__card:focus,
-.carousel__card:focus-within {
-  text-decoration: none;
-  outline: none !important; // The specificity of the outline property is too high, so we need to use !important to override it for PromoCard
-}
-
-.carousel__card {
-  display: block;
-  position: relative;
-  text-align: left;
-  border: none;
-  overflow: hidden;
-  background: var(--color-background-neutral);
-  border-radius: var(--size-32);
-  scroll-snap-align: center;
-  -webkit-scroll-snap-align: center;
-  transition: all 0.4s !important; // The specificity of the transition property is too high, so we need to use !important to override it for PromoCard
-}
-
-@media (--screen-xl) {
-  .carousel__card {
-    min-width: 280px;
-    width: 280px;
-    height: 280px;
-  }
-}
-
-
-@media (--screen-lg-max) {
-  .carousel__card {
-    min-width: 242px;
-    width: 242px;
-    height: 242px;
-  }
-}
-
-
-@media (--screen-sm-max) {
-  .carousel__card {
-    min-width: 336px;
-    width: 336px;
-    height: 336px;
-    scroll-snap-stop: always;
-  }
-}
-
-.carousel__card:focus {
-  outline: 0;
-}
-
-.carousel__card:focus:after,
-.carousel__card:focus-within:after {
-  content: '';
-  position: absolute;
-  z-index: 4;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: var(--size-32);
-  box-shadow: inset 0 0 0 2px var(--ring-outline-color);
-}
-
-.carousel__card:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-
-.carousel__card:focus {
-  background-color: var(--color-background-neutral-hover);
-}
-
-.carousel__card-content {
-  height: 100%;
-  font-weight: normal;
-  padding: var(--size-24);
-}
-
-.carousel__scroll-button {
-  width: var(--size-32);
-  height: var(--size-32);
-  align-items: center;
-  justify-content: center;
-}
-
-.carousel__indicators {
-  display: flex;
-  justify-content: center;
-  padding-top: var(--size-8);
-  gap: var(--size-8);
-}
-
-.carousel__indicator {
-  width: var(--size-12);
-  height: var(--size-12);
-  border-radius: var(--size-8);
-  background: var(--color-interactive-secondary);
-  border: none;
-  appearance: none;
-  transition: all 0.1s;
-}
-
-.carousel__indicator:hover {
-  width: var(--size-16)
-}
-
-.carousel__indicator--selected,
-.carousel__indicator--selected:hover {
-  background: var(--color-interactive-primary);
-  width: var(--size-24);
-}