@punch-in/buffet-modern-core 3.3.11

package/build/esm/components/InputNumber/index.js

@@ -0,0 +1,70 @@
+var _excluded = ["autoFocus", "id", "className", "name", "onChange", "tabIndex", "value"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ *
+ * InputNumber
+ *
+ */
+
+import React from 'react';
+import RcInputNumber from 'rc-input-number';
+import PropTypes from 'prop-types';
+import { InputNumber as StyledInputNumber } from '@punch-in/buffet-modern';
+function InputNumber(_ref) {
+  var autoFocus = _ref.autoFocus,
+    id = _ref.id,
+    className = _ref.className,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    tabIndex = _ref.tabIndex,
+    value = _ref.value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleChange = function handleChange(data) {
+    if (data !== null) {
+      var target = {
+        id: id,
+        name: name,
+        type: 'number',
+        value: data
+      };
+      onChange({
+        target: target
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(StyledInputNumber, {
+    className: className
+  }, /*#__PURE__*/React.createElement(RcInputNumber, _extends({}, rest, {
+    autoFocus: autoFocus,
+    id: id || name,
+    name: name,
+    onChange: handleChange,
+    tabIndex: tabIndex,
+    value: value,
+    className: "inputNumber"
+  })));
+}
+InputNumber.defaultProps = {
+  autoComplete: 'off',
+  autoFocus: false,
+  className: null,
+  id: null,
+  onChange: function onChange() {},
+  placeholder: null,
+  tabIndex: '0',
+  value: 0
+};
+InputNumber.propTypes = {
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+export default InputNumber;

package/build/esm/components/InputText/PrefixIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IconText, IconWrapper } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+function PrefixIcon(_ref) {
+  var type = _ref.type,
+    icon = _ref.icon;
+  if (icon) {
+    return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: icon
+    }));
+  }
+  if (type === 'search') {
+    return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: type
+    }));
+  }
+  if (type === 'email') {
+    return /*#__PURE__*/React.createElement(IconText, {
+      text: "@"
+    });
+  }
+  return null;
+}
+PrefixIcon.defaultProps = {
+  icon: null
+};
+PrefixIcon.propTypes = {
+  icon: PropTypes.node,
+  type: PropTypes.string.isRequired
+};
+export default PrefixIcon;

package/build/esm/components/InputText/index.js

@@ -0,0 +1,89 @@
+var _excluded = ["autoFocus", "className", "icon", "id", "name", "onChange", "tabIndex", "type", "value"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ *
+ * InputText
+ *
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { IconWrapper, InputText as Input, InputWrapper } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+import PrefixIcon from './PrefixIcon';
+function InputText(_ref) {
+  var autoFocus = _ref.autoFocus,
+    className = _ref.className,
+    icon = _ref.icon,
+    id = _ref.id,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    tabIndex = _ref.tabIndex,
+    type = _ref.type,
+    value = _ref.value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPassword = _useState2[0],
+    togglePassword = _useState2[1];
+  return /*#__PURE__*/React.createElement(InputWrapper, {
+    className: className
+  }, /*#__PURE__*/React.createElement(PrefixIcon, {
+    icon: icon,
+    type: type
+  }), type === 'password' && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return togglePassword(!showPassword);
+    },
+    className: showPassword ? 'shown' : '',
+    tabIndex: "-1"
+  }, /*#__PURE__*/React.createElement(IconWrapper, {
+    background: false
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: type
+  }))), /*#__PURE__*/React.createElement(Input, _extends({
+    autoFocus: autoFocus,
+    id: id || name,
+    name: name,
+    onChange: onChange,
+    tabIndex: tabIndex,
+    type: showPassword ? 'text' : type,
+    value: value,
+    icon: icon
+  }, rest)));
+}
+InputText.defaultProps = {
+  autoComplete: 'off',
+  autoFocus: false,
+  className: null,
+  icon: null,
+  id: null,
+  onChange: function onChange() {},
+  placeholder: null,
+  tabIndex: '0',
+  type: 'text',
+  value: ''
+};
+InputText.propTypes = {
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  icon: PropTypes.node,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.string,
+  type: PropTypes.string,
+  value: PropTypes.string
+};
+export default InputText;

package/build/esm/components/Label/index.js

