@carbon/ibm-products 2.41.1-canary.13 → 2.41.1-canary.8
Sign up to get free protection for your applications and to get access to all the features.
- package/es/components/Datagrid/useFocusRowExpander.js +1 -1
- package/es/components/EditUpdateCards/EditUpdateCards.d.ts +3 -4
- package/es/components/Guidebanner/Guidebanner.js +2 -7
- package/es/components/ProductiveCard/ProductiveCard.d.ts +2 -115
- package/es/components/ProductiveCard/ProductiveCard.js +9 -9
- package/lib/components/Datagrid/useFocusRowExpander.js +1 -1
- package/lib/components/EditUpdateCards/EditUpdateCards.d.ts +3 -4
- package/lib/components/Guidebanner/Guidebanner.js +2 -7
- package/lib/components/ProductiveCard/ProductiveCard.d.ts +2 -115
- package/lib/components/ProductiveCard/ProductiveCard.js +9 -9
- package/package.json +3 -3
@@ -34,7 +34,7 @@ var useFocusRowExpander = function useFocusRowExpander(_ref) {
|
|
34
34
|
});
|
35
35
|
if (activeRow.length) {
|
36
36
|
var rowExpander = activeRow[0].querySelector(".".concat(blockClass, "__row-expander"));
|
37
|
-
rowExpander
|
37
|
+
rowExpander.focus();
|
38
38
|
}
|
39
39
|
}, [instance === null || instance === void 0 ? void 0 : instance.tableId, instance === null || instance === void 0 ? void 0 : instance.expandedRows, lastExpandedRowIndex, blockClass, activeElement]);
|
40
40
|
};
|
@@ -14,7 +14,6 @@ type ActionIcon = {
|
|
14
14
|
iconDescription: string;
|
15
15
|
href?: string;
|
16
16
|
};
|
17
|
-
type PlacementType = 'top' | 'bottom';
|
18
17
|
interface EditUpdateCardsProps {
|
19
18
|
/**
|
20
19
|
* Icons that are displayed on card. Refer to design documentation for implementation guidelines
|
@@ -23,7 +22,7 @@ interface EditUpdateCardsProps {
|
|
23
22
|
/**
|
24
23
|
* Determines if the action icons are on the top or bottom of the card
|
25
24
|
*/
|
26
|
-
actionsPlacement?:
|
25
|
+
actionsPlacement?: 'top' | 'bottom';
|
27
26
|
/**
|
28
27
|
* Optional label for the top of the card.
|
29
28
|
*/
|
@@ -67,7 +66,7 @@ interface EditUpdateCardsProps {
|
|
67
66
|
/**
|
68
67
|
* Determines if the primary button is on the top or bottom of the card
|
69
68
|
*/
|
70
|
-
primaryButtonPlacement?:
|
69
|
+
primaryButtonPlacement?: 'top' | 'bottom';
|
71
70
|
/**
|
72
71
|
* The text that's displayed in the primary button
|
73
72
|
*/
|
@@ -87,7 +86,7 @@ interface EditUpdateCardsProps {
|
|
87
86
|
/**
|
88
87
|
* Determines if the secondary button is on the top or bottom of the card
|
89
88
|
*/
|
90
|
-
secondaryButtonPlacement?:
|
89
|
+
secondaryButtonPlacement?: 'top' | 'bottom';
|
91
90
|
/**
|
92
91
|
* The text that's displayed in the secondary button
|
93
92
|
*/
|
@@ -14,7 +14,6 @@ import { Idea, CaretLeft, CaretRight, Close } from '@carbon/react/icons';
|
|
14
14
|
import { Button, IconButton } from '@carbon/react';
|
15
15
|
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
16
16
|
import { pkg } from '../../settings.js';
|
17
|
-
import uuidv4 from '../../global/js/utils/uuidv4.js';
|
18
17
|
import { Carousel } from '../Carousel/Carousel.js';
|
19
18
|
|
20
19
|
var _CaretLeft, _CaretRight, _Close;
|
@@ -77,9 +76,8 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
77
76
|
return !prevState;
|
78
77
|
});
|
79
78
|
};
|
80
|
-
var carouselContentId = "".concat(uuidv4(), "--carousel-content-id");
|
81
79
|
return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
|
82
|
-
"aria-
|
80
|
+
"aria-expanded": !isCollapsed,
|
83
81
|
className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
|
84
82
|
ref: ref
|
85
83
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(Idea, {
|
@@ -88,7 +86,6 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
88
86
|
}), /*#__PURE__*/React__default.createElement("div", {
|
89
87
|
className: "".concat(blockClass, "__title")
|
90
88
|
}, title), /*#__PURE__*/React__default.createElement(Carousel, {
|
91
|
-
id: carouselContentId,
|
92
89
|
className: "".concat(blockClass, "__carousel")
|
93
90
|
// These colors are to match the Carousel's faded edges
|
94
91
|
// against the Guidebanner's gradient background.
|
@@ -111,9 +108,7 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
111
108
|
size: "md",
|
112
109
|
className: "".concat(blockClass, "__toggle-button"),
|
113
110
|
onClick: handleClickToggle,
|
114
|
-
ref: toggleRef
|
115
|
-
"aria-controls": !isCollapsed ? carouselContentId : undefined,
|
116
|
-
"aria-expanded": !isCollapsed
|
111
|
+
ref: toggleRef
|
117
112
|
}, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
|
118
113
|
className: cx("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
|
119
114
|
}, /*#__PURE__*/React__default.createElement(IconButton, {
|
@@ -1,115 +1,2 @@
|
|
1
|
-
|
2
|
-
import
|
3
|
-
type ActionIcon = {
|
4
|
-
id?: string;
|
5
|
-
icon?: CarbonIconType;
|
6
|
-
onKeyDown?(): void;
|
7
|
-
onClick?(): void;
|
8
|
-
iconDescription?: string;
|
9
|
-
href?: string;
|
10
|
-
};
|
11
|
-
type overflowAction = {
|
12
|
-
id?: string;
|
13
|
-
itemText?: string;
|
14
|
-
onClick?: () => void;
|
15
|
-
onKeydown?: () => void;
|
16
|
-
};
|
17
|
-
type PlacementType = 'top' | 'bottom';
|
18
|
-
type ClickZoneType = 'one' | 'two' | 'three';
|
19
|
-
interface ProductiveCardProps extends PropsWithChildren {
|
20
|
-
/**
|
21
|
-
* Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
|
22
|
-
*/
|
23
|
-
actionIcons?: ActionIcon[];
|
24
|
-
/**
|
25
|
-
* Determines if the action icons are on the top or bottom of the card
|
26
|
-
*/
|
27
|
-
actionsPlacement?: PlacementType;
|
28
|
-
/**
|
29
|
-
* Content that shows in the body of the card
|
30
|
-
*/
|
31
|
-
/**
|
32
|
-
* Optional user provided class
|
33
|
-
*/
|
34
|
-
className?: string;
|
35
|
-
children: ReactNode;
|
36
|
-
/**
|
37
|
-
* Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
|
38
|
-
*/
|
39
|
-
clickZone?: ClickZoneType;
|
40
|
-
/**
|
41
|
-
* Optional header description
|
42
|
-
*/
|
43
|
-
description?: string | object | ReactNode;
|
44
|
-
/**
|
45
|
-
* Optional label for the top of the card
|
46
|
-
*/
|
47
|
-
label?: string | object | ReactNode;
|
48
|
-
/**
|
49
|
-
* Provides the callback for a clickable card
|
50
|
-
*/
|
51
|
-
onClick?: () => void;
|
52
|
-
/**
|
53
|
-
* Function that's called from the primary button or action icon
|
54
|
-
*/
|
55
|
-
onPrimaryButtonClick?: () => void;
|
56
|
-
/**
|
57
|
-
* Function that's called from the secondary button
|
58
|
-
*/
|
59
|
-
onSecondaryButtonClick?: () => void;
|
60
|
-
/**
|
61
|
-
* Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
|
62
|
-
*/
|
63
|
-
overflowActions?: overflowAction[];
|
64
|
-
/**
|
65
|
-
* Aria label prop required for OverflowMenu
|
66
|
-
*/
|
67
|
-
overflowAriaLabel?: string;
|
68
|
-
/**
|
69
|
-
* Optionally specify an href for your Button to become an <a> element
|
70
|
-
*/
|
71
|
-
primaryButtonHref?: string;
|
72
|
-
/**
|
73
|
-
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
74
|
-
*/
|
75
|
-
primaryButtonIcon?: CarbonIconType;
|
76
|
-
/**
|
77
|
-
* Determines if the primary button is on the top or bottom of the card
|
78
|
-
*/
|
79
|
-
primaryButtonPlacement?: PlacementType;
|
80
|
-
/**
|
81
|
-
* The text that's displayed in the primary button
|
82
|
-
*/
|
83
|
-
primaryButtonText?: string;
|
84
|
-
/**
|
85
|
-
* Optionally specify an href for your Button to become an <a> element
|
86
|
-
*/
|
87
|
-
secondaryButtonHref?: string;
|
88
|
-
/**
|
89
|
-
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
90
|
-
*/
|
91
|
-
secondaryButtonIcon?: CarbonIconType;
|
92
|
-
/**
|
93
|
-
* Determines if the secondary button is on the top or bottom of the card
|
94
|
-
*/
|
95
|
-
secondaryButtonPlacement?: PlacementType;
|
96
|
-
/**
|
97
|
-
* The text that's displayed in the secondary button
|
98
|
-
*/
|
99
|
-
secondaryButtonText?: string;
|
100
|
-
/**
|
101
|
-
* **Experimental:** For all cases a `Slug` component can be provided.
|
102
|
-
* Clickable tiles only accept a boolean value of true and display a hollow slug.
|
103
|
-
*/
|
104
|
-
slug?: ReactNode | boolean;
|
105
|
-
/**
|
106
|
-
* Title that's displayed at the top of the card
|
107
|
-
*/
|
108
|
-
title?: string | object | ReactNode;
|
109
|
-
/**
|
110
|
-
* Determines title size
|
111
|
-
*/
|
112
|
-
titleSize?: 'default' | 'large';
|
113
|
-
}
|
114
|
-
export declare let ProductiveCard: React.ForwardRefExoticComponent<ProductiveCardProps & React.RefAttributes<HTMLDivElement>>;
|
115
|
-
export {};
|
1
|
+
export let ProductiveCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
|
2
|
+
import React from 'react';
|
@@ -15,16 +15,22 @@ import { Card } from '../Card/Card.js';
|
|
15
15
|
|
16
16
|
var _excluded = ["actionsPlacement"];
|
17
17
|
var componentName = 'ProductiveCard';
|
18
|
+
|
19
|
+
// Default values for props
|
20
|
+
var defaults = {
|
21
|
+
actionsPlacement: 'top'
|
22
|
+
};
|
18
23
|
var ProductiveCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
19
24
|
var _ref$actionsPlacement = _ref.actionsPlacement,
|
20
|
-
actionsPlacement = _ref$actionsPlacement === void 0 ?
|
25
|
+
actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
|
21
26
|
rest = _objectWithoutProperties(_ref, _excluded);
|
22
27
|
var validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
|
23
28
|
return /*#__PURE__*/React__default.createElement(Card, _extends({}, _objectSpread2(_objectSpread2({}, validProps), {}, {
|
24
29
|
actionsPlacement: actionsPlacement,
|
25
|
-
ref: ref
|
30
|
+
ref: ref
|
31
|
+
}), {
|
26
32
|
productive: true
|
27
|
-
}
|
33
|
+
}, getDevtoolsProps(componentName)));
|
28
34
|
});
|
29
35
|
|
30
36
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -33,7 +39,6 @@ ProductiveCard.propTypes = {
|
|
33
39
|
/**
|
34
40
|
* Icons that are displayed on card. Refer to design documentation for implementation guidelines
|
35
41
|
*/
|
36
|
-
/**@ts-ignore */
|
37
42
|
actionIcons: PropTypes.arrayOf(PropTypes.shape({
|
38
43
|
id: PropTypes.string,
|
39
44
|
icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
@@ -81,7 +86,6 @@ ProductiveCard.propTypes = {
|
|
81
86
|
/**
|
82
87
|
* Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
|
83
88
|
*/
|
84
|
-
/**@ts-ignore */
|
85
89
|
overflowActions: PropTypes.arrayOf(PropTypes.shape({
|
86
90
|
id: PropTypes.string,
|
87
91
|
itemText: PropTypes.string,
|
@@ -99,7 +103,6 @@ ProductiveCard.propTypes = {
|
|
99
103
|
/**
|
100
104
|
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
101
105
|
*/
|
102
|
-
/**@ts-ignore */
|
103
106
|
primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
104
107
|
/**
|
105
108
|
* Determines if the primary button is on the top or bottom of the card
|
@@ -108,7 +111,6 @@ ProductiveCard.propTypes = {
|
|
108
111
|
/**
|
109
112
|
* The text that's displayed in the primary button
|
110
113
|
*/
|
111
|
-
/**@ts-ignore */
|
112
114
|
primaryButtonText: PropTypes.node,
|
113
115
|
/**
|
114
116
|
* Optionally specify an href for your Button to become an <a> element
|
@@ -117,7 +119,6 @@ ProductiveCard.propTypes = {
|
|
117
119
|
/**
|
118
120
|
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
119
121
|
*/
|
120
|
-
/**@ts-ignore */
|
121
122
|
secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
122
123
|
/**
|
123
124
|
* Determines if the secondary button is on the top or bottom of the card
|
@@ -126,7 +127,6 @@ ProductiveCard.propTypes = {
|
|
126
127
|
/**
|
127
128
|
* The text that's displayed in the secondary button
|
128
129
|
*/
|
129
|
-
/**@ts-ignore */
|
130
130
|
secondaryButtonText: PropTypes.node,
|
131
131
|
/**
|
132
132
|
* **Experimental:** For all cases a `Slug` component can be provided.
|
@@ -38,7 +38,7 @@ var useFocusRowExpander = function useFocusRowExpander(_ref) {
|
|
38
38
|
});
|
39
39
|
if (activeRow.length) {
|
40
40
|
var rowExpander = activeRow[0].querySelector(".".concat(blockClass, "__row-expander"));
|
41
|
-
rowExpander
|
41
|
+
rowExpander.focus();
|
42
42
|
}
|
43
43
|
}, [instance === null || instance === void 0 ? void 0 : instance.tableId, instance === null || instance === void 0 ? void 0 : instance.expandedRows, lastExpandedRowIndex, blockClass, activeElement]);
|
44
44
|
};
|
@@ -14,7 +14,6 @@ type ActionIcon = {
|
|
14
14
|
iconDescription: string;
|
15
15
|
href?: string;
|
16
16
|
};
|
17
|
-
type PlacementType = 'top' | 'bottom';
|
18
17
|
interface EditUpdateCardsProps {
|
19
18
|
/**
|
20
19
|
* Icons that are displayed on card. Refer to design documentation for implementation guidelines
|
@@ -23,7 +22,7 @@ interface EditUpdateCardsProps {
|
|
23
22
|
/**
|
24
23
|
* Determines if the action icons are on the top or bottom of the card
|
25
24
|
*/
|
26
|
-
actionsPlacement?:
|
25
|
+
actionsPlacement?: 'top' | 'bottom';
|
27
26
|
/**
|
28
27
|
* Optional label for the top of the card.
|
29
28
|
*/
|
@@ -67,7 +66,7 @@ interface EditUpdateCardsProps {
|
|
67
66
|
/**
|
68
67
|
* Determines if the primary button is on the top or bottom of the card
|
69
68
|
*/
|
70
|
-
primaryButtonPlacement?:
|
69
|
+
primaryButtonPlacement?: 'top' | 'bottom';
|
71
70
|
/**
|
72
71
|
* The text that's displayed in the primary button
|
73
72
|
*/
|
@@ -87,7 +86,7 @@ interface EditUpdateCardsProps {
|
|
87
86
|
/**
|
88
87
|
* Determines if the secondary button is on the top or bottom of the card
|
89
88
|
*/
|
90
|
-
secondaryButtonPlacement?:
|
89
|
+
secondaryButtonPlacement?: 'top' | 'bottom';
|
91
90
|
/**
|
92
91
|
* The text that's displayed in the secondary button
|
93
92
|
*/
|
@@ -18,7 +18,6 @@ var icons = require('@carbon/react/icons');
|
|
18
18
|
var react = require('@carbon/react');
|
19
19
|
var devtools = require('../../global/js/utils/devtools.js');
|
20
20
|
var settings = require('../../settings.js');
|
21
|
-
var uuidv4 = require('../../global/js/utils/uuidv4.js');
|
22
21
|
var Carousel = require('../Carousel/Carousel.js');
|
23
22
|
|
24
23
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
@@ -86,9 +85,8 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
86
85
|
return !prevState;
|
87
86
|
});
|
88
87
|
};
|
89
|
-
var carouselContentId = "".concat(uuidv4["default"](), "--carousel-content-id");
|
90
88
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
91
|
-
"aria-
|
89
|
+
"aria-expanded": !isCollapsed,
|
92
90
|
className: cx__default["default"](blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
|
93
91
|
ref: ref
|
94
92
|
}, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(icons.Idea, {
|
@@ -97,7 +95,6 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
97
95
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
98
96
|
className: "".concat(blockClass, "__title")
|
99
97
|
}, title), /*#__PURE__*/React__default["default"].createElement(Carousel.Carousel, {
|
100
|
-
id: carouselContentId,
|
101
98
|
className: "".concat(blockClass, "__carousel")
|
102
99
|
// These colors are to match the Carousel's faded edges
|
103
100
|
// against the Guidebanner's gradient background.
|
@@ -120,9 +117,7 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
120
117
|
size: "md",
|
121
118
|
className: "".concat(blockClass, "__toggle-button"),
|
122
119
|
onClick: handleClickToggle,
|
123
|
-
ref: toggleRef
|
124
|
-
"aria-controls": !isCollapsed ? carouselContentId : undefined,
|
125
|
-
"aria-expanded": !isCollapsed
|
120
|
+
ref: toggleRef
|
126
121
|
}, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
127
122
|
className: cx__default["default"]("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
|
128
123
|
}, /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
|
@@ -1,115 +1,2 @@
|
|
1
|
-
|
2
|
-
import
|
3
|
-
type ActionIcon = {
|
4
|
-
id?: string;
|
5
|
-
icon?: CarbonIconType;
|
6
|
-
onKeyDown?(): void;
|
7
|
-
onClick?(): void;
|
8
|
-
iconDescription?: string;
|
9
|
-
href?: string;
|
10
|
-
};
|
11
|
-
type overflowAction = {
|
12
|
-
id?: string;
|
13
|
-
itemText?: string;
|
14
|
-
onClick?: () => void;
|
15
|
-
onKeydown?: () => void;
|
16
|
-
};
|
17
|
-
type PlacementType = 'top' | 'bottom';
|
18
|
-
type ClickZoneType = 'one' | 'two' | 'three';
|
19
|
-
interface ProductiveCardProps extends PropsWithChildren {
|
20
|
-
/**
|
21
|
-
* Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
|
22
|
-
*/
|
23
|
-
actionIcons?: ActionIcon[];
|
24
|
-
/**
|
25
|
-
* Determines if the action icons are on the top or bottom of the card
|
26
|
-
*/
|
27
|
-
actionsPlacement?: PlacementType;
|
28
|
-
/**
|
29
|
-
* Content that shows in the body of the card
|
30
|
-
*/
|
31
|
-
/**
|
32
|
-
* Optional user provided class
|
33
|
-
*/
|
34
|
-
className?: string;
|
35
|
-
children: ReactNode;
|
36
|
-
/**
|
37
|
-
* Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
|
38
|
-
*/
|
39
|
-
clickZone?: ClickZoneType;
|
40
|
-
/**
|
41
|
-
* Optional header description
|
42
|
-
*/
|
43
|
-
description?: string | object | ReactNode;
|
44
|
-
/**
|
45
|
-
* Optional label for the top of the card
|
46
|
-
*/
|
47
|
-
label?: string | object | ReactNode;
|
48
|
-
/**
|
49
|
-
* Provides the callback for a clickable card
|
50
|
-
*/
|
51
|
-
onClick?: () => void;
|
52
|
-
/**
|
53
|
-
* Function that's called from the primary button or action icon
|
54
|
-
*/
|
55
|
-
onPrimaryButtonClick?: () => void;
|
56
|
-
/**
|
57
|
-
* Function that's called from the secondary button
|
58
|
-
*/
|
59
|
-
onSecondaryButtonClick?: () => void;
|
60
|
-
/**
|
61
|
-
* Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
|
62
|
-
*/
|
63
|
-
overflowActions?: overflowAction[];
|
64
|
-
/**
|
65
|
-
* Aria label prop required for OverflowMenu
|
66
|
-
*/
|
67
|
-
overflowAriaLabel?: string;
|
68
|
-
/**
|
69
|
-
* Optionally specify an href for your Button to become an <a> element
|
70
|
-
*/
|
71
|
-
primaryButtonHref?: string;
|
72
|
-
/**
|
73
|
-
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
74
|
-
*/
|
75
|
-
primaryButtonIcon?: CarbonIconType;
|
76
|
-
/**
|
77
|
-
* Determines if the primary button is on the top or bottom of the card
|
78
|
-
*/
|
79
|
-
primaryButtonPlacement?: PlacementType;
|
80
|
-
/**
|
81
|
-
* The text that's displayed in the primary button
|
82
|
-
*/
|
83
|
-
primaryButtonText?: string;
|
84
|
-
/**
|
85
|
-
* Optionally specify an href for your Button to become an <a> element
|
86
|
-
*/
|
87
|
-
secondaryButtonHref?: string;
|
88
|
-
/**
|
89
|
-
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
90
|
-
*/
|
91
|
-
secondaryButtonIcon?: CarbonIconType;
|
92
|
-
/**
|
93
|
-
* Determines if the secondary button is on the top or bottom of the card
|
94
|
-
*/
|
95
|
-
secondaryButtonPlacement?: PlacementType;
|
96
|
-
/**
|
97
|
-
* The text that's displayed in the secondary button
|
98
|
-
*/
|
99
|
-
secondaryButtonText?: string;
|
100
|
-
/**
|
101
|
-
* **Experimental:** For all cases a `Slug` component can be provided.
|
102
|
-
* Clickable tiles only accept a boolean value of true and display a hollow slug.
|
103
|
-
*/
|
104
|
-
slug?: ReactNode | boolean;
|
105
|
-
/**
|
106
|
-
* Title that's displayed at the top of the card
|
107
|
-
*/
|
108
|
-
title?: string | object | ReactNode;
|
109
|
-
/**
|
110
|
-
* Determines title size
|
111
|
-
*/
|
112
|
-
titleSize?: 'default' | 'large';
|
113
|
-
}
|
114
|
-
export declare let ProductiveCard: React.ForwardRefExoticComponent<ProductiveCardProps & React.RefAttributes<HTMLDivElement>>;
|
115
|
-
export {};
|
1
|
+
export let ProductiveCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
|
2
|
+
import React from 'react';
|
@@ -23,16 +23,22 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
23
23
|
|
24
24
|
var _excluded = ["actionsPlacement"];
|
25
25
|
var componentName = 'ProductiveCard';
|
26
|
+
|
27
|
+
// Default values for props
|
28
|
+
var defaults = {
|
29
|
+
actionsPlacement: 'top'
|
30
|
+
};
|
26
31
|
exports.ProductiveCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
27
32
|
var _ref$actionsPlacement = _ref.actionsPlacement,
|
28
|
-
actionsPlacement = _ref$actionsPlacement === void 0 ?
|
33
|
+
actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
|
29
34
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
30
35
|
var validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
|
31
36
|
return /*#__PURE__*/React__default["default"].createElement(Card.Card, _rollupPluginBabelHelpers["extends"]({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, validProps), {}, {
|
32
37
|
actionsPlacement: actionsPlacement,
|
33
|
-
ref: ref
|
38
|
+
ref: ref
|
39
|
+
}), {
|
34
40
|
productive: true
|
35
|
-
}
|
41
|
+
}, devtools.getDevtoolsProps(componentName)));
|
36
42
|
});
|
37
43
|
|
38
44
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -41,7 +47,6 @@ exports.ProductiveCard.propTypes = {
|
|
41
47
|
/**
|
42
48
|
* Icons that are displayed on card. Refer to design documentation for implementation guidelines
|
43
49
|
*/
|
44
|
-
/**@ts-ignore */
|
45
50
|
actionIcons: index["default"].arrayOf(index["default"].shape({
|
46
51
|
id: index["default"].string,
|
47
52
|
icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
|
@@ -89,7 +94,6 @@ exports.ProductiveCard.propTypes = {
|
|
89
94
|
/**
|
90
95
|
* Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
|
91
96
|
*/
|
92
|
-
/**@ts-ignore */
|
93
97
|
overflowActions: index["default"].arrayOf(index["default"].shape({
|
94
98
|
id: index["default"].string,
|
95
99
|
itemText: index["default"].string,
|
@@ -107,7 +111,6 @@ exports.ProductiveCard.propTypes = {
|
|
107
111
|
/**
|
108
112
|
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
109
113
|
*/
|
110
|
-
/**@ts-ignore */
|
111
114
|
primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
|
112
115
|
/**
|
113
116
|
* Determines if the primary button is on the top or bottom of the card
|
@@ -116,7 +119,6 @@ exports.ProductiveCard.propTypes = {
|
|
116
119
|
/**
|
117
120
|
* The text that's displayed in the primary button
|
118
121
|
*/
|
119
|
-
/**@ts-ignore */
|
120
122
|
primaryButtonText: index["default"].node,
|
121
123
|
/**
|
122
124
|
* Optionally specify an href for your Button to become an <a> element
|
@@ -125,7 +127,6 @@ exports.ProductiveCard.propTypes = {
|
|
125
127
|
/**
|
126
128
|
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
127
129
|
*/
|
128
|
-
/**@ts-ignore */
|
129
130
|
secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
|
130
131
|
/**
|
131
132
|
* Determines if the secondary button is on the top or bottom of the card
|
@@ -134,7 +135,6 @@ exports.ProductiveCard.propTypes = {
|
|
134
135
|
/**
|
135
136
|
* The text that's displayed in the secondary button
|
136
137
|
*/
|
137
|
-
/**@ts-ignore */
|
138
138
|
secondaryButtonText: index["default"].node,
|
139
139
|
/**
|
140
140
|
* **Experimental:** For all cases a `Slug` component can be provided.
|
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.41.1-canary.
|
4
|
+
"version": "2.41.1-canary.8+51226bf58",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -96,7 +96,7 @@
|
|
96
96
|
"dependencies": {
|
97
97
|
"@babel/runtime": "^7.23.9",
|
98
98
|
"@carbon/feature-flags": "^0.20.0",
|
99
|
-
"@carbon/ibm-products-styles": "^2.38.
|
99
|
+
"@carbon/ibm-products-styles": "^2.38.1-canary.8+51226bf58",
|
100
100
|
"@carbon/telemetry": "^0.1.0",
|
101
101
|
"@dnd-kit/core": "^6.0.8",
|
102
102
|
"@dnd-kit/modifiers": "^7.0.0",
|
@@ -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": "
|
123
|
+
"gitHead": "51226bf58e4a0593e41cfcb37192784b8a6291c6"
|
124
124
|
}
|