@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.10

package/lib/components/Datagrid/utils/getArgTypes.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARG_TYPES = void 0;
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ARG_TYPES = {
+  gridTitle: {
+    name: 'gridTitle',
+    control: 'text',
+    description: 'This sets the title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  gridDescription: {
+    name: 'gridDescription',
+    control: 'text',
+    description: 'This sets the description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateTitle: {
+    name: 'emptyStateTitle',
+    control: 'text',
+    description: 'This sets the empty state title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateDescription: {
+    name: 'emptyStateDescription',
+    control: 'text',
+    description: 'This sets the empty state description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateSize: {
+    control: 'select',
+    options: ['sm', 'lg']
+  },
+  useDenseHeader: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This sets the dense header option for the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSize: {
+    control: 'select',
+    options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    description: 'This sets the height for each row of the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSizes: {
+    control: 'object',
+    description: 'This array of objects specifies the different row size options that will render from the settings icon in the table actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  onRowSizeChange: {
+    description: 'Callback function that is called on row size changes. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowActions: {
+    control: 'object',
+    description: 'This array of objects renders the action buttons for each row in the Datagrid. _This value is set/passed inside of the `datagridState` object._',
+    action: 'Row action onClick'
+  },
+  batchActions: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This will allow the Datagrid component to use batch actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  expandedContentHeight: {
+    control: {
+      type: 'number'
+    },
+    description: 'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._'
+  },
+  customizeColumnsProps: {
+    control: 'object',
+    description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
+  }
+};
+exports.ARG_TYPES = ARG_TYPES;

package/lib/components/Datagrid/utils/getInlineEditColumns.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inlineEditSelectItems = exports.getInlineEditColumns = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icons = require("@carbon/react/icons");
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var inlineEditSelectItems = [{
+  id: 'option-0',
+  icon: function icon(props) {
+    return /*#__PURE__*/_react.default.createElement(_icons.ChartColumnFloating, (0, _extends2.default)({
+      size: 16
+    }, props));
+  },
+  text: 'Column Chart'
+}, {
+  id: 'option-1',
+  icon: function icon(props) {
+    return /*#__PURE__*/_react.default.createElement(_icons.ChartBubble, (0, _extends2.default)({
+      size: 16
+    }, props));
+  },
+  text: 'Bubble Chart'
+}, {
+  id: 'option-2',
+  icon: function icon(props) {
+    return /*#__PURE__*/_react.default.createElement(_icons.ChartVennDiagram, (0, _extends2.default)({
+      size: 16
+    }, props));
+  },
+  text: 'Venn Diagram'
+}];
+exports.inlineEditSelectItems = inlineEditSelectItems;
+
+var getInlineEditColumns = function getInlineEditColumns() {
+  return [{
+    Header: 'Row Index',
+    accessor: function accessor(row, i) {
+      return i;
+    },
+    id: 'rowIndex' // id is required when accessor is a function.
+
+  }, {
+    Header: 'First Name',
+    accessor: 'firstName',
+    inlineEdit: {
+      type: 'text',
+      // required for including validation, this is used to set the invalid prop internally
+      validator: function validator(n) {
+        return n.length > 40;
+      },
+      // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid text, character count must be less than 40'
+      }
+    }
+  }, {
+    Header: 'Last Name',
+    accessor: 'lastName',
+    inlineEdit: {
+      type: 'text',
+      // required for including validation, this is used to set the invalid prop internally
+      validator: function validator(n) {
+        return n.length > 40;
+      },
+      // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid text, character count must be less than 40'
+      }
+    }
+  }, {
+    Header: 'Age',
+    accessor: 'age',
+    width: 120,
+    inlineEdit: {
+      // required for including validation, this is used to set the invalid prop internally
+      validator: function validator(n) {
+        return n && n < 18;
+      },
+      type: 'number',
+      // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid number, must be 18 or greater'
+      }
+    }
+  }, {
+    Header: 'Visits',
+    accessor: 'visits',
+    width: 120,
+    inlineEdit: {
+      type: 'number',
+      inputProps: {} // These props are passed to the Carbon component used for inline editing
+
+    }
+  }, {
+    Header: 'Active since',
+    accessor: 'activeSince',
+    inlineEdit: {
+      type: 'date',
+      inputProps: {
+        // optionally pass props here to be passed through to Carbon's DatePicker component
+        onChange: function onChange(newDateObj, cell) {
+          console.log(newDateObj, cell);
+        },
+        // optionally pass props here to be passed through to Carbon's DatePickerInput component
+        datePickerInputProps: {
+          labelText: 'Change active since date'
+        }
+      }
+    }
+  }, {
+    Header: 'Chart type',
+    accessor: 'chartType',
+    inlineEdit: {
+      type: 'selection',
+      inputProps: {
+        // These props are passed to the Carbon component used for inline editing
+        items: inlineEditSelectItems,
+        onChange: function onChange(item) {
+          return console.log(item);
+        }
+      }
+    }
+  }, {
+    Header: 'Someone 2',
+    accessor: 'someone2'
+  }, {
+    Header: 'Someone 3',
+    accessor: 'someone3'
+  }, {
+    Header: 'Someone 4',
+    accessor: 'someone4'
+  }, {
+    Header: 'Someone 5',
+    accessor: 'someone5'
+  }, {
+    Header: 'Someone 6',
+    accessor: 'someone6'
+  }, {
+    Header: 'Someone 7',
+    accessor: 'someone7'
+  }, {
+    Header: 'Someone 8',
+    accessor: 'someone8'
+  }, {
+    Header: 'Someone 9',
+    accessor: 'someone9'
+  }, {
+    Header: 'Someone 10',
+    accessor: 'someone10'
+  }];
+};
+
+exports.getInlineEditColumns = getInlineEditColumns;

