@transferwise/components 45.3.0 → 45.4.0

package/build/types/checkbox/Checkbox.story.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+declare const _default: {
+    component: {
+        ({ id, checked, required, disabled, readOnly, label, className, secondary, onChange, onFocus, onBlur, }: {
+            id: any;
+            checked: any;
+            required: any;
+            disabled: any;
+            readOnly: any;
+            label: any;
+            className: any;
+            secondary: any;
+            onChange: any;
+            onFocus: any;
+            onBlur: any;
+        }): JSX.Element;
+        propTypes: {
+            id: any;
+            checked: any;
+            required: any;
+            disabled: any;
+            readOnly: any;
+            label: any;
+            secondary: any;
+            onFocus: any;
+            onChange: any;
+            onBlur: any;
+            className: any;
+        };
+        defaultProps: {
+            id: null;
+            checked: boolean;
+            required: boolean;
+            disabled: boolean;
+            readOnly: boolean;
+            secondary: null;
+            onFocus: null;
+            onBlur: null;
+            className: undefined;
+        };
+    };
+    title: string;
+    args: {
+        label: string;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Basic: Story;
+export declare const Multiple: Story;
+export declare const MultipleMobile: Story;

package/build/types/common/bottomSheet/BottomSheet.story.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import BottomSheet from './BottomSheet';
+declare const _default: {
+    component: (props: {
+        onClose?: ((event: Event | import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+        open: boolean;
+    } & import("..").CommonProps & {
+        children?: import("react").ReactNode;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    title: string;
+    args: {
+        open: true;
+    };
+    render: (args: {
+        onClose?: ((event: Event | import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+        open: boolean;
+    } & import("..").CommonProps & {
+        children?: import("react").ReactNode;
+    }) => JSX.Element;
+};
+export default _default;
+type Story = StoryObj<typeof BottomSheet>;
+export declare const Basic: Story;
+export declare const BasicMobile: Story;
+export declare const WithOverflowContent: Story;
+export declare const WithOverflowContentMobile: Story;
+export declare const WithOverflowContentDark: Story;
+export declare const WithOverflowContentDarkMobile: Story;

package/build/types/dateInput/DateInput.story.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import { DateInput } from '..';
+declare const _default: {
+    component: {
+        ({ disabled, size, value, dayLabel, monthLabel, yearLabel, monthFormat, mode, onChange, onFocus, onBlur, placeholders, id, selectProps, }: {
+            disabled: any;
+            size: any;
+            value: any;
+            dayLabel: any;
+            monthLabel: any;
+            yearLabel: any;
+            monthFormat: any;
+            mode: any;
+            onChange: any;
+            onFocus: any;
+            onBlur: any;
+            placeholders: any;
+            id: any;
+            selectProps: any;
+        }): JSX.Element;
+        propTypes: {
+            disabled: any;
+            size: any;
+            value: any;
+            onChange: any;
+            onFocus: any;
+            onBlur: any;
+            dayLabel: any;
+            monthLabel: any;
+            yearLabel: any;
+            monthFormat: any;
+            mode: any;
+            placeholders: any;
+            id: any;
+            selectProps: any;
+        };
+        defaultProps: {
+            disabled: boolean;
+            size: import("..").Size;
+            value: null;
+            onFocus: null;
+            onBlur: null;
+            monthFormat: import("..").MonthFormat;
+            mode: import("..").DateMode;
+            id: string;
+            selectProps: {};
+        };
+    };
+    title: string;
+    args: {
+        dayLabel: string;
+        monthLabel: string;
+        yearLabel: string;
+        selectProps: {
+            buttonProps: {
+                'aria-label': string;
+            };
+            dropdownProps: {
+                'aria-label': string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof DateInput>;
+export declare const Basic: Story;
+export declare const BasicMobile: Story;
+export declare const InputError: Story;
+export declare const InputErrorMobile: Story;

package/build/types/info/Info.story.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import Info, { InfoPresentation } from '.';
+declare const _default: {
+    component: {
+        (props: any): JSX.Element;
+        propTypes: {
+            'aria-label': any;
+            className: any;
+            content: any;
+            onClick: any;
+            presentation: any;
+            size: any;
+            title: any;
+        };
+        defaultProps: {
+            className: undefined;
+            content: undefined;
+            onClick: undefined;
+            presentation: InfoPresentation;
+            size: import("..").Size;
+            title: undefined;
+        };
+    };
+    title: string;
+    args: {
+        'aria-label': string;
+        title: string;
+        content: string;
+    };
+    render: (args: any) => JSX.Element;
+};
+export default _default;
+type Story = StoryObj<typeof Info>;
+export declare const Basic: Story;
+export declare const OpenedPopover: Story;
+export declare const OpenedPopoverMobile: Story;
+export declare const OpenedModal: Story;
+export declare const OpenedModalMobile: Story;

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

@@ -1,10 +1,27 @@
 /// <reference types="react" />
-import { Story } from '@storybook/react';
+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;
     title: string;
+    args: {
+        size: "md";
+        position: "center";
+        open: true;
+    };
+    parameters: {
+        chromatic: {
+            delay: number;
+        };
+    };
 };
 export default _default;
+type Story = StoryObj<typeof Modal>;
 export declare const Basic: Story;
-export declare const WithLongText: () => JSX.Element;
-export declare const WithLongTextMobileView: Story;
+export declare const BasicMobile: Story;
+export declare const ContentScroll: Story;
+export declare const ContentScrollMobile: Story;
+export declare const ViewportScroll: Story;
+export declare const ViewportScrollMobile: Story;
+export declare const WithoutTitle: Story;
+export declare const WithoutTitleMobile: Story;

package/build/types/phoneNumberInput/PhoneNumberInput.d.ts

@@ -15,6 +15,10 @@ export interface PhoneNumberInputProps {
     size?: PhoneNumberInputSize;
     placeholder?: string;
     selectProps?: Object;
+    /**
+     * List of iso3 codes of countries to remove from the list
+     */
+    disabledCountries?: string[];
 }
 
 declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;

package/build/types/phoneNumberInput/utils/excludeCountries/excludeCountries.d.ts

@@ -0,0 +1 @@
+export function excludeCountries(countries: any[], disabledCountries: any[]): any;

package/build/types/phoneNumberInput/utils/excludeCountries/index.d.ts

@@ -0,0 +1 @@
+export { excludeCountries } from "./excludeCountries";

package/build/types/phoneNumberInput/utils/index.d.ts

@@ -10,3 +10,4 @@ export { cleanNumber } from "./cleanNumber";
 export { isStringNumeric } from "./isStringNumeric";
 export { sortArrayByProperty } from "./sortArrayByProperty";
 export { groupCountriesByPrefix } from "./groupCountriesByPrefix";
+export { excludeCountries } from "./excludeCountries";

package/build/types/test-utils/VariantDecorator.d.ts

@@ -0,0 +1,18 @@
+import { Decorator } from '@storybook/react';
+import { ChromaticParameters } from './ChromaticParameters';
+declare module '@storybook/types' {
+    interface Parameters {
+        /** Prefer using `storyConfig` for configuring variants */
+        variants?: ('default' | 'light' | 'dark' | 'rtl' | (string & Record<string, unknown>))[];
+        /** Used by Chromatic */
+        chromatic?: ChromaticParameters;
+        viewport?: {
+            viewports?: unknown[];
+            defaultViewport?: string;
+        };
+    }
+}
+/**
+ * Creates multiple variants of a component in a single story.
+ */
+export declare const VariantDecorator: Decorator;

package/build/types/test-utils/story-config.d.ts

@@ -1,54 +1,22 @@
-import { Story } from '@storybook/react';
-export declare const defaultMobileViewPortWidth = 390;
-export declare const defaultVisualTestDelay = 1000;
-export declare const defaultMobileViewDevice: {
-    type: string;
-    name: string;
-    styles: import("@storybook/addon-viewport/dist/Viewport-f0912abf").S;
-};
-export type StoryConfig = {
-    darkMode?: boolean;
-    rtlMode?: boolean;
-    allGlobals?: boolean;
-    mobileView?: boolean;
-    visualTest?: ChromaticParameters;
-};
-export declare function storyConfig(story: Story, config: StoryConfig): Story;
-/**
- * Chromatic Config params
- *
- * {@see https://github.com/chromaui/chromatic-cli/blob/main/storybook-addon.d.ts}
- * (this typs wasn't exported from any Chromatic package)
- */
-export type ChromaticParameters = {
-    /**
-     * To set a viewport, specify one or more screen widths to the `chromatic.viewports` parameter.
-     */
-    viewports?: number[];
+import { StoryObj } from '@storybook/react';
+interface StoryConfig {
     /**
-     * You can omit stories entirely from Chromatic testing using the disable story parameter.
-     */
-    disable?: boolean;
-    /**
-     * Chromatic will pause CSS animations and reset them to their beginning state.
+     * Creates variations of the component for the current story. Some
+     * padding is applied to the variants for spacing.
      *
-     * Some animations are used to "animate in" visible elements. To specify that Chromatic should pause the
-     * animation at the end, use the `pauseAnimationAtEnd` story parameter.
-     */
-    pauseAnimationAtEnd?: boolean;
-    /**
-     * Use story-level delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a
-     * screenshot.
-     */
-    delay?: number;
-    /**
-     * The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before
-     * they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip
-     * visual noise generated by non-deterministic rendering such as anti-aliasing.
+     * - `default` adds just the story itself with some padding.
+     * - `light` adds a light theme variant.
+     * - `dark` adds a dark theme variant.
+     * - `rtl` adds a right-to-left writing mode variant.
+     * - `mobile` sets the default viewport for the Story with mobile
+     *   dimensions and uses those dimensions for snapshots.
      *
-     * 0 is the most accurate. 1 is the least accurate.
-     *
-     * @default 0.063
+     * @default undefined
      */
-    diffThreshold?: number;
-};
+    variants?: ('default' | 'light' | 'dark' | 'rtl' | 'mobile')[];
+}
+/**
+ * Utility function for creating variants of a CSFv3 story.
+ */
+export declare const storyConfig: <Args>(storyObject: StoryObj<Args>, { variants }: StoryConfig) => StoryObj<Args>;
+export {};

package/build/types/tooltip/Tooltip.story.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { Story } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+import Tooltip from './Tooltip';
 declare const _default: {
     component: ({ position, children, label, className, }: {
         position?: "top" | "bottom" | "left" | "right" | undefined;
@@ -8,13 +9,20 @@ declare const _default: {
         children?: import("react").ReactNode;
     } & import("../common").CommonProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     title: string;
+    args: {
+        label: string;
+        position: "bottom";
+    };
+    render: (args: {
+        position?: "top" | "bottom" | "left" | "right" | undefined;
+        label: import("react").ReactNode;
+    } & {
+        children?: import("react").ReactNode;
+    } & import("../common").CommonProps) => JSX.Element;
+    tags: string[];
 };
 export default _default;
-export declare const Basic: {
-    (): JSX.Element;
-    play: typeof hoverOverButton;
-};
-export declare const BasicDarkMode: Story;
-declare function hoverOverButton({ canvasElement }: {
-    canvasElement: HTMLElement;
-}): void;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Basic: Story;
+export declare const OpenedTooltip: Story;
+export declare const OpenedTooltipDark: Story;