@commercetools-uikit/radio-field 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,101 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# RadioField
+
+## Description
+
+A controlled radio input component with validation states and a label.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/radio-field
+```
+
+```
+npm --save install @commercetools-uikit/radio-field
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import RadioField from '@commercetools-uikit/radio-field';
+import RadioInput from '@commercetools-uikit/radio-input';
+
+const Example = () => (
+  <RadioField
+    title="Fruits"
+    name="fruits"
+    value="apple"
+    onChange={(event) => alert(event.target.value)}
+  >
+    <RadioInput.Option value="apple">{'Apple'}</RadioInput.Option>
+    <RadioInput.Option value="banana">{'Banana'}</RadioInput.Option>
+  </RadioField>
+);
+
+export default Example;
+```
+
+## Properties
+
+| Props                  | Type                                                                                   | Required | Default   | Description                                                                                                                                                                                                                                                                        |
+| ---------------------- | -------------------------------------------------------------------------------------- | :------: | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                   | `string`                                                                               |          |           | Used as HTML id property. An id is auto-generated when it is not specified.                                                                                                                                                                                                        |
+| `horizontalConstraint` | `enum`<br/>Possible values:<br/>`7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          | `'scale'` | Horizontal size limit of the input fields.                                                                                                                                                                                                                                         |
+| `errors`               | `object`                                                                               |          |           | A map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to `renderError`.                                                                                                                                                    |
+| `errors.missing`       | `bool`                                                                                 |          |           |                                                                                                                                                                                                                                                                                    |
+| `renderError`          | `func`                                                                                 |          |           | Called with custom errors.&#xA;<br/>&#xA;This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.&#xA;<br/>&#xA;Signature: `(key, error) => React.node`                                                              |
+| `isRequired`           | `bool`                                                                                 |          |           | Indicates if the value is required. Shows an the "required asterisk" if so.                                                                                                                                                                                                        |
+| `touched`              | `bool`                                                                                 |          |           | Indicates whether the field was touched. Errors will only be shown when the field was touched.                                                                                                                                                                                     |
+| `name`                 | `string`                                                                               |          |           | Used as HTML name of the input component.                                                                                                                                                                                                                                          |
+| `value`                | `string`                                                                               |    ✅    |           | Value of the input component.                                                                                                                                                                                                                                                      |
+| `onChange`             | `custom`                                                                               |          |           | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.&#xA;<br />&#xA;Signature: `(event) => void`                                                                                                              |
+| `onBlur`               | `func`                                                                                 |          |           | Called when input is blurred&#xA;<br />&#xA;Signature: `(event) => void`                                                                                                                                                                                                           |
+| `onFocus`              | `func`                                                                                 |          |           | Called when input is focused&#xA;<br />&#xA;Signature: `(event) => void`                                                                                                                                                                                                           |
+| `isDisabled`           | `bool`                                                                                 |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).                                                                                                                                                                                     |
+| `isReadOnly`           | `bool`                                                                                 |          |           | Indicates that the field is displaying read-only content                                                                                                                                                                                                                           |
+| `direction`            | `enum`<br/>Possible values:<br/>`'stack', 'inline'`                                    |          |           | Rendering direction of the radio `RadioInput.Option`s                                                                                                                                                                                                                              |
+| `directionProps`       | `object`                                                                               |          |           | Passes props of the `Spacings.Stack` or `Spacings.Inline`, dependeing on the chosen direction                                                                                                                                                                                      |
+| `children`             | `node`                                                                                 |    ✅    |           | At least one `RadioInput.Option` component or another node (mixed children are allowed)                                                                                                                                                                                            |
+| `title`                | `<string, node>`                                                                       |    ✅    |           | Title of the label                                                                                                                                                                                                                                                                 |
+| `hint`                 | `custom`                                                                               |          |           | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth.&#xA;<br />&#xA;Can also receive a `hintIcon`. |
+| `description`          | `<string, node>`                                                                       |          |           | Provides a description for the title.                                                                                                                                                                                                                                              |
+| `onInfoButtonClick`    | `func`                                                                                 |          |           | Function called when info button is pressed.&#xA;<br />&#xA;Info button will only be visible when this prop is passed.&#xA;<br />&#xA;Signature: `(event) => void`                                                                                                                 |
+| `hintIcon`             | `node`                                                                                 |          |           | Icon to be displayed beside the hint text.&#xA;<br />&#xA;Will only get rendered when `hint` is passed as well.                                                                                                                                                                    |
+| `badge`                | `node`                                                                                 |          |           | Badge to be displayed beside the label.&#xA;<br />&#xA;Might be used to display additional information about the content of the field (E.g verified email)                                                                                                                         |
+
+## `data-*` props
+
+The component further forwards all `data-` attributes to the underlying `RadioInput` component.
+
+### RadioInput.Option
+
+See `RadioInput` README for the list of props.
+
+## `errors`
+
+This object is a key-value map. The `renderError` prop will be called for each entry with the key and the value. The return value will be rendered inside an `ErrorMessage` component underneath the input.
+
+The `RadioField` supports some errors out of the box. Return `undefined` from `renderError` for these and the default errors will be shown instead. This prevents consumers from having to reimplement the same error messages for known errors while still keeping the flexibility of showing custom error messages for them.
+
+When the `key` is known, and when the value is truthy, and when `renderError` returned `undefined` for that error entry, then the `RadioField` will render an appropriate error automatically.
+
+Known error keys are:
+
+- `missing`: tells the user that this field is required
+
+## Main Functions and use cases are:
+
+- Single option selection field in login forms

