@wireapp/react-ui-kit - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

Form/ErrorMessage.js

@@ -10,3 +10,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: block;\n  margin-top: 12px;\n'], ['\n  display: block;\n  margin-top: 12px;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: block;\n  margin-top: 12px;\n  a {\n    color: inherit;\n  }\n'], ['\n  display: block;\n  margin-top: 12px;\n  a {\n    color: inherit;\n  }\n']);
 
@@ -13,0 +13,0 @@ var _Identity = require('../Identity');

Form/Input.js

@@ -9,3 +9,3 @@ 'use strict';
 var _templateObject = _taggedTemplateLiteral(['\n  color: ', ';\n  font-size: 11px;\n  text-transform: ', ';\n'], ['\n  color: ', ';\n  font-size: 11px;\n  text-transform: ', ';\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  /* appearance */\n  background: ', ';\n  border-radius: 4px;\n  border: none;\n  color: ', ';\n  font-weight: 400;\n  outline: none;\n  caret-color: ', ';\n\n  /* positioning */\n  line-height: 56px;\n  margin: 0 0 16px;\n  padding: 0 20px;\n  width: 100%;\n\n  &::-webkit-input-placeholder {\n    /* WebKit, Blink, Edge */\n    ', ';\n  }\n  &::-ms-input-placeholder {\n    /* Microsoft Edge */\n    ', ';\n  }\n  &::-moz-placeholder {\n    /* Mozilla Firefox 19+ */\n    ', ';\n    opacity: 1;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n'], ['\n  /* appearance */\n  background: ', ';\n  border-radius: 4px;\n  border: none;\n  color: ', ';\n  font-weight: 400;\n  outline: none;\n  caret-color: ', ';\n\n  /* positioning */\n  line-height: 56px;\n  margin: 0 0 16px;\n  padding: 0 20px;\n  width: 100%;\n\n  &::-webkit-input-placeholder {\n    /* WebKit, Blink, Edge */\n    ', ';\n  }\n  &::-ms-input-placeholder {\n    /* Microsoft Edge */\n    ', ';\n  }\n  &::-moz-placeholder {\n    /* Mozilla Firefox 19+ */\n    ', ';\n    opacity: 1;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n']);
+    _templateObject2 = _taggedTemplateLiteral(['\n  /* appearance */\n  background: ', ';\n  border-radius: 4px;\n  border: none;\n  color: ', ';\n  font-weight: 400;\n  outline: none;\n  caret-color: ', ';\n\n  /* positioning */\n  line-height: 56px;\n  margin: 0 0 16px;\n  padding: 0 20px;\n  width: 100%;\n\n  &::-webkit-input-placeholder {\n    /* WebKit, Blink, Edge */\n    ', ';\n  }\n  &::-ms-input-placeholder {\n    /* Microsoft Edge */\n    ', ';\n  }\n  &::-moz-placeholder {\n    /* Mozilla Firefox 19+ */\n    ', ';\n    opacity: 1;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n  ', ';\n'], ['\n  /* appearance */\n  background: ', ';\n  border-radius: 4px;\n  border: none;\n  color: ', ';\n  font-weight: 400;\n  outline: none;\n  caret-color: ', ';\n\n  /* positioning */\n  line-height: 56px;\n  margin: 0 0 16px;\n  padding: 0 20px;\n  width: 100%;\n\n  &::-webkit-input-placeholder {\n    /* WebKit, Blink, Edge */\n    ', ';\n  }\n  &::-ms-input-placeholder {\n    /* Microsoft Edge */\n    ', ';\n  }\n  &::-moz-placeholder {\n    /* Mozilla Firefox 19+ */\n    ', ';\n    opacity: 1;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n  ', ';\n']);
 
@@ -30,5 +30,12 @@ var _styledComponents = require('styled-components');
 
