@carbon/ibm-products 2.41.1-canary.8 → 2.41.1-canary.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/es/components/EditUpdateCards/EditUpdateCards.d.ts +4 -3
  2. package/es/components/ProductiveCard/ProductiveCard.d.ts +115 -2
  3. package/es/components/ProductiveCard/ProductiveCard.js +9 -9
  4. package/lib/components/EditUpdateCards/EditUpdateCards.d.ts +4 -3
  5. package/lib/components/ProductiveCard/ProductiveCard.d.ts +115 -2
  6. package/lib/components/ProductiveCard/ProductiveCard.js +9 -9
  7. package/package.json +3 -3
package/es/components/EditUpdateCards/EditUpdateCards.d.ts CHANGED
@@ -14,6 +14,7 @@ type ActionIcon = {
14
14
  iconDescription: string;
15
15
  href?: string;
16
16
  };
17
+ type PlacementType = 'top' | 'bottom';
17
18
  interface EditUpdateCardsProps {
18
19
  /**
19
20
  * Icons that are displayed on card. Refer to design documentation for implementation guidelines
@@ -22,7 +23,7 @@ interface EditUpdateCardsProps {
22
23
  /**
23
24
  * Determines if the action icons are on the top or bottom of the card
24
25
  */
25
- actionsPlacement?: 'top' | 'bottom';
26
+ actionsPlacement?: PlacementType;
26
27
  /**
27
28
  * Optional label for the top of the card.
28
29
  */
@@ -66,7 +67,7 @@ interface EditUpdateCardsProps {
66
67
  /**
67
68
  * Determines if the primary button is on the top or bottom of the card
68
69
  */
69
- primaryButtonPlacement?: 'top' | 'bottom';
70
+ primaryButtonPlacement?: PlacementType;
70
71
  /**
71
72
  * The text that's displayed in the primary button
72
73
  */
@@ -86,7 +87,7 @@ interface EditUpdateCardsProps {
86
87
  /**
87
88
  * Determines if the secondary button is on the top or bottom of the card
88
89
  */
89
- secondaryButtonPlacement?: 'top' | 'bottom';
90
+ secondaryButtonPlacement?: PlacementType;
90
91
  /**
91
92
  * The text that's displayed in the secondary button
92
93
  */
package/es/components/ProductiveCard/ProductiveCard.d.ts CHANGED
@@ -1,2 +1,115 @@
1
- export let ProductiveCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
2
- import React from 'react';
1
+ import React, { PropsWithChildren, ReactNode } from 'react';
2
+ import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
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 {};
package/es/components/ProductiveCard/ProductiveCard.js CHANGED
@@ -15,22 +15,16 @@ 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
- };
23
18
  var ProductiveCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
24
19
  var _ref$actionsPlacement = _ref.actionsPlacement,
25
- actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
20
+ actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
26
21
  rest = _objectWithoutProperties(_ref, _excluded);
27
22
  var validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
28
23
  return /*#__PURE__*/React__default.createElement(Card, _extends({}, _objectSpread2(_objectSpread2({}, validProps), {}, {
29
24
  actionsPlacement: actionsPlacement,
30
- ref: ref
31
- }), {
25
+ ref: ref,
32
26
  productive: true
33
- }, getDevtoolsProps(componentName)));
27
+ }), getDevtoolsProps(componentName)));
34
28
  });
35
29
 
36
30
  // Return a placeholder if not released and not enabled by feature flag
