docs(expandcollapse): complete examples

- restore scripts 🍤

package.json

@@ -22,6 +22,10 @@
     "test:u": "yarn test -- -u",
     "test:ci": "yarn run lint && yarn run test",
     "build": "yarn build:js && yarn build:scss && yarn build:styleguide",
+    "build:js": "rollup -c config/rollup.config.js",
+    "build:scss": "sh ./scripts/cp-scss.sh",
+    "build:styleguide": "styleguidist build --config config/styleguide.config.js",
+    "start": "node styleguide.js",
     "start:dev": "styleguidist server --config config/styleguide.config.js",
     "release": "scripts/release.sh",
     "release:changelog": "changelog",

src/components/ExpandCollapse/Group.jsx

@@ -7,7 +7,8 @@ import classNames from 'classnames';
  *
  * _This component can only be accessed as a name-spaced component: `ExpandCollapse.Group`._
  *
- * Group is used with `ExpandCollapse.Panel` to produce an ExpandCollapse set. See [ExpandCollapse.Panel](#panel) for example.
+ * Group is used with `ExpandCollapse.Panel` to produce an ExpandCollapse set.
+ * See [ExpandCollapse.Panel](#panel) for example.
  */
 class Group extends Component {
 
@@ -93,10 +94,22 @@ class Group extends Component {
 
 Group.propTypes = {
   className: PropTypes.string,
+  /**
+   * A key identifier that corresponds Group toggles with their respective expanded Panels.
+   */
   activeKeys: PropTypes.array,
+  /**
+   * Similar to `activeKeys` except they correspond to collapsed Panels.
+   */
   disabledKeys: PropTypes.array,
+  /**
+   * Sets Group behaviour to accordion.
+   */
   accordion: PropTypes.bool,
   children: PropTypes.node,
+  /**
+   * Your custom handler for the `change` event.
+   */
   onChange: PropTypes.func
 };
 

src/components/ExpandCollapse/Panel.jsx

@@ -6,6 +6,10 @@ import './Panel.scss';
 
 /**
  * A collapsable panel that belongs in an ExpandCollapse Group.
+ *
+ * _This component can only be accessed as a name-spaced component: `ExpandCollapse.Panel`._
+ *
+ * Panel is used with `ExpandCollapse.Group` to produce an ExpandCollapse set.
  */
 class Panel extends Component {
 
@@ -81,10 +85,16 @@ class Panel extends Component {
 
 Panel.propTypes = {
   className: PropTypes.string,
+  /**
+   * Panel title.
+   */
   header: PropTypes.string,
   children: PropTypes.node,
   isActive: PropTypes.bool,
   isDisabled: PropTypes.bool,
+  /**
+   * Your custom handler for `click` event on Panel toggle.
+   */
   onPanelClick: PropTypes.func,
   isFirst: PropTypes.bool
 };

src/components/ExpandCollapse/Panel.md

@@ -13,3 +13,66 @@
   </Panel>
 </Group>
 ```
+
+## State Control with Toggles
+
+We can control the Expand/Collapse component state.
+
+```
+class ToggleExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeKeys: []
+    };
+    this.togglePanel = this.togglePanel.bind(this);
+  }
+
+  togglePanel(e, panelKey) {
+    e.preventDefault();
+    if (this.state.activeKeys.indexOf(panelKey) > -1) {
+      this.setState({
+        activeKeys: this.state.activeKeys.filter(k => k !== panelKey)
+      });
+    } else {
+      this.setState({
+        activeKeys: this.state.activeKeys.concat([panelKey])
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <a href="" className="button button--secondary button--link" onClick={(e)=>this.togglePanel(e, 'panel-1')}>Toggle panel #1</a>
+        <a href="" className="button button--secondary button--link" onClick={(e)=>this.togglePanel(e, 'panel-2')}>Toggle panel #2</a>
+        <Group activeKeys={this.state.activeKeys}>
+          <Panel header="Panel #1" panelKey="panel-1">
+          Panel #1 Body
+          </Panel>
+          <Panel header="Panel #2" panelKey="panel-2">
+          Panel #2 Body
+          </Panel>
+        </Group>
+      </div>
+    );
+  }
+}
+
+<ToggleExample/>
+```
+
+## Accordion
+
+Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.
+
+```
+<Group accordion>
+  <Panel header="Panel #1">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia fermentum nisl, id lobortis nunc porta sed. Vestibulum quis tortor non nisl vulputate varius. Vivamus euismod congue mi, quis ultricies dolor viverra at.</p>
+  </Panel>
+  <Panel header="Panel #2">
+    <p>Ut fermentum, turpis vel tincidunt volutpat, diam est vehicula leo, sed convallis dolor ante aliquet nisi. Nunc nisi erat, pulvinar quis lectus eget, tristique suscipit lectus. Maecenas non erat semper, tristique odio euismod, pulvinar metus.</p>
+  </Panel>
+</Group>
+```