@skyscanner/backpack-web 25.4.0-alpha → 25.4.1

package/bpk-component-calendar/src/BpkCalendarContainer.tsx

@@ -1,399 +0,0 @@
-/*
- * 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 type { ComponentType } from 'react';
-import { Component } from 'react';
-
-import { isRTL } from '../../bpk-react-utils';
-
-import { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
-import type { SelectionConfiguration } from './custom-proptypes';
-import BpkCalendarNav from './BpkCalendarNav';
-import { BpkCalendarGridWithTransition } from './BpkCalendarGrid';
-import BpkCalendarGridHeader from './BpkCalendarGridHeader';
-import BpkCalendarDate from './BpkCalendarDate';
-import composeCalendar from './composeCalendar';
-import {
-  addDays,
-  addMonths,
-  dateToBoundaries,
-  isAfter,
-  isSameMonth,
-  isSameDay,
-  lastDayOfMonth,
-  setMonthYear,
-  startOfDay,
-  startOfMonth,
-} from './date-utils';
-
-type Props = {
-  fixedWidth?: boolean;
-  maxDate?: Date;
-  minDate?: Date;
-  onDateSelect?: ((date: Date, newDate?: Date) => void) | null;
-  onMonthChange?:
-    | ((
-        event: UIEvent,
-        { month, source }: { month: Date; source: string },
-      ) => void)
-    | null;
-  selectionConfiguration?: SelectionConfiguration;
-  initiallyFocusedDate?: Date | null;
-  markToday?: boolean;
-  markOutsideDays?: boolean;
-};
-
-type InjectedProps = {
-  onDateClick: ((date: Date) => void) | null;
-  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-  month: Date;
-};
-
-type CalendarProps<P> = Omit<P & Props, keyof InjectedProps> & {
-  [rest: string]: any;
-};
-
-type State = {
-  preventKeyboardFocus: boolean;
-  focusedDate: Date;
-};
-
-/**
- * Updates the current focused date
- * @param {Object} currentProps current input properties
- * @param {Object} nextProps next input properties when component changes
- * @returns {Boolean} if the selected date has changed
- */
-const focusedDateHasChanged = <T extends {}>(
-  currentProps: CalendarProps<T>,
-  nextProps: CalendarProps<T>,
-) => {
-  const currentSelectConfig = currentProps.selectionConfiguration!;
-  const nextSelectConfig = nextProps.selectionConfiguration!;
-
-  const rawNextSelectedDate =
-    nextSelectConfig.type === CALENDAR_SELECTION_TYPE.single
-      ? nextSelectConfig.date
-      : nextSelectConfig.startDate;
-  const rawSelectedDate =
-    currentSelectConfig.type === CALENDAR_SELECTION_TYPE.single
-      ? currentSelectConfig.date
-      : currentSelectConfig.startDate;
-
-  if (!rawSelectedDate && !rawNextSelectedDate) {
-    return false;
-  }
-
-  if (
-    (rawSelectedDate && !rawNextSelectedDate) ||
-    (!rawSelectedDate && rawNextSelectedDate)
-  ) {
-    return true;
-  }
-
-  // @ts-expect-error TS reporting incorrectly as we are already checking above that the dates are not null
-  return !isSameDay(rawNextSelectedDate, rawSelectedDate);
-};
-
-/**
- * Determines the focused date on the calendar
- * @param {Date} rawSelectedDate the raw date provided to the calendar to be selected
- * @param {Date} initiallyFocusedDate inital date that was selected
- * @param {Date} minDate min available date to be selectable in the calendar
- * @param {Date} maxDate max available date to be selectable in the calendar
- * @returns {Date} which date to be focused on the calendar when it loads
- */
-const determineFocusedDate = (
-  rawSelectedDate: Date | null,
-  initiallyFocusedDate: Date | null,
-  minDate: Date,
-  maxDate: Date,
-) => {
-  if (rawSelectedDate) {
-    return dateToBoundaries(rawSelectedDate, minDate, maxDate);
-  }
-
-  if (initiallyFocusedDate) {
-    return dateToBoundaries(initiallyFocusedDate, minDate, maxDate);
-  }
-
-  return minDate;
-};
-
-/**
- * Function that based on the configuration will return a single date or start and end date.
- * @param {Object} selectionConfig - The configuration of calendar to be used
- * @returns {Array} An array or single of multiple dates
- */
-const getRawSelectedDate = (selectionConfig: SelectionConfiguration) => {
-  let rawDate = [];
-
-  switch (selectionConfig.type) {
-    case CALENDAR_SELECTION_TYPE.single:
-      rawDate = [selectionConfig.date];
-      break;
-    case CALENDAR_SELECTION_TYPE.range:
-      rawDate = [selectionConfig.startDate, selectionConfig.endDate];
-      break;
-    default:
-      rawDate = [null];
-      break;
-  }
-
-  return rawDate;
-};
-
-const withCalendarState = <P extends object>(Calendar: ComponentType<P>) => {
-  class BpkCalendarContainer extends Component<CalendarProps<P>, State> {
-    static defaultProps = {
-      fixedWidth: true,
-      maxDate: addMonths(new Date(), 12),
-      minDate: new Date(),
-      onDateSelect: null,
-      onMonthChange: null,
-      selectionConfiguration: {
-        type: CALENDAR_SELECTION_TYPE.single,
-        date: null,
-      },
-      initiallyFocusedDate: null,
-      markToday: true,
-      markOutsideDays: true,
-    };
-
-    constructor(props: CalendarProps<P>) {
-      super(props);
-
-      const minDate = startOfDay(this.props.minDate!);
-      const maxDate = startOfDay(this.props.maxDate!);
-
-      const rawSelectedDate = getRawSelectedDate(
-        this.props.selectionConfiguration!,
-      );
-
-      const { initiallyFocusedDate } = this.props;
-
-      this.state = {
-        preventKeyboardFocus: true,
-        focusedDate: determineFocusedDate(
-          rawSelectedDate[0],
-          initiallyFocusedDate!,
-          minDate,
-          maxDate,
-        ),
-      };
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps: CalendarProps<P>) {
-      const rawNextSelectedDate = getRawSelectedDate(
-        nextProps.selectionConfiguration!,
-      );
-
-      const minDate = startOfDay(nextProps.minDate!);
-      const maxDate = startOfDay(nextProps.maxDate!);
-      if (focusedDateHasChanged(this.props, nextProps)) {
-        this.setState({
-          focusedDate: dateToBoundaries(
-            rawNextSelectedDate[0],
-            minDate,
-            maxDate,
-          ),
-        });
-      }
-    }
-
-    handleDateFocus = (
-      event: UIEvent,
-      { date, source }: { date: Date; source: string },
-    ) => {
-      const { onMonthChange } = this.props;
-      const focusedDate = dateToBoundaries(
-        date,
-        startOfDay(this.props.minDate!),
-        startOfDay(this.props.maxDate!),
-      );
-      const didMonthChange = !isSameMonth(this.state.focusedDate, focusedDate);
-
-      this.setState(
-        {
-          preventKeyboardFocus: false,
-          focusedDate,
-        },
-        () => {
-          if (onMonthChange && didMonthChange) {
-            onMonthChange(event, { month: startOfMonth(focusedDate), source });
-          }
-        },
-      );
-    };
-
-    handleDateSelect = (date: Date) => {
-      const { onDateSelect, selectionConfiguration } = this.props;
-      const keyboardFocusState = { preventKeyboardFocus: false };
-
-      if (onDateSelect) {
-        const newDate = dateToBoundaries(
-          date,
-          startOfDay(this.props.minDate!),
-          startOfDay(this.props.maxDate!),
-        );
-
-        if (
-          selectionConfiguration &&
-          selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range &&
-          selectionConfiguration.startDate &&
-          !selectionConfiguration.endDate &&
-          (isAfter(newDate, selectionConfiguration.startDate) ||
-            isSameDay(newDate, selectionConfiguration.startDate))
-        ) {
-          onDateSelect(selectionConfiguration.startDate, newDate);
-        } else {
-          onDateSelect(newDate);
-        }
-      } else {
-        this.setState(keyboardFocusState);
-      }
-    };
-
-    handleMonthChange = (
-      event: UIEvent,
-      { month, source }: { month: Date; source: string },
-    ) => {
-      this.handleDateFocus(event, {
-        date: setMonthYear(
-          this.state.focusedDate,
-          month.getMonth(),
-          month.getFullYear(),
-        ),
-        source,
-      });
-    };
-
-    handleDateKeyDown = (event: KeyboardEvent) => {
-      const reverse = isRTL() ? -1 : 1;
-      const { focusedDate } = this.state;
-      const source = 'GRID';
-      let preventDefault = true;
-
-      switch (event.key) {
-        case 'ArrowRight':
-          this.handleDateFocus(event, {
-            date: addDays(focusedDate, reverse * 1),
-            source,
-          });
-          break;
-        case 'ArrowLeft':
-          this.handleDateFocus(event, {
-            date: addDays(focusedDate, reverse * -1),
-            source,
-          });
-          break;
-        case 'ArrowUp':
-          this.handleDateFocus(event, {
-            date: addDays(focusedDate, -7),
-            source,
-          });
-          break;
-        case 'ArrowDown':
-          this.handleDateFocus(event, {
-            date: addDays(focusedDate, 7),
-            source,
-          });
-          break;
-        case 'PageUp':
-          this.handleDateFocus(event, {
-            date: addMonths(focusedDate, -1),
-            source,
-          });
-          break;
-        case 'PageDown':
-          this.handleDateFocus(event, {
-            date: addMonths(focusedDate, 1),
-            source,
-          });
-          break;
-        case 'Home':
-          this.handleDateFocus(event, {
-            date: startOfMonth(focusedDate),
-            source,
-          });
-          break;
-        case 'End':
-          this.handleDateFocus(event, {
-            date: lastDayOfMonth(focusedDate),
-            source,
-          });
-          break;
-        default:
-          preventDefault = false;
-          break;
-      }
-
-      if (preventDefault) {
-        event.preventDefault();
-      }
-    };
-
-    render() {
-      const {
-        maxDate,
-        minDate,
-        onDateSelect,
-        onMonthChange,
-        selectionConfiguration,
-        ...calendarProps
-      } = this.props;
-
-      const sanitisedMinDate = startOfDay(minDate!);
-      const sanitisedMaxDate = startOfDay(maxDate!);
-
-      const sanitisedFocusedDate = dateToBoundaries(
-        this.state.focusedDate,
-        sanitisedMinDate,
-        sanitisedMaxDate,
-      );
-      const month = startOfMonth(sanitisedFocusedDate);
-
-      return (
-        <Calendar
-          onMonthChange={this.handleMonthChange}
-          onDateClick={this.handleDateSelect}
-          month={month}
-          onDateKeyDown={this.handleDateKeyDown}
-          preventKeyboardFocus={this.state.preventKeyboardFocus}
-          focusedDate={sanitisedFocusedDate}
-          {...(calendarProps as P)}
-          minDate={sanitisedMinDate}
-          maxDate={sanitisedMaxDate}
-          selectionConfiguration={selectionConfiguration}
-        />
-      );
-    }
-  }
-
-  return BpkCalendarContainer;
-};
-
-export default withCalendarState(
-  composeCalendar(
-    BpkCalendarNav,
-    BpkCalendarGridHeader,
-    BpkCalendarGridWithTransition,
-    BpkCalendarDate,
-  ),
-);
-export { withCalendarState };

