@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/DatePicker/CalendarContainer.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactDatesCss = _interopRequireDefault(require("./reactDatesCss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// calendarDayDefaultHeight and calendarDayDefaultWidth
+// refer to circle size when selected, focused, or hovered and is passed  with getResponsiveCircleSize in DatePicker
+
+const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "CalendarContainer",
+  componentId: "components-web__sc-qdc1tg-0"
+})(_ref => {
+  let {
+    daySize,
+    remainingTokens,
+    calendarMonthFontTokens,
+    calendarDayDefaultHeight,
+    calendarDayDefaultWidth,
+    calendarWeekFontTokens,
+    defaultFontTokens
+  } = _ref;
+  return `
+  ${_reactDatesCss.default}
+  > div {
+    z-index: 1000;
+  }
+  .SingleDatePicker,
+  .SingleDatePickerInput {
+    display: block;
+  }
+  .SingleDatePicker_picker {
+    background-color: ${remainingTokens.calendarBackgroundColor};
+    box-shadow: none;
+    border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
+    border-radius: ${remainingTokens.singleDatePickerRadius}px;
+    padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
+    z-index: 1000;
+  }
+  .DateInput {
+    width: 100%;
+  }
+  .SingleDatePickerInput__withBorder {
+    border: 0 !important;
+  }
+  .DateInput_fang {
+    transform: translateY(2px);
+    z-index: 4;
+    left: ${(daySize * 8.5 - 20) / 2}px;
+  }
+  .DateInput_fangShape {
+    fill: ${remainingTokens.calendarBackgroundColor}
+  }
+  .DateInput_fangStroke {
+    stroke: ${remainingTokens.dateInputStrokeColor};
+  }
+  .CalendarMonth_caption {
+    color: ${remainingTokens.calendarMonthCaptionColor};
+    font-family: ${calendarMonthFontTokens.fontFamily};
+    font-size: ${remainingTokens.calendarMonthCaptionFontSize}px;
+    font-weight: ${calendarMonthFontTokens.fontWeight};
+    line-height: ${remainingTokens.calendarMonthCaptionLineHeight};
+    padding-bottom: ${remainingTokens.calendarMonthCaptionPaddingBottom}px;
+  }
+  .DayPicker{
+    background-color: ${remainingTokens.calendarBackgroundColor};
+  }
+  .DayPicker__withBorder {
+    box-shadow: none;
+  }
+  .DayPickerNavigation {  
+    display: flex;
+    justify-content: space-between;
+    align-self: center;
+    top: 23px;
+    padding: 0px ${remainingTokens.dayPickerNavigationButtonPadding}px;
+  }
+  .DayPickerNavigation_button__default:focus,
+  .DayPickerNavigation_button:hover,
+  .DayPickerNavigation_svg__horizontal,
+  .DayPicker_weekHeader {
+    color: ${remainingTokens.dayPickerWeekHeaderColor};
+    font-family: ${calendarWeekFontTokens.fontFamily};
+    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
+    line-height: ${remainingTokens.dayPickerWeekHeaderLineHeight};
+    & li {
+      font-size: ${remainingTokens.dayPickerWeekHeaderSmall}px;
+      max-width: ${daySize}px !important;
+    }
+  }
+  .CalendarMonthGrid {
+    background-color: ${remainingTokens.calendarBackgroundColor};
+  }
+  .CalendarMonth {
+    background-color: ${remainingTokens.calendarBackgroundColor};
+  }
+  .CalendarDay__default {
+    padding: 0px;
+    position: relative;
+    background: ${remainingTokens.calendarDayDefaultBackgroundColor};
+    background-clip: padding-box;
+    border: ${remainingTokens.calendarDayDefaultBorder}px solid ${remainingTokens.calendarDayDefaultBorderColor};
+    vertical-align: middle;
+    font-family: ${defaultFontTokens.fontFamily};
+    font-weight: ${defaultFontTokens.fontWeight}
+    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
+    font-size: ${remainingTokens.calendarDayDefaultFontSize}px;
+    line-height: ${daySize - 3}px !important;
+    color: ${remainingTokens.calendarDayDefaultColor};
+    text-decoration: none;
+    transition: all 0.3s;
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: ${calendarDayDefaultHeight}px;
+      width: ${calendarDayDefaultWidth}px;
+      border-radius: 50%;
+      background: transparent;
+      transition: all 0.3s;
+      z-index: -1;
+    }
+  }
+  .CalendarDay__default:hover  {
+    background: ${remainingTokens.calendarDaySelectedHoverBackground};
+    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
+    color: ${remainingTokens.calendarDaySelectedHoverColor};
+    text-decoration: none;
+    z-index: 0;
+    &:before {
+      border: 1px solid ${remainingTokens.calendarDaySelectedHoverBeforeBorderColor};
+      background: ${remainingTokens.calendarDaySelectedHoverBeforeBackground};
+    }
+  }
+  .CalendarDay__default:focus{
+    background: ${remainingTokens.calendarDaySelectedHoverBackground};
+    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
+    color: ${remainingTokens.calendarDaySelectedHoverColor};
+    text-decoration: none;
+    z-index: 0;
+    &:before {
+      border: 1px solid ${remainingTokens.calendarDaySelectedHoverBeforeBorderColor};
+      background: ${remainingTokens.calendarDaySelectedFocusBeforeBackground};
+    }
+  }
+  .CalendarDay__selected,
+  .CalendarDay__selected:active,
+  .CalendarDay__default.CalendarDay__selected,
+  .CalendarDay__default.CalendarDay__selected:active{
+    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
+    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
+    color: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
+    text-decoration: none;
+    z-index: 0;
+    &:before {
+      background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
+  }
+}
+
+
+.CalendarDay__selected:hover
+  .CalendarDay__default.CalendarDay__selected:hover{
+  &:before {
+    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
+  }
+}
+
+.CalendarDay
+.CalendarDay__default
+.CalendarDay__selected
+.CalendarDay__blocked_out_of_range{
+  background: ${remainingTokens.calendarDaySelectedDisabledBackground};
+  color: ${remainingTokens.calendarDaySelectedDisabledColor};
+  text-decoration: none;
+  z-index: 0;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: ${calendarDayDefaultHeight}px;
+    border: 1px solid ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    width: ${calendarDayDefaultWidth}px;
+    border-radius: 50%;
+    background: ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    transition: all 0.3s;
+    z-index: -1;
+  }
+}
+
+  .CalendarDay__blocked_out_of_range,
+  .CalendarDay__blocked_out_of_range:active,
+  .CalendarDay__blocked_out_of_range:hover,
+  .CalendarDay__blocked_calendar,
+  .CalendarDay__blocked_calendar:active,
+  .CalendarDay__blocked_calendar:hover {
+    font-weight: 300;
+    background: ${remainingTokens.calendarDayBlockedCalendarHoverBackground};
+    background-clip: padding-box;
+    color: ${remainingTokens.calendarDayBlockedCalendarHoverColor};
+    text-decoration: none;
+    &:before {
+      content: none;
+    }
+  }
+`;
+});
+var _default = exports.default = CalendarContainer;