react-accessible-accordion - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

CHANGELOG.md

@@ -7,5 +7,15 @@ Changelog
 
-## [[v0.0.1]](https://github.com/springload/react-accessible-accordion/releases/tag/v0.0.1)
+## [[v0.2.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v0.2.0)
 
+- Possibility to have extra blocks in AccordionItem
 
+## [[v0.1.2]](https://github.com/springload/react-accessible-accordion/releases/tag/v0.1.2)
+
+- Accordion mode / Collapse mode
+- Possibility to pre expand items
+- 100% coverage with unit tests
+- Possibility to customise CSS.
+- Clean CSS for the demo/github page.
+
+
 ## [[vx.y.z]](https://github.com/springload/Quicktube.js/releases/tag/x.y.z) Template from http://keepachangelog.com/
@@ -12,0 +22,0 @@

dist/AccordionItem/accordion-item.js

@@ -67,19 +67,22 @@ 'use strict';
             return _react2.default.Children.map(children, function (item) {
-                var itemProps = {
-                    expanded: expanded
-                };
+                var itemProps = {};
 
-                if (item.type.accordionElementName === 'AccordionItemTitle') {
-                    itemProps.key = 'title';
-                    itemProps.id = 'accordion__title-' + itemUuid;
-                    itemProps.ariaControls = 'accordion__body-' + itemUuid;
-                    itemProps.onClick = onClick;
-                    itemProps.role = accordion ? 'tab' : 'button';
-                } else if (item.type.accordionElementName === 'AccordionItemBody') {
-                    itemProps.key = 'body';
-                    itemProps.id = 'accordion__body-' + itemUuid;
-                    itemProps.role = accordion ? 'tabpanel' : '';
+                if (item.type.accordionElementName === 'AccordionItemTitle' || item.type.accordionElementName === 'AccordionItemBody') {
+                    itemProps.expanded = expanded;
+                    if (item.type.accordionElementName === 'AccordionItemTitle') {
+                        itemProps.key = 'title';
+                        itemProps.id = 'accordion__title-' + itemUuid;
+                        itemProps.ariaControls = 'accordion__body-' + itemUuid;
+                        itemProps.onClick = onClick;
+                        itemProps.role = accordion ? 'tab' : 'button';
+                    } else {
+                        // AccordionItemBody
+                        itemProps.key = 'body';
+                        itemProps.id = 'accordion__body-' + itemUuid;
+                        itemProps.role = accordion ? 'tabpanel' : '';
+                    }
+                    return _react2.default.cloneElement(item, itemProps);
                 }
 
-                return _react2.default.cloneElement(item, itemProps);
+                return item;
             });
@@ -86,0 +89,0 @@ }

dist/AccordionItem/accordion-item.spec.js

@@ -148,3 +148,3 @@ 'use strict';
 
