bright-components 9.31.0 → 10.0.0

package/dist/components/DayPickerPanel/Header/index.js

@@ -21,103 +21,58 @@ var _vars = _interopRequireDefault(require("../../../constants/vars"));
 
 var _breakpoints = _interopRequireDefault(require("../../../constants/breakpoints"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n\tfont-weight: ", ";\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-wrap: wrap;\n\tmargin: 0 ", ";\n\ttext-align: center;\n\tmin-width: ", ";\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcursor: pointer;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tjustify-content: flex-end;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex: 0 1 40px;\n\tmax-width: 40px;\n\talign-items: center;\n\tjustify-content: flex-start;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding: ", " ", " ", ";\n\tmargin: 0 40px;\n\tdisplay: flex;\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\n\t@media (min-width: ", ") {\n\t\tpadding: ", " ", " ", ";\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var HeaderWrapper = _styledComponents.default.div(_templateObject(), _spacing.default.s3, _spacing.default.s2, _spacing.default.s2, _breakpoints.default.tablet, _spacing.default.s2, _spacing.default.s2, _spacing.default.s1);
-
+const HeaderWrapper = _styledComponents.default.div`
+	padding: ${_spacing.default.s3} ${_spacing.default.s2} ${_spacing.default.s2};
+	margin: 0 40px;
+	display: flex;
+	align-items: center;
+	display: flex;
+	justify-content: center;
+
+	@media (min-width: ${_breakpoints.default.tablet}) {
+		padding: ${_spacing.default.s2} ${_spacing.default.s2} ${_spacing.default.s1};
+	}
+`;
 HeaderWrapper.displayName = 'HeaderWrapper';
-
-var ChevronLeft = _styledComponents.default.div(_templateObject2());
-
+const ChevronLeft = _styledComponents.default.div`
+	display: flex;
+	flex: 0 1 40px;
+	max-width: 40px;
+	align-items: center;
+	justify-content: flex-start;
+`;
 ChevronLeft.displayName = 'ChevronLeft';
-var ChevronRight = (0, _styledComponents.default)(ChevronLeft)(_templateObject3());
+const ChevronRight = (0, _styledComponents.default)(ChevronLeft)`
+	justify-content: flex-end;
+`;
 ChevronRight.displayName = 'ChevronRight';
-var cursor = (0, _styledComponents.css)(_templateObject4());
-var ChevronLeftNav = (0, _styledComponents.default)(_ChevronLeft.default)(_templateObject5(), cursor);
+const cursor = (0, _styledComponents.css)`
+	cursor: pointer;
+`;
+const ChevronLeftNav = (0, _styledComponents.default)(_ChevronLeft.default)`
+	${cursor};
+`;
 ChevronLeftNav.displayName = 'ChevronLeftNav';
-var ChevronRightNav = (0, _styledComponents.default)(_ChevronRight.default)(_templateObject6(), cursor);
+const ChevronRightNav = (0, _styledComponents.default)(_ChevronRight.default)`
+	${cursor};
+`;
 ChevronRightNav.displayName = 'ChevronRightNav';
-
-var TextContent = _styledComponents.default.span(_templateObject7(), _vars.default.fontWeight, _spacing.default.s2, function (props) {
-  return props.isDateSelect ? '254px' : '130px';
-});
-
+const TextContent = _styledComponents.default.span`
+	font-weight: ${_vars.default.fontWeight};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	margin: 0 ${_spacing.default.s2};
+	text-align: center;
+	min-width: ${props => props.isDateSelect ? '254px' : '130px'};
+`;
 TextContent.displayName = 'TextContent';
 TextContent.propTypes = {
   isDateSelect: _propTypes.bool
@@ -126,14 +81,16 @@ TextContent.defaultProps = {
   isDateSelect: false
 };
 
-var Header = function Header(_ref) {
-  var children = _ref.children,
-      showNext = _ref.showNext,
-      onNext = _ref.onNext,
-      showPrevious = _ref.showPrevious,
-      onPrevious = _ref.onPrevious,
-      onTextContent = _ref.onTextContent,
-      isDateSelect = _ref.isDateSelect;
+const Header = _ref => {
+  let {
+    children,
+    showNext,
+    onNext,
+    showPrevious,
+    onPrevious,
+    onTextContent,
+    isDateSelect
+  } = _ref;
   return _react.default.createElement(HeaderWrapper, null, _react.default.createElement(ChevronLeft, null, showPrevious && _react.default.createElement(ChevronLeftNav, {
     onClick: onPrevious,
     size: 14,

package/dist/components/DayPickerPanel/HeaderDayPickerPanel/dayPickerCSS.js

@@ -15,20 +15,169 @@ var _breakpoints = _interopRequireDefault(require("../../../constants/breakpoint
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\t.DayPicker {\n\t\tflex-grow: 1;\n\t\tjustify-content: flex-start;\n\n\t\t.DayPicker-wrapper {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&,\n\t\t.DayPicker-Month {\n\t\t\twidth: 100%;\n\t\t\tbackground: white;\n\t\t}\n\n\t\t.DayPicker-Months {\n\t\t\tmin-height: 225px;\n\t\t\tmargin: 0 ", ";\n\n\t\t\t.DayPicker-Month {\n\t\t\t\tmargin-top: 0px;\n\t\t\t\tmargin-left: 0px;\n\t\t\t\tmargin-right: 0px;\n\t\t\t\tborder-spacing: 0 ", ";\n\t\t\t\tborder-collapse: separate;\n\t\t\t\ttable-layout: fixed;\n\n\t\t\t\t.DayPicker-Caption {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t.DayPicker-Weekdays {\n\t\t\t\t\t.DayPicker-WeekdaysRow {\n\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\tfont-family: ", ";\n\t\t\t\t\t\tpadding: 0 ", ";\n\t\t\t\t\t\t& .DayPicker-Weekday {\n\t\t\t\t\t\t\tcolor: black;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.DayPicker-Body {\n\t\t\t\t\tpadding: ", ";\n\n\t\t\t\t\t.DayPicker-Week {\n\t\t\t\t\t\tpadding-bottom: ", ";\n\n\t\t\t\t\t\t.DayPicker-Day {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\t\tbackground-color: transparent !important;\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tbackground-color: inherit;\n\t\t\t\t\t\t\t\t&:not(.DayPicker-Day--selected) {\n\t\t\t\t\t\t\t\t\tborder-radius: 50px !important;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t.DayPicker-Day-Circle {\n\t\t\t\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t\t\t\t\tbackground-color: ", " !important;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--today {\n\t\t\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--selected {\n\t\t\t\t\t\t\t\t&:not(.DayPicker-Day--from):not(.DayPicker-Day--to) {\n\t\t\t\t\t\t\t\t\tbackground-color: ", " !important;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--startOfWeek.DayPicker-Day--selected,\n\t\t\t\t\t\t\t&--from {\n\t\t\t\t\t\t\t\tborder-top-left-radius: 50px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 50px !important;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--endOfWeek.DayPicker-Day--selected:not(.DayPicker-Day--toNotSelected),\n\t\t\t\t\t\t\t&--to {\n\t\t\t\t\t\t\t\tborder-top-right-radius: 50px !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 50px !important;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--toNotSelected,\n\t\t\t\t\t\t\t&--toNotSelected.DayPicker-Day--selected {\n\t\t\t\t\t\t\t\tborder-top-right-radius: 30px !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 30px !important;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--from,\n\t\t\t\t\t\t\t&--to {\n\t\t\t\t\t\t\t\t.DayPicker-Day-Circle {\n\t\t\t\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--from:not(.DayPicker-Day--to) {\n\t\t\t\t\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t\t\ttransparent 50%,\n\t\t\t\t\t\t\t\t\t", " 50%\n\t\t\t\t\t\t\t\t) !important;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--to:not(.DayPicker-Day--from) {\n\t\t\t\t\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t\t\t", " 50%,\n\t\t\t\t\t\t\t\t\ttransparent 50%\n\t\t\t\t\t\t\t\t) !important;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--disabled {\n\t\t\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t\t\t\tcursor: not-allowed;\n\t\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\t\tbackground-color: transparent !important;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&--outside:not(.DayPicker-Day--disabled) {\n\t\t\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.DayPicker-Day-Date {\n\t\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t\t\t\talign-content: center;\n\n\t\t\t\t\t\t\t\t.DayPicker-Day-Circle {\n\t\t\t\t\t\t\t\t\tborder-radius: 100%;\n\t\t\t\t\t\t\t\t\theight: 2em;\n\t\t\t\t\t\t\t\t\twidth: 2em;\n\t\t\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@media (min-width: ", ") {\n\t\t\t\t\t\t\t\t\t.DayPicker-Day-Circle {\n\t\t\t\t\t\t\t\t\t\theight: 2.5em;\n\t\t\t\t\t\t\t\t\t\twidth: 2.5em;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t.DayPicker-Months {\n\t\t\t\t\t\t\t\t\t\tmargin: 0 ", ";\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"]);
+// classes defined by "react-day-picker" with some modifiers
+// http://react-day-picker.js.org/docs/styling
+var _default = (0, _styledComponents.css)`
+	.DayPicker {
+		flex-grow: 1;
+		justify-content: flex-start;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+		.DayPicker-wrapper {
+			outline: none;
+		}
 
-  return data;
-}
+		&,
+		.DayPicker-Month {
+			width: 100%;
+			background: white;
+		}
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+		.DayPicker-Months {
+			min-height: 225px;
+			margin: 0 ${_spacing.default.s1};
 
-// classes defined by "react-day-picker" with some modifiers
-// http://react-day-picker.js.org/docs/styling
-var _default = (0, _styledComponents.css)(_templateObject(), _spacing.default.s1, _spacing.default.s1, _vars.default.fontStackBold, _spacing.default.s1, _spacing.default.s1, _spacing.default.s1, _colors.default.textColor, _colors.default.white, _colors.default.primaryLight, _colors.default.secondary, _colors.default.primaryLighter, _colors.default.white, _colors.default.primary, _colors.default.primaryLighter, _colors.default.primaryLighter, _colors.default.greyLight, _colors.default.grey, _breakpoints.default.tablet, _spacing.default.s2);
+			.DayPicker-Month {
+				margin-top: 0px;
+				margin-left: 0px;
+				margin-right: 0px;
+				border-spacing: 0 ${_spacing.default.s1};
+				border-collapse: separate;
+				table-layout: fixed;
+
+				.DayPicker-Caption {
+					display: none;
+				}
+
+				.DayPicker-Weekdays {
+					.DayPicker-WeekdaysRow {
+						font-weight: bold;
+						font-family: ${_vars.default.fontStackBold};
+						padding: 0 ${_spacing.default.s1};
+						& .DayPicker-Weekday {
+							color: black;
+						}
+					}
+				}
+
+				.DayPicker-Body {
+					padding: ${_spacing.default.s1};
+
+					.DayPicker-Week {
+						padding-bottom: ${_spacing.default.s1};
+
+						.DayPicker-Day {
+							border-radius: 0 !important;
+							color: ${_colors.default.textColor};
+							padding: 0;
+							background-color: transparent !important;
+
+							&:hover {
+								background-color: inherit;
+								&:not(.DayPicker-Day--selected) {
+									border-radius: 50px !important;
+								}
+								.DayPicker-Day-Circle {
+									color: ${_colors.default.white};
+									background-color: ${_colors.default.primaryLight} !important;
+								}
+							}
+
+							&--today {
+								color: ${_colors.default.secondary};
+							}
+
+							&--selected {
+								&:not(.DayPicker-Day--from):not(.DayPicker-Day--to) {
+									background-color: ${_colors.default.primaryLighter} !important;
+								}
+							}
+
+							&--startOfWeek.DayPicker-Day--selected,
+							&--from {
+								border-top-left-radius: 50px !important;
+								border-bottom-left-radius: 50px !important;
+							}
+
+							&--endOfWeek.DayPicker-Day--selected:not(.DayPicker-Day--toNotSelected),
+							&--to {
+								border-top-right-radius: 50px !important;
+								border-bottom-right-radius: 50px !important;
+							}
+
+							&--toNotSelected,
+							&--toNotSelected.DayPicker-Day--selected {
+								border-top-right-radius: 30px !important;
+								border-bottom-right-radius: 30px !important;
+							}
+
+							&--from,
+							&--to {
+								.DayPicker-Day-Circle {
+									color: ${_colors.default.white};
+									background-color: ${_colors.default.primary};
+								}
+							}
+
+							&--from:not(.DayPicker-Day--to) {
+								background: linear-gradient(
+									to right,
+									transparent 50%,
+									${_colors.default.primaryLighter} 50%
+								) !important;
+							}
+
+							&--to:not(.DayPicker-Day--from) {
+								background: linear-gradient(
+									to right,
+									${_colors.default.primaryLighter} 50%,
+									transparent 50%
+								) !important;
+							}
+
+							&--disabled {
+								color: ${_colors.default.greyLight};
+								cursor: not-allowed;
+								&:hover {
+									background-color: transparent !important;
+								}
+							}
+
+							&--outside:not(.DayPicker-Day--disabled) {
+								color: ${_colors.default.grey};
+								cursor: pointer;
+							}
+
+							.DayPicker-Day-Date {
+								display: flex;
+								justify-content: center;
+								align-content: center;
+
+								.DayPicker-Day-Circle {
+									border-radius: 100%;
+									height: 2em;
+									width: 2em;
+									display: flex;
+									justify-content: center;
+									align-items: center;
+								}
+
+								@media (min-width: ${_breakpoints.default.tablet}) {
+									.DayPicker-Day-Circle {
+										height: 2.5em;
+										width: 2.5em;
+									}
+
+									.DayPicker-Months {
+										margin: 0 ${_spacing.default.s2};
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
 
 exports.default = _default;