@transferwise/components 45.10.1 → 45.12.0

package/build/styles/promoCard/PromoCard.css

@@ -0,0 +1 @@
+.np-Card{--Card-image-scale:1;--Card-image-translate:0;--Card-indicator-text-background-color:var(--color-background-neutral);--Card-indicator-icon-background-color:var(--color-interactive-accent);--Card-indicator-icon-color:var(--color-interactive-control);--Card-check-background-color:var(--color-interactive-primary);--Card-check-color:var(--color-interactive-control)}.np-Card--promoCard{--Card-max-width:358px}.np-Card--promoCard.is-disabled{filter:grayscale(1);opacity:.45}.np-Card-image{height:auto;left:-24px;left:calc(var(--size-24)*-1);margin:0 auto;position:relative;transform:scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));transition:transform .5s ease-in-out;width:100%;width:calc(100% + 48px);width:calc(100% + var(--size-48))}[dir=rtl] .np-Card-image{left:auto;right:-24px;right:calc(var(--size-24)*-1)}.np-Card-indicator{bottom:8px;bottom:var(--size-8);display:flex;gap:4px;gap:var(--size-4);position:absolute;right:8px;right:var(--size-8)}[dir=rtl] .np-Card-indicator{left:8px;left:var(--size-8);right:auto}.np-Card-indicatorText{background:var(--Card-indicator-text-background-color);border-radius:100px;display:inline-block;padding:16px;padding:var(--size-16);text-align:left;vertical-align:middle}.np-Card-indicatorIcon{align-items:center;background:var(--Card-indicator-icon-background-color);border-radius:50%;border-radius:var(--radius-full);color:var(--Card-indicator-icon-color);display:inline-block;display:flex;height:56px;height:var(--size-56);justify-content:center;width:56px;width:var(--size-56)}[dir=rtl] .np-Card-indicatorIcon{transform:scaleX(-1)}.np-Card--checked,.np-Card--link{box-shadow:none;color:currentColor;cursor:pointer;transform:scale(1);transition:box-shadow .2s ease-in-out,transform .5s ease-in-out}.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--checked,.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--link{--Card-box-shadow:0px 20px var(--size-40) 0px var(--color-background-neutral);--Card-check-color:var(--color-interactive-accent)}.np-Card--checked.is-disabled,.np-Card--link.is-disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.np-Card--checked,.np-Card--link{transition:none}}.np-Card--checked:hover:not(.is-disabled,:disabled,.is-checked,:focus-within),.np-Card--link:hover:not(.is-disabled,:disabled,.is-checked,:focus-within){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow)}.np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral-active);--Card-image-scale:1.1;--Card-image-translate:var(--size-8);box-shadow:var(--Card-box-shadow);transform:scale(98%)}.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral)}.np-Card--checked:focus-visible:not(.is-disabled,:disabled),.np-Card--checked:has(:focus-visible):not(.np-Card--checked),.np-Card--link:focus-visible:not(.is-disabled,:disabled),.np-Card--link:has(:focus-visible):not(.np-Card--checked){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow);outline:var(--ring-outline-color) solid 4px;outline:var(--ring-outline-color) solid var(--size-4);outline-offset:4px;outline-offset:var(--size-4)}.np-Card--link .np-Card-titleLink{color:#37517e;color:var(--color-content-primary);text-decoration:none}.np-Card--link .np-Card-titleLink:focus-visible{outline:none}.np-Card--link .np-Card-titleLink:after{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.np-Card--checked.is-checked{box-shadow:0 0 0 4px var(--color-interactive-primary);box-shadow:0 0 0 var(--size-4) var(--color-interactive-primary)}.np-Card--checked.is-checked .np-Card-check{align-items:center;background:var(--Card-check-background-color);border-radius:50%;border-radius:var(--radius-full);color:var(--Card-check-color);display:flex;height:40px;height:var(--size-40);justify-content:center;position:absolute;right:8px;right:var(--size-8);top:8px;top:var(--size-8);width:40px;width:var(--size-40)}[dir=rtl] .np-Card--checked.is-checked .np-Card-check{left:8px;left:var(--size-8);right:auto}.np-Card--checked.is-checked:focus-visible:not(.is-disabled,:disabled){box-shadow:none}.np-CardGroup{display:flex;flex-direction:column;gap:24px;gap:var(--size-24);width:100%}@media (min-width:768px){.np-CardGroup{flex-direction:row}}.np-CardGroup .np-Card.np-Card--promoCard{max-width:100%}

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

@@ -1,2 +1,3 @@
 export { AvatarType } from './avatarTypes';
+export type { AvatarProps } from './Avatar';
 export { default } from './Avatar';

package/build/types/common/card/Card.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+export interface CardProps {
+    /** Content to display inside Card. */
+    children: ReactNode;
+    /** Optional prop to specify classNames onto the Card */
+    className?: string;
+    /** Optional prop to specify the ID on to Card  */
+    id?: string;
+    /** Specify whether the Card is disabled, or not */
+    isDisabled?: boolean;
+    /** Specify whether the Card is sized small or not */
+    isSmall?: boolean;
+    /** Optionally specify Card onDismiss function */
+    onDismiss?: () => void;
+    /** Optional prop to specify the ID used for testing */
+    testId?: string;
+}
+/**
+ * Card component.
+ *
+ * A card is a container for content that is used to group related information.
+ * It can be used to display information in a structured way, and can be
+ * customized with various props to suit different use cases.
+ *
+ * @param {Object} props - The component props.
+ * @param {ReactNode} children - The content to display inside the card.
+ * @param {string} className - Optional class name(s) to add to the card container.
+ * @param {string} id - Optional ID to add to the card container.
+ * @param {boolean} isDisabled - Whether the card is disabled or not.
+ * @param {boolean} isSmall - Whether the card is small or not.
+ * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.
+ * @param {string} testId - Optional ID to add to the card container for testing purposes.
+ * @returns {JSX.Element} - The card component.
+ * @example
+ * <Card>
+ *   <p>Hello World!</p>
+ * </Card>
+ */
+declare const Card: React.FC<CardProps>;
+export default Card;

package/build/types/common/card/Card.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/types/common/card/Card.story.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Card from '.';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;

package/build/types/common/card/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Card';

package/build/types/common/closeButton/CloseButton.d.ts

@@ -3,8 +3,12 @@ import { SizeLarge, SizeMedium, SizeSmall } from '../propsValues/size';
 export type CloseButtonProps = Pick<React.ComponentPropsWithoutRef<'button'>, 'aria-label' | 'className' | 'onClick'> & {
     size?: SizeSmall | SizeMedium | SizeLarge;
     filled?: boolean;
+    isDisabled?: boolean;
+    testId?: string;
 };
 export declare const CloseButton: import("react").ForwardRefExoticComponent<Pick<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "className" | "aria-label" | "onClick"> & {
     size?: "sm" | "md" | "lg" | undefined;
     filled?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    testId?: string | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/build/types/display/Display.d.ts

@@ -6,5 +6,5 @@ type Props = PropsWithChildren<{
     type?: DisplayTypes;
     className?: string;
 }>;
-declare function Display({ as: Heading, type, children, className, }: Props): JSX.Element;
+declare function Display({ as: Heading, type, children, className, id, }: Props): JSX.Element;
 export default Display;

package/build/types/image/Image.d.ts

@@ -12,6 +12,7 @@ export interface ImageProps {
     loading?: ImageLoading;
     stretch?: boolean;
     shrink?: boolean;
+    role?: string;
 }
 
 declare const Image: React.FC<ImageProps>;

package/build/types/index.d.ts

@@ -21,6 +21,7 @@ export { default as Badge } from './badge';
 export { default as BottomSheet } from './common/bottomSheet';
 export { default as Button } from './button';
 export { default as Card } from './card';
+export { default as BaseCard } from './common/card';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxButton } from './checkboxButton';
 export { default as CheckboxOption } from './checkboxOption';
@@ -63,6 +64,8 @@ export { default as Popover } from './popover';
 export { default as ProcessIndicator } from './processIndicator';
 export { default as ProgressBar } from './progressBar';
 export { default as Progress } from './progress';
+export { default as PromoCard } from './promoCard';
+export { default as PromoCardGroup } from './promoCard';
 export { default as Provider, DirectionProvider, LanguageProvider } from './provider';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radioGroup';

package/build/types/modal/Modal.d.ts

@@ -9,6 +9,7 @@ export type ModalProps = CommonProps & {
     open: boolean;
     scroll?: ScrollContent | ScrollViewport;
     position?: PositionTop | PositionCenter;
+    disableDimmerClickToClose?: boolean;
 };
-declare const Modal: ({ title, body, footer, onClose, className, open, size, scroll, position, ...otherProps }: ModalProps) => JSX.Element;
+declare const Modal: ({ title, body, footer, onClose, className, open, size, scroll, position, disableDimmerClickToClose, ...otherProps }: ModalProps) => JSX.Element;
 export default Modal;

package/build/types/modal/Modal.story.d.ts

@@ -2,7 +2,7 @@
 import { StoryObj } from '@storybook/react';
 import { Modal } from '..';
 declare const _default: {
-    component: ({ title, body, footer, onClose, className, open, size, scroll, position, ...otherProps }: import("./Modal").ModalProps) => JSX.Element;
+    component: ({ title, body, footer, onClose, className, open, size, scroll, position, disableDimmerClickToClose, ...otherProps }: import("./Modal").ModalProps) => JSX.Element;
     title: string;
     args: {
         size: "md";

package/build/types/promoCard/PromoCard.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+export type ReferenceType = React.Ref<HTMLInputElement>;
+export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
+export type RelatedTypes = '' | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
+export interface PromoCardCommonProps {
+    /** Optional prop to specify classNames onto the PromoCard */
+    className?: string;
+    /** Optional prop to specify the ID of the PromoCard */
+    id?: string;
+    /** Required prop to specify the descriptive text of the PromoCard  */
+    description: string;
+    /**
+     * Optional prop to specify the heading level of the PromoCard
+     *
+     * @default 'h3'
+     */
+    headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';
+    /** Optional prop to specify text for the indicator label of the PromoCard */
+    indicatorLabel?: string;
+    /** Optional prop to specify an image alt text  */
+    imageAlt?: string;
+    /** Optional prop to specify an image class  */
+    imageClass?: string;
+    /** Optional prop to specify an image source url  */
+    imageSource: string;
+    /** Specify whether the PromoCard is disabled, or not */
+    isDisabled?: boolean;
+    /** Specify an onClick event handler */
+    onClick?: () => void;
+    /** Optional prop to specify the ID used for testing */
+    testId?: string;
+    /** Required prop to specify the title text of the PromoCard  */
+    title: string;
+}
+export interface PromoCardLinkProps extends PromoCardCommonProps {
+    /**
+     * Optional prop to prompts a user to save the linked URL instead of
+     * navigating to it
+     */
+    download?: string;
+    /** Optionally specify an href for your PromoCard to contain an <a> element */
+    href?: string;
+    /** Optionally specify the language of the linked URL */
+    hrefLang?: string;
+    /**
+     * Relationship between the PromoCard href URL and the current page. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+     */
+    rel?: RelatedTypes;
+    /** Optional prop to to display where the linked URL will show */
+    target?: LinkTarget;
+    /** Only applies to role="radio" or "checkbox" */
+    defaultChecked?: never;
+    isChecked?: never;
+    tabIndex?: never;
+    type?: never;
+    reference?: never;
+    value?: never;
+}
+export interface PromoCardCheckedProps extends PromoCardCommonProps {
+    /** Specify the initial checked attribute of the PromoCard */
+    defaultChecked?: boolean;
+    /** Specify whether the PromoCard is checked, or not */
+    isChecked?: boolean;
+    /** Optional prop to specify the tabIndex of the PromoCard */
+    tabIndex?: number;
+    /** Optional property to provide component Ref */
+    reference?: ReferenceType;
+    /** Optional prop to specify the input type of the PromoCard  */
+    type?: 'checkbox' | 'radio';
+    /** Specify the value attribute of the PromoCard if Checkbox or Radio */
+    value?: string;
+    /** Only applies to <a />s */
+    download?: never;
+    href?: never;
+    hrefLang?: never;
+    rel?: never;
+    target?: never;
+}
+export type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;
+export type PolymorphicPromoCard = (props: PromoCardLinkProps | PromoCardCheckedProps) => JSX.Element;
+declare const _default: React.NamedExoticComponent<PromoCardProps>;
+export default _default;

package/build/types/promoCard/PromoCard.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/types/promoCard/PromoCard.story.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import PromoCard from './PromoCard';
+declare const meta: Meta<typeof PromoCard>;
+export default meta;
+type Story = StoryObj<typeof PromoCard>;
+export declare const Default: Story;
+export declare const Link: Story;
+export declare const Check: Story;
+export declare const DefaultChecked: Story;
+export declare const Disabled: Story;
+export declare const CustomClass: Story;

package/build/types/promoCard/PromoCardContext.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+/**
+ * The type of the PromoCard context object.
+ *
+ * The context object contains the current state of the PromoCard group, whether
+ * the group is disabled or not, and a function to call when the group value
+ * changes. This value is used to provide context to child PromoCard components,
+ * allowing them to interact with the group and update its state.
+ */
+interface PromoCardContextType {
+    /**
+     * The current value of the PromoCard group.
+     *
+     * @default ''
+     */
+    state: string;
+    /**
+     * Whether the PromoCard group is disabled or not.
+     *
+     * @default false
+     */
+    isDisabled: boolean;
+    /**
+     * A function to call when the PromoCard group value changes.
+     *
+     * @param {string} value - The new value of the PromoCard group.
+     * @default () => {}
+     */
+    onChange: (value: string) => void;
+}
+/**
+ * The PromoCard context object.
+ */
+export declare const PromoCardContext: React.Context<PromoCardContextType>;
+/**
+ * A custom hook for accessing the PromoCard context object.
+ *
+ * The `usePromoCardContext` hook is used to access the PromoCard context object
+ * from within a child PromoCard component. It throws an error if the context
+ * object is not available, which can help with debugging and development.
+ *
+ * @returns {PromoCardContextType} - The PromoCard context object.
+ */
+export declare const usePromoCardContext: () => PromoCardContextType;
+export default PromoCardContext;

package/build/types/promoCard/PromoCardContext.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/types/promoCard/PromoCardGroup.d.ts

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+export type AriaRoleRadioGroup = 'radiogroup';
+export interface PromoCardGroupProps {
+    /**
+     * Optional class name(s) to add to the group container.
+     */
+    className?: string;
+    /**
+     * The PromoCard components to display inside the group.
+     */
+    children: ReactNode;
+    /**
+     * The default checked for the group.
+     */
+    defaultChecked?: string;
+    /**
+     * Optional ID to add to the group container.
+     */
+    id?: string;
+    /**
+     * Whether the group is disabled or not.
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional label to display above the group.
+     */
+    label?: string;
+    /**
+     * Optional function to call when the group value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Optional ID to add to the group container for testing purposes.
+     */
+    testId?: string;
+}
+declare const _default: React.NamedExoticComponent<PromoCardGroupProps>;
+export default _default;

package/build/types/promoCard/PromoCardGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/types/promoCard/PromoCardGroup.story.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import PromoCardGroup from './PromoCardGroup';
+declare const meta: Meta<typeof PromoCardGroup>;
+export default meta;
+type Story = StoryObj<typeof PromoCardGroup>;
+export declare const Default: Story;
+export declare const DefaultChecked: Story;
+export declare const Disabled: Story;

package/build/types/promoCard/PromoCardIndicator.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+export type PromoCardIndicatorProps = {
+    /** Optional class name(s) to add to the indicator container. */
+    className?: string;
+    /** Optional label to display next to the indicator. */
+    label?: string;
+    /** Optional icon to display in the indicator. */
+    icon?: 'check' | 'arrow' | 'download';
+    /** Optional ID to add to the indicator container for testing purposes. */
+    testid?: string;
+    /** Optional children to display inside the indicator. */
+    children?: ReactNode;
+};
+/**
+ * PromoCardIndicator component.
+ *
+ * A PromoCardIndicator is a small component that can be used to display
+ * additional information or actions related to a PromoCard. It can be
+ * customized with various props to suit different use cases.
+ *
+ * @param {string} className - Optional class name(s) to add to the indicator container.
+ * @param {string} label - Optional label to display next to the indicator.
+ * @param {string} icon - Optional icon to display in the indicator.
+ * @param {string} testid - Optional ID to add to the indicator container for testing purposes.
+ * @param {ReactNode} children - Optional children to display inside the indicator.
+ * @returns {JSX.Element} - The PromoCardIndicator component.
+ * @example
+ * <PromoCardIndicator label="Download" icon="download" />
+ */
+declare const PromoCardIndicator: React.FC<PromoCardIndicatorProps>;
+export default PromoCardIndicator;

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

@@ -0,0 +1,2 @@
+export { default } from './PromoCard';
+export { default as PromoCardGroup } from './PromoCardGroup';