economist-components / component-navigation / 322 / 2

DEFAULT BRANCH: master
Ran
Files 1
Run time 7s
Badge
Embed ▾
README BADGES
x

If you need to use a raster PNG badge, change the '.svg' to '.png' in the link

Markdown

Textile

RDoc

HTML

Rst
coverage: 100.0% (+15.3%) from 84.746%
322.2

Pull #187

travis-ci

keithamus 
feat: hugely simplify the usage of the nav

Rather than using the complex and opaque props the nav now has one simple `menu` prop which takes
a React node (so any element you want), and is extensible with children.

BREAKING CHANGE:

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

 - The `svgUri`, `sectionCardData`, `moreBalloonData`, `accordionData` and `sharedMenu` props are
   no longer present. Instead, generate your own HTML and put in `menu`. For example:

   ### Old
   ```
   import React from 'react';
   import Navigation from '@economist/component-navigation';
   export default (
     <Navigation
       className="myNav"
       svgUri="assets/icons.svg"
       sectionsCardData={navigationLinks}
       moreBalloonData={moreBalloonData}
       accordionData={accordionContext}
       sharedMenu={sharedMenu}
     />
   );
   ```

   ### New
   ```
   import React from 'react';
   import Navigation from '@economist/component-navigation';
   import { Accordion, Panel } from '@economist/component-accordion';
   import { Search } from '@economist/component-google-search';
   export default (
     <Navigation
       className="myNav"
       logo={<img src="assets/icons.svg#logo" />}
       menu={
         <Accordion>
           <Panel header="Topics">
             <ul><li>Latest Updates</li></ul>
             ...
           </Panel>
           <a>Latest Updates</a>
           <Panel header="More">
             <ul><li>Apps and Digital Editions</li></ul>
             ...
           </Panel>
         </Accordion>
       }
     >
       <button>Subscribe</button>
       <Accordion>
         <Panel header="Log In">
         </Panel>
       </Accordion>
       <Search/>
     </Navigation>
   );
   ```

 - All Economist specific CSS has been removed. The current CSS only provides simple styling
   for things like the height, wrapper width, and background color.

 - The logo is no longer provided for you, no... (continued)
Pull Request #187: WIP! slot based nav

6 of 6 relevant lines covered (100.0%)

7.33 hits per line

Source Files on job 322.2