economist-components / component-accordion / 181

100%

Pull #135

travis-ci

feat: hugely simplify the usage of the accordion

Rather than using the `list` prop to provide a set of links, this now uses `Panel`s which can
provide arbitrary HTML to hide and show.

BREAKING CHANGE:

This is a huge breaking change, it has been redeveloped from the ground up, but some changes are:

 - The `list` prop is no longer present. Instead, generate your own HTML inside a `Panel`.
   For example:

   ### Old
   ```
   import React from 'react';
   import Accordion from '@economist/component-accordion';
   export default (
     <Accordion list={[
       {
         title: 'Sections',
         children: [
           {
             title: 'Latest Updates',
             href: '/latest-updates'
           }
         ]
       },
       {
         title: 'Blogs',
         children: [
           {
             title: 'Buttonwood\'s notebook',
             href: '/blogs/buttonwood',
           }
         ]
       },
     ]} />
   );
   ```

   ### New
   ```
   import React from 'react';
   import { Accordion, Panel } from '@economist/component-accordion';
   export default (
     <Accordion>
       <Panel header="Sections">
         <ul>
           <li><a href="/latest-updates">Latest Updates</a></li>
         </ul>
       </Panel>
       <Panel header="Blogs">
         <ul>
           <li><a href="/blogs/buttonwood">Buttonwoods notebook</a></li>
         </ul>
       </Panel>
     </Accordion>
   );
   ```

 - All Economist specific CSS has been removed. The current CSS only provides simple
   "functional styling" such as `display: none` and `display: block`.

26 of 26 new or added lines in 2 files covered. (100.0%)

30 of 30 relevant lines covered (100.0%)

40.53 hits per line