@transferwise/components 0.0.0-experimental-cce363f → 0.0.0-experimental-0b6dfe0
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 +56 -20
- package/build/index.esm.js.map +1 -1
- package/build/index.js +56 -20
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/promoCard/PromoCard.css +1 -1
- package/build/types/common/card/Card.d.ts.map +1 -1
- package/build/types/common/card/index.d.ts +1 -0
- package/build/types/common/card/index.d.ts.map +1 -1
- package/build/types/promoCard/PromoCard.d.ts +9 -3
- package/build/types/promoCard/PromoCard.d.ts.map +1 -1
- package/build/types/promoCard/PromoCardIndicator.d.ts +5 -3
- package/build/types/promoCard/PromoCardIndicator.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/common/card/Card.tsx +6 -2
- package/src/common/card/index.ts +1 -0
- package/src/main.css +1 -1
- package/src/promoCard/PromoCard.css +1 -1
- package/src/promoCard/PromoCard.less +9 -9
- package/src/promoCard/PromoCard.spec.tsx +1 -0
- package/src/promoCard/PromoCard.story.tsx +90 -30
- package/src/promoCard/PromoCard.tsx +69 -22
- package/src/promoCard/PromoCardIndicator.tsx +20 -8
|
@@ -1 +1 @@
|
|
|
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
|
|
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-description{color:#5d7079;color:var(--color-content-secondary)}.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 .tw-icon{color:var(--Card-indicator-icon-color)}[dir=rtl] .np-Card-indicatorIcon .tw-icon{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--checked:has(.np-Card-closeButton:focus-visible),.np-Card--link:has(.np-Card-closeButton:focus-visible){outline:none}.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:9999px;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%}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/common/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,SAAS,EAAU,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/common/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,SAAS,EAAU,MAAM,OAAO,CAAC;AAKtD,MAAM,WAAW,SAAS;IACxB,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IAEpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA0C7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,cAAc,QAAQ,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { CardProps } from '../common/card';
|
|
3
|
+
import { PromoCardIndicatorProps } from './PromoCardIndicator';
|
|
2
4
|
export type ReferenceType = React.Ref<HTMLInputElement>;
|
|
3
5
|
export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
|
|
4
6
|
export type RelatedTypes = '' | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
|
|
@@ -17,12 +19,14 @@ export interface PromoCardCommonProps {
|
|
|
17
19
|
headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';
|
|
18
20
|
/** Optional prop to specify text for the indicator label of the PromoCard */
|
|
19
21
|
indicatorLabel?: string;
|
|
22
|
+
/** Optional prop to specify the icon for the indicator icon of the PromoCard */
|
|
23
|
+
indicatorIcon?: PromoCardIndicatorProps['icon'];
|
|
20
24
|
/** Optional prop to specify an image alt text */
|
|
21
25
|
imageAlt?: string;
|
|
22
26
|
/** Optional prop to specify an image class */
|
|
23
27
|
imageClass?: string;
|
|
24
28
|
/** Optional prop to specify an image source url */
|
|
25
|
-
imageSource
|
|
29
|
+
imageSource?: string;
|
|
26
30
|
/** Specify whether the PromoCard is disabled, or not */
|
|
27
31
|
isDisabled?: boolean;
|
|
28
32
|
/** Specify an onClick event handler */
|
|
@@ -31,8 +35,10 @@ export interface PromoCardCommonProps {
|
|
|
31
35
|
testId?: string;
|
|
32
36
|
/** Required prop to specify the title text of the PromoCard */
|
|
33
37
|
title: string;
|
|
38
|
+
/** Set to false to use body font style for the title */
|
|
39
|
+
useDisplayFont?: boolean;
|
|
34
40
|
}
|
|
35
|
-
export interface PromoCardLinkProps extends PromoCardCommonProps {
|
|
41
|
+
export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
|
|
36
42
|
/**
|
|
37
43
|
* Optional prop to prompts a user to save the linked URL instead of
|
|
38
44
|
* navigating to it
|
|
@@ -57,7 +63,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps {
|
|
|
57
63
|
reference?: never;
|
|
58
64
|
value?: never;
|
|
59
65
|
}
|
|
60
|
-
export interface PromoCardCheckedProps extends PromoCardCommonProps {
|
|
66
|
+
export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
|
|
61
67
|
/** Specify the initial checked attribute of the PromoCard */
|
|
62
68
|
defaultChecked?: boolean;
|
|
63
69
|
/** Specify whether the PromoCard is checked, or not */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
export type PromoCardIndicatorProps = {
|
|
3
3
|
/** Optional class name(s) to add to the indicator container. */
|
|
4
4
|
className?: string;
|
|
5
5
|
/** Optional label to display next to the indicator. */
|
|
6
6
|
label?: string;
|
|
7
7
|
/** Optional icon to display in the indicator. */
|
|
8
|
-
icon?: 'check' | 'arrow' | 'download';
|
|
8
|
+
icon?: 'check' | 'arrow' | 'download' | ReactElement;
|
|
9
|
+
/** Optional prop to specify whether the indicator is sized small or not. */
|
|
10
|
+
isSmall?: boolean;
|
|
9
11
|
/** Optional ID to add to the indicator container for testing purposes. */
|
|
10
12
|
testid?: string;
|
|
11
13
|
/** Optional children to display inside the indicator. */
|
|
@@ -20,7 +22,7 @@ export type PromoCardIndicatorProps = {
|
|
|
20
22
|
*
|
|
21
23
|
* @param {string} className - Optional class name(s) to add to the indicator container.
|
|
22
24
|
* @param {string} label - Optional label to display next to the indicator.
|
|
23
|
-
* @param {string} icon - Optional icon to display in the indicator.
|
|
25
|
+
* @param {string | ReactElement} icon - Optional icon to display in the indicator.
|
|
24
26
|
* @param {string} testid - Optional ID to add to the indicator container for testing purposes.
|
|
25
27
|
* @param {ReactNode} children - Optional children to display inside the indicator.
|
|
26
28
|
* @returns {JSX.Element} - The PromoCardIndicator component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCardIndicator.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCardIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PromoCardIndicator.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCardIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMhD,MAAM,MAAM,uBAAuB,GAAG;IACpC,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IAErD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuCzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-0b6dfe0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -78,12 +78,12 @@
|
|
|
78
78
|
"rollup": "^3.28.1",
|
|
79
79
|
"storybook": "^7.4.5",
|
|
80
80
|
"@transferwise/less-config": "3.0.6",
|
|
81
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
81
|
+
"@transferwise/neptune-css": "0.0.0-experimental-0b6dfe0",
|
|
82
82
|
"@wise/components-theming": "0.8.4"
|
|
83
83
|
},
|
|
84
84
|
"peerDependencies": {
|
|
85
85
|
"@transferwise/icons": "^3.7.0",
|
|
86
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
86
|
+
"@transferwise/neptune-css": "0.0.0-experimental-0b6dfe0",
|
|
87
87
|
"@wise/art": "^2.7.0",
|
|
88
88
|
"@wise/components-theming": "^0.8.4",
|
|
89
89
|
"currency-flags": "^4.0.2",
|
package/src/common/card/Card.tsx
CHANGED
|
@@ -2,6 +2,7 @@ import classNames from 'classnames';
|
|
|
2
2
|
import { MouseEvent, ReactNode, useRef } from 'react';
|
|
3
3
|
|
|
4
4
|
import { CloseButton } from '../closeButton';
|
|
5
|
+
import { stopPropagation } from '../domHelpers';
|
|
5
6
|
|
|
6
7
|
export interface CardProps {
|
|
7
8
|
/** Content to display inside Card. */
|
|
@@ -49,7 +50,7 @@ export interface CardProps {
|
|
|
49
50
|
*/
|
|
50
51
|
const Card: React.FC<CardProps> = ({
|
|
51
52
|
className,
|
|
52
|
-
children,
|
|
53
|
+
children = null,
|
|
53
54
|
id,
|
|
54
55
|
isDisabled = false,
|
|
55
56
|
isSmall = false,
|
|
@@ -80,7 +81,10 @@ const Card: React.FC<CardProps> = ({
|
|
|
80
81
|
size={isSmall ? 'sm' : 'md'}
|
|
81
82
|
isDisabled={isDisabled}
|
|
82
83
|
testId="close-button"
|
|
83
|
-
onClick={
|
|
84
|
+
onClick={(e) => {
|
|
85
|
+
stopPropagation(e);
|
|
86
|
+
onDismiss();
|
|
87
|
+
}}
|
|
84
88
|
/>
|
|
85
89
|
)}
|
|
86
90
|
{children}
|
package/src/common/card/index.ts
CHANGED