@desynova-digital/components 8.6.0 → 8.7.0

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,14 @@ var Checkbox = function Checkbox(props) {
           console.log(value);
         }
       })
-    ) : null
+    ) : null,
+    props.type === 'icon' && _react2.default.createElement(_icon2.default, {
+      name: props.value,
+      value: props.value,
+      width: props.width,
+      height: props.height,
+      fillRule: props.fillRule,
+      color: props.checked ? "#00CEC6" : "#AFB2BA" })
   );
 };
 
@@ -156,7 +167,10 @@ 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,
+        width: props.width || 16,
+        height: props.height || 24,
+        fillRule: props.fillRule || ''
       }) : null;
     })
   );
@@ -173,7 +187,10 @@ 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"]),
+  width: _propTypes2.default.number,
+  height: _propTypes2.default.number,
+  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/icon.js

@@ -40,7 +40,7 @@ var Icon = function Icon(props) {
       {
         width: props.width || icon.width,
         height: props.height || icon.height,
-        viewBox: '0 0 ' + icon.width + ' ' + icon.height,
+        viewBox: '0 0 ' + (props.width || icon.width) + ' ' + (props.height || icon.height),
         color: props.color
       },
       icon.paths.map(function (path, index) {
@@ -51,7 +51,7 @@ var Icon = function Icon(props) {
           fill: props.color,
           stroke: props.stroke,
           strokeWidth: icon.strokeWidth,
-          fillRule: icon.fillRule
+          fillRule: props.fillRule
         });
       })
     )

package/atoms/icon/icons.json

@@ -561,7 +561,7 @@
     },
     "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
@@ -1111,6 +1111,42 @@
       ],
       "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": 16,
+      "height": 16
+    },
+    "text_position_center": {
+      "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 8.77778V7H20V8.77778H4Z"],
+      "width": 16,
+      "height": 16
+    },
+    "text_position_bottom": {
+      "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 11.7778V10H20V11.7778H4Z"],
+      "width": 16,
+      "height": 16
     }
   }
 }

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.6.0",
+  "version": "8.7.0",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "8.6.0",
+    "@desynova-digital/tokens": "8.7.0",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },