@skyscanner/backpack-web 25.3.0 → 25.4.0-alpha

package/bpk-component-datepicker/src/BpkDatepicker.tsx

@@ -0,0 +1,390 @@
+/*
+ * 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 { createRef, Component } from 'react';
+
+import BpkInput, { withOpenEvents } from '../../bpk-component-input';
+import BpkModal from '../../bpk-component-modal';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkPopover from '../../bpk-component-popover';
+import { cssModules } from '../../bpk-react-utils';
+import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint';
+import {
+  composeCalendar,
+  BpkCalendarGridHeader,
+  BpkCalendarGrid,
+  BpkCalendarDate,
+  withCalendarState,
+  CALENDAR_SELECTION_TYPE,
+  DateUtils,
+  BpkCalendarNav,
+} from '../../bpk-component-calendar';
+import type {
+  DaysOfWeek,
+  ReactComponent,
+  SelectionConfiguration,
+} from '../../bpk-component-calendar';
+
+import STYLES from './BpkDatepicker.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const Input = withOpenEvents(BpkInput);
+
+const DefaultCalendar = withCalendarState(
+  composeCalendar(
+    BpkCalendarNav,
+    BpkCalendarGridHeader,
+    BpkCalendarGrid,
+    BpkCalendarDate,
+  ),
+);
+
+type Props = {
+  // Required
+  changeMonthLabel: string;
+  closeButtonText: string;
+  daysOfWeek: DaysOfWeek;
+  formatDate: (date: Date) => string;
+  formatDateFull: (date: Date) => string;
+  formatMonth: (date: Date) => string;
+  id: string;
+  title: string;
+  getApplicationElement: () => HTMLElement | null;
+  nextMonthLabel: string;
+  previousMonthLabel: string;
+  weekStartsOn: number;
+  // Optional
+  calendarComponent: ReactComponent;
+  inputComponent: ReactComponent;
+  dateModifiers?: {};
+  fixedWidth?: boolean;
+  inputProps?: {};
+  markOutsideDays?: boolean;
+  markToday?: boolean;
+  maxDate?: Date;
+  minDate?: Date;
+  onDateSelect?: ((date: Date, newDate?: Date) => void) | null;
+  onMonthChange?:
+    | ((
+        event: UIEvent,
+        { month, source }: { month: Date; source: string },
+      ) => void)
+    | null;
+  onOpenChange?: (arg0: boolean) => void | null;
+  selectionConfiguration?: SelectionConfiguration;
+  initiallyFocusedDate?: Date;
+  renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+  isOpen?: boolean;
+  valid?: boolean;
+  // Disabling this as if we set a default property for this value it causes the internal onClose function to stop working for default setup
+  // eslint-disable-next-line react/require-default-props
+  onClose?: () => void;
+};
+
+type State = {
+  isOpen: boolean;
+};
+
+class BpkDatepicker extends Component<Props, State> {
+  inputRef: React.RefObject<HTMLInputElement>;
+
+  static defaultProps = {
+    calendarComponent: DefaultCalendar,
+    inputComponent: null,
+    dateModifiers: {},
+    inputProps: {},
+    fixedWidth: true,
+    markOutsideDays: true,
+    markToday: DefaultCalendar.defaultProps.markToday,
+    maxDate: DefaultCalendar.defaultProps.maxDate,
+    minDate: DefaultCalendar.defaultProps.minDate,
+    nextMonthLabel: null,
+    onDateSelect: null,
+    onOpenChange: null,
+    onMonthChange: null,
+    previousMonthLabel: null,
+    selectionConfiguration: {
+      type: CALENDAR_SELECTION_TYPE.single,
+      date: null,
+    },
+    initiallyFocusedDate: null,
+    renderTarget: null,
+    isOpen: false,
+    valid: null,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isOpen: props.isOpen!,
+    };
+    this.inputRef = createRef();
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    const { isOpen } = this.props;
+
+    if (prevProps.isOpen !== isOpen && prevState.isOpen !== isOpen) {
+      if (isOpen) {
+        this.onOpen();
+      } else {
+        this.onClose();
+      }
+    }
+  }
+
+  onOpen = () => {
+    this.setState({
+      isOpen: true,
+    });
+    if (this.props.onOpenChange) {
+      this.props.onOpenChange(true);
+    }
+  };
+
+  onClose = () => {
+    this.setState({
+      isOpen: false,
+    });
+    if (this.props.onOpenChange) {
+      this.props.onOpenChange(false);
+    }
+  };
+
+  /**
+   * Gets the correct label for the input field to be supplied to the aria-label
+   * @param {Object} selectionConfiguration current selection configuration
+   * @param {Function} formatDateFull function supplied to format date
+   * @returns {String} date string
+   */
+  getLabel = (
+    selectionConfiguration: SelectionConfiguration,
+    formatDateFull: (date: Date) => string,
+  ) => {
+    if (
+      selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single &&
+      selectionConfiguration.date
+    ) {
+      return formatDateFull(selectionConfiguration.date);
+    }
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
+      if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
+        return formatDateFull(selectionConfiguration.startDate);
+      }
+      if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
+        return `${formatDateFull(
+          selectionConfiguration.startDate,
+        )} - ${formatDateFull(selectionConfiguration.endDate)}`;
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Gets the correct value for the input field
+   * @param {Object} selectionConfiguration current selection configuration
+   * @param {Function} formatDate function supplied to format date
+   * @returns {String} date value
+   */
+  getValue = (
+    selectionConfiguration: SelectionConfiguration,
+    formatDate: (date: Date) => string,
+  ) => {
+    if (
+      selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single &&
+      selectionConfiguration.date
+    ) {
+      return formatDate(selectionConfiguration.date);
+    }
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
+      if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
+        return formatDate(selectionConfiguration.startDate);
+      }
+      if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
+        return `${formatDate(selectionConfiguration.startDate)} - ${formatDate(
+          selectionConfiguration.endDate,
+        )}`;
+      }
+    }
+    return '';
+  };
+
+  handleDateSelect = (startDate: Date, endDate: Date | null = null) => {
+    const { maxDate, minDate, onClose, onDateSelect, selectionConfiguration } =
+      this.props;
+
+    // When the calendar is a single date we always want to close it when a date is selected
+    // or if its a range calendar we only want to close the calendar when a range is selected.
+    // If a custom onClose function is provided then we don't want to run the internal version.
+    if (
+      selectionConfiguration &&
+      (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single ||
+        (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range &&
+          endDate)) &&
+      !onClose
+    ) {
+      this.onClose();
+    }
+
+    if (onDateSelect) {
+      const newStartDate = DateUtils.dateToBoundaries(
+        startDate,
+        DateUtils.startOfDay(minDate!),
+        DateUtils.startOfDay(maxDate!),
+      );
+      const newEndDate = DateUtils.dateToBoundaries(
+        endDate,
+        DateUtils.startOfDay(minDate!),
+        DateUtils.startOfDay(maxDate!),
+      );
+
+      if (
+        selectionConfiguration &&
+        selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range &&
+        selectionConfiguration.startDate &&
+        !selectionConfiguration.endDate &&
+        (DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) ||
+          DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))
+      ) {
+        onDateSelect(selectionConfiguration.startDate, newEndDate);
+      } else {
+        onDateSelect(newStartDate);
+      }
+    }
+  };
+
+  render() {
+    const {
+      calendarComponent: Calendar,
+      changeMonthLabel,
+      closeButtonText,
+      dateModifiers,
+      daysOfWeek,
+      fixedWidth,
+      formatDate,
+      formatDateFull,
+      formatMonth,
+      getApplicationElement,
+      id,
+      initiallyFocusedDate,
+      inputComponent,
+      inputProps,
+      markOutsideDays,
+      markToday,
+      maxDate,
+      minDate,
+      nextMonthLabel,
+      onMonthChange,
+      previousMonthLabel,
+      renderTarget,
+      selectionConfiguration,
+      title,
+      valid,
+      weekStartsOn,
+      ...rest
+    } = this.props;
+
+    // The following props are not used in render
+    delete rest.onDateSelect;
+    delete rest.onOpenChange;
+    delete rest.isOpen;
+
+    const input = inputComponent || (
+      <div
+        className={getClassName('bpk-datepicker__input')}
+        ref={this.inputRef}
+      >
+        <Input
+          id={id}
+          name={`${id}_input`}
+          value={this.getValue(selectionConfiguration!, formatDate)}
+          aria-live="assertive"
+          aria-atomic="true"
+          aria-label={this.getLabel(selectionConfiguration!, formatDateFull)}
+          onChange={() => null}
+          onOpen={this.onOpen}
+          isOpen={this.state.isOpen}
+          valid={valid}
+          {...inputProps}
+        />
+      </div>
+    );
+
+    const calendarProps = {
+      id: `${id}-calendar`,
+      className: getClassName('bpk-datepicker__calendar'),
+      changeMonthLabel,
+      dateModifiers,
+      daysOfWeek,
+      formatDateFull,
+      formatMonth,
+      markOutsideDays,
+      markToday,
+      maxDate,
+      minDate,
+      nextMonthLabel,
+      onDateSelect: this.handleDateSelect,
+      onMonthChange,
+      previousMonthLabel,
+      weekStartsOn,
+      initiallyFocusedDate,
+      selectionConfiguration,
+    };
+
+    return (
+      <BpkBreakpoint query={BREAKPOINTS.MOBILE}>
+        {(isMobile: boolean) =>
+          isMobile ? (
+            <>
+              {input}
+              <BpkModal
+                id={`${id}-modal`}
+                renderTarget={renderTarget}
+                onClose={this.props.onClose || this.onClose}
+                isOpen={this.state.isOpen}
+                title={title}
+                closeLabel={closeButtonText}
+                getApplicationElement={getApplicationElement}
+              >
+                <Calendar {...calendarProps} fixedWidth={false} />
+              </BpkModal>
+            </>
+          ) : (
+            <BpkPopover
+              id={`${id}-popover`}
+              target={input}
+              renderTarget={renderTarget}
+              onClose={this.props.onClose || this.onClose}
+              isOpen={this.state.isOpen}
+              label={title}
+              closeButtonText={closeButtonText}
+              tabIndex={0}
+              {...rest}
+            >
+              <Calendar {...calendarProps} fixedWidth={fixedWidth} />
+            </BpkPopover>
+          )
+        }
+      </BpkBreakpoint>
+    );
+  }
+}
+
+export default BpkDatepicker;