@@ -0,0 +1,40 @@
+/**
+ *
+ * Label
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isFunction } from 'lodash';
+import { Label as StyledLabel } from '@punch-in/buffet-modern';
+function Label(props) {
+  var content = function () {
+    if (isFunction(props.message)) {
+      return props.message();
+    }
+    if (props.message) {
+      return props.message;
+    }
+    return props.children;
+  }();
+  return /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: props.htmlFor,
+    className: props.className
+  }, content);
+}
+Label.defaultProps = {
+  children: null,
+  className: null,
+  message: null
+};
+Label.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  htmlFor: PropTypes.string.isRequired,
+  message: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.shape({
+    id: PropTypes.string,
+    params: PropTypes.object
+  })])
+};
+export default Label;

package/build/esm/components/List/index.js

@@ -0,0 +1,50 @@
+/**
+ *
+ * List
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { List as StyledList, LoadingIndicator } from '@punch-in/buffet-modern';
+import ListRow from '../ListRow';
+import Padded from '../Padded';
+function List(_ref) {
+  var className = _ref.className,
+    items = _ref.items,
+    isLoading = _ref.isLoading,
+    customRowComponent = _ref.customRowComponent;
+  return /*#__PURE__*/React.createElement(StyledList, {
+    className: className
+  }, isLoading ? /*#__PURE__*/React.createElement(Padded, {
+    top: true,
+    bottom: true,
+    size: "md"
+  }, /*#__PURE__*/React.createElement(LoadingIndicator, null)) : /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, items.map(function (item, index) {
+    return customRowComponent ?
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    React.createElement(React.Fragment, {
+      key: index
+    }, customRowComponent(item)) :
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    React.createElement(ListRow, {
+      cells: item,
+      key: index
+    });
+  }))));
+}
+List.defaultProps = {
+  className: null,
+  customRowComponent: null,
+  isLoading: false,
+  items: []
+};
+List.propTypes = {
+  className: PropTypes.string,
+  customRowComponent: PropTypes.func,
+  isLoading: PropTypes.bool,
+  items: PropTypes.instanceOf(Array)
+};
+export default List;

package/build/esm/components/ListHeader/BaselineAlignement.js

@@ -0,0 +1,5 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+var BaselineAlignement = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 17px;\n"])));
+export default BaselineAlignement;

package/build/esm/components/ListHeader/index.js

@@ -0,0 +1,52 @@
+/**
+ *
+ * ListHeader
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ListHeader as StyledListHeader } from '@punch-in/buffet-modern';
+import Button from '../Button';
+import Flex from '../Flex';
+import Padded from '../Padded';
+import Text from '../Text';
+import BaselineAlignement from './BaselineAlignement';
+function ListHeader(_ref) {
+  var button = _ref.button,
+    title = _ref.title,
+    subtitle = _ref.subtitle;
+  return /*#__PURE__*/React.createElement(StyledListHeader, null, /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(Padded, {
+    top: true,
+    bottom: true,
+    size: "smd"
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontSize: "lg",
+    fontWeight: "bold",
+    lineHeight: "18px"
+  }, title), subtitle && /*#__PURE__*/React.createElement(Padded, {
+    top: true,
+    size: "xs"
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontSize: "md",
+    color: "grey",
+    lineHeight: "13px"
+  }, subtitle))), button && /*#__PURE__*/React.createElement(BaselineAlignement, null, /*#__PURE__*/React.createElement(Button, button))));
+}
+ListHeader.defaultProps = {
+  button: null,
+  title: null,
+  subtitle: null
+};
+ListHeader.propTypes = {
+  button: PropTypes.shape({
+    color: PropTypes.string,
+    icon: PropTypes.bool,
+    type: PropTypes.string
+  }),
+  subtitle: PropTypes.string,
+  title: PropTypes.string
+};
+export default ListHeader;

package/build/esm/components/ListRow/index.js

@@ -0,0 +1,30 @@
+/**
+ *
+ * ListRow
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ListRow as StyledListRow } from '@punch-in/buffet-modern';
+function ListRow(_ref) {
+  var cells = _ref.cells,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(StyledListRow, {
+    onClick: onClick
+  }, Object.keys(cells).map(function (key) {
+    return /*#__PURE__*/React.createElement("td", {
+      key: key,
+      className: "".concat(key, "-cell")
+    }, /*#__PURE__*/React.createElement("p", null, cells[key]));
+  }));
+}
+ListRow.defaultProps = {
+  cells: {},
+  onClick: function onClick() {}
+};
+ListRow.propTypes = {
+  cells: PropTypes.instanceOf(Object),
+  onClick: PropTypes.func
+};
+export default ListRow;

