@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/inputText/inputText.story.js

@@ -1,261 +1,197 @@
 "use strict";
 
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require("@storybook/react");
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
 var _storyHelpers = require("../../_helpers/story-helpers");
-
 var _components = require("../../components");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)("InputText").add("light theme", function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: "Appearances" },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _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: "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
-      })
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.InputText, {
-        type: "number",
-        placeholder: "number field & no Label",
-        required: true,
-        maxLength: 10
-      }),
-      _react2.default.createElement(_components.InputText, {
-        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, {
-        type: "text",
-        value: "No Label and default value",
-        onChange: function onChange(e) {
-          alert("some Handler code");
-        },
-        placeholder: "Placeholder text",
-        required: true
-      })
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.InputText, {
-        type: "number",
-        label: "number & max 5",
-        placeholder: "max length 5",
-        required: true,
-        minLength: 3,
-        maxLength: 5
-      }),
-      _react2.default.createElement(_components.InputText, {
-        type: "text",
-        error: "Invalid text",
-        placeholder: "Display error",
-        required: true
-      }),
-      _react2.default.createElement(_components.InputText, {
-        readOnly: true,
-        type: "text",
-        value: "hello",
-        onChange: function onChange(e) {
-          alert("some Handler code");
-        },
-        placeholder: "Placeholder text",
-        required: true
-      })
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.InputText, {
-        type: "password",
-        value: "this@is$passw0rd",
-        placeholder: "This is password toggle",
-        passwordButton: true
-      }),
-      _react2.default.createElement(_components.InputText, {
-        label: "Label 'For'-'id' prop",
-        type: "password",
-        value: "this@is$passw0rd",
-        placeholder: "This is password toggle",
-        passwordButton: true
-      }),
-      _react2.default.createElement(_components.InputText, {
-        label: "Label 'For'-'id' ",
-        error: " this is error",
-        type: "password",
-        value: "this@is$passw0rd",
-        placeholder: "This is password toggle",
-        passwordButton: true
-      })
-    )
-  );
+var _this = void 0;
+(0, _react2.storiesOf)("InputText").add("light theme", function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    type: "text",
+    label: "First Name",
+    onKeyPress: function onKeyPress(e) {
+      return _this.value = e.target.value;
+    },
+    onChange: function onChange(e) {
+      return console.log(e.target.value);
+    },
+    placeholder: "Enter Name max 10",
+    value: "asd",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    type: "password",
+    label: "Middle Name",
+    minLength: 3,
+    maxLength: 6,
+    placeholder: "Show as password",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    type: "text",
+    value: "hello",
+    label: "Label and default value",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    type: "number",
+    placeholder: "number field & no Label",
+    required: true,
+    maxLength: 10
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    type: "number",
+    id: "input-text-1",
+    label: "Label 'For'-'id' prop",
+    placeholder: "No Label & Number Field",
+    required: true,
+    maxLength: 10
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    type: "text",
+    value: "No Label and default value",
+    onChange: function onChange(e) {
+      alert("some Handler code");
+    },
+    placeholder: "Placeholder text",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    type: "number",
+    label: "number & max 5",
+    placeholder: "max length 5",
+    required: true,
+    minLength: 3,
+    maxLength: 5
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    type: "text",
+    error: "Invalid text",
+    placeholder: "Display error",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    readOnly: true,
+    type: "text",
+    value: "hello",
+    onChange: function onChange(e) {
+      alert("some Handler code");
+    },
+    placeholder: "Placeholder text",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    label: "Label 'For'-'id' prop",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    label: "Label 'For'-'id' ",
+    error: " this is error",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  })));
 });
