@desynova-digital/components 8.10.1 → 8.11.0

package/atoms/cardV2/thumbnail.js

@@ -169,7 +169,7 @@ var Thumbnail = function Thumbnail(props) {
         position: "relative",
         zIndex: "2"
       },
-      (card_status || upload_status) && statusIndex && _react2.default.createElement(
+      (card_status || upload_status) && statusIndex > -1 && _react2.default.createElement(
         StatusBoxStyles,
         {
           hex: _tokens.CARD_ASSET_STATUS[statusIndex] ? _tokens.CARD_ASSET_STATUS[statusIndex].hex : { background: "#AFB2BA" }

package/atoms/inputText/inputText.js

@@ -8,7 +8,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-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']),
+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  &:first-letter {\n    text-transform: ', '\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  &:first-letter {\n    text-transform: ', '\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  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']),
@@ -38,7 +38,9 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var InputTextDiv = _styledComponents2.default.div(_templateObject);
+var InputTextDiv = _styledComponents2.default.div(_templateObject, function (props) {
+  return props.capitalizeFirstLetter ? 'capitalize' : '';
+});
 
 var InputError = _styledComponents2.default.span(_templateObject2, function (props) {
   return _tokens.colors[props.theme].inputError.color;
@@ -53,7 +55,8 @@ var InputText = function InputText(_ref) {
       defaultValue = _ref.defaultValue,
       type = _ref.type,
       showLengthCount = _ref.showLengthCount,
-      props = _objectWithoutProperties(_ref, ['maxlength', 'defaultValue', 'type', 'showLengthCount']);
+      capitalizeFirstLetter = _ref.capitalizeFirstLetter,
+      props = _objectWithoutProperties(_ref, ['maxlength', 'defaultValue', 'type', 'showLengthCount', 'capitalizeFirstLetter']);
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -85,7 +88,7 @@ var InputText = function InputText(_ref) {
 
   return _react2.default.createElement(
     InputTextDiv,
-    { theme: props.theme },
+    { theme: props.theme, capitalizeFirstLetter: capitalizeFirstLetter || '' },
     _react2.default.createElement(InputText.Element, _extends({ type: hidden ? type : 'text', value: props.value, defaultValue: defaultValue }, props, { maxLength: maxlength || '' })),
     props.label ? _react2.default.createElement(
       'label',
@@ -195,6 +198,7 @@ InputText.propTypes = {
   /** The (HTML) maxlength for the input. */
   maxlength: _propTypes2.default.number,
   showLengthCount: _propTypes2.default.bool,
+  capitalizeFirstLetter: _propTypes2.default.bool,
   theme: _propTypes2.default.oneOf(['light', 'dark'])
 
   /** deprecate error string prop */

package/atoms/inputText/inputText.story.js

@@ -66,14 +66,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
                     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 }),
-            _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', value: "hello", label: 'Label and default value', required: true })
+            _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', value: "hello there i am using", label: 'Label and default value', required: true })
         ),
         _react2.default.createElement(
             _storyHelpers.Stack,
             null,
             _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'number', placeholder: 'number field & no Label', required: true, maxLength: 10 }),
             _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'number', id: 'input-text-1', label: 'Label \'For\'-\'id\' prop', placeholder: 'No Label & Number Field', required: true, maxLength: 10 }),
-            _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', value: "No Label and default value", onChange: function onChange(e) {
+            _react2.default.createElement(_components.InputText, { theme: 'dark', capitalizeFirstLetter: true, type: 'text', value: "no label and default value", onChange: function onChange(e) {
                     alert("some Handler code");
                 }, placeholder: 'Placeholder text', required: true })
         ),

package/package.json

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