@transferwise/components 0.0.0-experimental-77f3fcf → 0.0.0-experimental-72aed20
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 +31 -60
- package/build/index.esm.js.map +1 -1
- package/build/index.js +31 -60
- 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/Option/Option.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/dateInput/DateInput.d.ts +2 -0
- package/build/types/dateInput/DateInput.d.ts.map +1 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
- 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 +1 -1
- package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap +6 -6
- package/src/card/Card.spec.js +2 -2
- package/src/common/Option/Option.tsx +1 -7
- package/src/common/card/Card.tsx +2 -6
- package/src/common/card/index.ts +0 -1
- package/src/dateInput/DateInput.js +8 -0
- package/src/dateInput/DateInput.story.tsx +2 -0
- package/src/main.css +1 -1
- package/src/phoneNumberInput/PhoneNumberInput.js +1 -0
- 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 +22 -69
- 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":"Option.d.ts","sourceRoot":"","sources":["../../../../src/common/Option/Option.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAc,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,iBAAkB,SAAQ,eAAe,EAAE,SAAS;IAC5D,EAAE,EAAE,GAAG,CAAC;CACT;AAED,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAE5D,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/common/Option/Option.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAc,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,iBAAkB,SAAQ,eAAe,EAAE,SAAS;IAC5D,EAAE,EAAE,GAAG,CAAC;CACT;AAED,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAE5D,QAAA,MAAM,MAAM,uGA4DX,CAAC;AAEF,eAAe,MAAM,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"}
|
|
@@ -22,8 +22,10 @@ export interface DateInputProps {
|
|
|
22
22
|
onFocus?: (...args: any[])=>any;
|
|
23
23
|
onBlur?: (...args: any[])=>any;
|
|
24
24
|
dayLabel?: string;
|
|
25
|
+
dayAutoComplete?: string;
|
|
25
26
|
monthLabel?: string;
|
|
26
27
|
yearLabel?: string;
|
|
28
|
+
yearAutoComplete?: string;
|
|
27
29
|
monthFormat?: DateInputMonthFormat;
|
|
28
30
|
mode?: DateInputMode;
|
|
29
31
|
placeholders?: DateInputPlaceholders;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;gCAsQC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.js"],"names":[],"mappings":";AAuBA,
|
|
1
|
+
{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.js"],"names":[],"mappings":";AAuBA,2EAyJC;;;;;;;;;;;;;;;;;;;;;;;;;;QAwBC,gCAAY;QACZ,+BAAW"}
|
|
@@ -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;;AA0MjB,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
|
@@ -14,11 +14,11 @@ exports[`AccordionItem open / close renders an item closed 1`] = `
|
|
|
14
14
|
<div
|
|
15
15
|
class="media-body"
|
|
16
16
|
>
|
|
17
|
-
<
|
|
18
|
-
class="np-text-body-large-bold text-primary np-option__title
|
|
17
|
+
<h4
|
|
18
|
+
class="np-text-body-large-bold text-primary np-option__title"
|
|
19
19
|
>
|
|
20
20
|
This is title number one
|
|
21
|
-
</
|
|
21
|
+
</h4>
|
|
22
22
|
</div>
|
|
23
23
|
<div
|
|
24
24
|
class="media-right"
|
|
@@ -62,11 +62,11 @@ exports[`AccordionItem open / close renders an item open 1`] = `
|
|
|
62
62
|
<div
|
|
63
63
|
class="media-body"
|
|
64
64
|
>
|
|
65
|
-
<
|
|
66
|
-
class="np-text-body-large-bold text-primary np-option__title
|
|
65
|
+
<h4
|
|
66
|
+
class="np-text-body-large-bold text-primary np-option__title"
|
|
67
67
|
>
|
|
68
68
|
This is title number one
|
|
69
|
-
</
|
|
69
|
+
</h4>
|
|
70
70
|
</div>
|
|
71
71
|
<div
|
|
72
72
|
class="media-right"
|
package/src/card/Card.spec.js
CHANGED
|
@@ -56,12 +56,12 @@ describe('Card', () => {
|
|
|
56
56
|
});
|
|
57
57
|
|
|
58
58
|
describe('when there is no children prop', () => {
|
|
59
|
-
it('
|
|
59
|
+
it('renders Option title as a heading 4', () => {
|
|
60
60
|
const onClick = jest.fn();
|
|
61
61
|
renderCard(onClick);
|
|
62
62
|
|
|
63
63
|
expect(screen.queryByRole('button')).not.toBeInTheDocument();
|
|
64
|
-
expect(screen.getByText(defaultProps.title).tagName).toBe('
|
|
64
|
+
expect(screen.getByText(defaultProps.title).tagName).toBe('H4');
|
|
65
65
|
});
|
|
66
66
|
|
|
67
67
|
it('has an inactive class', () => {
|
|
@@ -85,13 +85,7 @@ const Option = forwardRef<ReferenceType, OptionProps>(
|
|
|
85
85
|
</div>
|
|
86
86
|
)}
|
|
87
87
|
<div className="media-body">
|
|
88
|
-
<
|
|
89
|
-
as="span"
|
|
90
|
-
type={Typography.BODY_LARGE_BOLD}
|
|
91
|
-
className="text-primary np-option__title d-block"
|
|
92
|
-
>
|
|
93
|
-
{title}
|
|
94
|
-
</Body>
|
|
88
|
+
<h4 className="np-text-body-large-bold text-primary np-option__title">{title}</h4>
|
|
95
89
|
{content && <Body className="d-block np-option__body">{content}</Body>}
|
|
96
90
|
</div>
|
|
97
91
|
<div className="media-right">{button}</div>
|
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
|
@@ -18,8 +18,10 @@ const DateInput = ({
|
|
|
18
18
|
size,
|
|
19
19
|
value,
|
|
20
20
|
dayLabel,
|
|
21
|
+
dayAutoComplete,
|
|
21
22
|
monthLabel,
|
|
22
23
|
yearLabel,
|
|
24
|
+
yearAutoComplete,
|
|
23
25
|
monthFormat,
|
|
24
26
|
mode,
|
|
25
27
|
onChange,
|
|
@@ -239,6 +241,7 @@ const DateInput = ({
|
|
|
239
241
|
<Input
|
|
240
242
|
type="number"
|
|
241
243
|
name="day"
|
|
244
|
+
autoComplete={dayAutoComplete}
|
|
242
245
|
value={day || ''}
|
|
243
246
|
placeholder={placeholders.day}
|
|
244
247
|
disabled={disabled}
|
|
@@ -259,6 +262,7 @@ const DateInput = ({
|
|
|
259
262
|
<Input
|
|
260
263
|
type="number"
|
|
261
264
|
name="year"
|
|
265
|
+
autoComplete={yearAutoComplete}
|
|
262
266
|
placeholder={placeholders.year}
|
|
263
267
|
value={year || ''}
|
|
264
268
|
disabled={disabled}
|
|
@@ -303,8 +307,10 @@ DateInput.propTypes = {
|
|
|
303
307
|
onFocus: PropTypes.func,
|
|
304
308
|
onBlur: PropTypes.func,
|
|
305
309
|
dayLabel: PropTypes.string,
|
|
310
|
+
dayAutoComplete: PropTypes.string,
|
|
306
311
|
monthLabel: PropTypes.string,
|
|
307
312
|
yearLabel: PropTypes.string,
|
|
313
|
+
yearAutoComplete: PropTypes.string,
|
|
308
314
|
monthFormat: PropTypes.oneOf(['long', 'short']),
|
|
309
315
|
mode: PropTypes.oneOf(['day-month-year', 'month-year']),
|
|
310
316
|
placeholders: PropTypes.shape({
|
|
@@ -322,6 +328,8 @@ DateInput.defaultProps = {
|
|
|
322
328
|
value: null,
|
|
323
329
|
onFocus: null,
|
|
324
330
|
onBlur: null,
|
|
331
|
+
dayAutoComplete: null,
|
|
332
|
+
yearAutoComplete: null,
|
|
325
333
|
monthFormat: MonthFormat.LONG,
|
|
326
334
|
mode: DateMode.DAY_MONTH_YEAR,
|
|
327
335
|
id: '',
|
|
@@ -8,8 +8,10 @@ export default {
|
|
|
8
8
|
title: 'Forms/DateInput',
|
|
9
9
|
args: {
|
|
10
10
|
dayLabel: 'Day input',
|
|
11
|
+
dayAutoComplete: 'bday-day',
|
|
11
12
|
monthLabel: 'Month select',
|
|
12
13
|
yearLabel: 'Year input',
|
|
14
|
+
yearAutoComplete: 'bday-year',
|
|
13
15
|
selectProps: {
|
|
14
16
|
buttonProps: {
|
|
15
17
|
'aria-label': 'Select month',
|