@desynova-digital/components 8.5.4 → 8.7.2

package/atoms/checkbox/checkbox.js

@@ -31,6 +31,10 @@ var _switch = require("../switch");
 
 var _switch2 = _interopRequireDefault(_switch);
 
+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) } })); }
@@ -139,7 +143,12 @@ var Checkbox = function Checkbox(props) {
           console.log(value);
         }
       })
-    ) : null
+    ) : null,
+    props.type === 'icon' && _react2.default.createElement(_icon2.default, {
+      name: props.value,
+      value: props.value,
+      fillRule: props.fillRule,
+      color: props.checked ? "#00CEC6" : "#AFB2BA" })
   );
 };
 
@@ -156,7 +165,8 @@ var CheckboxGroup = function CheckboxGroup(props) {
         readOnly: props.readOnly || child.props.readOnly,
         onChange: child.props.isDisabled ? props.onChange : function () {},
         theme: props.theme,
-        type: props.type
+        type: props.type,
+        fillRule: props.fillRule || ''
       }) : null;
     })
   );
@@ -173,7 +183,8 @@ 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
 };
 
 Checkbox.defaultProps = {

package/atoms/checkbox/checkbox.story.js

@@ -208,6 +208,41 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         { value: "four" },
         "Option 4"
       )
+    ),
+    _react2.default.createElement(
+      _components.Checkbox.Group,
+      {
+        theme: "dark",
+        name: "example5",
+        onChange: function onChange(e) {
+          console.log(e.target.value, e.target.checked);
+        },
+        align: "horizontal",
+        selected: ["text_aligned_left"],
+        type: "icon"
+      },
+      _react2.default.createElement(_components.Checkbox, { value: "text_aligned_left" }),
+      _react2.default.createElement(_components.Checkbox, { value: "text_aligned_center" }),
+      _react2.default.createElement(_components.Checkbox, { value: "text_aligned_right" })
+    ),
+    _react2.default.createElement(
+      _components.Checkbox.Group,
+      {
+        theme: "dark",
+        name: "example6",
+        onChange: function onChange(e) {
+          console.log(e.target.value, e.target.checked);
+        },
+        align: "horizontal",
+        selected: ["text_position_bottom"],
+        type: "icon",
+        width: 24,
+        height: 16,
+        fillRule: "evenodd"
+      },
+      _react2.default.createElement(_components.Checkbox, { value: "text_position_top" }),
+      _react2.default.createElement(_components.Checkbox, { value: "text_position_center" }),
+      _react2.default.createElement(_components.Checkbox, { value: "text_position_bottom" })
     )
   );
 });

package/atoms/icon/icons.json

