Update readme, add willChange: height, add stories and prettify compo…

…nent

README.md

@@ -5,9 +5,13 @@ Collapse component with css transition for elements with variable and dynamic he
 [![npm version](https://img.shields.io/npm/v/react-css-collapse.svg?style=flat-square)](https://www.npmjs.com/package/react-css-collapse)
 [![npm downloads](https://img.shields.io/npm/dm/react-css-collapse.svg?style=flat-square)](https://www.npmjs.com/package/react-css-collapse)
 
-Demo: [Accordion using react-css-collapse](https://codesandbox.io/embed/accordion-using-react-css-collapse-w5r1e)
+## Demo
+### - [Accordion using react-css-collapse](https://codesandbox.io/embed/accordion-using-react-css-collapse-w5r1e)
 
-: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 💅
+You can specify transition using the style prop or a class selector with transition.
+The `react-css-collapse-transition` class selector is added by default unless you specify your own. 
+
+🙈 Note: Remember to specify the style if you are using the default selector👇
 
 ```scss
 .react-css-collapse-transition {
@@ -29,13 +33,11 @@ import Collapse from 'react-css-collapse';
 
 ## Properties
 
-#### `isOpen`: PropTypes.boolean.isRequired
+#### `isOpen`: PropTypes.boolean
 
 Expands or collapses content.
 
-#### `children`: PropTypes.node.isRequired
-
-One or multiple children with static, variable or dynamic height.
+#### `children`: PropTypes.node
 
 ```js
 <Collapse isOpen={true}>
@@ -48,18 +50,7 @@ One or multiple children with static, variable or dynamic height.
 
 #### `className`: PropType.string
 
-You can specify a className with your desired style and animation. By default `react-css-collapse-transition` will be added to the component.
-
-#### `transition`: PropType.string
-
-You can also specify a transition in line by using the `transition` prop.
-
-```js
-<Collapse transition="height 250ms cubic-bezier(.4, 0, .2, 1)">
-  <p>Paragraph of text</p>
-</Collapse>
-```
-
+You can specify a className with your desired style and transition (animation).
 #### `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.
 

package.json

@@ -24,6 +24,9 @@
     },
     {
       "name": "Christopher Deutsch"
+    },
+    {
+      "name": "Espen Thomassen Sæverud"
     }
   ],
   "license": "MIT",

src/components/Collapse.jsx

@@ -1,14 +1,14 @@
 import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
+import { string, bool, func, object } from 'prop-types';
 import useCollapse from './useCollapse';
 
 const Collapse = ({
-  children,
-  className,
   isOpen,
-  transition,
   onRest,
-  ...attrs
+  style: initialStyle,
+  transition,
+  className,
+  ...rest
 }) => {
   const content = useRef();
   const { setIsExpandedStyle, setIsCollapsedStyle, style } = useCollapse({
@@ -29,33 +29,35 @@ const Collapse = ({
     }
   };
 
+  const styles = {
+    willChange: 'height',
+    transition,
+    ...initialStyle,
+    ...style,
+  };
+
   return (
     <div
       ref={content}
-      style={{ ...style, transition }}
+      style={styles}
       className={className}
       onTransitionEnd={onTransitionEnd}
-      {...attrs}
-    >
-      {children}
-    </div>
+      {...rest}
+    />
   );
 };
 
 Collapse.defaultProps = {
-  children: null,
-  className: 'react-css-collapse-transition',
   isOpen: false,
-  transition: null,
-  onRest: null,
+  className: 'react-css-collapse-transition',
 };
 
 Collapse.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  isOpen: PropTypes.bool,
-  transition: PropTypes.string,
-  onRest: PropTypes.func,
+  isOpen: bool,
+  onRest: func,
+  style: object,
+  className: string,
+  transition: string,
 };
 
 export default Collapse;

src/components/Collapse.spec.js

@@ -92,7 +92,7 @@ describe('<Collapse />', () => {
     it('should not add an inline transition if it is not specified', () => {
       act(() => {
         const wrapper = mount(makeWrapper({ isOpen: true }));
-        expect(wrapper.find('div').prop('style').transition).toEqual(null);
+        expect(wrapper.find('div').prop('style').transition).toEqual(undefined);
       });
     });
 

src/stories/App.jsx

@@ -21,7 +21,7 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      index: 0,
+      index: props.initialIndex,
     };
     this.setIndex = this.setIndex.bind(this);
   }
@@ -73,7 +73,7 @@ App.propTypes = {
   props: PropTypes.shape({
     className: PropTypes.string,
     transition: PropTypes.string,
-  }).isRequired,
+  }),
 };
 
 export default App;

src/stories/collapse.stories.js

@@ -6,24 +6,39 @@ import { elements } from '../data';
 
 storiesOf('Collapse', module)
   .addDecorator(withKnobs)
-  .add('default', () => (
+  .add('default', () => <App elements={elements} initialIndex={null} />)
+  .add('initially toggled', () => <App elements={elements} initialIndex={1} />)
+  .add('custom style transition ', () => (
     <App
       elements={elements}
       props={{
-        className: text('className', 'react-css-collapse-transition'),
-        transition: text('transition', ''),
+        className: text('className', ''),
+        style: {
+          transition: text(
+            'transition',
+            'height 5000ms cubic-bezier(.4, 0, .2, 1)',
+          ),
+        },
       }}
     />
   ))
-  .add('inline transition', () => (
+  .add('custom transition property', () => (
     <App
       elements={elements}
       props={{
         className: text('className', ''),
         transition: text(
           'transition',
-          'height 250ms cubic-bezier(.4, 0, .2, 1)',
+          'height 500ms cubic-bezier(.4, 0, .2, 1)',
         ),
       }}
     />
+  ))
+  .add('custom className transition', () => (
+    <App
+      elements={elements}
+      props={{
+        className: text('className', 'react-css-collapse-transition-custom'),
+      }}
+    />
   ));

src/stories/style.css

@@ -1,3 +1,7 @@
 .react-css-collapse-transition {
   transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+.react-css-collapse-transition-custom {
+  transition: height 1000ms cubic-bezier(0.4, 0, 0.2, 1);
+}