@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.
- package/build/Snackbar/Snackbar.js +178 -102
- package/build/Snackbar/Snackbar.js.map +1 -1
- package/build/Snackbar/Snackbar.messages.js +14 -0
- package/build/Snackbar/Snackbar.messages.js.map +1 -0
- package/build/Snackbar/Snackbar.messages.mjs +10 -0
- package/build/Snackbar/Snackbar.messages.mjs.map +1 -0
- package/build/Snackbar/Snackbar.mjs +180 -101
- package/build/Snackbar/Snackbar.mjs.map +1 -1
- package/build/Snackbar/SnackbarContext.js.map +1 -1
- package/build/Snackbar/SnackbarContext.mjs.map +1 -1
- package/build/Snackbar/SnackbarPortal.js +12 -0
- package/build/Snackbar/SnackbarPortal.js.map +1 -0
- package/build/Snackbar/SnackbarPortal.mjs +8 -0
- package/build/Snackbar/SnackbarPortal.mjs.map +1 -0
- package/build/Snackbar/SnackbarProvider.js +24 -28
- package/build/Snackbar/SnackbarProvider.js.map +1 -1
- package/build/Snackbar/SnackbarProvider.mjs +25 -29
- package/build/Snackbar/SnackbarProvider.mjs.map +1 -1
- package/build/Snackbar/constants.js +17 -0
- package/build/Snackbar/constants.js.map +1 -0
- package/build/Snackbar/constants.mjs +11 -0
- package/build/Snackbar/constants.mjs.map +1 -0
- package/build/Snackbar/useSnackbarAutoDismiss.js +66 -0
- package/build/Snackbar/useSnackbarAutoDismiss.js.map +1 -0
- package/build/Snackbar/useSnackbarAutoDismiss.mjs +62 -0
- package/build/Snackbar/useSnackbarAutoDismiss.mjs.map +1 -0
- package/build/Snackbar/useSnackbarManager.js +153 -0
- package/build/Snackbar/useSnackbarManager.js.map +1 -0
- package/build/Snackbar/useSnackbarManager.mjs +149 -0
- package/build/Snackbar/useSnackbarManager.mjs.map +1 -0
- package/build/Snackbar/useSnackbarSwipeDismiss.js +135 -0
- package/build/Snackbar/useSnackbarSwipeDismiss.js.map +1 -0
- package/build/Snackbar/useSnackbarSwipeDismiss.mjs +131 -0
- package/build/Snackbar/useSnackbarSwipeDismiss.mjs.map +1 -0
- package/build/i18n/en.json +1 -0
- package/build/i18n/en.json.js +1 -0
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +1 -0
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/index.js +0 -4
- package/build/index.js.map +1 -1
- package/build/index.mjs +0 -2
- package/build/index.mjs.map +1 -1
- package/build/main.css +116 -245
- package/build/styles/Snackbar/Snackbar.css +117 -54
- package/build/styles/main.css +116 -245
- package/build/types/Snackbar/Snackbar.d.ts +55 -9
- package/build/types/Snackbar/Snackbar.d.ts.map +1 -1
- package/build/types/Snackbar/Snackbar.messages.d.ts +9 -0
- package/build/types/Snackbar/Snackbar.messages.d.ts.map +1 -0
- package/build/types/Snackbar/Snackbar.types.d.ts +12 -0
- package/build/types/Snackbar/Snackbar.types.d.ts.map +1 -0
- package/build/types/Snackbar/SnackbarContext.d.ts +2 -2
- package/build/types/Snackbar/SnackbarContext.d.ts.map +1 -1
- package/build/types/Snackbar/SnackbarPortal.d.ts +4 -0
- package/build/types/Snackbar/SnackbarPortal.d.ts.map +1 -0
- package/build/types/Snackbar/SnackbarProvider.d.ts +7 -0
- package/build/types/Snackbar/SnackbarProvider.d.ts.map +1 -1
- package/build/types/Snackbar/constants.d.ts +9 -0
- package/build/types/Snackbar/constants.d.ts.map +1 -0
- package/build/types/Snackbar/index.d.ts +1 -1
- package/build/types/Snackbar/index.d.ts.map +1 -1
- package/build/types/Snackbar/useSnackbar.d.ts +1 -1
- package/build/types/Snackbar/useSnackbar.d.ts.map +1 -1
- package/build/types/Snackbar/useSnackbarAutoDismiss.d.ts +13 -0
- package/build/types/Snackbar/useSnackbarAutoDismiss.d.ts.map +1 -0
- package/build/types/Snackbar/useSnackbarManager.d.ts +20 -0
- package/build/types/Snackbar/useSnackbarManager.d.ts.map +1 -0
- package/build/types/Snackbar/useSnackbarSwipeDismiss.d.ts +22 -0
- package/build/types/Snackbar/useSnackbarSwipeDismiss.d.ts.map +1 -0
- package/build/types/index.d.ts +1 -5
- package/build/types/index.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +2 -0
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/FlowNavigation/_stories/FlowNavigation.CriticalBanner.docs.mdx +66 -0
- package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx +2 -0
- package/src/Snackbar/Snackbar.css +117 -54
- package/src/Snackbar/Snackbar.less +139 -60
- package/src/Snackbar/Snackbar.messages.ts +9 -0
- package/src/Snackbar/Snackbar.test.tsx +989 -119
- package/src/Snackbar/Snackbar.tsx +208 -93
- package/src/Snackbar/Snackbar.types.ts +17 -0
- package/src/Snackbar/SnackbarContext.ts +2 -2
- package/src/Snackbar/SnackbarPortal.tsx +8 -0
- package/src/Snackbar/SnackbarProvider.test.tsx +783 -0
- package/src/Snackbar/SnackbarProvider.tsx +27 -19
- package/src/Snackbar/_stories/Snackbar.accessibility.docs.mdx +58 -0
- package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx +16 -8
- package/src/Snackbar/_stories/Snackbar.story.tsx +388 -61
- package/src/Snackbar/_stories/Snackbar.test.story.tsx +171 -47
- package/src/Snackbar/constants.ts +10 -0
- package/src/Snackbar/index.ts +1 -1
- package/src/Snackbar/useSnackbarAutoDismiss.ts +74 -0
- package/src/Snackbar/useSnackbarManager.ts +169 -0
- package/src/Snackbar/useSnackbarSwipeDismiss.ts +169 -0
- package/src/i18n/en.json +1 -0
- package/src/index.ts +1 -14
- package/src/main.css +116 -245
- package/src/main.less +0 -2
- package/build/CardContainer/CardContainer.js +0 -34
- package/build/CardContainer/CardContainer.js.map +0 -1
- package/build/CardContainer/CardContainer.mjs +0 -30
- package/build/CardContainer/CardContainer.mjs.map +0 -1
- package/build/CardWidget/CardWidget.js +0 -98
- package/build/CardWidget/CardWidget.js.map +0 -1
- package/build/CardWidget/CardWidget.mjs +0 -94
- package/build/CardWidget/CardWidget.mjs.map +0 -1
- package/build/CardWidget/CardWidgetAction.js +0 -73
- package/build/CardWidget/CardWidgetAction.js.map +0 -1
- package/build/CardWidget/CardWidgetAction.mjs +0 -68
- package/build/CardWidget/CardWidgetAction.mjs.map +0 -1
- package/build/styles/CardContainer/CardContainer.css +0 -108
- package/build/styles/CardWidget/CardWidget.css +0 -84
- package/build/types/CardContainer/CardContainer.d.ts +0 -8
- package/build/types/CardContainer/CardContainer.d.ts.map +0 -1
- package/build/types/CardContainer/CardContainer.types.d.ts +0 -53
- package/build/types/CardContainer/CardContainer.types.d.ts.map +0 -1
- package/build/types/CardContainer/_stories/helpers.d.ts +0 -3
- package/build/types/CardContainer/_stories/helpers.d.ts.map +0 -1
- package/build/types/CardContainer/index.d.ts +0 -3
- package/build/types/CardContainer/index.d.ts.map +0 -1
- package/build/types/CardWidget/CardWidget.d.ts +0 -10
- package/build/types/CardWidget/CardWidget.d.ts.map +0 -1
- package/build/types/CardWidget/CardWidget.types.d.ts +0 -55
- package/build/types/CardWidget/CardWidget.types.d.ts.map +0 -1
- package/build/types/CardWidget/CardWidgetAction.d.ts +0 -54
- package/build/types/CardWidget/CardWidgetAction.d.ts.map +0 -1
- package/build/types/CardWidget/index.d.ts +0 -4
- package/build/types/CardWidget/index.d.ts.map +0 -1
- package/src/CardContainer/CardContainer.css +0 -108
- package/src/CardContainer/CardContainer.less +0 -171
- package/src/CardContainer/CardContainer.test.tsx +0 -150
- package/src/CardContainer/CardContainer.tsx +0 -51
- package/src/CardContainer/CardContainer.types.ts +0 -60
- package/src/CardContainer/_stories/CardContainer.story.tsx +0 -167
- package/src/CardContainer/_stories/CardContainer.test.story.tsx +0 -103
- package/src/CardContainer/_stories/helpers.tsx +0 -50
- package/src/CardContainer/index.ts +0 -6
- package/src/CardWidget/CardWidget.css +0 -84
- package/src/CardWidget/CardWidget.less +0 -110
- package/src/CardWidget/CardWidget.test.tsx +0 -222
- package/src/CardWidget/CardWidget.tsx +0 -83
- package/src/CardWidget/CardWidget.types.ts +0 -63
- package/src/CardWidget/CardWidgetAction.tsx +0 -128
- package/src/CardWidget/_stories/CardWidget.story.tsx +0 -238
- package/src/CardWidget/_stories/CardWidget.test.story.tsx +0 -350
- package/src/CardWidget/index.ts +0 -3
- 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"}
|