@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/radio/index.js

@@ -1,16 +1,23 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledRadioOption = exports.StyledRadio = undefined;
-
-var _radio = require("./radio");
-
-var _radio2 = _interopRequireDefault(_radio);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _radio2.default;
-exports.StyledRadio = _radio.StyledRadio;
-exports.StyledRadioOption = _radio.StyledRadioOption;
+Object.defineProperty(exports, "StyledRadio", {
+  enumerable: true,
+  get: function get() {
+    return _radio.StyledRadio;
+  }
+});
+Object.defineProperty(exports, "StyledRadioOption", {
+  enumerable: true,
+  get: function get() {
+    return _radio.StyledRadioOption;
+  }
+});
+exports["default"] = void 0;
+var _radio = _interopRequireWildcard(require("./radio"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _default = exports["default"] = _radio["default"];

package/atoms/radio/radio.js

@@ -1,46 +1,22 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCheckboxOption = exports.StyledCheckbox = undefined;
-
-var _templateObject = _taggedTemplateLiteral([''], ['']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  cursor: ', ';\n  padding:5px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  ', ' {\n    opacity: ', ';\n    font-family: \'SFUIText-Regular\';\n    margin-left: 25px;\n    color: ', ';\n  }\n\n  ', ' {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 20px;\n    width: 20px;\n    background-color: ', ';\n    border: 1px solid\n      ', ';\n    box-shadow: inset 0 1px 2px 0\n      ', ';\n    border-radius: 50%;\n  }\n\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n\n  &:hover input ~ .styled-icon {\n    path {\n      fill: ', ';\n    }\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n    opacity: ', ';\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    color: ', '\n    opacity: ', ';\n  }\n\n  input:checked ~ .styled-icon {\n    path {\n      fill: ', ';\n    }\n  }\n\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n\n  input:checked ~ ', ':after {\n    display: block;\n  }\n\n  ', ':after {\n    background-color: ', ';\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    box-shadow: 0 1px 2px 0 ', ';\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n'], ['\n  position: relative;\n  cursor: ', ';\n  padding:5px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  ', ' {\n    opacity: ', ';\n    font-family: \'SFUIText-Regular\';\n    margin-left: 25px;\n    color: ', ';\n  }\n\n  ', ' {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 20px;\n    width: 20px;\n    background-color: ', ';\n    border: 1px solid\n      ', ';\n    box-shadow: inset 0 1px 2px 0\n      ', ';\n    border-radius: 50%;\n  }\n\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n\n  &:hover input ~ .styled-icon {\n    path {\n      fill: ', ';\n    }\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n    opacity: ', ';\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    color: ', '\n    opacity: ', ';\n  }\n\n  input:checked ~ .styled-icon {\n    path {\n      fill: ', ';\n    }\n  }\n\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n\n  input:checked ~ ', ':after {\n    display: block;\n  }\n\n  ', ':after {\n    background-color: ', ';\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    box-shadow: 0 1px 2px 0 ', ';\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  ', ' {\n    display: ', ';\n    ', ';\n\n    &:last-child {\n      margin: 0;\n    }\n  }\n'], ['\n  ', ' {\n    display: ', ';\n    ', ';\n\n    &:last-child {\n      margin: 0;\n    }\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _tag = require('../tag');
-
-var _tag2 = _interopRequireDefault(_tag);
-
-var _icon = require('../icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var CheckMark = _styledComponents2.default.span(_templateObject);
-var Label = _styledComponents2.default.span(_templateObject);
-
-var StyledTag = (0, _styledComponents2.default)(_tag2.default)(_templateObject);
-
-var StyledCheckboxOption = _styledComponents2.default.label(_templateObject2, function (props) {
+exports["default"] = exports.StyledCheckboxOption = exports.StyledCheckbox = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _tag = _interopRequireDefault(require("../tag"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var CheckMark = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
+var StyledTag = (0, _styledComponents["default"])(_tag["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
+var StyledCheckboxOption = exports.StyledCheckboxOption = _styledComponents["default"].label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  cursor: ", ";\n  padding:5px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  ", " {\n    opacity: ", ";\n    font-family: 'SFUIText-Regular';\n    margin-left: 25px;\n    color: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 20px;\n    width: 20px;\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    box-shadow: inset 0 1px 2px 0\n      ", ";\n    border-radius: 50%;\n  }\n\n  &:hover input ~ ", " {\n    box-shadow: inset 0 1px 4px 0 ", ";\n  }\n\n  &:hover input ~ .styled-icon {\n    path {\n      fill: ", ";\n    }\n  }\n\n  input:checked ~ ", " {\n    background-color: ", ";\n    border: 1px solid ", ";\n    opacity: ", ";\n  }\n\n  input:checked ~ ", " {\n    background-color: ", ";\n    color: ", "\n    opacity: ", ";\n  }\n\n  input:checked ~ .styled-icon {\n    path {\n      fill: ", ";\n    }\n  }\n\n  ", ":after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  ", ":after {\n    background-color: ", ";\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    box-shadow: 0 1px 2px 0 ", ";\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), function (props) {
   return props.readOnly ? 'not-allowed' : 'pointer';
 }, Label, function (props) {
   return props.readOnly ? 0.5 : null;
@@ -71,91 +47,65 @@ var StyledCheckboxOption = _styledComponents2.default.label(_templateObject2, fu
 }, function (props) {
   return _tokens.colors[props.theme].radio.backgroundSelected;
 }, CheckMark, CheckMark, CheckMark, _tokens.colors.common.base.white, _tokens.colors.common.radio.shadow);
-
 var justifyContent = {
-  horizontal: 'margin-right: 5px;',
-  vertical: 'margin-bottom: 5px;'
+  horizontal: "margin-right: 5px;",
+  vertical: "margin-bottom: 5px;"
 };
-
-var StyledCheckbox = _styledComponents2.default.div(_templateObject3, StyledCheckboxOption, function (props) {
+var StyledCheckbox = exports.StyledCheckbox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    display: ", ";\n    ", ";\n\n    &:last-child {\n      margin: 0;\n    }\n  }\n"])), StyledCheckboxOption, function (props) {
   return props.align === 'horizontal' ? 'inline-block' : 'table';
 }, function (props) {
   return justifyContent[props.align];
 });
-
 var Radio = function Radio(props) {
-  return _react2.default.createElement(
-    StyledCheckboxOption,
-    { theme: props.theme, readOnly: props.readOnly },
-    _react2.default.createElement('input', {
-      type: 'radio',
-      name: props.radioname,
-      value: props.value,
-      id: props.radioid,
-      checked: props.checked,
-      onChange: function onChange() {
-        props.onChange;
-      },
-      readOnly: true
-    }),
-    props.type === 'label' ? _react2.default.createElement(
-      StyledTag,
-      { theme: props.theme, selected: props.defaultChecked },
-      props.children
-    ) : null,
-    props.type === 'icon' ? _react2.default.createElement(
-      'div',
-      { className: 'styled-icon' },
-      _react2.default.createElement(_icon2.default, {
-        name: props.icon,
-        color: props.defaultChecked ? _tokens.colors[props.theme].radio.backgroundSelected : '#ffffff'
-      })
-    ) : null,
-    props.type === 'default' ? _react2.default.createElement(
-      _react2.default.Fragment,
-      null,
-      _react2.default.createElement(CheckMark, null),
-      _react2.default.createElement(
-        Label,
-        null,
-        props.children
-      )
-    ) : null
-  );
+  return /*#__PURE__*/_react["default"].createElement(StyledCheckboxOption, {
+    theme: props.theme,
+    readOnly: props.readOnly
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "radio",
+    name: props.radioname,
+    value: props.value,
+    id: props.radioid,
+    checked: props.checked,
+    onChange: function onChange() {
+      props.onChange;
+    },
+    readOnly: true
+  }), props.type === 'label' ? /*#__PURE__*/_react["default"].createElement(StyledTag, {
+    theme: props.theme,
+    selected: props.defaultChecked
+  }, props.children) : null, props.type === 'icon' ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "styled-icon"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: props.icon,
+    color: props.defaultChecked ? _tokens.colors[props.theme].radio.backgroundSelected : '#ffffff'
+  })) : null, props.type === 'default' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CheckMark, null), /*#__PURE__*/_react["default"].createElement(Label, null, props.children)) : null);
 };
-
 var RadioGroup = function RadioGroup(props) {
-  return _react2.default.createElement(
-    StyledCheckbox,
-    props,
-    _react2.default.Children.map(props.children, function (child, index) {
-      return _react2.default.cloneElement(child, {
-        radioname: props.radioname,
-        checked: child.props.checked,
-        readOnly: props.readOnly || child.props.readOnly,
-        onChange: props.onChange,
-        radioid: '' + props.radioname + index,
-        theme: props.theme,
-        type: props.type
-      });
-    })
-  );
+  return /*#__PURE__*/_react["default"].createElement(StyledCheckbox, props, _react["default"].Children.map(props.children, function (child, index) {
+    return /*#__PURE__*/_react["default"].cloneElement(child, {
+      radioname: props.radioname,
+      checked: child.props.checked,
+      readOnly: props.readOnly || child.props.readOnly,
+      onChange: props.onChange,
+      radioid: '' + props.radioname + index,
+      theme: props.theme,
+      type: props.type
+    });
+  }));
 };
-
 Radio.propTypes = {
   /** The direction in which the options should be laid out */
-  align: _propTypes2.default.oneOf(['horizontal', 'vertical']),
+  align: _propTypes["default"].oneOf(['horizontal', 'vertical']),
   /** The name of the checkbox */
-  radioname: _propTypes2.default.string,
+  radioname: _propTypes["default"].string,
   /** The value of the currently-selected option */
-  selected: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  selected: _propTypes["default"].arrayOf(_propTypes["default"].string),
   /** If true, all options in the group will be disabled */
-  readOnly: _propTypes2.default.bool,
+  readOnly: _propTypes["default"].bool,
   /** Callback function which is called when the user selects an option */
-  onChange: _propTypes2.default.func,
-  type: _propTypes2.default.oneOf(['default', 'label', 'icon'])
+  onChange: _propTypes["default"].func,
+  type: _propTypes["default"].oneOf(['default', 'label', 'icon'])
 };
-
 Radio.defaultProps = {
   align: 'vertical',
   theme: 'light',
@@ -164,9 +114,5 @@ Radio.defaultProps = {
 RadioGroup.defaultProps = {
   theme: 'light'
 };
-
 Radio.Group = RadioGroup;
-
-exports.default = Radio;
-exports.StyledCheckbox = StyledCheckbox;
-exports.StyledCheckboxOption = StyledCheckboxOption;
+var _default = exports["default"] = Radio;