@skyscanner/backpack-web 0.0.1

package/bpk-component-calendar/src/BpkCalendarDate.js

@@ -0,0 +1,227 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { cssModules } from 'bpk-react-utils';
+
+import CustomPropTypes from './custom-proptypes';
+import STYLES from './BpkCalendarDate.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export const CELL_TYPES = {
+  default: 'default',
+  negative: 'negative',
+  neutral: 'neutral',
+  positive: 'positive',
+};
+
+export const SELECTION_TYPES = {
+  none: 'none',
+  single: 'single',
+  start: 'start',
+  middle: 'middle',
+  end: 'end',
+  sameDay: 'sameDay',
+};
+
+export const ROW_TYPES = {
+  start: 'start',
+  middle: 'middle',
+  end: 'end',
+  both: 'both',
+};
+
+const navigatedByMonthNudger = () =>
+  document.activeElement.id &&
+  document.activeElement.id.indexOf('month_nudger') !== -1;
+
+class BpkCalendarDate extends PureComponent {
+  componentDidMount() {
+    if (!this.props.preventKeyboardFocus && this.props.isFocused) {
+      // If we got here by clicking the nudger, don't focus this date
+      if (!navigatedByMonthNudger()) {
+        // Giving focus after instantiation
+        this.button.focus();
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      !this.props.isKeyboardFocusable ||
+      this.props.preventKeyboardFocus ||
+      navigatedByMonthNudger()
+    ) {
+      return;
+    }
+
+    // Giving focus after keyboard navigation
+    if (
+      !prevProps.isFocused &&
+      this.props.isFocused &&
+      this.props.isKeyboardFocusable
+    ) {
+      this.button.focus();
+      return;
+    }
+
+    // Giving focus after changing months with transition
+    if (
+      this.props.isFocused &&
+      !prevProps.isKeyboardFocusable &&
+      this.props.isKeyboardFocusable
+    ) {
+      this.button.focus();
+    }
+  }
+
+  getButtonRef = (button) => {
+    this.button = button;
+  };
+
+  render() {
+    const {
+      cellType,
+      className,
+      date,
+      isBlocked,
+      isFocused,
+      isKeyboardFocusable,
+      isOutside,
+      isSelected,
+      isToday,
+      modifiers,
+      onClick,
+      onDateKeyDown,
+      selectionType,
+      style,
+      ...buttonProps
+    } = this.props;
+
+    const classNames = [getClassName('bpk-calendar-date')];
+
+    Object.keys(modifiers).forEach((modifier) => {
+      if (modifiers[modifier](this.props)) {
+        classNames.push(
+          getClassName(`bpk-calendar-date--modifier-${modifier}`),
+        );
+      }
+    });
+
+    if (cellType) {
+      classNames.push(getClassName(`bpk-calendar-date--colored`));
+      classNames.push(getClassName(`bpk-calendar-date--colored-${cellType}`));
+    }
+
+    if (isFocused) {
+      classNames.push(getClassName('bpk-calendar-date--focused'));
+    }
+    if (isSelected) {
+      classNames.push(getClassName('bpk-calendar-date--selected'));
+    }
+    if (isBlocked) {
+      classNames.push(getClassName('bpk-calendar-date--blocked'));
+    }
+    if (isOutside) {
+      classNames.push(getClassName('bpk-calendar-date--outside'));
+    }
+    if (isToday) {
+      classNames.push(getClassName('bpk-calendar-date--today'));
+    }
+
+    if (selectionType !== SELECTION_TYPES.none) {
+      classNames.push(getClassName(`bpk-calendar-date--${selectionType}`));
+    }
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    delete buttonProps.preventKeyboardFocus;
+
+    return (
+      <button
+        type="button"
+        style={style}
+        className={classNames.join(' ')}
+        aria-hidden={isBlocked}
+        aria-label={date.getDate()}
+        disabled={isBlocked}
+        tabIndex={isKeyboardFocusable && isFocused ? '0' : '-1'}
+        onClick={() => {
+          if (onClick) {
+            onClick(date);
+          }
+        }}
+        onKeyDown={onDateKeyDown}
+        aria-pressed={isSelected}
+        ref={this.getButtonRef}
+        {...buttonProps}
+      >
+        <span aria-hidden="true">{date.getDate()}</span>
+      </button>
+    );
+  }
+}
+
+export const propTypes = {
+  // Required
+  date: PropTypes.instanceOf(Date).isRequired,
+  // Optional
+  cellType: PropTypes.oneOf(Object.keys(CELL_TYPES)),
+  className: PropTypes.string,
+  isBlocked: PropTypes.bool,
+  isFocused: PropTypes.bool,
+  isKeyboardFocusable: PropTypes.bool,
+  isOutside: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  isToday: PropTypes.bool,
+  modifiers: CustomPropTypes.DateModifiers,
+  onClick: PropTypes.func,
+  onDateKeyDown: PropTypes.func,
+  preventKeyboardFocus: PropTypes.bool,
+  selectionType: PropTypes.oneOf(Object.keys(SELECTION_TYPES)),
+  style: PropTypes.object,
+};
+
+BpkCalendarDate.propTypes = { ...propTypes };
+
+export const defaultProps = {
+  className: null,
+  cellType: null,
+  isBlocked: false,
+  isFocused: false,
+  isKeyboardFocusable: true,
+  isOutside: false,
+  isSelected: false,
+  isToday: false,
+  modifiers: {},
+  onClick: null,
+  onDateKeyDown: null,
+  preventKeyboardFocus: true,
+  selectionType: SELECTION_TYPES.none,
+  style: null,
+};
+
+BpkCalendarDate.defaultProps = {
+  ...defaultProps,
+};
+
+export default BpkCalendarDate;

package/bpk-component-calendar/src/BpkCalendarDate.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-date{width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:1.125rem;background-color:transparent;font-size:1rem;text-align:center;cursor:pointer;appearance:none;box-sizing:border-box;color:#111236;color:var(--bpk-calendar-date-text-color, #111236)}.bpk-no-touch-support .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}:global(.bpk-no-touch-support) .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}.bpk-calendar-date--colored{color:#fff}.bpk-calendar-date--colored-default{background-color:#68697f}.bpk-calendar-date--colored-positive{background-color:#00a698}.bpk-calendar-date--colored-neutral{background-color:#ffb54d}.bpk-calendar-date--colored-negative{background-color:#d1435b}.bpk-calendar-date:not(.bpk-calendar-date--selected):active{background-color:#dddde5;color:#111236;color:var(--bpk-calendar-date-text-active-color, #111236)}.bpk-calendar-date--outside{background-color:transparent;color:#b2b2bf}.bpk-calendar-date--today{font-weight:bold}.bpk-calendar-date--selected{font-weight:bold;cursor:default;background-color:#084eb2;background-color:var(--bpk-calendar-date-selected-background-color, #084eb2);color:#fff;color:var(--bpk-calendar-date-text-selected-color, #fff)}.bpk-calendar-date--middle{background-color:#cddff8;color:#111236}.bpk-calendar-date--single{background-color:#0770e3}.bpk-calendar-date--start{background-color:#0770e3}.bpk-calendar-date--end{background-color:#0770e3}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected):not(.bpk-calendar-date--colored){box-shadow:0 0 0 2px #0770e3 inset;box-shadow:0 0 0 2px var(--bpk-calendar-date-focused-border-color, #0770e3) inset;color:#0770e3;color:var(--bpk-calendar-date-text-focus-color, #0770e3)}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected).bpk-calendar-date--colored{border:0.125rem solid #0770e3;box-shadow:0 0 0 1px #fff inset}.bpk-calendar-date:disabled,.bpk-calendar-date--blocked{background-color:transparent;color:#dddde5;cursor:not-allowed}.bpk-no-touch-support .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}:global(.bpk-no-touch-support) .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}.bpk-calendar-date:disabled:active,.bpk-calendar-date--blocked:active{color:#dddde5}

package/bpk-component-calendar/src/BpkCalendarDate.module.scss

@@ -0,0 +1,164 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~bpk-mixins/index';
+
+$bpk-spacing-v2: true;
+
+.bpk-calendar-date {
+  width: $bpk-calendar-day-size;
+  height: $bpk-calendar-day-size;
+  padding: 0;
+  border: none;
+  border-radius: $bpk-border-radius-pill;
+  background-color: transparent;
+  font-size: $bpk-font-size-base;
+  text-align: center;
+  cursor: pointer;
+  appearance: none;
+  box-sizing: border-box;
+
+  @include bpk-themeable-property(
+    color,
+    --bpk-calendar-date-text-color,
+    $bpk-calendar-day-color
+  );
+
+  @include bpk-hover {
+    &:not(.bpk-calendar-date--selected) {
+      background-color: $bpk-calendar-day-hover-background-color;
+
+      @include bpk-themeable-property(
+        color,
+        --bpk-calendar-date-text-hover-color,
+        $bpk-calendar-day-hover-color
+      );
+    }
+  }
+
+  &--colored {
+    color: $bpk-color-white;
+
+    &-default {
+      background-color: $bpk-color-sky-gray-tint-02;
+    }
+
+    &-positive {
+      background-color: $bpk-color-monteverde;
+    }
+
+    &-neutral {
+      background-color: $bpk-color-erfoud;
+    }
+
+    &-negative {
+      background-color: $bpk-color-panjin;
+    }
+  }
+
+  &:not(.bpk-calendar-date--selected):active {
+    background-color: $bpk-calendar-day-active-background-color;
+
+    @include bpk-themeable-property(
+      color,
+      --bpk-calendar-date-text-active-color,
+      $bpk-calendar-day-active-color
+    );
+  }
+
+  &--outside {
+    background-color: transparent;
+    color: $bpk-calendar-day-outside-color;
+  }
+
+  &--today {
+    font-weight: bold;
+  }
+
+  &--selected {
+    font-weight: bold;
+    cursor: default;
+
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-calendar-date-selected-background-color,
+      $bpk-calendar-day-selected-background-color
+    );
+    @include bpk-themeable-property(
+      color,
+      --bpk-calendar-date-text-selected-color,
+      $bpk-calendar-day-selected-color
+    );
+  }
+
+  &--middle {
+    background-color: $bpk-color-sky-blue-tint-03;
+    color: $bpk-color-sky-gray;
+  }
+
+  &--single {
+    background-color: $bpk-color-sky-blue;
+  }
+
+  &--start {
+    background-color: $bpk-color-sky-blue;
+  }
+
+  &--end {
+    background-color: $bpk-color-sky-blue;
+  }
+
+  &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
+    &:not(.bpk-calendar-date--colored) {
+      box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
+      box-shadow: 0 0 0 2px
+        var(
+          --bpk-calendar-date-focused-border-color,
+          $bpk-calendar-day-focused-border-color
+        )
+        inset;
+
+      @include bpk-themeable-property(
+        color,
+        --bpk-calendar-date-text-focus-color,
+        $bpk-calendar-day-focused-color
+      );
+    }
+
+    &.bpk-calendar-date--colored {
+      border: (bpk-spacing-sm() / 2) solid
+        $bpk-calendar-day-focused-border-color;
+      box-shadow: 0 0 0 1px $bpk-color-white inset;
+    }
+  }
+
+  &:disabled,
+  &--blocked {
+    background-color: transparent;
+    color: $bpk-calendar-day-disabled-color;
+    cursor: not-allowed;
+
+    @include bpk-hover {
+      color: $bpk-calendar-day-disabled-color;
+    }
+
+    &:active {
+      color: $bpk-calendar-day-disabled-color;
+    }
+  }
+}

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -0,0 +1,221 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { cssModules, deprecated, isDeviceIos } from 'bpk-react-utils';
+
+import BpkCalendarGridHeader from './BpkCalendarGridHeader';
+import Week from './Week';
+import {
+  formatIsoDate,
+  getCalendarMonthWeeks,
+  isSameMonth,
+  orderDaysOfWeek,
+} from './date-utils';
+import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
+import STYLES from './BpkCalendarGrid.module.scss';
+import { addCalendarGridTransition } from './BpkCalendarGridTransition';
+// This should be imported after `./BpkCalendarGrid.module.scss`.
+// Because of how css specificity works the class `bpk-calendar-grid-transition__grid` needs to be defined
+// after `bpk-calendar-grid` (defined by BpkCalendarGrid.module.scss) so it can override width and display of the calendar
+
+// This is because the calendar with transiction is expected to have a fixed width and whenever `bpk-calendar-grid-transition__grid`
+// class is applyed it should override the calendar style.
+
+// NOTE that ./Week is also importing ./BpkCalendarGrid.module.scss so adding this after `./Week` would also do the job but
+// for clarity we should leave it here.
+
+const getClassName = cssModules(STYLES);
+
+/*
+  BpkCalendarGrid - the grid representing a whole month
+*/
+class BpkCalendarGrid extends Component {
+  constructor(props) {
+    super(props);
+
+    // We cache expensive calculations (and identities) in state
+    this.state = {
+      calendarMonthWeeks: getCalendarMonthWeeks(
+        props.month,
+        props.weekStartsOn,
+      ),
+      daysOfWeek: orderDaysOfWeek(props.daysOfWeek, props.weekStartsOn),
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // We cache expensive calculations (and identities) in state
+    if (
+      nextProps.daysOfWeek !== this.props.daysOfWeek ||
+      !isSameMonth(nextProps.month, this.props.month) ||
+      nextProps.weekStartsOn !== this.props.weekStartsOn
+    ) {
+      this.setState({
+        calendarMonthWeeks: getCalendarMonthWeeks(
+          nextProps.month,
+          nextProps.weekStartsOn,
+        ),
+        daysOfWeek: orderDaysOfWeek(
+          nextProps.daysOfWeek,
+          nextProps.weekStartsOn,
+        ),
+      });
+    }
+  }
+
+  render() {
+    const {
+      DateComponent,
+      cellClassName,
+      className,
+      dateModifiers,
+      dateProps,
+      focusedDate,
+      formatDateFull,
+      formatMonth,
+      ignoreOutsideDate,
+      isKeyboardFocusable,
+      markOutsideDays,
+      markToday,
+      maxDate,
+      minDate,
+      month,
+      onDateClick,
+      onDateKeyDown,
+      preventKeyboardFocus,
+      selectionConfiguration,
+      selectionEnd,
+      selectionStart,
+      weekStartsOn,
+    } = this.props;
+
+    const { calendarMonthWeeks, daysOfWeek } = this.state;
+
+    const classNames = getClassName('bpk-calendar-grid', className);
+
+    return (
+      <table className={classNames} aria-hidden={!isKeyboardFocusable}>
+        <caption className={getClassName('bpk-calendar-grid__caption')} hidden>
+          {formatMonth(month)}
+        </caption>
+        <BpkCalendarGridHeader
+          isTableHead
+          daysOfWeek={daysOfWeek}
+          weekStartsOn={weekStartsOn}
+        />
+        <tbody>
+          {calendarMonthWeeks.map((dates) => (
+            <Week
+              key={formatIsoDate(dates[0])}
+              month={month}
+              dates={dates}
+              onDateClick={onDateClick}
+              onDateKeyDown={onDateKeyDown}
+              formatDateFull={formatDateFull}
+              DateComponent={DateComponent}
+              dateModifiers={dateModifiers}
+              preventKeyboardFocus={preventKeyboardFocus}
+              isKeyboardFocusable={isKeyboardFocusable}
+              weekStartsOn={weekStartsOn}
+              markToday={markToday}
+              markOutsideDays={markOutsideDays}
+              selectionConfiguration={selectionConfiguration}
+              selectionEnd={selectionEnd}
+              selectionStart={selectionStart}
+              focusedDate={focusedDate}
+              minDate={minDate}
+              maxDate={maxDate}
+              ignoreOutsideDate={ignoreOutsideDate}
+              dateProps={dateProps}
+              cellClassName={cellClassName}
+            />
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export const propTypes = {
+  // Required
+  DateComponent: PropTypes.elementType.isRequired,
+  daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
+  formatDateFull: PropTypes.func.isRequired,
+  formatMonth: PropTypes.func.isRequired,
+  month: PropTypes.instanceOf(Date).isRequired,
+  weekStartsOn: PropTypes.number.isRequired,
+  // Optional
+  className: PropTypes.string,
+  cellClassName: PropTypes.string,
+  dateModifiers: CustomPropTypes.DateModifiers,
+  focusedDate: PropTypes.instanceOf(Date),
+  isKeyboardFocusable: PropTypes.bool,
+  markOutsideDays: PropTypes.bool,
+  markToday: PropTypes.bool,
+  maxDate: PropTypes.instanceOf(Date),
+  minDate: PropTypes.instanceOf(Date),
+  onDateClick: PropTypes.func,
+  onDateKeyDown: PropTypes.func,
+  preventKeyboardFocus: PropTypes.bool,
+  selectionConfiguration: CustomPropTypes.SelectionConfiguration,
+  selectedDate: deprecated(
+    PropTypes.instanceOf(Date),
+    'Use selectionConfiguration to set selectedDate',
+  ),
+  selectionEnd: PropTypes.instanceOf(Date),
+  selectionStart: PropTypes.instanceOf(Date),
+  showWeekendSeparator: deprecated(
+    PropTypes.bool,
+    'The showWeekendSeparator prop in BpkCalendarGrid is now deprecated as no longer part of the calendar, so is no longer required',
+  ),
+  ignoreOutsideDate: PropTypes.bool,
+  dateProps: PropTypes.object,
+};
+
+BpkCalendarGrid.propTypes = { ...propTypes };
+
+BpkCalendarGrid.defaultProps = {
+  className: null,
+  dateModifiers: {},
+  focusedDate: null,
+  isKeyboardFocusable: true,
+  markOutsideDays: true,
+  markToday: true,
+  maxDate: null,
+  minDate: null,
+  onDateClick: null,
+  onDateKeyDown: null,
+  preventKeyboardFocus: false,
+  selectedDate: null,
+  selectionConfiguration: { type: CALENDAR_SELECTION_TYPE.single, date: null },
+  selectionEnd: null,
+  selectionStart: null,
+  ignoreOutsideDate: false,
+  dateProps: null,
+  cellClassName: null,
+};
+
+// On iOS, having transitions causes accessibility issues, so we disable it (KOA-4467).
+const BpkCalendarGridWithTransition = isDeviceIos()
+  ? BpkCalendarGrid
+  : addCalendarGridTransition(BpkCalendarGrid);
+
+export default BpkCalendarGrid;
+export { BpkCalendarGridWithTransition };

package/bpk-component-calendar/src/BpkCalendarGrid.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{display:table-cell;width:100%;padding:0;text-align:center;vertical-align:middle}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__date--middle{background-color:#cddff8}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__week{display:table;width:100%;padding-top:1.5rem;table-layout:fixed}