@carbon/react 0.17.0 → 1.0.1

package/es/components/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className"];
+
+var _svg, _Step, _Step2, _Step3, _Step4;
+
+function Step() {
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: "".concat(prefix, "--progress-step ").concat(prefix, "--progress-step--incomplete")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--progress-step-button ").concat(prefix, "--progress-step-button--unclickable")
+  }, _svg || (_svg = /*#__PURE__*/React__default.createElement("svg", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"
+  }))), /*#__PURE__*/React__default.createElement("p", {
+    className: "".concat(prefix, "--progress-label")
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--progress-line")
+  })));
+}
+
+function ProgressIndicatorSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
+    className: cx("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), className)
+  }, rest), _Step || (_Step = /*#__PURE__*/React__default.createElement(Step, null)), _Step2 || (_Step2 = /*#__PURE__*/React__default.createElement(Step, null)), _Step3 || (_Step3 = /*#__PURE__*/React__default.createElement(Step, null)), _Step4 || (_Step4 = /*#__PURE__*/React__default.createElement(Step, null)));
+}
+
+ProgressIndicatorSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+
+export { ProgressIndicatorSkeleton as default };

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1,323 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { Component } from 'react';
+import cx from 'classnames';
+import { Warning, Incomplete, CheckmarkOutline, CircleDash } from '@carbon/icons-react';
+import { usePrefix, PrefixContext } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["label", "description", "className", "current", "complete", "invalid", "secondaryLabel", "disabled", "onClick", "translateWithId"],
+    _excluded2 = ["className", "currentIndex", "vertical", "spaceEqually"];
+var defaultTranslations = {
+  'carbon.progress-step.complete': 'Complete',
+  'carbon.progress-step.incomplete': 'Incomplete',
+  'carbon.progress-step.current': 'Current',
+  'carbon.progress-step.invalid': 'Invalid'
+};
+
+function translateWithId(messageId) {
+  return defaultTranslations[messageId];
+}
+
+function ProgressStep(_ref) {
+  var _classnames;
+
+  var label = _ref.label,
+      description = _ref.description,
+      className = _ref.className,
+      current = _ref.current,
+      complete = _ref.complete,
+      invalid = _ref.invalid,
+      secondaryLabel = _ref.secondaryLabel,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      t = _ref.translateWithId,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classes = cx((_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--progress-step"), true), _defineProperty(_classnames, "".concat(prefix, "--progress-step--current"), current), _defineProperty(_classnames, "".concat(prefix, "--progress-step--complete"), complete), _defineProperty(_classnames, "".concat(prefix, "--progress-step--incomplete"), !complete && !current), _defineProperty(_classnames, "".concat(prefix, "--progress-step--disabled"), disabled), _defineProperty(_classnames, className, className), _classnames));
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (matches(e, [Enter, Space])) {
+      onClick();
+    }
+  }; // eslint-disable-next-line react/prop-types
+
+
+  var SVGIcon = function SVGIcon(_ref2) {
+    var _title;
+
+    var complete = _ref2.complete,
+        current = _ref2.current,
+        description = _ref2.description,
+        invalid = _ref2.invalid,
+        prefix = _ref2.prefix;
+
+    if (invalid) {
+      return /*#__PURE__*/React__default.createElement(Warning, {
+        className: "".concat(prefix, "--progress__warning")
+      }, _title || (_title = /*#__PURE__*/React__default.createElement("title", null, description)));
+    }
+
+    if (current) {
+      return /*#__PURE__*/React__default.createElement(Incomplete, null, /*#__PURE__*/React__default.createElement("title", null, description));
+    }
+
+    if (complete) {
+      return /*#__PURE__*/React__default.createElement(CheckmarkOutline, null, /*#__PURE__*/React__default.createElement("title", null, description));
+    }
+
+    return /*#__PURE__*/React__default.createElement(CircleDash, null, /*#__PURE__*/React__default.createElement("title", null, description));
+  };
+
+  var message = t('carbon.progress-step.incomplete');
+
+  if (current) {
+    message = t('carbon.progress-step.current');
+  }
+
+  if (complete) {
+    message = t('carbon.progress-step.complete');
+  }
+
+  if (invalid) {
+    message = t('carbon.progress-step.invalid');
+  }
+
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: classes
+  }, /*#__PURE__*/React__default.createElement("button", _extends({
+    type: "button",
+    className: cx("".concat(prefix, "--progress-step-button"), _defineProperty({}, "".concat(prefix, "--progress-step-button--unclickable"), !onClick || current)),
+    disabled: disabled,
+    "aria-disabled": disabled,
+    tabIndex: !current && onClick && !disabled ? 0 : -1,
+    onClick: !current ? onClick : undefined,
+    onKeyDown: handleKeyDown,
+    title: label
+  }, rest), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--assistive-text")
+  }, message), /*#__PURE__*/React__default.createElement(SVGIcon, {
+    complete: complete,
+    current: current,
+    description: description,
+    invalid: invalid,
+    prefix: prefix
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--progress-text")
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "".concat(prefix, "--progress-label")
+  }, label), secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React__default.createElement("p", {
+    className: "".concat(prefix, "--progress-optional")
+  }, secondaryLabel) : null), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--progress-line")
+  })));
+}
+ProgressStep.propTypes = {
+  /**
+   * Provide an optional className to be applied to the containing `<li>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the step has been completed
+   */
+  complete: PropTypes.bool,
+
+  /**
+   * Specify whether the step is the current step
+   */
+  current: PropTypes.bool,
+
+  /**
+   * Provide a description for the `<ProgressStep>`
+   */
+  description: PropTypes.string,
+
+  /**
+   * Specify whether the step is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Index of the current step within the ProgressIndicator
+   */
+  index: PropTypes.number,
+
+  /**
+   * Specify whether the step is invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the label for the `<ProgressStep>`
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * A callback called if the step is clicked or the enter key is pressed
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide the props that describe a progress step tooltip
+   */
+  overflowTooltipProps: PropTypes.object,
+
+  /**
+   * Provide an optional secondary label
+   */
+  secondaryLabel: PropTypes.string,
+
+  /**
+   * The ID of the tooltip content.
+   */
+  tooltipId: PropTypes.string,
+
+  /**
+   * Optional method that takes in a message id and returns an
+   * internationalized string.
+   */
+  translateWithId: PropTypes.func
+};
+ProgressStep.defaultProps = {
+  translateWithId: translateWithId
+};
+var ProgressIndicator = /*#__PURE__*/function (_Component) {
+  _inherits(ProgressIndicator, _Component);
+
+  var _super = _createSuper(ProgressIndicator);
+
+  function ProgressIndicator() {
+    var _this;
+
+    _classCallCheck(this, ProgressIndicator);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {});
+
+    _defineProperty(_assertThisInitialized(_this), "renderSteps", function () {
+      var onChange = _this.props.onChange;
+      return React__default.Children.map(_this.props.children, function (child, index) {
+        // only setup click handlers if onChange event is passed
+        var onClick = onChange ? function () {
+          return onChange(index);
+        } : undefined;
+
+        if (index === _this.state.currentIndex) {
+          return /*#__PURE__*/React__default.cloneElement(child, {
+            current: true,
+            index: index,
+            onClick: onClick
+          });
+        }
+
+        if (index < _this.state.currentIndex) {
+          return /*#__PURE__*/React__default.cloneElement(child, {
+            complete: true,
+            index: index,
+            onClick: onClick
+          });
+        }
+
+        if (index > _this.state.currentIndex) {
+          return /*#__PURE__*/React__default.cloneElement(child, {
+            complete: child.props.complete || false,
+            index: index,
+            onClick: onClick
+          });
+        }
+
+        return null;
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(ProgressIndicator, [{
+    key: "render",
+    value: function render() {
+      var _classnames3;
+
+      var _this$props = this.props,
+          className = _this$props.className;
+          _this$props.currentIndex;
+          var vertical = _this$props.vertical,
+          spaceEqually = _this$props.spaceEqually,
+          other = _objectWithoutProperties(_this$props, _excluded2);
+
+      var prefix = this.context;
+      var classes = cx((_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefix, "--progress"), true), _defineProperty(_classnames3, "".concat(prefix, "--progress--vertical"), vertical), _defineProperty(_classnames3, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _defineProperty(_classnames3, className, className), _classnames3));
+      return /*#__PURE__*/React__default.createElement("ul", _extends({
+        className: classes
+      }, other), this.renderSteps());
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref3, state) {
+      var currentIndex = _ref3.currentIndex;
+      var prevCurrentIndex = state.prevCurrentIndex;
+      return prevCurrentIndex === currentIndex ? null : {
+        currentIndex: currentIndex,
+        prevCurrentIndex: currentIndex
+      };
+    }
+  }]);
+
+  return ProgressIndicator;
+}(Component);
+
+_defineProperty(ProgressIndicator, "propTypes", {
+  /**
+   * Provide `<ProgressStep>` components to be rendered in the
+   * `<ProgressIndicator>`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide an optional className to be applied to the containing node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally specify the current step array index
+   */
+  currentIndex: PropTypes.number,
+
+  /**
+   * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify whether the progress steps should be split equally in size in the div
+   */
+  spaceEqually: PropTypes.bool,
+
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes.bool
+});
+
+_defineProperty(ProgressIndicator, "contextType", PrefixContext);
+
+_defineProperty(ProgressIndicator, "defaultProps", {
+  currentIndex: 0
+});
+
+export { ProgressIndicator, ProgressStep };

package/es/components/ProgressIndicator/index.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as FeatureFlags from '@carbon/feature-flags';
+import { ProgressIndicator as ProgressIndicator$2 } from './ProgressIndicator.js';
+export { ProgressStep } from './ProgressIndicator.js';
+import { ProgressIndicator as ProgressIndicator$1 } from './next/ProgressIndicator.js';
+
+var ProgressIndicator = FeatureFlags.enabled('enable-v11-release') ? ProgressIndicator$1 : ProgressIndicator$2;
+
+export { ProgressIndicator };

package/es/components/ProgressIndicator/next/ProgressIndicator.js

@@ -0,0 +1,117 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useState } from 'react';
+import { usePrefix } from '../../../internal/usePrefix.js';
+
+var _excluded = ["children", "className", "currentIndex", "onChange", "spaceEqually", "vertical"];
+
+function ProgressIndicator(_ref) {
+  var _cx;
+
+  var children = _ref.children,
+      customClassName = _ref.className,
+      _ref$currentIndex = _ref.currentIndex,
+      controlledIndex = _ref$currentIndex === void 0 ? 0 : _ref$currentIndex,
+      onChange = _ref.onChange,
+      spaceEqually = _ref.spaceEqually,
+      vertical = _ref.vertical,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  var _useState = useState(controlledIndex),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentIndex = _useState2[0],
+      setCurrentIndex = _useState2[1];
+
+  var _useState3 = useState(controlledIndex),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevControlledIndex = _useState4[0],
+      setPrevControlledIndex = _useState4[1];
+
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--progress"), true), _defineProperty(_cx, "".concat(prefix, "--progress--vertical"), vertical), _defineProperty(_cx, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _defineProperty(_cx, customClassName, customClassName), _cx));
+
+  if (controlledIndex !== prevControlledIndex) {
+    setCurrentIndex(controlledIndex);
+    setPrevControlledIndex(controlledIndex);
+  }
+
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
+    className: className
+  }, rest), React__default.Children.map(children, function (child, index) {
+    // only setup click handlers if onChange event is passed
+    var onClick = onChange ? function () {
+      return onChange(index);
+    } : undefined;
+
+    if (index === currentIndex) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        complete: child.props.complete,
+        current: child.props.complete ? false : true,
+        index: index,
+        onClick: onClick
+      });
+    }
+
+    if (index < currentIndex) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        complete: true,
+        index: index,
+        onClick: onClick
+      });
+    }
+
+    if (index > currentIndex) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        complete: child.props.complete || false,
+        index: index,
+        onClick: onClick
+      });
+    }
+
+    return null;
+  }));
+}
+
+ProgressIndicator.propTypes = {
+  /**
+   * Provide `<ProgressStep>` components to be rendered in the
+   * `<ProgressIndicator>`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide an optional className to be applied to the containing node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally specify the current step array index
+   */
+  currentIndex: PropTypes.number,
+
+  /**
+   * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify whether the progress steps should be split equally in size in the div
+   */
+  spaceEqually: PropTypes.bool,
+
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes.bool
+};
+
+export { ProgressIndicator };

package/es/components/RadioButton/RadioButton.Skeleton.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className"];
+
+function RadioButtonSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--radio-button-wrapper"), className)
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--radio-button ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--radio-button__label ").concat(prefix, "--skeleton")
+  }));
+}
+
+RadioButtonSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+
+export { RadioButtonSkeleton as default };