@@ -39,6 +33,7 @@ ProductiveCard.propTypes = {
39
33
  /**
40
34
  * Icons that are displayed on card. Refer to design documentation for implementation guidelines
41
35
  */
36
+ /**@ts-ignore */
42
37
  actionIcons: PropTypes.arrayOf(PropTypes.shape({
43
38
  id: PropTypes.string,
44
39
  icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -86,6 +81,7 @@ ProductiveCard.propTypes = {
86
81
  /**
87
82
  * Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
88
83
  */
84
+ /**@ts-ignore */
89
85
  overflowActions: PropTypes.arrayOf(PropTypes.shape({
90
86
  id: PropTypes.string,
91
87
  itemText: PropTypes.string,
@@ -103,6 +99,7 @@ ProductiveCard.propTypes = {
103
99
  /**
104
100
  * Optional prop to allow overriding the icon rendering. Can be a React component class
105
101
  */
102
+ /**@ts-ignore */
106
103
  primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
107
104
  /**
108
105
  * Determines if the primary button is on the top or bottom of the card
@@ -111,6 +108,7 @@ ProductiveCard.propTypes = {
111
108
  /**
112
109
  * The text that's displayed in the primary button
113
110
  */
111
+ /**@ts-ignore */
114
112
  primaryButtonText: PropTypes.node,
115
113
  /**
116
114
  * Optionally specify an href for your Button to become an <a> element
@@ -119,6 +117,7 @@ ProductiveCard.propTypes = {
119
117
  /**
120
118
  * Optional prop to allow overriding the icon rendering. Can be a React component class
121
119
  */
120
+ /**@ts-ignore */
122
121
  secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
123
122
  /**
124
123
  * Determines if the secondary button is on the top or bottom of the card
@@ -127,6 +126,7 @@ ProductiveCard.propTypes = {
127
126
  /**
128
127
  * The text that's displayed in the secondary button
129
128
  */
129
+ /**@ts-ignore */
130
130
  secondaryButtonText: PropTypes.node,
131
131
  /**
132
132
  * **Experimental:** For all cases a `Slug` component can be provided.
package/lib/components/EditUpdateCards/EditUpdateCards.d.ts CHANGED
@@ -14,6 +14,7 @@ type ActionIcon = {
14
14
  iconDescription: string;
15
15
  href?: string;
16
16
  };
17
+ type PlacementType = 'top' | 'bottom';
17
18
  interface EditUpdateCardsProps {
18
19
  /**
19
20
  * Icons that are displayed on card. Refer to design documentation for implementation guidelines
@@ -22,7 +23,7 @@ interface EditUpdateCardsProps {
22
23
  /**
23
24
  * Determines if the action icons are on the top or bottom of the card
24
25
  */
25
- actionsPlacement?: 'top' | 'bottom';
26
+ actionsPlacement?: PlacementType;
26
27
  /**
27
28
  * Optional label for the top of the card.
28
29
  */
@@ -66,7 +67,7 @@ interface EditUpdateCardsProps {
66
67
  /**
67
68
  * Determines if the primary button is on the top or bottom of the card
68
69
  */
69
- primaryButtonPlacement?: 'top' | 'bottom';
70
+ primaryButtonPlacement?: PlacementType;
70
71
  /**
71
72
  * The text that's displayed in the primary button
72
73
  */
@@ -86,7 +87,7 @@ interface EditUpdateCardsProps {
86
87
  /**
87
88
  * Determines if the secondary button is on the top or bottom of the card
88
89
  */
89
- secondaryButtonPlacement?: 'top' | 'bottom';
90
+ secondaryButtonPlacement?: PlacementType;
90
91
  /**
91
92
  * The text that's displayed in the secondary button
92
93
  */
package/lib/components/ProductiveCard/ProductiveCard.d.ts CHANGED
@@ -1,2 +1,115 @@
1
- export let ProductiveCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
2
- import React from 'react';
1
+ import React, { PropsWithChildren, ReactNode } from 'react';
2
+ import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
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 {};
package/lib/components/ProductiveCard/ProductiveCard.js CHANGED
@@ -23,22 +23,16 @@ 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
- };
31
26
  exports.ProductiveCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
32
27
  var _ref$actionsPlacement = _ref.actionsPlacement,
33
- actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
28
+ actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
34
29
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
35
30
  var validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
36
31
  return /*#__PURE__*/React__default["default"].createElement(Card.Card, _rollupPluginBabelHelpers["extends"]({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, validProps), {}, {
37
32
  actionsPlacement: actionsPlacement,
38
- ref: ref
39
- }), {
33
+ ref: ref,
40
34
  productive: true
41
- }, devtools.getDevtoolsProps(componentName)));
35
+ }), devtools.getDevtoolsProps(componentName)));
42
36
  });
43
37
 
44
38
  // Return a placeholder if not released and not enabled by feature flag
@@ -47,6 +41,7 @@ exports.ProductiveCard.propTypes = {
47
41
  /**
48
42
  * Icons that are displayed on card. Refer to design documentation for implementation guidelines
49
43
  */
44
+ /**@ts-ignore */
50
45
  actionIcons: index["default"].arrayOf(index["default"].shape({
51
46
  id: index["default"].string,
52
47
  icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
@@ -94,6 +89,7 @@ exports.ProductiveCard.propTypes = {
94
89
  /**
95
90
  * Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
96
91
  */
92
+ /**@ts-ignore */
97
93
  overflowActions: index["default"].arrayOf(index["default"].shape({
98
94
  id: index["default"].string,
99
95
  itemText: index["default"].string,
@@ -111,6 +107,7 @@ exports.ProductiveCard.propTypes = {
111
107
  /**
112
108
  * Optional prop to allow overriding the icon rendering. Can be a React component class
113
109
  */
110
+ /**@ts-ignore */
114
111
  primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
115
112
  /**
116
113
  * Determines if the primary button is on the top or bottom of the card
@@ -119,6 +116,7 @@ exports.ProductiveCard.propTypes = {
119
116
  /**
120
117
  * The text that's displayed in the primary button
121
118
  */
119
+ /**@ts-ignore */
122
120
  primaryButtonText: index["default"].node,
123
121
  /**
124
122
  * Optionally specify an href for your Button to become an <a> element
@@ -127,6 +125,7 @@ exports.ProductiveCard.propTypes = {
127
125
  /**
128
126
  * Optional prop to allow overriding the icon rendering. Can be a React component class
129
127
  */
128
+ /**@ts-ignore */
130
129
  secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
131
130
  /**
132
131
  * Determines if the secondary button is on the top or bottom of the card
@@ -135,6 +134,7 @@ exports.ProductiveCard.propTypes = {
135
134
  /**
136
135
  * The text that's displayed in the secondary button
137
136
  */
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.8+51226bf58",
4
+ "version": "2.41.1-canary.9+1a6cb2508",
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.1-canary.8+51226bf58",
99
+ "@carbon/ibm-products-styles": "^2.38.0",
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": "51226bf58e4a0593e41cfcb37192784b8a6291c6"
123
+ "gitHead": "1a6cb2508013be43018ba1a2a5325cf82b09e040"
124
124
  }