fk-react-ui-components/components/NavigationHeader/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import React from "react";
import {SectionHeader, SectionTitle} from "./styles/NavigationHeader";

const HeaderList = (props) => (<li>
    <a className="section-link" onClick={props.changeState}>{props.breadcrumb.label}</a>
</li>)

class NavigationHeader extends React.Component {
    changeState(breadcrumb) {
        if(breadcrumb.current) {
            return;
        }
        this.props.navigateToState && this.props.navigateToState(breadcrumb.state);
    }
    componentWillMount() {
        if(this.props.breadcrumbs) {
            this.props.breadcrumbs[this.props.breadcrumbs.length - 1]["current"] = true;
        }
    }
    render() {
        return (
            <SectionHeader className="section-header">
                {this.props.breadcrumbs && <ul>
                    {
                        this.props.breadcrumbs.map((breadcrumb, index) => <HeaderList key={index} breadcrumb={breadcrumb} changeState={this.changeState.bind(this, breadcrumb)}></HeaderList>)
                    }
                </ul>}
                <SectionTitle>{this.props.title}</SectionTitle>
                {this.props.children}
            </SectionHeader>
        )
    }
}

export default NavigationHeader