package/build/esm/components/ListRow/tests/index.tests.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ListRow from '../index';
+describe('<ListRow />', function () {
+  // eslint-disable-next-line jest/expect-expect
+  it('Should not crash', function () {
+    mount(/*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(ListRow, null))));
+  });
+  it('should display some cells', function () {
+    var cells = {
+      name: 'name',
+      test: 'test'
+    };
+    var renderedComponent = mount(/*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(ListRow, {
+      cells: cells
+    }))));
+    var tds = renderedComponent.find('td');
+    expect(tds.at(0).text()).toBe('name');
+    expect(tds.at(1).text()).toBe('test');
+  });
+});

package/build/esm/components/NavTabs/index.js

@@ -0,0 +1,38 @@
+/**
+ *
+ * NavTabs
+ *
+ */
+
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Tab as StyledTab, colors } from '@punch-in/buffet-modern';
+import { gradient } from '@punch-in/buffet-modern-utils';
+function NavTabs(_ref) {
+  var links = _ref.links;
+  var color = colors.greyLink;
+  return /*#__PURE__*/React.createElement("ul", null, links.map(function (link, index) {
+    color = gradient(color, 1.5);
+    var content = link.label ? /*#__PURE__*/React.createElement("p", null, link.label) : link.compo || null;
+    return /*#__PURE__*/React.createElement(StyledTab, {
+      key: link.to,
+      index: index,
+      count: links.length,
+      background: color
+    }, /*#__PURE__*/React.createElement(NavLink, {
+      to: link.to
+    }, content));
+  }));
+}
+NavTabs.defaultProps = {
+  links: []
+};
+NavTabs.propTypes = {
+  links: PropTypes.arrayOf(PropTypes.shape({
+    compo: PropTypes.node,
+    label: PropTypes.string,
+    to: PropTypes.string
+  }))
+};
+export default NavTabs;

package/build/esm/components/Option/RemoveButton.js

@@ -0,0 +1,5 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+var RemoveButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-items: center;\n  height: 13px;\n  padding-left: 10px;\n  padding-right: 10px;\n  margin-left: 10px;\n  background-color: transparent;\n  border: 0;\n  border-left: 1px solid rgba(0, 126, 255, 0.1);\n  &:focus {\n    outline: 0;\n  }\n"])));
+export default RemoveButton;

package/build/esm/components/Option/index.js

@@ -0,0 +1,32 @@
+var _excluded = ["label", "onClick"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Remove } from '@punch-in/buffet-modern-icons';
+import { Option as Wrapper } from '@punch-in/buffet-modern';
+import { upperFirst } from 'lodash';
+import RemoveButton from './RemoveButton';
+function Filter(_ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var content = typeof label === 'string' ? /*#__PURE__*/React.createElement("span", null, upperFirst(label)) : label;
+  return /*#__PURE__*/React.createElement(Wrapper, rest, content, /*#__PURE__*/React.createElement(RemoveButton, {
+    type: "button",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Remove, {
+    width: "11px",
+    height: "11px",
+    fill: "#007eff"
+  })));
+}
+Filter.defaultProps = {
+  label: '',
+  onClick: function onClick() {}
+};
+Filter.propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onClick: PropTypes.func
+};
+export default Filter;

package/build/esm/components/Padded/index.js

@@ -0,0 +1,56 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+var Padded = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme,
+    size = _ref.size,
+    top = _ref.top;
+  return top && (theme.main.sizes.paddings[size] || size);
+}, function (_ref2) {
+  var theme = _ref2.theme,
+    size = _ref2.size,
+    right = _ref2.right;
+  return right && (theme.main.sizes.paddings[size] || size);
+}, function (_ref3) {
+  var theme = _ref3.theme,
+    size = _ref3.size,
+    bottom = _ref3.bottom;
+  return bottom && (theme.main.sizes.paddings[size] || size);
+}, function (_ref4) {
+  var theme = _ref4.theme,
+    size = _ref4.size,
+    left = _ref4.left;
+  return left && (theme.main.sizes.paddings[size] || size);
+});
+Padded.defaultProps = {
+  bottom: false,
+  left: false,
+  right: false,
+  size: 'sm',
+  top: false,
+  // TODO : This is temporary
+  theme: {
+    main: {
+      sizes: {
+        paddings: {
+          xs: '5px',
+          sm: '10px',
+          smd: '20px',
+          md: '30px',
+          lg: '40px'
+        }
+      }
+    }
+  }
+};
+Padded.propTypes = {
+  bottom: PropTypes.bool,
+  left: PropTypes.bool,
+  right: PropTypes.bool,
+  size: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  theme: PropTypes.object,
+  top: PropTypes.bool
+};
+export default Padded;

package/build/esm/components/Paging/index.js

@@ -0,0 +1,57 @@
+/**
+ *
+ * Paging
+ *
+ */
+
+import React from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { Paging as StyledPaging } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+/* eslint-disable react/no-array-index-key */
+
+function Paging(_ref) {
+  var count = _ref.count,
+    page = _ref.page,
+    onChange = _ref.onChange,
+    range = _ref.range;
+  var pagesCount = Math.ceil(count / range);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPaging, null), /*#__PURE__*/React.createElement(Pagination, {
+    "aria-label": "Page navigation"
+  }, /*#__PURE__*/React.createElement(PaginationItem, null, /*#__PURE__*/React.createElement(PaginationLink, {
+    onClick: onChange,
+    value: 0
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "left"
+  }))), Array(pagesCount).fill(1).map(function (item, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement(PaginationItem, {
+      key: index,
+      onClick: onChange,
+      className: page === index * range ? 'selected' : ''
+    }, /*#__PURE__*/React.createElement(PaginationLink, {
+      onClick: onChange,
+      value: index * range
+    }, index + 1)));
+  }), /*#__PURE__*/React.createElement(PaginationItem, null, /*#__PURE__*/React.createElement(PaginationLink, {
+    onClick: onChange,
+    value: (pagesCount - 1) * range
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "right"
+  })))));
+}
+Paging.defaultProps = {
+  count: 0,
+  onChange: function onChange() {},
+  page: 0,
+  range: 15
+};
+Paging.propTypes = {
+  count: PropTypes.number,
+  onChange: PropTypes.func,
+  page: PropTypes.number,
+  range: PropTypes.number
+};
+export default Paging;

