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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (21) hide show
  1. package/es/components/Card/Card.d.ts +68 -2
  2. package/es/components/Card/Card.js +28 -35
  3. package/es/components/Card/CardFooter.d.ts +51 -48
  4. package/es/components/Card/CardFooter.js +4 -2
  5. package/es/components/Card/CardHeader.d.ts +67 -49
  6. package/es/components/Card/CardHeader.js +4 -2
  7. package/es/components/GetStartedCard/GetStartedCard.d.ts +6 -7
  8. package/es/components/GetStartedCard/GetStartedCard.js +2 -2
  9. package/es/components/UserAvatar/UserAvatar.d.ts +59 -1
  10. package/es/components/UserAvatar/UserAvatar.js +7 -23
  11. package/lib/components/Card/Card.d.ts +68 -2
  12. package/lib/components/Card/Card.js +28 -35
  13. package/lib/components/Card/CardFooter.d.ts +51 -48
  14. package/lib/components/Card/CardFooter.js +4 -2
  15. package/lib/components/Card/CardHeader.d.ts +67 -49
  16. package/lib/components/Card/CardHeader.js +4 -2
  17. package/lib/components/GetStartedCard/GetStartedCard.d.ts +6 -7
  18. package/lib/components/GetStartedCard/GetStartedCard.js +2 -2
  19. package/lib/components/UserAvatar/UserAvatar.d.ts +59 -1
  20. package/lib/components/UserAvatar/UserAvatar.js +7 -23
  21. package/package.json +2 -2
package/es/components/UserAvatar/UserAvatar.d.ts CHANGED
@@ -1,2 +1,60 @@
1
- export let UserAvatar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
1
+ /**
2
+ * Copyright IBM Corp. 2024, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
2
7
  import React from 'react';
8
+ import '../../global/js/utils/props-helper';
9
+ /**
10
+ * TODO: A description of the component.
11
+ */
12
+ type BackgroundColor = 'order-1-cyan' | 'order-2-gray' | 'order-3-green' | 'order-4-magenta' | 'order-5-purple' | 'order-6-teal' | 'order-7-cyan' | 'order-8-gray' | 'order-9-green' | 'order-10-magenta' | 'order-11-purple' | 'order-12-teal';
13
+ type Size = 'xl' | 'lg' | 'md' | 'sm';
14
+ type TooltipAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
15
+ type ImageProps = {
16
+ /**
17
+ * When passing the image prop, supply a full path to the image to be displayed.
18
+ */
19
+ image: string;
20
+ /**
21
+ * When passing the image prop use the imageDescription prop to describe the image for screen reader.
22
+ */
23
+ imageDescription: string;
24
+ } | {
25
+ image?: never;
26
+ imageDescription?: never;
27
+ };
28
+ type UserAvatarBaseProps = {
29
+ /**
30
+ * Provide the background color need to be set for UserAvatar.
31
+ */
32
+ backgroundColor?: BackgroundColor;
33
+ /**
34
+ * Provide an optional class to be applied to the containing node.
35
+ */
36
+ className?: string;
37
+ /**
38
+ * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
39
+ */
40
+ name?: string;
41
+ /**
42
+ * Provide a custom icon to use if you need to use an icon other than the default one
43
+ */
44
+ renderIcon?: React.ElementType;
45
+ /**
46
+ * Set the size of the avatar circle
47
+ */
48
+ size?: Size;
49
+ /**
50
+ * Specify how the trigger should align with the tooltip
51
+ */
52
+ tooltipAlignment?: TooltipAlignment;
53
+ /**
54
+ * Pass in the display name to have it shown on hover
55
+ */
56
+ tooltipText?: string;
57
+ };
58
+ type UserAvatarProps = UserAvatarBaseProps & ImageProps;
59
+ export declare let UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
60
+ export {};
package/es/components/UserAvatar/UserAvatar.js CHANGED
@@ -26,42 +26,23 @@ var componentName = 'UserAvatar';
26
26
 
27
27
  // NOTE: the component SCSS is not imported here: it is rolled up separately.
28
28
 
29
- // Default values can be included here and then assigned to the prop params,
30
- // e.g. prop = defaults.prop,
31
- // This gathers default values together neatly and ensures non-primitive
32
- // values are initialized early to avoid react making unnecessary re-renders.
33
- // Note that default values are not required for props that are 'required',
34
- // nor for props where the component can apply undefined values reasonably.
35
- // Default values should be provided when the component needs to make a choice
36
- // or assumption when a prop is not supplied.
37
-
38
- // Default values for props
39
- // const defaults = {
40
- // /* TODO: add defaults for relevant props if needed */
41
- // };
42
-
43
29
  /**
44
30
  * TODO: A description of the component.
45
31
  */
46
32
 
47
- var defaults = {
48
- size: 'md',
49
- tooltipAlignment: 'bottom',
50
- backgroundColor: 'order-1-cyan'
51
- };
52
33
  var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
53
34
  var _ref$backgroundColor = _ref.backgroundColor,
54
- backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
35
+ backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
55
36
  className = _ref.className,
56
37
  image = _ref.image,
57
38
  imageDescription = _ref.imageDescription,
58
39
  name = _ref.name,
59
40
  RenderIcon = _ref.renderIcon,
60
41
  _ref$size = _ref.size,
61
- size = _ref$size === void 0 ? defaults.size : _ref$size,
42
+ size = _ref$size === void 0 ? 'md' : _ref$size,
62
43
  tooltipText = _ref.tooltipText,
63
44
  _ref$tooltipAlignment = _ref.tooltipAlignment,
64
- tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
45
+ tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
65
46
  rest = _objectWithoutProperties(_ref, _excluded);
66
47
  var carbonPrefix = usePrefix();
67
48
  var iconSize = {
@@ -72,7 +53,7 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
72
53
  };
73
54
  var formatInitials = function formatInitials() {
74
55
  var _ref2;
75
- var parts = name.split(' ');
56
+ var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
76
57
  var firstChar = parts[0].charAt(0).toUpperCase();
77
58
  var secondChar = parts[0].charAt(1).toUpperCase();
78
59
  if (parts.length === 1) {
@@ -152,10 +133,12 @@ UserAvatar.propTypes = {
152
133
  /**
153
134
  * When passing the image prop, supply a full path to the image to be displayed.
154
135
  */
136
+ /**@ts-ignore */
155
137
  image: PropTypes.string,
156
138
  /**
157
139
  * When passing the image prop use the imageDescription prop to describe the image for screen reader.
158
140
  */
141
+ /**@ts-ignore */
159
142
  imageDescription: PropTypes.string.isRequired.if(function (_ref3) {
160
143
  var image = _ref3.image;
161
144
  return !!image;
@@ -167,6 +150,7 @@ UserAvatar.propTypes = {
167
150
  /**
168
151
  * Provide a custom icon to use if you need to use an icon other than the default one
169
152
  */
153
+ /**@ts-ignore */
170
154
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
171
155
  /**
172
156
  * Set the size of the avatar circle
package/lib/components/Card/Card.d.ts CHANGED
@@ -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 {};
package/lib/components/Card/Card.js CHANGED
@@ -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;
package/lib/components/Card/CardFooter.d.ts CHANGED
@@ -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 {};
package/lib/components/Card/CardFooter.js CHANGED
@@ -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;
package/lib/components/Card/CardHeader.d.ts CHANGED
@@ -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 {};