@transferwise/components 0.0.0-experimental-0b6dfe0 → 0.0.0-experimental-6dd9117
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 +54 -109
- package/build/index.esm.js.map +1 -1
- package/build/index.js +54 -109
- 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/accordion/AccordionItem/AccordionItem.d.ts.map +1 -1
- package/build/types/common/card/Card.d.ts.map +1 -1
- package/build/types/common/card/index.d.ts +0 -1
- package/build/types/common/card/index.d.ts.map +1 -1
- package/build/types/common/index.d.ts +1 -0
- package/build/types/common/randomId.d.ts +13 -0
- package/build/types/common/randomId.d.ts.map +1 -0
- package/build/types/promoCard/PromoCard.d.ts +3 -9
- package/build/types/promoCard/PromoCard.d.ts.map +1 -1
- package/build/types/promoCard/PromoCardIndicator.d.ts +3 -5
- package/build/types/promoCard/PromoCardIndicator.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/accordion/AccordionItem/AccordionItem.spec.js +1 -0
- package/src/accordion/AccordionItem/AccordionItem.tsx +19 -11
- package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap +18 -4
- package/src/common/card/Card.tsx +2 -6
- package/src/common/card/index.ts +0 -1
- package/src/common/index.js +1 -0
- package/src/common/randomId.ts +14 -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 +0 -1
- package/src/promoCard/PromoCard.story.tsx +30 -90
- package/src/promoCard/PromoCard.tsx +23 -85
- package/src/promoCard/PromoCardIndicator.tsx +8 -20
|
@@ -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-
|
|
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:9999px;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: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":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -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;AAItD,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,CAuC7B,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"}
|
|
@@ -12,6 +12,7 @@ export * from "./propsValues/profileType";
|
|
|
12
12
|
export * from "./propsValues/scroll";
|
|
13
13
|
export * from "./locale";
|
|
14
14
|
export * from "./commonProps";
|
|
15
|
+
export * from "./randomId";
|
|
15
16
|
export { Breakpoint } from "./propsValues/breakpoint";
|
|
16
17
|
export { Type } from "./propsValues/type";
|
|
17
18
|
export { DateMode } from "./propsValues/dateMode";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* generateRandomId() function
|
|
3
|
+
*
|
|
4
|
+
* This function generates a random string of characters that can be used as
|
|
5
|
+
* an ID.
|
|
6
|
+
*
|
|
7
|
+
* @returns {string} A random string of characters.
|
|
8
|
+
* @example
|
|
9
|
+
* const id = generateRandomId();
|
|
10
|
+
* // id will be a random string of characters, such as "id-4711".
|
|
11
|
+
*/
|
|
12
|
+
export declare const generateRandomId: () => string;
|
|
13
|
+
//# sourceMappingURL=randomId.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"randomId.d.ts","sourceRoot":"","sources":["../../../src/common/randomId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,QAAO,MAEnC,CAAC"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { CardProps } from '../common/card';
|
|
3
|
-
import { PromoCardIndicatorProps } from './PromoCardIndicator';
|
|
4
2
|
export type ReferenceType = React.Ref<HTMLInputElement>;
|
|
5
3
|
export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
|
|
6
4
|
export type RelatedTypes = '' | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
|
|
@@ -19,14 +17,12 @@ export interface PromoCardCommonProps {
|
|
|
19
17
|
headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';
|
|
20
18
|
/** Optional prop to specify text for the indicator label of the PromoCard */
|
|
21
19
|
indicatorLabel?: string;
|
|
22
|
-
/** Optional prop to specify the icon for the indicator icon of the PromoCard */
|
|
23
|
-
indicatorIcon?: PromoCardIndicatorProps['icon'];
|
|
24
20
|
/** Optional prop to specify an image alt text */
|
|
25
21
|
imageAlt?: string;
|
|
26
22
|
/** Optional prop to specify an image class */
|
|
27
23
|
imageClass?: string;
|
|
28
24
|
/** Optional prop to specify an image source url */
|
|
29
|
-
imageSource
|
|
25
|
+
imageSource: string;
|
|
30
26
|
/** Specify whether the PromoCard is disabled, or not */
|
|
31
27
|
isDisabled?: boolean;
|
|
32
28
|
/** Specify an onClick event handler */
|
|
@@ -35,10 +31,8 @@ export interface PromoCardCommonProps {
|
|
|
35
31
|
testId?: string;
|
|
36
32
|
/** Required prop to specify the title text of the PromoCard */
|
|
37
33
|
title: string;
|
|
38
|
-
/** Set to false to use body font style for the title */
|
|
39
|
-
useDisplayFont?: boolean;
|
|
40
34
|
}
|
|
41
|
-
export interface PromoCardLinkProps extends PromoCardCommonProps
|
|
35
|
+
export interface PromoCardLinkProps extends PromoCardCommonProps {
|
|
42
36
|
/**
|
|
43
37
|
* Optional prop to prompts a user to save the linked URL instead of
|
|
44
38
|
* navigating to it
|
|
@@ -63,7 +57,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
|
|
|
63
57
|
reference?: never;
|
|
64
58
|
value?: never;
|
|
65
59
|
}
|
|
66
|
-
export interface PromoCardCheckedProps extends PromoCardCommonProps
|
|
60
|
+
export interface PromoCardCheckedProps extends PromoCardCommonProps {
|
|
67
61
|
/** Specify the initial checked attribute of the PromoCard */
|
|
68
62
|
defaultChecked?: boolean;
|
|
69
63
|
/** 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":"AAEA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAW3F,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACjE,MAAM,MAAM,YAAY,GACpB,EAAE,GACF,WAAW,GACX,QAAQ,GACR,UAAU,GACV,UAAU,GACV,MAAM,GACN,SAAS,GACT,MAAM,GACN,UAAU,GACV,YAAY,GACZ,UAAU,GACV,MAAM,GACN,QAAQ,GACR,KAAK,CAAC;AAEV,MAAM,WAAW,oBAAoB;IACnC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEzC,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;IAEpB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,YAAY,CAAC;IAEnB,iEAAiE;IACjE,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB,iDAAiD;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IACjE,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,iDAAiD;IACjD,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,gEAAgE;IAChE,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAE5B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAExE,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,kBAAkB,GAAG,qBAAqB,KAC9C,GAAG,CAAC,OAAO,CAAC;;AA2LjB,wBAAqC"}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { 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'
|
|
9
|
-
/** Optional prop to specify whether the indicator is sized small or not. */
|
|
10
|
-
isSmall?: boolean;
|
|
8
|
+
icon?: 'check' | 'arrow' | 'download';
|
|
11
9
|
/** Optional ID to add to the indicator container for testing purposes. */
|
|
12
10
|
testid?: string;
|
|
13
11
|
/** Optional children to display inside the indicator. */
|
|
@@ -22,7 +20,7 @@ export type PromoCardIndicatorProps = {
|
|
|
22
20
|
*
|
|
23
21
|
* @param {string} className - Optional class name(s) to add to the indicator container.
|
|
24
22
|
* @param {string} label - Optional label to display next to the indicator.
|
|
25
|
-
* @param {string
|
|
23
|
+
* @param {string} icon - Optional icon to display in the indicator.
|
|
26
24
|
* @param {string} testid - Optional ID to add to the indicator container for testing purposes.
|
|
27
25
|
* @param {ReactNode} children - Optional children to display inside the indicator.
|
|
28
26
|
* @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,
|
|
1
|
+
{"version":3,"file":"PromoCardIndicator.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCardIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,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,CAAC;IAEtC,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,CA+BzD,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-6dd9117",
|
|
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-6dd9117",
|
|
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-6dd9117",
|
|
87
87
|
"@wise/art": "^2.7.0",
|
|
88
88
|
"@wise/components-theming": "^0.8.4",
|
|
89
89
|
"currency-flags": "^4.0.2",
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { useId } from '@radix-ui/react-id';
|
|
1
2
|
import { useTheme } from '@wise/components-theming';
|
|
2
3
|
import classNames from 'classnames';
|
|
3
4
|
import { cloneElement, FC, ReactNode } from 'react';
|
|
@@ -70,11 +71,13 @@ const AccordionItem: FC<AccordionItemProps> = ({
|
|
|
70
71
|
icon,
|
|
71
72
|
theme = 'light',
|
|
72
73
|
}) => {
|
|
73
|
-
const iconElement = icon ? cloneElement(icon as
|
|
74
|
+
const iconElement = icon ? cloneElement(icon as React.ReactElement<any>, { size: 24 }) : null;
|
|
75
|
+
const fallbackId = useId();
|
|
76
|
+
const accordionId = id ?? fallbackId;
|
|
74
77
|
|
|
75
78
|
return (
|
|
76
79
|
<div
|
|
77
|
-
id={
|
|
80
|
+
id={accordionId}
|
|
78
81
|
className={classNames(
|
|
79
82
|
'np-accordion-item',
|
|
80
83
|
iconElement ? 'np-accordion-item--with-icon' : null,
|
|
@@ -90,18 +93,23 @@ const AccordionItem: FC<AccordionItemProps> = ({
|
|
|
90
93
|
title={title}
|
|
91
94
|
button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}
|
|
92
95
|
inverseMediaCircle={false}
|
|
96
|
+
aria-expanded={open}
|
|
97
|
+
aria-controls={`${accordionId}-section`}
|
|
98
|
+
id={`${accordionId}-control`}
|
|
93
99
|
onClick={onClick}
|
|
94
100
|
/>
|
|
95
101
|
{open && (
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
'
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
102
|
+
<div id={`${accordionId}-section`} role="region" aria-labelledby={`${accordionId}-control`}>
|
|
103
|
+
<Body
|
|
104
|
+
as="span"
|
|
105
|
+
type={Typography.BODY_LARGE}
|
|
106
|
+
className={classNames('np-accordion-item__content', 'd-block', {
|
|
107
|
+
'has-icon': icon,
|
|
108
|
+
})}
|
|
109
|
+
>
|
|
110
|
+
{content}
|
|
111
|
+
</Body>
|
|
112
|
+
</div>
|
|
105
113
|
)}
|
|
106
114
|
</div>
|
|
107
115
|
);
|
|
@@ -4,9 +4,13 @@ exports[`AccordionItem open / close renders an item closed 1`] = `
|
|
|
4
4
|
<div>
|
|
5
5
|
<div
|
|
6
6
|
class="np-accordion-item"
|
|
7
|
+
id="test-accordion"
|
|
7
8
|
>
|
|
8
9
|
<button
|
|
10
|
+
aria-controls="test-accordion-section"
|
|
11
|
+
aria-expanded="false"
|
|
9
12
|
class="np-option decision"
|
|
13
|
+
id="test-accordion-control"
|
|
10
14
|
>
|
|
11
15
|
<div
|
|
12
16
|
class="media"
|
|
@@ -52,9 +56,13 @@ exports[`AccordionItem open / close renders an item open 1`] = `
|
|
|
52
56
|
<div>
|
|
53
57
|
<div
|
|
54
58
|
class="np-accordion-item np-accordion-item--open"
|
|
59
|
+
id="test-accordion"
|
|
55
60
|
>
|
|
56
61
|
<button
|
|
62
|
+
aria-controls="test-accordion-section"
|
|
63
|
+
aria-expanded="true"
|
|
57
64
|
class="np-option decision"
|
|
65
|
+
id="test-accordion-control"
|
|
58
66
|
>
|
|
59
67
|
<div
|
|
60
68
|
class="media"
|
|
@@ -92,11 +100,17 @@ exports[`AccordionItem open / close renders an item open 1`] = `
|
|
|
92
100
|
</div>
|
|
93
101
|
</div>
|
|
94
102
|
</button>
|
|
95
|
-
<
|
|
96
|
-
|
|
103
|
+
<div
|
|
104
|
+
aria-labelledby="test-accordion-control"
|
|
105
|
+
id="test-accordion-section"
|
|
106
|
+
role="region"
|
|
97
107
|
>
|
|
98
|
-
|
|
99
|
-
|
|
108
|
+
<span
|
|
109
|
+
class="np-text-body-large np-accordion-item__content d-block"
|
|
110
|
+
>
|
|
111
|
+
Lauri Ipsum has been the industry standard dummy text ever since the 1500s.
|
|
112
|
+
</span>
|
|
113
|
+
</div>
|
|
100
114
|
</div>
|
|
101
115
|
</div>
|
|
102
116
|
`;
|
package/src/common/card/Card.tsx
CHANGED
|
@@ -2,7 +2,6 @@ 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';
|
|
6
5
|
|
|
7
6
|
export interface CardProps {
|
|
8
7
|
/** Content to display inside Card. */
|
|
@@ -50,7 +49,7 @@ export interface CardProps {
|
|
|
50
49
|
*/
|
|
51
50
|
const Card: React.FC<CardProps> = ({
|
|
52
51
|
className,
|
|
53
|
-
children
|
|
52
|
+
children,
|
|
54
53
|
id,
|
|
55
54
|
isDisabled = false,
|
|
56
55
|
isSmall = false,
|
|
@@ -81,10 +80,7 @@ const Card: React.FC<CardProps> = ({
|
|
|
81
80
|
size={isSmall ? 'sm' : 'md'}
|
|
82
81
|
isDisabled={isDisabled}
|
|
83
82
|
testId="close-button"
|
|
84
|
-
onClick={
|
|
85
|
-
stopPropagation(e);
|
|
86
|
-
onDismiss();
|
|
87
|
-
}}
|
|
83
|
+
onClick={onDismiss}
|
|
88
84
|
/>
|
|
89
85
|
)}
|
|
90
86
|
{children}
|
package/src/common/card/index.ts
CHANGED
package/src/common/index.js
CHANGED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* generateRandomId() function
|
|
3
|
+
*
|
|
4
|
+
* This function generates a random string of characters that can be used as
|
|
5
|
+
* an ID.
|
|
6
|
+
*
|
|
7
|
+
* @returns {string} A random string of characters.
|
|
8
|
+
* @example
|
|
9
|
+
* const id = generateRandomId();
|
|
10
|
+
* // id will be a random string of characters, such as "id-4711".
|
|
11
|
+
*/
|
|
12
|
+
export const generateRandomId = (): string => {
|
|
13
|
+
return `id-${Math.random().toString(36).slice(7)}`;
|
|
14
|
+
};
|