package/dist/commercetools-uikit-radio-field.cjs.dev.js

@@ -0,0 +1,299 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
+var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react = require('react');
+var PropTypes = require('prop-types');
+var requiredIf = require('react-required-if');
+var utils = require('@commercetools-uikit/utils');
+var Constraints = require('@commercetools-uikit/constraints');
+var Stack = require('@commercetools-uikit/spacings-stack');
+var FieldLabel = require('@commercetools-uikit/field-label');
+var FieldErrors = require('@commercetools-uikit/field-errors');
+var RadioInput = require('@commercetools-uikit/radio-input');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var Stack__default = /*#__PURE__*/_interopDefault(Stack);
+var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
+var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
+var RadioInput__default = /*#__PURE__*/_interopDefault(RadioInput);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default['default'](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default['default']) return false; if (_Reflect$construct__default['default'].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default['default'](Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var sequentialId = utils.createSequentialId('radio-field-');
+
+var hasErrors = function hasErrors(errors) {
+  var _context;
+
+  return errors && _someInstanceProperty__default['default'](_context = _Object$values__default['default'](errors)).call(_context, Boolean);
+};
+
+var RadioField = /*#__PURE__*/function (_Component) {
+  _inherits(RadioField, _Component);
+
+  var _super = _createSuper(RadioField);
+
+  function RadioField() {
+    var _context2;
+
+    var _this;
+
+    _classCallCheck(this, RadioField);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, _concatInstanceProperty__default['default'](_context2 = [this]).call(_context2, args));
+    _this.state = {
+      // We generate an id in case no id is provided by the parent to attach the
+      // label to the input component.
+      id: _this.props.id
+    };
+    return _this;
+  }
+
+  _createClass(RadioField, [{
+    key: "render",
+    value: function render() {
+      var hasError = this.props.touched && hasErrors(this.props.errors);
+      return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+        max: this.props.horizontalConstraint,
+        children: jsxRuntime.jsxs(Stack__default['default'], {
+          scale: "xs",
+          children: [jsxRuntime.jsx(FieldLabel__default['default'], {
+            title: this.props.title,
+            hint: this.props.hint,
+            description: this.props.description,
+            onInfoButtonClick: this.props.onInfoButtonClick,
+            hintIcon: this.props.hintIcon,
+            badge: this.props.badge,
+            hasRequiredIndicator: this.props.isRequired,
+            id: this.state.id
+          }), jsxRuntime.jsx(RadioInput__default['default'].Group, _objectSpread(_objectSpread({
+            id: this.state.id,
+            name: this.props.name,
+            value: this.props.value,
+            onChange: this.props.onChange,
+            onBlur: this.props.onBlur,
+            onFocus: this.props.onFocus,
+            isDisabled: this.props.isDisabled,
+            isReadOnly: this.props.isReadOnly,
+            hasError: hasError,
+            horizontalConstraint: this.props.horizontalConstraint,
+            direction: this.props.direction,
+            directionProps: this.props.directionProps
+          }, utils.filterDataAttributes(this.props)), {}, {
+            children: this.props.children
+          })), jsxRuntime.jsx(FieldErrors__default['default'], {
+            errors: this.props.errors,
+            isVisible: hasError,
+            renderError: this.props.renderError
+          })]
+        })
+      });
+    }
+  }]);
+
+  return RadioField;
+}(react.Component);
+
+RadioField.displayName = 'RadioField';
+RadioField.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+
+RadioField.getDerivedStateFromProps = function (props, state) {
+  return {
+    id: utils.getFieldId(props, state, sequentialId)
+  };
+};
+
+RadioField.propTypes = process.env.NODE_ENV !== "production" ? {
+  // RadioField
+
+  /**
+   * Used as HTML id property. An id is auto-generated when it is not specified.
+   */
+  id: PropTypes__default['default'].string,
+
+  /**
+   * Horizontal size limit of the input fields.
+   */
+  horizontalConstraint: PropTypes__default['default'].oneOf([7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+
+  /**
+   * A map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to `renderError`.
+   */
+  errors: PropTypes__default['default'].shape({
+    missing: PropTypes__default['default'].bool
+  }),
+
+  /**
+   * Called with custom errors.
+   * <br/>
+   * This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
+   * <br/>
+   * Signature: `(key, error) => React.node`
+   */
+  renderError: PropTypes__default['default'].func,
+
+  /**
+   * Indicates if the value is required. Shows an the "required asterisk" if so.
+   */
+  isRequired: PropTypes__default['default'].bool,
+
+  /**
+   * Indicates whether the field was touched. Errors will only be shown when the field was touched.
+   */
+  touched: PropTypes__default['default'].bool,
+  // RadioInput
+
+  /**
+   * Used as HTML name of the input component.
+   */
+  name: PropTypes__default['default'].string,
+
+  /**
+   * Value of the input component.
+   */
+  value: PropTypes__default['default'].string.isRequired,
+
+  /**
+   * Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onChange: requiredIf__default['default'](PropTypes__default['default'].func, function (props) {
+    return !props.isReadOnly;
+  }),
+
+  /**
+   * Called when input is blurred
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onBlur: PropTypes__default['default'].func,
+
+  /**
+   * Called when input is focused
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onFocus: PropTypes__default['default'].func,
+
+  /**
+   * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
+   */
+  isDisabled: PropTypes__default['default'].bool,
+
+  /**
+   * Indicates that the field is displaying read-only content
+   */
+  isReadOnly: PropTypes__default['default'].bool,
+
+  /**
+   * Rendering direction of the radio `RadioInput.Option`s
+   */
+  direction: PropTypes__default['default'].oneOf(['stack', 'inline']),
+
+  /**
+   * Passes props of the `Spacings.Stack` or `Spacings.Inline`, dependeing on the chosen direction
+   */
+  directionProps: PropTypes__default['default'].object,
+
+  /**
+   * At least one `RadioInput.Option` component or another node (mixed children are allowed)
+   */
+  children: PropTypes__default['default'].node.isRequired,
+  // LabelField
+
+  /**
+   * Title of the label
+   */
+  title: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].node]).isRequired,
+
+  /**
+   * Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth.
+   * <br />
+   * Can also receive a `hintIcon`.
+   */
+  hint: requiredIf__default['default'](PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].node]), function (props) {
+    return props.hintIcon;
+  }),
+
+  /**
+   * Provides a description for the title.
+   */
+  description: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].node]),
+
+  /**
+   * Function called when info button is pressed.
+   * <br />
+   * Info button will only be visible when this prop is passed.
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onInfoButtonClick: PropTypes__default['default'].func,
+
+  /**
+   * Icon to be displayed beside the hint text.
+   * <br />
+   * Will only get rendered when `hint` is passed as well.
+   */
+  hintIcon: PropTypes__default['default'].node,
+
+  /**
+   * Badge to be displayed beside the label.
+   * <br />
+   * Might be used to display additional information about the content of the field (E.g verified email)
+   */
+  badge: PropTypes__default['default'].node
+} : {};
+var RadioField$1 = RadioField;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = RadioField$1;
+exports.version = version;

