react-css-collapse - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

CHANGELOG.md

 # Changelog
+
+# 3.6.0
+> October 1, 2018
+* :nut_and_bolt: **New** Add support for ARIA and data attributes
+
 # 3.5.0
@@ -3,0 +8,0 @@ > September 3, 2018

lib/components/Collapse.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -24,2 +26,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -143,5 +147,13 @@
 
+      var _props2 = this.props,
+          className = _props2.className,
+          children = _props2.children,
+          isOpen = _props2.isOpen,
+          transition = _props2.transition,
+          onRest = _props2.onRest,
+          attrs = _objectWithoutProperties(_props2, ['className', 'children', 'isOpen', 'transition', 'onRest']);
+
       return _react2.default.createElement(
         'div',
-        {
+        _extends({
           ref: function ref(el) {
@@ -151,6 +163,6 @@ _this3.content = el;
           style: this.state,
-          className: this.props.className,
+          className: className,
           onTransitionEnd: this.onTransitionEnd
-        },
-        this.props.children && this.props.children
+        }, attrs),
+        children
       );
@@ -174,3 +186,3 @@ }
 Collapse.propTypes = {
-  children: _propTypes2.default.node.isRequired,
+  children: _propTypes2.default.node,
   className: _propTypes2.default.string,
@@ -177,0 +189,0 @@ isOpen: _propTypes2.default.bool,

package.json

 {
   "name": "react-css-collapse",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Component-wrapper for collapse animation with css for elements with variable and dynamic height",
@@ -21,2 +21,5 @@ "author": {
       "name": "Nawal Deshi Rahim"
+    },
+    {
+      "name": "Kristofer Walters"
     }
@@ -23,0 +26,0 @@ ],

README.md

@@ -8,3 +8,3 @@ # react-css-collapse
 
-:warning: ️You need to specify the class selector with style (transition) in your own stylesheet to add animation. You can copy the smashing example below 💅
+:warning: ️You need to specify the transition property or add a class selector with style (transition) in your own stylesheet to add animation. You can copy the smashing example below 💅
 
@@ -29,3 +29,3 @@ ```scss
 
-## Options
+## Properties
 
@@ -49,5 +49,2 @@ #### `isOpen`: PropTypes.boolean.isRequired
 
-#### `onRest`: PropTypes.func
-Callback function for when your transition on `height` (specified in `className`) is finished. It can be used to trigger any function after transition is done.
-
 #### `className`: PropType.string
@@ -67,2 +64,15 @@
 
+#### `onRest`: PropTypes.func
+Callback function for when your transition on `height` (specified in `className`) is finished. It can be used to trigger any function after transition is done.
+
+### ARIA and data attributes
+
+`Collapse` transfers `aria-` and `data-` attributes to the component's rendered DOM element. For example this can be used to set the `aria-hidden` attribute:
+
+```js
+<Collapse isOpen={isOpenState} aria-hidden={isOpenState ? 'false' : 'true'}>
+  <p>Paragraph of text</p>
+</Collapse>
+```
+
 ## Development and testing
@@ -69,0 +79,0 @@ To run example covering all features, use `npm run storybook`.

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

44509

increased by3.44%

Lines of code

361

increased by2.56%

Number of lines in readme file

84

increased by13.51%

No dependency changes