@transferwise/components 45.22.0 → 45.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +15 -12
- package/build/index.esm.js.map +1 -1
- package/build/index.js +15 -12
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/header/Header.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/nudge/Nudge.css +1 -1
- package/build/types/header/Header.d.ts +1 -1
- package/build/types/header/Header.d.ts.map +1 -1
- package/build/types/nudge/Nudge.d.ts +3 -10
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/build/types/title/Title.d.ts +1 -1
- package/build/types/title/Title.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/header/Header.css +1 -1
- package/src/header/Header.less +5 -0
- package/src/header/Header.tsx +21 -2
- package/src/main.css +1 -1
- package/src/nudge/Nudge.css +1 -1
- package/src/nudge/Nudge.less +18 -22
- package/src/nudge/Nudge.spec.tsx +0 -18
- package/src/nudge/Nudge.story.tsx +31 -0
- package/src/nudge/Nudge.tsx +28 -36
- package/src/title/Title.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.wds-nudge{--nudge-background-color:var(--color-background-neutral);--nudge-border-radius:var(--radius-medium);--nudge-min-height:106px;--nudge-padding:0;--nudge-flex-gap:var(--size-16);--nudge-media-width:104px;--nudge-link-text-decoration:underline;--nudge-container-padding:var(--size-16);--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-24);--nudge-control-background-color:var(--color-background-neutral);align-items:stretch;background-color:var(--nudge-background-color);border-radius:var(--nudge-border-radius);display:flex;flex:1;gap:var(--nudge-flex-gap);min-height:var(--nudge-min-height);overflow:hidden;padding:var(--nudge-padding);position:relative;width:100%}.wds-nudge-media{flex-basis:var(--nudge-media-width);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-media-heart{margin-left:-7px;margin-top:11px;position:absolute;width:95px}[dir=rtl] .wds-nudge-media-heart{margin-left:0;margin-right:-7px;transform:scaleX(-1)}.wds-nudge-media-multi-currency{margin-left:-30px;margin-top:1px;position:absolute;width:131px}[dir=rtl] .wds-nudge-media-multi-currency{margin-left:0;margin-right:-30px;transform:scaleX(-1)}.wds-nudge-media-shopping-bag{margin-left:1px;margin-top:14px;position:absolute;width:116px}[dir=rtl] .wds-nudge-media-shopping-bag{margin-left:0;margin-right:1px;transform:scaleX(-1)}.wds-nudge-container{align-items:stretch;display:flex;flex:1;gap:var(--nudge-flex-gap);justify-content:space-between;padding:var(--nudge-container-padding) var(--nudge-container-padding) var(--nudge-container-padding) 0;width:100%}[dir=rtl] .wds-nudge-container{padding:var(--nudge-container-padding) 0 var(--nudge-container-padding) var(--nudge-container-padding)}.np-theme-personal .wds-nudge-container:first-child{padding-left:var(--nudge-flex-gap)}.wds-nudge-container .wds-nudge-content{align-self:var(--nudge-content-flex-alignment);display:flex;flex-direction:column}.wds-nudge-container .wds-nudge-content .wds-nudge-title{color:var(--nudge-title-color);font-weight:var(--nudge-title-font-weight);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);-webkit-text-decoration:var(--nudge-link-text-decoration);text-decoration:var(--nudge-link-text-decoration)}.wds-nudge-container .wds-nudge-control{background-color:var(--nudge-control-background-color);flex-basis:var(--nudge-control-width);flex:0 0 var(--nudge-control-width);height:var(--nudge-control-width);max-width:var(--nudge-control-width)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":";AAGA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":";AAGA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiCF;;;;GAIG;AACH,eAAO,MAAM,MAAM,qCAA6C,WAAW,gCA4B1E,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,19 +1,12 @@
|
|
|
1
|
+
import { Assets } from '@wise/art';
|
|
1
2
|
import { ReactNode, MouseEvent } from 'react';
|
|
2
3
|
export declare const STORAGE_NAME = "dismissedNudges";
|
|
3
|
-
|
|
4
|
-
readonly GLOBE: "globe";
|
|
5
|
-
readonly LOCK: "lock";
|
|
6
|
-
readonly WALLET: "wallet";
|
|
7
|
-
readonly GEAR: "gear";
|
|
8
|
-
readonly 'INVITE-LETTER': "invite-letter";
|
|
9
|
-
readonly 'PERSONAL-CARD': "personal-card";
|
|
10
|
-
readonly 'BUSINESS-CARD': "business-card";
|
|
11
|
-
};
|
|
4
|
+
type MediaNameType = `${Assets.GLOBE}` | `${Assets.LOCK}` | `${Assets.WALLET}` | `${Assets.GEAR}` | `${Assets.INVITE_LETTER}` | `${Assets.PERSONAL_CARD}` | `${Assets.BUSINESS_CARD}` | `${Assets.HEART}` | `${Assets.MULTI_CURRENCY}` | `${Assets.SHOPPING_BAG}`;
|
|
12
5
|
type BaseProps = {
|
|
13
6
|
/** @deprecated use `mediaName` property instead */
|
|
14
7
|
media?: ReactNode;
|
|
15
8
|
/** Media name */
|
|
16
|
-
mediaName?:
|
|
9
|
+
mediaName?: MediaNameType;
|
|
17
10
|
title: ReactNode;
|
|
18
11
|
/** Element inside link */
|
|
19
12
|
link?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAqB,MAAM,WAAW,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAQnE,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAmB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;AAE7B,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,yHAYR,KAAK,uCAkFP,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -4,7 +4,7 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
|
|
|
4
4
|
/**
|
|
5
5
|
* Default value will based one `type` prop
|
|
6
6
|
*/
|
|
7
|
-
as?: 'span' | 'label' | 'li' | Heading;
|
|
7
|
+
as?: 'span' | 'label' | 'li' | 'legend' | Heading;
|
|
8
8
|
/**
|
|
9
9
|
* Default value: {@link DEFAULT_TYPE}
|
|
10
10
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAY5D,KAAK,KAAK,GAAG,mBAAmB,CAAC,kBAAkB,GAAG,eAAe,GAAG,gBAAgB,CAAC,GACvF,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAY5D,KAAK,KAAK,GAAG,mBAAmB,CAAC,kBAAkB,GAAG,eAAe,GAAG,gBAAgB,CAAC,GACvF,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEJ,iBAAS,KAAK,CAAC,EAAE,EAAE,EAAE,IAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,+BAUrE;AAED,eAAe,KAAK,CAAC"}
|
package/package.json
CHANGED
package/src/header/Header.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}
|
|
1
|
+
.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}.np-header legend{border-bottom:none;padding:0}
|
package/src/header/Header.less
CHANGED
package/src/header/Header.tsx
CHANGED
|
@@ -25,7 +25,7 @@ export type HeaderProps = CommonProps & {
|
|
|
25
25
|
*
|
|
26
26
|
* @default "h5"
|
|
27
27
|
*/
|
|
28
|
-
as?: Heading;
|
|
28
|
+
as?: Heading | 'legend';
|
|
29
29
|
title: string;
|
|
30
30
|
};
|
|
31
31
|
|
|
@@ -66,12 +66,31 @@ const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps
|
|
|
66
66
|
*
|
|
67
67
|
*/
|
|
68
68
|
export const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {
|
|
69
|
+
if (!action) {
|
|
70
|
+
return (
|
|
71
|
+
<Title
|
|
72
|
+
as={as}
|
|
73
|
+
type={Typography.TITLE_GROUP}
|
|
74
|
+
className={classNames('np-header', 'np-header__title', className)}
|
|
75
|
+
>
|
|
76
|
+
{title}
|
|
77
|
+
</Title>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
if (as === 'legend') {
|
|
82
|
+
// eslint-disable-next-line no-console
|
|
83
|
+
console.warn(
|
|
84
|
+
'Legends should be the first child in a fieldset, and this is not possible when including an action',
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
|
|
69
88
|
return (
|
|
70
89
|
<div className={classNames('np-header', className)}>
|
|
71
90
|
<Title as={as} type={Typography.TITLE_GROUP} className="np-header__title">
|
|
72
91
|
{title}
|
|
73
92
|
</Title>
|
|
74
|
-
|
|
93
|
+
<HeaderAction action={action} />
|
|
75
94
|
</div>
|
|
76
95
|
);
|
|
77
96
|
};
|