package/lib/components/Datagrid/utils/makeData.js

@@ -13,10 +13,27 @@ var _react = _interopRequireDefault(require("react"));
 
 var _namor = _interopRequireDefault(require("namor"));
 
+var _StatusIcon = require("../../StatusIcon");
+
+var _getInlineEditColumns = require("./getInlineEditColumns");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var getRandomInteger = function getRandomInteger(min, max, decimalPlaces) {
+  var roundedMin = Math.ceil(min);
+  var roundedMax = Math.floor(max);
+  var randomNumber = Math.random() * (max - min) + min;
+
+  if (!decimalPlaces) {
+    return Math.floor(Math.random() * (roundedMax - roundedMin + 1)) + roundedMin;
+  }
+
+  var power = Math.pow(10, decimalPlaces);
+  return Math.floor(randomNumber * power) / power;
+};
+
 var makeData = function makeData() {
   for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
     lens[_key] = arguments[_key];
@@ -49,8 +66,32 @@ var range = function range(len) {
 
 exports.range = range;
 
+var renderStatusIcon = function renderStatusIcon(statusChance) {
+  var iconProps = {
+    size: 'sm',
+    theme: 'light',
+    kind: statusChance > 0.66 ? 'critical' : statusChance > 0.33 ? 'minor-warning' : 'normal',
+    iconDescription: statusChance > 0.66 ? 'Critical' : statusChance > 0.33 ? 'Minor warning' : 'Normal'
+  };
+  return /*#__PURE__*/_react.default.createElement(_StatusIcon.StatusIcon, iconProps);
+};
+
+var renderDocLink = function renderDocLink(statusChance) {
+  var docLinkObj = {
+    href: statusChance > 0.66 ? 'http://carbondesignsystem.com/' : statusChance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
+    text: statusChance > 0.66 ? 'Carbon Design System' : statusChance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
+  };
+  return docLinkObj;
+};
+
 var newPerson = function newPerson() {
   var statusChance = Math.random();
+  var initialChartTypeIndex = getRandomInteger(0, 2);
+  var activeSinceDate = new Date();
+  var yesterdayDate = new Date();
+  yesterdayDate.setDate(yesterdayDate.getDate() - 1);
+  var twoDaysAgoDate = new Date();
+  twoDaysAgoDate.setDate(twoDaysAgoDate.getDate() - 2);
   return {
     firstName: _namor.default.generate({
       words: 1,
@@ -104,7 +145,7 @@ var newPerson = function newPerson() {
       numbers: 0
     }),
     someone11: _namor.default.generate({
-      words: 1,
+      words: 4,
       numbers: 0
     }),
     someone12: _namor.default.generate({
@@ -143,7 +184,12 @@ var newPerson = function newPerson() {
       words: 1,
       numbers: 0
     }),
-    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single'
+    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
+    chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
+    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
+    bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
+    status_icon: renderStatusIcon(statusChance),
+    doc_link: renderDocLink(statusChance)
   };
 };
 

package/lib/components/EditUpdateCards/EditUpdateCards.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditUpdateCards = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _devtools = require("../../global/js/utils/devtools");
+
+var _settings = require("../../settings");
+
+var _ProductiveCard = require("../ProductiveCard");
+
+var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "previewChildren", "title", "titleSize"];
+// import { children } from 'cheerio/lib/api/traversing';
+// Carbon and package components we use.
+
+/* TODO: @import(s) of carbon components and other package components. */
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--edit-update-cards");
+var componentName = 'EditUpdateCards'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+
+var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var actionIcons = _ref.actionIcons,
+      actionsPlacement = _ref.actionsPlacement,
+      className = _ref.className,
+      description = _ref.description,
+      editChildren = _ref.editChildren,
+      editMode = _ref.editMode,
+      label = _ref.label,
+      previewChildren = _ref.previewChildren,
+      title = _ref.title,
+      titleSize = _ref.titleSize,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // const [editMode, setEditMode] = useState(false);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
+    className, // Apply any supplied class names to the main HTML element.
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
+    ref: ref,
+    role: "main"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ProductiveCard.ProductiveCard, {
+    actionIcons: actionIcons,
+    actionsPlacement: actionsPlacement,
+    className: className,
+    description: description,
+    label: label,
+    title: title,
+    titleSize: titleSize
+  }, editMode === false && /*#__PURE__*/_react.default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/_react.default.createElement("div", null, editChildren)));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+
+exports.EditUpdateCards = EditUpdateCards;
+exports.EditUpdateCards = EditUpdateCards = _settings.pkg.checkComponentEnabled(EditUpdateCards, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+EditUpdateCards.displayName = componentName; // The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+
+EditUpdateCards.propTypes = {
+  /**
+   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   */
+  actionIcons: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    onKeyDown: _propTypes.default.func,
+    onClick: _propTypes.default.func,
+    iconDescription: _propTypes.default.string,
+    href: _propTypes.default.string
+  })),
+
+  /**
+   * Determines if the action icons are on the top or bottom of the card
+   */
+  actionsPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+
+  /**
+   * Optional label for the top of the card.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Optional header description
+   */
+  description: _propTypes.default.string,
+
+  /**
+   * Edit mode children
+   */
+  editChildren: _propTypes.default.node,
+
+  /**
+   * Edit mode
+   */
+  editMode: _propTypes.default.bool,
+
+  /**
+   * Optional label for the top of the card
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * Preview mode children
+   */
+  previewChildren: _propTypes.default.node,
+
+  /**
+   * Title that's displayed at the top of the card
+   */
+  title: _propTypes.default.string,
+
+  /**
+   * Determines title size
+   */
+  titleSize: _propTypes.default.oneOf(['default', 'large'])
+  /* TODO: add types and DocGen for all props. */
+
+};

