@storybook/addon-info - npm Package Compare versions

Comparing version 3.2.14 to 3.2.15

dist/components/Node.js

@@ -58,2 +58,3 @@ 'use strict';
 
+
   if (typeof type === 'string') {
@@ -60,0 +61,0 @@ data.name = type;

dist/components/Props.js

@@ -45,2 +45,3 @@ 'use strict';
   var defaultProps = props.node.type.defaultProps;
+
   if (!nodeProps || (typeof nodeProps === 'undefined' ? 'undefined' : (0, _typeof3.default)(nodeProps)) !== 'object') {
@@ -47,0 +48,0 @@ return _react2.default.createElement('span', null);

dist/components/PropTable.js

@@ -67,2 +67,3 @@ 'use strict';
 
+
   switch (name) {
@@ -69,0 +70,0 @@ case 'arrayOf':

dist/components/PropVal.js

@@ -117,4 +117,4 @@ 'use strict';
       maxPropStringLength = props.maxPropStringLength;
+  var val = props.val;
 
-  var val = props.val;
   var braceWrap = true;
@@ -121,0 +121,0 @@ var content = null;

dist/components/Story.js

@@ -86,4 +86,9 @@ 'use strict';
 
+
+var getName = function getName(type) {
+  return type.displayName || type.name;
+};
+
 var stylesheet = {
-  link: {
+  button: {
     base: {
@@ -94,3 +99,3 @@ fontFamily: 'sans-serif',
       position: 'fixed',
-      textDecoration: 'none',
+      border: 'none',
       background: '#28c',
@@ -252,3 +257,3 @@ color: '#fff',
 
-      var linkStyle = (0, _extends3.default)({}, stylesheet.link.base, stylesheet.link.topRight);
+      var buttonStyle = (0, _extends3.default)({}, stylesheet.button.base, stylesheet.button.topRight);
 
@@ -279,4 +284,4 @@ var infoStyle = (0, _assign2.default)({}, stylesheet.info);
         _react2.default.createElement(
-          'a',
-          { style: linkStyle, onClick: openOverlay, role: 'button', tabIndex: '0' },
+          'button',
+          { type: 'button', style: buttonStyle, onClick: openOverlay },
           'Show Info'
@@ -288,4 +293,4 @@ ),
           _react2.default.createElement(
-            'a',
-            { style: linkStyle, onClick: closeOverlay, role: 'button', tabIndex: '0' },
+            'button',
+            { type: 'button', style: buttonStyle, onClick: closeOverlay },
             '\xD7'
@@ -472,3 +477,3 @@ ),
       array.sort(function (a, b) {
-        return (a.displayName || a.name) > (b.displayName || b.name);
+        return getName(a) > getName(b);
       });
@@ -481,19 +486,22 @@
 
-      var propTables = array.map(function (type) {
-        return _react2.default.createElement(
-          'div',
-          { key: type.displayName || type.name },
+      var propTables = array.map(function (type, i) {
+        return (
+          // eslint-disable-next-line react/no-array-index-key
           _react2.default.createElement(
-            'h2',
-            { style: _this4.state.stylesheet.propTableHead },
-            '"',
-            type.displayName || type.name,
-            '" Component'
-          ),
-          _react2.default.createElement(_PropTable2.default, {
-            type: type,
-            maxPropObjectKeys: maxPropObjectKeys,
-            maxPropArrayLength: maxPropArrayLength,
-            maxPropStringLength: maxPropStringLength
-          })
+            'div',
+            { key: getName(type) + '_' + i },
+            _react2.default.createElement(
+              'h2',
+              { style: _this4.state.stylesheet.propTableHead },
+              '"',
+              getName(type),
+              '" Component'
+            ),
+            _react2.default.createElement(_PropTable2.default, {
+              type: type,
+              maxPropObjectKeys: maxPropObjectKeys,
+              maxPropArrayLength: maxPropArrayLength,
+              maxPropStringLength: maxPropStringLength
+            })
+          )
         );
@@ -500,0 +508,0 @@ });

package.json

 {
   "name": "@storybook/addon-info",
-  "version": "3.2.14",
+  "version": "3.2.15",
   "description": "A Storybook addon to show additional information for your stories.",
@@ -17,4 +17,4 @@ "license": "MIT",
   "dependencies": {
-    "@storybook/addons": "^3.2.14",
-    "@storybook/components": "^3.2.14",
+    "@storybook/addons": "^3.2.15",
+    "@storybook/components": "^3.2.15",
     "babel-runtime": "^6.26.0",
@@ -28,3 +28,2 @@ "global": "^4.3.2",
   "devDependencies": {
-    "git-url-parse": "^6.2.2",
     "react": "^16.0.0",
@@ -31,0 +30,0 @@ "react-dom": "^16.0.0",

README.md

@@ -38,3 +38,10 @@ # Storybook Info Addon
   .add('simple info',
-    withInfo('description or documentation about my component, supports markdown')(() =>
+    withInfo(`
+      description or documentation about my component, supports markdown
+    
+      ~~~js
+      <Button>Click Here</Button>
+      ~~~
+    
+    `)(() =>
       <Component>Click the "?" mark at top-right to view the info.</Component>
@@ -85,2 +92,10 @@ )
   header: false, // Toggles display of header with component name and description
+});
+```
+
+## Options and Defaults
+
+```js
+{
+  header: false, // Toggles display of header with component name and description
   inline: true, // Displays info inline vs click button to view
@@ -93,6 +108,6 @@ source: true, // Displays the source of story Component
   maxPropsIntoLine: 1, // Max props to display per line in source code
-  maxPropObjectKeys: 10,
-  maxPropArrayLength: 10,
-  maxPropStringLength: 100,
-});
+  maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name
+  maxPropArrayLength: 10, // Displays the first 10 items in the default prop array
+  maxPropStringLength: 100, // Displays the first 100 characters in the default prop string
+}
 ```
@@ -99,0 +114,0 @@

src/components/Node.js

@@ -34,3 +34,3 @@ import React from 'react';
   data.children = element.props.children;
-  const type = element.type;
+  const { type } = element;
 
@@ -37,0 +37,0 @@ if (typeof type === 'string') {

src/components/Props.js

@@ -14,3 +14,3 @@ import React from 'react';
   const nodeProps = props.node.props;
-  const defaultProps = props.node.type.defaultProps;
+  const { defaultProps } = props.node.type;
   if (!nodeProps || typeof nodeProps !== 'object') {
@@ -17,0 +17,0 @@ return <span />;

src/components/PropTable.js

@@ -31,3 +31,3 @@ /* eslint-disable no-underscore-dangle */
 
-  const name = propType.name;
+  const { name } = propType;
 
@@ -34,0 +34,0 @@ switch (name) {

src/components/PropVal.js

@@ -79,3 +79,3 @@ import React from 'react';
   const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
-  let val = props.val;
+  let { val } = props;
   let braceWrap = true;
@@ -82,0 +82,0 @@ let content = null;

src/components/Story.js

@@ -15,6 +15,8 @@ /* eslint no-underscore-dangle: 0 */
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
-const STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES;
+const { STORYBOOK_REACT_CLASSES } = global;
 
+const getName = type => type.displayName || type.name;
+
 const stylesheet = {
-  link: {
+  button: {
     base: {
@@ -25,3 +27,3 @@ fontFamily: 'sans-serif',
       position: 'fixed',
-      textDecoration: 'none',
+      border: 'none',
       background: '#28c',
@@ -154,5 +156,5 @@ color: '#fff',
   _renderOverlay() {
-    const linkStyle = {
-      ...stylesheet.link.base,
-      ...stylesheet.link.topRight,
+    const buttonStyle = {
+      ...stylesheet.button.base,
+      ...stylesheet.button.topRight,
     };
@@ -178,9 +180,9 @@
         <div style={this.state.stylesheet.children}>{this.props.children}</div>
-        <a style={linkStyle} onClick={openOverlay} role="button" tabIndex="0">
+        <button type="button" style={buttonStyle} onClick={openOverlay}>
           Show Info
-        </a>
+        </button>
         <div style={infoStyle}>
-          <a style={linkStyle} onClick={closeOverlay} role="button" tabIndex="0">
+          <button type="button" style={buttonStyle} onClick={closeOverlay}>
             ×
-          </a>
+          </button>
           <div style={this.state.stylesheet.infoPage}>
@@ -331,10 +333,9 @@ <div style={this.state.stylesheet.infoBody}>
     const array = Array.from(types.keys());
-    array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
+    array.sort((a, b) => getName(a) > getName(b));
 
     const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
-    const propTables = array.map(type => (
-      <div key={type.displayName || type.name}>
-        <h2 style={this.state.stylesheet.propTableHead}>
-          "{type.displayName || type.name}" Component
-        </h2>
+    const propTables = array.map((type, i) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <div key={`${getName(type)}_${i}`}>
+        <h2 style={this.state.stylesheet.propTableHead}>"{getName(type)}" Component</h2>
         <PropTable
@@ -341,0 +342,0 @@ type={type}

src/index.test.js

@@ -38,3 +38,3 @@ /* global document */
         number={7}
-        string={'seven'}
+        string="seven"
         bool
@@ -41,0 +41,0 @@ />

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

289171

increased by0.17%

Dev dependency count

3

decreased by-25%

Lines of code

2990

increased by0.2%

Number of lines in readme file

206

increased by7.85%

Dependency changes

• Updated@storybook/addons@^3.2.15

• Updated@storybook/components@^3.2.15