@carbon/ibm-products 2.43.2-canary.105 → 2.43.2-canary.109
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/es/components/Card/Card.d.ts +68 -2
- package/es/components/Card/Card.js +28 -35
- package/es/components/Card/CardFooter.d.ts +51 -48
- package/es/components/Card/CardFooter.js +4 -2
- package/es/components/Card/CardHeader.d.ts +67 -49
- package/es/components/Card/CardHeader.js +4 -2
- package/es/components/GetStartedCard/GetStartedCard.d.ts +6 -7
- package/es/components/GetStartedCard/GetStartedCard.js +2 -2
- package/es/components/UserAvatar/UserAvatar.d.ts +59 -1
- package/es/components/UserAvatar/UserAvatar.js +7 -23
- package/lib/components/Card/Card.d.ts +68 -2
- package/lib/components/Card/Card.js +28 -35
- package/lib/components/Card/CardFooter.d.ts +51 -48
- package/lib/components/Card/CardFooter.js +4 -2
- package/lib/components/Card/CardHeader.d.ts +67 -49
- package/lib/components/Card/CardHeader.js +4 -2
- package/lib/components/GetStartedCard/GetStartedCard.d.ts +6 -7
- package/lib/components/GetStartedCard/GetStartedCard.js +2 -2
- package/lib/components/UserAvatar/UserAvatar.d.ts +59 -1
- package/lib/components/UserAvatar/UserAvatar.js +7 -23
- package/package.json +2 -2
@@ -1,2 +1,68 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
import React, { PropsWithChildren, ReactNode } from 'react';
|
2
|
+
type ActionIcon = {
|
3
|
+
id?: string;
|
4
|
+
icon?: () => ReactNode;
|
5
|
+
onKeydown?: () => void;
|
6
|
+
onClick?: () => void;
|
7
|
+
iconDescription?: string;
|
8
|
+
href?: string;
|
9
|
+
};
|
10
|
+
type OverflowActions = {
|
11
|
+
id?: string;
|
12
|
+
itemText?: string;
|
13
|
+
onClick?: () => void;
|
14
|
+
onKeydown?: () => void;
|
15
|
+
};
|
16
|
+
type Metadata = {
|
17
|
+
id?: string;
|
18
|
+
icon?: () => ReactNode;
|
19
|
+
iconDescription?: string;
|
20
|
+
onClick?: () => void;
|
21
|
+
href?: string;
|
22
|
+
};
|
23
|
+
interface CardProp extends PropsWithChildren {
|
24
|
+
actionIcons?: readonly ActionIcon[];
|
25
|
+
actionsPlacement?: 'top' | 'bottom';
|
26
|
+
children?: ReactNode;
|
27
|
+
className?: string;
|
28
|
+
clickZone?: 'one' | 'two' | 'three';
|
29
|
+
description?: ReactNode;
|
30
|
+
disabled?: boolean;
|
31
|
+
footerActionIcon?: React.ElementType;
|
32
|
+
getStarted?: boolean;
|
33
|
+
label?: ReactNode;
|
34
|
+
media?: ReactNode;
|
35
|
+
mediaPosition?: 'top' | 'left';
|
36
|
+
metadata?: readonly Metadata[];
|
37
|
+
onClick?: () => void;
|
38
|
+
onKeyDown?: () => void;
|
39
|
+
onPrimaryButtonClick?: () => void;
|
40
|
+
onSecondaryButtonClick?: () => void;
|
41
|
+
overflowActions?: readonly OverflowActions[];
|
42
|
+
overflowAriaLabel?: string;
|
43
|
+
pictogram?: () => ReactNode;
|
44
|
+
primaryButtonDisabled?: boolean;
|
45
|
+
primaryButtonHref?: string;
|
46
|
+
primaryButtonIcon?: React.ElementType;
|
47
|
+
primaryButtonKind?: 'primary' | 'ghost';
|
48
|
+
primaryButtonPlacement?: 'top' | 'bottom';
|
49
|
+
primaryButtonText?: string;
|
50
|
+
productive?: boolean;
|
51
|
+
secondaryButtonDisabled?: boolean;
|
52
|
+
secondaryButtonHref?: string;
|
53
|
+
secondaryButtonIcon?: React.ElementType;
|
54
|
+
secondaryButtonKind?: 'secondary' | 'ghost';
|
55
|
+
secondaryButtonPlacement?: 'top' | 'bottom';
|
56
|
+
secondaryButtonText?: string;
|
57
|
+
sequence?: number;
|
58
|
+
/**
|
59
|
+
* **Experimental?** For all cases a `Slug` component can be provided.
|
60
|
+
* Clickable tiles only accept a boolean value of true and display a hollow slug.
|
61
|
+
*/
|
62
|
+
slug?: ReactNode | boolean;
|
63
|
+
status?: 'complete' | 'incomplete';
|
64
|
+
title?: ReactNode;
|
65
|
+
titleSize?: 'default' | 'large';
|
66
|
+
}
|
67
|
+
export declare const Card: React.ForwardRefExoticComponent<CardProp & React.RefAttributes<HTMLDivElement>>;
|
68
|
+
export {};
|
@@ -20,32 +20,17 @@ var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "cla
|
|
20
20
|
_excluded2 = ["id"],
|
21
21
|
_excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
|
22
22
|
var componentName = 'Card';
|
23
|
-
|
24
|
-
// Default values for props
|
25
|
-
var defaults = {
|
26
|
-
actionIcons: Object.freeze([]),
|
27
|
-
actionsPlacement: 'bottom',
|
28
|
-
clickZone: 'one',
|
29
|
-
mediaPosition: 'top',
|
30
|
-
overflowActions: Object.freeze([]),
|
31
|
-
primaryButtonKind: 'primary',
|
32
|
-
primaryButtonPlacement: 'bottom',
|
33
|
-
productive: false,
|
34
|
-
secondaryButtonKind: 'secondary',
|
35
|
-
secondaryButtonPlacement: 'bottom',
|
36
|
-
titleSize: 'default'
|
37
|
-
};
|
38
23
|
var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
39
24
|
var _ref$actionIcons = _ref.actionIcons,
|
40
|
-
actionIcons = _ref$actionIcons === void 0 ?
|
25
|
+
actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
|
41
26
|
_ref$actionsPlacement = _ref.actionsPlacement,
|
42
|
-
actionsPlacement = _ref$actionsPlacement === void 0 ?
|
27
|
+
actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
|
43
28
|
_ref$metadata = _ref.metadata,
|
44
|
-
metadata = _ref$metadata === void 0 ?
|
29
|
+
metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
|
45
30
|
children = _ref.children,
|
46
31
|
className = _ref.className,
|
47
32
|
_ref$clickZone = _ref.clickZone,
|
48
|
-
clickZone = _ref$clickZone === void 0 ?
|
33
|
+
clickZone = _ref$clickZone === void 0 ? 'one' : _ref$clickZone,
|
49
34
|
description = _ref.description,
|
50
35
|
disabled = _ref.disabled,
|
51
36
|
footerActionIcon = _ref.footerActionIcon,
|
@@ -53,12 +38,12 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
53
38
|
label = _ref.label,
|
54
39
|
media = _ref.media,
|
55
40
|
_ref$mediaPosition = _ref.mediaPosition,
|
56
|
-
mediaPosition = _ref$mediaPosition === void 0 ?
|
41
|
+
mediaPosition = _ref$mediaPosition === void 0 ? 'top' : _ref$mediaPosition,
|
57
42
|
onClick = _ref.onClick,
|
58
43
|
onKeyDown = _ref.onKeyDown,
|
59
44
|
onPrimaryButtonClick = _ref.onPrimaryButtonClick,
|
60
45
|
_ref$overflowActions = _ref.overflowActions,
|
61
|
-
overflowActions = _ref$overflowActions === void 0 ?
|
46
|
+
overflowActions = _ref$overflowActions === void 0 ? Object.freeze([]) : _ref$overflowActions,
|
62
47
|
overflowAriaLabel = _ref.overflowAriaLabel,
|
63
48
|
onSecondaryButtonClick = _ref.onSecondaryButtonClick,
|
64
49
|
Pictogram = _ref.pictogram,
|
@@ -66,26 +51,26 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
66
51
|
primaryButtonHref = _ref.primaryButtonHref,
|
67
52
|
primaryButtonIcon = _ref.primaryButtonIcon,
|
68
53
|
_ref$primaryButtonKin = _ref.primaryButtonKind,
|
69
|
-
primaryButtonKind = _ref$primaryButtonKin === void 0 ?
|
54
|
+
primaryButtonKind = _ref$primaryButtonKin === void 0 ? 'primary' : _ref$primaryButtonKin,
|
70
55
|
_ref$primaryButtonPla = _ref.primaryButtonPlacement,
|
71
|
-
primaryButtonPlacement = _ref$primaryButtonPla === void 0 ?
|
56
|
+
primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? 'bottom' : _ref$primaryButtonPla,
|
72
57
|
primaryButtonText = _ref.primaryButtonText,
|
73
58
|
_ref$productive = _ref.productive,
|
74
|
-
productive = _ref$productive === void 0 ?
|
59
|
+
productive = _ref$productive === void 0 ? false : _ref$productive,
|
75
60
|
secondaryButtonDisabled = _ref.secondaryButtonDisabled,
|
76
61
|
secondaryButtonHref = _ref.secondaryButtonHref,
|
77
62
|
secondaryButtonIcon = _ref.secondaryButtonIcon,
|
78
63
|
_ref$secondaryButtonK = _ref.secondaryButtonKind,
|
79
|
-
secondaryButtonKind = _ref$secondaryButtonK === void 0 ?
|
64
|
+
secondaryButtonKind = _ref$secondaryButtonK === void 0 ? 'secondary' : _ref$secondaryButtonK,
|
80
65
|
_ref$secondaryButtonP = _ref.secondaryButtonPlacement,
|
81
|
-
secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ?
|
66
|
+
secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? 'bottom' : _ref$secondaryButtonP,
|
82
67
|
secondaryButtonText = _ref.secondaryButtonText,
|
83
68
|
slug = _ref.slug,
|
84
69
|
status = _ref.status,
|
85
70
|
sequence = _ref.sequence,
|
86
71
|
title = _ref.title,
|
87
72
|
_ref$titleSize = _ref.titleSize,
|
88
|
-
titleSize = _ref$titleSize === void 0 ?
|
73
|
+
titleSize = _ref$titleSize === void 0 ? 'default' : _ref$titleSize,
|
89
74
|
rest = _objectWithoutProperties(_ref, _excluded);
|
90
75
|
var getIcons = function getIcons() {
|
91
76
|
return getStarted ? metadata : actionIcons;
|
@@ -101,7 +86,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
101
86
|
onClick: onClick,
|
102
87
|
onKeyDown: onKeyDown,
|
103
88
|
role: 'button',
|
104
|
-
tabIndex:
|
89
|
+
tabIndex: 0
|
105
90
|
};
|
106
91
|
|
107
92
|
// actions can either be an overflow menu or series of icons
|
@@ -135,7 +120,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
135
120
|
return /*#__PURE__*/React__default.createElement("span", {
|
136
121
|
key: id,
|
137
122
|
className: "".concat(blockClass, "__icon")
|
138
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
123
|
+
}, Icon && /*#__PURE__*/React__default.createElement(Icon, {
|
139
124
|
"aria-label": iconDescription
|
140
125
|
}), iconDescription);
|
141
126
|
}
|
@@ -157,7 +142,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
157
142
|
className: "".concat(blockClass, "__icon"),
|
158
143
|
href: href,
|
159
144
|
onClick: onClick
|
160
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
145
|
+
}, Icon && /*#__PURE__*/React__default.createElement(Icon, {
|
161
146
|
"aria-label": iconDescription
|
162
147
|
}));
|
163
148
|
}
|
@@ -168,7 +153,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
168
153
|
onClick: onClick,
|
169
154
|
kind: "ghost",
|
170
155
|
size: "sm"
|
171
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
156
|
+
}, Icon && /*#__PURE__*/React__default.createElement(Icon, {
|
172
157
|
"aria-label": iconDescription
|
173
158
|
}));
|
174
159
|
});
|
@@ -265,6 +250,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
265
250
|
}, media)), hasBottomBar && /*#__PURE__*/React__default.createElement(CardFooter, getFooterProps())));
|
266
251
|
});
|
267
252
|
Card.propTypes = {
|
253
|
+
/**@ts-ignore */
|
268
254
|
actionIcons: PropTypes.arrayOf(PropTypes.shape({
|
269
255
|
id: PropTypes.string,
|
270
256
|
icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
@@ -277,13 +263,16 @@ Card.propTypes = {
|
|
277
263
|
children: PropTypes.node,
|
278
264
|
className: PropTypes.string,
|
279
265
|
clickZone: PropTypes.oneOf(['one', 'two', 'three']),
|
280
|
-
|
266
|
+
/**@ts-ignore */
|
267
|
+
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
281
268
|
disabled: PropTypes.bool,
|
269
|
+
/**@ts-ignore */
|
282
270
|
footerActionIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
283
271
|
getStarted: PropTypes.bool,
|
284
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.
|
272
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
285
273
|
media: PropTypes.node,
|
286
274
|
mediaPosition: PropTypes.oneOf(['top', 'left']),
|
275
|
+
/**@ts-ignore */
|
287
276
|
metadata: PropTypes.arrayOf(PropTypes.shape({
|
288
277
|
id: PropTypes.string,
|
289
278
|
icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
@@ -293,6 +282,7 @@ Card.propTypes = {
|
|
293
282
|
onKeyDown: PropTypes.func,
|
294
283
|
onPrimaryButtonClick: PropTypes.func,
|
295
284
|
onSecondaryButtonClick: PropTypes.func,
|
285
|
+
/**@ts-ignore */
|
296
286
|
overflowActions: PropTypes.arrayOf(PropTypes.shape({
|
297
287
|
id: PropTypes.string,
|
298
288
|
itemText: PropTypes.string,
|
@@ -300,16 +290,19 @@ Card.propTypes = {
|
|
300
290
|
onKeyDown: PropTypes.func
|
301
291
|
})),
|
302
292
|
overflowAriaLabel: PropTypes.string,
|
293
|
+
/**@ts-ignore */
|
303
294
|
pictogram: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
304
295
|
primaryButtonDisabled: PropTypes.bool,
|
305
296
|
primaryButtonHref: PropTypes.string,
|
297
|
+
/**@ts-ignore */
|
306
298
|
primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
307
299
|
primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
|
308
300
|
primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
|
309
|
-
primaryButtonText: PropTypes.
|
301
|
+
primaryButtonText: PropTypes.string,
|
310
302
|
productive: PropTypes.bool,
|
311
303
|
secondaryButtonDisabled: PropTypes.bool,
|
312
304
|
secondaryButtonHref: PropTypes.string,
|
305
|
+
/**@ts-ignore */
|
313
306
|
secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
314
307
|
secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
|
315
308
|
secondaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
|
@@ -321,7 +314,7 @@ Card.propTypes = {
|
|
321
314
|
*/
|
322
315
|
slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
|
323
316
|
status: PropTypes.oneOf(['complete', 'incomplete']),
|
324
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.
|
317
|
+
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
325
318
|
titleSize: PropTypes.oneOf(['default', 'large'])
|
326
319
|
};
|
327
320
|
Card.displayName = componentName;
|
@@ -1,50 +1,53 @@
|
|
1
|
-
|
2
|
-
actions?: any[] | undefined;
|
3
|
-
disabled: any;
|
4
|
-
footerActionIcon: any;
|
5
|
-
hasActions: any;
|
6
|
-
hasButton: any;
|
7
|
-
onPrimaryButtonClick: any;
|
8
|
-
onSecondaryButtonClick: any;
|
9
|
-
primaryButtonDisabled: any;
|
10
|
-
primaryButtonHref: any;
|
11
|
-
primaryButtonIcon: any;
|
12
|
-
primaryButtonKind?: string | undefined;
|
13
|
-
primaryButtonPlacement: any;
|
14
|
-
primaryButtonText: any;
|
15
|
-
productive?: boolean | undefined;
|
16
|
-
secondaryButtonDisabled: any;
|
17
|
-
secondaryButtonHref: any;
|
18
|
-
secondaryButtonIcon: any;
|
19
|
-
secondaryButtonKind?: string | undefined;
|
20
|
-
secondaryButtonPlacement: any;
|
21
|
-
secondaryButtonText: any;
|
22
|
-
}): import("react/jsx-runtime").JSX.Element;
|
23
|
-
export namespace CardFooter {
|
24
|
-
export namespace propTypes {
|
25
|
-
let actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
|
26
|
-
let disabled: PropTypes.Requireable<boolean>;
|
27
|
-
let footerActionIcon: PropTypes.Requireable<object>;
|
28
|
-
let hasActions: PropTypes.Requireable<boolean>;
|
29
|
-
let hasButton: PropTypes.Requireable<boolean>;
|
30
|
-
let onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
|
31
|
-
let onSecondaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
|
32
|
-
let primaryButtonDisabled: PropTypes.Requireable<boolean>;
|
33
|
-
let primaryButtonHref: PropTypes.Requireable<string>;
|
34
|
-
let primaryButtonIcon: PropTypes.Requireable<object>;
|
35
|
-
let primaryButtonKind: PropTypes.Requireable<string>;
|
36
|
-
let primaryButtonPlacement: PropTypes.Requireable<string>;
|
37
|
-
let primaryButtonText: PropTypes.Requireable<string>;
|
38
|
-
let productive: PropTypes.Requireable<boolean>;
|
39
|
-
let secondaryButtonDisabled: PropTypes.Requireable<boolean>;
|
40
|
-
let secondaryButtonHref: PropTypes.Requireable<string>;
|
41
|
-
let secondaryButtonIcon: PropTypes.Requireable<object>;
|
42
|
-
let secondaryButtonKind: PropTypes.Requireable<string>;
|
43
|
-
let secondaryButtonPlacement: PropTypes.Requireable<string>;
|
44
|
-
let secondaryButtonText: PropTypes.Requireable<string>;
|
45
|
-
}
|
46
|
-
export { componentName as displayName };
|
47
|
-
}
|
1
|
+
import React, { ReactNode } from 'react';
|
48
2
|
import PropTypes from 'prop-types';
|
49
|
-
|
3
|
+
interface CardFooterProps {
|
4
|
+
actions?: ReactNode[] | ReactNode;
|
5
|
+
disabled?: boolean;
|
6
|
+
footerActionIcon?: React.ElementType;
|
7
|
+
hasActions?: boolean;
|
8
|
+
hasButton?: boolean;
|
9
|
+
onPrimaryButtonClick?: () => void;
|
10
|
+
onSecondaryButtonClick?: () => void;
|
11
|
+
primaryButtonDisabled?: boolean;
|
12
|
+
primaryButtonHref?: string;
|
13
|
+
primaryButtonIcon?: React.ElementType;
|
14
|
+
primaryButtonKind?: 'primary' | 'ghost';
|
15
|
+
primaryButtonPlacement?: 'top' | 'bottom';
|
16
|
+
primaryButtonText?: string;
|
17
|
+
productive?: boolean;
|
18
|
+
secondaryButtonDisabled?: boolean;
|
19
|
+
secondaryButtonHref?: string;
|
20
|
+
secondaryButtonIcon?: React.ElementType;
|
21
|
+
secondaryButtonKind?: 'secondary' | 'ghost';
|
22
|
+
secondaryButtonPlacement?: 'top' | 'bottom';
|
23
|
+
secondaryButtonText?: string;
|
24
|
+
}
|
25
|
+
export declare const CardFooter: {
|
26
|
+
({ actions, disabled, footerActionIcon: FooterActionIcon, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
|
27
|
+
/**@ts-ignore */
|
28
|
+
propTypes: {
|
29
|
+
actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
|
30
|
+
disabled: PropTypes.Requireable<boolean>;
|
31
|
+
footerActionIcon: PropTypes.Requireable<object>;
|
32
|
+
hasActions: PropTypes.Requireable<boolean>;
|
33
|
+
hasButton: PropTypes.Requireable<boolean>;
|
34
|
+
onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
|
35
|
+
onSecondaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
|
36
|
+
primaryButtonDisabled: PropTypes.Requireable<boolean>;
|
37
|
+
primaryButtonHref: PropTypes.Requireable<string>;
|
38
|
+
primaryButtonIcon: PropTypes.Requireable<object>;
|
39
|
+
primaryButtonKind: PropTypes.Requireable<string>;
|
40
|
+
primaryButtonPlacement: PropTypes.Requireable<string>;
|
41
|
+
primaryButtonText: PropTypes.Requireable<string>;
|
42
|
+
productive: PropTypes.Requireable<boolean>;
|
43
|
+
secondaryButtonDisabled: PropTypes.Requireable<boolean>;
|
44
|
+
secondaryButtonHref: PropTypes.Requireable<string>;
|
45
|
+
secondaryButtonIcon: PropTypes.Requireable<object>;
|
46
|
+
secondaryButtonKind: PropTypes.Requireable<string>;
|
47
|
+
secondaryButtonPlacement: PropTypes.Requireable<string>;
|
48
|
+
secondaryButtonText: PropTypes.Requireable<string>;
|
49
|
+
};
|
50
|
+
/**@ts-ignore */
|
51
|
+
displayName: string;
|
52
|
+
};
|
50
53
|
export {};
|
@@ -34,7 +34,7 @@ var CardFooter = function CardFooter(_ref) {
|
|
34
34
|
primaryButtonHref = _ref.primaryButtonHref,
|
35
35
|
primaryButtonIcon = _ref.primaryButtonIcon,
|
36
36
|
_ref$primaryButtonKin = _ref.primaryButtonKind,
|
37
|
-
primaryButtonKind = _ref$primaryButtonKin === void 0 ?
|
37
|
+
primaryButtonKind = _ref$primaryButtonKin === void 0 ? 'primary' : _ref$primaryButtonKin,
|
38
38
|
primaryButtonPlacement = _ref.primaryButtonPlacement,
|
39
39
|
primaryButtonText = _ref.primaryButtonText,
|
40
40
|
_ref$productive = _ref.productive,
|
@@ -43,7 +43,7 @@ var CardFooter = function CardFooter(_ref) {
|
|
43
43
|
secondaryButtonHref = _ref.secondaryButtonHref,
|
44
44
|
secondaryButtonIcon = _ref.secondaryButtonIcon,
|
45
45
|
_ref$secondaryButtonK = _ref.secondaryButtonKind,
|
46
|
-
secondaryButtonKind = _ref$secondaryButtonK === void 0 ?
|
46
|
+
secondaryButtonKind = _ref$secondaryButtonK === void 0 ? 'secondary' : _ref$secondaryButtonK,
|
47
47
|
secondaryButtonPlacement = _ref.secondaryButtonPlacement,
|
48
48
|
secondaryButtonText = _ref.secondaryButtonText;
|
49
49
|
var blockClass = "".concat(pkg.prefix, "--card");
|
@@ -73,6 +73,7 @@ var CardFooter = function CardFooter(_ref) {
|
|
73
73
|
size: 16
|
74
74
|
})) : /*#__PURE__*/React__default.createElement(FooterActionIcon, null)));
|
75
75
|
};
|
76
|
+
/**@ts-ignore */
|
76
77
|
CardFooter.propTypes = {
|
77
78
|
actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
|
78
79
|
disabled: PropTypes.bool,
|
@@ -95,6 +96,7 @@ CardFooter.propTypes = {
|
|
95
96
|
secondaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
|
96
97
|
secondaryButtonText: PropTypes.string
|
97
98
|
};
|
99
|
+
/**@ts-ignore */
|
98
100
|
CardFooter.displayName = componentName;
|
99
101
|
|
100
102
|
export { CardFooter };
|
@@ -1,51 +1,69 @@
|
|
1
|
-
|
2
|
-
actions: any;
|
3
|
-
noActionIcons: any;
|
4
|
-
onPrimaryButtonClick: any;
|
5
|
-
onSecondaryButtonClick: any;
|
6
|
-
primaryButtonIcon: any;
|
7
|
-
primaryButtonPlacement: any;
|
8
|
-
primaryButtonText: any;
|
9
|
-
primaryButtonDisabled: any;
|
10
|
-
description: any;
|
11
|
-
hasActions?: boolean | undefined;
|
12
|
-
inClickableCard: any;
|
13
|
-
label: any;
|
14
|
-
secondaryButtonDisabled: any;
|
15
|
-
secondaryButtonHref: any;
|
16
|
-
secondaryButtonIcon: any;
|
17
|
-
secondaryButtonPlacement: any;
|
18
|
-
secondaryButtonText: any;
|
19
|
-
slug: any;
|
20
|
-
title: any;
|
21
|
-
titleSize?: string | undefined;
|
22
|
-
}): import("react/jsx-runtime").JSX.Element;
|
23
|
-
export namespace CardHeader {
|
24
|
-
export namespace propTypes {
|
25
|
-
let actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
|
26
|
-
let description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
|
27
|
-
let hasActions: PropTypes.Requireable<boolean>;
|
28
|
-
let inClickableCard: PropTypes.Requireable<boolean>;
|
29
|
-
let label: PropTypes.Requireable<string>;
|
30
|
-
let noActionIcons: PropTypes.Requireable<boolean>;
|
31
|
-
let onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
|
32
|
-
let onSecondaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
|
33
|
-
let primaryButtonDisabled: PropTypes.Requireable<boolean>;
|
34
|
-
let primaryButtonIcon: PropTypes.Requireable<object>;
|
35
|
-
let primaryButtonPlacement: PropTypes.Requireable<string>;
|
36
|
-
let primaryButtonText: PropTypes.Requireable<string>;
|
37
|
-
let secondaryButtonDisabled: PropTypes.Requireable<boolean>;
|
38
|
-
let secondaryButtonHref: PropTypes.Requireable<string>;
|
39
|
-
let secondaryButtonIcon: PropTypes.Requireable<object>;
|
40
|
-
let secondaryButtonKind: PropTypes.Requireable<string>;
|
41
|
-
let secondaryButtonPlacement: PropTypes.Requireable<string>;
|
42
|
-
let secondaryButtonText: PropTypes.Requireable<string>;
|
43
|
-
let slug: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
44
|
-
let title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
|
45
|
-
let titleSize: PropTypes.Requireable<string>;
|
46
|
-
}
|
47
|
-
export { componentName as displayName };
|
48
|
-
}
|
1
|
+
import React, { ReactNode } from 'react';
|
49
2
|
import PropTypes from 'prop-types';
|
50
|
-
|
3
|
+
interface CardHeaderProps {
|
4
|
+
actions?: ReactNode[] | ReactNode;
|
5
|
+
description?: ReactNode;
|
6
|
+
hasActions?: boolean;
|
7
|
+
/**
|
8
|
+
* is the host card clickable
|
9
|
+
*/
|
10
|
+
inClickableCard?: boolean;
|
11
|
+
label?: ReactNode;
|
12
|
+
noActionIcons?: boolean;
|
13
|
+
onPrimaryButtonClick?: () => void;
|
14
|
+
onSecondaryButtonClick?: () => void;
|
15
|
+
primaryButtonDisabled?: boolean;
|
16
|
+
primaryButtonIcon?: React.ElementType;
|
17
|
+
primaryButtonPlacement?: 'top' | 'bottom';
|
18
|
+
primaryButtonText?: string;
|
19
|
+
secondaryButtonDisabled?: boolean;
|
20
|
+
secondaryButtonHref?: string;
|
21
|
+
secondaryButtonIcon?: React.ElementType;
|
22
|
+
secondaryButtonKind?: 'secondary' | 'ghost';
|
23
|
+
secondaryButtonPlacement?: 'top' | 'bottom';
|
24
|
+
secondaryButtonText?: string;
|
25
|
+
/**
|
26
|
+
* **Experimental:** For all cases a `Slug` component can be provided.
|
27
|
+
* Clickable tiles only accept a boolean value of true and display a hollow slug.
|
28
|
+
*/
|
29
|
+
slug?: ReactNode;
|
30
|
+
title?: ReactNode;
|
31
|
+
titleSize?: 'default' | 'large';
|
32
|
+
}
|
33
|
+
export declare const CardHeader: {
|
34
|
+
({ actions, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
|
35
|
+
/**@ts-ignore */
|
36
|
+
propTypes: {
|
37
|
+
actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
|
38
|
+
description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
|
39
|
+
hasActions: PropTypes.Requireable<boolean>;
|
40
|
+
/**
|
41
|
+
* is the host card clickable
|
42
|
+
*/
|
43
|
+
inClickableCard: PropTypes.Requireable<boolean>;
|
44
|
+
label: PropTypes.Requireable<string>;
|
45
|
+
noActionIcons: PropTypes.Requireable<boolean>;
|
46
|
+
onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
|
47
|
+
onSecondaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
|
48
|
+
primaryButtonDisabled: PropTypes.Requireable<boolean>;
|
49
|
+
primaryButtonIcon: PropTypes.Requireable<object>;
|
50
|
+
primaryButtonPlacement: PropTypes.Requireable<string>;
|
51
|
+
primaryButtonText: PropTypes.Requireable<string>;
|
52
|
+
secondaryButtonDisabled: PropTypes.Requireable<boolean>;
|
53
|
+
secondaryButtonHref: PropTypes.Requireable<string>;
|
54
|
+
secondaryButtonIcon: PropTypes.Requireable<object>;
|
55
|
+
secondaryButtonKind: PropTypes.Requireable<string>;
|
56
|
+
secondaryButtonPlacement: PropTypes.Requireable<string>;
|
57
|
+
secondaryButtonText: PropTypes.Requireable<string>;
|
58
|
+
/**
|
59
|
+
* **Experimental:** For all cases a `Slug` component can be provided.
|
60
|
+
* Clickable tiles only accept a boolean value of true and display a hollow slug.
|
61
|
+
*/
|
62
|
+
slug: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
63
|
+
title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
|
64
|
+
titleSize: PropTypes.Requireable<string>;
|
65
|
+
};
|
66
|
+
/**@ts-ignore */
|
67
|
+
displayName: string;
|
68
|
+
};
|
51
69
|
export {};
|
@@ -40,7 +40,7 @@ var CardHeader = function CardHeader(_ref) {
|
|
40
40
|
slug = _ref.slug,
|
41
41
|
title = _ref.title,
|
42
42
|
_ref$titleSize = _ref.titleSize,
|
43
|
-
titleSize = _ref$titleSize === void 0 ?
|
43
|
+
titleSize = _ref$titleSize === void 0 ? 'default' : _ref$titleSize;
|
44
44
|
var carbonPrefix = usePrefix();
|
45
45
|
var blockClass = "".concat(pkg.prefix, "--card");
|
46
46
|
var headerClass = "".concat(blockClass, "__header");
|
@@ -63,7 +63,7 @@ var CardHeader = function CardHeader(_ref) {
|
|
63
63
|
d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
|
64
64
|
fill: "#161616"
|
65
65
|
})));
|
66
|
-
var normalizedSlug;
|
66
|
+
var normalizedSlug = null;
|
67
67
|
if (slug) {
|
68
68
|
if (inClickableCard || typeof slug === 'boolean') {
|
69
69
|
normalizedSlug = hollowSlugIcon;
|
@@ -104,6 +104,7 @@ var CardHeader = function CardHeader(_ref) {
|
|
104
104
|
disabled: primaryButtonDisabled
|
105
105
|
}, primaryButtonText)), normalizedSlug));
|
106
106
|
};
|
107
|
+
/**@ts-ignore */
|
107
108
|
CardHeader.propTypes = {
|
108
109
|
actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
|
109
110
|
description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
|
@@ -134,6 +135,7 @@ CardHeader.propTypes = {
|
|
134
135
|
title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
|
135
136
|
titleSize: PropTypes.oneOf(['default', 'large'])
|
136
137
|
};
|
138
|
+
/**@ts-ignore */
|
137
139
|
CardHeader.displayName = componentName;
|
138
140
|
|
139
141
|
export { CardHeader };
|
@@ -5,10 +5,9 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
import React, { PropsWithChildren, ReactNode } from 'react';
|
8
|
-
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
9
8
|
type MetaData = {
|
10
9
|
id?: string;
|
11
|
-
icon?: () =>
|
10
|
+
icon?: () => ReactNode;
|
12
11
|
iconDescription?: string;
|
13
12
|
};
|
14
13
|
interface GetStartedCardProps extends PropsWithChildren {
|
@@ -23,11 +22,11 @@ interface GetStartedCardProps extends PropsWithChildren {
|
|
23
22
|
/**
|
24
23
|
* Provides the action icon that's displayed at the footer of the card
|
25
24
|
*/
|
26
|
-
footerActionIcon:
|
25
|
+
footerActionIcon: React.ElementType;
|
27
26
|
/**
|
28
27
|
* Optional label for the top of the card
|
29
28
|
*/
|
30
|
-
label?:
|
29
|
+
label?: ReactNode;
|
31
30
|
/**
|
32
31
|
* Optional media content like an image to be placed in the card
|
33
32
|
*/
|
@@ -35,7 +34,7 @@ interface GetStartedCardProps extends PropsWithChildren {
|
|
35
34
|
/**
|
36
35
|
* Icons that are displayed on the card showing the time and skill needed
|
37
36
|
*/
|
38
|
-
metadata: MetaData[];
|
37
|
+
metadata: readonly MetaData[];
|
39
38
|
/**
|
40
39
|
* Provides the callback for a clickable card
|
41
40
|
*/
|
@@ -43,7 +42,7 @@ interface GetStartedCardProps extends PropsWithChildren {
|
|
43
42
|
/**
|
44
43
|
* Provides the icon that's displayed at the top of the card
|
45
44
|
*/
|
46
|
-
pictogram?:
|
45
|
+
pictogram?: () => ReactNode;
|
47
46
|
/**
|
48
47
|
* Provides number for card for tasks in a sequential order
|
49
48
|
*/
|
@@ -55,7 +54,7 @@ interface GetStartedCardProps extends PropsWithChildren {
|
|
55
54
|
/**
|
56
55
|
* Title that's displayed at the top of the card
|
57
56
|
*/
|
58
|
-
title?:
|
57
|
+
title?: ReactNode;
|
59
58
|
}
|
60
59
|
/**
|
61
60
|
* GetStartedCard a card with icon, number, and media variants
|
@@ -43,7 +43,7 @@ GetStartedCard.propTypes = {
|
|
43
43
|
/**
|
44
44
|
* Optional label for the top of the card
|
45
45
|
*/
|
46
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.
|
46
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
47
47
|
/**
|
48
48
|
* Optional media content like an image to be placed in the card
|
49
49
|
*/
|
@@ -77,7 +77,7 @@ GetStartedCard.propTypes = {
|
|
77
77
|
/**
|
78
78
|
* Title that's displayed at the top of the card
|
79
79
|
*/
|
80
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.
|
80
|
+
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
|
81
81
|
};
|
82
82
|
|
83
83
|
export { GetStartedCard };
|