@carbon/ibm-products 2.43.2-canary.108 → 2.43.2-canary.109

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,2 +1,68 @@
1
- export let Card: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
2
- import React from 'react';
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 ? defaults.actionIcons : _ref$actionIcons,
25
+ actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
41
26
  _ref$actionsPlacement = _ref.actionsPlacement,
42
- actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
27
+ actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
43
28
  _ref$metadata = _ref.metadata,
44
- metadata = _ref$metadata === void 0 ? defaults.actionIcons : _ref$metadata,
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 ? defaults.clickZone : _ref$clickZone,
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 ? defaults.mediaPosition : _ref$mediaPosition,
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 ? defaults.overflowActions : _ref$overflowActions,
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 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
54
+ primaryButtonKind = _ref$primaryButtonKin === void 0 ? 'primary' : _ref$primaryButtonKin,
70
55
  _ref$primaryButtonPla = _ref.primaryButtonPlacement,
71
- primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
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 ? defaults.productive : _ref$productive,
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 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
64
+ secondaryButtonKind = _ref$secondaryButtonK === void 0 ? 'secondary' : _ref$secondaryButtonK,
80
65
  _ref$secondaryButtonP = _ref.secondaryButtonPlacement,
81
- secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? defaults.secondaryButtonPlacement : _ref$secondaryButtonP,
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 ? defaults.titleSize : _ref$titleSize,
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: '0'
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
- description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
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.object, PropTypes.node]),
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.node,
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.object, PropTypes.node]),
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
- export function CardFooter({ actions, disabled, footerActionIcon: FooterActionIcon, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
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
- declare const componentName: "CardFooter";
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 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
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 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
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
- export function CardHeader({ actions, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: {
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
- declare const componentName: "CardHeader";
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 ? defaults.titleSize : _ref$titleSize;
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?: () => void | object;
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: () => void | object;
25
+ footerActionIcon: React.ElementType;
27
26
  /**
28
27
  * Optional label for the top of the card
29
28
  */
30
- label?: string | object | ReactNode;
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?: CarbonIconType;
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?: string | object | ReactNode;
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.object, PropTypes.node]),
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.object, PropTypes.node])
80
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
81
81
  };
82
82
 
83
83
  export { GetStartedCard };
@@ -1,2 +1,68 @@
1
- export let Card: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
2
- import React from 'react';
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 {};
@@ -29,32 +29,17 @@ var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "cla
29
29
  _excluded2 = ["id"],
30
30
  _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
31
31
  var componentName = 'Card';
32
-
33
- // Default values for props
34
- var defaults = {
35
- actionIcons: Object.freeze([]),
36
- actionsPlacement: 'bottom',
37
- clickZone: 'one',
38
- mediaPosition: 'top',
39
- overflowActions: Object.freeze([]),
40
- primaryButtonKind: 'primary',
41
- primaryButtonPlacement: 'bottom',
42
- productive: false,
43
- secondaryButtonKind: 'secondary',
44
- secondaryButtonPlacement: 'bottom',
45
- titleSize: 'default'
46
- };
47
32
  var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
48
33
  var _ref$actionIcons = _ref.actionIcons,
49
- actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
34
+ actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
50
35
  _ref$actionsPlacement = _ref.actionsPlacement,
51
- actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
36
+ actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
52
37
  _ref$metadata = _ref.metadata,
53
- metadata = _ref$metadata === void 0 ? defaults.actionIcons : _ref$metadata,
38
+ metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
54
39
  children = _ref.children,
55
40
  className = _ref.className,
56
41
  _ref$clickZone = _ref.clickZone,
57
- clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
42
+ clickZone = _ref$clickZone === void 0 ? 'one' : _ref$clickZone,
58
43
  description = _ref.description,
59
44
  disabled = _ref.disabled,
60
45
  footerActionIcon = _ref.footerActionIcon,
@@ -62,12 +47,12 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
62
47
  label = _ref.label,
63
48
  media = _ref.media,
64
49
  _ref$mediaPosition = _ref.mediaPosition,
65
- mediaPosition = _ref$mediaPosition === void 0 ? defaults.mediaPosition : _ref$mediaPosition,
50
+ mediaPosition = _ref$mediaPosition === void 0 ? 'top' : _ref$mediaPosition,
66
51
  onClick = _ref.onClick,