-var Input = _styledComponents2.default.input(_templateObject2, _Identity.COLOR.WHITE, _Identity.COLOR.GRAY_DARKEN_72, _Identity.COLOR.BLUE, placeholderStyle, placeholderStyle, placeholderStyle);
+var dotSize = 8;
+var invalidDot = '\n  <svg xmlns="http://www.w3.org/2000/svg" width="' + dotSize + '" height="' + dotSize + '" viewBox="0 0 8 8">\n    <circle cx="4" cy="4" r="4" fill="' + _Identity.COLOR.RED + '" />\n  </svg>\n';
+var base64Dot = btoa(invalidDot);
 
+var Input = _styledComponents2.default.input(_templateObject2, _Identity.COLOR.WHITE, _Identity.COLOR.GRAY_DARKEN_72, _Identity.COLOR.BLUE, placeholderStyle, placeholderStyle, placeholderStyle, function (props) {
+  return props.markInvalid && 'background: ' + _Identity.COLOR.WHITE + ' url(\'data:image/svg+xml;base64,' + base64Dot + '\') no-repeat right 20px center';
+});
+
 Input.propTypes = {
+  markInvalid: _propTypes2.default.bool,
   placeholderTextTransform: _propTypes2.default.string
@@ -38,2 +45,3 @@ };
 Input.defaultProps = {
+  markInvalid: false,
   placeholderTextTransform: 'uppercase'
@@ -40,0 +48,0 @@ };

Icon/index.js

@@ -19,2 +19,14 @@ 'use strict';
 
+var _CheckIcon = require('./CheckIcon');
+
+Object.keys(_CheckIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CheckIcon[key];
+    }
+  });
+});
+
 var _PlaneIcon = require('./PlaneIcon');
@@ -21,0 +33,0 @@

package.json

@@ -31,3 +31,3 @@ {
   "repository": "https://github.com/wireapp/wire-web-packages/tree/master/packages/react-ui-kit",
-  "version": "0.0.12"
+  "version": "0.0.13"
 }

Text/Text.js

@@ -11,10 +11,4 @@ 'use strict';
 var _templateObject = _taggedTemplateLiteral(['\n  /* appearance */\n  color: ', ';\n  font-size: ', ';\n  font-weight: ', ';\n  opacity: ', ';\n  text-align: ', ';\n  text-transform: ', ';\n  ', ';\n  ', ';\n'], ['\n  /* appearance */\n  color: ', ';\n  font-size: ', ';\n  font-weight: ', ';\n  opacity: ', ';\n  text-align: ', ';\n  text-transform: ', ';\n  ', ';\n  ', ';\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n        white-space: nowrap;\n      '], ['\n        white-space: nowrap;\n      ']),
-    _templateObject3 = _taggedTemplateLiteral(['\n        overflow: hidden;\n        text-overflow: ellipsis;\n      '], ['\n        overflow: hidden;\n        text-overflow: ellipsis;\n      ']),
-    _templateObject4 = _taggedTemplateLiteral([''], ['']);
+    _templateObject2 = _taggedTemplateLiteral([''], ['']);
 
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
 var _Identity = require('../Identity');
@@ -26,2 +20,6 @@
 
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,9 +42,5 @@
 }, function (props) {
-  if (props.noWrap) {
-    return (0, _styledComponents.css)(_templateObject2);
-  }
+  return props.noWrap && 'white-space: nowrap;';
 }, function (props) {
-  if (props.truncate) {
-    return (0, _styledComponents.css)(_templateObject3);
-  }
+  return props.truncate && '\n        overflow: hidden;\n        text-overflow: ellipsis;\n      ';
 });
@@ -88,3 +82,3 @@
 
-var Muted = Text.extend(_templateObject4);
+var Muted = Text.extend(_templateObject2);
 Muted.defaultProps = _extends({}, Text.defaultProps, {
@@ -94,3 +88,3 @@ muted: true
 
-var Uppercase = Text.extend(_templateObject4);
+var Uppercase = Text.extend(_templateObject2);
 Uppercase.defaultProps = _extends({}, Text.defaultProps, {
@@ -97,0 +91,0 @@ textTransform: 'uppercase'

No alert changes

Improved metrics

Total package byte prevSize

96578

increased by3.65%

Number of package files

44

increased by2.33%

Lines of code

1831

increased by2.81%

Worsened metrics

Published versions last months

8

decreased by-11.11%

No dependency changes