package/bpk-component-calendar/src/BpkCalendarDate-test.tsx

@@ -1,82 +0,0 @@
-/*
- * 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 { render } from '@testing-library/react';
-
-import BpkCalendarDate from './BpkCalendarDate';
-
-describe('BpkCalendarDate', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(
-      <BpkCalendarDate date={new Date(2010, 1, 15)} />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render a disabled button', () => {
-    const { asFragment } = render(
-      <BpkCalendarDate date={new Date(2010, 1, 15)} isBlocked />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render a blocked button as disabled with aria-hidden applied', () => {
-    const { asFragment } = render(
-      <BpkCalendarDate date={new Date(2010, 1, 15)} isBlocked />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render with a click and keyDown handler', () => {
-    const { asFragment } = render(
-      <BpkCalendarDate
-        date={new Date(2010, 1, 15)}
-        onClick={() => {}}
-        onDateKeyDown={() => {}}
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render a focused button with tabIndex', () => {
-    const { asFragment } = render(
-      <BpkCalendarDate date={new Date(2010, 1, 15)} isFocused />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should pass props through to button', () => {
-    const { asFragment } = render(
-      <BpkCalendarDate
-        date={new Date(2010, 1, 15)}
-        aria-label="Nothing happened on this day in 2010"
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should set a custom class', () => {
-    const { asFragment } = render(
-      <BpkCalendarDate
-        date={new Date(2010, 1, 15)}
-        className="userlandClassName"
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,122 +0,0 @@
-/*
- * 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.scss';
-
-$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-lg;
-  background-color: transparent;
-  text-align: center;
-  cursor: pointer;
-  appearance: none;
-  box-sizing: border-box;
-
-  @include bpk-label-1;
-  @include bpk-themeable-property(
-    color,
-    --bpk-calendar-date-text-color,
-    $bpk-text-primary-day
-  );
-
-  @include bpk-hover {
-    &:not(.bpk-calendar-date--selected) {
-      background-color: $bpk-canvas-contrast-day;
-
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-date-text-hover-color,
-        $bpk-text-primary-day
-      );
-    }
-  }
-
-  &:not(.bpk-calendar-date--selected):active {
-    background-color: $bpk-canvas-contrast-day;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-calendar-date-text-active-color,
-      $bpk-text-primary-day
-    );
-  }
-
-  &--outside {
-    background-color: transparent;
-    color: $bpk-text-disabled-day;
-  }
-
-  &--selected {
-    cursor: default;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-calendar-date-text-selected-color,
-      $bpk-text-primary-inverse-day
-    );
-  }
-
-  &--middle {
-    background-color: $bpk-surface-highlight-day;
-    color: $bpk-text-primary-day;
-  }
-
-  &--single {
-    background-color: $bpk-core-accent-day;
-  }
-
-  &--start {
-    background-color: $bpk-core-accent-day;
-  }
-
-  &--end {
-    background-color: $bpk-core-accent-day;
-  }
-
-  &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
-    box-shadow: 0 0 0 2px $bpk-core-accent-day inset;
-    box-shadow: 0 0 0 2px
-      var(--bpk-calendar-date-focused-border-color, $bpk-core-accent-day) inset;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-calendar-date-text-focus-color,
-      $bpk-core-accent-day
-    );
-  }
-
-  &:disabled,
-  &--blocked {
-    background-color: transparent;
-    color: $bpk-text-disabled-day;
-    cursor: not-allowed;
-
-    @include bpk-hover {
-      color: $bpk-text-disabled-day;
-    }
-
-    &:active {
-      color: $bpk-text-disabled-day;
-    }
-  }
-}