carbon-addons-iot-react 5.16.0 → 5.17.0

package/es/components/PageWizard/PageWizard.js

@@ -166,7 +166,7 @@ var PageWizard = function PageWizard(_ref) {
         subStep = _ref2.subStep,
         disabled = _ref2.disabled,
         invalid = _ref2.invalid,
-        pictogramName = _ref2.pictogramName,
+        pictogram = _ref2.pictogram,
         isComplete = _ref2.isComplete;
       if (!subStep) {
         array.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
@@ -181,8 +181,8 @@ var PageWizard = function PageWizard(_ref) {
           disabled: disabled
         }), invalid && {
           invalid: invalid
-        }), pictogramName && {
-          pictogramName: pictogramName
+        }), pictogram && {
+          pictogram: pictogram
         }), {}, {
           isComplete: isComplete
         }));
@@ -203,8 +203,8 @@ var PageWizard = function PageWizard(_ref) {
           disabled: disabled
         }), invalid && {
           invalid: invalid
-        }), pictogramName && {
-          pictogramName: pictogramName
+        }), pictogram && {
+          pictogram: pictogram
         }), {}, {
           isComplete: isComplete
         }));

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -15,7 +15,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Enter, Space } from '../../node_modules/@carbon/react/es/internal/keyboard/keys.js';
 import { matches } from '../../node_modules/@carbon/react/es/internal/keyboard/match.js';
-import * as Pictograms from '@carbon/pictograms-react';
 import { settings } from '../../constants/Settings.js';
 import { CheckmarkOutline, Warning, CircleFilled, RadioButton } from '@carbon/icons-react';
 
