terra-props-table - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -7,2 +7,8 @@ Changelog
 
+2.1.0 - (February 26, 2018)
+------------------
+### Added
+* Added styling to wrap long prop-type 'type' entries
+* Aligned Props Table entries to the top of their rows
+
 2.0.0 - (February 12, 2018)
@@ -9,0 +15,0 @@ ------------------

docs/DEPENDENCIES.md

@@ -6,2 +6,3 @@ # Dependency Information
 |-|-|-|-|
+| classnames | ^2.2.5 | -- | A simple javascript utility for conditionally joining classNames together | 
 | commander | ^2.9.0 | -- | the complete solution for node.js command-line programs |
@@ -12,3 +13,3 @@ | glob | ^7.1.2 | -- | a little globber |
 | react-docgen | ^2.15.0 | -- | A CLI and toolkit to extract information from React components for documentation generation. |
-| terra-markdown | ^1.11.0 | ^15.4.2 | terra-markdown |
+| terra-markdown | ^2.0.0 | ^16.2.0 | terra-markdown |
 
@@ -18,3 +19,3 @@ ## peerDependencies
 |-|-|-|-|
-| react | ^15.4.2 | -- | React is a JavaScript library for building user interfaces. |
-| react-dom | ^15.4.2 | ^15.6.2 | React package for working with the DOM. |
+| react | ^16.2.0 | -- | React is a JavaScript library for building user interfaces. |
+| react-dom | ^16.2.0 | ^16.0.0 | React package for working with the DOM. |

lib/PropsTable.js

@@ -24,2 +24,10 @@ 'use strict';
 
+var _bind = require('classnames/bind');
+
+var _bind2 = _interopRequireDefault(_bind);
+
+var _PropsTable = require('./PropsTable.scss');
+
+var _PropsTable2 = _interopRequireDefault(_PropsTable);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,2 +37,4 @@
 
+var cx = _bind2.default.bind(_PropsTable2.default);
+
 var propTypes = {
@@ -64,3 +74,3 @@ /**
           'pre',
-          null,
+          { className: cx('props-table-pre') },
           ' ',
@@ -82,3 +92,3 @@ formatShape(type.value.value),
           'pre',
-          null,
+          { className: cx('props-table-pre') },
           ' ',
@@ -110,3 +120,3 @@ formatShape(option.value),
         'pre',
-        null,
+        { className: cx('props-table-pre') },
         ' ',
@@ -142,2 +152,4 @@ formatShape(type.value),
 
+  var tableRowClass = cx('prop-table-row');
+
   return _react2.default.createElement(
@@ -163,3 +175,3 @@ 'div',
             'th',
-            null,
+            { className: cx('prop-table-name') },
             'Prop Name'
@@ -169,3 +181,3 @@ ),
             'th',
-            null,
+            { className: cx('prop-table-type') },
             'Type'
@@ -175,3 +187,3 @@ ),
             'th',
-            null,
+            { className: cx('prop-table-required') },
             'Is Required'
@@ -181,3 +193,3 @@ ),
             'th',
-            null,
+            { className: cx('prop-table-default') },
             'Default Value'
@@ -187,3 +199,3 @@ ),
             'th',
-            null,
+            { className: cx('prop-table-description') },
             'Description'
@@ -202,3 +214,3 @@ )
             'tr',
-            { key: key, style: { fontSize: '90%' } },
+            { className: tableRowClass, key: key, style: { fontSize: '90%' } },
             _react2.default.createElement(
@@ -205,0 +217,0 @@ 'td',

package.json

 {
   "name": "terra-props-table",
   "main": "lib/PropsTable.js",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "terra-props-table",
@@ -31,2 +31,3 @@ "repository": {
   "dependencies": {
+    "classnames": "^2.2.5",
     "commander": "^2.9.0",
@@ -37,3 +38,3 @@ "glob": "^7.1.2",
     "react-docgen": "^2.15.0",
-    "terra-markdown": "^2.0.0"
+    "terra-markdown": "^2.1.0"
   },
@@ -40,0 +41,0 @@ "scripts": {

src/PropsTable.jsx

@@ -6,3 +6,7 @@ /* eslint-disable import/no-extraneous-dependencies */
 import Markdown from 'terra-markdown';
+import classNames from 'classnames/bind';
+import styles from './PropsTable.scss';
 
+const cx = classNames.bind(styles);
+
 const propTypes = {
@@ -36,3 +40,3 @@ /**
     if (type.value.name === 'shape') {
-      typeName = <span> array of objects structured like: <pre> {formatShape(type.value.value)} </pre></span>;
+      typeName = <span> array of objects structured like: <pre className={cx('props-table-pre')}> {formatShape(type.value.value)} </pre></span>;
     } else {
@@ -44,3 +48,3 @@ typeName = `array of ${type.value.name}s`;
       const name = option.name === 'shape' ? (<span key={option.value}> an object structured like:
-        <pre> {formatShape(option.value)} </pre></span>) : (<span key={option.name}> {option.name}</span>);
+        <pre className={cx('props-table-pre')}> {formatShape(option.value)} </pre></span>) : (<span key={option.name}> {option.name}</span>);
       return name;
@@ -50,3 +54,3 @@ });
   } else if (typeName === 'shape') {
-    typeName = <span> an object structured like: <pre> {formatShape(type.value)} </pre></span>;
+    typeName = <span> an object structured like: <pre className={cx('props-table-pre')}> {formatShape(type.value)} </pre></span>;
   }
@@ -73,2 +77,4 @@
 
+  const tableRowClass = cx('prop-table-row');
+
   return (
@@ -80,7 +86,7 @@ <div dir="ltr" className="markdown-body">
           <tr>
-            <th>Prop Name</th>
-            <th>Type</th>
-            <th>Is Required</th>
-            <th>Default Value</th>
-            <th>Description</th>
+            <th className={cx('prop-table-name')}>Prop Name</th>
+            <th className={cx('prop-table-type')}>Type</th>
+            <th className={cx('prop-table-required')}>Is Required</th>
+            <th className={cx('prop-table-default')}>Default Value</th>
+            <th className={cx('prop-table-description')}>Description</th>
           </tr>
@@ -94,3 +100,3 @@ </thead>
             return (
-              <tr key={key} style={{ fontSize: '90%' }}>
+              <tr className={tableRowClass} key={key} style={{ fontSize: '90%' }}>
                 <td style={{ fontWeight: 'bold' }}>{key}</td>
@@ -97,0 +103,0 @@ <td>{(prop.type ? type : '')}</td>

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

51024

increased by3.99%

Number of package files

29

increased by7.41%

Lines of code

782

increased by1.3%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Addedclassnames@^2.2.5

• Updatedterra-markdown@^2.1.0