package/dist/commercetools-uikit-radio-field.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-radio-field.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-radio-field.cjs.dev.js");
+}

package/dist/commercetools-uikit-radio-field.cjs.prod.js

@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
+var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react = require('react');
+require('prop-types');
+require('react-required-if');
+var utils = require('@commercetools-uikit/utils');
+var Constraints = require('@commercetools-uikit/constraints');
+var Stack = require('@commercetools-uikit/spacings-stack');
+var FieldLabel = require('@commercetools-uikit/field-label');
+var FieldErrors = require('@commercetools-uikit/field-errors');
+var RadioInput = require('@commercetools-uikit/radio-input');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var Stack__default = /*#__PURE__*/_interopDefault(Stack);
+var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
+var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
+var RadioInput__default = /*#__PURE__*/_interopDefault(RadioInput);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default['default'](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default['default']) return false; if (_Reflect$construct__default['default'].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default['default'](Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var sequentialId = utils.createSequentialId('radio-field-');
+
+var hasErrors = function hasErrors(errors) {
+  var _context;
+
+  return errors && _someInstanceProperty__default['default'](_context = _Object$values__default['default'](errors)).call(_context, Boolean);
+};
+
+var RadioField = /*#__PURE__*/function (_Component) {
+  _inherits(RadioField, _Component);
+
+  var _super = _createSuper(RadioField);
+
+  function RadioField() {
+    var _context2;
+
+    var _this;
+
+    _classCallCheck(this, RadioField);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, _concatInstanceProperty__default['default'](_context2 = [this]).call(_context2, args));
+    _this.state = {
+      // We generate an id in case no id is provided by the parent to attach the
+      // label to the input component.
+      id: _this.props.id
+    };
+    return _this;
+  }
+
+  _createClass(RadioField, [{
+    key: "render",
+    value: function render() {
+      var hasError = this.props.touched && hasErrors(this.props.errors);
+      return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+        max: this.props.horizontalConstraint,
+        children: jsxRuntime.jsxs(Stack__default['default'], {
+          scale: "xs",
+          children: [jsxRuntime.jsx(FieldLabel__default['default'], {
+            title: this.props.title,
+            hint: this.props.hint,
+            description: this.props.description,
+            onInfoButtonClick: this.props.onInfoButtonClick,
+            hintIcon: this.props.hintIcon,
+            badge: this.props.badge,
+            hasRequiredIndicator: this.props.isRequired,
+            id: this.state.id
+          }), jsxRuntime.jsx(RadioInput__default['default'].Group, _objectSpread(_objectSpread({
+            id: this.state.id,
+            name: this.props.name,
+            value: this.props.value,
+            onChange: this.props.onChange,
+            onBlur: this.props.onBlur,
+            onFocus: this.props.onFocus,
+            isDisabled: this.props.isDisabled,
+            isReadOnly: this.props.isReadOnly,
+            hasError: hasError,
+            horizontalConstraint: this.props.horizontalConstraint,
+            direction: this.props.direction,
+            directionProps: this.props.directionProps
+          }, utils.filterDataAttributes(this.props)), {}, {
+            children: this.props.children
+          })), jsxRuntime.jsx(FieldErrors__default['default'], {
+            errors: this.props.errors,
+            isVisible: hasError,
+            renderError: this.props.renderError
+          })]
+        })
+      });
+    }
+  }]);
+
+  return RadioField;
+}(react.Component);
+
+RadioField.displayName = 'RadioField';
+RadioField.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+
+RadioField.getDerivedStateFromProps = function (props, state) {
+  return {
+    id: utils.getFieldId(props, state, sequentialId)
+  };
+};
+
+RadioField.propTypes = {};
+var RadioField$1 = RadioField;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = RadioField$1;
+exports.version = version;