@@ -41,7 +40,7 @@ var ProgressStep = function ProgressStep(_ref) {
     mainStep = _ref.mainStep,
     subStep = _ref.subStep,
     spaceEqually = _ref.spaceEqually,
-    pictogramName = _ref.pictogramName,
+    PictogramComponent = _ref.PictogramComponent,
     hasPictogram = _ref.hasPictogram,
     highlightConnectorLinesToShowProgress = _ref.highlightConnectorLinesToShowProgress;
   var accessible = isClickable && !disabled && !current;
@@ -142,9 +141,6 @@ var ProgressStep = function ProgressStep(_ref) {
     // for testing purposes
     var dataTestIdLabel = label.replace(/\s/g, '-').toLowerCase();
     var type = mainStep ? 'main' : 'sub';
-
-    // get pictogram component from name passed in items array via pictogramName property
-    var PictogramComponent = pictogramName !== null && pictogramName !== void 0 && pictogramName.length ? Pictograms[pictogramName] : null;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null,
     // reserve space in all steps if even one pictogram is showing to align all the steps correctly
     hasPictogram && /*#__PURE__*/React__default.createElement("div", {
@@ -188,7 +184,7 @@ ProgressStep.propTypes = {
   subStep: PropTypes.bool,
   onClick: PropTypes.func,
   spaceEqually: PropTypes.bool,
-  pictogramName: PropTypes.string,
+  PictogramComponent: PropTypes.node,
   hasPictogram: PropTypes.bool,
   /** When true, all connector lines are highlighted blue to show progress */
   highlightConnectorLinesToShowProgress: PropTypes.bool
@@ -212,7 +208,7 @@ ProgressStep.defaultProps = {
   subStep: false,
   onClick: null,
   spaceEqually: false,
-  pictogramName: null,
+  PictogramComponent: null,
   hasPictogram: false,
   /** default false, all connector lines are highlighted grey to show progress */
   highlightConnectorLinesToShowProgress: true
@@ -286,8 +282,8 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
 
   // check if any pictogram is to be shown, this will modify styling of all the steps
   var hasPictogram = newItems.some(function (_ref3) {
-    var pictogramName = _ref3.pictogramName;
-    return (pictogramName === null || pictogramName === void 0 ? void 0 : pictogramName.length) && typeof Pictograms[pictogramName] !== 'undefined';
+    var pictogram = _ref3.pictogram;
+    return !!pictogram;
   });
   return newItems.length > 1 ? /*#__PURE__*/React__default.createElement("ul", {
     className: classes,
@@ -301,7 +297,7 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
       invalid = _ref4.invalid,
       stepNumber = _ref4.stepNumber,
       level = _ref4.level,
-      pictogramName = _ref4.pictogramName,
+      pictogram = _ref4.pictogram,
       isComplete = _ref4.isComplete;
     return /*#__PURE__*/React__default.createElement(ProgressStep, {
       id: id,
@@ -326,7 +322,7 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
       invalid: invalid,
       isClickable: isClickable,
       spaceEqually: spaceEqually,
-      pictogramName: pictogramName,
+      PictogramComponent: pictogram,
       hasPictogram: hasPictogram,
       highlightConnectorLinesToShowProgress: highlightConnectorLinesToShowProgress
     });
@@ -341,7 +337,7 @@ ProgressIndicator.propTypes = {
     description: PropTypes.string,
     disabled: PropTypes.bool,
     invalid: PropTypes.bool,
-    pictogramName: PropTypes.string
+    pictogram: PropTypes.node
   })),
   currentItemId: IDPropTypes,
   showLabels: PropTypes.bool,
@@ -421,8 +417,8 @@ ProgressIndicator.__docgenInfo = {
               "name": "bool",
               "required": false
             },
-            "pictogramName": {
-              "name": "string",
+            "pictogram": {
+              "name": "node",
               "required": false
             }
           }

package/es/constants/LayoutConstants.js

@@ -23,6 +23,8 @@ var CARD_SIZES = {
   LARGE: 'LARGE',
   LARGETHICK: 'LARGETHICK',
   LARGEWIDE: 'LARGEWIDE',
+  LARGE_WIDE_TALL: 'LARGE_WIDE_TALL',
+  LARGE_WIDE_XTALL: 'LARGE_WIDE_XTALL',
   FULL: 'FULL'
 };
 var LEGACY_CARD_SIZES = _objectSpread({
@@ -579,6 +581,58 @@ var CARD_DIMENSIONS = {
       w: 4,
       h: 11
     }
+  },
+  LARGE_WIDE_TALL: {
+    max: {
+      w: 16,
+      h: 6
+    },
+    xl: {
+      w: 16,
+      h: 6
+    },
+    lg: {
+      w: 16,
+      h: 6
+    },
+    md: {
+      w: 8,
+      h: 6
+    },
+    sm: {
+      w: 4,
+      h: 4
+    },
+    xs: {
+      w: 4,
+      h: 4
+    }
+  },
+  LARGE_WIDE_XTALL: {
+    max: {
+      w: 16,
+      h: 8
+    },
+    xl: {
+      w: 16,
+      h: 8
+    },
+    lg: {
+      w: 16,
+      h: 8
+    },
+    md: {
+      w: 8,
+      h: 8
+    },
+    sm: {
+      w: 4,
+      h: 4
+    },
+    xs: {
+      w: 4,
+      h: 4
+    }
   }
 };
 var CARD_LAYOUTS = {

package/lib/components/PageWizard/PageWizard.js

@@ -177,7 +177,7 @@ var PageWizard = function PageWizard(_ref) {
         subStep = _ref2.subStep,
         disabled = _ref2.disabled,
         invalid = _ref2.invalid,
-        pictogramName = _ref2.pictogramName,
+        pictogram = _ref2.pictogram,
         isComplete = _ref2.isComplete;
       if (!subStep) {
         array.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
@@ -192,8 +192,8 @@ var PageWizard = function PageWizard(_ref) {
           disabled: disabled
         }), invalid && {
           invalid: invalid
-        }), pictogramName && {
-          pictogramName: pictogramName
+        }), pictogram && {
+          pictogram: pictogram
         }), {}, {
           isComplete: isComplete
         }));
@@ -214,8 +214,8 @@ var PageWizard = function PageWizard(_ref) {
           disabled: disabled
         }), invalid && {
           invalid: invalid
-        }), pictogramName && {
-          pictogramName: pictogramName
+        }), pictogram && {
+          pictogram: pictogram
         }), {}, {
           isComplete: isComplete
         }));

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -17,36 +17,16 @@ var PropTypes = require('prop-types');
 var classnames = require('classnames');
 var keys = require('../../node_modules/@carbon/react/es/internal/keyboard/keys.js');
 var match = require('../../node_modules/@carbon/react/es/internal/keyboard/match.js');
-var Pictograms = require('@carbon/pictograms-react');
 var Settings = require('../../constants/Settings.js');
 var iconsReact = require('@carbon/icons-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var Pictograms__namespace = /*#__PURE__*/_interopNamespace(Pictograms);
 
 var iotPrefix = Settings.settings.iotPrefix;
 var IDPropTypes = PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]);