-
-(0, _react3.storiesOf)("InputText").add("dark theme", function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: "Appearances", background: "dark" },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.InputText, {
-        theme: "dark",
-        type: "text",
-        label: "First Name",
-        showLengthCount: true,
-        value: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m",
-        maxLength: 100,
-        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
-      }),
-      _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",
-        capitalizeFirstLetter: true,
-        type: "text",
-        value: "no label and default value",
-        onChange: function onChange(e) {
-          alert("some Handler code");
-        },
-        placeholder: "Placeholder text",
-        required: true
-      })
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.InputText, {
-        theme: "dark",
-        type: "number",
-        label: "number & max 5",
-        placeholder: "max length 5",
-        required: true,
-        minLength: 3,
-        maxLength: 5
-      }),
-      _react2.default.createElement(_components.InputText, {
-        theme: "dark",
-        type: "text",
-        error: "Invalid text",
-        placeholder: "Display error",
-        required: true
-      }),
-      _react2.default.createElement(_components.InputText, {
-        theme: "dark",
-        readOnly: true,
-        type: "text",
-        value: "hello",
-        onChange: function onChange(e) {
-          alert("some Handler code");
-        },
-        placeholder: "Placeholder text",
-        required: true
-      })
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.InputText, {
-        theme: "dark",
-        type: "password",
-        value: "this@is$passw0rd",
-        placeholder: "This is password toggle",
-        passwordButton: true
-      }),
-      _react2.default.createElement(_components.InputText, {
-        theme: "dark",
-        label: "Label 'For'-'id' prop",
-        type: "password",
-        value: "this@is$passw0rd",
-        placeholder: "This is password toggle",
-        passwordButton: true
-      }),
-      _react2.default.createElement(_components.InputText, {
-        theme: "dark",
-        label: "Label 'For'-'id' ",
-        error: " this is error",
-        type: "password",
-        value: "this@is$passw0rd",
-        placeholder: "This is password toggle",
-        passwordButton: true
-      })
-    )
-  );
+(0, _react2.storiesOf)("InputText").add("dark theme", function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    type: "text",
+    label: "First Name",
+    showLengthCount: true,
+    value: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m",
+    maxLength: 100,
+    onChange: function onChange(e) {
+      return console.log(e.target.value);
+    },
+    placeholder: "Enter Name max 10",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    type: "password",
+    label: "Middle Name",
+    minLength: 3,
+    maxLength: 6,
+    placeholder: "Show as password",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    type: "text",
+    value: "hello there i am using",
+    label: "Label and default value",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    type: "number",
+    placeholder: "number field & no Label",
+    required: true,
+    maxLength: 10
+  }), /*#__PURE__*/_react["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
+  }), /*#__PURE__*/_react["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
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    type: "number",
+    label: "number & max 5",
+    placeholder: "max length 5",
+    required: true,
+    minLength: 3,
+    maxLength: 5
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    type: "text",
+    error: "Invalid text",
+    placeholder: "Display error",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    readOnly: true,
+    type: "text",
+    value: "hello",
+    onChange: function onChange(e) {
+      alert("some Handler code");
+    },
+    placeholder: "Placeholder text",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    label: "Label 'For'-'id' prop",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.InputText, {
+    theme: "dark",
+    label: "Label 'For'-'id' ",
+    error: " this is error",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  })));
 });

package/atoms/label/index.js

@@ -1,13 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _label = require("./label");
-
-var _label2 = _interopRequireDefault(_label);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _label2.default;
+exports["default"] = void 0;
+var _label = _interopRequireDefault(require("./label"));
+var _default = exports["default"] = _label["default"];

package/atoms/label/label.js

