fk-react-ui-components/components/Stepper/styles.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 styled from 'styled-components';
import { colors } from '../colorCodes';

export const StepperContainer = styled.div`
    display: flex;
    flex-direction: ${({orientation}) => (orientation === 'vertical' ? 'row' : 'column')};
    ${({styles}) => styles.height ? ('height: ' + styles.height + ';') : ''}
    ${({styles}) => styles.width ? ('width: ' + styles.width + ';') : ''}
    flex-grow: ${({styles}) => styles.flexGrow || 1};
    flex-shrink: ${({styles}) => styles.flexShrink || 1};
`;

export const StepsWrapper = styled.div`
    display: flex;
    flex-direction: ${({orientation}) => (orientation === 'vertical' ? 'column' : 'row')};
    ${({styles}) => styles.height ? ('height: ' + styles.height + ';') : ''}
    ${({styles}) => styles.width ? ('width: ' + styles.width + ';') : ''}
    flex-grow: ${({styles}) => styles.flexGrow || 0};
    flex-shrink: ${({styles}) => styles.flexShrink || 0};
    background-color: ${({styles}) => styles.backgroundColor || colors.echoBlueBackground};
`;

export const StepItem = styled.div`
    display: flex;
    flex-direction: ${({styles}) => styles.flexDirection || 'row'}; 
    align-items: ${({styles}) => styles.alignItems || 'center'};
    justify-content: ${({styles}) => styles.justifyContent || 'flex-start'};
    box-sizing: border-box;
    padding: ${({styles}) => styles.padding || '10px 20px 10px 80px'};
    font-size: ${({styles}) => styles.fontSize || '14px'};
    font-weight: ${({styles}) => styles.fontWeight || '500'};
    color: ${({styles}) => styles.color || colors.bluishGreyText};
    width: ${({styles}) => styles.width || '260px'};
    height: ${({styles}) => styles.width || '40px'};
    background-color: ${({styles}) => styles.backgroundColor || colors.echoBlueBackground};
    cursor: ${({styles}) => styles.cursor || 'pointer'};    
    ${({styles}) => styles.height ? ('height: ' + styles.height + ';') : ''}
    &:hover {
        ${({styles}) => styles.hover && styles.hover.color ? ('color: ' + styles.hover.color + ';') : ''}
        ${({styles}) => styles.hover && styles.hover.backgroundColor ? ('background-color: ' + styles.hover.backgroundColor + ';') : ''}
        ${({styles}) => styles.hover && styles.hover.padding ? ('padding: ' + styles.hover.padding + ';') : ''}
        ${({styles}) => styles.hover && styles.hover.fontSize ? ('font-size: ' + styles.hover.fontSize + ';') : ''}
        ${({styles}) => styles.hover && styles.hover.fontWeight ? ('font-weight: ' + styles.hover.fontWeight + ';') : ''}
    }
    ${({active}) => active ? 'font-weight: 900;' : ''}
    ${({active, styles}) => active && styles.active && styles.active.color ?
        ('color: ' + styles.active.color + ';') : ''}
    ${({active, styles}) => active && styles.active && styles.active.backgroungColor ?
        ('background-color: ' + styles.active.backgroundColor + ';') : ''}
    ${({active, styles}) => active && styles.active && styles.active.padding ?
        ('padding: ' + styles.active.padding + ';') : ''}
    ${({active, styles}) => active && styles.active && styles.active.fontSize ?
        ('font-size: ' + styles.active.fontSize + ';') : ''}
    ${({active, styles}) => active && styles.active && styles.active.fontWeight ?
        ('font-weight: ' + styles.active.fontWeight + ';') : ''}

    ${({done, styles}) => done && styles.done && styles.done.color ?
        ('color: ' + styles.done.color + ';') : ''}
    ${({done, styles}) => done && styles.done && styles.done.backgroungColor ?
        ('background-color: ' + styles.done.backgroundColor + ';') : ''}
    ${({done, styles}) => done && styles.done && styles.done.padding ?
        ('padding: ' + styles.done.padding + ';') : ''}
    ${({done, styles}) => done && styles.done && styles.done.fontSize ?
        ('font-size: ' + styles.done.fontSize + ';') : ''}
    ${({done, styles}) => done && styles.done && styles.done.fontWeight ?
        ('font-weight: ' + styles.done.fontWeight + ';') : ''}
`;

const IconBase = styled.div`
    width: 20px;
    height: 20px;
    display: inline-block;
    color: #ffffff;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    & > i {
        transform: translateY(1px);
    }
`;

export const ContentWrapper = styled.div`
    flex-grow: 1;
`;

export const DoneIconContainer = IconBase.extend`
    background-color: #62c57e;
`;

export const ActiveIconContainer = IconBase.extend`
    background-color: #96a8bf;
`;

export const InactiveIconContainer = IconBase.extend`
    background-color: #e1e5eb;
    border: 1px solid #dddddd;
`;