@vtex/styleguide - npm Package Compare versions

Comparing version 2.0.0-rc.7 to 2.0.0-rc.9

lib/Icons/Success/index.js

@@ -86,3 +86,3 @@ 'use strict';
 Success.defaultProps = {
-  fill: '#00CCA0'
+  fill: '#8bc34a'
 };
@@ -89,0 +89,0 @@

lib/Spinner/index.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,42 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+require('./index.css');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Spinner = function Spinner() {
+var Spinner = function Spinner(_ref) {
+  var secondary = _ref.secondary;
   return _react2.default.createElement(
-    "svg",
+    'svg',
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 100 100",
-      preserveAspectRatio: "xMidYMid"
+      className: 'spinner',
+      viewBox: '0 0 66 66',
+      xmlns: 'http://www.w3.org/2000/svg'
     },
-    _react2.default.createElement(
-      "circle",
-      {
-        cx: "50",
-        cy: "50",
-        fill: "none",
-        stroke: "#3791E6",
-        strokeWidth: "10",
-        r: "40",
-        strokeDasharray: "188.49555921538757 64.83185307179586",
-        transform: "rotate(96 50 50)"
-      },
-      _react2.default.createElement("animateTransform", {
-        attributeName: "transform",
-        type: "rotate",
-        calcMode: "linear",
-        values: "0 50 50;360 50 50",
-        keyTimes: "0;1",
-        dur: "1s",
-        begin: "0s",
-        repeatCount: "indefinite"
-      })
-    )
+    _react2.default.createElement('circle', {
+      className: 'path',
+      stroke: secondary ? 'white' : '#368df7',
+      fill: 'none',
+      strokeWidth: '6',
+      strokeLinecap: 'round',
+      cx: '33',
+      cy: '33',
+      r: '30'
+    })
   );
 };
 
+Spinner.propTypes = {
+  secondary: _propTypes2.default.bool
+};
+
+Spinner.defaultProps = {
+  secondary: false
+};
+
 exports.default = Spinner;

lib/Toggle/index.js

@@ -55,4 +55,3 @@ 'use strict';
       var _props = this.props,
-          primary = _props.primary,
-          secondary = _props.secondary,
+          semantic = _props.semantic,
           disabled = _props.disabled,
@@ -63,50 +62,45 @@ id = _props.id;
 
-      var classes = 'flex items-center relative h2 w3 ph1 br4 ';
+      var classes = 'flex items-center relative h2 w3 ph1 br4 bg-animate ';
       var circleClasses = 'absolute br-100 pa3 mh2 ';
-      var iconDenyClasses = 'absolute mh2 left-2 dn ';
+      var iconDenyClasses = 'absolute mh2 dn ';
       var iconCheckClasses = 'absolute mh3 dn ';
 
