@carbon/react 0.17.0 → 1.0.1

package/lib/components/FormGroup/FormGroup.js

@@ -0,0 +1,97 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["legendId", "legendText", "invalid", "children", "className", "message", "messageText"];
+
+var FormGroup = function FormGroup(_ref) {
+  var legendId = _ref.legendId,
+      legendText = _ref.legendText,
+      invalid = _ref.invalid,
+      children = _ref.children,
+      className = _ref.className,
+      message = _ref.message,
+      messageText = _ref.messageText,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNamesFieldset = cx__default["default"]("".concat(prefix, "--fieldset"), className);
+  return /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({}, invalid && {
+    'data-invalid': ''
+  }, {
+    className: classNamesFieldset
+  }, other, {
+    "aria-labelledby": other['aria-labelledby'] || legendId
+  }), /*#__PURE__*/React__default["default"].createElement("legend", {
+    className: "".concat(prefix, "--label"),
+    id: legendId || other['aria-labelledby']
+  }, legendText), children, message ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form__requirements")
+  }, messageText) : null);
+};
+
+FormGroup.propTypes = {
+  /**
+   * Provide the children form elements to be rendered inside of the <fieldset>
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom className to be applied to the containing <fieldset> node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the <FormGroup> is invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide id for the fieldset <legend> which corresponds to the fieldset
+   * `aria-labelledby`
+   */
+  legendId: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text to be rendered inside of the fieldset <legend>
+   */
+  legendText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Specify whether the message should be displayed in the <FormGroup>
+   */
+  message: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text for the message in the <FormGroup>
+   */
+  messageText: PropTypes__default["default"].string
+};
+FormGroup.defaultProps = {
+  invalid: false,
+  message: false,
+  messageText: '',
+  hasMargin: true
+};
+var FormGroup$1 = FormGroup;
+
+exports["default"] = FormGroup$1;

package/lib/components/FormItem/FormItem.js

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "children"];
+
+var FormItem = function FormItem(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--form-item"), className);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other), children);
+};
+
+FormItem.propTypes = {
+  /**
+   * Provide content to be rendered in the form item
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom className to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string
+};
+var FormItem$1 = FormItem;
+
+exports["default"] = FormItem$1;

package/lib/components/FormLabel/FormLabel.js

@@ -0,0 +1,77 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+var FeatureFlags = require('@carbon/feature-flags');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? 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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var _excluded = ["className", "children", "id"];
+
+function FormLabel(_ref) {
+  var customClassName = _ref.className,
+      children = _ref.children,
+      id = _ref.id,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label--no-margin"), FeatureFlags__namespace.enabled('enable-v11-release')), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+    htmlFor: id,
+    className: className
+  }, rest), children);
+}
+
+FormLabel.propTypes = {
+  /**
+   * Specify the content of the form label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom className to be applied to the containing <label> node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide a unique id for the given <FormLabel>
+   */
+  id: PropTypes__default["default"].string
+};
+
+exports["default"] = FormLabel;

package/lib/components/Grid/CSSGrid.js

@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+var GridContext = require('./GridContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["as", "children", "className", "condensed", "fullWidth", "narrow"],
+    _excluded2 = ["as", "className", "children", "mode"];
+
+function CSSGrid(_ref) {
+  var _cx;
+
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      children = _ref.children,
+      customClassName = _ref.className,
+      _ref$condensed = _ref.condensed,
+      condensed = _ref$condensed === void 0 ? false : _ref$condensed,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$narrow = _ref.narrow,
+      narrow = _ref$narrow === void 0 ? false : _ref$narrow,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useGridSettings = GridContext.useGridSettings(),
+      subgrid = _useGridSettings.subgrid;
+
+  var mode = 'wide';
+
+  if (narrow) {
+    mode = 'narrow';
+  } else if (condensed) {
+    mode = 'condensed';
+  }
+
+  if (subgrid) {
+    return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
+      mode: "css-grid",
+      subgrid: true
+    }, /*#__PURE__*/React__default["default"].createElement(Subgrid, _rollupPluginBabelHelpers["extends"]({
+      as: BaseComponent,
+      className: customClassName,
+      mode: mode
+    }, rest), children));
+  }
+
+  var className = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--condensed"), mode === 'condensed'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--narrow"), mode === 'narrow'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--full-width"), fullWidth), _cx));
+  return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
+    mode: "css-grid",
+    subgrid: true
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    className: className
+  }, rest), children));
+}
+
+CSSGrid.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `Grid`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to be applied to the `Grid`
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Collapse the gutter to 1px. Useful for fluid layouts.
+   * Rows have 1px of margin between them to match gutter.
+   */
+  condensed: PropTypes__default["default"].bool,
+
+  /**
+   * Remove the default max width that the grid has set
+   */
+  fullWidth: PropTypes__default["default"].bool,
+
+  /**
+   * Container hangs 16px into the gutter. Useful for
+   * typographic alignment with and without containers.
+   */
+  narrow: PropTypes__default["default"].bool
+};
+
+function Subgrid(_ref2) {
+  var _cx2;
+
+  var _ref2$as = _ref2.as,
+      BaseComponent = _ref2$as === void 0 ? 'div' : _ref2$as,
+      customClassName = _ref2.className,
+      children = _ref2.children,
+      mode = _ref2.mode,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"](customClassName, (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--subgrid"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--subgrid--condensed"), mode === 'condensed'), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--subgrid--narrow"), mode === 'narrow'), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--subgrid--wide"), mode === 'wide'), _cx2));
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: className
+  }), children);
+}
+
+Subgrid.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `Subgrid`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to be applied to the `Subgrid`
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the grid mode for the subgrid
+   */
+  mode: PropTypes__default["default"].oneOf(['wide', 'narrow', 'condensed'])
+};
+
+exports.CSSGrid = CSSGrid;