@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

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

@@ -1,47 +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';
-@import 'variables.scss';
-
-.bpk-calendar-grid-transition {
-  position: relative;
-  overflow: hidden;
-
-  &__dummy {
-    display: inline-block;
-    width: $calendar-width;
-  }
-
-  &__strip {
-    left: 0;
-    display: block;
-    z-index: 0;
-    width: 3 * $calendar-width;
-
-    &--transitioning {
-      z-index: 1;
-      transition: transform $bpk-duration-sm ease-in-out;
-    }
-  }
-
-  &__grid {
-    display: inline-table;
-    width: $calendar-width;
-  }
-}

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

@@ -1,240 +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, ElementType } from 'react';
-import { Component } from 'react';
-
-import { cssModules, isRTL } from '../../bpk-react-utils';
-
-import {
-  getCalendarGridWidth,
-  getTransformStyles,
-  isTransitionEndSupported,
-} from './utils';
-import {
-  addMonths,
-  isSameMonth,
-  formatIsoMonth,
-  differenceInCalendarMonths,
-  dateToBoundaries,
-  startOfDay,
-  setMonthYear,
-  isWithinRange,
-  getMonthRange,
-} from './date-utils';
-import STYLES from './BpkCalendarGridTransition.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const transitionValues = {
-  previous: '0px',
-  current: getCalendarGridWidth(-1),
-  next: getCalendarGridWidth(-2),
-};
-
-const getFocusedDateForMonth = (
-  month: Date,
-  currentFocusedDate: Date | null,
-  minDate: Date,
-  maxDate: Date,
-) =>
-  dateToBoundaries(
-    setMonthYear(currentFocusedDate, month.getMonth(), month.getFullYear()),
-    startOfDay(minDate),
-    startOfDay(maxDate),
-  );
-
-export type Props = InjectedCalendarGridTransitionProps & {
-  className?: string | null;
-  month?: Date;
-  focusedDate?: Date | null;
-  [rest: string]: any;
-};
-
-type InjectedCalendarGridTransitionProps = {
-  TransitionComponent: ElementType;
-};
-
-type State = {
-  isTransitioning: boolean;
-  transitionValue: string;
-  currentMonth?: Date | null;
-  months: Date[];
-};
-
-class BpkCalendarGridTransition extends Component<Props, State> {
-  isTransitionEndSupported: boolean;
-
-  static defaultProps = {
-    className: null,
-    month: new Date(),
-    focusedDate: null,
-  };
-
-  constructor(props: Props) {
-    super(props);
-
-    const { month = new Date() } = props;
-
-    this.onMonthTransitionEnd = this.onMonthTransitionEnd.bind(this);
-
-    this.state = {
-      isTransitioning: false,
-      transitionValue: transitionValues.current,
-      // Used in a test so this is valid usage.
-      // eslint-disable-next-line react/no-unused-state
-      currentMonth: props.month,
-      months: [addMonths(month, -1), month, addMonths(month, 1)],
-    };
-
-    this.isTransitionEndSupported = isTransitionEndSupported();
-  }
-
-  UNSAFE_componentWillReceiveProps({ month: nextMonth = new Date() }: Props) {
-    const { month = new Date() } = this.props;
-    const hasMonthChanged = !isSameMonth(month, nextMonth);
-
-    if (hasMonthChanged) {
-      const reverse = isRTL();
-
-      if (differenceInCalendarMonths(nextMonth, month) === 1) {
-        // Transition to next month
-        this.setState({
-          transitionValue: reverse
-            ? transitionValues.previous
-            : transitionValues.next,
-          isTransitioning: true,
-        });
-        return;
-      }
-
-      if (differenceInCalendarMonths(nextMonth, month) === -1) {
-        // Transition to previous month
-        this.setState({
-          transitionValue: reverse
-            ? transitionValues.next
-            : transitionValues.previous,
-          isTransitioning: true,
-        });
-        return;
-      }
-
-      this.setState({
-        // Used in a test so this is valid usage.
-        // eslint-disable-next-line react/no-unused-state
-        currentMonth: nextMonth,
-        months: [addMonths(nextMonth, -1), nextMonth, addMonths(nextMonth, 1)],
-      });
-    }
-  }
-
-  componentDidUpdate() {
-    // For IE9, immediately call onMonthTransitionEnd instead of
-    // waiting for the animation to complete
-    // Thx to Airbnb's react-dates <3
-    if (!this.isTransitionEndSupported && this.state.isTransitioning) {
-      this.onMonthTransitionEnd();
-    }
-  }
-
-  onMonthTransitionEnd() {
-    const { month = new Date() } = this.props;
-
-    this.setState({
-      transitionValue: transitionValues.current,
-      isTransitioning: false,
-      // Used in a test so this is valid usage.
-      // eslint-disable-next-line react/no-unused-state
-      currentMonth: month,
-      months: [addMonths(month, -1), month, addMonths(month, 1)],
-    });
-  }
-
-  render() {
-    const {
-      TransitionComponent,
-      className = null,
-      focusedDate = null,
-      ...rest
-    } = this.props;
-    const { isTransitioning, transitionValue } = this.state;
-
-    const stripClassNames = getClassName(
-      'bpk-calendar-grid-transition__strip',
-      isTransitioning && 'bpk-calendar-grid-transition__strip--transitioning',
-    );
-
-    let min: Date;
-    let max: Date;
-    if (rest.minDate && rest.maxDate) {
-      ({ max, min } = getMonthRange(rest.minDate, rest.maxDate));
-    }
-
-    return (
-      <div className={getClassName('bpk-calendar-grid-transition', className)}>
-        <div
-          className={stripClassNames}
-          style={getTransformStyles(transitionValue)}
-          onTransitionEnd={this.onMonthTransitionEnd}
-        >
-          {this.state.months.map((m, index) =>
-            min && max && isWithinRange(m, { start: min, end: max }) ? (
-              <TransitionComponent
-                {...rest}
-                key={formatIsoMonth(m)}
-                month={m}
-                preventKeyboardFocus={index !== 1 || rest.preventKeyboardFocus}
-                isKeyboardFocusable={!isTransitioning && index === 1}
-                focusedDate={
-                  index === 1
-                    ? focusedDate
-                    : getFocusedDateForMonth(
-                        m,
-                        focusedDate,
-                        rest.minDate,
-                        rest.maxDate,
-                      )
-                }
-                aria-hidden={index !== 1}
-                className={getClassName('bpk-calendar-grid-transition__grid')}
-              />
-            ) : (
-              <div
-                className={getClassName('bpk-calendar-grid-transition__dummy')}
-                key={formatIsoMonth(m)}
-              />
-            ),
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-const addCalendarGridTransition =
-  <P extends {}>(TransitionComponent: ComponentType<P>) =>
-  (props: Omit<P & Props, keyof InjectedCalendarGridTransitionProps>) =>
-    (
-      <BpkCalendarGridTransition
-        {...(props as P)}
-        TransitionComponent={TransitionComponent}
-      />
-    );
-
-export default BpkCalendarGridTransition;
-export { addCalendarGridTransition };

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

@@ -1,116 +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, screen } from '@testing-library/react';
-import format from 'date-fns/format';
-import userEvent from '@testing-library/user-event';
-
-import BpkCalendarNav from './BpkCalendarNav';
-
-const formatMonth = (date: Date) => format(date, 'MMMM yyyy');
-
-describe('BpkCalendarNav', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(
-      <BpkCalendarNav
-        month={new Date(2010, 1, 1)}
-        minDate={new Date(2010, 1, 1)}
-        maxDate={new Date(2010, 2, 1)}
-        formatMonth={formatMonth}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        id="myCalendarNav"
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should disable inputs when disabled', () => {
-    const { asFragment } = render(
-      <BpkCalendarNav
-        month={new Date(2010, 1, 1)}
-        minDate={new Date(2010, 1, 1)}
-        maxDate={new Date(2010, 2, 1)}
-        formatMonth={formatMonth}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        disabled
-        id="myCalendarNav"
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should use given previousMonth and nextMonth labels correctly', () => {
-    const { asFragment } = render(
-      <BpkCalendarNav
-        month={new Date(2010, 1, 1)}
-        minDate={new Date(2010, 1, 1)}
-        maxDate={new Date(2010, 2, 1)}
-        formatMonth={formatMonth}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        disabled
-        id="myCalendarNav"
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should call the onMonthChange callback when nudging/selecting month', async () => {
-    const onMonthChange = jest.fn();
-
-    render(
-      <BpkCalendarNav
-        month={new Date(2010, 1, 1)}
-        minDate={new Date(2010, 0, 1)}
-        maxDate={new Date(2010, 2, 1)}
-        formatMonth={formatMonth}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        onMonthChange={onMonthChange}
-        id="myCalendarNav"
-      />,
-    );
-
-    expect(onMonthChange.mock.calls.length).toBe(0);
-
-    // Previous month
-    const prevMonthButton = screen.getByRole('button', {
-      name: 'Go to previous month',
-    });
-    await userEvent.click(prevMonthButton);
-    expect(onMonthChange.mock.calls.length).toBe(1);
-
-    // Next month
-    const nextMonthButton = screen.getByRole('button', {
-      name: 'Go to next month',
-    });
-    await userEvent.click(nextMonthButton);
-    expect(onMonthChange.mock.calls.length).toBe(2);
-
-    // Select month
-    const select = screen.getByRole('combobox');
-    await userEvent.selectOptions(select, 'March 2010');
-    expect(onMonthChange.mock.calls.length).toBe(3);
-  });
-});

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

@@ -1,89 +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';
-@import 'variables.scss';
-
-.bpk-calendar-nav {
-  display: table;
-
-  &__month {
-    display: table-cell;
-    text-align: center;
-  }
-
-  &__nudger {
-    display: table-cell;
-    padding: 0 $bpk-calendar-day-spacing;
-    text-align: center;
-    vertical-align: middle;
-    box-sizing: border-box;
-  }
-
-  &__button {
-    width: 100%;
-    height: $bpk-input-height;
-    padding: bpk-spacing-md() - (2 * $bpk-one-pixel-rem) 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    appearance: none;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-calendar-nudger-icon-color,
-      $bpk-text-primary-day
-    );
-
-    @include bpk-hover {
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-nudger-icon-hover-color,
-        $bpk-text-primary-day
-      );
-    }
-
-    &:active {
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-nudger-icon-active-color,
-        $bpk-text-primary-day
-      );
-    }
-
-    .bpk-calendar-nav__icon {
-      fill: currentcolor;
-
-      @include bpk-icon--rtl-support;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-
-      .bpk-calendar-nav__icon {
-        fill: $bpk-text-disabled-day;
-      }
-    }
-  }
-
-  &__text {
-    &--hidden {
-      @include bpk-visually-hidden;
-    }
-  }
-}

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

@@ -1,190 +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 { ChangeEvent, MouseEvent } from 'react';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkSelect from '../../bpk-component-select';
-import { cssModules } from '../../bpk-react-utils';
-import BpkAriaLive from '../../bpk-component-aria-live';
-
-import {
-  addMonths,
-  formatIsoMonth,
-  getMonthRange,
-  getMonthsInRange,
-  isWithinRange,
-  parseIsoDate,
-  startOfMonth,
-} from './date-utils';
-import STYLES from './BpkCalendarNav.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-type MonthChangeEvent =
-  | ChangeEvent<HTMLInputElement>
-  | MouseEvent<HTMLButtonElement>;
-
-type Props = {
-  changeMonthLabel: string;
-  formatMonth: (month: Date) => string;
-  id: string;
-  maxDate: Date;
-  minDate: Date;
-  month: Date;
-  nextMonthLabel: string;
-  previousMonthLabel: string;
-  onMonthChange?: (
-    event: MonthChangeEvent,
-    options: { month: Date; source: string },
-  ) => void;
-  disabled?: boolean;
-};
-const changeMonth =
-  ({
-    callback,
-    max,
-    min,
-    month,
-    source,
-  }: {
-    callback: (
-      event: MonthChangeEvent,
-      options: { month: Date; source: string },
-    ) => void;
-    max: Date;
-    min: Date;
-    month: Date;
-    source: string;
-  }) =>
-  (event: MonthChangeEvent) => {
-    // Safeguard for disabled buttons is due to React bug in Chrome: https://github.com/facebook/react/issues/8308
-    // PR: https://github.com/facebook/react/pull/8329 - unresolved as of 22/12/2016
-    if (isWithinRange(month, { start: min, end: max })) {
-      event.persist();
-      callback(event, { month, source });
-    }
-  };
-
-const BpkCalendarNav = ({
-  changeMonthLabel,
-  disabled = false,
-  formatMonth,
-  id,
-  maxDate,
-  minDate,
-  month,
-  nextMonthLabel,
-  onMonthChange = () => {},
-  previousMonthLabel,
-}: Props) => {
-  const baseMonth = startOfMonth(month);
-  const { max, min } = getMonthRange(minDate, maxDate);
-  const navigatableMonths = getMonthsInRange(minDate, maxDate);
-  const prevMonth = addMonths(baseMonth, -1);
-  const nextMonth = addMonths(baseMonth, 1);
-
-  return (
-    <div className={getClassName('bpk-calendar-nav')}>
-      <div style={{ display: 'table-row' }}>
-        <div className={getClassName('bpk-calendar-nav__nudger')}>
-          <button
-            type="button"
-            className={getClassName('bpk-calendar-nav__button')}
-            id={`${id}_month_nudger_previous`}
-            onClick={changeMonth({
-              month: prevMonth,
-              min,
-              max,
-              callback: onMonthChange,
-              source: 'PREV',
-            })}
-            disabled={
-              disabled || !isWithinRange(prevMonth, { start: min, end: max })
-            }
-          >
-            <ArrowLeftIcon className={getClassName('bpk-calendar-nav__icon')} />
-            <span className={getClassName('bpk-calendar-nav__text--hidden')}>
-              {previousMonthLabel}
-            </span>
-          </button>
-        </div>
-        <div className={getClassName('bpk-calendar-nav__month')}>
-          <label
-            htmlFor={`${id}_select`}
-            className={getClassName('bpk-calendar-nav__text--hidden')}
-          >
-            {changeMonthLabel}
-          </label>
-
-          <BpkSelect
-            id={`${id}_select`}
-            name="months"
-            value={formatIsoMonth(baseMonth)}
-            disabled={disabled}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              event.persist();
-              onMonthChange(event, {
-                month: parseIsoDate(event.target.value),
-                source: 'SELECT',
-              });
-            }}
-          >
-            {navigatableMonths.map((m) => (
-              <option value={formatIsoMonth(m)} key={m.toString()}>
-                {formatMonth(m)}
-              </option>
-            ))}
-          </BpkSelect>
-        </div>
-        <div className={getClassName('bpk-calendar-nav__nudger')}>
-          <button
-            type="button"
-            className={getClassName('bpk-calendar-nav__button')}
-            id={`${id}_month_nudger_next`}
-            onClick={changeMonth({
-              month: nextMonth,
-              min,
-              max,
-              callback: onMonthChange,
-              source: 'NEXT',
-            })}
-            disabled={
-              disabled ||
-              !isWithinRange(addMonths(baseMonth, 1), { start: min, end: max })
-            }
-          >
-            <ArrowRightIcon
-              className={getClassName('bpk-calendar-nav__icon')}
-            />
-            <span className={getClassName('bpk-calendar-nav__text--hidden')}>
-              {nextMonthLabel}
-            </span>
-          </button>
-        </div>
-        <BpkAriaLive>{formatMonth(baseMonth)}</BpkAriaLive>
-      </div>
-    </div>
-  );
-};
-
-export default BpkCalendarNav;