fk-react-ui-components/lib/Timeline/styles/Timeline.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

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.ProgressBar = exports.Progress = exports.Tlfooter = exports.TlBody = exports.TlHeader = exports.TimelineContainer = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _templateObject = _taggedTemplateLiteral(['\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n    .milestone {\n        padding: 0;\n        position: relative;\n    }\n    .progress {\n        overflow: hidden;\n        margin-bottom: 12px;\n    }\n    .dashed {\n        height: 1px;\n        border: none;\n        background: ', ';\n        background-size: 8px 1px, 100% 1px;\n    }\n    .solid {\n        height: 0px;\n    }\n    .milestone .progress {\n        position: relative;\n        box-shadow: none;\n        border-radius: 0px;\n        margin: 12px 0;\n    }\n    .milestone:first-child .progress {\n        left: 50%;\n        width: 50%;\n    }\n    .milestone:last-child .progress {\n        width: 50%;\n    }\n    .progress-bar {\n        width: 0px;\n        float: left;\n        height: 100%;\n        color: ', ';\n        text-align: center;\n    }\n    .milestone .progress-bar {\n        width: 0px;\n        box-shadow: none;\n    }\n    .milestone.complete .progress-bar {\n        width: 100%;\n    }\n    .milestone.active .progress-bar {\n        width: 50%;\n    }\n    .milestone:first-child.active .progress-bar,\n    .milestone:first-child.fail .progress-bar,\n    .milestone:first-child.cancel .progress-bar {\n        width: 0%;\n        background: ', ';\n    }\n    .milestone:last-child.active > .progress-bar,\n    .milestone:last-child.fail > .progress-bar,\n    .milestone:last-child.cancel > .progress-bar {\n        width: 100%;\n    }\n'], ['\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n    .milestone {\n        padding: 0;\n        position: relative;\n    }\n    .progress {\n        overflow: hidden;\n        margin-bottom: 12px;\n    }\n    .dashed {\n        height: 1px;\n        border: none;\n        background: ', ';\n        background-size: 8px 1px, 100% 1px;\n    }\n    .solid {\n        height: 0px;\n    }\n    .milestone .progress {\n        position: relative;\n        box-shadow: none;\n        border-radius: 0px;\n        margin: 12px 0;\n    }\n    .milestone:first-child .progress {\n        left: 50%;\n        width: 50%;\n    }\n    .milestone:last-child .progress {\n        width: 50%;\n    }\n    .progress-bar {\n        width: 0px;\n        float: left;\n        height: 100%;\n        color: ', ';\n        text-align: center;\n    }\n    .milestone .progress-bar {\n        width: 0px;\n        box-shadow: none;\n    }\n    .milestone.complete .progress-bar {\n        width: 100%;\n    }\n    .milestone.active .progress-bar {\n        width: 50%;\n    }\n    .milestone:first-child.active .progress-bar,\n    .milestone:first-child.fail .progress-bar,\n    .milestone:first-child.cancel .progress-bar {\n        width: 0%;\n        background: ', ';\n    }\n    .milestone:last-child.active > .progress-bar,\n    .milestone:last-child.fail > .progress-bar,\n    .milestone:last-child.cancel > .progress-bar {\n        width: 100%;\n    }\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n    position: relative;\n    color: ', ';\n    text-align: center;\n    vertical-align: middle;\n    font-size: 11px;\n'], ['\n    position: relative;\n    color: ', ';\n    text-align: center;\n    vertical-align: middle;\n    font-size: 11px;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n    top: ', ';\n    line-height: ', ';\n    left: 50%;\n    font-size: 11px;\n    margin-top: -15px;\n    margin-left: -15px;\n    position: absolute;\n    display: block;\n    width: ', ';\n    height: ', ';\n    border-radius: 50%;\n    border: ', ';\n    background: ', ';\n    pointer-events: ', ';\n    text-align: center;\n    vertical-align: middle;\n'], ['\n    top: ', ';\n    line-height: ', ';\n    left: 50%;\n    font-size: 11px;\n    margin-top: -15px;\n    margin-left: -15px;\n    position: absolute;\n    display: block;\n    width: ', ';\n    height: ', ';\n    border-radius: 50%;\n    border: ', ';\n    background: ', ';\n    pointer-events: ', ';\n    text-align: center;\n    vertical-align: middle;\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n    position: relative;\n    color: ', ';\n    font-size: 11px;\n    text-align: center;\n'], ['\n    position: relative;\n    color: ', ';\n    font-size: 11px;\n    text-align: center;\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n    border-width: 0.5px;\n    border-style: solid;\n    border-color: ', ';\n    border-radius: none;\n    height: 0px;\n'], ['\n    border-width: 0.5px;\n    border-style: solid;\n    border-color: ', ';\n    border-radius: none;\n    height: 0px;\n']),
    _templateObject6 = _taggedTemplateLiteral(['\n    background-color: ', ';\n'], ['\n    background-color: ', ';\n']);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _colorCodes = require('../../colorCodes');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var defaultProps = {
    theme: _extends({}, _colorCodes.guidelineColors)
};

var TimelineContainer = exports.TimelineContainer = _styledComponents2.default.div(_templateObject, 'linear-gradient(to right, transparent 50%, ' + function (props) {
    return props.theme.border.primary;
} + ' 50%), linear-gradient(to right, ' + function (props) {
    return props.theme.white;
} + ', ' + function (props) {
    return props.theme.white;
} + ')', function (props) {
    return props.theme.white;
}, 'linear-gradient(to right, transparent 50%, ' + function (props) {
    return props.theme.border.primary;
} + ' 50%), linear-gradient(to right, ' + function (props) {
    return props.theme.white;
} + ', ' + function (props) {
    return props.theme.white;
} + ')');

TimelineContainer.defaultProps = defaultProps;

var TlHeader = exports.TlHeader = _styledComponents2.default.div(_templateObject2, function (props) {
    return props.theme.text.tertiary;
});

TlHeader.defaultProps = defaultProps;

var TlBody = exports.TlBody = _styledComponents2.default.div(_templateObject3, function (props) {
    return props.body.position || '30px';
}, function (props) {
    return props.body.height || '18px';
}, function (props) {
    return props.body.width || '18px';
}, function (props) {
    return props.body.height || '18px';
}, function (props) {
    return props.body.border || '1px solid ' + props.theme.accent.primary;
}, function (props) {
    return props.body.background || props.theme.white;
}, function (props) {
    return props.body.pointerEvents || 'none';
});

TlBody.defaultProps = defaultProps;

var Tlfooter = exports.Tlfooter = _styledComponents2.default.div(_templateObject4, function (props) {
    return props.theme.text.tertiary;
});

Tlfooter.defaultProps = defaultProps;

var Progress = exports.Progress = _styledComponents2.default.div(_templateObject5, function (props) {
    return props.borderColor || props.theme.accent.primary;
});

Progress.defaultProps = defaultProps;

var ProgressBar = exports.ProgressBar = _styledComponents2.default.div(_templateObject6, function (props) {
    return props.styles.color || props.theme.accent.primary;
});

ProgressBar.defaultProps = defaultProps;