@@ -1,37 +1,23 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  padding: 3px;\n  border-radius: 2px;\n  display: inline-block;\n  color: ', ';\n  background-color: ', ';\n  font-size: 10px;\n  line-height: 1;\n  text-transform: uppercase;\n  font-family: \'SFUIText-Medium\';\n'], ['\n  position: relative;\n  padding: 3px;\n  border-radius: 2px;\n  display: inline-block;\n  color: ', ';\n  background-color: ', ';\n  font-size: 10px;\n  line-height: 1;\n  text-transform: uppercase;\n  font-family: \'SFUIText-Medium\';\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  width: 60px;\n  height: 20px;\n  background-color: ', ';\n  border-radius: 2px;\n\n  .filler {\n    position: absolute;\n    width: ', ';\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: ', ';\n    border-top-left-radius: 2px;\n    border-bottom-left-radius: 2px;\n    transition: width 0.5s;\n  }\n\n  .percentage-label {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ', ';\n    font-size: 12px;\n    font-weight: 700;\n  }\n'], ['\n  position: relative;\n  width: 60px;\n  height: 20px;\n  background-color: ', ';\n  border-radius: 2px;\n\n  .filler {\n    position: absolute;\n    width: ', ';\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: ', ';\n    border-top-left-radius: 2px;\n    border-bottom-left-radius: 2px;\n    transition: width 0.5s;\n  }\n\n  .percentage-label {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ', ';\n    font-size: 12px;\n    font-weight: 700;\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);
-
-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 LabelStyles = _styledComponents2.default.div(_templateObject, function (_ref) {
+exports["default"] = 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 _templateObject, _templateObject2;
+var LabelStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  padding: 3px;\n  border-radius: 2px;\n  display: inline-block;\n  color: ", ";\n  background-color: ", ";\n  font-size: 10px;\n  line-height: 1;\n  text-transform: uppercase;\n  font-family: 'SFUIText-Medium';\n"])), function (_ref) {
   var hex = _ref.hex;
   return hex.color || '#0C141D';
 }, function (_ref2) {
   var hex = _ref2.hex;
   return hex.background || '#AFB2BA';
 });
-
-var PercentageBox = _styledComponents2.default.div(_templateObject2, function (_ref3) {
+var PercentageBox = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  width: 60px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 2px;\n\n  .filler {\n    position: absolute;\n    width: ", ";\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: ", ";\n    border-top-left-radius: 2px;\n    border-bottom-left-radius: 2px;\n    transition: width 0.5s;\n  }\n\n  .percentage-label {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    font-size: 12px;\n    font-weight: 700;\n  }\n"])), function (_ref3) {
   var percentageField = _ref3.percentageField;
   return percentageField.backgroundColor || '#red';
 }, function (_ref4) {
@@ -44,7 +30,6 @@ var PercentageBox = _styledComponents2.default.div(_templateObject2, function (_
   var percentageField = _ref6.percentageField;
   return percentageField.textColor || '#fff';
 });
-
 var LABEL_STYLES = [{
   code: ['cancelled', 'error', 'failed', 'upload_cancelled_by_user', 'rejected'],
   hex: {
@@ -77,24 +62,20 @@ var LABEL_STYLES = [{
     background: '#FF8D29'
   }
 }];
-
 var Label = function Label(props) {
   var status = props.status,
-      percentageStatus = props.percentageStatus,
-      percentageField = props.percentageField;
-
+    percentageStatus = props.percentageStatus,
+    percentageField = props.percentageField;
   if (percentageStatus) {
     var value = Math.round(parseFloat(percentageStatus)) + '%';
-    return _react2.default.createElement(
-      PercentageBox,
-      { fillerWidth: value, percentageField: percentageField },
-      _react2.default.createElement('div', { 'class': 'filler' }),
-      _react2.default.createElement(
-        'div',
-        { 'class': 'percentage-label' },
-        value
-      )
-    );
+    return /*#__PURE__*/_react["default"].createElement(PercentageBox, {
+      fillerWidth: value,
+      percentageField: percentageField
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      "class": "filler"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      "class": "percentage-label"
+    }, value));
   }
   // eg. status = Upload Cancelled By User
   var arr = status ? status.toLowerCase().split(' ') : []; // [upload, cancelled, by, user]
@@ -107,21 +88,15 @@ var Label = function Label(props) {
   var index = LABEL_STYLES.findIndex(function (label) {
     return label.code.includes(formatted);
   });
-
-  return _react2.default.createElement(
-    LabelStyles,
-    { hex: index >= 0 && LABEL_STYLES[index].hex },
-    props.children
-  );
+  return /*#__PURE__*/_react["default"].createElement(LabelStyles, {
+    hex: index >= 0 && LABEL_STYLES[index].hex
+  }, props.children);
 };
-
 Label.propTypes = {
   /** The visual style used to convey the label's purpose */
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
 };
-
 Label.defaultProps = {
   theme: 'light'
 };
-
-exports.default = Label;
+var _default = exports["default"] = Label;