@@ -70,7 +50,7 @@ var ProgressStep = function ProgressStep(_ref) {
     mainStep = _ref.mainStep,
     subStep = _ref.subStep,
     spaceEqually = _ref.spaceEqually,
-    pictogramName = _ref.pictogramName,
+    PictogramComponent = _ref.PictogramComponent,
     hasPictogram = _ref.hasPictogram,
     highlightConnectorLinesToShowProgress = _ref.highlightConnectorLinesToShowProgress;
   var accessible = isClickable && !disabled && !current;
@@ -171,9 +151,6 @@ var ProgressStep = function ProgressStep(_ref) {
     // for testing purposes
     var dataTestIdLabel = label.replace(/\s/g, '-').toLowerCase();
     var type = mainStep ? 'main' : 'sub';
-
-    // get pictogram component from name passed in items array via pictogramName property
-    var PictogramComponent = pictogramName !== null && pictogramName !== void 0 && pictogramName.length ? Pictograms__namespace[pictogramName] : null;
     return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null,
     // reserve space in all steps if even one pictogram is showing to align all the steps correctly
     hasPictogram && /*#__PURE__*/React__default.default.createElement("div", {
@@ -217,7 +194,7 @@ ProgressStep.propTypes = {
   subStep: PropTypes__default.default.bool,
   onClick: PropTypes__default.default.func,
   spaceEqually: PropTypes__default.default.bool,
-  pictogramName: PropTypes__default.default.string,
+  PictogramComponent: PropTypes__default.default.node,
   hasPictogram: PropTypes__default.default.bool,
   /** When true, all connector lines are highlighted blue to show progress */
   highlightConnectorLinesToShowProgress: PropTypes__default.default.bool
@@ -241,7 +218,7 @@ ProgressStep.defaultProps = {
   subStep: false,
   onClick: null,
   spaceEqually: false,
-  pictogramName: null,
+  PictogramComponent: null,
   hasPictogram: false,
   /** default false, all connector lines are highlighted grey to show progress */
   highlightConnectorLinesToShowProgress: true
@@ -315,8 +292,8 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
 
   // check if any pictogram is to be shown, this will modify styling of all the steps
   var hasPictogram = newItems.some(function (_ref3) {
-    var pictogramName = _ref3.pictogramName;
-    return (pictogramName === null || pictogramName === void 0 ? void 0 : pictogramName.length) && typeof Pictograms__namespace[pictogramName] !== 'undefined';
+    var pictogram = _ref3.pictogram;
+    return !!pictogram;
   });
   return newItems.length > 1 ? /*#__PURE__*/React__default.default.createElement("ul", {
     className: classes,
@@ -330,7 +307,7 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
       invalid = _ref4.invalid,
       stepNumber = _ref4.stepNumber,
       level = _ref4.level,
-      pictogramName = _ref4.pictogramName,
+      pictogram = _ref4.pictogram,
       isComplete = _ref4.isComplete;
     return /*#__PURE__*/React__default.default.createElement(ProgressStep, {
       id: id,
@@ -355,7 +332,7 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
       invalid: invalid,
       isClickable: isClickable,
       spaceEqually: spaceEqually,
-      pictogramName: pictogramName,
+      PictogramComponent: pictogram,
       hasPictogram: hasPictogram,
       highlightConnectorLinesToShowProgress: highlightConnectorLinesToShowProgress
     });
@@ -370,7 +347,7 @@ ProgressIndicator.propTypes = {
     description: PropTypes__default.default.string,
     disabled: PropTypes__default.default.bool,
     invalid: PropTypes__default.default.bool,
-    pictogramName: PropTypes__default.default.string
+    pictogram: PropTypes__default.default.node
   })),
   currentItemId: IDPropTypes,
   showLabels: PropTypes__default.default.bool,
@@ -450,8 +427,8 @@ ProgressIndicator.__docgenInfo = {
               "name": "bool",
               "required": false
             },
-            "pictogramName": {
-              "name": "string",
+            "pictogram": {
+              "name": "node",
               "required": false
             }
           }

package/lib/constants/LayoutConstants.js

@@ -29,6 +29,8 @@ var CARD_SIZES = {
   LARGE: 'LARGE',
   LARGETHICK: 'LARGETHICK',
   LARGEWIDE: 'LARGEWIDE',
+  LARGE_WIDE_TALL: 'LARGE_WIDE_TALL',
+  LARGE_WIDE_XTALL: 'LARGE_WIDE_XTALL',
   FULL: 'FULL'
 };
 var LEGACY_CARD_SIZES = _objectSpread({
@@ -585,6 +587,58 @@ var CARD_DIMENSIONS = {
       w: 4,
       h: 11
     }
+  },
+  LARGE_WIDE_TALL: {
+    max: {
+      w: 16,
+      h: 6
+    },
+    xl: {
+      w: 16,
+      h: 6
+    },
+    lg: {
+      w: 16,
+      h: 6
+    },
+    md: {
+      w: 8,
+      h: 6
+    },
+    sm: {
+      w: 4,
+      h: 4
+    },
+    xs: {
+      w: 4,
+      h: 4
+    }
+  },
+  LARGE_WIDE_XTALL: {
+    max: {
+      w: 16,
+      h: 8
+    },
+    xl: {
+      w: 16,
+      h: 8
+    },
+    lg: {
+      w: 16,
+      h: 8
+    },
+    md: {
+      w: 8,
+      h: 8
+    },
+    sm: {
+      w: 4,
+      h: 4
+    },
+    xs: {
+      w: 4,
+      h: 4
+    }
   }
 };
 var CARD_LAYOUTS = {

package/package.json

@@ -353,7 +353,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "5.16.0",
+  "version": "5.17.0",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",