-    it('still renders with incorrect type children', function () {
+    it('still renders with no AccordionItemTitle or AccordionItemBody', function () {
         var tree = _reactTestRenderer2.default.create(_react2.default.createElement(
@@ -192,2 +192,64 @@ _accordionItem2.default,
     });
+
+    it('renders correctly with other blocks inside', function () {
+        var tree = _reactTestRenderer2.default.create(_react2.default.createElement(
+            _accordionItem2.default,
+            { accordion: false },
+            _react2.default.createElement(
+                _accordionItemTitle2.default,
+                null,
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    'Fake title'
+                )
+            ),
+            _react2.default.createElement(
+                'div',
+                null,
+                'Just another block'
+            ),
+            _react2.default.createElement(
+                _accordionItemBody2.default,
+                null,
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    'Fake body'
+                )
+            )
+        )).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('renders correctly with other blocks inside 2', function () {
+        var tree = _reactTestRenderer2.default.create(_react2.default.createElement(
+            _accordionItem2.default,
+            { accordion: false },
+            _react2.default.createElement(
+                _accordionItemTitle2.default,
+                null,
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    'Fake title'
+                )
+            ),
+            _react2.default.createElement(
+                _accordionItemBody2.default,
+                null,
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    'Fake body'
+                )
+            ),
+            _react2.default.createElement(
+                'div',
+                null,
+                'Just another block'
+            )
+        )).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
 });

package.json

 {
   "name": "react-accessible-accordion",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Accessible Accordion component for React",
@@ -14,5 +14,6 @@ "main": "dist/index.js",
     "js": "babel -d dist src",
+    "js:watch": "npm run js -- --watch",
     "css": "cp src/react-accessible-accordion.css dist",
     "build": "npm run js -s && npm run css -s",
-    "start": "webpack --config ./webpack/webpack.config.dev.js",
+    "start": "npm run js:watch",
     "start-demo": "webpack-dev-server --config ./webpack/webpack.config.demo.js",
@@ -19,0 +20,0 @@ "pages": "rm -rf pages && cp -R demo pages && webpack --config=./webpack/webpack.config.pages.js",

README.md

@@ -1,2 +0,2 @@
-[react-accessible-accordion](https://springload.github.io/react-accessible-accordion/) [![npm](https://img.shields.io/npm/v/react-accessible-accordion.svg?style=flat-square)](https://www.npmjs.com/package/react-accessible-accordion) [![Build Status](https://travis-ci.org/springload/react-accessible-accordion.svg?branch=master)](https://travis-ci.org/springload/react-accessible-accordion) [![Coverage Status](https://coveralls.io/repos/github/springload/react-accessible-accordion/badge.svg)](https://coveralls.io/github/springload/react-accessible-accordion) [![Dependency Status](https://david-dm.org/springload/react-accessible-accordion.svg?style=flat-square)](https://david-dm.org/springload/react-accessible-accordion) [![devDependency Status](https://david-dm.org/springload/react-accessible-accordion/dev-status.svg?style=flat-square)](https://david-dm.org/springload/react-accessible-accordion#info=devDependencies) [![Code Climate](https://codeclimate.com/github/springload/react-accessible-accordion/badges/gpa.svg)](https://codeclimate.com/github/springload/react-accessible-accordion)
+[react-accessible-accordion](https://springload.github.io/react-accessible-accordion/) [![npm](https://img.shields.io/npm/v/react-accessible-accordion.svg?style=flat-square)](https://www.npmjs.com/package/react-accessible-accordion) [![Build Status](https://travis-ci.org/springload/react-accessible-accordion.svg?branch=master)](https://travis-ci.org/springload/react-accessible-accordion) [![Coverage Status](https://coveralls.io/repos/github/springload/react-accessible-accordion/badge.svg)](https://coveralls.io/github/springload/react-accessible-accordion) [![Dependency Status](https://david-dm.org/springload/react-accessible-accordion.svg?style=flat-square)](https://david-dm.org/springload/react-accessible-accordion) [![devDependency Status](https://david-dm.org/springload/react-accessible-accordion/dev-status.svg?style=flat-square)](https://david-dm.org/springload/react-accessible-accordion#info=devDependencies)
 =========
@@ -81,3 +81,3 @@
           <td>Boolean</td>
-          <th>true</th>
+          <td>true</td>
           <td>Open only one item at a time or not</td>
@@ -88,3 +88,3 @@ </tr>
           <td>Function(keys)</td>
-          <th>noop</th>
+          <td>noop</td>
           <td>Triggered on change (open/close items)</td>
@@ -95,3 +95,3 @@ </tr>
           <td>String</td>
-          <th>accordion</th>
+          <td>accordion</td>
           <td>CSS class(es) applied to the component</td>
@@ -119,3 +119,3 @@ </tr>
           <td>Boolean</td>
-          <th>false</th>
+          <td>false</td>
           <td>Expands this item on first render</td>
@@ -126,3 +126,3 @@ </tr>
           <td>String</td>
-          <th>accordion__item</th>
+          <td>accordion__item</td>
           <td>CSS class(es) applied to the component</td>
@@ -150,3 +150,3 @@ </tr>
           <td>String</td>
-          <th>accordion__title</th>
+          <td>accordion__title</td>
           <td>CSS class(es) applied to the component</td>
@@ -174,3 +174,3 @@ </tr>
           <td>String</td>
-          <th>accordion__body</th>
+          <td>accordion__body</td>
           <td>CSS class(es) applied to the component</td>
@@ -181,3 +181,3 @@ </tr>
           <td>String</td>
-          <th>accordion__body--hidden</th>
+          <td>accordion__body--hidden</td>
           <td>Class name for hidden body state</td>
@@ -184,0 +184,0 @@ </tr>

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

49689

increased by4.97%

Lines of code

907

increased by7.46%

No dependency changes