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

Comparing version 0.0.8 to 0.0.9

Form/Button.js

@@ -10,3 +10,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  /* appearance */\n  background-color: ', ';\n  border-radius: 8px;\n  border: 0;\n  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: none;\n  ', '\n\n  /* positioning */\n  height: 48px;\n  line-height: 48px;\n  max-width: 100%;\n  padding: 0 32px;\n  width: ', ';\n\n  &:hover,\n  &:focus {\n    /* appearance */\n    text-decoration: none;\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n'], ['\n  /* appearance */\n  background-color: ', ';\n  border-radius: 8px;\n  border: 0;\n  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: none;\n  ', '\n\n  /* positioning */\n  height: 48px;\n  line-height: 48px;\n  max-width: 100%;\n  padding: 0 32px;\n  width: ', ';\n\n  &:hover,\n  &:focus {\n    /* appearance */\n    text-decoration: none;\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  /* appearance */\n  background-color: ', ';\n  border-radius: 8px;\n  border: 0;\n  cursor: ', ';\n  display: inline-block;\n  text-decoration: none;\n  ', '\n\n  /* positioning */\n  height: 48px;\n  line-height: 48px;\n  max-width: 100%;\n  ouline: none;\n  padding: 0 32px;\n  min-width: 184px;\n  width: ', ';\n  &:hover,\n  &:focus {\n    /* appearance */\n    text-decoration: none;\n    background-color: ', '\n   }\n'], ['\n  /* appearance */\n  background-color: ', ';\n  border-radius: 8px;\n  border: 0;\n  cursor: ', ';\n  display: inline-block;\n  text-decoration: none;\n  ', '\n\n  /* positioning */\n  height: 48px;\n  line-height: 48px;\n  max-width: 100%;\n  ouline: none;\n  padding: 0 32px;\n  min-width: 184px;\n  width: ', ';\n  &:hover,\n  &:focus {\n    /* appearance */\n    text-decoration: none;\n    background-color: ', '\n   }\n']);
 
@@ -27,6 +27,11 @@ var _Identity = require('../Identity');
 
+var darkenAmount = 0.08;
 var Button = _Text.Text.withComponent('button').extend(_templateObject, function (props) {
-  return props.backgroundColor;
+  return props.disabled ? _Identity.COLOR.DISABLED : props.backgroundColor;
+}, function (props) {
+  return props.disabled ? 'default' : 'pointer';
 }, _motions.defaultTransition, function (props) {
   return props.block ? '100%' : 'auto';
+}, function (props) {
+  return props.disabled ? _Identity.COLOR.DISABLED : _Identity.COLOR.shade(props.backgroundColor, darkenAmount);
 });
@@ -37,2 +42,3 @@
   block: _propTypes2.default.bool,
+  disabled: _propTypes2.default.bool,
   noCapital: _propTypes2.default.bool
@@ -42,3 +48,3 @@ });
 Button.defaultProps = _extends({}, _Text.Text.defaultProps, {
-  backgroundColor: _Identity.COLOR.GRAY,
+  backgroundColor: _Identity.COLOR.BLUE,
   block: false,
@@ -48,2 +54,3 @@ bold: true,
   color: _Identity.COLOR.WHITE,
+  disabled: false,
   noCapital: false,
@@ -50,0 +57,0 @@ nowrap: true,

Form/Checkbox.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Checkbox = undefined;
+exports.CheckboxLabel = exports.Checkbox = undefined;
 
@@ -12,4 +12,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 var _templateObject = _taggedTemplateLiteral(['\n  /* appearance */\n  /* positioning */\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n'], ['\n  /* appearance */\n  /* positioning */\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  /* appearance */\n  /* positioning */\n  height: 14px;\n  width: 30px;\n  margin-bottom: 0;\n'], ['\n  /* appearance */\n  /* positioning */\n  height: 14px;\n  width: 30px;\n  margin-bottom: 0;\n']);
+    _templateObject2 = _taggedTemplateLiteral(['\n  /* appearance */\n  /* positioning */\n  height: 14px;\n  width: 30px;\n  margin-bottom: 0;\n'], ['\n  /* appearance */\n  /* positioning */\n  height: 14px;\n  width: 30px;\n  margin-bottom: 0;\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  a {\n    text-decoration: none;\n    color: ', ';\n  }\n'], ['\n  a {\n    text-decoration: none;\n    color: ', ';\n  }\n']);
 
+var _index = require('../index');
+
 var _Input = require('./Input');
@@ -25,2 +28,4 @@
 
+var _Text = require('../Text');
+
 var _styledComponents = require('styled-components');
@@ -45,7 +50,11 @@
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ['id', 'children']);
+      style = _ref.style,
+      props = _objectWithoutProperties(_ref, ['id', 'children', 'style']);
 
+  if (!id) {
+    id = Math.random().toString();
+  }
   return _react2.default.createElement(
     StyledContainerCheckbox,
-    null,
+    { style: style },
     _react2.default.createElement(StyledCheckbox, _extends({ id: id }, props)),
@@ -60,11 +69,21 @@ _react2.default.createElement(
 
+var CheckboxLabel = _Text.Text.extend(_templateObject3, _index.COLOR.LINK);
+
+CheckboxLabel.defaultProps = _extends({}, _Text.Text.defaultProps, {
+  bold: true,
+  fontSize: '11px',
+  textTransform: 'uppercase'
+});
+
 Checkbox.propTypes = _extends({}, _Input.Input.propTypes, {
   children: _propTypes2.default.node,
-  id: _propTypes2.default.string.isRequired
+  id: _propTypes2.default.string
 });
 
 Checkbox.defaultProps = _extends({}, _Input.Input.defaultProps, {
-  children: null
+  children: null,
+  id: null
 });
 
-exports.Checkbox = Checkbox;
+exports.Checkbox = Checkbox;
+exports.CheckboxLabel = CheckboxLabel;

Form/CodeInput.js

@@ -11,3 +11,3 @@ 'use strict';
 var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: center;\n'], ['\n  display: flex;\n  justify-content: center;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  line-height: 56px;\n  width: 48px;\n  font-size: 32px;\n  border: none;\n  border-radius: 4px;\n  text-align: center;\n  color: black;\n  & + & {\n    margin-left: 19px;\n  }\n'], ['\n  line-height: 56px;\n  width: 48px;\n  font-size: 32px;\n  border: none;\n  border-radius: 4px;\n  text-align: center;\n  color: black;\n  & + & {\n    margin-left: 19px;\n  }\n']);
+    _templateObject2 = _taggedTemplateLiteral(['\n  line-height: 56px;\n  width: 48px;\n  font-size: 32px;\n  border: none;\n  border-radius: 4px;\n  text-align: center;\n  color: black;\n  outline: none;\n  & + & {\n    margin-left: 19px;\n  }\n'], ['\n  line-height: 56px;\n  width: 48px;\n  font-size: 32px;\n  border: none;\n  border-radius: 4px;\n  text-align: center;\n  color: black;\n  outline: none;\n  & + & {\n    margin-left: 19px;\n  }\n']);
 
@@ -128,31 +128,32 @@ var _propTypes = require('prop-types');
 
-      var _loop = function _loop(i) {
+      var _loop = function _loop(index) {
         inputs.push(_react2.default.createElement(DigitInput, {
-          key: i,
-          onChange: function onChange(e) {
-            return _this2.setValue(i, e.target.value);
+          autoFocus: index === 0 && _this2.props.autoFocus,
+          key: index,
+          onChange: function onChange(event) {
+            return _this2.setValue(index, event.target.value);
           },
-          onPaste: function onPaste(e) {
-            return _this2.handlePaste(i, e.clipboardData.getData('Text'));
+          onPaste: function onPaste(event) {
+            return _this2.handlePaste(index, event.clipboardData.getData('Text'));
           },
-          onFocus: function onFocus(e) {
-            return e.target.select();
+          onFocus: function onFocus(event) {
+            return event.target.select();
           },
-          onKeyDown: function onKeyDown(e) {
-            return _this2.handleKeyDown(i, e);
+          onKeyDown: function onKeyDown(event) {
+            return _this2.handleKeyDown(index, event);
           },
           innerRef: function innerRef(node) {
-            return _this2.inputs[i] = node;
+            return _this2.inputs[index] = node;
           },
           type: 'text',
-          value: values[i]
+          value: values[index]
         }));
       };
 
-      for (var i = 0; i < this.props.digits; i++) {
-        _loop(i);
+      for (var index = 0; index < this.props.digits; index++) {
+        _loop(index);
       }
       return _react2.default.createElement(
         CodeInputWrapper,
-        null,
+        { style: this.props.style },
         inputs
@@ -167,9 +168,13 @@ );
 CodeInput.propTypes = {
+  autoFocus: _propTypes2.default.bool,
   digits: _propTypes2.default.number,
-  onCodeComplete: _propTypes2.default.func
+  onCodeComplete: _propTypes2.default.func,
+  style: _propTypes2.default.object
 };
 CodeInput.defaultProps = {
+  autoFocus: false,
   digits: 6,
-  onCodeComplete: function onCodeComplete() {}
+  onCodeComplete: function onCodeComplete() {},
+  style: null
 };
 exports.CodeInput = CodeInput;

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: 48px;\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: 48px;\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  /* 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']);
 
@@ -12,0 +12,0 @@ var _styledComponents = require('styled-components');

Form/InputBlock.js

@@ -22,3 +22,3 @@ 'use strict';
 
-var InputBlock = _styledComponents2.default.div(_templateObject, _Identity.COLOR.GRAY_LIGHTEN_92, _Identity.COLOR.WHITE, _Identity.COLOR.WHITE, function () {
+var InputBlock = _styledComponents2.default.div(_templateObject, _Identity.COLOR.GRAY_LIGHTEN_88, _Identity.COLOR.WHITE, _Identity.COLOR.WHITE, function () {
   return _.Input;
@@ -25,0 +25,0 @@ }, function () {

Form/InputSubmitCombo.js

@@ -8,3 +8,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  ', ' {\n    padding: 0;\n    margin: 0 10px 0 0;\n    flex-grow: 1;\n  }\n'], ['\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  ', ' {\n    padding: 0;\n    margin: 0 10px 0 0;\n    flex-grow: 1;\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-right: 16px;\n  ', ' {\n    padding: 0;\n    margin: 0 10px 0 0;\n    flex-grow: 1;\n  }\n'], ['\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-right: 16px;\n  ', ' {\n    padding: 0;\n    margin: 0 10px 0 0;\n    flex-grow: 1;\n  }\n']);
 
@@ -11,0 +11,0 @@ var _ = require('./');

Form/RoundIconButton.js

@@ -8,3 +8,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  min-width: ', 'px;\n  padding: 0;\n  cursor: ', ';\n  opacity: ', ';\n'], ['\n  min-width: ', 'px;\n  padding: 0;\n  cursor: ', ';\n  opacity: ', ';\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  background-color: ', ';\n  min-width: ', 'px;\n  outline: none;\n  padding: 0;\n  cursor: ', ';\n  ', '\n  &:hover,\n  &:focus {\n    background-color: ', '\n   }\n'], ['\n  background-color: ', ';\n  min-width: ', 'px;\n  outline: none;\n  padding: 0;\n  cursor: ', ';\n  ', '\n  &:hover,\n  &:focus {\n    background-color: ', '\n   }\n']);
 
@@ -23,2 +23,4 @@ var _Icon = require('../Icon');
 
+var _motions = require('../Identity/motions');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,8 +32,12 @@
 
+var darkenAmount = 0.08;
+
 var Button = _Icon.RoundContainer.withComponent('button').extend(_templateObject, function (props) {
+  return props.disabled ? _Identity.COLOR.DISABLED : props.color;
+}, function (props) {
   return props.size;
 }, function (props) {
   return props.disabled ? 'default' : 'pointer';
-}, function (props) {
-  return props.disabled ? '0.5' : '1';
+}, _motions.defaultTransition, function (props) {
+  return props.disabled ? _Identity.COLOR.DISABLED : _Identity.COLOR.shade(props.color, darkenAmount);
 });
@@ -64,3 +70,3 @@
 RoundIconButton.defaultProps = {
-  color: _Identity.COLOR.GRAY_LIGHTEN_48,
+  color: _Identity.COLOR.BLUE,
   disabled: false,
@@ -67,0 +73,0 @@ icon: 'arrow',

Identity/colors.js

@@ -88,2 +88,10 @@ 'use strict';
 
-var COLOR = exports.COLOR = _extends({}, BASE_COLOR, DARK_COLOR, LIGHT_COLOR, OPAQUE_COLOR);
+var COMPONENT_COLOR = {
+  LINK: DARK_COLOR.GRAY_DARKEN_72,
+  TEXT: DARK_COLOR.GRAY_DARKEN_32,
+  DISABLED: opaque(DARK_COLOR.GRAY_DARKEN_32, 0.84)
+};
+
+var COLOR = exports.COLOR = _extends({}, BASE_COLOR, DARK_COLOR, LIGHT_COLOR, OPAQUE_COLOR, COMPONENT_COLOR, {
+  shade: shade
+});

Identity/motions.js

@@ -6,10 +6,2 @@ 'use strict';
 });
-exports.defaultTransition = undefined;
-
-var _templateObject = _taggedTemplateLiteral(['\n  transition: all 0.24s;\n'], ['\n  transition: all 0.24s;\n']);
-
-var _styledComponents = require('styled-components');
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var defaultTransition = exports.defaultTransition = (0, _styledComponents.css)(_templateObject);
+var defaultTransition = exports.defaultTransition = 'transition: all 0.24s;';

index.js

@@ -19,5 +19,5 @@ 'use strict';
 
-var _Grid = require('./Grid');
+var _Layout = require('./Layout');
 
-Object.keys(_Grid).forEach(function (key) {
+Object.keys(_Layout).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -27,3 +27,3 @@ Object.defineProperty(exports, key, {
     get: function get() {
-      return _Grid[key];
+      return _Layout[key];
     }
@@ -30,0 +30,0 @@ });

Layout/StyledApp.js

@@ -33,5 +33,5 @@ 'use strict';
 StyledApp.defaultProps = {
-  backgroundColor: '#fafafa'
+  backgroundColor: _Identity.COLOR.GRAY_LIGHTEN_88
 };
 
 exports.StyledApp = StyledApp;

package.json

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

Text/Heading.js

@@ -10,3 +10,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  /* appearance */\n  font-size: 48px;\n  font-weight: 300;\n\n  /* positioning */\n  line-height: 62px;\n  margin-bottom: 40px;\n  margin-top: 32px;\n  min-height: 62px;\n'], ['\n  /* appearance */\n  font-size: 48px;\n  font-weight: 300;\n\n  /* positioning */\n  line-height: 62px;\n  margin-bottom: 40px;\n  margin-top: 32px;\n  min-height: 62px;\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  /* appearance */\n  font-size: 40px;\n  font-weight: 300;\n\n  /* positioning */\n  line-height: 62px;\n  margin-bottom: 40px;\n  margin-top: 32px;\n  min-height: 62px;\n'], ['\n  /* appearance */\n  font-size: 40px;\n  font-weight: 300;\n\n  /* positioning */\n  line-height: 62px;\n  margin-bottom: 40px;\n  margin-top: 32px;\n  min-height: 62px;\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  /* appearance */\n  font-size: 24px;\n  font-weight: 300;\n'], ['\n  /* appearance */\n  font-size: 24px;\n  font-weight: 300;\n']),
@@ -13,0 +13,0 @@ _templateObject3 = _taggedTemplateLiteral(['\n  /* appearance */\n  font-size: 18px;\n  font-weight: 300;\n'], ['\n  /* appearance */\n  font-size: 18px;\n  font-weight: 300;\n']),

Text/Link.js

@@ -10,3 +10,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n    /* appearance */\n    text-decoration: none;\n    ', '\n\n    /* positioning */\n\n    &:visited,\n    &:link,\n    &:active {\n      color: ', ';\n    }\n    &:hover {\n      cursor: pointer;\n      color: ', ';\n    }\n  '], ['\n    /* appearance */\n    text-decoration: none;\n    ', '\n\n    /* positioning */\n\n    &:visited,\n    &:link,\n    &:active {\n      color: ', ';\n    }\n    &:hover {\n      cursor: pointer;\n      color: ', ';\n    }\n  ']);
+var _templateObject = _taggedTemplateLiteral(['\n    /* appearance */\n    text-decoration: none;\n    ', '\n    cursor: pointer;\n\n    /* positioning */\n\n    &:visited,\n    &:link,\n    &:active {\n      color: ', ';\n    }\n    &:hover {\n      color: ', ';\n    }\n  '], ['\n    /* appearance */\n    text-decoration: none;\n    ', '\n    cursor: pointer;\n\n    /* positioning */\n\n    &:visited,\n    &:link,\n    &:active {\n      color: ', ';\n    }\n    &:hover {\n      color: ', ';\n    }\n  ']);
 
@@ -39,3 +39,3 @@ var _Identity = require('../Identity');
     return props.color;
-  }, _Identity.COLOR.GRAY_DARKEN_72);
+  }, _Identity.COLOR.LINK);
   return _react2.default.createElement(StyledLink, props);
@@ -50,3 +50,3 @@ };
   bold: true,
-  color: _Identity.COLOR.GRAY_DARKEN_72,
+  color: _Identity.COLOR.LINK,
   component: 'a',
@@ -53,0 +53,0 @@ fontSize: '11px',

Text/Text.js

@@ -34,3 +34,3 @@ 'use strict';
 }, function (props) {
-  return props.bold ? '600' : props.light ? '200' : 'unset';
+  return props.bold ? '600' : props.light ? '300' : '400';
 }, function (props) {
@@ -67,3 +67,3 @@ return props.muted ? '0.5' : '1';
   center: false,
-  color: _Identity.COLOR.GRAY_DARKEN_32,
+  color: _Identity.COLOR.TEXT,
   fontSize: '16px',
@@ -70,0 +70,0 @@ light: false,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91574

increased by1.63%

Lines of code

1750

increased by1.98%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes