@transferwise/components 0.0.0-experimental-b2d320f → 0.0.0-experimental-5bd73f6
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/common/{card/Card.js → baseCard/BaseCard.js} +4 -4
- package/build/common/baseCard/BaseCard.js.map +1 -0
- package/build/common/{card/Card.mjs → baseCard/BaseCard.mjs} +4 -4
- package/build/common/baseCard/BaseCard.mjs.map +1 -0
- package/build/index.js +4 -4
- package/build/index.mjs +1 -1
- package/build/main.css +49 -49
- package/build/promoCard/PromoCard.js +2 -2
- package/build/promoCard/PromoCard.js.map +1 -1
- package/build/promoCard/PromoCard.mjs +2 -2
- package/build/promoCard/PromoCard.mjs.map +1 -1
- package/build/styles/main.css +49 -49
- package/build/types/common/{card/Card.d.ts → baseCard/BaseCard.d.ts} +8 -8
- package/build/types/common/baseCard/BaseCard.d.ts.map +1 -0
- package/build/types/common/baseCard/index.d.ts +3 -0
- package/build/types/common/baseCard/index.d.ts.map +1 -0
- package/build/types/index.d.ts +1 -1
- package/build/types/index.d.ts.map +1 -1
- package/build/types/promoCard/PromoCard.d.ts +3 -3
- package/build/types/promoCard/PromoCard.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/common/{card/Card.less → baseCard/BaseCard.less} +1 -1
- package/src/common/{card/Card.story.tsx → baseCard/BaseCard.story.tsx} +5 -5
- package/src/common/{card/Card.test.tsx → baseCard/BaseCard.test.tsx} +11 -12
- package/src/common/{card/Card.tsx → baseCard/BaseCard.tsx} +9 -9
- package/src/common/baseCard/index.ts +2 -0
- package/src/index.ts +1 -1
- package/src/main.css +49 -49
- package/src/main.less +2 -2
- package/src/promoCard/PromoCard.tsx +6 -5
- package/build/common/card/Card.js.map +0 -1
- package/build/common/card/Card.mjs.map +0 -1
- package/build/types/common/card/Card.d.ts.map +0 -1
- package/build/types/common/card/index.d.ts +0 -3
- package/build/types/common/card/index.d.ts.map +0 -1
- package/src/common/card/index.ts +0 -2
- /package/build/styles/common/{card/Card.css → baseCard/BaseCard.css} +0 -0
- /package/src/common/{card/Card.css → baseCard/BaseCard.css} +0 -0
|
@@ -8,7 +8,7 @@ var CloseButton = require('../closeButton/CloseButton.js');
|
|
|
8
8
|
var documentIosClick = require('../domHelpers/documentIosClick.js');
|
|
9
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
10
|
|
|
11
|
-
const
|
|
11
|
+
const BaseCard = /*#__PURE__*/React.forwardRef(({
|
|
12
12
|
className,
|
|
13
13
|
children = null,
|
|
14
14
|
id,
|
|
@@ -41,7 +41,7 @@ const Card = /*#__PURE__*/React.forwardRef(({
|
|
|
41
41
|
}), children]
|
|
42
42
|
});
|
|
43
43
|
});
|
|
44
|
-
|
|
44
|
+
BaseCard.displayName = 'Card';
|
|
45
45
|
|
|
46
|
-
exports.default =
|
|
47
|
-
//# sourceMappingURL=
|
|
46
|
+
exports.default = BaseCard;
|
|
47
|
+
//# sourceMappingURL=BaseCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseCard.js","sources":["../../../src/common/baseCard/BaseCard.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface BaseCardProps {\n /** Content to display inside Card. */\n children: ReactNode;\n\n /** Optional prop to specify classNames onto the Card */\n className?: string;\n\n /** Optional prop to specify the ID on to Card */\n id?: string;\n\n /** Specify whether the Card is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify whether the Card is sized small or not */\n isSmall?: boolean;\n\n /** Optionally specify Card onDismiss function */\n onDismiss?: () => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * BaseCard component.\n *\n * A BaseCard is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <BaseCard>\n * <p>Hello World!</p>\n * </BaseCard>\n */\nconst BaseCard = forwardRef<HTMLDivElement, BaseCardProps>(\n (\n {\n className,\n children = null,\n id,\n isDisabled = false,\n isSmall = false,\n onDismiss,\n testId,\n ...props\n },\n ref,\n ) => {\n const closeButtonReference = useRef(null);\n\n return (\n <div\n ref={ref}\n className={clsx(\n 'np-Card',\n {\n 'np-Card--small': !!isSmall,\n 'is-disabled': !!isDisabled,\n },\n className,\n )}\n id={id}\n data-testid={testId}\n {...props}\n >\n {onDismiss && (\n <CloseButton\n ref={closeButtonReference}\n className=\"np-Card-closeButton\"\n size={isSmall ? 'sm' : 'md'}\n isDisabled={isDisabled}\n testId=\"close-button\"\n onClick={(e) => {\n stopPropagation(e);\n onDismiss();\n }}\n />\n )}\n {children}\n </div>\n );\n },\n);\n\nBaseCard.displayName = 'Card';\n\nexport default BaseCard;\n"],"names":["BaseCard","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;;;;;AAkDA,MAAMA,QAAQ,gBAAGC,gBAAU,CACzB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,cAAA,CAACC,uBAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,gCAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,QAAQ,CAACqB,WAAW,GAAG,MAAM;;;;"}
|
|
@@ -4,7 +4,7 @@ import { CloseButton } from '../closeButton/CloseButton.mjs';
|
|
|
4
4
|
import { stopPropagation } from '../domHelpers/documentIosClick.mjs';
|
|
5
5
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const BaseCard = /*#__PURE__*/forwardRef(({
|
|
8
8
|
className,
|
|
9
9
|
children = null,
|
|
10
10
|
id,
|
|
@@ -37,7 +37,7 @@ const Card = /*#__PURE__*/forwardRef(({
|
|
|
37
37
|
}), children]
|
|
38
38
|
});
|
|
39
39
|
});
|
|
40
|
-
|
|
40
|
+
BaseCard.displayName = 'Card';
|
|
41
41
|
|
|
42
|
-
export {
|
|
43
|
-
//# sourceMappingURL=
|
|
42
|
+
export { BaseCard as default };
|
|
43
|
+
//# sourceMappingURL=BaseCard.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseCard.mjs","sources":["../../../src/common/baseCard/BaseCard.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface BaseCardProps {\n /** Content to display inside Card. */\n children: ReactNode;\n\n /** Optional prop to specify classNames onto the Card */\n className?: string;\n\n /** Optional prop to specify the ID on to Card */\n id?: string;\n\n /** Specify whether the Card is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify whether the Card is sized small or not */\n isSmall?: boolean;\n\n /** Optionally specify Card onDismiss function */\n onDismiss?: () => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * BaseCard component.\n *\n * A BaseCard is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <BaseCard>\n * <p>Hello World!</p>\n * </BaseCard>\n */\nconst BaseCard = forwardRef<HTMLDivElement, BaseCardProps>(\n (\n {\n className,\n children = null,\n id,\n isDisabled = false,\n isSmall = false,\n onDismiss,\n testId,\n ...props\n },\n ref,\n ) => {\n const closeButtonReference = useRef(null);\n\n return (\n <div\n ref={ref}\n className={clsx(\n 'np-Card',\n {\n 'np-Card--small': !!isSmall,\n 'is-disabled': !!isDisabled,\n },\n className,\n )}\n id={id}\n data-testid={testId}\n {...props}\n >\n {onDismiss && (\n <CloseButton\n ref={closeButtonReference}\n className=\"np-Card-closeButton\"\n size={isSmall ? 'sm' : 'md'}\n isDisabled={isDisabled}\n testId=\"close-button\"\n onClick={(e) => {\n stopPropagation(e);\n onDismiss();\n }}\n />\n )}\n {children}\n </div>\n );\n },\n);\n\nBaseCard.displayName = 'Card';\n\nexport default BaseCard;\n"],"names":["BaseCard","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;AAkDA,MAAMA,QAAQ,gBAAGC,UAAU,CACzB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,GAAA,CAACC,WAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,eAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,QAAQ,CAACqB,WAAW,GAAG,MAAM;;;;"}
|
package/build/index.js
CHANGED
|
@@ -23,7 +23,7 @@ var Body = require('./body/Body.js');
|
|
|
23
23
|
var Button_resolver = require('./button/Button.resolver.js');
|
|
24
24
|
var IconButton = require('./iconButton/IconButton.js');
|
|
25
25
|
var Carousel = require('./carousel/Carousel.js');
|
|
26
|
-
var Card
|
|
26
|
+
var Card = require('./card/Card.js');
|
|
27
27
|
var Checkbox = require('./checkbox/Checkbox.js');
|
|
28
28
|
var CheckboxButton = require('./checkboxButton/CheckboxButton.js');
|
|
29
29
|
var CheckboxOption = require('./checkboxOption/CheckboxOption.js');
|
|
@@ -33,7 +33,7 @@ var Chip = require('./chips/Chip.js');
|
|
|
33
33
|
var CircularButton = require('./circularButton/CircularButton.js');
|
|
34
34
|
var Option = require('./common/Option/Option.js');
|
|
35
35
|
var BottomSheet = require('./common/bottomSheet/BottomSheet.js');
|
|
36
|
-
var
|
|
36
|
+
var BaseCard = require('./common/baseCard/BaseCard.js');
|
|
37
37
|
var CriticalCommsBanner = require('./criticalBanner/CriticalCommsBanner.js');
|
|
38
38
|
var DateInput = require('./dateInput/DateInput.js');
|
|
39
39
|
var DateLookup = require('./dateLookup/DateLookup.js');
|
|
@@ -173,7 +173,7 @@ exports.Body = Body.default;
|
|
|
173
173
|
exports.Button = Button_resolver.default;
|
|
174
174
|
exports.IconButton = IconButton.default;
|
|
175
175
|
exports.Carousel = Carousel.default;
|
|
176
|
-
exports.Card = Card
|
|
176
|
+
exports.Card = Card.default;
|
|
177
177
|
exports.Checkbox = Checkbox.default;
|
|
178
178
|
exports.CheckboxButton = CheckboxButton.default;
|
|
179
179
|
exports.CheckboxOption = CheckboxOption.default;
|
|
@@ -183,7 +183,7 @@ exports.Chip = Chip.default;
|
|
|
183
183
|
exports.CircularButton = CircularButton.default;
|
|
184
184
|
exports.Option = Option.default;
|
|
185
185
|
exports.BottomSheet = BottomSheet.default;
|
|
186
|
-
exports.BaseCard =
|
|
186
|
+
exports.BaseCard = BaseCard.default;
|
|
187
187
|
exports.CriticalCommsBanner = CriticalCommsBanner.default;
|
|
188
188
|
exports.DateInput = DateInput.default;
|
|
189
189
|
exports.DateLookup = DateLookup.default;
|
package/build/index.mjs
CHANGED
|
@@ -31,7 +31,7 @@ export { default as Chip } from './chips/Chip.mjs';
|
|
|
31
31
|
export { default as CircularButton } from './circularButton/CircularButton.mjs';
|
|
32
32
|
export { default as Option } from './common/Option/Option.mjs';
|
|
33
33
|
export { default as BottomSheet } from './common/bottomSheet/BottomSheet.mjs';
|
|
34
|
-
export { default as BaseCard } from './common/
|
|
34
|
+
export { default as BaseCard } from './common/baseCard/BaseCard.mjs';
|
|
35
35
|
export { default as CriticalCommsBanner } from './criticalBanner/CriticalCommsBanner.mjs';
|
|
36
36
|
export { default as DateInput } from './dateInput/DateInput.mjs';
|
|
37
37
|
export { default as DateLookup } from './dateLookup/DateLookup.mjs';
|
package/build/main.css
CHANGED
|
@@ -1969,6 +1969,55 @@
|
|
|
1969
1969
|
border-radius: var(--radius-full);
|
|
1970
1970
|
box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
|
|
1971
1971
|
}
|
|
1972
|
+
/* @define Card */
|
|
1973
|
+
.np-Card {
|
|
1974
|
+
--Card-background-color: var(--color-background-neutral);
|
|
1975
|
+
--Card-border-radius: var(--size-32);
|
|
1976
|
+
--Card-flex-gap: var(--size-16);
|
|
1977
|
+
--Card-padding: var(--size-24);
|
|
1978
|
+
--Card-closeButton-position: var(--size-16);
|
|
1979
|
+
--Card-max-width: initial;
|
|
1980
|
+
display: flex;
|
|
1981
|
+
flex-direction: column;
|
|
1982
|
+
align-items: stretch;
|
|
1983
|
+
background-color: rgba(134,167,189,0.10196);
|
|
1984
|
+
background-color: var(--Card-background-color);
|
|
1985
|
+
border-radius: 32px;
|
|
1986
|
+
border-radius: var(--Card-border-radius);
|
|
1987
|
+
gap: 16px;
|
|
1988
|
+
gap: var(--Card-flex-gap);
|
|
1989
|
+
padding: 24px;
|
|
1990
|
+
padding: var(--Card-padding);
|
|
1991
|
+
position: relative;
|
|
1992
|
+
box-sizing: border-box;
|
|
1993
|
+
overflow: hidden;
|
|
1994
|
+
}
|
|
1995
|
+
@media (min-width: 576px) {
|
|
1996
|
+
.np-Card {
|
|
1997
|
+
max-width: var(--Card-max-width);
|
|
1998
|
+
}
|
|
1999
|
+
}
|
|
2000
|
+
.np-Card.is-disabled .np-Card-closeButton {
|
|
2001
|
+
cursor: not-allowed;
|
|
2002
|
+
}
|
|
2003
|
+
.np-theme-personal--dark .np-Card {
|
|
2004
|
+
--Card-background-color: var(--color-background-elevated);
|
|
2005
|
+
}
|
|
2006
|
+
.np-Card-closeButton {
|
|
2007
|
+
position: absolute;
|
|
2008
|
+
z-index: 100;
|
|
2009
|
+
top: var(--Card-closeButton-position);
|
|
2010
|
+
right: var(--Card-closeButton-position);
|
|
2011
|
+
}
|
|
2012
|
+
[dir="rtl"] .np-Card-closeButton {
|
|
2013
|
+
left: var(--Card-closeButton-position);
|
|
2014
|
+
right: auto;
|
|
2015
|
+
}
|
|
2016
|
+
.np-Card--small {
|
|
2017
|
+
--Card-border-radius: var(--size-16);
|
|
2018
|
+
--Card-closeButton-position: var(--size-8);
|
|
2019
|
+
--Card-padding: var(--size-16);
|
|
2020
|
+
}
|
|
1972
2021
|
.np-bottom-sheet {
|
|
1973
2022
|
border-radius: 10px 10px 0 0;
|
|
1974
2023
|
}
|
|
@@ -2022,55 +2071,6 @@
|
|
|
2022
2071
|
padding: 0 16px 16px;
|
|
2023
2072
|
padding: 0 var(--size-16) var(--size-16);
|
|
2024
2073
|
}
|
|
2025
|
-
/* @define Card */
|
|
2026
|
-
.np-Card {
|
|
2027
|
-
--Card-background-color: var(--color-background-neutral);
|
|
2028
|
-
--Card-border-radius: var(--size-32);
|
|
2029
|
-
--Card-flex-gap: var(--size-16);
|
|
2030
|
-
--Card-padding: var(--size-24);
|
|
2031
|
-
--Card-closeButton-position: var(--size-16);
|
|
2032
|
-
--Card-max-width: initial;
|
|
2033
|
-
display: flex;
|
|
2034
|
-
flex-direction: column;
|
|
2035
|
-
align-items: stretch;
|
|
2036
|
-
background-color: rgba(134,167,189,0.10196);
|
|
2037
|
-
background-color: var(--Card-background-color);
|
|
2038
|
-
border-radius: 32px;
|
|
2039
|
-
border-radius: var(--Card-border-radius);
|
|
2040
|
-
gap: 16px;
|
|
2041
|
-
gap: var(--Card-flex-gap);
|
|
2042
|
-
padding: 24px;
|
|
2043
|
-
padding: var(--Card-padding);
|
|
2044
|
-
position: relative;
|
|
2045
|
-
box-sizing: border-box;
|
|
2046
|
-
overflow: hidden;
|
|
2047
|
-
}
|
|
2048
|
-
@media (min-width: 576px) {
|
|
2049
|
-
.np-Card {
|
|
2050
|
-
max-width: var(--Card-max-width);
|
|
2051
|
-
}
|
|
2052
|
-
}
|
|
2053
|
-
.np-Card.is-disabled .np-Card-closeButton {
|
|
2054
|
-
cursor: not-allowed;
|
|
2055
|
-
}
|
|
2056
|
-
.np-theme-personal--dark .np-Card {
|
|
2057
|
-
--Card-background-color: var(--color-background-elevated);
|
|
2058
|
-
}
|
|
2059
|
-
.np-Card-closeButton {
|
|
2060
|
-
position: absolute;
|
|
2061
|
-
z-index: 100;
|
|
2062
|
-
top: var(--Card-closeButton-position);
|
|
2063
|
-
right: var(--Card-closeButton-position);
|
|
2064
|
-
}
|
|
2065
|
-
[dir="rtl"] .np-Card-closeButton {
|
|
2066
|
-
left: var(--Card-closeButton-position);
|
|
2067
|
-
right: auto;
|
|
2068
|
-
}
|
|
2069
|
-
.np-Card--small {
|
|
2070
|
-
--Card-border-radius: var(--size-16);
|
|
2071
|
-
--Card-closeButton-position: var(--size-8);
|
|
2072
|
-
--Card-padding: var(--size-16);
|
|
2073
|
-
}
|
|
2074
2074
|
.np-close-button {
|
|
2075
2075
|
transition: color 0.15s ease-in-out;
|
|
2076
2076
|
color: #00a2dd;
|
|
@@ -28,7 +28,7 @@ require('../common/fileType.js');
|
|
|
28
28
|
require('react-intl');
|
|
29
29
|
require('../common/closeButton/CloseButton.messages.js');
|
|
30
30
|
var jsxRuntime = require('react/jsx-runtime');
|
|
31
|
-
var
|
|
31
|
+
var BaseCard = require('../common/baseCard/BaseCard.js');
|
|
32
32
|
var Display = require('../display/Display.js');
|
|
33
33
|
var Image = require('../image/Image.js');
|
|
34
34
|
var Title = require('../title/Title.js');
|
|
@@ -175,7 +175,7 @@ const PromoCard$1 = /*#__PURE__*/React.forwardRef(({
|
|
|
175
175
|
React.useEffect(() => {
|
|
176
176
|
setChecked(defaultChecked ?? isChecked ?? false);
|
|
177
177
|
}, [defaultChecked, isChecked]);
|
|
178
|
-
return /*#__PURE__*/jsxRuntime.jsxs(
|
|
178
|
+
return /*#__PURE__*/jsxRuntime.jsxs(BaseCard.default, {
|
|
179
179
|
...commonProps,
|
|
180
180
|
...checkedProps,
|
|
181
181
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCard.js","sources":["../../src/promoCard/PromoCard.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Card, { type CardProps } from '../common/card';\nimport Display from '../display';\nimport Image from '../image/Image';\nimport Title from '../title';\n\nimport { usePromoCardContext } from './PromoCardContext';\nimport PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';\n\nexport type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;\nexport type RelatedTypes =\n | ''\n | 'alternate'\n | 'author'\n | 'bookmark'\n | 'external'\n | 'help'\n | 'license'\n | 'next'\n | 'nofollow'\n | 'noreferrer'\n | 'noopener'\n | 'prev'\n | 'search'\n | 'tag';\n\nexport interface PromoCardCommonProps {\n /** Optional prop to specify classNames onto the PromoCard */\n className?: string;\n\n /** Optional prop to specify the ID of the PromoCard */\n id?: string;\n\n /** Required prop to specify the descriptive text of the PromoCard */\n description: string;\n\n /**\n * Optional prop to specify the heading level of the PromoCard\n *\n * @default 'h3'\n */\n headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';\n\n /** Optional prop to specify text for the indicator label of the PromoCard */\n indicatorLabel?: string;\n\n /** Optional prop to specify the icon for the indicator icon of the PromoCard */\n indicatorIcon?: PromoCardIndicatorProps['icon'];\n\n /** Optional prop to specify an image alt text */\n imageAlt?: string;\n\n /** Optional prop to specify an image class */\n imageClass?: string;\n\n /** Optional prop to specify an image source url */\n imageSource?: string;\n\n /** Specify whether the PromoCard is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify an onClick event handler */\n onClick?: () => void;\n\n /** Specify an onKeyDown event handler */\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to specify the title text of the PromoCard */\n title: string;\n\n /** Set to false to use body font style for the title */\n useDisplayFont?: boolean;\n\n ref?: ReferenceType;\n}\n\nexport interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n /**\n * Optional prop to prompts a user to save the linked URL instead of\n * navigating to it\n */\n download?: string;\n\n /** Optionally specify an href for your PromoCard to contain an <a> element */\n href?: string;\n\n /** Optionally specify the language of the linked URL */\n hrefLang?: string;\n\n /** Optional property that can be pass a ref for the anchor. */\n anchorRef?: React.Ref<HTMLAnchorElement>;\n\n /**\n * Optional prop to specify the ID of the anchor element which can be useful when using a ref.\n */\n anchorId?: string;\n\n /**\n * Relationship between the PromoCard href URL and the current page. See\n * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).\n */\n rel?: RelatedTypes;\n\n /** Optional prop to to display where the linked URL will show */\n target?: React.HTMLAttributeAnchorTarget;\n\n /** Only applies to role=\"radio\" or \"checkbox\" */\n defaultChecked?: never;\n isChecked?: never;\n tabIndex?: never;\n type?: never;\n ref?: ReferenceType;\n value?: never;\n}\n\nexport interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n /** Specify the initial checked attribute of the PromoCard */\n defaultChecked?: boolean;\n\n /** Specify whether the PromoCard is checked, or not */\n isChecked?: boolean;\n\n /** Optional prop to specify the tabIndex of the PromoCard */\n tabIndex?: number;\n\n /** Optional property to provide component Ref */\n ref?: ReferenceType;\n\n /** Optional prop to specify the input type of the PromoCard */\n type?: 'checkbox' | 'radio';\n\n /** Specify the value attribute of the PromoCard if Checkbox or Radio */\n value?: string;\n\n /** Only applies to <a />s */\n download?: never;\n href?: never;\n anchorRef?: never;\n anchorId?: never;\n hrefLang?: never;\n rel?: never;\n target?: never;\n}\n\nexport type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;\n\nexport type PolymorphicPromoCard = (\n props: PromoCardLinkProps | PromoCardCheckedProps,\n) => React.JSX.Element;\n\n/**\n * PromoCard component.\n *\n * PromoCard is a marketing style component that is used to group marketing\n * product related information (such as choosing Card types). It can be used to\n * display information in a structured way, and can be customized with various\n * props to suit different use cases.\n *\n * @component\n * @param {string} className - Additional class name for the PromoCard.\n * @param {string} description - Description text for the PromoCard.\n * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.\n * @param {string} download - Download file name for links.\n * @param {string} href - URL for links.\n * @param {string} hrefLang - Language code for linked URL.\n * @param {string} id - ID of the PromoCard.\n * @param {string} imageAlt - Alt text for the image.\n * @param {string} imageSource - Source URL of the image.\n * @param {string} indicatorLabel - Label for the indicator icon.\n * @param {boolean} isChecked - Checked state for checkboxes and radios.\n * @param {boolean} isDisabled - Whether the PromoCard is disabled.\n * @param {Function} onClick - Click event handler for the PromoCard.\n * @param {string} rel - Relationship between the URL and the current page.\n * @param {number} tabIndex - Tab index for keyboard navigation.\n * @param {string} target - Target window for links.\n * @param {string} testId - ID used for testing.\n * @param {string} title - Title text of the PromoCard.\n * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).\n * @param {string} value - Value for checkboxes and radios.\n * @returns {React.JSX.Element} The rendered PromoCard component.\n * @example\n * <PromoCard\n * title=\"Example PromoCard\"\n * description=\"This is an example PromoCard with a link variation.\"\n * href=\"https://example.com\"\n * target=\"_blank\"\n * imageSource=\"https://example.com/image.png\"\n * imageAlt=\"Example Image\"\n * indicatorLabel=\"Learn More\"\n * />\n */\nconst PromoCard: FunctionComponent<PromoCardProps> = forwardRef(\n (\n {\n className,\n description,\n defaultChecked,\n download,\n href,\n hrefLang,\n id,\n headingLevel = 'h3',\n imageAlt,\n imageClass,\n imageSource,\n indicatorLabel,\n indicatorIcon,\n isChecked,\n isDisabled,\n onClick,\n onKeyDown,\n rel,\n tabIndex,\n target,\n testId,\n title,\n type,\n value,\n isSmall,\n useDisplayFont = true,\n anchorRef,\n anchorId,\n ...props\n },\n ref: ReferenceType,\n ) => {\n // Set the `checked` state to the value of `defaultChecked` if it is truthy,\n // or the value of `isChecked` if it is truthy, or `false` if neither\n // is truthy.\n const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();\n const [checked, setChecked] = useState(\n type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,\n );\n\n const handleClick = () => {\n if (type === 'radio') {\n onChange(value || ''); // Update the context state for radio\n } else if (type === 'checkbox') {\n setChecked(!checked); // Update local state for checkbox\n }\n };\n\n const fallbackId = useId();\n const componentId = id || fallbackId;\n\n // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or\n // `'download'` if `download` is truthy. If neither condition is true, set\n // `icon` to `undefined`.\n\n // Create a function to get icon type\n const getIconType = () => {\n if (indicatorIcon) {\n return indicatorIcon;\n }\n\n if (download) {\n return 'download';\n }\n\n if (href && !type) {\n return 'arrow';\n }\n\n return undefined;\n };\n\n const CardTitle = useDisplayFont ? Display : Title;\n\n // Define all class names string based on the values of the `href`, `type`,\n // `checked`, and `className` props.\n const commonClasses = clsx(\n {\n 'np-Card--promoCard': true,\n 'np-Card--checked': !href && type,\n 'np-Card--link': href && !type,\n 'is-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n },\n className,\n );\n\n // Object with common props that will be passed to the `Card` components\n const commonProps = {\n className: commonClasses,\n id: componentId,\n isDisabled: isDisabled || contextIsDisabled,\n onClick,\n onKeyDown,\n ref,\n 'data-testid': testId,\n isSmall,\n };\n\n // Object with Anchor props that will be passed to the `a` element. These\n // won't be refurned if set to `isDisabled`\n const anchorProps =\n href && !isDisabled\n ? {\n download,\n href: href || undefined,\n hrefLang,\n rel,\n target,\n ref: anchorRef,\n id: anchorId,\n }\n : {};\n\n // Object of all Checked props that will be passed to the root `Card` component\n const checkedProps =\n (type === 'checkbox' || type === 'radio') && !href\n ? {\n ...commonProps,\n 'aria-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n 'aria-describedby': `${componentId}-title`,\n 'aria-disabled': isDisabled,\n 'data-value': value ?? undefined,\n role: type === 'checkbox' || type === 'radio' ? type : undefined,\n onClick: handleClick,\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n handleClick();\n }\n },\n ref,\n tabIndex: 0,\n }\n : {};\n\n const getTitle = () => {\n const titleContent =\n href && !type ? (\n <a className=\"np-Card-titleLink\" {...anchorProps}>\n {title}\n </a>\n ) : (\n title\n );\n\n const titleProps = {\n id: `${componentId}-title`,\n as: headingLevel,\n className: 'np-Card-title',\n };\n\n return useDisplayFont ? (\n <Display type={Typography.DISPLAY_SMALL} {...titleProps}>\n {titleContent}\n </Display>\n ) : (\n <Title type={Typography.TITLE_SUBSECTION} {...titleProps}>\n {titleContent}\n </Title>\n );\n };\n\n useEffect(() => {\n setChecked(defaultChecked ?? isChecked ?? false);\n }, [defaultChecked, isChecked]);\n\n return (\n <Card {...commonProps} {...checkedProps} {...props}>\n {(value === state || checked) && (\n <span className=\"np-Card-check\">\n <Check size={24} aria-hidden=\"true\" />\n </span>\n )}\n\n {getTitle()}\n\n <Body className=\"np-Card-description\">{description}</Body>\n\n {imageSource && (\n <div className={clsx('np-Card-image', { imageClass })}>\n <Image src={imageSource} alt={imageAlt || ''} loading=\"lazy\" />\n </div>\n )}\n\n <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />\n </Card>\n );\n },\n) as PolymorphicPromoCard;\n\nexport default React.memo(PromoCard);\n"],"names":["PromoCard","forwardRef","className","description","defaultChecked","download","href","hrefLang","id","headingLevel","imageAlt","imageClass","imageSource","indicatorLabel","indicatorIcon","isChecked","isDisabled","onClick","onKeyDown","rel","tabIndex","target","testId","title","type","value","isSmall","useDisplayFont","anchorRef","anchorId","props","ref","state","onChange","contextIsDisabled","usePromoCardContext","checked","setChecked","useState","handleClick","fallbackId","useId","componentId","getIconType","undefined","commonClasses","clsx","commonProps","anchorProps","checkedProps","role","event","key","getTitle","titleContent","_jsx","children","titleProps","as","Display","Typography","DISPLAY_SMALL","Title","TITLE_SUBSECTION","useEffect","_jsxs","Card","Check","size","Body","Image","src","alt","loading","PromoCardIndicator","label","icon","React","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PromoCard.js","sources":["../../src/promoCard/PromoCard.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport BaseCard, { type BaseCardProps } from '../common/baseCard';\nimport Display from '../display';\nimport Image from '../image/Image';\nimport Title from '../title';\n\nimport { usePromoCardContext } from './PromoCardContext';\nimport PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';\n\nexport type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;\nexport type RelatedTypes =\n | ''\n | 'alternate'\n | 'author'\n | 'bookmark'\n | 'external'\n | 'help'\n | 'license'\n | 'next'\n | 'nofollow'\n | 'noreferrer'\n | 'noopener'\n | 'prev'\n | 'search'\n | 'tag';\n\nexport interface PromoCardCommonProps {\n /** Optional prop to specify classNames onto the PromoCard */\n className?: string;\n\n /** Optional prop to specify the ID of the PromoCard */\n id?: string;\n\n /** Required prop to specify the descriptive text of the PromoCard */\n description: string;\n\n /**\n * Optional prop to specify the heading level of the PromoCard\n *\n * @default 'h3'\n */\n headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';\n\n /** Optional prop to specify text for the indicator label of the PromoCard */\n indicatorLabel?: string;\n\n /** Optional prop to specify the icon for the indicator icon of the PromoCard */\n indicatorIcon?: PromoCardIndicatorProps['icon'];\n\n /** Optional prop to specify an image alt text */\n imageAlt?: string;\n\n /** Optional prop to specify an image class */\n imageClass?: string;\n\n /** Optional prop to specify an image source url */\n imageSource?: string;\n\n /** Specify whether the PromoCard is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify an onClick event handler */\n onClick?: () => void;\n\n /** Specify an onKeyDown event handler */\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to specify the title text of the PromoCard */\n title: string;\n\n /** Set to false to use body font style for the title */\n useDisplayFont?: boolean;\n\n ref?: ReferenceType;\n}\n\nexport interface PromoCardLinkProps extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {\n /**\n * Optional prop to prompts a user to save the linked URL instead of\n * navigating to it\n */\n download?: string;\n\n /** Optionally specify an href for your PromoCard to contain an <a> element */\n href?: string;\n\n /** Optionally specify the language of the linked URL */\n hrefLang?: string;\n\n /** Optional property that can be pass a ref for the anchor. */\n anchorRef?: React.Ref<HTMLAnchorElement>;\n\n /**\n * Optional prop to specify the ID of the anchor element which can be useful when using a ref.\n */\n anchorId?: string;\n\n /**\n * Relationship between the PromoCard href URL and the current page. See\n * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).\n */\n rel?: RelatedTypes;\n\n /** Optional prop to to display where the linked URL will show */\n target?: React.HTMLAttributeAnchorTarget;\n\n /** Only applies to role=\"radio\" or \"checkbox\" */\n defaultChecked?: never;\n isChecked?: never;\n tabIndex?: never;\n type?: never;\n ref?: ReferenceType;\n value?: never;\n}\n\nexport interface PromoCardCheckedProps\n extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {\n /** Specify the initial checked attribute of the PromoCard */\n defaultChecked?: boolean;\n\n /** Specify whether the PromoCard is checked, or not */\n isChecked?: boolean;\n\n /** Optional prop to specify the tabIndex of the PromoCard */\n tabIndex?: number;\n\n /** Optional property to provide component Ref */\n ref?: ReferenceType;\n\n /** Optional prop to specify the input type of the PromoCard */\n type?: 'checkbox' | 'radio';\n\n /** Specify the value attribute of the PromoCard if Checkbox or Radio */\n value?: string;\n\n /** Only applies to <a />s */\n download?: never;\n href?: never;\n anchorRef?: never;\n anchorId?: never;\n hrefLang?: never;\n rel?: never;\n target?: never;\n}\n\nexport type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;\n\nexport type PolymorphicPromoCard = (\n props: PromoCardLinkProps | PromoCardCheckedProps,\n) => React.JSX.Element;\n\n/**\n * PromoCard component.\n *\n * PromoCard is a marketing style component that is used to group marketing\n * product related information (such as choosing Card types). It can be used to\n * display information in a structured way, and can be customized with various\n * props to suit different use cases.\n *\n * @component\n * @param {string} className - Additional class name for the PromoCard.\n * @param {string} description - Description text for the PromoCard.\n * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.\n * @param {string} download - Download file name for links.\n * @param {string} href - URL for links.\n * @param {string} hrefLang - Language code for linked URL.\n * @param {string} id - ID of the PromoCard.\n * @param {string} imageAlt - Alt text for the image.\n * @param {string} imageSource - Source URL of the image.\n * @param {string} indicatorLabel - Label for the indicator icon.\n * @param {boolean} isChecked - Checked state for checkboxes and radios.\n * @param {boolean} isDisabled - Whether the PromoCard is disabled.\n * @param {Function} onClick - Click event handler for the PromoCard.\n * @param {string} rel - Relationship between the URL and the current page.\n * @param {number} tabIndex - Tab index for keyboard navigation.\n * @param {string} target - Target window for links.\n * @param {string} testId - ID used for testing.\n * @param {string} title - Title text of the PromoCard.\n * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).\n * @param {string} value - Value for checkboxes and radios.\n * @returns {React.JSX.Element} The rendered PromoCard component.\n * @example\n * <PromoCard\n * title=\"Example PromoCard\"\n * description=\"This is an example PromoCard with a link variation.\"\n * href=\"https://example.com\"\n * target=\"_blank\"\n * imageSource=\"https://example.com/image.png\"\n * imageAlt=\"Example Image\"\n * indicatorLabel=\"Learn More\"\n * />\n */\nconst PromoCard: FunctionComponent<PromoCardProps> = forwardRef(\n (\n {\n className,\n description,\n defaultChecked,\n download,\n href,\n hrefLang,\n id,\n headingLevel = 'h3',\n imageAlt,\n imageClass,\n imageSource,\n indicatorLabel,\n indicatorIcon,\n isChecked,\n isDisabled,\n onClick,\n onKeyDown,\n rel,\n tabIndex,\n target,\n testId,\n title,\n type,\n value,\n isSmall,\n useDisplayFont = true,\n anchorRef,\n anchorId,\n ...props\n },\n ref: ReferenceType,\n ) => {\n // Set the `checked` state to the value of `defaultChecked` if it is truthy,\n // or the value of `isChecked` if it is truthy, or `false` if neither\n // is truthy.\n const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();\n const [checked, setChecked] = useState(\n type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,\n );\n\n const handleClick = () => {\n if (type === 'radio') {\n onChange(value || ''); // Update the context state for radio\n } else if (type === 'checkbox') {\n setChecked(!checked); // Update local state for checkbox\n }\n };\n\n const fallbackId = useId();\n const componentId = id || fallbackId;\n\n // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or\n // `'download'` if `download` is truthy. If neither condition is true, set\n // `icon` to `undefined`.\n\n // Create a function to get icon type\n const getIconType = () => {\n if (indicatorIcon) {\n return indicatorIcon;\n }\n\n if (download) {\n return 'download';\n }\n\n if (href && !type) {\n return 'arrow';\n }\n\n return undefined;\n };\n\n const CardTitle = useDisplayFont ? Display : Title;\n\n // Define all class names string based on the values of the `href`, `type`,\n // `checked`, and `className` props.\n const commonClasses = clsx(\n {\n 'np-Card--promoCard': true,\n 'np-Card--checked': !href && type,\n 'np-Card--link': href && !type,\n 'is-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n },\n className,\n );\n\n // Object with common props that will be passed to the `Card` components\n const commonProps = {\n className: commonClasses,\n id: componentId,\n isDisabled: isDisabled || contextIsDisabled,\n onClick,\n onKeyDown,\n ref,\n 'data-testid': testId,\n isSmall,\n };\n\n // Object with Anchor props that will be passed to the `a` element. These\n // won't be refurned if set to `isDisabled`\n const anchorProps =\n href && !isDisabled\n ? {\n download,\n href: href || undefined,\n hrefLang,\n rel,\n target,\n ref: anchorRef,\n id: anchorId,\n }\n : {};\n\n // Object of all Checked props that will be passed to the root `Card` component\n const checkedProps =\n (type === 'checkbox' || type === 'radio') && !href\n ? {\n ...commonProps,\n 'aria-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n 'aria-describedby': `${componentId}-title`,\n 'aria-disabled': isDisabled,\n 'data-value': value ?? undefined,\n role: type === 'checkbox' || type === 'radio' ? type : undefined,\n onClick: handleClick,\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n handleClick();\n }\n },\n ref,\n tabIndex: 0,\n }\n : {};\n\n const getTitle = () => {\n const titleContent =\n href && !type ? (\n <a className=\"np-Card-titleLink\" {...anchorProps}>\n {title}\n </a>\n ) : (\n title\n );\n\n const titleProps = {\n id: `${componentId}-title`,\n as: headingLevel,\n className: 'np-Card-title',\n };\n\n return useDisplayFont ? (\n <Display type={Typography.DISPLAY_SMALL} {...titleProps}>\n {titleContent}\n </Display>\n ) : (\n <Title type={Typography.TITLE_SUBSECTION} {...titleProps}>\n {titleContent}\n </Title>\n );\n };\n\n useEffect(() => {\n setChecked(defaultChecked ?? isChecked ?? false);\n }, [defaultChecked, isChecked]);\n\n return (\n <BaseCard {...commonProps} {...checkedProps} {...props}>\n {(value === state || checked) && (\n <span className=\"np-Card-check\">\n <Check size={24} aria-hidden=\"true\" />\n </span>\n )}\n\n {getTitle()}\n\n <Body className=\"np-Card-description\">{description}</Body>\n\n {imageSource && (\n <div className={clsx('np-Card-image', { imageClass })}>\n <Image src={imageSource} alt={imageAlt || ''} loading=\"lazy\" />\n </div>\n )}\n\n <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />\n </BaseCard>\n );\n },\n) as PolymorphicPromoCard;\n\nexport default React.memo(PromoCard);\n"],"names":["PromoCard","forwardRef","className","description","defaultChecked","download","href","hrefLang","id","headingLevel","imageAlt","imageClass","imageSource","indicatorLabel","indicatorIcon","isChecked","isDisabled","onClick","onKeyDown","rel","tabIndex","target","testId","title","type","value","isSmall","useDisplayFont","anchorRef","anchorId","props","ref","state","onChange","contextIsDisabled","usePromoCardContext","checked","setChecked","useState","handleClick","fallbackId","useId","componentId","getIconType","undefined","commonClasses","clsx","commonProps","anchorProps","checkedProps","role","event","key","getTitle","titleContent","_jsx","children","titleProps","as","Display","Typography","DISPLAY_SMALL","Title","TITLE_SUBSECTION","useEffect","_jsxs","BaseCard","Check","size","Body","Image","src","alt","loading","PromoCardIndicator","label","icon","React","memo"],"mappings":"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"}
|
|
@@ -24,7 +24,7 @@ import '../common/fileType.mjs';
|
|
|
24
24
|
import 'react-intl';
|
|
25
25
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
26
26
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
27
|
-
import
|
|
27
|
+
import BaseCard from '../common/baseCard/BaseCard.mjs';
|
|
28
28
|
import Display from '../display/Display.mjs';
|
|
29
29
|
import Image from '../image/Image.mjs';
|
|
30
30
|
import Title from '../title/Title.mjs';
|
|
@@ -167,7 +167,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
|
|
|
167
167
|
useEffect(() => {
|
|
168
168
|
setChecked(defaultChecked ?? isChecked ?? false);
|
|
169
169
|
}, [defaultChecked, isChecked]);
|
|
170
|
-
return /*#__PURE__*/jsxs(
|
|
170
|
+
return /*#__PURE__*/jsxs(BaseCard, {
|
|
171
171
|
...commonProps,
|
|
172
172
|
...checkedProps,
|
|
173
173
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCard.mjs","sources":["../../src/promoCard/PromoCard.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Card, { type CardProps } from '../common/card';\nimport Display from '../display';\nimport Image from '../image/Image';\nimport Title from '../title';\n\nimport { usePromoCardContext } from './PromoCardContext';\nimport PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';\n\nexport type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;\nexport type RelatedTypes =\n | ''\n | 'alternate'\n | 'author'\n | 'bookmark'\n | 'external'\n | 'help'\n | 'license'\n | 'next'\n | 'nofollow'\n | 'noreferrer'\n | 'noopener'\n | 'prev'\n | 'search'\n | 'tag';\n\nexport interface PromoCardCommonProps {\n /** Optional prop to specify classNames onto the PromoCard */\n className?: string;\n\n /** Optional prop to specify the ID of the PromoCard */\n id?: string;\n\n /** Required prop to specify the descriptive text of the PromoCard */\n description: string;\n\n /**\n * Optional prop to specify the heading level of the PromoCard\n *\n * @default 'h3'\n */\n headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';\n\n /** Optional prop to specify text for the indicator label of the PromoCard */\n indicatorLabel?: string;\n\n /** Optional prop to specify the icon for the indicator icon of the PromoCard */\n indicatorIcon?: PromoCardIndicatorProps['icon'];\n\n /** Optional prop to specify an image alt text */\n imageAlt?: string;\n\n /** Optional prop to specify an image class */\n imageClass?: string;\n\n /** Optional prop to specify an image source url */\n imageSource?: string;\n\n /** Specify whether the PromoCard is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify an onClick event handler */\n onClick?: () => void;\n\n /** Specify an onKeyDown event handler */\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to specify the title text of the PromoCard */\n title: string;\n\n /** Set to false to use body font style for the title */\n useDisplayFont?: boolean;\n\n ref?: ReferenceType;\n}\n\nexport interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n /**\n * Optional prop to prompts a user to save the linked URL instead of\n * navigating to it\n */\n download?: string;\n\n /** Optionally specify an href for your PromoCard to contain an <a> element */\n href?: string;\n\n /** Optionally specify the language of the linked URL */\n hrefLang?: string;\n\n /** Optional property that can be pass a ref for the anchor. */\n anchorRef?: React.Ref<HTMLAnchorElement>;\n\n /**\n * Optional prop to specify the ID of the anchor element which can be useful when using a ref.\n */\n anchorId?: string;\n\n /**\n * Relationship between the PromoCard href URL and the current page. See\n * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).\n */\n rel?: RelatedTypes;\n\n /** Optional prop to to display where the linked URL will show */\n target?: React.HTMLAttributeAnchorTarget;\n\n /** Only applies to role=\"radio\" or \"checkbox\" */\n defaultChecked?: never;\n isChecked?: never;\n tabIndex?: never;\n type?: never;\n ref?: ReferenceType;\n value?: never;\n}\n\nexport interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n /** Specify the initial checked attribute of the PromoCard */\n defaultChecked?: boolean;\n\n /** Specify whether the PromoCard is checked, or not */\n isChecked?: boolean;\n\n /** Optional prop to specify the tabIndex of the PromoCard */\n tabIndex?: number;\n\n /** Optional property to provide component Ref */\n ref?: ReferenceType;\n\n /** Optional prop to specify the input type of the PromoCard */\n type?: 'checkbox' | 'radio';\n\n /** Specify the value attribute of the PromoCard if Checkbox or Radio */\n value?: string;\n\n /** Only applies to <a />s */\n download?: never;\n href?: never;\n anchorRef?: never;\n anchorId?: never;\n hrefLang?: never;\n rel?: never;\n target?: never;\n}\n\nexport type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;\n\nexport type PolymorphicPromoCard = (\n props: PromoCardLinkProps | PromoCardCheckedProps,\n) => React.JSX.Element;\n\n/**\n * PromoCard component.\n *\n * PromoCard is a marketing style component that is used to group marketing\n * product related information (such as choosing Card types). It can be used to\n * display information in a structured way, and can be customized with various\n * props to suit different use cases.\n *\n * @component\n * @param {string} className - Additional class name for the PromoCard.\n * @param {string} description - Description text for the PromoCard.\n * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.\n * @param {string} download - Download file name for links.\n * @param {string} href - URL for links.\n * @param {string} hrefLang - Language code for linked URL.\n * @param {string} id - ID of the PromoCard.\n * @param {string} imageAlt - Alt text for the image.\n * @param {string} imageSource - Source URL of the image.\n * @param {string} indicatorLabel - Label for the indicator icon.\n * @param {boolean} isChecked - Checked state for checkboxes and radios.\n * @param {boolean} isDisabled - Whether the PromoCard is disabled.\n * @param {Function} onClick - Click event handler for the PromoCard.\n * @param {string} rel - Relationship between the URL and the current page.\n * @param {number} tabIndex - Tab index for keyboard navigation.\n * @param {string} target - Target window for links.\n * @param {string} testId - ID used for testing.\n * @param {string} title - Title text of the PromoCard.\n * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).\n * @param {string} value - Value for checkboxes and radios.\n * @returns {React.JSX.Element} The rendered PromoCard component.\n * @example\n * <PromoCard\n * title=\"Example PromoCard\"\n * description=\"This is an example PromoCard with a link variation.\"\n * href=\"https://example.com\"\n * target=\"_blank\"\n * imageSource=\"https://example.com/image.png\"\n * imageAlt=\"Example Image\"\n * indicatorLabel=\"Learn More\"\n * />\n */\nconst PromoCard: FunctionComponent<PromoCardProps> = forwardRef(\n (\n {\n className,\n description,\n defaultChecked,\n download,\n href,\n hrefLang,\n id,\n headingLevel = 'h3',\n imageAlt,\n imageClass,\n imageSource,\n indicatorLabel,\n indicatorIcon,\n isChecked,\n isDisabled,\n onClick,\n onKeyDown,\n rel,\n tabIndex,\n target,\n testId,\n title,\n type,\n value,\n isSmall,\n useDisplayFont = true,\n anchorRef,\n anchorId,\n ...props\n },\n ref: ReferenceType,\n ) => {\n // Set the `checked` state to the value of `defaultChecked` if it is truthy,\n // or the value of `isChecked` if it is truthy, or `false` if neither\n // is truthy.\n const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();\n const [checked, setChecked] = useState(\n type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,\n );\n\n const handleClick = () => {\n if (type === 'radio') {\n onChange(value || ''); // Update the context state for radio\n } else if (type === 'checkbox') {\n setChecked(!checked); // Update local state for checkbox\n }\n };\n\n const fallbackId = useId();\n const componentId = id || fallbackId;\n\n // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or\n // `'download'` if `download` is truthy. If neither condition is true, set\n // `icon` to `undefined`.\n\n // Create a function to get icon type\n const getIconType = () => {\n if (indicatorIcon) {\n return indicatorIcon;\n }\n\n if (download) {\n return 'download';\n }\n\n if (href && !type) {\n return 'arrow';\n }\n\n return undefined;\n };\n\n const CardTitle = useDisplayFont ? Display : Title;\n\n // Define all class names string based on the values of the `href`, `type`,\n // `checked`, and `className` props.\n const commonClasses = clsx(\n {\n 'np-Card--promoCard': true,\n 'np-Card--checked': !href && type,\n 'np-Card--link': href && !type,\n 'is-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n },\n className,\n );\n\n // Object with common props that will be passed to the `Card` components\n const commonProps = {\n className: commonClasses,\n id: componentId,\n isDisabled: isDisabled || contextIsDisabled,\n onClick,\n onKeyDown,\n ref,\n 'data-testid': testId,\n isSmall,\n };\n\n // Object with Anchor props that will be passed to the `a` element. These\n // won't be refurned if set to `isDisabled`\n const anchorProps =\n href && !isDisabled\n ? {\n download,\n href: href || undefined,\n hrefLang,\n rel,\n target,\n ref: anchorRef,\n id: anchorId,\n }\n : {};\n\n // Object of all Checked props that will be passed to the root `Card` component\n const checkedProps =\n (type === 'checkbox' || type === 'radio') && !href\n ? {\n ...commonProps,\n 'aria-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n 'aria-describedby': `${componentId}-title`,\n 'aria-disabled': isDisabled,\n 'data-value': value ?? undefined,\n role: type === 'checkbox' || type === 'radio' ? type : undefined,\n onClick: handleClick,\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n handleClick();\n }\n },\n ref,\n tabIndex: 0,\n }\n : {};\n\n const getTitle = () => {\n const titleContent =\n href && !type ? (\n <a className=\"np-Card-titleLink\" {...anchorProps}>\n {title}\n </a>\n ) : (\n title\n );\n\n const titleProps = {\n id: `${componentId}-title`,\n as: headingLevel,\n className: 'np-Card-title',\n };\n\n return useDisplayFont ? (\n <Display type={Typography.DISPLAY_SMALL} {...titleProps}>\n {titleContent}\n </Display>\n ) : (\n <Title type={Typography.TITLE_SUBSECTION} {...titleProps}>\n {titleContent}\n </Title>\n );\n };\n\n useEffect(() => {\n setChecked(defaultChecked ?? isChecked ?? false);\n }, [defaultChecked, isChecked]);\n\n return (\n <Card {...commonProps} {...checkedProps} {...props}>\n {(value === state || checked) && (\n <span className=\"np-Card-check\">\n <Check size={24} aria-hidden=\"true\" />\n </span>\n )}\n\n {getTitle()}\n\n <Body className=\"np-Card-description\">{description}</Body>\n\n {imageSource && (\n <div className={clsx('np-Card-image', { imageClass })}>\n <Image src={imageSource} alt={imageAlt || ''} loading=\"lazy\" />\n </div>\n )}\n\n <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />\n </Card>\n );\n },\n) as PolymorphicPromoCard;\n\nexport default React.memo(PromoCard);\n"],"names":["PromoCard","forwardRef","className","description","defaultChecked","download","href","hrefLang","id","headingLevel","imageAlt","imageClass","imageSource","indicatorLabel","indicatorIcon","isChecked","isDisabled","onClick","onKeyDown","rel","tabIndex","target","testId","title","type","value","isSmall","useDisplayFont","anchorRef","anchorId","props","ref","state","onChange","contextIsDisabled","usePromoCardContext","checked","setChecked","useState","handleClick","fallbackId","useId","componentId","getIconType","undefined","commonClasses","clsx","commonProps","anchorProps","checkedProps","role","event","key","getTitle","titleContent","_jsx","children","titleProps","as","Display","Typography","DISPLAY_SMALL","Title","TITLE_SUBSECTION","useEffect","_jsxs","Card","Check","size","Body","Image","src","alt","loading","PromoCardIndicator","label","icon","React","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PromoCard.mjs","sources":["../../src/promoCard/PromoCard.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport BaseCard, { type BaseCardProps } from '../common/baseCard';\nimport Display from '../display';\nimport Image from '../image/Image';\nimport Title from '../title';\n\nimport { usePromoCardContext } from './PromoCardContext';\nimport PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';\n\nexport type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;\nexport type RelatedTypes =\n | ''\n | 'alternate'\n | 'author'\n | 'bookmark'\n | 'external'\n | 'help'\n | 'license'\n | 'next'\n | 'nofollow'\n | 'noreferrer'\n | 'noopener'\n | 'prev'\n | 'search'\n | 'tag';\n\nexport interface PromoCardCommonProps {\n /** Optional prop to specify classNames onto the PromoCard */\n className?: string;\n\n /** Optional prop to specify the ID of the PromoCard */\n id?: string;\n\n /** Required prop to specify the descriptive text of the PromoCard */\n description: string;\n\n /**\n * Optional prop to specify the heading level of the PromoCard\n *\n * @default 'h3'\n */\n headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';\n\n /** Optional prop to specify text for the indicator label of the PromoCard */\n indicatorLabel?: string;\n\n /** Optional prop to specify the icon for the indicator icon of the PromoCard */\n indicatorIcon?: PromoCardIndicatorProps['icon'];\n\n /** Optional prop to specify an image alt text */\n imageAlt?: string;\n\n /** Optional prop to specify an image class */\n imageClass?: string;\n\n /** Optional prop to specify an image source url */\n imageSource?: string;\n\n /** Specify whether the PromoCard is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify an onClick event handler */\n onClick?: () => void;\n\n /** Specify an onKeyDown event handler */\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to specify the title text of the PromoCard */\n title: string;\n\n /** Set to false to use body font style for the title */\n useDisplayFont?: boolean;\n\n ref?: ReferenceType;\n}\n\nexport interface PromoCardLinkProps extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {\n /**\n * Optional prop to prompts a user to save the linked URL instead of\n * navigating to it\n */\n download?: string;\n\n /** Optionally specify an href for your PromoCard to contain an <a> element */\n href?: string;\n\n /** Optionally specify the language of the linked URL */\n hrefLang?: string;\n\n /** Optional property that can be pass a ref for the anchor. */\n anchorRef?: React.Ref<HTMLAnchorElement>;\n\n /**\n * Optional prop to specify the ID of the anchor element which can be useful when using a ref.\n */\n anchorId?: string;\n\n /**\n * Relationship between the PromoCard href URL and the current page. See\n * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).\n */\n rel?: RelatedTypes;\n\n /** Optional prop to to display where the linked URL will show */\n target?: React.HTMLAttributeAnchorTarget;\n\n /** Only applies to role=\"radio\" or \"checkbox\" */\n defaultChecked?: never;\n isChecked?: never;\n tabIndex?: never;\n type?: never;\n ref?: ReferenceType;\n value?: never;\n}\n\nexport interface PromoCardCheckedProps\n extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {\n /** Specify the initial checked attribute of the PromoCard */\n defaultChecked?: boolean;\n\n /** Specify whether the PromoCard is checked, or not */\n isChecked?: boolean;\n\n /** Optional prop to specify the tabIndex of the PromoCard */\n tabIndex?: number;\n\n /** Optional property to provide component Ref */\n ref?: ReferenceType;\n\n /** Optional prop to specify the input type of the PromoCard */\n type?: 'checkbox' | 'radio';\n\n /** Specify the value attribute of the PromoCard if Checkbox or Radio */\n value?: string;\n\n /** Only applies to <a />s */\n download?: never;\n href?: never;\n anchorRef?: never;\n anchorId?: never;\n hrefLang?: never;\n rel?: never;\n target?: never;\n}\n\nexport type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;\n\nexport type PolymorphicPromoCard = (\n props: PromoCardLinkProps | PromoCardCheckedProps,\n) => React.JSX.Element;\n\n/**\n * PromoCard component.\n *\n * PromoCard is a marketing style component that is used to group marketing\n * product related information (such as choosing Card types). It can be used to\n * display information in a structured way, and can be customized with various\n * props to suit different use cases.\n *\n * @component\n * @param {string} className - Additional class name for the PromoCard.\n * @param {string} description - Description text for the PromoCard.\n * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.\n * @param {string} download - Download file name for links.\n * @param {string} href - URL for links.\n * @param {string} hrefLang - Language code for linked URL.\n * @param {string} id - ID of the PromoCard.\n * @param {string} imageAlt - Alt text for the image.\n * @param {string} imageSource - Source URL of the image.\n * @param {string} indicatorLabel - Label for the indicator icon.\n * @param {boolean} isChecked - Checked state for checkboxes and radios.\n * @param {boolean} isDisabled - Whether the PromoCard is disabled.\n * @param {Function} onClick - Click event handler for the PromoCard.\n * @param {string} rel - Relationship between the URL and the current page.\n * @param {number} tabIndex - Tab index for keyboard navigation.\n * @param {string} target - Target window for links.\n * @param {string} testId - ID used for testing.\n * @param {string} title - Title text of the PromoCard.\n * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).\n * @param {string} value - Value for checkboxes and radios.\n * @returns {React.JSX.Element} The rendered PromoCard component.\n * @example\n * <PromoCard\n * title=\"Example PromoCard\"\n * description=\"This is an example PromoCard with a link variation.\"\n * href=\"https://example.com\"\n * target=\"_blank\"\n * imageSource=\"https://example.com/image.png\"\n * imageAlt=\"Example Image\"\n * indicatorLabel=\"Learn More\"\n * />\n */\nconst PromoCard: FunctionComponent<PromoCardProps> = forwardRef(\n (\n {\n className,\n description,\n defaultChecked,\n download,\n href,\n hrefLang,\n id,\n headingLevel = 'h3',\n imageAlt,\n imageClass,\n imageSource,\n indicatorLabel,\n indicatorIcon,\n isChecked,\n isDisabled,\n onClick,\n onKeyDown,\n rel,\n tabIndex,\n target,\n testId,\n title,\n type,\n value,\n isSmall,\n useDisplayFont = true,\n anchorRef,\n anchorId,\n ...props\n },\n ref: ReferenceType,\n ) => {\n // Set the `checked` state to the value of `defaultChecked` if it is truthy,\n // or the value of `isChecked` if it is truthy, or `false` if neither\n // is truthy.\n const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();\n const [checked, setChecked] = useState(\n type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,\n );\n\n const handleClick = () => {\n if (type === 'radio') {\n onChange(value || ''); // Update the context state for radio\n } else if (type === 'checkbox') {\n setChecked(!checked); // Update local state for checkbox\n }\n };\n\n const fallbackId = useId();\n const componentId = id || fallbackId;\n\n // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or\n // `'download'` if `download` is truthy. If neither condition is true, set\n // `icon` to `undefined`.\n\n // Create a function to get icon type\n const getIconType = () => {\n if (indicatorIcon) {\n return indicatorIcon;\n }\n\n if (download) {\n return 'download';\n }\n\n if (href && !type) {\n return 'arrow';\n }\n\n return undefined;\n };\n\n const CardTitle = useDisplayFont ? Display : Title;\n\n // Define all class names string based on the values of the `href`, `type`,\n // `checked`, and `className` props.\n const commonClasses = clsx(\n {\n 'np-Card--promoCard': true,\n 'np-Card--checked': !href && type,\n 'np-Card--link': href && !type,\n 'is-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n },\n className,\n );\n\n // Object with common props that will be passed to the `Card` components\n const commonProps = {\n className: commonClasses,\n id: componentId,\n isDisabled: isDisabled || contextIsDisabled,\n onClick,\n onKeyDown,\n ref,\n 'data-testid': testId,\n isSmall,\n };\n\n // Object with Anchor props that will be passed to the `a` element. These\n // won't be refurned if set to `isDisabled`\n const anchorProps =\n href && !isDisabled\n ? {\n download,\n href: href || undefined,\n hrefLang,\n rel,\n target,\n ref: anchorRef,\n id: anchorId,\n }\n : {};\n\n // Object of all Checked props that will be passed to the root `Card` component\n const checkedProps =\n (type === 'checkbox' || type === 'radio') && !href\n ? {\n ...commonProps,\n 'aria-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n 'aria-describedby': `${componentId}-title`,\n 'aria-disabled': isDisabled,\n 'data-value': value ?? undefined,\n role: type === 'checkbox' || type === 'radio' ? type : undefined,\n onClick: handleClick,\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n handleClick();\n }\n },\n ref,\n tabIndex: 0,\n }\n : {};\n\n const getTitle = () => {\n const titleContent =\n href && !type ? (\n <a className=\"np-Card-titleLink\" {...anchorProps}>\n {title}\n </a>\n ) : (\n title\n );\n\n const titleProps = {\n id: `${componentId}-title`,\n as: headingLevel,\n className: 'np-Card-title',\n };\n\n return useDisplayFont ? (\n <Display type={Typography.DISPLAY_SMALL} {...titleProps}>\n {titleContent}\n </Display>\n ) : (\n <Title type={Typography.TITLE_SUBSECTION} {...titleProps}>\n {titleContent}\n </Title>\n );\n };\n\n useEffect(() => {\n setChecked(defaultChecked ?? isChecked ?? false);\n }, [defaultChecked, isChecked]);\n\n return (\n <BaseCard {...commonProps} {...checkedProps} {...props}>\n {(value === state || checked) && (\n <span className=\"np-Card-check\">\n <Check size={24} aria-hidden=\"true\" />\n </span>\n )}\n\n {getTitle()}\n\n <Body className=\"np-Card-description\">{description}</Body>\n\n {imageSource && (\n <div className={clsx('np-Card-image', { imageClass })}>\n <Image src={imageSource} alt={imageAlt || ''} loading=\"lazy\" />\n </div>\n )}\n\n <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />\n </BaseCard>\n );\n },\n) as PolymorphicPromoCard;\n\nexport default React.memo(PromoCard);\n"],"names":["PromoCard","forwardRef","className","description","defaultChecked","download","href","hrefLang","id","headingLevel","imageAlt","imageClass","imageSource","indicatorLabel","indicatorIcon","isChecked","isDisabled","onClick","onKeyDown","rel","tabIndex","target","testId","title","type","value","isSmall","useDisplayFont","anchorRef","anchorId","props","ref","state","onChange","contextIsDisabled","usePromoCardContext","checked","setChecked","useState","handleClick","fallbackId","useId","componentId","getIconType","undefined","commonClasses","clsx","commonProps","anchorProps","checkedProps","role","event","key","getTitle","titleContent","_jsx","children","titleProps","as","Display","Typography","DISPLAY_SMALL","Title","TITLE_SUBSECTION","useEffect","_jsxs","BaseCard","Check","size","Body","Image","src","alt","loading","PromoCardIndicator","label","icon","React","memo"],"mappings":"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"}
|
package/build/styles/main.css
CHANGED
|
@@ -1969,6 +1969,55 @@
|
|
|
1969
1969
|
border-radius: var(--radius-full);
|
|
1970
1970
|
box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
|
|
1971
1971
|
}
|
|
1972
|
+
/* @define Card */
|
|
1973
|
+
.np-Card {
|
|
1974
|
+
--Card-background-color: var(--color-background-neutral);
|
|
1975
|
+
--Card-border-radius: var(--size-32);
|
|
1976
|
+
--Card-flex-gap: var(--size-16);
|
|
1977
|
+
--Card-padding: var(--size-24);
|
|
1978
|
+
--Card-closeButton-position: var(--size-16);
|
|
1979
|
+
--Card-max-width: initial;
|
|
1980
|
+
display: flex;
|
|
1981
|
+
flex-direction: column;
|
|
1982
|
+
align-items: stretch;
|
|
1983
|
+
background-color: rgba(134,167,189,0.10196);
|
|
1984
|
+
background-color: var(--Card-background-color);
|
|
1985
|
+
border-radius: 32px;
|
|
1986
|
+
border-radius: var(--Card-border-radius);
|
|
1987
|
+
gap: 16px;
|
|
1988
|
+
gap: var(--Card-flex-gap);
|
|
1989
|
+
padding: 24px;
|
|
1990
|
+
padding: var(--Card-padding);
|
|
1991
|
+
position: relative;
|
|
1992
|
+
box-sizing: border-box;
|
|
1993
|
+
overflow: hidden;
|
|
1994
|
+
}
|
|
1995
|
+
@media (min-width: 576px) {
|
|
1996
|
+
.np-Card {
|
|
1997
|
+
max-width: var(--Card-max-width);
|
|
1998
|
+
}
|
|
1999
|
+
}
|
|
2000
|
+
.np-Card.is-disabled .np-Card-closeButton {
|
|
2001
|
+
cursor: not-allowed;
|
|
2002
|
+
}
|
|
2003
|
+
.np-theme-personal--dark .np-Card {
|
|
2004
|
+
--Card-background-color: var(--color-background-elevated);
|
|
2005
|
+
}
|
|
2006
|
+
.np-Card-closeButton {
|
|
2007
|
+
position: absolute;
|
|
2008
|
+
z-index: 100;
|
|
2009
|
+
top: var(--Card-closeButton-position);
|
|
2010
|
+
right: var(--Card-closeButton-position);
|
|
2011
|
+
}
|
|
2012
|
+
[dir="rtl"] .np-Card-closeButton {
|
|
2013
|
+
left: var(--Card-closeButton-position);
|
|
2014
|
+
right: auto;
|
|
2015
|
+
}
|
|
2016
|
+
.np-Card--small {
|
|
2017
|
+
--Card-border-radius: var(--size-16);
|
|
2018
|
+
--Card-closeButton-position: var(--size-8);
|
|
2019
|
+
--Card-padding: var(--size-16);
|
|
2020
|
+
}
|
|
1972
2021
|
.np-bottom-sheet {
|
|
1973
2022
|
border-radius: 10px 10px 0 0;
|
|
1974
2023
|
}
|
|
@@ -2022,55 +2071,6 @@
|
|
|
2022
2071
|
padding: 0 16px 16px;
|
|
2023
2072
|
padding: 0 var(--size-16) var(--size-16);
|
|
2024
2073
|
}
|
|
2025
|
-
/* @define Card */
|
|
2026
|
-
.np-Card {
|
|
2027
|
-
--Card-background-color: var(--color-background-neutral);
|
|
2028
|
-
--Card-border-radius: var(--size-32);
|
|
2029
|
-
--Card-flex-gap: var(--size-16);
|
|
2030
|
-
--Card-padding: var(--size-24);
|
|
2031
|
-
--Card-closeButton-position: var(--size-16);
|
|
2032
|
-
--Card-max-width: initial;
|
|
2033
|
-
display: flex;
|
|
2034
|
-
flex-direction: column;
|
|
2035
|
-
align-items: stretch;
|
|
2036
|
-
background-color: rgba(134,167,189,0.10196);
|
|
2037
|
-
background-color: var(--Card-background-color);
|
|
2038
|
-
border-radius: 32px;
|
|
2039
|
-
border-radius: var(--Card-border-radius);
|
|
2040
|
-
gap: 16px;
|
|
2041
|
-
gap: var(--Card-flex-gap);
|
|
2042
|
-
padding: 24px;
|
|
2043
|
-
padding: var(--Card-padding);
|
|
2044
|
-
position: relative;
|
|
2045
|
-
box-sizing: border-box;
|
|
2046
|
-
overflow: hidden;
|
|
2047
|
-
}
|
|
2048
|
-
@media (min-width: 576px) {
|
|
2049
|
-
.np-Card {
|
|
2050
|
-
max-width: var(--Card-max-width);
|
|
2051
|
-
}
|
|
2052
|
-
}
|
|
2053
|
-
.np-Card.is-disabled .np-Card-closeButton {
|
|
2054
|
-
cursor: not-allowed;
|
|
2055
|
-
}
|
|
2056
|
-
.np-theme-personal--dark .np-Card {
|
|
2057
|
-
--Card-background-color: var(--color-background-elevated);
|
|
2058
|
-
}
|
|
2059
|
-
.np-Card-closeButton {
|
|
2060
|
-
position: absolute;
|
|
2061
|
-
z-index: 100;
|
|
2062
|
-
top: var(--Card-closeButton-position);
|
|
2063
|
-
right: var(--Card-closeButton-position);
|
|
2064
|
-
}
|
|
2065
|
-
[dir="rtl"] .np-Card-closeButton {
|
|
2066
|
-
left: var(--Card-closeButton-position);
|
|
2067
|
-
right: auto;
|
|
2068
|
-
}
|
|
2069
|
-
.np-Card--small {
|
|
2070
|
-
--Card-border-radius: var(--size-16);
|
|
2071
|
-
--Card-closeButton-position: var(--size-8);
|
|
2072
|
-
--Card-padding: var(--size-16);
|
|
2073
|
-
}
|
|
2074
2074
|
.np-close-button {
|
|
2075
2075
|
transition: color 0.15s ease-in-out;
|
|
2076
2076
|
color: #00a2dd;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
-
export interface
|
|
2
|
+
export interface BaseCardProps {
|
|
3
3
|
/** Content to display inside Card. */
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
/** Optional prop to specify classNames onto the Card */
|
|
@@ -16,9 +16,9 @@ export interface CardProps {
|
|
|
16
16
|
testId?: string;
|
|
17
17
|
}
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* BaseCard component.
|
|
20
20
|
*
|
|
21
|
-
* A
|
|
21
|
+
* A BaseCard is a container for content that is used to group related information.
|
|
22
22
|
* It can be used to display information in a structured way, and can be
|
|
23
23
|
* customized with various props to suit different use cases.
|
|
24
24
|
*
|
|
@@ -32,10 +32,10 @@ export interface CardProps {
|
|
|
32
32
|
* @param {string} testId - Optional ID to add to the card container for testing purposes.
|
|
33
33
|
* @returns {React.JSX.Element} - The card component.
|
|
34
34
|
* @example
|
|
35
|
-
* <
|
|
35
|
+
* <BaseCard>
|
|
36
36
|
* <p>Hello World!</p>
|
|
37
|
-
* </
|
|
37
|
+
* </BaseCard>
|
|
38
38
|
*/
|
|
39
|
-
declare const
|
|
40
|
-
export default
|
|
41
|
-
//# sourceMappingURL=
|
|
39
|
+
declare const BaseCard: import("react").ForwardRefExoticComponent<BaseCardProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
40
|
+
export default BaseCard;
|
|
41
|
+
//# sourceMappingURL=BaseCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseCard.d.ts","sourceRoot":"","sources":["../../../../src/common/baseCard/BaseCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAK3D,MAAM,WAAW,aAAa;IAC5B,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,QAAQ,0GAgDb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/baseCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,cAAc,YAAY,CAAC"}
|
package/build/types/index.d.ts
CHANGED
|
@@ -103,7 +103,7 @@ export { Chip, default as Chips } from './chips';
|
|
|
103
103
|
export { default as CircularButton } from './circularButton';
|
|
104
104
|
export { default as Option } from './common/Option';
|
|
105
105
|
export { default as BottomSheet } from './common/bottomSheet';
|
|
106
|
-
export { default as BaseCard } from './common/
|
|
106
|
+
export { default as BaseCard } from './common/baseCard';
|
|
107
107
|
export { default as CriticalCommsBanner } from './criticalBanner';
|
|
108
108
|
export { default as DateInput } from './dateInput';
|
|
109
109
|
export { default as DateLookup } from './dateLookup';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9D,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EACV,SAAS,EACT,YAAY,EACZ,eAAe,EACf,SAAS,EACT,UAAU,EACV,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACrE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AACnF,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAC5E,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,6BAA6B,EAC7B,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC3F,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,YAAY,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACzE,YAAY,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACjF,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACjF,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AACxF,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC/F,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACrE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EACV,UAAU,EACV,yBAAyB,EACzB,gBAAgB,EAChB,WAAW,GACZ,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACjD,YAAY,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC;AAClF,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EACV,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,EAC3B,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,WAAW,EACX,wBAAwB,EACxB,wBAAwB,EACxB,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEzC;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;GAEG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,UAAU,EACV,OAAO,EACP,KAAK,GACN,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;GAEG;AACH,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,qBAAqB,GACtB,MAAM,UAAU,CAAC;AAElB;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEjD;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type
|
|
2
|
+
import { type BaseCardProps } from '../common/baseCard';
|
|
3
3
|
import { type PromoCardIndicatorProps } from './PromoCardIndicator';
|
|
4
4
|
export type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;
|
|
5
5
|
export type RelatedTypes = '' | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
|
|
@@ -40,7 +40,7 @@ export interface PromoCardCommonProps {
|
|
|
40
40
|
useDisplayFont?: boolean;
|
|
41
41
|
ref?: ReferenceType;
|
|
42
42
|
}
|
|
43
|
-
export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<
|
|
43
|
+
export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {
|
|
44
44
|
/**
|
|
45
45
|
* Optional prop to prompts a user to save the linked URL instead of
|
|
46
46
|
* navigating to it
|
|
@@ -71,7 +71,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
|
|
|
71
71
|
ref?: ReferenceType;
|
|
72
72
|
value?: never;
|
|
73
73
|
}
|
|
74
|
-
export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<
|
|
74
|
+
export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {
|
|
75
75
|
/** Specify the initial checked attribute of the PromoCard */
|
|
76
76
|
defaultChecked?: boolean;
|
|
77
77
|
/** 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,KAAoE,MAAM,OAAO,CAAC;AAIzF,
|
|
1
|
+
{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -4,15 +4,15 @@ import { lorem10 } from '../../test-utils';
|
|
|
4
4
|
import Title from '../../title';
|
|
5
5
|
import { Typography } from '../propsValues/typography';
|
|
6
6
|
|
|
7
|
-
import
|
|
7
|
+
import BaseCard from '.';
|
|
8
8
|
|
|
9
|
-
const meta: Meta<typeof
|
|
10
|
-
component:
|
|
11
|
-
title: 'Internal/
|
|
9
|
+
const meta: Meta<typeof BaseCard> = {
|
|
10
|
+
component: BaseCard,
|
|
11
|
+
title: 'Internal/BaseCard',
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
export default meta;
|
|
15
|
-
type Story = StoryObj<typeof
|
|
15
|
+
type Story = StoryObj<typeof BaseCard>;
|
|
16
16
|
|
|
17
17
|
export const Default: Story = {
|
|
18
18
|
args: {
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { render, fireEvent, screen } from '@testing-library/react';
|
|
2
|
-
import React from 'react';
|
|
3
2
|
import { IntlProvider } from 'react-intl';
|
|
4
3
|
|
|
5
|
-
import
|
|
4
|
+
import BaseCard from './BaseCard';
|
|
6
5
|
|
|
7
|
-
describe('
|
|
6
|
+
describe('BaseCard', () => {
|
|
8
7
|
const defaultProps = {
|
|
9
8
|
children: 'Test Content',
|
|
10
9
|
testId: 'test-card',
|
|
@@ -15,13 +14,13 @@ describe('Card', () => {
|
|
|
15
14
|
...defaultProps,
|
|
16
15
|
children: 'Test text',
|
|
17
16
|
};
|
|
18
|
-
const { rerender } = render(<
|
|
17
|
+
const { rerender } = render(<BaseCard {...defaultProps}>Test Content</BaseCard>);
|
|
19
18
|
|
|
20
19
|
expect(screen.getByTestId('test-card')).toBeInTheDocument();
|
|
21
20
|
expect(screen.getByTestId('test-card')).toHaveClass('np-Card');
|
|
22
21
|
|
|
23
22
|
// Change props
|
|
24
|
-
rerender(<
|
|
23
|
+
rerender(<BaseCard {...props} />);
|
|
25
24
|
|
|
26
25
|
expect(screen.getByText('Test text')).toBeInTheDocument();
|
|
27
26
|
});
|
|
@@ -31,12 +30,12 @@ describe('Card', () => {
|
|
|
31
30
|
...defaultProps,
|
|
32
31
|
className: 'test-custom',
|
|
33
32
|
};
|
|
34
|
-
const { rerender } = render(<
|
|
33
|
+
const { rerender } = render(<BaseCard {...defaultProps} />);
|
|
35
34
|
|
|
36
35
|
expect(screen.getByTestId('test-card')).not.toHaveClass('test-custom');
|
|
37
36
|
|
|
38
37
|
// Change props
|
|
39
|
-
rerender(<
|
|
38
|
+
rerender(<BaseCard {...props} />);
|
|
40
39
|
|
|
41
40
|
expect(screen.getByTestId('test-card')).toHaveClass('test-custom');
|
|
42
41
|
});
|
|
@@ -46,12 +45,12 @@ describe('Card', () => {
|
|
|
46
45
|
...defaultProps,
|
|
47
46
|
isDisabled: true,
|
|
48
47
|
};
|
|
49
|
-
const { rerender } = render(<
|
|
48
|
+
const { rerender } = render(<BaseCard {...defaultProps} />);
|
|
50
49
|
|
|
51
50
|
expect(screen.getByTestId('test-card')).not.toHaveClass('is-disabled');
|
|
52
51
|
|
|
53
52
|
// Change props
|
|
54
|
-
rerender(<
|
|
53
|
+
rerender(<BaseCard {...props} />);
|
|
55
54
|
|
|
56
55
|
expect(screen.getByTestId('test-card')).toHaveClass('is-disabled');
|
|
57
56
|
});
|
|
@@ -61,12 +60,12 @@ describe('Card', () => {
|
|
|
61
60
|
...defaultProps,
|
|
62
61
|
isSmall: true,
|
|
63
62
|
};
|
|
64
|
-
const { rerender } = render(<
|
|
63
|
+
const { rerender } = render(<BaseCard {...defaultProps} />);
|
|
65
64
|
|
|
66
65
|
expect(screen.getByTestId('test-card')).not.toHaveClass('np-Card--small');
|
|
67
66
|
|
|
68
67
|
// Change props
|
|
69
|
-
rerender(<
|
|
68
|
+
rerender(<BaseCard {...props} />);
|
|
70
69
|
|
|
71
70
|
expect(screen.getByTestId('test-card')).toHaveClass('np-Card--small');
|
|
72
71
|
});
|
|
@@ -79,7 +78,7 @@ describe('Card', () => {
|
|
|
79
78
|
};
|
|
80
79
|
render(
|
|
81
80
|
<IntlProvider locale="en">
|
|
82
|
-
<
|
|
81
|
+
<BaseCard {...props} />
|
|
83
82
|
</IntlProvider>,
|
|
84
83
|
);
|
|
85
84
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
|
-
import {
|
|
2
|
+
import { type ReactNode, forwardRef, useRef } from 'react';
|
|
3
3
|
|
|
4
4
|
import { CloseButton } from '../closeButton';
|
|
5
5
|
import { stopPropagation } from '../domHelpers';
|
|
6
6
|
|
|
7
|
-
export interface
|
|
7
|
+
export interface BaseCardProps {
|
|
8
8
|
/** Content to display inside Card. */
|
|
9
9
|
children: ReactNode;
|
|
10
10
|
|
|
@@ -28,9 +28,9 @@ export interface CardProps {
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
31
|
+
* BaseCard component.
|
|
32
32
|
*
|
|
33
|
-
* A
|
|
33
|
+
* A BaseCard is a container for content that is used to group related information.
|
|
34
34
|
* It can be used to display information in a structured way, and can be
|
|
35
35
|
* customized with various props to suit different use cases.
|
|
36
36
|
*
|
|
@@ -44,11 +44,11 @@ export interface CardProps {
|
|
|
44
44
|
* @param {string} testId - Optional ID to add to the card container for testing purposes.
|
|
45
45
|
* @returns {React.JSX.Element} - The card component.
|
|
46
46
|
* @example
|
|
47
|
-
* <
|
|
47
|
+
* <BaseCard>
|
|
48
48
|
* <p>Hello World!</p>
|
|
49
|
-
* </
|
|
49
|
+
* </BaseCard>
|
|
50
50
|
*/
|
|
51
|
-
const
|
|
51
|
+
const BaseCard = forwardRef<HTMLDivElement, BaseCardProps>(
|
|
52
52
|
(
|
|
53
53
|
{
|
|
54
54
|
className,
|
|
@@ -98,6 +98,6 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
|
|
|
98
98
|
},
|
|
99
99
|
);
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
BaseCard.displayName = 'Card';
|
|
102
102
|
|
|
103
|
-
export default
|
|
103
|
+
export default BaseCard;
|
package/src/index.ts
CHANGED
|
@@ -154,7 +154,7 @@ export { Chip, default as Chips } from './chips';
|
|
|
154
154
|
export { default as CircularButton } from './circularButton';
|
|
155
155
|
export { default as Option } from './common/Option';
|
|
156
156
|
export { default as BottomSheet } from './common/bottomSheet';
|
|
157
|
-
export { default as BaseCard } from './common/
|
|
157
|
+
export { default as BaseCard } from './common/baseCard';
|
|
158
158
|
export { default as CriticalCommsBanner } from './criticalBanner';
|
|
159
159
|
export { default as DateInput } from './dateInput';
|
|
160
160
|
export { default as DateLookup } from './dateLookup';
|
package/src/main.css
CHANGED
|
@@ -1969,6 +1969,55 @@
|
|
|
1969
1969
|
border-radius: var(--radius-full);
|
|
1970
1970
|
box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
|
|
1971
1971
|
}
|
|
1972
|
+
/* @define Card */
|
|
1973
|
+
.np-Card {
|
|
1974
|
+
--Card-background-color: var(--color-background-neutral);
|
|
1975
|
+
--Card-border-radius: var(--size-32);
|
|
1976
|
+
--Card-flex-gap: var(--size-16);
|
|
1977
|
+
--Card-padding: var(--size-24);
|
|
1978
|
+
--Card-closeButton-position: var(--size-16);
|
|
1979
|
+
--Card-max-width: initial;
|
|
1980
|
+
display: flex;
|
|
1981
|
+
flex-direction: column;
|
|
1982
|
+
align-items: stretch;
|
|
1983
|
+
background-color: rgba(134,167,189,0.10196);
|
|
1984
|
+
background-color: var(--Card-background-color);
|
|
1985
|
+
border-radius: 32px;
|
|
1986
|
+
border-radius: var(--Card-border-radius);
|
|
1987
|
+
gap: 16px;
|
|
1988
|
+
gap: var(--Card-flex-gap);
|
|
1989
|
+
padding: 24px;
|
|
1990
|
+
padding: var(--Card-padding);
|
|
1991
|
+
position: relative;
|
|
1992
|
+
box-sizing: border-box;
|
|
1993
|
+
overflow: hidden;
|
|
1994
|
+
}
|
|
1995
|
+
@media (min-width: 576px) {
|
|
1996
|
+
.np-Card {
|
|
1997
|
+
max-width: var(--Card-max-width);
|
|
1998
|
+
}
|
|
1999
|
+
}
|
|
2000
|
+
.np-Card.is-disabled .np-Card-closeButton {
|
|
2001
|
+
cursor: not-allowed;
|
|
2002
|
+
}
|
|
2003
|
+
.np-theme-personal--dark .np-Card {
|
|
2004
|
+
--Card-background-color: var(--color-background-elevated);
|
|
2005
|
+
}
|
|
2006
|
+
.np-Card-closeButton {
|
|
2007
|
+
position: absolute;
|
|
2008
|
+
z-index: 100;
|
|
2009
|
+
top: var(--Card-closeButton-position);
|
|
2010
|
+
right: var(--Card-closeButton-position);
|
|
2011
|
+
}
|
|
2012
|
+
[dir="rtl"] .np-Card-closeButton {
|
|
2013
|
+
left: var(--Card-closeButton-position);
|
|
2014
|
+
right: auto;
|
|
2015
|
+
}
|
|
2016
|
+
.np-Card--small {
|
|
2017
|
+
--Card-border-radius: var(--size-16);
|
|
2018
|
+
--Card-closeButton-position: var(--size-8);
|
|
2019
|
+
--Card-padding: var(--size-16);
|
|
2020
|
+
}
|
|
1972
2021
|
.np-bottom-sheet {
|
|
1973
2022
|
border-radius: 10px 10px 0 0;
|
|
1974
2023
|
}
|
|
@@ -2022,55 +2071,6 @@
|
|
|
2022
2071
|
padding: 0 16px 16px;
|
|
2023
2072
|
padding: 0 var(--size-16) var(--size-16);
|
|
2024
2073
|
}
|
|
2025
|
-
/* @define Card */
|
|
2026
|
-
.np-Card {
|
|
2027
|
-
--Card-background-color: var(--color-background-neutral);
|
|
2028
|
-
--Card-border-radius: var(--size-32);
|
|
2029
|
-
--Card-flex-gap: var(--size-16);
|
|
2030
|
-
--Card-padding: var(--size-24);
|
|
2031
|
-
--Card-closeButton-position: var(--size-16);
|
|
2032
|
-
--Card-max-width: initial;
|
|
2033
|
-
display: flex;
|
|
2034
|
-
flex-direction: column;
|
|
2035
|
-
align-items: stretch;
|
|
2036
|
-
background-color: rgba(134,167,189,0.10196);
|
|
2037
|
-
background-color: var(--Card-background-color);
|
|
2038
|
-
border-radius: 32px;
|
|
2039
|
-
border-radius: var(--Card-border-radius);
|
|
2040
|
-
gap: 16px;
|
|
2041
|
-
gap: var(--Card-flex-gap);
|
|
2042
|
-
padding: 24px;
|
|
2043
|
-
padding: var(--Card-padding);
|
|
2044
|
-
position: relative;
|
|
2045
|
-
box-sizing: border-box;
|
|
2046
|
-
overflow: hidden;
|
|
2047
|
-
}
|
|
2048
|
-
@media (min-width: 576px) {
|
|
2049
|
-
.np-Card {
|
|
2050
|
-
max-width: var(--Card-max-width);
|
|
2051
|
-
}
|
|
2052
|
-
}
|
|
2053
|
-
.np-Card.is-disabled .np-Card-closeButton {
|
|
2054
|
-
cursor: not-allowed;
|
|
2055
|
-
}
|
|
2056
|
-
.np-theme-personal--dark .np-Card {
|
|
2057
|
-
--Card-background-color: var(--color-background-elevated);
|
|
2058
|
-
}
|
|
2059
|
-
.np-Card-closeButton {
|
|
2060
|
-
position: absolute;
|
|
2061
|
-
z-index: 100;
|
|
2062
|
-
top: var(--Card-closeButton-position);
|
|
2063
|
-
right: var(--Card-closeButton-position);
|
|
2064
|
-
}
|
|
2065
|
-
[dir="rtl"] .np-Card-closeButton {
|
|
2066
|
-
left: var(--Card-closeButton-position);
|
|
2067
|
-
right: auto;
|
|
2068
|
-
}
|
|
2069
|
-
.np-Card--small {
|
|
2070
|
-
--Card-border-radius: var(--size-16);
|
|
2071
|
-
--Card-closeButton-position: var(--size-8);
|
|
2072
|
-
--Card-padding: var(--size-16);
|
|
2073
|
-
}
|
|
2074
2074
|
.np-close-button {
|
|
2075
2075
|
transition: color 0.15s ease-in-out;
|
|
2076
2076
|
color: #00a2dd;
|
package/src/main.less
CHANGED
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
@import "./chips/Chip.less";
|
|
20
20
|
@import "./circularButton/CircularButton.less";
|
|
21
21
|
@import "./common/circle/Circle.less";
|
|
22
|
+
@import "./common/baseCard/BaseCard.less";
|
|
22
23
|
@import "./common/bottomSheet/BottomSheet.less";
|
|
23
|
-
@import "./common/card/Card.less";
|
|
24
24
|
@import "./common/closeButton/CloseButton.less";
|
|
25
25
|
@import "./common/Option/Option.less";
|
|
26
26
|
@import "./common/panel/Panel.less";
|
|
@@ -90,4 +90,4 @@
|
|
|
90
90
|
@import "./prompt/ActionPrompt/ActionPrompt.less";
|
|
91
91
|
|
|
92
92
|
// List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
|
|
93
|
-
// Make sure you are not referencing main.less itself in this file!
|
|
93
|
+
// Make sure you are not referencing main.less itself in this file!
|
|
@@ -4,7 +4,7 @@ import React, { forwardRef, FunctionComponent, useEffect, useId, useState } from
|
|
|
4
4
|
|
|
5
5
|
import Body from '../body';
|
|
6
6
|
import { Typography } from '../common';
|
|
7
|
-
import
|
|
7
|
+
import BaseCard, { type BaseCardProps } from '../common/baseCard';
|
|
8
8
|
import Display from '../display';
|
|
9
9
|
import Image from '../image/Image';
|
|
10
10
|
import Title from '../title';
|
|
@@ -82,7 +82,7 @@ export interface PromoCardCommonProps {
|
|
|
82
82
|
ref?: ReferenceType;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<
|
|
85
|
+
export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {
|
|
86
86
|
/**
|
|
87
87
|
* Optional prop to prompts a user to save the linked URL instead of
|
|
88
88
|
* navigating to it
|
|
@@ -121,7 +121,8 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
|
|
|
121
121
|
value?: never;
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
export interface PromoCardCheckedProps
|
|
124
|
+
export interface PromoCardCheckedProps
|
|
125
|
+
extends PromoCardCommonProps, Omit<BaseCardProps, 'children'> {
|
|
125
126
|
/** Specify the initial checked attribute of the PromoCard */
|
|
126
127
|
defaultChecked?: boolean;
|
|
127
128
|
|
|
@@ -368,7 +369,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
|
|
|
368
369
|
}, [defaultChecked, isChecked]);
|
|
369
370
|
|
|
370
371
|
return (
|
|
371
|
-
<
|
|
372
|
+
<BaseCard {...commonProps} {...checkedProps} {...props}>
|
|
372
373
|
{(value === state || checked) && (
|
|
373
374
|
<span className="np-Card-check">
|
|
374
375
|
<Check size={24} aria-hidden="true" />
|
|
@@ -386,7 +387,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
|
|
|
386
387
|
)}
|
|
387
388
|
|
|
388
389
|
<PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />
|
|
389
|
-
</
|
|
390
|
+
</BaseCard>
|
|
390
391
|
);
|
|
391
392
|
},
|
|
392
393
|
) as PolymorphicPromoCard;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n /** Content to display inside Card. */\n children: ReactNode;\n\n /** Optional prop to specify classNames onto the Card */\n className?: string;\n\n /** Optional prop to specify the ID on to Card */\n id?: string;\n\n /** Specify whether the Card is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify whether the Card is sized small or not */\n isSmall?: boolean;\n\n /** Optionally specify Card onDismiss function */\n onDismiss?: () => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n * <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n children = null,\n id,\n isDisabled = false,\n isSmall = false,\n onDismiss,\n testId,\n ...props\n },\n ref,\n ) => {\n const closeButtonReference = useRef(null);\n\n return (\n <div\n ref={ref}\n className={clsx(\n 'np-Card',\n {\n 'np-Card--small': !!isSmall,\n 'is-disabled': !!isDisabled,\n },\n className,\n )}\n id={id}\n data-testid={testId}\n {...props}\n >\n {onDismiss && (\n <CloseButton\n ref={closeButtonReference}\n className=\"np-Card-closeButton\"\n size={isSmall ? 'sm' : 'md'}\n isDisabled={isDisabled}\n testId=\"close-button\"\n onClick={(e) => {\n stopPropagation(e);\n onDismiss();\n }}\n />\n )}\n {children}\n </div>\n );\n },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;;;;;AAkDA,MAAMA,IAAI,gBAAGC,gBAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,cAAA,CAACC,uBAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,gCAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Card.mjs","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n /** Content to display inside Card. */\n children: ReactNode;\n\n /** Optional prop to specify classNames onto the Card */\n className?: string;\n\n /** Optional prop to specify the ID on to Card */\n id?: string;\n\n /** Specify whether the Card is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify whether the Card is sized small or not */\n isSmall?: boolean;\n\n /** Optionally specify Card onDismiss function */\n onDismiss?: () => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n * <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n children = null,\n id,\n isDisabled = false,\n isSmall = false,\n onDismiss,\n testId,\n ...props\n },\n ref,\n ) => {\n const closeButtonReference = useRef(null);\n\n return (\n <div\n ref={ref}\n className={clsx(\n 'np-Card',\n {\n 'np-Card--small': !!isSmall,\n 'is-disabled': !!isDisabled,\n },\n className,\n )}\n id={id}\n data-testid={testId}\n {...props}\n >\n {onDismiss && (\n <CloseButton\n ref={closeButtonReference}\n className=\"np-Card-closeButton\"\n size={isSmall ? 'sm' : 'md'}\n isDisabled={isDisabled}\n testId=\"close-button\"\n onClick={(e) => {\n stopPropagation(e);\n onDismiss();\n }}\n />\n )}\n {children}\n </div>\n );\n },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;AAkDA,MAAMA,IAAI,gBAAGC,UAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,GAAA,CAACC,WAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,eAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/common/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAKvE,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,sGAgDT,CAAC;AAIF,eAAe,IAAI,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
package/src/common/card/index.ts
DELETED
|
File without changes
|
|
File without changes
|