@@ -328,10 +328,10 @@
     },
     "delete": {
       "paths": [
-        "M7.2 0a1.8 1.8 0 0 1 1.794 1.652L9 1.8v.6h2.4a.6.6 0 0 1 .097 1.192L11.4 3.6h-.601l.001 7.8a1.8 1.8 0 0 1-1.652 1.794L9 13.2H3a1.8 1.8 0 0 1-1.794-1.652L1.2 11.4V3.6H.6a.6.6 0 0 1-.592-.503L0 3a.6.6 0 0 1 .503-.592L.6 2.4h2.399L3 1.8A1.8 1.8 0 0 1 4.652.006L4.8 0h2.4zm2.399 3.6h-7.2l.001 7.8a.6.6 0 0 0 .503.592L3 12h6a.6.6 0 0 0 .592-.503L9.6 11.4l-.001-7.8zM4.8 5.4a.6.6 0 0 1 .592.503L5.4 6v3.6a.6.6 0 0 1-1.192.097L4.2 9.6V6a.6.6 0 0 1 .6-.6zm2.4 0a.6.6 0 0 1 .6.6v3.6a.6.6 0 1 1-1.2 0V6a.6.6 0 0 1 .6-.6zm0-4.2H4.8a.6.6 0 0 0-.592.503L4.2 1.8l-.001.6H7.8v-.6a.6.6 0 0 0-.503-.592L7.2 1.2z"
+        "M0.888889 14.2222C0.888889 15.2 1.68889 16 2.66667 16H9.77778C10.7556 16 11.5556 15.2 11.5556 14.2222V3.55556H0.888889V14.2222ZM12.4444 0.888889H9.33333L8.44445 0H4L3.11111 0.888889H0V2.66667H12.4444V0.888889Z"
       ],
-      "width": 12,
-      "height": 14
+      "width": 13,
+      "height": 16
     },
     "volume": {
       "paths": [
@@ -514,8 +514,8 @@
       "paths": [
         "M12.444 0H1.556C.692 0 0 .7 0 1.556v9.333c0 .855.692 1.555 1.556 1.555h10.888c.856 0 1.556-.7 1.556-1.555V1.556C14 .7 13.3 0 12.444 0zM6.222 5.444H5.056v-.388H3.5v2.333h1.556V7h1.166v.778a.78.78 0 0 1-.778.778H3.111a.78.78 0 0 1-.778-.778V4.667a.78.78 0 0 1 .778-.778h2.333a.78.78 0 0 1 .778.778v.777zm5.445 0H10.5v-.388H8.944v2.333H10.5V7h1.167v.778a.78.78 0 0 1-.778.778H8.556a.78.78 0 0 1-.778-.778V4.667a.78.78 0 0 1 .778-.778h2.333a.78.78 0 0 1 .778.778v.777z"
       ],
-      "width": 14,
-      "height": 13
+      "width": 12,
+      "height": 12
     },
     "audio-track": {
       "paths": [
@@ -561,10 +561,19 @@
     },
     "subtitle": {
       "paths": [
-        "M18 0H2C.9 0 0 .9 0 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM2 8h4v2H2V8zm10 6H2v-2h10v2zm6 0h-4v-2h4v2zm0-4H8V8h10v2z"
+        "M10.8 0H1.2C0.54 0 0 0.54 0 1.2V8.4C0 9.06 0.54 9.6 1.2 9.6H10.8C11.46 9.6 12 9.06 12 8.4V1.2C12 0.54 11.46 0 10.8 0ZM1.2 4.8H3.6V6H1.2V4.8ZM1.2 8.4H7.2V7.2H1.2V8.4ZM10.8 8.4H8.4V7.2H10.8V8.4ZM4.8 6H10.8V4.8H4.8V6Z"
       ],
-      "width": 20,
-      "height": 16
+      "width": 12,
+      "height": 12,
+      "fillRule": "evenodd"
+    },
+    "subtitle_assign": {
+      "paths": [
+        "M10.8 0H1.2C0.54 0 0 0.54 0 1.2V8.4C0 9.06 0.54 9.6 1.2 9.6H10.8C11.46 9.6 12 9.06 12 8.4V1.2C12 0.54 11.46 0 10.8 0ZM1.2 4.8H3.6V6H1.2V4.8ZM1.2 8.4H7.2V7.2H1.2V8.4ZM10.8 8.4H8.4V7.2H10.8V8.4ZM4.8 6H10.8V4.8H4.8V6Z"
+      ],
+      "width": 12,
+      "height": 12,
+      "fillRule": "evenodd"
     },
     "align_bottom": {
       "paths": ["M.5.5h23v15H.5z", "M4 10v1.778h16V10z"],
@@ -609,6 +618,13 @@
       "width": 13,
       "height": 13
     },
+    "chat": {
+      "paths":[
+        "M7.8 1.2V5.4H1.902L1.2 6.102V1.2H7.8ZM8.4 0H0.6C0.27 0 0 0.27 0 0.6V9L2.4 6.6H8.4C8.73 6.6 9 6.33 9 6V0.6C9 0.27 8.73 0 8.4 0ZM11.4 2.4H10.2V7.8H2.4V9C2.4 9.33 2.67 9.6 3 9.6H9.6L12 12V3C12 2.67 11.73 2.4 11.4 2.4Z"
+      ],
+      "width": 12,
+      "height": 12
+    },
     "cut": {
       "paths": [
         "M7.368 6.28L12.742.946a.74.74 0 0 1 1.042 0 .728.728 0 0 1 0 1.034l-8.297 8.236c.259.436.408.944.408 1.486 0 1.616-1.32 2.926-2.948 2.926C1.32 14.628 0 13.318 0 11.702s1.32-2.925 2.947-2.925a2.95 2.95 0 0 1 1.498.405l1.881-1.868-1.881-1.868a2.95 2.95 0 0 1-1.498.405C1.32 5.851 0 4.541 0 2.926 0 1.31 1.32 0 2.947 0c1.628 0 2.948 1.31 2.948 2.926 0 .542-.15 1.05-.408 1.486L7.368 6.28zM4.015 3.934c.252-.263.406-.618.406-1.008 0-.808-.66-1.463-1.474-1.463s-1.473.655-1.473 1.463c0 .807.66 1.462 1.473 1.462a1.475 1.475 0 0 0 1.068-.454zm-.052 6.708a1.475 1.475 0 0 0-1.016-.403c-.814 0-1.473.655-1.473 1.463s.66 1.463 1.473 1.463c.814 0 1.474-.655 1.474-1.463a1.452 1.452 0 0 0-.458-1.06zm4.705-.997a.728.728 0 0 1-.001-1.034.74.74 0 0 1 1.042-.001l4.075 4.037a.728.728 0 0 1 0 1.035.74.74 0 0 1-1.041 0L8.668 9.646z"
@@ -1104,6 +1120,45 @@
       ],
       "width": 16,
       "height": 18
+    },
+    "text_aligned_right": {
+      "paths":[
+        "M0 1.77778V0H16V1.77778H0ZM5.33333 5.33333H16V3.55556H5.33333V5.33333ZM16 8.88889H0V7.11111H16V8.88889ZM5.33333 12.4444H16V10.6667H5.33333V12.4444ZM0 16H16V14.2222H0V16Z"
+      ],
+      "width": 16,
+      "height": 16
+    },
+    "text_aligned_center": {
+      "paths":[
+        "M0 1.77778V0H16V1.77778H0ZM3.55556 3.55556V5.33333H12.4444V3.55556H3.55556ZM16 8.88889H0V7.11111H16V8.88889ZM3.55556 10.6667V12.4444H12.4444V10.6667H3.55556ZM0 16H16V14.2222H0V16Z"
+      ],
+      "width": 16,
+      "height": 16
+    },
+    "text_aligned_left": {
+      "paths":[
+        "M0 1.77778V0H16V1.77778H0ZM10.6667 3.55556H0V5.33333H10.6667V3.55556ZM10.6667 10.6667H0V12.4444H10.6667V10.6667ZM16 8.88889H0V7.11111H16V8.88889ZM0 16H16V14.2222H0V16Z"
+      ],
+      "width": 16,
+      "height": 16
+    },
+    "text_position_top": {
+      "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 5.77778V4H20V5.77778H4Z"],
+      "width": 24,
+      "height": 20,
+      "fillRule": "evenodd"
+    },
+    "text_position_center": {
+      "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 8.77778V7H20V8.77778H4Z"],
+      "width": 24,
+      "height": 20,
+      "fillRule": "evenodd"
+    },
+    "text_position_bottom": {
+      "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 11.7778V10H20V11.7778H4Z"],
+      "width": 24,
+      "height": 20,
+      "fillRule": "evenodd"
     }
   }
 }

