docs(ExpandCollapse): Polish the exmaples and API.

src/components/ExpandCollapse/Group.jsx

@@ -93,6 +93,12 @@ class Group extends Component {
 }
 
 Group.propTypes = {
+  /**
+   * One or more CSS class names separated by spaces to append onto the container.
+   * Don't advertise as we plan on removing this feature soon.
+   *
+   * @ignore
+   */
   className: PropTypes.string,
   /**
    * A key identifier that corresponds Group toggles with their respective expanded Panels.
@@ -103,12 +109,18 @@ Group.propTypes = {
    */
   disabledKeys: PropTypes.array,
   /**
-   * Sets Group behaviour to accordion.
+   * If true, sets Group behaviour to accordion.
    */
   accordion: PropTypes.bool,
+  /**
+   * The panels. Must be TDS ExpandCollapse.Panel components.
+   */
   children: PropTypes.node,
   /**
-   * Your custom handler for the `change` event.
+   * A callback to invoke when a Panel is toggled.
+   *
+   * @param {Object} this The Group's context.
+   * @param {String} panelKey The toggled Panel's key.
    */
   onChange: PropTypes.func
 };

src/components/ExpandCollapse/Panel.jsx

@@ -84,19 +84,37 @@ class Panel extends Component {
 }
 
 Panel.propTypes = {
+  /**
+   * One or more CSS class names separated by spaces to append onto the container.
+   * Don't advertise as we plan on removing this feature soon.
+   *
+   * @ignore
+   */
   className: PropTypes.string,
   /**
    * Panel title.
    */
   header: PropTypes.string,
-  children: PropTypes.node,
+  /**
+   * @ignore
+   */
   isActive: PropTypes.bool,
+  /**
+   * @ignore
+   */
   isDisabled: PropTypes.bool,
   /**
-   * Your custom handler for `click` event on Panel toggle.
+   * @ignore
    */
   onPanelClick: PropTypes.func,
-  isFirst: PropTypes.bool
+  /**
+   * @ignore
+   */
+  isFirst: PropTypes.bool,
+  /**
+   * The panels. Must be TDS ExpandCollapse.Panel components.
+   */
+  children: PropTypes.node
 };
 
 Panel.defaultProps = {

src/components/ExpandCollapse/Panel.md

@@ -1,78 +1,82 @@
 ## Basic Usage
 
 ```
-<Group disabledKeys={["panel-3"]}>
-  <Panel header="Panel #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet at lacus vel fringilla.">
-    Panel #1 Body
+<Group>
+  <Panel header="Specs">
+    1.21 Gigawatts
   </Panel>
-  <Panel header="Panel #2">
-    Panel #2 Body
+  <Panel header="Accessories">
+    Charging cable, bumper case.
   </Panel>
-  <Panel header="Panel #3 is disabled" panelKey="panel-3">
-    Panel #3 Body
+  <Panel header="Warranty">
+    1 Year, no questions asked.
   </Panel>
 </Group>
 ```
 
-## State Control with Toggles
+## Accordion
 
-We can control the Expand/Collapse component state.
+Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.
 
 ```
-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/>
+<Group accordion>
+  <Panel header="Specs">
+    <p>A fast CPU, a striking GPU.</p>
+  </Panel>
+  <Panel header="Colours">
+    <p>Everything from tulips to crimsons.</p>
+  </Panel>
+</Group>
 ```
 
-## Accordion
-
-Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.
+## Disabling panels
 
 ```
-<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>
+<Group disabledKeys={["warranty"]}>
+  <Panel header="Current Terms">
+    Product is provided as-is.
   </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 header="Future Terms" panelKey="warranty">
+    Under construction.
   </Panel>
 </Group>
 ```
+
+## Controlling the expanded panels externally
+
+We can control the Expand/Collapse component state.
+
+```
+initialState = {
+  activeKeys: []
+};
+
+const togglePanel = (panelKey) => {
+  if (state.activeKeys.indexOf(panelKey) > -1) {
+    setState({
+      activeKeys: state.activeKeys.filter(k => k !== panelKey)
+    });
+  }
+  else {
+    setState({
+      activeKeys: state.activeKeys.concat([panelKey])
+    });
+  }
+};
+
+<div>
+  <button className="button button--secondary button--link"
+    onClick={() => togglePanel('panel-1')}>Toggle panel #1</button>
+  <button className="button button--secondary button--link"
+    onClick={() => togglePanel('panel-2')}>Toggle panel #2</button>
+  
+  <Group activeKeys={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>
+```