@transferwise/components 45.7.1 → 45.9.0

package/build/styles/nudge/Nudge.css

@@ -1 +1 @@
-:root{--nudge-background-color:var(--color-background-neutral);--nudge-border-radius:10px;--nudge-min-height:initial;--nudge-padding:var(--size-16);--nudge-flex-gap:var(--size-16);--nudge-media-width:initial;--nudge-link-text-decoration:none;--nudge-container-padding:0;--nudge-content-flex-alignment:center;--nudge-title-color:var(--color-content-primary);--nudge-title-font-weight:var(--font-weight-semi-bold);--nudge-title-line-height:var(--line-height-title);--nudge-control-width:var(--size-16);--nudge-control-background-color:transparent}.wds-nudge{align-items:stretch;background-color:#86a7bd1a;background-color:var(--nudge-background-color);border-radius:10px;border-radius:var(--nudge-border-radius);display:flex;flex:1;gap:16px;gap:var(--nudge-flex-gap);min-height:auto;min-height:var(--nudge-min-height);overflow:hidden;padding:16px;padding:var(--nudge-padding);position:relative;width:100%}.wds-nudge-media{flex-basis:auto;flex-basis:var(--nudge-media-width);max-width:none;max-width:var(--nudge-media-width)}.wds-nudge-media-globe{margin-left:-76px;margin-top:-5px;position:absolute;width:161px}[dir=rtl] .wds-nudge-media-globe{margin-left:0;margin-right:-76px;transform:scaleX(-1)}.wds-nudge-media-lock{margin-left:-11px;margin-top:18px;position:absolute;transform:rotate(-14.86deg);width:104px}[dir=rtl] .wds-nudge-media-lock{margin-left:0;margin-right:-11px;transform:scaleX(-1)}.wds-nudge-media-wallet{margin-left:-15px;margin-top:18px;position:absolute;width:107px}[dir=rtl] .wds-nudge-media-wallet{margin-left:0;margin-right:-15px;transform:scaleX(-1)}.wds-nudge-media-gear{margin-left:-18px;margin-top:19px;position:absolute;width:111px}[dir=rtl] .wds-nudge-media-gear{margin-left:0;margin-right:-18px;transform:scaleX(-1)}.wds-nudge-media-invite-letter{margin-left:-17px;margin-top:-2px;position:absolute;width:105px}[dir=rtl] .wds-nudge-media-invite-letter{margin-left:0;margin-right:-17px;transform:scaleX(-1)}.wds-nudge-container{align-items:stretch;display:flex;flex:1;gap:16px;gap:var(--nudge-flex-gap);justify-content:space-between;padding:0;padding:var(--nudge-container-padding) var(--nudge-container-padding) var(--nudge-container-padding) 0;width:100%}[dir=rtl] .wds-nudge-container{padding:0;padding:var(--nudge-container-padding) 0 var(--nudge-container-padding) var(--nudge-container-padding)}.np-theme-personal .wds-nudge-container:first-child{padding-left:16px;padding-left:var(--nudge-flex-gap)}.wds-nudge-container .wds-nudge-content{align-self:center;align-self:var(--nudge-content-flex-alignment);display:flex;flex-direction:column}.wds-nudge-container .wds-nudge-content .wds-nudge-title{color:#37517e;color:var(--nudge-title-color);font-weight:600;font-weight:var(--nudge-title-font-weight);line-height:1.2;line-height:var(--nudge-title-line-height);margin:0}.wds-nudge-container .wds-nudge-content .wds-nudge-link{font-weight:600;font-weight:var(--font-weight-semi-bold);margin-top:4px;margin-top:var(--size-4);text-decoration:none;-webkit-text-decoration:var(--nudge-link-text-decoration);text-decoration:var(--nudge-link-text-decoration)}.wds-nudge-container .wds-nudge-control{background-color:transparent;background-color:var(--nudge-control-background-color);flex-basis:16px;flex-basis:var(--nudge-control-width);flex:0 0 16px;flex:0 0 var(--nudge-control-width);height:16px;height:var(--nudge-control-width);max-width:16px;max-width:var(--nudge-control-width)}.np-theme-personal{--nudge-border-radius:var(--radius-medium);--nudge-min-height:106px;--nudge-padding:0;--nudge-link-text-decoration:underline;--nudge-container-padding:var(--size-16);--nudge-media-width:104px;--nudge-control-width:var(--size-24);--nudge-control-background-color:var(--color-background-neutral)}
+:root{--nudge-background-color:var(--color-background-neutral);--nudge-border-radius:10px;--nudge-min-height:initial;--nudge-padding:var(--size-16);--nudge-flex-gap:var(--size-16);--nudge-media-width:initial;--nudge-link-text-decoration:none;--nudge-container-padding:0;--nudge-content-flex-alignment:center;--nudge-title-color:var(--color-content-primary);--nudge-title-font-weight:var(--font-weight-semi-bold);--nudge-title-line-height:var(--line-height-title);--nudge-control-width:var(--size-16);--nudge-control-background-color:transparent}.wds-nudge{align-items:stretch;background-color:#86a7bd1a;background-color:var(--nudge-background-color);border-radius:10px;border-radius:var(--nudge-border-radius);display:flex;flex:1;gap:16px;gap:var(--nudge-flex-gap);min-height:auto;min-height:var(--nudge-min-height);overflow:hidden;padding:16px;padding:var(--nudge-padding);position:relative;width:100%}.wds-nudge-media{flex-basis:auto;flex-basis:var(--nudge-media-width);max-width:none;max-width:var(--nudge-media-width)}.wds-nudge-media-globe{margin-left:-76px;margin-top:-5px;position:absolute;width:161px}[dir=rtl] .wds-nudge-media-globe{margin-left:0;margin-right:-76px;transform:scaleX(-1)}.wds-nudge-media-lock{margin-left:-11px;margin-top:18px;position:absolute;transform:rotate(-14.86deg);width:104px}[dir=rtl] .wds-nudge-media-lock{margin-left:0;margin-right:-11px;transform:scaleX(-1)}.wds-nudge-media-wallet{margin-left:-15px;margin-top:18px;position:absolute;width:107px}[dir=rtl] .wds-nudge-media-wallet{margin-left:0;margin-right:-15px;transform:scaleX(-1)}.wds-nudge-media-gear{margin-left:-18px;margin-top:19px;position:absolute;width:111px}[dir=rtl] .wds-nudge-media-gear{margin-left:0;margin-right:-18px;transform:scaleX(-1)}.wds-nudge-media-invite-letter{margin-left:-17px;margin-top:-2px;position:absolute;width:105px}[dir=rtl] .wds-nudge-media-invite-letter{margin-left:0;margin-right:-17px;transform:scaleX(-1)}.wds-nudge-media-business-card,.wds-nudge-media-personal-card{margin-left:-15px;margin-top:2px;position:absolute;width:104px}[dir=rtl] .wds-nudge-media-business-card,[dir=rtl] .wds-nudge-media-personal-card{margin-left:0;margin-right:-15px;transform:scaleX(-1)}.wds-nudge-container{align-items:stretch;display:flex;flex:1;gap:16px;gap:var(--nudge-flex-gap);justify-content:space-between;padding:0;padding:var(--nudge-container-padding) var(--nudge-container-padding) var(--nudge-container-padding) 0;width:100%}[dir=rtl] .wds-nudge-container{padding:0;padding:var(--nudge-container-padding) 0 var(--nudge-container-padding) var(--nudge-container-padding)}.np-theme-personal .wds-nudge-container:first-child{padding-left:16px;padding-left:var(--nudge-flex-gap)}.wds-nudge-container .wds-nudge-content{align-self:center;align-self:var(--nudge-content-flex-alignment);display:flex;flex-direction:column}.wds-nudge-container .wds-nudge-content .wds-nudge-title{color:#37517e;color:var(--nudge-title-color);font-weight:600;font-weight:var(--nudge-title-font-weight);line-height:1.2;line-height:var(--nudge-title-line-height);margin:0}.wds-nudge-container .wds-nudge-content .wds-nudge-link{font-weight:600;font-weight:var(--font-weight-semi-bold);margin-top:4px;margin-top:var(--size-4);text-decoration:none;-webkit-text-decoration:var(--nudge-link-text-decoration);text-decoration:var(--nudge-link-text-decoration)}.wds-nudge-container .wds-nudge-control{background-color:transparent;background-color:var(--nudge-control-background-color);flex-basis:16px;flex-basis:var(--nudge-control-width);flex:0 0 16px;flex:0 0 var(--nudge-control-width);height:16px;height:var(--nudge-control-width);max-width:16px;max-width:var(--nudge-control-width)}.np-theme-personal{--nudge-border-radius:var(--radius-medium);--nudge-min-height:106px;--nudge-padding:0;--nudge-link-text-decoration:underline;--nudge-container-padding:var(--size-16);--nudge-media-width:104px;--nudge-control-width:var(--size-24);--nudge-control-background-color:var(--color-background-neutral)}

package/build/types/nudge/Nudge.d.ts

@@ -1,20 +1,40 @@
-import * as React from 'react';
-
-export type NudgeMediaName = "globe" | "lock" | "wallet" | "gear" | "invite-letter";
-
-export interface NudgeProps {
-    media?: React.ReactNode;
-    mediaName?: NudgeMediaName;
-    title: React.ReactNode;
-    link?: React.ReactNode;
-    href?: string;
-    onClick?: (...args: any[])=>any;
-    onDismiss?: (...args: any[])=>any;
-    id?: string;
-    className?: string;
-}
-
-declare const Nudge: React.FC<NudgeProps>;
-
-export default Nudge;
-
+import { ReactNode, MouseEvent } from 'react';
+export declare const STORAGE_NAME = "dismissedNudges";
+export declare const Media: {
+    readonly GLOBE: "globe";
+    readonly LOCK: "lock";
+    readonly WALLET: "wallet";
+    readonly GEAR: "gear";
+    readonly 'INVITE-LETTER': "invite-letter";
+    readonly 'PERSONAL-CARD': "personal-card";
+    readonly 'BUSINESS-CARD': "business-card";
+};
+type BaseProps = {
+    /** @deprecated use `mediaName` property instead */
+    media?: ReactNode;
+    /** Media name  */
+    mediaName?: (typeof Media)[keyof typeof Media];
+    title: ReactNode;
+    /** Element inside link */
+    link?: ReactNode;
+    /** Href for the link */
+    href?: string;
+    /** Fired when the user clicks on the link */
+    onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;
+    /** Fired when the user clicks on close button */
+    onDismiss?: () => void;
+    className?: string;
+};
+export interface OptionalId extends BaseProps {
+    id?: string;
+    persistDismissal?: false;
+}
+export interface RequiredPersistProps extends BaseProps {
+    /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */
+    id: string;
+    /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */
+    persistDismissal: true;
+}
+export type Props = OptionalId | RequiredPersistProps;
+declare const Nudge: ({ media, mediaName, title, link, href, onClick, onDismiss, persistDismissal, id, className, }: Props) => JSX.Element | null;
+export default Nudge;

package/build/types/nudge/Nudge.spec.d.ts

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

package/build/types/nudge/Nudge.story.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: {
+    component: ({ media, mediaName, title, link, href, onClick, onDismiss, persistDismissal, id, className, }: import("./Nudge").Props) => JSX.Element | null;
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const DefaultWithPersist: () => JSX.Element;

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

@@ -1 +1 @@
-export { default } from "./Nudge";
+export { default } from './Nudge';