package/build/esm/components/Picker/PickerButton.js

@@ -0,0 +1,61 @@
+var _templateObject;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Text from '../Text';
+import colors from '../../theme/colors';
+var PickerButton = styled(function (props) {
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "button",
+    fontWeight: "semiBold",
+    color: props.isActive ? 'mediumBlue' : 'greyDark'
+  }, props));
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 10px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  &:active,\n  &:focus {\n    outline: 0;\n  }\n\n  > svg + span,\n  > span + svg {\n    margin-left: 10px;\n  }\n  > svg g {\n    stroke: ", ";\n  }\n\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.main.colors.white;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.main.colors.darkGrey;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.main.sizes.borderRadius;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.main.colors.greyDark;
+}, function (_ref5) {
+  var isActive = _ref5.isActive,
+    theme = _ref5.theme;
+  return isActive ? "\n        background-color: ".concat(theme.main.colors.lightBlue, ";\n        border: 1px solid ").concat(theme.main.colors.darkBlue, ";\n        color: ").concat(theme.main.colors.mediumBlue, ";\n        > svg g {\n          stroke: ").concat(theme.main.colors.mediumBlue, ";\n        }\n      ") : "\n        &:hover {\n          background-color: ".concat(theme.main.colors.lightestGrey, ";\n        }\n      ");
+});
+PickerButton.defaultProps = {
+  isActive: false,
+  type: 'button',
+  // TODO : This is temporary
+  theme: {
+    main: {
+      colors: colors,
+      sizes: {
+        borderRadius: '2px',
+        fonts: {
+          xs: '11px',
+          sm: '12px',
+          md: '13px',
+          lg: '18px'
+        }
+      },
+      fontWeights: {
+        regular: 400,
+        semiBold: 500,
+        bold: 600,
+        black: 900
+      }
+    }
+  }
+};
+PickerButton.propTypes = {
+  isActive: PropTypes.bool,
+  type: PropTypes.string
+};
+export default PickerButton;