package/bpk-component-datepicker/src/accessibility-test.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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 { axe } from 'jest-axe';
+
+import {
+  weekDays,
+  formatMonth,
+  formatDateFull,
+} from '../../bpk-component-calendar/test-utils';
+import { format } from '../../bpk-component-calendar/src/date-utils';
+import { CALENDAR_SELECTION_TYPE } from '../../bpk-component-calendar';
+
+jest.mock('@popperjs/core', () => {
+  const originalModule = jest.requireActual('@popperjs/core');
+  return {
+    ...originalModule,
+    createPopper: jest.fn(() => ({
+      update: jest.fn(),
+      destroy: jest.fn(),
+    })),
+  };
+});
+
+// eslint-disable-next-line import/first
+import BpkDatepicker from './BpkDatepicker';
+
+const formatDate = (date: Date) => format(date, 'dd/MM/yyyy');
+
+const inputProps = {
+  onChange: () => null,
+  placeholder: 'placeholder',
+  large: true,
+};
+
+describe('BpkDatepicker accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const { container } = render(
+      <BpkDatepicker
+        id="myDatepicker"
+        closeButtonText="Close"
+        daysOfWeek={weekDays}
+        changeMonthLabel="Change month"
+        title="Departure date"
+        weekStartsOn={1}
+        getApplicationElement={() => document.createElement('div')}
+        formatDate={formatDate}
+        formatMonth={formatMonth}
+        formatDateFull={formatDateFull}
+        inputProps={inputProps}
+        minDate={new Date(2010, 1, 15)}
+        maxDate={new Date(2010, 2, 15)}
+        selectionConfiguration={{
+          type: CALENDAR_SELECTION_TYPE.single,
+          date: new Date(2010, 1, 15),
+        }}
+      />,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues when used in range configuration', async () => {
+    const { container } = render(
+      <BpkDatepicker
+        id="myDatepicker"
+        closeButtonText="Close"
+        daysOfWeek={weekDays}
+        changeMonthLabel="Change month"
+        title="Departure date"
+        weekStartsOn={1}
+        getApplicationElement={() => document.createElement('div')}
+        formatDate={formatDate}
+        formatMonth={formatMonth}
+        formatDateFull={formatDateFull}
+        inputProps={inputProps}
+        minDate={new Date(2010, 1, 15)}
+        maxDate={new Date(2010, 2, 15)}
+        selectionConfiguration={{
+          type: CALENDAR_SELECTION_TYPE.range,
+          startDate: new Date(2010, 1, 17),
+          endDate: new Date(2020, 1, 20),
+        }}
+      />,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-datepicker/src/themeAttibutes-test.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 themeAttributes from './themeAttributes';
+
+describe('themeAttributes', () => {
+  it('should export the correct theme attributes', () => {
+    expect(themeAttributes).toEqual([
+      'calendarDateTextColor',
+      'calendarDateTextHoverColor',
+      'calendarDateTextActiveColor',
+      'calendarDateTextFocusColor',
+      'calendarDateTextSelectedColor',
+      'calendarDateSelectedBackgroundColor',
+      'calendarDateFocusedBorderColor',
+      'calendarNudgerIconColor',
+      'calendarNudgerIconHoverColor',
+      'calendarNudgerIconActiveColor',
+      'linkColor',
+      'linkHoverColor',
+      'linkActiveColor',
+      'linkVisitedColor',
+    ]);
+  });
+});

package/bpk-component-datepicker/src/{themeAttributes.js → themeAttributes.ts}

@@ -1,12 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _bpkComponentCalendar = require("../../bpk-component-calendar");
-var _bpkComponentModal = require("../../bpk-component-modal");
-var _bpkComponentPopover = require("../../bpk-component-popover");
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -24,6 +15,16 @@ var _bpkComponentPopover = require("../../bpk-component-popover");
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import { themeAttributes as calendarAttributes } from '../../bpk-component-calendar';
+import { themeAttributes as modalAttributes } from '../../bpk-component-modal';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-var _default = [..._bpkComponentCalendar.themeAttributes, ..._bpkComponentPopover.themeAttributes, ..._bpkComponentModal.themeAttributes].filter((attribute, index, attributes) => attributes.indexOf(attribute) === index);
-exports.default = _default;
+import { themeAttributes as popoverAttributes } from '../../bpk-component-popover';
+
+export default [
+  ...calendarAttributes,
+  ...popoverAttributes,
+  ...modalAttributes,
+].filter(
+  (attribute, index, attributes) => attributes.indexOf(attribute) === index,
+);

package/bpk-component-description-list/README.md

@@ -0,0 +1,43 @@
+# bpk-component-description-list
+
+> Backpack description list component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails } from '@skyscanner/backpack-web/bpk-component-description-list';
+
+export default () => (
+  <BpkDescriptionList>
+    <BpkDescriptionTerm>Apple</BpkDescriptionTerm>
+    <BpkDescriptionDetails>A fruit</BpkDescriptionDetails>
+  </BpkDescriptionList>
+);
+```
+
+## Props
+
+### BpkDescriptionList
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | -        | true     | -             |
+| className | string   | false    | null          |
+
+### BpkDescriptionTerm
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | -        | true     | -             |
+| className | string   | false    | null          |
+
+### BpkDescriptionDetails
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | -        | true     | -             |
+| className | string   | false    | null          |

package/bpk-component-description-list/index.js

@@ -1,27 +1,23 @@
-"use strict";
+/*
+ * 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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkDescriptionDetails", {
-  enumerable: true,
-  get: function () {
-    return _BpkDescriptionDetails.default;
-  }
-});
-Object.defineProperty(exports, "BpkDescriptionList", {
-  enumerable: true,
-  get: function () {
-    return _BpkDescriptionList.default;
-  }
-});
-Object.defineProperty(exports, "BpkDescriptionTerm", {
-  enumerable: true,
-  get: function () {
-    return _BpkDescriptionTerm.default;
-  }
-});
-var _BpkDescriptionList = _interopRequireDefault(require("./src/BpkDescriptionList"));
-var _BpkDescriptionTerm = _interopRequireDefault(require("./src/BpkDescriptionTerm"));
-var _BpkDescriptionDetails = _interopRequireDefault(require("./src/BpkDescriptionDetails"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import BpkDescriptionList from './src/BpkDescriptionList';
+import BpkDescriptionTerm from './src/BpkDescriptionTerm';
+import BpkDescriptionDetails from './src/BpkDescriptionDetails';
+
+export { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails };

package/bpk-component-description-list/src/BpkDescriptionDetails.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ComponentFactory = _interopRequireDefault(require("./ComponentFactory"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -23,5 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = (0, _ComponentFactory.default)('dd', 'bpk-description-list__details');
-exports.default = _default;
+
+import buildComponent from './ComponentFactory';
+
+export default buildComponent('dd', 'bpk-description-list__details');