package/dist/commercetools-uikit-radio-field.esm.js

@@ -0,0 +1,272 @@
+import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
+import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
+import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
+import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
+import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
+import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
+import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import requiredIf from 'react-required-if';
+import { createSequentialId, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
+import Constraints from '@commercetools-uikit/constraints';
+import Stack from '@commercetools-uikit/spacings-stack';
+import FieldLabel from '@commercetools-uikit/field-label';
+import FieldErrors from '@commercetools-uikit/field-errors';
+import RadioInput from '@commercetools-uikit/radio-input';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var sequentialId = createSequentialId('radio-field-');
+
+var hasErrors = function hasErrors(errors) {
+  var _context;
+
+  return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
+};
+
+var RadioField = /*#__PURE__*/function (_Component) {
+  _inherits(RadioField, _Component);
+
+  var _super = _createSuper(RadioField);
+
+  function RadioField() {
+    var _context2;
+
+    var _this;
+
+    _classCallCheck(this, RadioField);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, _concatInstanceProperty(_context2 = [this]).call(_context2, args));
+    _this.state = {
+      // We generate an id in case no id is provided by the parent to attach the
+      // label to the input component.
+      id: _this.props.id
+    };
+    return _this;
+  }
+
+  _createClass(RadioField, [{
+    key: "render",
+    value: function render() {
+      var hasError = this.props.touched && hasErrors(this.props.errors);
+      return jsx(Constraints.Horizontal, {
+        max: this.props.horizontalConstraint,
+        children: jsxs(Stack, {
+          scale: "xs",
+          children: [jsx(FieldLabel, {
+            title: this.props.title,
+            hint: this.props.hint,
+            description: this.props.description,
+            onInfoButtonClick: this.props.onInfoButtonClick,
+            hintIcon: this.props.hintIcon,
+            badge: this.props.badge,
+            hasRequiredIndicator: this.props.isRequired,
+            id: this.state.id
+          }), jsx(RadioInput.Group, _objectSpread(_objectSpread({
+            id: this.state.id,
+            name: this.props.name,
+            value: this.props.value,
+            onChange: this.props.onChange,
+            onBlur: this.props.onBlur,
+            onFocus: this.props.onFocus,
+            isDisabled: this.props.isDisabled,
+            isReadOnly: this.props.isReadOnly,
+            hasError: hasError,
+            horizontalConstraint: this.props.horizontalConstraint,
+            direction: this.props.direction,
+            directionProps: this.props.directionProps
+          }, filterDataAttributes(this.props)), {}, {
+            children: this.props.children
+          })), jsx(FieldErrors, {
+            errors: this.props.errors,
+            isVisible: hasError,
+            renderError: this.props.renderError
+          })]
+        })
+      });
+    }
+  }]);
+
+  return RadioField;
+}(Component);
+
+RadioField.displayName = 'RadioField';
+RadioField.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+
+RadioField.getDerivedStateFromProps = function (props, state) {
+  return {
+    id: getFieldId(props, state, sequentialId)
+  };
+};
+
+RadioField.propTypes = process.env.NODE_ENV !== "production" ? {
+  // RadioField
+
+  /**
+   * Used as HTML id property. An id is auto-generated when it is not specified.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Horizontal size limit of the input fields.
+   */
+  horizontalConstraint: PropTypes.oneOf([7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+
+  /**
+   * A map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to `renderError`.
+   */
+  errors: PropTypes.shape({
+    missing: PropTypes.bool
+  }),
+
+  /**
+   * Called with custom errors.
+   * <br/>
+   * This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
+   * <br/>
+   * Signature: `(key, error) => React.node`
+   */
+  renderError: PropTypes.func,
+
+  /**
+   * Indicates if the value is required. Shows an the "required asterisk" if so.
+   */
+  isRequired: PropTypes.bool,
+
+  /**
+   * Indicates whether the field was touched. Errors will only be shown when the field was touched.
+   */
+  touched: PropTypes.bool,
+  // RadioInput
+
+  /**
+   * Used as HTML name of the input component.
+   */
+  name: PropTypes.string,
+
+  /**
+   * Value of the input component.
+   */
+  value: PropTypes.string.isRequired,
+
+  /**
+   * Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onChange: requiredIf(PropTypes.func, function (props) {
+    return !props.isReadOnly;
+  }),
+
+  /**
+   * Called when input is blurred
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Called when input is focused
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
+   */
+  isDisabled: PropTypes.bool,
+
+  /**
+   * Indicates that the field is displaying read-only content
+   */
+  isReadOnly: PropTypes.bool,
+
+  /**
+   * Rendering direction of the radio `RadioInput.Option`s
+   */
+  direction: PropTypes.oneOf(['stack', 'inline']),
+
+  /**
+   * Passes props of the `Spacings.Stack` or `Spacings.Inline`, dependeing on the chosen direction
+   */
+  directionProps: PropTypes.object,
+
+  /**
+   * At least one `RadioInput.Option` component or another node (mixed children are allowed)
+   */
+  children: PropTypes.node.isRequired,
+  // LabelField
+
+  /**
+   * Title of the label
+   */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+
+  /**
+   * Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth.
+   * <br />
+   * Can also receive a `hintIcon`.
+   */
+  hint: requiredIf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
+    return props.hintIcon;
+  }),
+
+  /**
+   * Provides a description for the title.
+   */
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /**
+   * Function called when info button is pressed.
+   * <br />
+   * Info button will only be visible when this prop is passed.
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onInfoButtonClick: PropTypes.func,
+
+  /**
+   * Icon to be displayed beside the hint text.
+   * <br />
+   * Will only get rendered when `hint` is passed as well.
+   */
+  hintIcon: PropTypes.node,
+
+  /**
+   * Badge to be displayed beside the label.
+   * <br />
+   * Might be used to display additional information about the content of the field (E.g verified email)
+   */
+  badge: PropTypes.node
+} : {};
+var RadioField$1 = RadioField;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { RadioField$1 as default, version };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@commercetools-uikit/radio-field",
+  "description": "A controlled radio input component with validation states and a label.",
+  "version": "0.0.0-canary-2021830134526",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/fields/radio-field"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-radio-field.cjs.js",
+  "module": "dist/commercetools-uikit-radio-field.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "../../../../scripts/version.js replace"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.8",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@commercetools-uikit/constraints": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/design-system": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/field-errors": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/field-label": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/radio-input": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/spacings-stack": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/utils": "12.2.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "prop-types": "15.7.2",
+    "react-required-if": "1.0.3"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}