67
52
  onKeyDown = _ref.onKeyDown,
68
53
  onPrimaryButtonClick = _ref.onPrimaryButtonClick,
69
54
  _ref$overflowActions = _ref.overflowActions,
70
- overflowActions = _ref$overflowActions === void 0 ? defaults.overflowActions : _ref$overflowActions,
55
+ overflowActions = _ref$overflowActions === void 0 ? Object.freeze([]) : _ref$overflowActions,
71
56
  overflowAriaLabel = _ref.overflowAriaLabel,
72
57
  onSecondaryButtonClick = _ref.onSecondaryButtonClick,
73
58
  Pictogram = _ref.pictogram,
@@ -75,26 +60,26 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
75
60
  primaryButtonHref = _ref.primaryButtonHref,
76
61
  primaryButtonIcon = _ref.primaryButtonIcon,
77
62
  _ref$primaryButtonKin = _ref.primaryButtonKind,
78
- primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
63
+ primaryButtonKind = _ref$primaryButtonKin === void 0 ? 'primary' : _ref$primaryButtonKin,
79
64
  _ref$primaryButtonPla = _ref.primaryButtonPlacement,
80
- primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
65
+ primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? 'bottom' : _ref$primaryButtonPla,
81
66
  primaryButtonText = _ref.primaryButtonText,
82
67
  _ref$productive = _ref.productive,
83
- productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
68
+ productive = _ref$productive === void 0 ? false : _ref$productive,
84
69
  secondaryButtonDisabled = _ref.secondaryButtonDisabled,
85
70
  secondaryButtonHref = _ref.secondaryButtonHref,
86
71
  secondaryButtonIcon = _ref.secondaryButtonIcon,
87
72
  _ref$secondaryButtonK = _ref.secondaryButtonKind,
88
- secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
73
+ secondaryButtonKind = _ref$secondaryButtonK === void 0 ? 'secondary' : _ref$secondaryButtonK,
89
74
  _ref$secondaryButtonP = _ref.secondaryButtonPlacement,
90
- secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? defaults.secondaryButtonPlacement : _ref$secondaryButtonP,
75
+ secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? 'bottom' : _ref$secondaryButtonP,
91
76
  secondaryButtonText = _ref.secondaryButtonText,
92
77
  slug = _ref.slug,
93
78
  status = _ref.status,
94
79
  sequence = _ref.sequence,
95
80
  title = _ref.title,
96
81
  _ref$titleSize = _ref.titleSize,
97
- titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
82
+ titleSize = _ref$titleSize === void 0 ? 'default' : _ref$titleSize,
98
83
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
99
84
  var getIcons = function getIcons() {
100
85
  return getStarted ? metadata : actionIcons;
@@ -110,7 +95,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
110
95
  onClick: onClick,
111
96
  onKeyDown: onKeyDown,
112
97
  role: 'button',
113
- tabIndex: '0'
98
+ tabIndex: 0
114
99
  };
115
100
 
116
101
  // actions can either be an overflow menu or series of icons
@@ -144,7 +129,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
144
129
  return /*#__PURE__*/React__default["default"].createElement("span", {
145
130
  key: id,
146
131
  className: "".concat(blockClass, "__icon")
147
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
132
+ }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
148
133
  "aria-label": iconDescription
149
134
  }), iconDescription);
150
135
  }
@@ -166,7 +151,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
166
151
  className: "".concat(blockClass, "__icon"),
167
152
  href: href,
168
153
  onClick: onClick
169
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
154
+ }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
170
155
  "aria-label": iconDescription
171
156
  }));
172
157
  }
@@ -177,7 +162,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
177
162
  onClick: onClick,
178
163
  kind: "ghost",
179
164
  size: "sm"
180
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
165
+ }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
181
166
  "aria-label": iconDescription
182
167
  }));
183
168
  });
@@ -274,6 +259,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
274
259
  }, media)), hasBottomBar && /*#__PURE__*/React__default["default"].createElement(CardFooter.CardFooter, getFooterProps())));
275
260
  });