package/lib/components/EditUpdateCards/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditUpdateCards", {
+  enumerable: true,
+  get: function get() {
+    return _EditUpdateCards.EditUpdateCards;
+  }
+});
+
+var _EditUpdateCards = require("./EditUpdateCards");

package/lib/components/ExportModal/ExportModal.js

@@ -23,7 +23,7 @@ var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -193,10 +193,10 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Loading, {
     small: true,
     withOverlay: false
-  }), /*#__PURE__*/_react.default.createElement("p", null, loadingMessage)), successful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, {
+  }), /*#__PURE__*/_react.default.createElement("p", null, loadingMessage)), successful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_icons.CheckmarkFilled, {
     size: 16,
     className: "".concat(blockClass, "__checkmark-icon")
-  }), /*#__PURE__*/_react.default.createElement("p", null, successMessage)), error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+  }), /*#__PURE__*/_react.default.createElement("p", null, successMessage)), error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_icons.ErrorFilled, {
     size: 16,
     className: "".concat(blockClass, "__error-icon")
   }), /*#__PURE__*/_react.default.createElement("p", null, errorMessage)))), !submitted && /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {

package/lib/components/ImportModal/ImportModal.js

@@ -25,7 +25,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react2 = require("@carbon/react");
 
@@ -100,9 +100,9 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     var acceptSet = new Set(accept);
     var name = file.name;
     var mimeType = file.type;
-    var extension = name.split('.').pop();
+    var extension = ".".concat(name.split('.').pop());
 
-    if (acceptSet.has(mimeType) || acceptSet.has(extension)) {
+    if (acceptSet.has(mimeType) || acceptSet.has(extension) || accept.length === 0) {
       return false;
     }
 
@@ -279,7 +279,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size: "sm",
     disabled: importButtonDisabled,
     renderIcon: inputButtonIcon ? function (props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Add, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Add, (0, _extends2.default)({
         size: 20
       }, props));
     } : null