package/atoms/inputText/inputText.js

@@ -11,7 +11,8 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = [
 var _templateObject = _taggedTemplateLiteral(['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n'], ['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n'], ['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n']),
     _templateObject3 = _taggedTemplateLiteral(['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n'], ['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: 7px 0px 2px;\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n'], ['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: 7px 0px 2px;\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n']);
+    _templateObject4 = _taggedTemplateLiteral(['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303F51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #FFFFFF;\n'], ['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303F51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #FFFFFF;\n']),
+    _templateObject5 = _taggedTemplateLiteral(['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: 7px 0px 2px;\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n'], ['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: 7px 0px 2px;\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n']);
 
 var _react = require('react');
 
@@ -45,10 +46,14 @@ var InputError = _styledComponents2.default.span(_templateObject2, function (pro
 
 var PasswordToggleButton = _styledComponents2.default.div(_templateObject3);
 
+var CountWrappper = _styledComponents2.default.div(_templateObject4);
+
 var InputText = function InputText(_ref) {
-  var defaultValue = _ref.defaultValue,
+  var maxlength = _ref.maxlength,
+      defaultValue = _ref.defaultValue,
       type = _ref.type,
-      props = _objectWithoutProperties(_ref, ['defaultValue', 'type']);
+      showLengthCount = _ref.showLengthCount,
+      props = _objectWithoutProperties(_ref, ['maxlength', 'defaultValue', 'type', 'showLengthCount']);
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -81,7 +86,7 @@ var InputText = function InputText(_ref) {
   return _react2.default.createElement(
     InputTextDiv,
     { theme: props.theme },
-    _react2.default.createElement(InputText.Element, _extends({ type: hidden ? type : 'text', value: props.value, defaultValue: defaultValue }, props)),
+    _react2.default.createElement(InputText.Element, _extends({ type: hidden ? type : 'text', value: props.value, defaultValue: defaultValue }, props, { maxLength: maxlength || '' })),
     props.label ? _react2.default.createElement(
       'label',
       {
@@ -95,6 +100,13 @@ var InputText = function InputText(_ref) {
       { value: props.value, theme: props.theme, error: props.error },
       errorMesssage
     ) : '',
+    maxlength && showLengthCount && _react2.default.createElement(
+      CountWrappper,
+      null,
+      props.value.length,
+      '/',
+      maxlength
+    ),
     type == 'password' || passwordButton ? _react2.default.createElement(
       PasswordToggleButton,
       {
@@ -120,7 +132,7 @@ var InputText = function InputText(_ref) {
   );
 };
 
-InputText.Element = _styledComponents2.default.input(_templateObject4, function (props) {
+InputText.Element = _styledComponents2.default.input(_templateObject5, function (props) {
   return _tokens.colors[props.theme].inputCommon.background;
 }, function (props) {
   if (props.error) {
@@ -182,7 +194,7 @@ InputText.propTypes = {
   value: _propTypes2.default.string,
   /** The (HTML) maxlength for the input. */
   maxlength: _propTypes2.default.number,
-
+  showLengthCount: _propTypes2.default.bool,
   theme: _propTypes2.default.oneOf(['light', 'dark'])
 
   /** deprecate error string prop */
@@ -197,7 +209,8 @@ InputText.defaultProps = {
   type: 'text',
   maxlength: 50,
   theme: 'light',
-  value: ''
+  value: '',
+  showLengthCount: false
 };
 
 exports.default = InputText;

package/atoms/inputText/inputText.story.js

@@ -19,9 +19,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         _react2.default.createElement(
             _storyHelpers.Stack,
             null,
-            _react2.default.createElement(_components.InputText, { type: 'text', label: 'First Name', maxLength: 3, onChange: function onChange(e) {
+            _react2.default.createElement(_components.InputText, { type: 'text', label: 'First Name', onKeyPress: function onKeyPress(e) {
+                    return undefined.value = e.target.value;
+                }, onChange: function onChange(e) {
                     return console.log(e.target.value);
-                }, placeholder: 'Enter Name max 10', value: '', required: true }),
+                }, placeholder: 'Enter Name max 10', value: 'asd', required: true }),
             _react2.default.createElement(_components.InputText, { type: 'password', label: 'Middle Name', minLength: 3, maxLength: 6, placeholder: 'Show as password', required: true }),
             _react2.default.createElement(_components.InputText, { type: 'text', value: "hello", label: 'Label and default value', required: true })
         ),
@@ -60,7 +62,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         _react2.default.createElement(
             _storyHelpers.Stack,
             null,
-            _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', label: 'First Name', maxLength: 3, onChange: function onChange(e) {
+            _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', label: 'First Name', showLengthCount: true, maxLength: 3, onChange: function onChange(e) {
                     return console.log(e.target.value);
                 }, placeholder: 'Enter Name max 10', required: true }),
             _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'password', label: 'Middle Name', minLength: 3, maxLength: 6, placeholder: 'Show as password', required: true }),

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "8.5.4",
+  "version": "8.7.2",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "8.5.4",
+    "@desynova-digital/tokens": "8.7.2",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },