fk-react-ui-components/lib/Accordian/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 CollapseComponent from 'rc-collapse';
import React from 'react';
import ReactDOM from 'react-dom';
import 'rc-collapse/assets/index.css';
import styled from 'styled-components';
import { colors } from '../colorCodes';

const PanelComponent = CollapseComponent.Panel;

export const Collapse = styled(CollapseComponent)`
    &.rc-collapse > .rc-collapse-item > .rc-collapse-header {
        height: auto;
        line-height: inherit;
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: solid 1px ${colors.accordianBorderColor}
    }

    &.rc-collapse > .rc-collapse-item > .rc-collapse-header .arrow {
        font: normal normal normal 14px/1 FontAwesome;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
        font-size: 24px;
        transform: translateY(-2px);
        border: 0;
        height: 30px;
        width: 20px;
        &:before {
            content: "\f107"
        }
    }

    &.rc-collapse {
        background-color: ${colors.whiteText};
        border: solid 1px ${colors.accordianBorderColor};
        border-radius: 2px;
    }

    &.rc-collapse >  .rc-collapse-item > .rc-collapse-content {
        background-color: ${colors.greyBackground};
        max-height: 300px;
        overflow-y: auto;
    }

    &.rc-collapse >  .rc-collapse-item > .rc-collapse-content > rc-collapse-content-box {
        margin: 10px;
    }

    &.rc-collapse > .rc-collapse-item-active {
        > .rc-collapse-header {
          .arrow {
            margin-right: 6px;
            &:before {
                content: "\f106";
            }
          }
        }
    }

    &.rc-collapse > .rc-collapse-item {
        border-top: none;
    }

`;

export const Panel = PanelComponent;
//# sourceMappingURL=index.js.map