276
261
  Card.propTypes = {
262
+ /**@ts-ignore */
277
263
  actionIcons: index["default"].arrayOf(index["default"].shape({
278
264
  id: index["default"].string,
279
265
  icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
@@ -286,13 +272,16 @@ Card.propTypes = {
286
272
  children: index["default"].node,
287
273
  className: index["default"].string,
288
274
  clickZone: index["default"].oneOf(['one', 'two', 'three']),
289
- description: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
275
+ /**@ts-ignore */
276
+ description: index["default"].oneOfType([index["default"].string, index["default"].node]),
290
277
  disabled: index["default"].bool,
278
+ /**@ts-ignore */
291
279
  footerActionIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
292
280
  getStarted: index["default"].bool,
293
- label: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
281
+ label: index["default"].oneOfType([index["default"].string, index["default"].node]),
294
282
  media: index["default"].node,
295
283
  mediaPosition: index["default"].oneOf(['top', 'left']),
284
+ /**@ts-ignore */
296
285
  metadata: index["default"].arrayOf(index["default"].shape({
297
286
  id: index["default"].string,
298
287
  icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
@@ -302,6 +291,7 @@ Card.propTypes = {
302
291
  onKeyDown: index["default"].func,
303
292
  onPrimaryButtonClick: index["default"].func,
304
293
  onSecondaryButtonClick: index["default"].func,
294
+ /**@ts-ignore */
305
295
  overflowActions: index["default"].arrayOf(index["default"].shape({
306
296
  id: index["default"].string,
307
297
  itemText: index["default"].string,
@@ -309,16 +299,19 @@ Card.propTypes = {
309
299
  onKeyDown: index["default"].func
310
300
  })),
311
301
  overflowAriaLabel: index["default"].string,
302
+ /**@ts-ignore */
312
303
  pictogram: index["default"].oneOfType([index["default"].func, index["default"].object]),
313
304
  primaryButtonDisabled: index["default"].bool,
314
305
  primaryButtonHref: index["default"].string,
306
+ /**@ts-ignore */
315
307
  primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
316
308
  primaryButtonKind: index["default"].oneOf(['primary', 'ghost']),
317
309
  primaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
318
- primaryButtonText: index["default"].node,
310
+ primaryButtonText: index["default"].string,
319
311
  productive: index["default"].bool,
320
312
  secondaryButtonDisabled: index["default"].bool,
321
313
  secondaryButtonHref: index["default"].string,
314
+ /**@ts-ignore */
322
315
  secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
323
316
  secondaryButtonKind: index["default"].oneOf(['secondary', 'ghost']),
324
317
  secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
@@ -330,7 +323,7 @@ Card.propTypes = {
330
323
  */
331
324
  slug: index["default"].oneOfType([index["default"].node, index["default"].bool]),
332
325
  status: index["default"].oneOf(['complete', 'incomplete']),
333
- title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
326
+ title: index["default"].oneOfType([index["default"].string, index["default"].node]),
334
327
  titleSize: index["default"].oneOf(['default', 'large'])
335
328
  };
336
329
  Card.displayName = componentName;
@@ -1,50 +1,53 @@
1
- export function CardFooter({ actions, disabled, footerActionIcon: FooterActionIcon, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
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
- declare const componentName: "CardFooter";
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 {};
@@ -43,7 +43,7 @@ var CardFooter = function CardFooter(_ref) {
43
43
  primaryButtonHref = _ref.primaryButtonHref,
44
44
  primaryButtonIcon = _ref.primaryButtonIcon,
45
45
  _ref$primaryButtonKin = _ref.primaryButtonKind,
46
- primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
46
+ primaryButtonKind = _ref$primaryButtonKin === void 0 ? 'primary' : _ref$primaryButtonKin,
47
47
  primaryButtonPlacement = _ref.primaryButtonPlacement,
48
48
  primaryButtonText = _ref.primaryButtonText,
49
49
  _ref$productive = _ref.productive,
@@ -52,7 +52,7 @@ var CardFooter = function CardFooter(_ref) {
52
52
  secondaryButtonHref = _ref.secondaryButtonHref,
53
53
  secondaryButtonIcon = _ref.secondaryButtonIcon,
54
54
  _ref$secondaryButtonK = _ref.secondaryButtonKind,
55
- secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
55
+ secondaryButtonKind = _ref$secondaryButtonK === void 0 ? 'secondary' : _ref$secondaryButtonK,
56
56
  secondaryButtonPlacement = _ref.secondaryButtonPlacement,
57
57
  secondaryButtonText = _ref.secondaryButtonText;
58
58
  var blockClass = "".concat(settings.pkg.prefix, "--card");
@@ -82,6 +82,7 @@ var CardFooter = function CardFooter(_ref) {
82
82
  size: 16
83
83
  })) : /*#__PURE__*/React__default["default"].createElement(FooterActionIcon, null)));
84
84
  };
85
+ /**@ts-ignore */
85
86
  CardFooter.propTypes = {
86
87
  actions: index["default"].oneOfType([index["default"].array, index["default"].node]),
87
88
  disabled: index["default"].bool,
@@ -104,6 +105,7 @@ CardFooter.propTypes = {
104
105
  secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
105
106
  secondaryButtonText: index["default"].string
106
107
  };
108
+ /**@ts-ignore */
107
109
  CardFooter.displayName = componentName;
108
110
 
109
111
  exports.CardFooter = CardFooter;
@@ -1,51 +1,69 @@
1
- export function CardHeader({ actions, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: {
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
- declare const componentName: "CardHeader";
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 {};
@@ -49,7 +49,7 @@ var CardHeader = function CardHeader(_ref) {
49
49
  slug = _ref.slug,
50
50
  title = _ref.title,
51
51
  _ref$titleSize = _ref.titleSize,
52
- titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize;
52
+ titleSize = _ref$titleSize === void 0 ? 'default' : _ref$titleSize;
53
53
  var carbonPrefix = react.usePrefix();
54
54
  var blockClass = "".concat(settings.pkg.prefix, "--card");
55
55
  var headerClass = "".concat(blockClass, "__header");
@@ -72,7 +72,7 @@ var CardHeader = function CardHeader(_ref) {
72
72
  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",
73
73
  fill: "#161616"
74
74
  })));
75
- var normalizedSlug;
75
+ var normalizedSlug = null;
76
76
  if (slug) {
77
77
  if (inClickableCard || typeof slug === 'boolean') {
78
78
  normalizedSlug = hollowSlugIcon;
@@ -113,6 +113,7 @@ var CardHeader = function CardHeader(_ref) {
113
113
  disabled: primaryButtonDisabled
114
114
  }, primaryButtonText)), normalizedSlug));
115
115
  };
116
+ /**@ts-ignore */
116
117
  CardHeader.propTypes = {
117
118
  actions: index["default"].oneOfType([index["default"].array, index["default"].node]),
118
119
  description: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
@@ -143,6 +144,7 @@ CardHeader.propTypes = {
143
144
  title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
144
145
  titleSize: index["default"].oneOf(['default', 'large'])
145
146
  };
147
+ /**@ts-ignore */
146
148
  CardHeader.displayName = componentName;
147
149
 
148
150
  exports.CardHeader = 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?: () => void | object;
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: () => void | object;
25
+ footerActionIcon: React.ElementType;
27
26
  /**
28
27
  * Optional label for the top of the card
29
28
  */
30
- label?: string | object | ReactNode;
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?: CarbonIconType;
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?: string | object | ReactNode;
57
+ title?: ReactNode;
59
58
  }
60
59
  /**
61
60
  * GetStartedCard a card with icon, number, and media variants
@@ -51,7 +51,7 @@ exports.GetStartedCard.propTypes = {
51
51
  /**
52
52
  * Optional label for the top of the card
53
53
  */
54
- label: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
54
+ label: index["default"].oneOfType([index["default"].string, index["default"].node]),
55
55
  /**
56
56
  * Optional media content like an image to be placed in the card
57
57
  */
@@ -85,5 +85,5 @@ exports.GetStartedCard.propTypes = {
85
85
  /**
86
86
  * Title that's displayed at the top of the card
87
87
  */
88
- title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node])
88
+ title: index["default"].oneOfType([index["default"].string, index["default"].node])
89
89
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.43.2-canary.108+81d820dc5",
4
+ "version": "2.43.2-canary.109+c90b45fa1",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -120,5 +120,5 @@
120
120
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
121
121
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
122
122
  },
123
- "gitHead": "81d820dc51a3b2f5a1481392e6af025362f65edd"
123
+ "gitHead": "c90b45fa16ad6d01e28b6f94f511271a5c74061c"
124
124
  }