carbon-addons-iot-react 5.14.0 → 5.15.0

package/es/components/Card/Card.js

@@ -36,7 +36,7 @@ import CardToolbar from './CardToolbar.js';
 import { CardTitle } from './CardTitle.js';
 
 var _excluded = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
-  _excluded2 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "hideTitle", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels"];
+  _excluded2 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "hideTitle", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels", "backgroundGradient", "theme"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var prefix = settings.prefix,
@@ -186,6 +186,7 @@ var defaultProps = {
   isExpanded: false,
   /** performance option: only render the content of the card to the ReactDOM if the card is visible on screen */
   isLazyLoading: false,
+  theme: 'light',
   /** For now we will hide the per card actions when we're editing */
   availableActions: {
     edit: false,
@@ -254,7 +255,8 @@ var defaultProps = {
   type: null,
   data: null,
   content: null,
-  shouldUseTranslatedLabels: false
+  shouldUseTranslatedLabels: false,
+  backgroundGradient: null
 };
 
 /** Dumb component that renders the card basics */
@@ -304,6 +306,8 @@ var Card = function Card(props) {
     extraHeaderContent = props.extraHeaderContent,
     timeZone = props.timeZone,
     shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
+    backgroundGradient = props.backgroundGradient,
+    theme = props.theme,
     others = _objectWithoutProperties(props, _excluded2);
   var effectiveTimezone = timeZone || dayjs.tz.guess();
   dayjs.tz.setDefault(effectiveTimezone);
@@ -435,11 +439,15 @@ var Card = function Card(props) {
     id: id,
     dimensions: dimensions,
     isExpanded: isExpanded,
-    style: !isExpanded ? style : {
+    style: !isExpanded ? _objectSpread(_objectSpread({}, style), backgroundGradient && {
+      background: backgroundGradient
+    }) : _objectSpread({
       height: 'calc(100% - 50px)',
       width: 'calc(100% - 50px)'
-    },
-    className: classnames("".concat(iotPrefix, "--card"), className, _defineProperty({}, "".concat(iotPrefix, "--card--resizing"), isResizing))
+    }, backgroundGradient && {
+      background: backgroundGradient
+    }),
+    className: classnames("".concat(iotPrefix, "--card"), "".concat(iotPrefix, "--card--").concat(theme), className, _defineProperty({}, "".concat(iotPrefix, "--card--resizing"), isResizing))
   }), !hideHeader && !hideTitle && /*#__PURE__*/React__default.createElement(CardHeader
   // TODO: remove deprecated testID prop in v3
   , {
@@ -618,6 +626,13 @@ Card.__docgenInfo = {
       },
       "required": false
     },
+    "theme": {
+      "defaultValue": {
+        "value": "'light'",
+        "computed": false
+      },
+      "required": false
+    },
     "availableActions": {
       "defaultValue": {
         "value": "{\n  edit: false,\n  clone: false,\n  delete: false,\n  range: false,\n  expand: false,\n  settings: false,\n  extra: false,\n}",
@@ -813,6 +828,13 @@ Card.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "backgroundGradient": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]

package/es/constants/CardPropTypes.js

@@ -786,7 +786,11 @@ var CardPropTypes = {
   }),
   /** If set to true it will render outside of the current DOM in a portal, otherwise render as a child */
   renderDateDropdownInPortal: PropTypes.bool,
-  extraHeaderContent: PropTypes.element
+  extraHeaderContent: PropTypes.element,
+  /** CSS gradient value to apply as the card background. */
+  backgroundGradient: PropTypes.string,
+  /** Theme for the card. Can be 'light' or 'dark' */
+  theme: PropTypes.oneOf(['light', 'dark'])
 };
 
 export { AttributePropTypes, BarChartCardPropTypes, CHART_COLORS, CardDimensionPropTypes, CardDimensionsPropTypes, CardPropTypes, CardSizesToDimensionsPropTypes, ComboChartPropTypes, DATE_PICKER_OPTIONS, DashboardBreakpointsPropTypes, DashboardColumnsPropTypes, DashboardLayoutPropTypes, GaugeCardPropTypes, ImageCardPropTypes, ImageCardValuesPropType, MapCardPropTypes, MapControlPropType, MeterChartCardPropTypes, PieCardPropTypes, RowHeightPropTypes, SparklineChartCardPropTypes, StackedAreaChartCardPropTypes, TableCardPropTypes, TimeRangeOptionsPropTypes, TruncationPropTypes, ValueContentPropTypes, ZoomBarPropTypes };

package/lib/components/Card/Card.js

@@ -51,7 +51,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var warning__default = /*#__PURE__*/_interopDefault(warning);
 
 var _excluded = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
-  _excluded2 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "hideTitle", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels"];
+  _excluded2 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "hideTitle", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels", "backgroundGradient", "theme"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var prefix = Settings.settings.prefix,
@@ -201,6 +201,7 @@ var defaultProps = {
   isExpanded: false,
   /** performance option: only render the content of the card to the ReactDOM if the card is visible on screen */
   isLazyLoading: false,
+  theme: 'light',
   /** For now we will hide the per card actions when we're editing */
   availableActions: {
     edit: false,
@@ -269,7 +270,8 @@ var defaultProps = {
   type: null,
   data: null,
   content: null,
-  shouldUseTranslatedLabels: false
+  shouldUseTranslatedLabels: false,
+  backgroundGradient: null
 };
 
 /** Dumb component that renders the card basics */
@@ -319,6 +321,8 @@ var Card = function Card(props) {
     extraHeaderContent = props.extraHeaderContent,
     timeZone = props.timeZone,
     shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
+    backgroundGradient = props.backgroundGradient,
+    theme = props.theme,
     others = _objectWithoutProperties__default.default(props, _excluded2);
   var effectiveTimezone = timeZone || dayjs.default.tz.guess();
   dayjs.default.tz.setDefault(effectiveTimezone);
@@ -450,11 +454,15 @@ var Card = function Card(props) {
     id: id,
     dimensions: dimensions,
     isExpanded: isExpanded,
-    style: !isExpanded ? style : {
+    style: !isExpanded ? _objectSpread(_objectSpread({}, style), backgroundGradient && {
+      background: backgroundGradient
+    }) : _objectSpread({
       height: 'calc(100% - 50px)',
       width: 'calc(100% - 50px)'
-    },
-    className: classnames__default.default("".concat(iotPrefix, "--card"), className, _defineProperty__default.default({}, "".concat(iotPrefix, "--card--resizing"), isResizing))
+    }, backgroundGradient && {
+      background: backgroundGradient
+    }),
+    className: classnames__default.default("".concat(iotPrefix, "--card"), "".concat(iotPrefix, "--card--").concat(theme), className, _defineProperty__default.default({}, "".concat(iotPrefix, "--card--resizing"), isResizing))
   }), !hideHeader && !hideTitle && /*#__PURE__*/React__default.default.createElement(CardHeader
   // TODO: remove deprecated testID prop in v3
   , {
@@ -633,6 +641,13 @@ Card.__docgenInfo = {
       },
       "required": false
     },
+    "theme": {
+      "defaultValue": {
+        "value": "'light'",
+        "computed": false
+      },
+      "required": false
+    },
     "availableActions": {
       "defaultValue": {
         "value": "{\n  edit: false,\n  clone: false,\n  delete: false,\n  range: false,\n  expand: false,\n  settings: false,\n  extra: false,\n}",
@@ -828,6 +843,13 @@ Card.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "backgroundGradient": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]

package/lib/constants/CardPropTypes.js

@@ -793,7 +793,11 @@ var CardPropTypes = {
   }),
   /** If set to true it will render outside of the current DOM in a portal, otherwise render as a child */
   renderDateDropdownInPortal: PropTypes__default.default.bool,
-  extraHeaderContent: PropTypes__default.default.element
+  extraHeaderContent: PropTypes__default.default.element,
+  /** CSS gradient value to apply as the card background. */
+  backgroundGradient: PropTypes__default.default.string,
+  /** Theme for the card. Can be 'light' or 'dark' */
+  theme: PropTypes__default.default.oneOf(['light', 'dark'])
 };
 
 exports.AttributePropTypes = AttributePropTypes;

package/lib/css/carbon-addons-iot-react.css

@@ -9254,6 +9254,14 @@ html[dir=rtl] .breadcrumb--container .cds--breadcrumb-item:last-child::after {
   outline-offset: -2px;
 }
 
+.iot--card--dark .iot--card--toolbar button.cds--overflow-menu svg {
+  fill: white;
+}
+
+.iot--card--dark .iot--card--toolbar button.cds--overflow-menu.cds--overflow-menu--open svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+
 .iot--card--title {
   align-items: center;
   display: flex;
@@ -9371,6 +9379,13 @@ html[dir=rtl] .iot--card--subtitle--text--padded {
   cursor: pointer;
 }
 
+.iot--card--dark .iot--card--title--text {
+  color: var(--cds-text-on-color, #ffffff);
+}
+.iot--card--dark .iot--card--subtitle--text {
+  color: var(--cds-text-on-color, #ffffff);
+}
+
 .iot--data-state-container {
   padding: 0 var(--container-padding);
   width: inherit;