fk-react-ui-components
Version:
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
181 lines (162 loc) • 9.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InactiveIconContainer = exports.ActiveIconContainer = exports.DoneIconContainer = exports.ContentWrapper = exports.StepItem = exports.StepsWrapper = exports.StepperContainer = 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 display: flex;\n flex-direction: ', ';\n ', ' ', ' flex-grow: ', ';\n flex-shrink: ', ';\n'], ['\n display: flex;\n flex-direction: ', ';\n ', ' ', ' flex-grow: ', ';\n flex-shrink: ', ';\n']),
_templateObject2 = _taggedTemplateLiteral(['\n display: flex;\n flex-direction: ', ';\n ', ' ', ' flex-grow: ', ';\n flex-shrink: ', ';\n background-color: ', ';\n'], ['\n display: flex;\n flex-direction: ', ';\n ', ' ', ' flex-grow: ', ';\n flex-shrink: ', ';\n background-color: ', ';\n']),
_templateObject3 = _taggedTemplateLiteral(['\n display: flex;\n flex-direction: ', ';\n align-items: ', ';\n justify-content: ', ';\n box-sizing: border-box;\n padding: ', ';\n font-size: ', ';\n font-weight: ', ';\n color: ', ';\n width: ', ';\n height: ', ';\n background-color: ', ';\n cursor: ', ';\n ', ' &:hover {\n ', ' ', ' ', ' ', ' ', ';\n }\n ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ';\n'], ['\n display: flex;\n flex-direction: ', ';\n align-items: ', ';\n justify-content: ', ';\n box-sizing: border-box;\n padding: ', ';\n font-size: ', ';\n font-weight: ', ';\n color: ', ';\n width: ', ';\n height: ', ';\n background-color: ', ';\n cursor: ', ';\n ', ' &:hover {\n ', ' ', ' ', ' ', ' ', ';\n }\n ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ';\n']),
_templateObject4 = _taggedTemplateLiteral(['\n width: 20px;\n height: 20px;\n display: inline-block;\n color: #ffffff;\n border-radius: 50%;\n margin-right: 10px;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n & > i {\n transform: translateY(1px);\n }\n'], ['\n width: 20px;\n height: 20px;\n display: inline-block;\n color: #ffffff;\n border-radius: 50%;\n margin-right: 10px;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n & > i {\n transform: translateY(1px);\n }\n']),
_templateObject5 = _taggedTemplateLiteral(['\n flex-grow: 1;\n'], ['\n flex-grow: 1;\n']),
_templateObject6 = _taggedTemplateLiteral(['\n background-color: #62c57e;\n'], ['\n background-color: #62c57e;\n']),
_templateObject7 = _taggedTemplateLiteral(['\n background-color: #96a8bf;\n'], ['\n background-color: #96a8bf;\n']),
_templateObject8 = _taggedTemplateLiteral(['\n background-color: #e1e5eb;\n border: 1px solid #dddddd;\n'], ['\n background-color: #e1e5eb;\n border: 1px solid #dddddd;\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 StepperContainer = exports.StepperContainer = _styledComponents2.default.div(_templateObject, function (_ref) {
var orientation = _ref.orientation;
return orientation === 'vertical' ? 'row' : 'column';
}, function (_ref2) {
var styles = _ref2.styles;
return styles.height ? 'height: ' + styles.height + ';' : '';
}, function (_ref3) {
var styles = _ref3.styles;
return styles.width ? 'width: ' + styles.width + ';' : '';
}, function (_ref4) {
var styles = _ref4.styles;
return styles.flexGrow || 1;
}, function (_ref5) {
var styles = _ref5.styles;
return styles.flexShrink || 1;
});
var StepsWrapper = exports.StepsWrapper = _styledComponents2.default.div(_templateObject2, function (_ref6) {
var orientation = _ref6.orientation;
return orientation === 'vertical' ? 'column' : 'row';
}, function (_ref7) {
var styles = _ref7.styles;
return styles.height ? 'height: ' + styles.height + ';' : '';
}, function (_ref8) {
var styles = _ref8.styles;
return styles.width ? 'width: ' + styles.width + ';' : '';
}, function (_ref9) {
var styles = _ref9.styles;
return styles.flexGrow || 0;
}, function (_ref10) {
var styles = _ref10.styles;
return styles.flexShrink || 0;
}, function (_ref11) {
var styles = _ref11.styles,
theme = _ref11.theme;
return styles.backgroundColor || theme.background.secondary;
});
StepsWrapper.defaultProps = defaultProps;
var StepItem = exports.StepItem = _styledComponents2.default.div(_templateObject3, function (_ref12) {
var styles = _ref12.styles;
return styles.flexDirection || 'row';
}, function (_ref13) {
var styles = _ref13.styles;
return styles.alignItems || 'center';
}, function (_ref14) {
var styles = _ref14.styles;
return styles.justifyContent || 'flex-start';
}, function (_ref15) {
var styles = _ref15.styles;
return styles.padding || '10px 20px 10px 80px';
}, function (_ref16) {
var styles = _ref16.styles;
return styles.fontSize || '14px';
}, function (_ref17) {
var styles = _ref17.styles;
return styles.fontWeight || '500';
}, function (_ref18) {
var styles = _ref18.styles,
theme = _ref18.theme;
return styles.color || theme.text.primary;
}, function (_ref19) {
var styles = _ref19.styles;
return styles.width || '260px';
}, function (_ref20) {
var styles = _ref20.styles;
return styles.width || '40px';
}, function (_ref21) {
var styles = _ref21.styles,
theme = _ref21.theme;
return styles.backgroundColor || theme.background.secondary;
}, function (_ref22) {
var styles = _ref22.styles;
return styles.cursor || 'pointer';
}, function (_ref23) {
var styles = _ref23.styles;
return styles.height ? 'height: ' + styles.height + ';' : '';
}, function (_ref24) {
var styles = _ref24.styles;
return styles.hover && styles.hover.color ? 'color: ' + styles.hover.color + ';' : '';
}, function (_ref25) {
var styles = _ref25.styles;
return styles.hover && styles.hover.backgroundColor ? 'background-color: ' + styles.hover.backgroundColor + ';' : '';
}, function (_ref26) {
var styles = _ref26.styles;
return styles.hover && styles.hover.padding ? 'padding: ' + styles.hover.padding + ';' : '';
}, function (_ref27) {
var styles = _ref27.styles;
return styles.hover && styles.hover.fontSize ? 'font-size: ' + styles.hover.fontSize + ';' : '';
}, function (_ref28) {
var styles = _ref28.styles;
return styles.hover && styles.hover.fontWeight ? 'font-weight: ' + styles.hover.fontWeight + ';' : '';
}, function (_ref29) {
var active = _ref29.active;
return active ? 'font-weight: 900;' : '';
}, function (_ref30) {
var active = _ref30.active,
styles = _ref30.styles;
return active && styles.active && styles.active.color ? 'color: ' + styles.active.color + ';' : '';
}, function (_ref31) {
var active = _ref31.active,
styles = _ref31.styles;
return active && styles.active && styles.active.backgroungColor ? 'background-color: ' + styles.active.backgroundColor + ';' : '';
}, function (_ref32) {
var active = _ref32.active,
styles = _ref32.styles;
return active && styles.active && styles.active.padding ? 'padding: ' + styles.active.padding + ';' : '';
}, function (_ref33) {
var active = _ref33.active,
styles = _ref33.styles;
return active && styles.active && styles.active.fontSize ? 'font-size: ' + styles.active.fontSize + ';' : '';
}, function (_ref34) {
var active = _ref34.active,
styles = _ref34.styles;
return active && styles.active && styles.active.fontWeight ? 'font-weight: ' + styles.active.fontWeight + ';' : '';
}, function (_ref35) {
var done = _ref35.done,
styles = _ref35.styles;
return done && styles.done && styles.done.color ? 'color: ' + styles.done.color + ';' : '';
}, function (_ref36) {
var done = _ref36.done,
styles = _ref36.styles;
return done && styles.done && styles.done.backgroungColor ? 'background-color: ' + styles.done.backgroundColor + ';' : '';
}, function (_ref37) {
var done = _ref37.done,
styles = _ref37.styles;
return done && styles.done && styles.done.padding ? 'padding: ' + styles.done.padding + ';' : '';
}, function (_ref38) {
var done = _ref38.done,
styles = _ref38.styles;
return done && styles.done && styles.done.fontSize ? 'font-size: ' + styles.done.fontSize + ';' : '';
}, function (_ref39) {
var done = _ref39.done,
styles = _ref39.styles;
return done && styles.done && styles.done.fontWeight ? 'font-weight: ' + styles.done.fontWeight + ';' : '';
});
StepItem.defaultProps = defaultProps;
var IconBase = _styledComponents2.default.div(_templateObject4);
var ContentWrapper = exports.ContentWrapper = _styledComponents2.default.div(_templateObject5);
var DoneIconContainer = exports.DoneIconContainer = IconBase.extend(_templateObject6);
var ActiveIconContainer = exports.ActiveIconContainer = IconBase.extend(_templateObject7);
var InactiveIconContainer = exports.InactiveIconContainer = IconBase.extend(_templateObject8);