fk-react-ui-components/lib/Buttons/DropDownBtnGrp/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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Caret = exports.ButtonGroupOption = exports.ButtonGroup = exports.SecondaryGrpBtn = exports.PrimaryGrpBtn = 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  width: 82%;\n  box-sizing: border-box;\n  border-radius: 2px 0 0 2px;\n'], ['\n  width: 82%;\n  box-sizing: border-box;\n  border-radius: 2px 0 0 2px;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  width: 100%;\n  border-top: 0;\n  border-radius: 0;\n  box-sizing: border-box;\n'], ['\n  width: 100%;\n  border-top: 0;\n  border-radius: 0;\n  box-sizing: border-box;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  top: ', ';\n  width: ', ';\n  display: ', ';\n  position: ', ';\n  padding: 0;\n  flex-wrap: wrap;\n  justify-content: space-around;\n  align-items: center;\n  border: ', ';\n  background-color: ', ';\n  min-width: 90px;\n  box-sizing: border-box;\n'], ['\n  top: ', ';\n  width: ', ';\n  display: ', ';\n  position: ', ';\n  padding: 0;\n  flex-wrap: wrap;\n  justify-content: space-around;\n  align-items: center;\n  border: ', ';\n  background-color: ', ';\n  min-width: 90px;\n  box-sizing: border-box;\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  top: ', ';\n  width: ', ';\n  display: ', ';\n  position: ', ';\n  flex-wrap: nowrap;\n  list-style: none;\n  list-style-position: outside;\n  justify-content: center;\n  align-items: center;\n  min-width: 90px;\n  box-sizing: border-box;\n  &:last-of-type button,\n  &[last-of-type] button {\n    border-radius: 0 0 2px 2px;\n  }\n'], ['\n  top: ', ';\n  width: ', ';\n  display: ', ';\n  position: ', ';\n  flex-wrap: nowrap;\n  list-style: none;\n  list-style-position: outside;\n  justify-content: center;\n  align-items: center;\n  min-width: 90px;\n  box-sizing: border-box;\n  &:last-of-type button,\n  &[last-of-type] button {\n    border-radius: 0 0 2px 2px;\n  }\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n  width:18%;\n  background-color: ', ';\n  min-height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ', ';\n  border-left: 1px solid ', ';\n  font-size: medium;\n  box-sizing: border-box;\n  border-radius: 0 2px 2px 0;\n'], ['\n  width:18%;\n  background-color: ', ';\n  min-height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ', ';\n  border-left: 1px solid ', ';\n  font-size: medium;\n  box-sizing: border-box;\n  border-radius: 0 2px 2px 0;\n']);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _PrimaryBtn = require('../PrimaryBtn');

var _PrimaryBtn2 = _interopRequireDefault(_PrimaryBtn);

var _SecondaryBtn = require('../SecondaryBtn');

var _SecondaryBtn2 = _interopRequireDefault(_SecondaryBtn);

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 PrimaryGrpBtn = exports.PrimaryGrpBtn = _PrimaryBtn2.default.extend(_templateObject);
var SecondaryGrpBtn = exports.SecondaryGrpBtn = _SecondaryBtn2.default.extend(_templateObject2);
var ButtonGroup = exports.ButtonGroup = _styledComponents2.default.ul(_templateObject3, function (props) {
  return props.top;
}, function (props) {
  return props.width;
}, function (props) {
  return props.display;
}, function (props) {
  return props.position;
}, function (props) {
  return props.border;
}, function (props) {
  return props.theme.white;
});
ButtonGroup.defaultProps = _extends({
  display: 'flex',
  border: 0,
  width: '100%',
  position: 'relative',
  margin: 0
}, defaultProps, {
  top: 0
});
var ButtonGroupOption = exports.ButtonGroupOption = _styledComponents2.default.li(_templateObject4, function (props) {
  return props.top;
}, function (props) {
  return props.width;
}, function (props) {
  return props.display;
}, function (props) {
  return props.position;
});
ButtonGroupOption.defaultProps = {
  display: 'flex',
  width: '100%',
  position: 'relative',
  top: 0
};
var Caret = exports.Caret = _styledComponents2.default.div(_templateObject5, function (props) {
  return props.theme.accent.primary;
}, function (props) {
  return props.theme.white;
}, function (props) {
  return props.theme.white;
});

Caret.defaultProps = defaultProps;