@desynova-digital/components 8.19.63 → 9.0.0

package/atoms/checkbox/checkbox.js

@@ -1,37 +1,37 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledCheckboxOption = exports.StyledCheckbox = undefined;
 
-var _templateObject = _taggedTemplateLiteral([""], [""]),
-    _templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: pointer;\n  padding: ", ";\n  ", ";\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ", ";\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  ", " {\n    opacity: ", ";\n    font-family: \"SFUIText-Regular\";\n    color: ", ";\n    margin-left: 25px;\n  }\n  ", " {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 22px;\n    width: 22px;\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    box-shadow: inset 0 1px 2px 0\n      ", ";\n    border-radius:  ", ";\n    cursor: pointer;\n    transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n  }\n  &:hover input ~ ", " {\n    box-shadow: inset 0 1px 4px 0 ", ";\n  }\n  input ~ ", " {\n    &.disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n  }\n  input:checked ~ ", " {\n    &.disabled {\n      &:hover {\n        background: ", ";\n      }\n    }\n  }\n\n  input:readonly ~ ", ", input:readonly:checked ~ ", " {\n    cursor: text;\n    opacity: 5;\n  }\n\n  input:checked ~ ", " {\n    background-color: ", ";\n    border: 1px solid ", ";\n    opacity: ", ";\n  }\n  input:checked ~ ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  ", ":after {\n    content: \"\";\n    position: absolute;\n    display: none;\n  }\n  input:checked ~ ", ":after {\n    display: block;\n  }\n  ", ":after {\n    top: 55%;\n    left: 35%;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n    transform: rotate(45deg) translate(-50%, -50%);\n    animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n  }\n\n  @keyframes checkbox-check {\n    0% {\n      width: 0;\n      height: 0;\n      border-color: #fff;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    33% {\n      width: 4px;\n      height: 0;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    100% {\n      width: 4px;\n      height: 9px;\n      border-color: #fff;\n      transform: translate3d(0, -0.5em, 0) rotate(45deg);\n    }\n  }\n\n  &.switch {\n    display: flex;\n    width: 100px;\n  }\n"], ["\n  position: relative;\n  cursor: pointer;\n  padding: ", ";\n  ", ";\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ", ";\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  ", " {\n    opacity: ", ";\n    font-family: \"SFUIText-Regular\";\n    color: ", ";\n    margin-left: 25px;\n  }\n  ", " {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 22px;\n    width: 22px;\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    box-shadow: inset 0 1px 2px 0\n      ", ";\n    border-radius:  ", ";\n    cursor: pointer;\n    transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n  }\n  &:hover input ~ ", " {\n    box-shadow: inset 0 1px 4px 0 ", ";\n  }\n  input ~ ", " {\n    &.disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n  }\n  input:checked ~ ", " {\n    &.disabled {\n      &:hover {\n        background: ", ";\n      }\n    }\n  }\n\n  input:readonly ~ ", ", input:readonly:checked ~ ", " {\n    cursor: text;\n    opacity: 5;\n  }\n\n  input:checked ~ ", " {\n    background-color: ", ";\n    border: 1px solid ", ";\n    opacity: ", ";\n  }\n  input:checked ~ ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  ", ":after {\n    content: \"\";\n    position: absolute;\n    display: none;\n  }\n  input:checked ~ ", ":after {\n    display: block;\n  }\n  ", ":after {\n    top: 55%;\n    left: 35%;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n    transform: rotate(45deg) translate(-50%, -50%);\n    animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n  }\n\n  @keyframes checkbox-check {\n    0% {\n      width: 0;\n      height: 0;\n      border-color: #fff;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    33% {\n      width: 4px;\n      height: 0;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    100% {\n      width: 4px;\n      height: 9px;\n      border-color: #fff;\n      transform: translate3d(0, -0.5em, 0) rotate(45deg);\n    }\n  }\n\n  &.switch {\n    display: flex;\n    width: 100px;\n  }\n"]),
-    _templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    display: ", ";\n    ", ";\n    &:last-child {\n      margin: 0;\n    }\n  }\n"], ["\n  ", " {\n    display: ", ";\n    ", ";\n    &:last-child {\n      margin: 0;\n    }\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral([''], ['']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  cursor: pointer;\n  padding: ', ';\n  ', ';\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ', ';\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  ', ' {\n    opacity: ', ';\n    font-family: \'SFUIText-Regular\';\n    color: ', ';\n    margin-left: 25px;\n  }\n  ', ' {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 22px;\n    width: 22px;\n    background-color: ', ';\n    border: 1px solid\n      ', ';\n    box-shadow: inset 0 1px 2px 0\n      ', ';\n    border-radius: ', ';\n    cursor: pointer;\n    transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n  }\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n  input ~ ', ' {\n    &.disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n      &:hover {\n        background: ', ';\n        color: ', ';\n      }\n    }\n  }\n  input:checked ~ ', ' {\n    &.disabled {\n      &:hover {\n        background: ', ';\n      }\n    }\n  }\n\n  input:readonly ~ ', ', input:readonly:checked ~ ', ' {\n    cursor: text;\n    opacity: 5;\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n    opacity: ', ';\n  }\n  input:checked ~ ', ' {\n    background-color: ', ';\n    color: ', ';\n  }\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n  input:checked ~ ', ':after {\n    display: block;\n  }\n  ', ':after {\n    top: 55%;\n    left: 35%;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n    transform: rotate(45deg) translate(-50%, -50%);\n    animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n  }\n\n  @keyframes checkbox-check {\n    0% {\n      width: 0;\n      height: 0;\n      border-color: #fff;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    33% {\n      width: 4px;\n      height: 0;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    100% {\n      width: 4px;\n      height: 9px;\n      border-color: #fff;\n      transform: translate3d(0, -0.5em, 0) rotate(45deg);\n    }\n  }\n\n  &.switch {\n    display: flex;\n    width: 100px;\n  }\n'], ['\n  position: relative;\n  cursor: pointer;\n  padding: ', ';\n  ', ';\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ', ';\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  ', ' {\n    opacity: ', ';\n    font-family: \'SFUIText-Regular\';\n    color: ', ';\n    margin-left: 25px;\n  }\n  ', ' {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 22px;\n    width: 22px;\n    background-color: ', ';\n    border: 1px solid\n      ', ';\n    box-shadow: inset 0 1px 2px 0\n      ', ';\n    border-radius: ', ';\n    cursor: pointer;\n    transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n  }\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n  input ~ ', ' {\n    &.disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n      &:hover {\n        background: ', ';\n        color: ', ';\n      }\n    }\n  }\n  input:checked ~ ', ' {\n    &.disabled {\n      &:hover {\n        background: ', ';\n      }\n    }\n  }\n\n  input:readonly ~ ', ', input:readonly:checked ~ ', ' {\n    cursor: text;\n    opacity: 5;\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n    opacity: ', ';\n  }\n  input:checked ~ ', ' {\n    background-color: ', ';\n    color: ', ';\n  }\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n  input:checked ~ ', ':after {\n    display: block;\n  }\n  ', ':after {\n    top: 55%;\n    left: 35%;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n    transform: rotate(45deg) translate(-50%, -50%);\n    animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n  }\n\n  @keyframes checkbox-check {\n    0% {\n      width: 0;\n      height: 0;\n      border-color: #fff;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    33% {\n      width: 4px;\n      height: 0;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    100% {\n      width: 4px;\n      height: 9px;\n      border-color: #fff;\n      transform: translate3d(0, -0.5em, 0) rotate(45deg);\n    }\n  }\n\n  &.switch {\n    display: flex;\n    width: 100px;\n  }\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  ', ' {\n    display: ', ';\n    ', ';\n    &:last-child {\n      margin: 0;\n    }\n  }\n'], ['\n  ', ' {\n    display: ', ';\n    ', ';\n    &:last-child {\n      margin: 0;\n    }\n  }\n']);
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require("prop-types");
+var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styledComponents = require("styled-components");
+var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _tokens = require("@desynova-digital/tokens");
+var _tokens = require('@desynova-digital/tokens');
 
-var _tag = require("../tag");
+var _tag = require('../tag');
 
 var _tag2 = _interopRequireDefault(_tag);
 
-var _switch = require("../switch");
+var _switch = require('../switch');
 
 var _switch2 = _interopRequireDefault(_switch);
 
-var _icon = require("../icon");
+var _icon = require('../icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
@@ -47,21 +47,22 @@ var StyledTag = (0, _styledComponents2.default)(_tag2.default)(_templateObject);
 var StyledCheckboxOption = _styledComponents2.default.label(_templateObject2, function (props) {
   return props.seperationType === 'line' ? '15px' : '5px';
 }, function (props) {
-  return props.seperationType === 'line' && "\n    width: 100%;\n    border-bottom: 1px solid #303F51;\n  ";
+  return props.seperationType === 'line' && '\n    width: 100%;\n    border-bottom: 1px solid #303F51;\n  ';
 }, function (props) {
-  return props.readOnly ? "none" : null;
+  return props.readOnly ? 'none' : null;
 }, Label, function (props) {
   return props.readOnly ? 0.5 : null;
 }, function (props) {
   return _tokens.colors[props.theme].radio.color;
 }, CheckMark, function (props) {
+  //  return "red"
   return props.readOnly && props.checked ? _tokens.colors[props.theme].radio.backgroundDisabled : _tokens.colors[props.theme].radio.background;
 }, function (props) {
   return props.readOnly ? _tokens.colors[props.theme].radio.borderDisabled : _tokens.colors[props.theme].radio.border;
 }, function (props) {
   return props.readOnly ? _tokens.colors[props.theme].radio.shadowDisabled : _tokens.colors[props.theme].radio.shadow;
 }, function (props) {
-  return props.shape === 'square' ? "3px" : "100%";
+  return props.shape === 'square' ? '3px' : '100%';
 }, CheckMark, function (props) {
   return _tokens.colors[props.theme].radio.shadow;
 }, StyledTag, function (props) {
@@ -83,12 +84,12 @@ var StyledCheckboxOption = _styledComponents2.default.label(_templateObject2, fu
 }, CheckMark, CheckMark, CheckMark);
 
 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) {
-  return props.align === "horizontal" ? "inline-block" : "table";
+  return props.align === 'horizontal' ? 'inline-block' : 'table';
 }, function (props) {
   return justifyContent[props.align];
 });
@@ -103,8 +104,8 @@ var Checkbox = function Checkbox(props) {
       shape: props.shape,
       seperationType: props.seperationType
     },
-    _react2.default.createElement("input", {
-      type: "checkbox",
+    _react2.default.createElement('input', {
+      type: 'checkbox',
       name: props.name,
       value: props.value,
       checked: props.checked,
@@ -117,16 +118,16 @@ var Checkbox = function Checkbox(props) {
       readOnly: props.readOnly,
       disabled: props.isDisabled ? true : false
     }),
-    props.type === "label" ? _react2.default.createElement(
+    props.type === 'label' ? _react2.default.createElement(
       StyledTag,
       {
         theme: props.theme,
         selected: props.defaultChecked,
-        className: props.isDisabled && props.access !== 'read' ? "disabled" : ""
+        className: props.isDisabled && props.access !== 'read' ? 'disabled' : ''
       },
       props.children
     ) : null,
-    props.type === "default" ? _react2.default.createElement(
+    props.type === 'default' ? _react2.default.createElement(
       _react2.default.Fragment,
       null,
       _react2.default.createElement(CheckMark, null),
@@ -136,7 +137,7 @@ var Checkbox = function Checkbox(props) {
         props.children
       )
     ) : null,
-    props.type === "switch" ? _react2.default.createElement(
+    props.type === 'switch' ? _react2.default.createElement(
       _react2.default.Fragment,
       null,
       _react2.default.createElement(
@@ -156,7 +157,9 @@ var Checkbox = function Checkbox(props) {
       name: props.value,
       value: props.value,
       fillRule: props.fillRule,
-      color: props.checked ? "#00CEC6" : "#AFB2BA" })
+      color: props.checked ? _tokens.colors[props.theme].radio.backgroundSelected : '#AFB2BA'
+      // color={props.checked ? (props.theme=="nexc" ? "#60BEF8" : "#00CEC6") : "#AFB2BA"}
+    })
   );
 };
 
@@ -185,7 +188,7 @@ var CheckboxGroup = function CheckboxGroup(props) {
 
 Checkbox.propTypes = {
   /** The direction in which the options should be laid out */
-  align: _propTypes2.default.oneOf(["horizontal", "vertical"]),
+  align: _propTypes2.default.oneOf(['horizontal', 'vertical']),
   /** The name of the checkbox */
   name: _propTypes2.default.string,
   /** The value of the currently-selected option */
@@ -194,20 +197,26 @@ Checkbox.propTypes = {
   readOnly: _propTypes2.default.bool,
   /** Callback function which is called when the user selects an option */
   onChange: _propTypes2.default.func,
-  type: _propTypes2.default.oneOf(["default", "label", "switch"]),
+  type: _propTypes2.default.oneOf(['default', 'label', 'switch']),
   fillRule: _propTypes2.default.string,
-  access: _propTypes2.default.string
+  access: _propTypes2.default.string,
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+};
+
+CheckboxGroup.propTypes = {
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 };
 
 Checkbox.defaultProps = {
-  align: "vertical",
-  type: "default"
+  align: 'vertical',
+  type: 'default',
+  theme: 'light'
 };
 
 CheckboxGroup.defaultProps = {
-  theme: "light",
-  shape: _propTypes2.default.oneOf(["square", "default"]),
-  seperationType: _propTypes2.default.oneOf(["line", "default"])
+  theme: 'light',
+  shape: _propTypes2.default.oneOf(['square', 'default']),
+  seperationType: _propTypes2.default.oneOf(['line', 'default'])
 };
 
 Checkbox.Group = CheckboxGroup;