@transferwise/components 0.0.0-experimental-63c3fc6 → 0.0.0-experimental-5f03867

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.
Files changed (147) hide show
  1. package/build/Snackbar/Snackbar.js +178 -102
  2. package/build/Snackbar/Snackbar.js.map +1 -1
  3. package/build/Snackbar/Snackbar.messages.js +14 -0
  4. package/build/Snackbar/Snackbar.messages.js.map +1 -0
  5. package/build/Snackbar/Snackbar.messages.mjs +10 -0
  6. package/build/Snackbar/Snackbar.messages.mjs.map +1 -0
  7. package/build/Snackbar/Snackbar.mjs +180 -101
  8. package/build/Snackbar/Snackbar.mjs.map +1 -1
  9. package/build/Snackbar/SnackbarContext.js.map +1 -1
  10. package/build/Snackbar/SnackbarContext.mjs.map +1 -1
  11. package/build/Snackbar/SnackbarPortal.js +12 -0
  12. package/build/Snackbar/SnackbarPortal.js.map +1 -0
  13. package/build/Snackbar/SnackbarPortal.mjs +8 -0
  14. package/build/Snackbar/SnackbarPortal.mjs.map +1 -0
  15. package/build/Snackbar/SnackbarProvider.js +24 -28
  16. package/build/Snackbar/SnackbarProvider.js.map +1 -1
  17. package/build/Snackbar/SnackbarProvider.mjs +25 -29
  18. package/build/Snackbar/SnackbarProvider.mjs.map +1 -1
  19. package/build/Snackbar/constants.js +17 -0
  20. package/build/Snackbar/constants.js.map +1 -0
  21. package/build/Snackbar/constants.mjs +11 -0
  22. package/build/Snackbar/constants.mjs.map +1 -0
  23. package/build/Snackbar/useSnackbarAutoDismiss.js +66 -0
  24. package/build/Snackbar/useSnackbarAutoDismiss.js.map +1 -0
  25. package/build/Snackbar/useSnackbarAutoDismiss.mjs +62 -0
  26. package/build/Snackbar/useSnackbarAutoDismiss.mjs.map +1 -0
  27. package/build/Snackbar/useSnackbarManager.js +153 -0
  28. package/build/Snackbar/useSnackbarManager.js.map +1 -0
  29. package/build/Snackbar/useSnackbarManager.mjs +149 -0
  30. package/build/Snackbar/useSnackbarManager.mjs.map +1 -0
  31. package/build/Snackbar/useSnackbarSwipeDismiss.js +135 -0
  32. package/build/Snackbar/useSnackbarSwipeDismiss.js.map +1 -0
  33. package/build/Snackbar/useSnackbarSwipeDismiss.mjs +131 -0
  34. package/build/Snackbar/useSnackbarSwipeDismiss.mjs.map +1 -0
  35. package/build/i18n/en.json +1 -0
  36. package/build/i18n/en.json.js +1 -0
  37. package/build/i18n/en.json.js.map +1 -1
  38. package/build/i18n/en.json.mjs +1 -0
  39. package/build/i18n/en.json.mjs.map +1 -1
  40. package/build/index.js +0 -4
  41. package/build/index.js.map +1 -1
  42. package/build/index.mjs +0 -2
  43. package/build/index.mjs.map +1 -1
  44. package/build/main.css +116 -191
  45. package/build/styles/Snackbar/Snackbar.css +117 -54
  46. package/build/styles/main.css +116 -191
  47. package/build/types/Snackbar/Snackbar.d.ts +55 -9
  48. package/build/types/Snackbar/Snackbar.d.ts.map +1 -1
  49. package/build/types/Snackbar/Snackbar.messages.d.ts +9 -0
  50. package/build/types/Snackbar/Snackbar.messages.d.ts.map +1 -0
  51. package/build/types/Snackbar/Snackbar.types.d.ts +12 -0
  52. package/build/types/Snackbar/Snackbar.types.d.ts.map +1 -0
  53. package/build/types/Snackbar/SnackbarContext.d.ts +2 -2
  54. package/build/types/Snackbar/SnackbarContext.d.ts.map +1 -1
  55. package/build/types/Snackbar/SnackbarPortal.d.ts +4 -0
  56. package/build/types/Snackbar/SnackbarPortal.d.ts.map +1 -0
  57. package/build/types/Snackbar/SnackbarProvider.d.ts +7 -0
  58. package/build/types/Snackbar/SnackbarProvider.d.ts.map +1 -1
  59. package/build/types/Snackbar/constants.d.ts +9 -0
  60. package/build/types/Snackbar/constants.d.ts.map +1 -0
  61. package/build/types/Snackbar/index.d.ts +1 -1
  62. package/build/types/Snackbar/index.d.ts.map +1 -1
  63. package/build/types/Snackbar/useSnackbar.d.ts +1 -1
  64. package/build/types/Snackbar/useSnackbar.d.ts.map +1 -1
  65. package/build/types/Snackbar/useSnackbarAutoDismiss.d.ts +13 -0
  66. package/build/types/Snackbar/useSnackbarAutoDismiss.d.ts.map +1 -0
  67. package/build/types/Snackbar/useSnackbarManager.d.ts +20 -0
  68. package/build/types/Snackbar/useSnackbarManager.d.ts.map +1 -0
  69. package/build/types/Snackbar/useSnackbarSwipeDismiss.d.ts +22 -0
  70. package/build/types/Snackbar/useSnackbarSwipeDismiss.d.ts.map +1 -0
  71. package/build/types/index.d.ts +1 -5
  72. package/build/types/index.d.ts.map +1 -1
  73. package/build/types/test-utils/index.d.ts +2 -0
  74. package/build/types/test-utils/index.d.ts.map +1 -1
  75. package/package.json +3 -3
  76. package/src/Snackbar/Snackbar.css +117 -54
  77. package/src/Snackbar/Snackbar.less +139 -60
  78. package/src/Snackbar/Snackbar.messages.ts +9 -0
  79. package/src/Snackbar/Snackbar.test.tsx +989 -119
  80. package/src/Snackbar/Snackbar.tsx +208 -93
  81. package/src/Snackbar/Snackbar.types.ts +17 -0
  82. package/src/Snackbar/SnackbarContext.ts +2 -2
  83. package/src/Snackbar/SnackbarPortal.tsx +8 -0
  84. package/src/Snackbar/SnackbarProvider.test.tsx +783 -0
  85. package/src/Snackbar/SnackbarProvider.tsx +27 -19
  86. package/src/Snackbar/_stories/Snackbar.accessibility.docs.mdx +66 -0
  87. package/src/Snackbar/_stories/Snackbar.migration.docs.mdx +64 -0
  88. package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx +16 -8
  89. package/src/Snackbar/_stories/Snackbar.story.tsx +389 -61
  90. package/src/Snackbar/_stories/Snackbar.test.story.tsx +171 -47
  91. package/src/Snackbar/constants.ts +10 -0
  92. package/src/Snackbar/index.ts +1 -1
  93. package/src/Snackbar/useSnackbarAutoDismiss.ts +74 -0
  94. package/src/Snackbar/useSnackbarManager.ts +169 -0
  95. package/src/Snackbar/useSnackbarSwipeDismiss.ts +169 -0
  96. package/src/i18n/en.json +1 -0
  97. package/src/index.ts +1 -14
  98. package/src/main.css +116 -191
  99. package/src/main.less +0 -2
  100. package/build/CardContainer/CardContainer.js +0 -33
  101. package/build/CardContainer/CardContainer.js.map +0 -1
  102. package/build/CardContainer/CardContainer.mjs +0 -29
  103. package/build/CardContainer/CardContainer.mjs.map +0 -1
  104. package/build/CardWidget/CardWidget.js +0 -94
  105. package/build/CardWidget/CardWidget.js.map +0 -1
  106. package/build/CardWidget/CardWidget.mjs +0 -90
  107. package/build/CardWidget/CardWidget.mjs.map +0 -1
  108. package/build/CardWidget/CardWidgetAction.js +0 -70
  109. package/build/CardWidget/CardWidgetAction.js.map +0 -1
  110. package/build/CardWidget/CardWidgetAction.mjs +0 -65
  111. package/build/CardWidget/CardWidgetAction.mjs.map +0 -1
  112. package/build/styles/CardContainer/CardContainer.css +0 -74
  113. package/build/styles/CardWidget/CardWidget.css +0 -64
  114. package/build/types/CardContainer/CardContainer.d.ts +0 -8
  115. package/build/types/CardContainer/CardContainer.d.ts.map +0 -1
  116. package/build/types/CardContainer/CardContainer.types.d.ts +0 -44
  117. package/build/types/CardContainer/CardContainer.types.d.ts.map +0 -1
  118. package/build/types/CardContainer/_stories/helpers.d.ts +0 -3
  119. package/build/types/CardContainer/_stories/helpers.d.ts.map +0 -1
  120. package/build/types/CardContainer/index.d.ts +0 -3
  121. package/build/types/CardContainer/index.d.ts.map +0 -1
  122. package/build/types/CardWidget/CardWidget.d.ts +0 -8
  123. package/build/types/CardWidget/CardWidget.d.ts.map +0 -1
  124. package/build/types/CardWidget/CardWidget.types.d.ts +0 -52
  125. package/build/types/CardWidget/CardWidget.types.d.ts.map +0 -1
  126. package/build/types/CardWidget/CardWidgetAction.d.ts +0 -54
  127. package/build/types/CardWidget/CardWidgetAction.d.ts.map +0 -1
  128. package/build/types/CardWidget/index.d.ts +0 -4
  129. package/build/types/CardWidget/index.d.ts.map +0 -1
  130. package/src/CardContainer/CardContainer.css +0 -74
  131. package/src/CardContainer/CardContainer.less +0 -112
  132. package/src/CardContainer/CardContainer.test.tsx +0 -118
  133. package/src/CardContainer/CardContainer.tsx +0 -39
  134. package/src/CardContainer/CardContainer.types.ts +0 -50
  135. package/src/CardContainer/_stories/CardContainer.story.tsx +0 -136
  136. package/src/CardContainer/_stories/CardContainer.test.story.tsx +0 -103
  137. package/src/CardContainer/_stories/helpers.tsx +0 -50
  138. package/src/CardContainer/index.ts +0 -6
  139. package/src/CardWidget/CardWidget.css +0 -64
  140. package/src/CardWidget/CardWidget.less +0 -82
  141. package/src/CardWidget/CardWidget.test.tsx +0 -189
  142. package/src/CardWidget/CardWidget.tsx +0 -74
  143. package/src/CardWidget/CardWidget.types.ts +0 -60
  144. package/src/CardWidget/CardWidgetAction.tsx +0 -126
  145. package/src/CardWidget/_stories/CardWidget.story.tsx +0 -209
  146. package/src/CardWidget/_stories/CardWidget.test.story.tsx +0 -350
  147. package/src/CardWidget/index.ts +0 -3
@@ -1,94 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var icons = require('@transferwise/icons');
6
- var clsx = require('clsx');
7
- var React = require('react');
8
- var CardContainer = require('../CardContainer/CardContainer.js');
9
- require('../common/theme.js');
10
- require('../common/direction.js');
11
- require('@transferwise/neptune-tokens');
12
- require('../common/PropsValues/control.js');
13
- require('../common/PropsValues/size.js');
14
- var typography = require('../common/PropsValues/typography.js');
15
- require('../common/PropsValues/width.js');
16
- require('../common/PropsValues/type.js');
17
- require('../common/PropsValues/dateMode.js');
18
- require('../common/PropsValues/monthFormat.js');
19
- require('../common/PropsValues/position.js');
20
- require('../common/PropsValues/layouts.js');
21
- require('../common/PropsValues/status.js');
22
- require('../common/PropsValues/sentiment.js');
23
- require('../common/PropsValues/profileType.js');
24
- require('../common/PropsValues/variant.js');
25
- require('../common/PropsValues/scroll.js');
26
- require('../common/PropsValues/markdownNodeType.js');
27
- require('../common/fileType.js');
28
- require('@transferwise/formatting');
29
- require('react-intl');
30
- require('../common/CloseButton/CloseButton.messages.js');
31
- var jsxRuntime = require('react/jsx-runtime');
32
- var Link = require('../Link/Link.js');
33
- var Title = require('../Title/Title.js');
34
- var CardWidgetAction = require('./CardWidgetAction.js');
35
-
36
- const renderAction = (action, slot) => CardWidgetAction.isCardWidgetActionButton(action) ? /*#__PURE__*/jsxRuntime.jsx(CardWidgetAction.default, {
37
- action: action,
38
- slot: slot
39
- }) : action;
40
- const CardWidgetHeaderComponent = ({
41
- title,
42
- as = 'h3',
43
- titleAction,
44
- action,
45
- actionSecondary
46
- }) => /*#__PURE__*/jsxRuntime.jsxs("div", {
47
- className: "wds-card-widget__header",
48
- children: [/*#__PURE__*/jsxRuntime.jsx(Title.default, {
49
- as: as,
50
- type: typography.Typography.TITLE_GROUP,
51
- className: "wds-card-widget__title",
52
- children: titleAction ? /*#__PURE__*/jsxRuntime.jsxs(Link.default, {
53
- href: titleAction.href,
54
- target: titleAction.target,
55
- className: "wds-card-widget__title-link",
56
- onClick: titleAction.onClick,
57
- children: [title, /*#__PURE__*/jsxRuntime.jsxs("span", {
58
- className: "wds-card-widget__title-chevron",
59
- "aria-hidden": true,
60
- children: ['\u2060', /*#__PURE__*/jsxRuntime.jsx(icons.ChevronEnd, {
61
- size: 16
62
- })]
63
- })]
64
- }) : title
65
- }), (action || actionSecondary) && /*#__PURE__*/jsxRuntime.jsxs("div", {
66
- className: "wds-card-widget__actions",
67
- children: [actionSecondary && renderAction(actionSecondary, 'actionSecondary'), action && renderAction(action, 'action')]
68
- })]
69
- });
70
- /**
71
- * A `CardContainer` with an optional header — a title, a title link and up to two actions — above
72
- * its content.
73
- */
74
- const CardWidget = /*#__PURE__*/React.forwardRef(({
75
- header,
76
- children,
77
- className,
78
- ...props
79
- }, ref) => /*#__PURE__*/jsxRuntime.jsxs(CardContainer.default, {
80
- ref: ref,
81
- className: clsx.clsx('wds-card-widget', header && 'wds-card-widget--with-header', className),
82
- ...props,
83
- padding: "md",
84
- children: [header && /*#__PURE__*/jsxRuntime.jsx(CardWidgetHeaderComponent, {
85
- ...header
86
- }), children != null && /*#__PURE__*/jsxRuntime.jsx("div", {
87
- className: "wds-card-widget__content",
88
- children: children
89
- })]
90
- }));
91
- CardWidget.displayName = 'CardWidget';
92
-
93
- exports.default = CardWidget;
94
- //# sourceMappingURL=CardWidget.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardWidget.js","sources":["../../src/CardWidget/CardWidget.tsx"],"sourcesContent":["import { ChevronEnd } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport CardContainer from '../CardContainer';\nimport { Typography } from '../common';\nimport Link from '../Link';\nimport Title from '../Title';\nimport type { CardWidgetHeader, CardWidgetProps } from './CardWidget.types';\nimport CardWidgetAction, {\n isCardWidgetActionButton,\n type CardWidgetActionSlot,\n} from './CardWidgetAction';\n\nconst renderAction = (action: CardWidgetHeader['action'], slot: CardWidgetActionSlot) =>\n isCardWidgetActionButton(action) ? <CardWidgetAction action={action} slot={slot} /> : action;\n\nconst CardWidgetHeaderComponent = ({\n title,\n as = 'h3',\n titleAction,\n action,\n actionSecondary,\n}: CardWidgetHeader) => (\n <div className=\"wds-card-widget__header\">\n <Title as={as} type={Typography.TITLE_GROUP} className=\"wds-card-widget__title\">\n {titleAction ? (\n <Link\n href={titleAction.href}\n target={titleAction.target}\n className=\"wds-card-widget__title-link\"\n onClick={titleAction.onClick}\n >\n {title}\n {/* The word joiner keeps the chevron on the title's last line instead of wrapping alone. */}\n <span className=\"wds-card-widget__title-chevron\" aria-hidden>\n {'\\u2060'}\n <ChevronEnd size={16} />\n </span>\n </Link>\n ) : (\n title\n )}\n </Title>\n {(action || actionSecondary) && (\n <div className=\"wds-card-widget__actions\">\n {actionSecondary && renderAction(actionSecondary, 'actionSecondary')}\n {action && renderAction(action, 'action')}\n </div>\n )}\n </div>\n);\n\n/**\n * A `CardContainer` with an optional header — a title, a title link and up to two actions — above\n * its content.\n */\nconst CardWidget = forwardRef<HTMLElement, CardWidgetProps>(\n ({ header, children, className, ...props }, ref) => (\n <CardContainer\n ref={ref}\n className={clsx('wds-card-widget', header && 'wds-card-widget--with-header', className)}\n {...props}\n padding=\"md\"\n >\n {header && <CardWidgetHeaderComponent {...header} />}\n {children != null && <div className=\"wds-card-widget__content\">{children}</div>}\n </CardContainer>\n ),\n);\n\nCardWidget.displayName = 'CardWidget';\n\nexport default CardWidget;\n"],"names":["renderAction","action","slot","isCardWidgetActionButton","_jsx","CardWidgetAction","CardWidgetHeaderComponent","title","as","titleAction","actionSecondary","_jsxs","className","children","Title","type","Typography","TITLE_GROUP","Link","href","target","onClick","ChevronEnd","size","CardWidget","forwardRef","header","props","ref","CardContainer","clsx","padding","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,YAAY,GAAGA,CAACC,MAAkC,EAAEC,IAA0B,KAClFC,yCAAwB,CAACF,MAAM,CAAC,gBAAGG,cAAA,CAACC,wBAAgB,EAAA;AAACJ,EAAAA,MAAM,EAAEA,MAAO;AAACC,EAAAA,IAAI,EAAEA;AAAK,CAAA,CAAG,GAAGD,MAAM;AAE9F,MAAMK,yBAAyB,GAAGA,CAAC;EACjCC,KAAK;AACLC,EAAAA,EAAE,GAAG,IAAI;EACTC,WAAW;EACXR,MAAM;AACNS,EAAAA;AAAe,CACE,kBACjBC,eAAA,CAAA,KAAA,EAAA;AAAKC,EAAAA,SAAS,EAAC,yBAAyB;EAAAC,QAAA,EAAA,cACtCT,cAAA,CAACU,aAAK,EAAA;AAACN,IAAAA,EAAE,EAAEA,EAAG;IAACO,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACL,IAAAA,SAAS,EAAC,wBAAwB;AAAAC,IAAAA,QAAA,EAC5EJ,WAAW,gBACVE,eAAA,CAACO,YAAI,EAAA;MACHC,IAAI,EAAEV,WAAW,CAACU,IAAK;MACvBC,MAAM,EAAEX,WAAW,CAACW,MAAO;AAC3BR,MAAAA,SAAS,EAAC,6BAA6B;MACvCS,OAAO,EAAEZ,WAAW,CAACY,OAAQ;MAAAR,QAAA,EAAA,CAE5BN,KAAK,eAENI,eAAA,CAAA,MAAA,EAAA;AAAMC,QAAAA,SAAS,EAAC,gCAAgC;QAAC,aAAA,EAAA,IAAW;AAAAC,QAAAA,QAAA,EAAA,CACzD,QAAQ,eACTT,cAAA,CAACkB,gBAAU,EAAA;AAACC,UAAAA,IAAI,EAAE;AAAG,SAAA,CACvB;AAAA,OAAM,CACR;AAAA,KAAM,CAAC,GAEPhB;AACD,GACI,CACP,EAAC,CAACN,MAAM,IAAIS,eAAe,kBACzBC,eAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0BAA0B;AAAAC,IAAAA,QAAA,GACtCH,eAAe,IAAIV,YAAY,CAACU,eAAe,EAAE,iBAAiB,CAAC,EACnET,MAAM,IAAID,YAAY,CAACC,MAAM,EAAE,QAAQ,CAAC;AAAA,GACtC,CACN;AAAA,CACE,CACN;AAED;;;AAGG;AACH,MAAMuB,UAAU,gBAAGC,gBAAU,CAC3B,CAAC;EAAEC,MAAM;EAAEb,QAAQ;EAAED,SAAS;EAAE,GAAGe;AAAK,CAAE,EAAEC,GAAG,kBAC7CjB,eAAA,CAACkB,qBAAa,EAAA;AACZD,EAAAA,GAAG,EAAEA,GAAI;EACThB,SAAS,EAAEkB,SAAI,CAAC,iBAAiB,EAAEJ,MAAM,IAAI,8BAA8B,EAAEd,SAAS,CAAE;AAAA,EAAA,GACpFe,KAAK;AACTI,EAAAA,OAAO,EAAC,IAAI;AAAAlB,EAAAA,QAAA,EAAA,CAEXa,MAAM,iBAAItB,cAAA,CAACE,yBAAyB,EAAA;IAAA,GAAKoB;AAAM,GAAC,CAAG,EACnDb,QAAQ,IAAI,IAAI,iBAAIT,cAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,0BAA0B;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAM,CAAC;AAAA,CAClE,CAChB;AAGHW,UAAU,CAACQ,WAAW,GAAG,YAAY;;"}
@@ -1,90 +0,0 @@
1
- import { ChevronEnd } from '@transferwise/icons';
2
- import { clsx } from 'clsx';
3
- import { forwardRef } from 'react';
4
- import CardContainer from '../CardContainer/CardContainer.mjs';
5
- import '../common/theme.mjs';
6
- import '../common/direction.mjs';
7
- import '@transferwise/neptune-tokens';
8
- import '../common/PropsValues/control.mjs';
9
- import '../common/PropsValues/size.mjs';
10
- import { Typography } from '../common/PropsValues/typography.mjs';
11
- import '../common/PropsValues/width.mjs';
12
- import '../common/PropsValues/type.mjs';
13
- import '../common/PropsValues/dateMode.mjs';
14
- import '../common/PropsValues/monthFormat.mjs';
15
- import '../common/PropsValues/position.mjs';
16
- import '../common/PropsValues/layouts.mjs';
17
- import '../common/PropsValues/status.mjs';
18
- import '../common/PropsValues/sentiment.mjs';
19
- import '../common/PropsValues/profileType.mjs';
20
- import '../common/PropsValues/variant.mjs';
21
- import '../common/PropsValues/scroll.mjs';
22
- import '../common/PropsValues/markdownNodeType.mjs';
23
- import '../common/fileType.mjs';
24
- import '@transferwise/formatting';
25
- import 'react-intl';
26
- import '../common/CloseButton/CloseButton.messages.mjs';
27
- import { jsxs, jsx } from 'react/jsx-runtime';
28
- import Link from '../Link/Link.mjs';
29
- import Title from '../Title/Title.mjs';
30
- import CardWidgetAction, { isCardWidgetActionButton } from './CardWidgetAction.mjs';
31
-
32
- const renderAction = (action, slot) => isCardWidgetActionButton(action) ? /*#__PURE__*/jsx(CardWidgetAction, {
33
- action: action,
34
- slot: slot
35
- }) : action;
36
- const CardWidgetHeaderComponent = ({
37
- title,
38
- as = 'h3',
39
- titleAction,
40
- action,
41
- actionSecondary
42
- }) => /*#__PURE__*/jsxs("div", {
43
- className: "wds-card-widget__header",
44
- children: [/*#__PURE__*/jsx(Title, {
45
- as: as,
46
- type: Typography.TITLE_GROUP,
47
- className: "wds-card-widget__title",
48
- children: titleAction ? /*#__PURE__*/jsxs(Link, {
49
- href: titleAction.href,
50
- target: titleAction.target,
51
- className: "wds-card-widget__title-link",
52
- onClick: titleAction.onClick,
53
- children: [title, /*#__PURE__*/jsxs("span", {
54
- className: "wds-card-widget__title-chevron",
55
- "aria-hidden": true,
56
- children: ['\u2060', /*#__PURE__*/jsx(ChevronEnd, {
57
- size: 16
58
- })]
59
- })]
60
- }) : title
61
- }), (action || actionSecondary) && /*#__PURE__*/jsxs("div", {
62
- className: "wds-card-widget__actions",
63
- children: [actionSecondary && renderAction(actionSecondary, 'actionSecondary'), action && renderAction(action, 'action')]
64
- })]
65
- });
66
- /**
67
- * A `CardContainer` with an optional header — a title, a title link and up to two actions — above
68
- * its content.
69
- */
70
- const CardWidget = /*#__PURE__*/forwardRef(({
71
- header,
72
- children,
73
- className,
74
- ...props
75
- }, ref) => /*#__PURE__*/jsxs(CardContainer, {
76
- ref: ref,
77
- className: clsx('wds-card-widget', header && 'wds-card-widget--with-header', className),
78
- ...props,
79
- padding: "md",
80
- children: [header && /*#__PURE__*/jsx(CardWidgetHeaderComponent, {
81
- ...header
82
- }), children != null && /*#__PURE__*/jsx("div", {
83
- className: "wds-card-widget__content",
84
- children: children
85
- })]
86
- }));
87
- CardWidget.displayName = 'CardWidget';
88
-
89
- export { CardWidget as default };
90
- //# sourceMappingURL=CardWidget.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardWidget.mjs","sources":["../../src/CardWidget/CardWidget.tsx"],"sourcesContent":["import { ChevronEnd } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport CardContainer from '../CardContainer';\nimport { Typography } from '../common';\nimport Link from '../Link';\nimport Title from '../Title';\nimport type { CardWidgetHeader, CardWidgetProps } from './CardWidget.types';\nimport CardWidgetAction, {\n isCardWidgetActionButton,\n type CardWidgetActionSlot,\n} from './CardWidgetAction';\n\nconst renderAction = (action: CardWidgetHeader['action'], slot: CardWidgetActionSlot) =>\n isCardWidgetActionButton(action) ? <CardWidgetAction action={action} slot={slot} /> : action;\n\nconst CardWidgetHeaderComponent = ({\n title,\n as = 'h3',\n titleAction,\n action,\n actionSecondary,\n}: CardWidgetHeader) => (\n <div className=\"wds-card-widget__header\">\n <Title as={as} type={Typography.TITLE_GROUP} className=\"wds-card-widget__title\">\n {titleAction ? (\n <Link\n href={titleAction.href}\n target={titleAction.target}\n className=\"wds-card-widget__title-link\"\n onClick={titleAction.onClick}\n >\n {title}\n {/* The word joiner keeps the chevron on the title's last line instead of wrapping alone. */}\n <span className=\"wds-card-widget__title-chevron\" aria-hidden>\n {'\\u2060'}\n <ChevronEnd size={16} />\n </span>\n </Link>\n ) : (\n title\n )}\n </Title>\n {(action || actionSecondary) && (\n <div className=\"wds-card-widget__actions\">\n {actionSecondary && renderAction(actionSecondary, 'actionSecondary')}\n {action && renderAction(action, 'action')}\n </div>\n )}\n </div>\n);\n\n/**\n * A `CardContainer` with an optional header — a title, a title link and up to two actions — above\n * its content.\n */\nconst CardWidget = forwardRef<HTMLElement, CardWidgetProps>(\n ({ header, children, className, ...props }, ref) => (\n <CardContainer\n ref={ref}\n className={clsx('wds-card-widget', header && 'wds-card-widget--with-header', className)}\n {...props}\n padding=\"md\"\n >\n {header && <CardWidgetHeaderComponent {...header} />}\n {children != null && <div className=\"wds-card-widget__content\">{children}</div>}\n </CardContainer>\n ),\n);\n\nCardWidget.displayName = 'CardWidget';\n\nexport default CardWidget;\n"],"names":["renderAction","action","slot","isCardWidgetActionButton","_jsx","CardWidgetAction","CardWidgetHeaderComponent","title","as","titleAction","actionSecondary","_jsxs","className","children","Title","type","Typography","TITLE_GROUP","Link","href","target","onClick","ChevronEnd","size","CardWidget","forwardRef","header","props","ref","CardContainer","clsx","padding","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,YAAY,GAAGA,CAACC,MAAkC,EAAEC,IAA0B,KAClFC,wBAAwB,CAACF,MAAM,CAAC,gBAAGG,GAAA,CAACC,gBAAgB,EAAA;AAACJ,EAAAA,MAAM,EAAEA,MAAO;AAACC,EAAAA,IAAI,EAAEA;AAAK,CAAA,CAAG,GAAGD,MAAM;AAE9F,MAAMK,yBAAyB,GAAGA,CAAC;EACjCC,KAAK;AACLC,EAAAA,EAAE,GAAG,IAAI;EACTC,WAAW;EACXR,MAAM;AACNS,EAAAA;AAAe,CACE,kBACjBC,IAAA,CAAA,KAAA,EAAA;AAAKC,EAAAA,SAAS,EAAC,yBAAyB;EAAAC,QAAA,EAAA,cACtCT,GAAA,CAACU,KAAK,EAAA;AAACN,IAAAA,EAAE,EAAEA,EAAG;IAACO,IAAI,EAAEC,UAAU,CAACC,WAAY;AAACL,IAAAA,SAAS,EAAC,wBAAwB;AAAAC,IAAAA,QAAA,EAC5EJ,WAAW,gBACVE,IAAA,CAACO,IAAI,EAAA;MACHC,IAAI,EAAEV,WAAW,CAACU,IAAK;MACvBC,MAAM,EAAEX,WAAW,CAACW,MAAO;AAC3BR,MAAAA,SAAS,EAAC,6BAA6B;MACvCS,OAAO,EAAEZ,WAAW,CAACY,OAAQ;MAAAR,QAAA,EAAA,CAE5BN,KAAK,eAENI,IAAA,CAAA,MAAA,EAAA;AAAMC,QAAAA,SAAS,EAAC,gCAAgC;QAAC,aAAA,EAAA,IAAW;AAAAC,QAAAA,QAAA,EAAA,CACzD,QAAQ,eACTT,GAAA,CAACkB,UAAU,EAAA;AAACC,UAAAA,IAAI,EAAE;AAAG,SAAA,CACvB;AAAA,OAAM,CACR;AAAA,KAAM,CAAC,GAEPhB;AACD,GACI,CACP,EAAC,CAACN,MAAM,IAAIS,eAAe,kBACzBC,IAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0BAA0B;AAAAC,IAAAA,QAAA,GACtCH,eAAe,IAAIV,YAAY,CAACU,eAAe,EAAE,iBAAiB,CAAC,EACnET,MAAM,IAAID,YAAY,CAACC,MAAM,EAAE,QAAQ,CAAC;AAAA,GACtC,CACN;AAAA,CACE,CACN;AAED;;;AAGG;AACH,MAAMuB,UAAU,gBAAGC,UAAU,CAC3B,CAAC;EAAEC,MAAM;EAAEb,QAAQ;EAAED,SAAS;EAAE,GAAGe;AAAK,CAAE,EAAEC,GAAG,kBAC7CjB,IAAA,CAACkB,aAAa,EAAA;AACZD,EAAAA,GAAG,EAAEA,GAAI;EACThB,SAAS,EAAEkB,IAAI,CAAC,iBAAiB,EAAEJ,MAAM,IAAI,8BAA8B,EAAEd,SAAS,CAAE;AAAA,EAAA,GACpFe,KAAK;AACTI,EAAAA,OAAO,EAAC,IAAI;AAAAlB,EAAAA,QAAA,EAAA,CAEXa,MAAM,iBAAItB,GAAA,CAACE,yBAAyB,EAAA;IAAA,GAAKoB;AAAM,GAAC,CAAG,EACnDb,QAAQ,IAAI,IAAI,iBAAIT,GAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,0BAA0B;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAM,CAAC;AAAA,CAClE,CAChB;AAGHW,UAAU,CAACQ,WAAW,GAAG,YAAY;;"}
@@ -1,70 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var Button_resolver = require('../Button/Button.resolver.js');
7
- var IconButton = require('../IconButton/IconButton.js');
8
- var jsxRuntime = require('react/jsx-runtime');
9
-
10
- const BUTTON_PRIORITY = {
11
- action: 'secondary',
12
- actionSecondary: 'secondary-neutral'
13
- };
14
- const ICON_BUTTON_PRIORITY = {
15
- action: 'secondary',
16
- actionSecondary: 'tertiary'
17
- };
18
- /**
19
- * Tells a `CardWidgetActionButton` object apart from any other node passed to an action slot.
20
- * Every button action has a `label` or an `icon`, which no React element, portal or array does.
21
- */
22
- const isCardWidgetActionButton = value => typeof value === 'object' && value !== null && ! /*#__PURE__*/React.isValidElement(value) && !Array.isArray(value) && ('label' in value || 'icon' in value);
23
- /** Renders a `CardWidgetActionButton` at the emphasis of the slot it was passed to. */
24
- const CardWidgetAction = function CardWidgetAction({
25
- action: {
26
- label,
27
- icon,
28
- 'aria-label': ariaLabel,
29
- 'data-testid': dataTestId,
30
- href,
31
- target,
32
- onClick,
33
- disabled
34
- },
35
- slot
36
- }) {
37
- if (label === undefined) {
38
- return /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
39
- size: 32,
40
- priority: ICON_BUTTON_PRIORITY[slot],
41
- "aria-label": ariaLabel,
42
- href: href,
43
- target: target,
44
- disabled: disabled,
45
- "data-testid": dataTestId,
46
- onClick: onClick,
47
- children: icon
48
- });
49
- }
50
- return /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
51
- v2: true,
52
- size: "sm",
53
- priority: BUTTON_PRIORITY[slot],
54
- "aria-label": ariaLabel,
55
- href: href,
56
- target: target,
57
- disabled: disabled,
58
- addonEnd: icon ? {
59
- type: 'icon',
60
- value: icon
61
- } : undefined,
62
- "data-testid": dataTestId,
63
- onClick: onClick,
64
- children: label
65
- });
66
- };
67
-
68
- exports.default = CardWidgetAction;
69
- exports.isCardWidgetActionButton = isCardWidgetActionButton;
70
- //# sourceMappingURL=CardWidgetAction.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardWidgetAction.js","sources":["../../src/CardWidget/CardWidgetAction.tsx"],"sourcesContent":["import { isValidElement, type MouseEventHandler, type ReactNode } from 'react';\n\nimport Button from '../Button';\nimport type { ButtonPriority, ButtonProps } from '../Button/Button.types';\nimport IconButton, { type IconButtonProps } from '../IconButton';\n\n/** The action slot a `CardWidgetActionButton` was passed to, which is what determines its emphasis. */\nexport type CardWidgetActionSlot = 'action' | 'actionSecondary';\n\ntype CardWidgetActionButtonBase = Pick<ButtonProps, 'href' | 'target' | 'disabled'> & {\n /**\n * `HTMLElement` rather than a narrower target, because an action is a `button` or an `a`\n * depending on whether `href` is set.\n * @default undefined\n */\n onClick?: MouseEventHandler<HTMLElement>;\n\n /**\n * Rendered after `label`, or as the only content of an unlabelled action.\n * Size it yourself — 16px is expected in both cases.\n * @default undefined\n */\n icon?: ReactNode;\n 'data-testid'?: string;\n};\n\n/** An action with a visible label, rendered as a small button. */\ntype CardWidgetLabelledActionButton = CardWidgetActionButtonBase & {\n /** Non-rendering values are excluded, so an unlabelled action has to meet the icon-only rules. */\n label: Exclude<ButtonProps['children'], null | undefined | boolean>;\n /** @default undefined */\n 'aria-label'?: string;\n};\n\n/**\n * An action with no visible label, rendered as a 32px icon button. The icon is\n * the only thing on screen and `aria-label` is the only accessible name, so\n * both are required.\n */\ntype CardWidgetIconActionButton = CardWidgetActionButtonBase & {\n label?: never;\n icon: ReactNode;\n 'aria-label': string;\n};\n\n/**\n * An action the `CardWidget` header renders as a button. With a `label` it is a small `Button`; without\n * one, a 32px `IconButton`, which requires both an `icon` and an `aria-label`. Emphasis is not\n * part of the object — it comes from the slot the action is passed to.\n */\nexport type CardWidgetActionButton = CardWidgetLabelledActionButton | CardWidgetIconActionButton;\n\nconst BUTTON_PRIORITY = {\n action: 'secondary',\n actionSecondary: 'secondary-neutral',\n} as const satisfies Record<CardWidgetActionSlot, ButtonPriority>;\n\nconst ICON_BUTTON_PRIORITY = {\n action: 'secondary',\n actionSecondary: 'tertiary',\n} as const satisfies Record<CardWidgetActionSlot, IconButtonProps['priority']>;\n\n/**\n * Tells a `CardWidgetActionButton` object apart from any other node passed to an action slot.\n * Every button action has a `label` or an `icon`, which no React element, portal or array does.\n */\nexport const isCardWidgetActionButton = (value: unknown): value is CardWidgetActionButton =>\n typeof value === 'object' &&\n value !== null &&\n !isValidElement(value) &&\n !Array.isArray(value) &&\n ('label' in value || 'icon' in value);\n\n/** Renders a `CardWidgetActionButton` at the emphasis of the slot it was passed to. */\nconst CardWidgetAction = function CardWidgetAction({\n action: {\n label,\n icon,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n href,\n target,\n onClick,\n disabled,\n },\n slot,\n}: {\n action: CardWidgetActionButton;\n slot: CardWidgetActionSlot;\n}) {\n if (label === undefined) {\n return (\n <IconButton\n size={32}\n priority={ICON_BUTTON_PRIORITY[slot]}\n aria-label={ariaLabel}\n href={href}\n target={target}\n disabled={disabled}\n data-testid={dataTestId}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n );\n }\n\n return (\n <Button\n v2\n size=\"sm\"\n priority={BUTTON_PRIORITY[slot]}\n aria-label={ariaLabel}\n href={href}\n target={target}\n disabled={disabled}\n addonEnd={icon ? { type: 'icon', value: icon } : undefined}\n data-testid={dataTestId}\n onClick={onClick}\n >\n {label}\n </Button>\n );\n};\n\nexport default CardWidgetAction;\n"],"names":["BUTTON_PRIORITY","action","actionSecondary","ICON_BUTTON_PRIORITY","isCardWidgetActionButton","value","isValidElement","Array","isArray","CardWidgetAction","label","icon","ariaLabel","dataTestId","href","target","onClick","disabled","slot","undefined","_jsx","IconButton","size","priority","children","Button","v2","addonEnd","type"],"mappings":";;;;;;;;;AAoDA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC8C;AAEjE,MAAMC,oBAAoB,GAAG;AAC3BF,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC2D;AAE9E;;;AAGG;AACI,MAAME,wBAAwB,GAAIC,KAAc,IACrD,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,eAACC,oBAAc,CAACD,KAAK,CAAC,IACtB,CAACE,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,KACpB,OAAO,IAAIA,KAAK,IAAI,MAAM,IAAIA,KAAK;AAEtC;AACA,MAAMI,gBAAgB,GAAG,SAASA,gBAAgBA,CAAC;AACjDR,EAAAA,MAAM,EAAE;IACNS,KAAK;IACLC,IAAI;AACJ,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,aAAa,EAAEC,UAAU;IACzBC,IAAI;IACJC,MAAM;IACNC,OAAO;AACPC,IAAAA;GACD;AACDC,EAAAA;AAAI,CAIL,EAAA;EACC,IAAIR,KAAK,KAAKS,SAAS,EAAE;IACvB,oBACEC,cAAA,CAACC,kBAAU,EAAA;AACTC,MAAAA,IAAI,EAAE,EAAG;AACTC,MAAAA,QAAQ,EAAEpB,oBAAoB,CAACe,IAAI,CAAE;AACrC,MAAA,YAAA,EAAYN,SAAU;AACtBE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,MAAM,EAAEA,MAAO;AACfE,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,aAAA,EAAaJ,UAAW;AACxBG,MAAAA,OAAO,EAAEA,OAAQ;AAAAQ,MAAAA,QAAA,EAEhBb;AAAI,KACK,CAAC;AAEjB,EAAA;EAEA,oBACES,cAAA,CAACK,uBAAM,EAAA;IACLC,EAAE,EAAA,IAAA;AACFJ,IAAAA,IAAI,EAAC,IAAI;AACTC,IAAAA,QAAQ,EAAEvB,eAAe,CAACkB,IAAI,CAAE;AAChC,IAAA,YAAA,EAAYN,SAAU;AACtBE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,QAAQ,EAAEA,QAAS;IACnBU,QAAQ,EAAEhB,IAAI,GAAG;AAAEiB,MAAAA,IAAI,EAAE,MAAM;AAAEvB,MAAAA,KAAK,EAAEM;AAAI,KAAE,GAAGQ,SAAU;AAC3D,IAAA,aAAA,EAAaN,UAAW;AACxBG,IAAAA,OAAO,EAAEA,OAAQ;AAAAQ,IAAAA,QAAA,EAEhBd;AAAK,GACA,CAAC;AAEb;;;"}
@@ -1,65 +0,0 @@
1
- import { isValidElement } from 'react';
2
- import Button from '../Button/Button.resolver.mjs';
3
- import IconButton from '../IconButton/IconButton.mjs';
4
- import { jsx } from 'react/jsx-runtime';
5
-
6
- const BUTTON_PRIORITY = {
7
- action: 'secondary',
8
- actionSecondary: 'secondary-neutral'
9
- };
10
- const ICON_BUTTON_PRIORITY = {
11
- action: 'secondary',
12
- actionSecondary: 'tertiary'
13
- };
14
- /**
15
- * Tells a `CardWidgetActionButton` object apart from any other node passed to an action slot.
16
- * Every button action has a `label` or an `icon`, which no React element, portal or array does.
17
- */
18
- const isCardWidgetActionButton = value => typeof value === 'object' && value !== null && ! /*#__PURE__*/isValidElement(value) && !Array.isArray(value) && ('label' in value || 'icon' in value);
19
- /** Renders a `CardWidgetActionButton` at the emphasis of the slot it was passed to. */
20
- const CardWidgetAction = function CardWidgetAction({
21
- action: {
22
- label,
23
- icon,
24
- 'aria-label': ariaLabel,
25
- 'data-testid': dataTestId,
26
- href,
27
- target,
28
- onClick,
29
- disabled
30
- },
31
- slot
32
- }) {
33
- if (label === undefined) {
34
- return /*#__PURE__*/jsx(IconButton, {
35
- size: 32,
36
- priority: ICON_BUTTON_PRIORITY[slot],
37
- "aria-label": ariaLabel,
38
- href: href,
39
- target: target,
40
- disabled: disabled,
41
- "data-testid": dataTestId,
42
- onClick: onClick,
43
- children: icon
44
- });
45
- }
46
- return /*#__PURE__*/jsx(Button, {
47
- v2: true,
48
- size: "sm",
49
- priority: BUTTON_PRIORITY[slot],
50
- "aria-label": ariaLabel,
51
- href: href,
52
- target: target,
53
- disabled: disabled,
54
- addonEnd: icon ? {
55
- type: 'icon',
56
- value: icon
57
- } : undefined,
58
- "data-testid": dataTestId,
59
- onClick: onClick,
60
- children: label
61
- });
62
- };
63
-
64
- export { CardWidgetAction as default, isCardWidgetActionButton };
65
- //# sourceMappingURL=CardWidgetAction.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardWidgetAction.mjs","sources":["../../src/CardWidget/CardWidgetAction.tsx"],"sourcesContent":["import { isValidElement, type MouseEventHandler, type ReactNode } from 'react';\n\nimport Button from '../Button';\nimport type { ButtonPriority, ButtonProps } from '../Button/Button.types';\nimport IconButton, { type IconButtonProps } from '../IconButton';\n\n/** The action slot a `CardWidgetActionButton` was passed to, which is what determines its emphasis. */\nexport type CardWidgetActionSlot = 'action' | 'actionSecondary';\n\ntype CardWidgetActionButtonBase = Pick<ButtonProps, 'href' | 'target' | 'disabled'> & {\n /**\n * `HTMLElement` rather than a narrower target, because an action is a `button` or an `a`\n * depending on whether `href` is set.\n * @default undefined\n */\n onClick?: MouseEventHandler<HTMLElement>;\n\n /**\n * Rendered after `label`, or as the only content of an unlabelled action.\n * Size it yourself — 16px is expected in both cases.\n * @default undefined\n */\n icon?: ReactNode;\n 'data-testid'?: string;\n};\n\n/** An action with a visible label, rendered as a small button. */\ntype CardWidgetLabelledActionButton = CardWidgetActionButtonBase & {\n /** Non-rendering values are excluded, so an unlabelled action has to meet the icon-only rules. */\n label: Exclude<ButtonProps['children'], null | undefined | boolean>;\n /** @default undefined */\n 'aria-label'?: string;\n};\n\n/**\n * An action with no visible label, rendered as a 32px icon button. The icon is\n * the only thing on screen and `aria-label` is the only accessible name, so\n * both are required.\n */\ntype CardWidgetIconActionButton = CardWidgetActionButtonBase & {\n label?: never;\n icon: ReactNode;\n 'aria-label': string;\n};\n\n/**\n * An action the `CardWidget` header renders as a button. With a `label` it is a small `Button`; without\n * one, a 32px `IconButton`, which requires both an `icon` and an `aria-label`. Emphasis is not\n * part of the object — it comes from the slot the action is passed to.\n */\nexport type CardWidgetActionButton = CardWidgetLabelledActionButton | CardWidgetIconActionButton;\n\nconst BUTTON_PRIORITY = {\n action: 'secondary',\n actionSecondary: 'secondary-neutral',\n} as const satisfies Record<CardWidgetActionSlot, ButtonPriority>;\n\nconst ICON_BUTTON_PRIORITY = {\n action: 'secondary',\n actionSecondary: 'tertiary',\n} as const satisfies Record<CardWidgetActionSlot, IconButtonProps['priority']>;\n\n/**\n * Tells a `CardWidgetActionButton` object apart from any other node passed to an action slot.\n * Every button action has a `label` or an `icon`, which no React element, portal or array does.\n */\nexport const isCardWidgetActionButton = (value: unknown): value is CardWidgetActionButton =>\n typeof value === 'object' &&\n value !== null &&\n !isValidElement(value) &&\n !Array.isArray(value) &&\n ('label' in value || 'icon' in value);\n\n/** Renders a `CardWidgetActionButton` at the emphasis of the slot it was passed to. */\nconst CardWidgetAction = function CardWidgetAction({\n action: {\n label,\n icon,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n href,\n target,\n onClick,\n disabled,\n },\n slot,\n}: {\n action: CardWidgetActionButton;\n slot: CardWidgetActionSlot;\n}) {\n if (label === undefined) {\n return (\n <IconButton\n size={32}\n priority={ICON_BUTTON_PRIORITY[slot]}\n aria-label={ariaLabel}\n href={href}\n target={target}\n disabled={disabled}\n data-testid={dataTestId}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n );\n }\n\n return (\n <Button\n v2\n size=\"sm\"\n priority={BUTTON_PRIORITY[slot]}\n aria-label={ariaLabel}\n href={href}\n target={target}\n disabled={disabled}\n addonEnd={icon ? { type: 'icon', value: icon } : undefined}\n data-testid={dataTestId}\n onClick={onClick}\n >\n {label}\n </Button>\n );\n};\n\nexport default CardWidgetAction;\n"],"names":["BUTTON_PRIORITY","action","actionSecondary","ICON_BUTTON_PRIORITY","isCardWidgetActionButton","value","isValidElement","Array","isArray","CardWidgetAction","label","icon","ariaLabel","dataTestId","href","target","onClick","disabled","slot","undefined","_jsx","IconButton","size","priority","children","Button","v2","addonEnd","type"],"mappings":";;;;;AAoDA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC8C;AAEjE,MAAMC,oBAAoB,GAAG;AAC3BF,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC2D;AAE9E;;;AAGG;AACI,MAAME,wBAAwB,GAAIC,KAAc,IACrD,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,eAACC,cAAc,CAACD,KAAK,CAAC,IACtB,CAACE,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,KACpB,OAAO,IAAIA,KAAK,IAAI,MAAM,IAAIA,KAAK;AAEtC;AACA,MAAMI,gBAAgB,GAAG,SAASA,gBAAgBA,CAAC;AACjDR,EAAAA,MAAM,EAAE;IACNS,KAAK;IACLC,IAAI;AACJ,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,aAAa,EAAEC,UAAU;IACzBC,IAAI;IACJC,MAAM;IACNC,OAAO;AACPC,IAAAA;GACD;AACDC,EAAAA;AAAI,CAIL,EAAA;EACC,IAAIR,KAAK,KAAKS,SAAS,EAAE;IACvB,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,MAAAA,IAAI,EAAE,EAAG;AACTC,MAAAA,QAAQ,EAAEpB,oBAAoB,CAACe,IAAI,CAAE;AACrC,MAAA,YAAA,EAAYN,SAAU;AACtBE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,MAAM,EAAEA,MAAO;AACfE,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,aAAA,EAAaJ,UAAW;AACxBG,MAAAA,OAAO,EAAEA,OAAQ;AAAAQ,MAAAA,QAAA,EAEhBb;AAAI,KACK,CAAC;AAEjB,EAAA;EAEA,oBACES,GAAA,CAACK,MAAM,EAAA;IACLC,EAAE,EAAA,IAAA;AACFJ,IAAAA,IAAI,EAAC,IAAI;AACTC,IAAAA,QAAQ,EAAEvB,eAAe,CAACkB,IAAI,CAAE;AAChC,IAAA,YAAA,EAAYN,SAAU;AACtBE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,QAAQ,EAAEA,QAAS;IACnBU,QAAQ,EAAEhB,IAAI,GAAG;AAAEiB,MAAAA,IAAI,EAAE,MAAM;AAAEvB,MAAAA,KAAK,EAAEM;AAAI,KAAE,GAAGQ,SAAU;AAC3D,IAAA,aAAA,EAAaN,UAAW;AACxBG,IAAAA,OAAO,EAAEA,OAAQ;AAAAQ,IAAAA,QAAA,EAEhBd;AAAK,GACA,CAAC;AAEb;;"}
@@ -1,74 +0,0 @@
1
- .wds-card-container {
2
- /**
3
- * There is no shadow or elevation token in @transferwise/neptune-tokens, so the active
4
- * spotlight's resting shadow is component-scoped for now, the way PromoCard scopes
5
- * `--Card-box-shadow`. The value is the "Module shadow" effect style from Figma: `#0e0f0c` at
6
- * 4%, kept literal so it doesn't drift with a theme's tokens. Collapses to a token reference
7
- * once one is minted.
8
- */
9
- --CardContainer-shadow-color: rgba(14, 15, 12, 0.04);
10
- --CardContainer-shadow: 0 2px 12px var(--CardContainer-shadow-color), 0 2px 32px var(--CardContainer-shadow-color);
11
- --CardContainer-background-color: var(--color-background-screen);
12
- --CardContainer-border-color: var(--color-border-neutral);
13
- --CardContainer-border-radius: var(--radius-large);
14
- --CardContainer-padding-block: var(--size-8);
15
- --CardContainer-padding-inline: var(--size-8);
16
- background-color: var(--CardContainer-background-color);
17
- border: 1px solid var(--CardContainer-border-color);
18
- border-radius: var(--CardContainer-border-radius);
19
- box-sizing: border-box;
20
- display: flex;
21
- flex-direction: column;
22
- padding-block: var(--CardContainer-padding-block);
23
- padding-inline: var(--CardContainer-padding-inline);
24
- inline-size: 100%;
25
- }
26
- @media (min-width: 840px) {
27
- .wds-card-container {
28
- --CardContainer-padding-block: var(--size-16);
29
- --CardContainer-padding-inline: var(--size-16);
30
- }
31
- }
32
- .wds-card-container--padding-none {
33
- --CardContainer-padding-block: 0;
34
- --CardContainer-padding-inline: 0;
35
- overflow: clip;
36
- }
37
- .wds-card-container--active {
38
- --CardContainer-background-color: var(--color-background-elevated);
39
- --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 25%, transparent);
40
- }
41
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--bright-green):not(.np-theme-personal--forest-green):not(.np-theme-business--dark):not(.np-theme-business--bright-green):not(.np-theme-business--forest-green):not(.np-theme-platform--forest-green) .wds-card-container--active {
42
- box-shadow: var(--CardContainer-shadow);
43
- }
44
- .wds-card-container--inactive {
45
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
46
- border-width: 0;
47
- padding-block: calc(var(--CardContainer-padding-block) + 1px);
48
- padding-inline: calc(var(--CardContainer-padding-inline) + 1px);
49
- position: relative;
50
- }
51
- .wds-card-container__border {
52
- container-type: size;
53
- inset: 0;
54
- pointer-events: none;
55
- position: absolute;
56
- }
57
- .wds-card-container__border svg {
58
- display: block;
59
- block-size: 100%;
60
- inline-size: 100%;
61
- }
62
- .wds-card-container__border rect {
63
- --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
64
- --CardContainer-border-stroke-radius: calc(min(var(--CardContainer-border-radius), 50cqh, 50cqw) - 0.5px);
65
- fill: none;
66
- block-size: calc(100% - 1px);
67
- rx: var(--CardContainer-border-stroke-radius);
68
- ry: var(--CardContainer-border-stroke-radius);
69
- stroke: var(--color-border-neutral);
70
- stroke-dasharray: var(--CardContainer-border-dash-size) var(--CardContainer-border-dash-size);
71
- inline-size: calc(100% - 1px);
72
- x: 0.5px;
73
- y: 0.5px;
74
- }
@@ -1,64 +0,0 @@
1
- .wds-card-widget {
2
- --CardWidget-inset: var(--size-8);
3
- --CardWidget-header-spacing: var(--size-8);
4
- --CardWidget-actions-gap: var(--size-8);
5
- }
6
- .wds-card-widget__header {
7
- align-items: center;
8
- -moz-column-gap: var(--size-24);
9
- column-gap: var(--size-24);
10
- container-type: inline-size;
11
- display: flex;
12
- flex-wrap: wrap;
13
- padding-inline-start: var(--CardWidget-inset);
14
- row-gap: var(--size-8);
15
- }
16
- .wds-card-widget__header:not(:last-child) {
17
- margin-block-end: var(--CardWidget-header-spacing);
18
- }
19
- .wds-card-widget__title {
20
- align-items: center;
21
- color: var(--color-content-secondary);
22
- display: grid;
23
- flex: 1 1 0;
24
- margin: 0;
25
- min-block-size: var(--size-32);
26
- }
27
- @container (width <= 360px) {
28
- .wds-card-widget__title {
29
- flex-basis: auto;
30
- }
31
- }
32
- .wds-card-widget__title-link.np-link {
33
- color: inherit;
34
- display: inline;
35
- font: inherit;
36
- letter-spacing: inherit;
37
- text-align: start;
38
- -webkit-text-decoration: none;
39
- text-decoration: none;
40
- }
41
- .wds-card-widget__title-link.np-link:hover,
42
- .wds-card-widget__title-link.np-link:focus-visible {
43
- -webkit-text-decoration: underline;
44
- text-decoration: underline;
45
- }
46
- .wds-card-widget__title-link.np-link .wds-card-widget__title-chevron {
47
- white-space: nowrap;
48
- }
49
- .wds-card-widget__title-link.np-link .wds-card-widget__title-chevron .tw-icon {
50
- display: inline-block;
51
- margin: 0;
52
- vertical-align: text-bottom;
53
- }
54
- .wds-card-widget__actions {
55
- align-self: start;
56
- align-items: center;
57
- display: flex;
58
- flex: none;
59
- gap: var(--CardWidget-actions-gap);
60
- margin-inline-start: auto;
61
- }
62
- .wds-card-widget--with-header .wds-card-widget__content {
63
- padding-inline: var(--CardWidget-inset);
64
- }
@@ -1,8 +0,0 @@
1
- import type { CardContainerProps } from './CardContainer.types';
2
- /**
3
- * A bounded surface that groups related content. It has no slots of its own: children are stacked
4
- * with no gap between them. For a card with a title and actions, use `CardWidget`.
5
- */
6
- declare const CardContainer: import("react").ForwardRefExoticComponent<CardContainerProps & import("react").RefAttributes<HTMLElement>>;
7
- export default CardContainer;
8
- //# sourceMappingURL=CardContainer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardContainer.d.ts","sourceRoot":"","sources":["../../../src/CardContainer/CardContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;;GAGG;AACH,QAAA,MAAM,aAAa,4GAyBlB,CAAC;AAIF,eAAe,aAAa,CAAC"}
@@ -1,44 +0,0 @@
1
- import type { HTMLAttributes, ReactNode } from 'react';
2
- /**
3
- * Highlights the card, matching `ListItem`'s `spotlight`.
4
- *
5
- * - `active` — live content the user can act on. Raised, with a soft shadow and a hairline border.
6
- * - `inactive` — a feature the user has not set up yet. Recessed, with a dashed stroke.
7
- *
8
- * Without a spotlight the card is flat, with a solid stroke, for content that is present but not
9
- * actionable.
10
- */
11
- export type CardContainerSpotlight = 'active' | 'inactive';
12
- /**
13
- * - `md` — 8px, and 16px from the `md` breakpoint up.
14
- * - `none` — content runs to the card's edges.
15
- */
16
- export type CardContainerPadding = 'md' | 'none';
17
- export interface CardContainerProps extends HTMLAttributes<HTMLElement> {
18
- /**
19
- * Highlights the card as live content (`active`) or as a feature not set up yet (`inactive`).
20
- * Leave unset for a flat card.
21
- * @default undefined
22
- */
23
- spotlight?: CardContainerSpotlight;
24
- /**
25
- * Space between the card's edge and its content. `none` lets content such as images or charts
26
- * run to the card's edges, clipped to its rounded corners. Anything clipped at the edges
27
- * includes focus rings, so use `none` for non-interactive content, and keep lists on `md`.
28
- * @default 'md'
29
- */
30
- padding?: CardContainerPadding;
31
- /**
32
- * Content, stacked with no gap.
33
- * @default undefined
34
- */
35
- children?: ReactNode;
36
- /**
37
- * Element rendered as the root.
38
- * @default 'section'
39
- */
40
- as?: 'section' | 'div' | 'article';
41
- className?: string;
42
- 'data-testid'?: string;
43
- }
44
- //# sourceMappingURL=CardContainer.types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardContainer.types.d.ts","sourceRoot":"","sources":["../../../src/CardContainer/CardContainer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;;;;;;;GAQG;AACH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE3D;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrE;;;;OAIG;IACH,SAAS,CAAC,EAAE,sBAAsB,CAAC;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAE/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IAEnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
@@ -1,3 +0,0 @@
1
- export declare const SampleContent: () => import("react").JSX.Element;
2
- export declare const CardsList: () => import("react").JSX.Element;
3
- //# sourceMappingURL=helpers.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/CardContainer/_stories/helpers.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,mCAKzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAoCrB,CAAC"}
@@ -1,3 +0,0 @@
1
- export { default } from './CardContainer';
2
- export type { CardContainerProps, CardContainerSpotlight, CardContainerPadding, } from './CardContainer.types';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CardContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC"}
@@ -1,8 +0,0 @@
1
- import type { CardWidgetProps } from './CardWidget.types';
2
- /**
3
- * A `CardContainer` with an optional header — a title, a title link and up to two actions — above
4
- * its content.
5
- */
6
- declare const CardWidget: import("react").ForwardRefExoticComponent<CardWidgetProps & import("react").RefAttributes<HTMLElement>>;
7
- export default CardWidget;
8
- //# sourceMappingURL=CardWidget.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardWidget.d.ts","sourceRoot":"","sources":["../../../src/CardWidget/CardWidget.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AA6C5E;;;GAGG;AACH,QAAA,MAAM,UAAU,yGAYf,CAAC;AAIF,eAAe,UAAU,CAAC"}