storybook-addon-specifications - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

CHANGELOG.md

 ## Changelog
 
-### v1.0.0
+### v1.0.9
 
 * First stable release

dist/components/Specifications/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,8 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _style = require('./style');
+var _aphrodite = require("aphrodite");
 
+var _style = require("./style");
+
 var _style2 = _interopRequireDefault(_style);
@@ -36,3 +38,3 @@
   _createClass(Specifications, [{
-    key: 'render',
+    key: "render",
     value: function render() {
@@ -42,22 +44,16 @@ var results = this.props.results;
       return _react2.default.createElement(
-        'ul',
-        { style: _style2.default.wrapper },
+        "ul",
+        { className: (0, _aphrodite.css)(_style2.default.wrapper) },
         results.wrongResults.map(function (r, idx) {
           return _react2.default.createElement(
-            'li',
-            { key: idx },
+            "li",
+            { className: (0, _aphrodite.css)(_style2.default.error, _style2.default.li), key: idx },
             _react2.default.createElement(
-              'p',
+              "p",
               null,
-              _react2.default.createElement(
-                'span',
-                { style: _style2.default.specs.errors },
-                'Error :'
-              ),
-              ' ',
               r.spec
             ),
             _react2.default.createElement(
-              'p',
-              { style: _style2.default.specs.errors.message },
+              "p",
+              { className: (0, _aphrodite.css)(_style2.default.message) },
               r.message
@@ -69,10 +65,9 @@ )
           return _react2.default.createElement(
-            'li',
-            { key: idx },
+            "li",
+            { className: (0, _aphrodite.css)(_style2.default.pass, _style2.default.li), key: idx },
             _react2.default.createElement(
-              'span',
-              { style: _style2.default.specs.pass },
-              'Pass : '
-            ),
-            r
+              "p",
+              null,
+              r
+            )
           );
@@ -87,3 +82,2 @@ })
 
-Specifications.propTypes = {};
 exports.default = Specifications;

dist/components/Specifications/style.js

@@ -6,3 +6,6 @@ 'use strict';
 });
-exports.default = {
+
+var _aphrodite = require('aphrodite');
+
+exports.default = _aphrodite.StyleSheet.create({
   wrapper: {
@@ -17,17 +20,38 @@ flex: 1,
     textDecoration: 'none',
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    listStyleType: 'none'
   },
-  specs: {
-    errors: {
-      color: 'red',
-      message: {
-        backgroundColor: 'rgb(250, 250, 250)',
-        padding: '10px',
-        margin: '10px'
-      }
-    },
-    pass: {
-      color: "green"
+  error: {
+    ':before': {
+      content: "'✘'",
+      padding: '3px 5px',
+      backgroundColor: 'red'
     }
+  },
+
+  li: {
+    ':before': {
+      marginRight: '5px',
+      marginTop: '11px',
+      fontSize: '70%',
+      color: 'white',
+      fontWeight: 'bold',
+      borderRadius: '12px',
+      float: 'left'
+    }
+  },
+
+  message: {
+    backgroundColor: 'rgb(250, 250, 250)',
+    padding: '10px',
+    margin: '10px'
+  },
+
+  pass: {
+    ':before': {
+      content: "'✔'",
+      padding: '4px 5px',
+      backgroundColor: 'green'
+    }
   }
-};
+});

package.json

 {
   "name": "storybook-addon-specifications",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Add tests to your react storybook stories",
@@ -27,5 +27,5 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@kadira/storybook": "^2.2.0",
-    "@kadira/storybook-addons": "^1.3.0",
-    "@kadira/storybook-ui": "^3.0.0",
+    "@kadira/storybook": "^2.2.1",
+    "@kadira/storybook-addons": "^1.3.1",
+    "@kadira/storybook-ui": "^3.2.0",
     "babel-cli": "^6.11.4",
@@ -45,2 +45,5 @@ "babel-preset-es2015": "^6.9.0",
   },
+  "dependencies": {
+    "aphrodite": "^0.5.0"
+  },
   "peerDependencies": {
@@ -47,0 +50,0 @@ "@kadira/storybook-addons": "^1.3.0",

src/components/Specifications/index.js

@@ -1,7 +0,6 @@
-import React, { Component, PropTypes } from 'react';
-import style from './style';
+import React, {Component, PropTypes} from "react";
+import {css} from "aphrodite";
+import specs from "./style"
 
 export default class Specifications extends Component {
-  static propTypes = {
-  };
 
@@ -11,7 +10,13 @@ render() {
     return (
-      <ul style={style.wrapper}>
-        {results.wrongResults.map((r, idx)=><li key={idx}>
-          <p><span style={style.specs.errors}>Error :</span> {r.spec}</p>
-          <p style={style.specs.errors.message}>{r.message}</p></li>)}
-        {results.goodResults.map((r, idx)=><li key={idx}><span style={style.specs.pass}>Pass : </span>{r}</li>)}
+      <ul className={css(specs.wrapper)}>
+        {results.wrongResults.map((r, idx) =>
+          <li className={css(specs.error, specs.li)} key={idx}>
+          <p>{r.spec}</p>
+          <p className={css(specs.message)}>{r.message}</p></li>)}
+
+        {results.goodResults.map((r, idx) =>
+          <li className={css(specs.pass, specs.li)} key={idx}>
+            <p>{r}</p>
+          </li>
+        )}
       </ul>
@@ -18,0 +23,0 @@ );

src/components/Specifications/style.js

@@ -1,2 +0,4 @@
-export default {
+import {StyleSheet} from "aphrodite";
+
+export default StyleSheet.create({
   wrapper: {
@@ -12,16 +14,37 @@ flex: 1,
     textTransform: 'uppercase',
+    listStyleType: 'none'
   },
-  specs: {
-    errors: {
-      color: 'red',
-      message: {
-        backgroundColor: 'rgb(250, 250, 250)',
-        padding: '10px',
-        margin: '10px'
-      }
-    },
-    pass: {
-      color: "green"
+  error: {
+    ':before': {
+      content: "'✘'",
+      padding: '3px 5px',
+      backgroundColor: 'red'
     }
-  }
-}
+  },
+
+  li: {
+    ':before': {
+      marginRight: '5px',
+      marginTop: '11px',
+      fontSize: '70%',
+      color: 'white',
+      fontWeight: 'bold',
+      borderRadius: '12px',
+      float: 'left'
+    }
+  },
+
+  message: {
+    backgroundColor: 'rgb(250, 250, 250)',
+    padding: '10px',
+    margin: '10px'
+  },
+
+  pass: {
+    ':before': {
+      content: "'✔'",
+      padding: '4px 5px',
+      backgroundColor: 'green'
+    }
+  },
+});

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

Improved metrics

Total package byte prevSize

223334

increased by0.84%

Lines of code

594

increased by6.26%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedaphrodite@^0.5.0

• + Addedaphrodite@0.5.0(transitive)

• + Addedbowser@1.9.4(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addedinline-style-prefixer@2.0.5(transitive)