-      if (secondary && primary) {
-        throw new Error('Toggle component cannot be primary AND secondary');
-      }
+      // Background
+      if (semantic) {
+        if (!disabled && !checked) {
+          classes += 'bg-red ';
+          iconDenyClasses += 'flex o-100 ';
+          iconCheckClasses += 'flex o-0 ';
+        }
 
-      if (!secondary && !primary && !disabled && !checked) {
-        classes += 'bg-red ';
-        iconDenyClasses += 'flex o-30 ';
-        iconCheckClasses += 'flex o-0 ';
-      }
+        if (!disabled && checked) {
+          classes += 'bg-green ';
+          iconDenyClasses += 'flex o-0 ';
+          iconCheckClasses += 'flex o-100 ';
+        }
+      } else if (disabled) {
+        classes += 'bg-near-white ';
+      } else {
+        if (!checked) {
+          classes += 'bg-gray ';
+        }
 
-      if (!secondary && !primary && !disabled && checked) {
-        classes += 'bg-green ';
-        iconDenyClasses += 'flex o-0 ';
-        iconCheckClasses += 'flex o-30 ';
+        if (checked) {
+          classes += 'bg-blue ';
+        }
       }
 
-      if (primary && !checked) {
-        classes += 'bg-red ';
-        iconCheckClasses += 'flex o-0 ';
-        iconDenyClasses += 'flex o-30 ';
-      }
-
-      if (primary && checked) {
-        classes += 'bg-green ';
-        iconCheckClasses += 'flex o-30 ';
-        iconDenyClasses += 'flex o-0 ';
-      }
-
-      if (secondary && !checked) {
-        classes += 'bg-gray ';
-      }
-
-      if (secondary && checked) {
-        classes += 'bg-blue ';
-      }
-
+      // Circle
       if (checked) {
         circleClasses += 'left-2 ';
+        iconDenyClasses += 'left-2 ';
+        iconCheckClasses += 'left-2 ';
+      } else {
+        circleClasses += 'left-0 ';
+        iconDenyClasses += 'left-0 ';
+        iconCheckClasses += 'left-0 ';
       }
 
       if (disabled) {
-        circleClasses += 'bg-mid-gray ';
-        classes += 'bg-silver ';
+        circleClasses += 'bg-light-gray ';
       } else {
@@ -119,4 +113,4 @@ circleClasses += 'bg-white ';
         Object.assign({
-          htmlFor: 'toggle-' + id,
-          className: 'flex flex-row items-center'
+          htmlFor: '' + id,
+          className: 'flex flex-row items-center ' + (!disabled && 'pointer')
         }, this.props.htmlProps),
@@ -130,3 +124,5 @@ this.props.children,
               height: '1.5rem',
-              width: '1.5rem'
+              width: '1.5rem',
+              transition: 'all .2s ease-out',
+              boxShadow: disabled ? 'none' : '0 0 10px rgba(0,0,0,0.2)'
             },
@@ -137,16 +133,24 @@ className: '' + circleClasses
             'div',
-            { className: iconDenyClasses },
-            _react2.default.createElement(_Deny2.default, null)
+            {
+              className: iconDenyClasses,
+              style: {
+                marginLeft: '.4rem',
+                transition: 'left .2s ease-out'
+              } },
+            _react2.default.createElement(_Deny2.default, { fill: '#ff8080' })
           ),
           _react2.default.createElement(
             'div',
-            { className: iconCheckClasses },
-            _react2.default.createElement(_Check2.default, null)
+            {
+              className: iconCheckClasses,
+              style: {
+                transition: 'left .2s ease-out'
+              } },
+            _react2.default.createElement(_Check2.default, { fill: '#8bc34a' })
           )
         ),
         _react2.default.createElement('input', {
-          id: id,
+          id: '' + id,
           type: 'checkbox',
-          className: 'dn',
-          name: 'toggle-' + id,
+          className: 'o-0',
           disabled: disabled,
@@ -173,3 +177,2 @@ checked: this.state.checked,
   checked: _propTypes2.default.bool,
-  children: _propTypes2.default.node.isRequired,
   disabled: _propTypes2.default.bool,
@@ -176,0 +179,0 @@ id: _propTypes2.default.string,

package.json

 {
   "name": "@vtex/styleguide",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.9",
   "scripts": {
@@ -10,8 +10,11 @@ "test": "react-scripts test --env=jsdom",
     "styleguide:build": "styleguidist build",
-    "compile":
-      "NODE_ENV=production babel --plugins transform-es2015-modules-commonjs ./src/components --out-dir ./lib --ignore '__tests__,*.spec.js'",
+    "compile": "npm run cleanlib && NODE_ENV=production babel --plugins transform-es2015-modules-commonjs ./src/components --out-dir ./lib --ignore '__tests__,*.spec.js' && npm run copycss",
+    "copycss": "copyfiles -u 2 src/**/*.css lib",
+    "cleanlib": "sudo rm -rf lib",
     "prepublishOnly": "npm run compile",
     "develop": "npm link && watch 'npm run compile' src"
   },
-  "files": ["lib/"],
+  "files": [
+    "lib/"
+  ],
   "homepage": "https://vtex.github.io/styleguide",
@@ -21,2 +24,3 @@ "devDependencies": {
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "copyfiles": "^1.2.0",
     "eslint-config-vtex": "^7.0.0",
@@ -29,6 +33,6 @@ "eslint-config-vtex-react": "^3.0.3",
     "react-scripts": "1.0.17",
-    "react-styleguidist": "^6.1.0",
-    "vtex-tachyons": "^1.0.1",
+    "react-styleguidist": "^6.2.5",
+    "vtex-tachyons": "^1.0.3",
     "watch": "^1.0.2"
   }
 }

README.md

@@ -33,9 +33,7 @@ ### Styleguide
 
-#### Known issue
-Your project has to run with webpack >= 2. Here's a [guide](https://webpack.js.org/guides/migrating/) for upgrading Webpack to v2. 
+### Creating a new release and publishing on NPM
 
-### Publishing to npm
-
 ```sh
-npm publish
+releasy pre
+npm publish 
 ```
@@ -48,1 +46,4 @@
 ```
+
+#### Known issues
+Your project has to run with webpack >= 2. Here's a [guide](https://webpack.js.org/guides/migrating/) for upgrading Webpack to v2. 

No alert changes

Improved metrics

Total package byte prevSize

44340

increased by1.72%

Number of package files

14

increased by7.69%

Lines of code

911

increased by3.88%

Worsened metrics

Dev dependency count

13

increased by8.33%

No dependency changes