@transferwise/components 0.0.0-experimental-47052c9 → 0.0.0-experimental-b2b287d

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 (149) 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 -245
  45. package/build/styles/Snackbar/Snackbar.css +117 -54
  46. package/build/styles/main.css +116 -245
  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/FlowNavigation/_stories/FlowNavigation.CriticalBanner.docs.mdx +66 -0
  77. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx +2 -0
  78. package/src/Snackbar/Snackbar.css +117 -54
  79. package/src/Snackbar/Snackbar.less +139 -60
  80. package/src/Snackbar/Snackbar.messages.ts +9 -0
  81. package/src/Snackbar/Snackbar.test.tsx +989 -119
  82. package/src/Snackbar/Snackbar.tsx +208 -93
  83. package/src/Snackbar/Snackbar.types.ts +17 -0
  84. package/src/Snackbar/SnackbarContext.ts +2 -2
  85. package/src/Snackbar/SnackbarPortal.tsx +8 -0
  86. package/src/Snackbar/SnackbarProvider.test.tsx +783 -0
  87. package/src/Snackbar/SnackbarProvider.tsx +27 -19
  88. package/src/Snackbar/_stories/Snackbar.accessibility.docs.mdx +58 -0
  89. package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx +16 -8
  90. package/src/Snackbar/_stories/Snackbar.story.tsx +388 -61
  91. package/src/Snackbar/_stories/Snackbar.test.story.tsx +171 -47
  92. package/src/Snackbar/constants.ts +10 -0
  93. package/src/Snackbar/index.ts +1 -1
  94. package/src/Snackbar/useSnackbarAutoDismiss.ts +74 -0
  95. package/src/Snackbar/useSnackbarManager.ts +169 -0
  96. package/src/Snackbar/useSnackbarSwipeDismiss.ts +169 -0
  97. package/src/i18n/en.json +1 -0
  98. package/src/index.ts +1 -14
  99. package/src/main.css +116 -245
  100. package/src/main.less +0 -2
  101. package/build/CardContainer/CardContainer.js +0 -34
  102. package/build/CardContainer/CardContainer.js.map +0 -1
  103. package/build/CardContainer/CardContainer.mjs +0 -30
  104. package/build/CardContainer/CardContainer.mjs.map +0 -1
  105. package/build/CardWidget/CardWidget.js +0 -98
  106. package/build/CardWidget/CardWidget.js.map +0 -1
  107. package/build/CardWidget/CardWidget.mjs +0 -94
  108. package/build/CardWidget/CardWidget.mjs.map +0 -1
  109. package/build/CardWidget/CardWidgetAction.js +0 -73
  110. package/build/CardWidget/CardWidgetAction.js.map +0 -1
  111. package/build/CardWidget/CardWidgetAction.mjs +0 -68
  112. package/build/CardWidget/CardWidgetAction.mjs.map +0 -1
  113. package/build/styles/CardContainer/CardContainer.css +0 -108
  114. package/build/styles/CardWidget/CardWidget.css +0 -84
  115. package/build/types/CardContainer/CardContainer.d.ts +0 -8
  116. package/build/types/CardContainer/CardContainer.d.ts.map +0 -1
  117. package/build/types/CardContainer/CardContainer.types.d.ts +0 -53
  118. package/build/types/CardContainer/CardContainer.types.d.ts.map +0 -1
  119. package/build/types/CardContainer/_stories/helpers.d.ts +0 -3
  120. package/build/types/CardContainer/_stories/helpers.d.ts.map +0 -1
  121. package/build/types/CardContainer/index.d.ts +0 -3
  122. package/build/types/CardContainer/index.d.ts.map +0 -1
  123. package/build/types/CardWidget/CardWidget.d.ts +0 -10
  124. package/build/types/CardWidget/CardWidget.d.ts.map +0 -1
  125. package/build/types/CardWidget/CardWidget.types.d.ts +0 -55
  126. package/build/types/CardWidget/CardWidget.types.d.ts.map +0 -1
  127. package/build/types/CardWidget/CardWidgetAction.d.ts +0 -54
  128. package/build/types/CardWidget/CardWidgetAction.d.ts.map +0 -1
  129. package/build/types/CardWidget/index.d.ts +0 -4
  130. package/build/types/CardWidget/index.d.ts.map +0 -1
  131. package/src/CardContainer/CardContainer.css +0 -108
  132. package/src/CardContainer/CardContainer.less +0 -171
  133. package/src/CardContainer/CardContainer.test.tsx +0 -150
  134. package/src/CardContainer/CardContainer.tsx +0 -51
  135. package/src/CardContainer/CardContainer.types.ts +0 -60
  136. package/src/CardContainer/_stories/CardContainer.story.tsx +0 -167
  137. package/src/CardContainer/_stories/CardContainer.test.story.tsx +0 -103
  138. package/src/CardContainer/_stories/helpers.tsx +0 -50
  139. package/src/CardContainer/index.ts +0 -6
  140. package/src/CardWidget/CardWidget.css +0 -84
  141. package/src/CardWidget/CardWidget.less +0 -110
  142. package/src/CardWidget/CardWidget.test.tsx +0 -222
  143. package/src/CardWidget/CardWidget.tsx +0 -83
  144. package/src/CardWidget/CardWidget.types.ts +0 -63
  145. package/src/CardWidget/CardWidgetAction.tsx +0 -128
  146. package/src/CardWidget/_stories/CardWidget.story.tsx +0 -238
  147. package/src/CardWidget/_stories/CardWidget.test.story.tsx +0 -350
  148. package/src/CardWidget/index.ts +0 -3
  149. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.docs.mdx +0 -122
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardContainer.mjs","sources":["../../src/CardContainer/CardContainer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { CardContainerProps } from './CardContainer.types';\n\n/**\n * A bounded surface that groups related content. It has no slots of its own: children are stacked\n * with no gap between them. For a card with a title and actions, use `CardWidget`.\n */\nconst CardContainer = forwardRef<HTMLElement, CardContainerProps>(\n (\n {\n spotlight,\n padding = 'md',\n interactive = false,\n children,\n as: Element = 'section',\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <Element\n ref={ref as React.Ref<HTMLElement & HTMLDivElement>}\n className={clsx(\n 'wds-card-container',\n spotlight && `wds-card-container--${spotlight}`,\n padding === 'none' && 'wds-card-container--padding-none',\n interactive && 'wds-card-container--interactive',\n className,\n )}\n {...props}\n >\n {children}\n\n {spotlight === 'inactive' && (\n <span aria-hidden=\"true\" className=\"wds-card-container__border\">\n <svg>\n <rect />\n </svg>\n </span>\n )}\n </Element>\n );\n },\n);\n\nCardContainer.displayName = 'CardContainer';\n\nexport default CardContainer;\n"],"names":["CardContainer","forwardRef","spotlight","padding","interactive","children","as","Element","className","props","ref","_jsxs","clsx","_jsx","displayName"],"mappings":";;;;AASA,MAAMA,aAAa,gBAAGC,UAAU,CAC9B,CACE;EACEC,SAAS;AACTC,EAAAA,OAAO,GAAG,IAAI;AACdC,EAAAA,WAAW,GAAG,KAAK;EACnBC,QAAQ;EACRC,EAAE,EAAEC,OAAO,GAAG,SAAS;EACvBC,SAAS;EACT,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;EACF,oBACEC,IAAA,CAACJ,OAAO,EAAA;AACNG,IAAAA,GAAG,EAAEA,GAA+C;IACpDF,SAAS,EAAEI,IAAI,CACb,oBAAoB,EACpBV,SAAS,IAAI,CAAA,oBAAA,EAAuBA,SAAS,CAAA,CAAE,EAC/CC,OAAO,KAAK,MAAM,IAAI,kCAAkC,EACxDC,WAAW,IAAI,iCAAiC,EAChDI,SAAS,CACT;AAAA,IAAA,GACEC,KAAK;AAAAJ,IAAAA,QAAA,GAERA,QAAQ,EAERH,SAAS,KAAK,UAAU,iBACvBW,GAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,MAAM;AAACL,MAAAA,SAAS,EAAC,4BAA4B;AAAAH,MAAAA,QAAA,eAC7DQ,GAAA,CAAA,KAAA,EAAA;QAAAR,QAAA,eACEQ,GAAA,CAAA,MAAA,EAAA,EAAK;OACF;AACP,KAAM,CACP;AAAA,GACM,CAAC;AAEd,CAAC;AAGHb,aAAa,CAACc,WAAW,GAAG,eAAe;;"}
@@ -1,98 +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. The card shows as hovered or pressed while the title link is, and as hovered while
73
- * the link has keyboard focus. Hovering or pressing the rest of the card, or its actions, leaves it
74
- * at rest.
75
- */
76
- const CardWidget = /*#__PURE__*/React.forwardRef(({
77
- header,
78
- children,
79
- className,
80
- ...props
81
- }, ref) => /*#__PURE__*/jsxRuntime.jsxs(CardContainer.default, {
82
- ref: ref,
83
- className: clsx.clsx('wds-card-widget', 'wds-card-widget--interactive', header && 'wds-card-widget--with-header', className),
84
- ...props,
85
- // The widget's states follow its title link alone, so the card's own are left off.
86
- interactive: false,
87
- padding: "md",
88
- children: [header && /*#__PURE__*/jsxRuntime.jsx(CardWidgetHeaderComponent, {
89
- ...header
90
- }), children != null && /*#__PURE__*/jsxRuntime.jsx("div", {
91
- className: "wds-card-widget__content",
92
- children: children
93
- })]
94
- }));
95
- CardWidget.displayName = 'CardWidget';
96
-
97
- exports.default = CardWidget;
98
- //# 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. The card shows as hovered or pressed while the title link is, and as hovered while\n * the link has keyboard focus. Hovering or pressing the rest of the card, or its actions, leaves it\n * at rest.\n */\nconst CardWidget = forwardRef<HTMLElement, CardWidgetProps>(\n ({ header, children, className, ...props }, ref) => (\n <CardContainer\n ref={ref}\n className={clsx(\n 'wds-card-widget',\n 'wds-card-widget--interactive',\n header && 'wds-card-widget--with-header',\n className,\n )}\n {...props}\n // The widget's states follow its title link alone, so the card's own are left off.\n interactive={false}\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","interactive","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;;;;;AAKG;AACH,MAAMuB,UAAU,gBAAGC,gBAAU,CAC3B,CAAC;EAAEC,MAAM;EAAEb,QAAQ;EAAED,SAAS;EAAE,GAAGe;CAAO,EAAEC,GAAG,kBAC7CjB,eAAA,CAACkB,qBAAa,EAAA;AACZD,EAAAA,GAAG,EAAEA,GAAI;AACThB,EAAAA,SAAS,EAAEkB,SAAI,CACb,iBAAiB,EACjB,8BAA8B,EAC9BJ,MAAM,IAAI,8BAA8B,EACxCd,SAAS,CACT;AAAA,EAAA,GACEe,KAAK;AACT;AACAI,EAAAA,WAAW,EAAE,KAAM;AACnBC,EAAAA,OAAO,EAAC,IAAI;AAAAnB,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,CAACS,WAAW,GAAG,YAAY;;"}
@@ -1,94 +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. The card shows as hovered or pressed while the title link is, and as hovered while
69
- * the link has keyboard focus. Hovering or pressing the rest of the card, or its actions, leaves it
70
- * at rest.
71
- */
72
- const CardWidget = /*#__PURE__*/forwardRef(({
73
- header,
74
- children,
75
- className,
76
- ...props
77
- }, ref) => /*#__PURE__*/jsxs(CardContainer, {
78
- ref: ref,
79
- className: clsx('wds-card-widget', 'wds-card-widget--interactive', header && 'wds-card-widget--with-header', className),
80
- ...props,
81
- // The widget's states follow its title link alone, so the card's own are left off.
82
- interactive: false,
83
- padding: "md",
84
- children: [header && /*#__PURE__*/jsx(CardWidgetHeaderComponent, {
85
- ...header
86
- }), children != null && /*#__PURE__*/jsx("div", {
87
- className: "wds-card-widget__content",
88
- children: children
89
- })]
90
- }));
91
- CardWidget.displayName = 'CardWidget';
92
-
93
- export { CardWidget as default };
94
- //# 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. The card shows as hovered or pressed while the title link is, and as hovered while\n * the link has keyboard focus. Hovering or pressing the rest of the card, or its actions, leaves it\n * at rest.\n */\nconst CardWidget = forwardRef<HTMLElement, CardWidgetProps>(\n ({ header, children, className, ...props }, ref) => (\n <CardContainer\n ref={ref}\n className={clsx(\n 'wds-card-widget',\n 'wds-card-widget--interactive',\n header && 'wds-card-widget--with-header',\n className,\n )}\n {...props}\n // The widget's states follow its title link alone, so the card's own are left off.\n interactive={false}\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","interactive","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;;;;;AAKG;AACH,MAAMuB,UAAU,gBAAGC,UAAU,CAC3B,CAAC;EAAEC,MAAM;EAAEb,QAAQ;EAAED,SAAS;EAAE,GAAGe;CAAO,EAAEC,GAAG,kBAC7CjB,IAAA,CAACkB,aAAa,EAAA;AACZD,EAAAA,GAAG,EAAEA,GAAI;AACThB,EAAAA,SAAS,EAAEkB,IAAI,CACb,iBAAiB,EACjB,8BAA8B,EAC9BJ,MAAM,IAAI,8BAA8B,EACxCd,SAAS,CACT;AAAA,EAAA,GACEe,KAAK;AACT;AACAI,EAAAA,WAAW,EAAE,KAAM;AACnBC,EAAAA,OAAO,EAAC,IAAI;AAAAnB,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,CAACS,WAAW,GAAG,YAAY;;"}
@@ -1,73 +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
- // The v2 resolver drops `Button`'s own `button` default, so an action would submit a form.
63
- ,
64
- type: "button",
65
- "data-testid": dataTestId,
66
- onClick: onClick,
67
- children: label
68
- });
69
- };
70
-
71
- exports.default = CardWidgetAction;
72
- exports.isCardWidgetActionButton = isCardWidgetActionButton;
73
- //# 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 // The v2 resolver drops `Button`'s own `button` default, so an action would submit a form.\n type=\"button\"\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;AACjD;AAAA;AACAS,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,aAAA,EAAaf,UAAW;AACxBG,IAAAA,OAAO,EAAEA,OAAQ;AAAAQ,IAAAA,QAAA,EAEhBd;AAAK,GACA,CAAC;AAEb;;;"}
@@ -1,68 +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
- // The v2 resolver drops `Button`'s own `button` default, so an action would submit a form.
59
- ,
60
- type: "button",
61
- "data-testid": dataTestId,
62
- onClick: onClick,
63
- children: label
64
- });
65
- };
66
-
67
- export { CardWidgetAction as default, isCardWidgetActionButton };
68
- //# 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 // The v2 resolver drops `Button`'s own `button` default, so an action would submit a form.\n type=\"button\"\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;AACjD;AAAA;AACAS,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,aAAA,EAAaf,UAAW;AACxBG,IAAAA,OAAO,EAAEA,OAAQ;AAAAQ,IAAAA,QAAA,EAEhBd;AAAK,GACA,CAAC;AAEb;;"}
@@ -1,108 +0,0 @@
1
- .wds-card-container {
2
- --CardContainer-shadow: var(--CardContainer-theme-shadow, none);
3
- --CardContainer-background-color: var(--color-background-screen);
4
- --CardContainer-border-color: var(--color-border-neutral);
5
- --CardContainer-border-radius: var(--radius-large);
6
- --CardContainer-padding-block: var(--size-8);
7
- --CardContainer-padding-inline: var(--size-8);
8
- background-color: var(--CardContainer-background-color);
9
- border: 1px solid var(--CardContainer-border-color);
10
- border-radius: var(--CardContainer-border-radius);
11
- box-sizing: border-box;
12
- display: flex;
13
- flex-direction: column;
14
- padding-block: var(--CardContainer-padding-block);
15
- padding-inline: var(--CardContainer-padding-inline);
16
- inline-size: 100%;
17
- }
18
- @media (min-width: 840px) {
19
- .wds-card-container {
20
- --CardContainer-padding-block: var(--size-16);
21
- --CardContainer-padding-inline: var(--size-16);
22
- }
23
- }
24
- .wds-card-container--padding-none {
25
- --CardContainer-padding-block: 0px;
26
- --CardContainer-padding-inline: 0px;
27
- overflow: clip;
28
- }
29
- .wds-card-container--active {
30
- --CardContainer-background-color: var(--color-background-elevated);
31
- --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 25%, transparent);
32
- box-shadow: var(--CardContainer-shadow);
33
- }
34
- .wds-card-container--inactive {
35
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
36
- border-width: 0;
37
- padding-block: calc(var(--CardContainer-padding-block) + 1px);
38
- padding-inline: calc(var(--CardContainer-padding-inline) + 1px);
39
- position: relative;
40
- }
41
- .wds-card-container--interactive:has(
42
- > a[href]:hover,
43
- > button:enabled:hover,
44
- > a[href]:focus-visible,
45
- > button:enabled:focus-visible
46
- ).wds-card-container--active {
47
- --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
48
- }
49
- .wds-card-container--interactive:has(
50
- > a[href]:hover,
51
- > button:enabled:hover,
52
- > a[href]:focus-visible,
53
- > button:enabled:focus-visible
54
- ).wds-card-container--inactive {
55
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
56
- }
57
- .wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--active {
58
- --CardContainer-border-color: var(--color-border-neutral);
59
- }
60
- .wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--inactive {
61
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
62
- }
63
- .wds-card-container__border {
64
- container-type: size;
65
- inset: 0;
66
- pointer-events: none;
67
- position: absolute;
68
- }
69
- .wds-card-container__border svg {
70
- display: block;
71
- block-size: 100%;
72
- inline-size: 100%;
73
- }
74
- .wds-card-container__border rect {
75
- --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
76
- --CardContainer-border-stroke-radius: calc(min(var(--CardContainer-border-radius), 50cqh, 50cqw) - 0.5px);
77
- fill: none;
78
- block-size: calc(100% - 1px);
79
- rx: var(--CardContainer-border-stroke-radius);
80
- ry: var(--CardContainer-border-stroke-radius);
81
- stroke: var(--color-border-neutral);
82
- stroke-dasharray: var(--CardContainer-border-dash-size) var(--CardContainer-border-dash-size);
83
- inline-size: calc(100% - 1px);
84
- x: 0.5px;
85
- y: 0.5px;
86
- }
87
- /**
88
- * The active spotlight's resting shadow, only designed for the light themes. Set on every theme
89
- * root, as a nested ThemeProvider renders its own, so a card follows its nearest theme: a dark or
90
- * green provider inside a light one turns the shadow off.
91
- *
92
- * There is no shadow or elevation token in @transferwise/neptune-tokens, so the value is
93
- * component-scoped for now, the way PromoCard scopes `--Card-box-shadow`. It is the "Card Active
94
- * shadow" effect style from Figma: `#0e0f0c` at 4%, kept literal so it doesn't drift with a
95
- * theme's tokens. Collapses to a token reference once one is minted.
96
- */
97
- .np-theme-personal {
98
- --CardContainer-theme-shadow: 0 2px 12px rgba(14, 15, 12, 0.04), 0 2px 32px rgba(14, 15, 12, 0.04);
99
- }
100
- .np-theme-personal.np-theme-personal--dark,
101
- .np-theme-personal.np-theme-personal--bright-green,
102
- .np-theme-personal.np-theme-personal--forest-green,
103
- .np-theme-personal.np-theme-business--dark,
104
- .np-theme-personal.np-theme-business--bright-green,
105
- .np-theme-personal.np-theme-business--forest-green,
106
- .np-theme-personal.np-theme-platform--forest-green {
107
- --CardContainer-theme-shadow: none;
108
- }
@@ -1,84 +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 + .wds-card-widget__content {
17
- margin-block-start: 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
- justify-self: start;
37
- letter-spacing: inherit;
38
- text-align: start;
39
- -webkit-text-decoration: none;
40
- text-decoration: none;
41
- }
42
- .wds-card-widget__title-link.np-link:hover,
43
- .wds-card-widget__title-link.np-link:focus-visible {
44
- -webkit-text-decoration: underline;
45
- text-decoration: underline;
46
- }
47
- .wds-card-widget__title-link.np-link .tw-icon {
48
- display: inline-block;
49
- vertical-align: text-bottom;
50
- }
51
- .wds-card-widget__title-link.np-link .wds-card-widget__title-chevron {
52
- white-space: nowrap;
53
- }
54
- .wds-card-widget__title-link.np-link .wds-card-widget__title-chevron .tw-icon {
55
- margin: 0;
56
- }
57
- .wds-card-widget__actions {
58
- align-self: start;
59
- align-items: center;
60
- display: flex;
61
- flex: none;
62
- gap: var(--CardWidget-actions-gap);
63
- }
64
- .wds-card-widget--with-header .wds-card-widget__content {
65
- padding-inline: var(--CardWidget-inset);
66
- }
67
- .wds-card-widget--interactive:has(
68
- .wds-card-widget__title-link:hover,
69
- .wds-card-widget__title-link:focus-visible
70
- ).wds-card-container--active {
71
- --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
72
- }
73
- .wds-card-widget--interactive:has(
74
- .wds-card-widget__title-link:hover,
75
- .wds-card-widget__title-link:focus-visible
76
- ).wds-card-container--inactive {
77
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
78
- }
79
- .wds-card-widget--interactive:has(.wds-card-widget__title-link:active).wds-card-container--active {
80
- --CardContainer-border-color: var(--color-border-neutral);
81
- }
82
- .wds-card-widget--interactive:has(.wds-card-widget__title-link:active).wds-card-container--inactive {
83
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
84
- }
@@ -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,4GAqClB,CAAC;AAIF,eAAe,aAAa,CAAC"}