@skyscanner/backpack-web 25.5.0 → 25.7.0-beta

package/bpk-component-rtl-toggle/src/BpkRtlToggle-test.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 BpkRtlToggle from './BpkRtlToggle';
+
+describe('BpkRtlToggle', () => {
+  it('should render correctly', () => {
+    const { asFragment } = render(<BpkRtlToggle />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with the className prop', () => {
+    const { asFragment } = render(<BpkRtlToggle className="foo" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/bpk-component-rtl-toggle/src/BpkRtlToggle.tsx

@@ -0,0 +1,100 @@
+/*
+ * 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 { Component } from 'react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from '../../bpk-component-link';
+
+import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from './utils';
+
+const getDirection = () => {
+  const htmlElement = getHtmlElement();
+  return htmlElement instanceof HTMLElement ? htmlElement.dir : DIRECTIONS.LTR;
+};
+
+const setDirection = (direction: string) => {
+  const htmlElement = getHtmlElement();
+
+  if (htmlElement instanceof HTMLElement) {
+    htmlElement.dir = direction;
+    htmlElement.dispatchEvent(new Event(DIRECTION_CHANGE_EVENT));
+  }
+};
+
+type State = {
+  direction: string;
+};
+
+type Props = {
+  className?: string | null;
+};
+
+type InteractionEvents = KeyboardEvent | MouseEvent | TouchEvent;
+
+class BpkRtlToggle extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      direction: getDirection(),
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown = (e: KeyboardEvent) => {
+    if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'r') {
+      this.toggleRtl(e);
+    }
+  };
+
+  toggleRtl = (e: InteractionEvents) => {
+    e.preventDefault();
+
+    const direction =
+      getDirection() === DIRECTIONS.RTL ? DIRECTIONS.LTR : DIRECTIONS.RTL;
+
+    setDirection(direction);
+
+    this.setState({ direction });
+  };
+
+  render() {
+    const { className } = this.props;
+    const onOrOff = this.state.direction === DIRECTIONS.RTL ? 'off' : 'on';
+
+    return (
+      <BpkButtonLink
+        title="Keyboard Shortcut: ctrl + cmd + r"
+        onClick={this.toggleRtl}
+        className={className}
+      >
+        RTL {onOrOff}
+      </BpkButtonLink>
+    );
+  }
+}
+
+export default BpkRtlToggle;

package/bpk-component-rtl-toggle/src/accessibility-test.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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 BpkRtlToggle from './BpkRtlToggle';
+
+describe('BpkRtlToggle accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const { container } = render(<BpkRtlToggle />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-rtl-toggle/src/updateOnDirectionChange-test.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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, fireEvent } from '@testing-library/react';
+
+import updateOnDirectionChange from './updateOnDirectionChange';
+import { DIRECTION_CHANGE_EVENT, getHtmlElement } from './utils';
+
+const EnhancedComponent = updateOnDirectionChange('div');
+
+describe('BpkRtlToggle', () => {
+  it('should render correctly', () => {
+    const { asFragment } = render(<EnhancedComponent />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should force an update when receiving a direction change event', () => {
+    render(<EnhancedComponent />);
+
+    const forceUpdateSpy = jest.spyOn(
+      EnhancedComponent.prototype,
+      'forceUpdate',
+    );
+    expect(forceUpdateSpy).not.toHaveBeenCalled();
+
+    fireEvent(
+      getHtmlElement() as HTMLElement,
+      new Event(DIRECTION_CHANGE_EVENT),
+    );
+
+    expect(forceUpdateSpy).toHaveBeenCalled();
+  });
+});

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 { wrapDisplayName } from '../../bpk-react-utils';
+
+import { getHtmlElement, DIRECTION_CHANGE_EVENT } from './utils';
+
+const updateOnDirectionChange = (
+  EnhancedComponent: ComponentType<any> | string,
+) => {
+  class UpdateOnDirectionChange extends Component {
+    public static displayName: string;
+
+    componentDidMount() {
+      const htmlElement = getHtmlElement();
+      if (htmlElement instanceof HTMLElement) {
+        htmlElement.addEventListener(
+          DIRECTION_CHANGE_EVENT,
+          this.onDirectionChange,
+          false,
+        );
+      }
+    }
+
+    componentWillUnmount() {
+      const htmlElement = getHtmlElement();
+      if (htmlElement instanceof HTMLElement) {
+        htmlElement.removeEventListener(
+          DIRECTION_CHANGE_EVENT,
+          this.onDirectionChange,
+          false,
+        );
+      }
+    }
+
+    onDirectionChange = () => {
+      this.forceUpdate();
+    };
+
+    render() {
+      return <EnhancedComponent {...this.props} />;
+    }
+  }
+
+  UpdateOnDirectionChange.displayName = wrapDisplayName(
+    EnhancedComponent,
+    'updateOnDirectionChange',
+  );
+
+  return UpdateOnDirectionChange;
+};
+
+export default updateOnDirectionChange;

package/bpk-component-rtl-toggle/src/utils.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+const DIRECTIONS = {
+  LTR: 'ltr',
+  RTL: 'rtl',
+} as const;
+
+const DIRECTION_CHANGE_EVENT = 'bpkchangedirection';
+
+const getHtmlElement = (): HTMLElement | null | {} =>
+  typeof document !== 'undefined' ? document.querySelector('html') : {};
+
+export { DIRECTIONS, DIRECTION_CHANGE_EVENT, getHtmlElement };

package/bpk-component-scrollable-calendar/README.md

@@ -0,0 +1,100 @@
+# bpk-component-scrollable-calendar
+
+> Backpack scrollable calendar component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import { Component } from 'react';
+import { DateUtils } from '@skyscanner/backpack-web/bpk-component-calendar';
+import BpkScrollableCalendar, { CALENDAR_SELECTION_TYPE } from '@skyscanner/backpack-web/bpk-component-scrollable-calendar';
+import format from 'date-fns/format';
+
+const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
+const formatMonth = date => format(date, 'MMMM yyyy');
+const daysOfWeek = [
+  {
+    name: 'Sunday',
+    nameAbbr: 'Sun',
+    index: 0,
+    isWeekend: true,
+  },
+  // ...
+];
+
+export default class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      selectionConfiguration: {
+        type: CALENDAR_SELECTION_TYPE.single,
+        date: null,
+      }
+    };
+  }
+
+  handleDateSelect = (date) => {
+    this.setState({
+      selectionConfiguration: {
+        type: this.props.selectionConfiguration.type,
+        date: date,
+      },
+    });
+  };
+
+  render() {
+    return (
+      <BpkScrollableCalendar
+        id="calendar"
+        onDateSelect={this.handleDateSelect}
+        formatMonth={formatMonth}
+        formatDateFull={formatDateFull}
+        daysOfWeek={daysOfWeek}
+        weekStartsOn={1}
+        selectionConfiguration={this.state.selectionConfiguration}
+        // Subtract one day from today's date to make today selectable by default
+        minDate={DateUtils.addDays(new Date(), -1)}
+        maxDate={DateUtils.addMonths(new Date(), 12)}
+      />
+    );
+  }
+}
+```
+
+### BpkScrollableCalendarGridList
+
+This component is the main scrollable grid of months for the scrollable calendar.
+It is composed of `BpkScrollableCalendarGrid` elements. It uses all the same props
+as `BpkCalendarGrid`, but in addition `minDate` and `maxDate` are required to build
+the actual list.
+
+[Please refer to the props of BpkCalendarGrid here](../bpk-component-calendar/README.md#bpkcalendargrid).
+
+| Property | PropType | Required | Default Value |
+| -------- | -------- | -------- | ------------- |
+| maxDate  | Date     | true     | -             |
+| minDate  | Date     | true     | -             |
+
+### BpkScrollableCalendarGrid
+
+The BpkScrollableCalendarGrid component displays a month as a table.
+Above this table it displays the month's name in a `BpkText`. When
+used with `BpkScrollableCalendarDate`, it only displays days from
+that specific month. It is built on top of BpkCalendarGrid and
+uses the same props.
+
+[Please refer to the props of BpkCalendarGrid here](../bpk-component-calendar/README.md#bpkcalendargrid).
+
+### BpkScrollableCalendarDate
+
+The BpkScrollableCalendarDate component is used to render the content of a cell
+(a single day) inside the calendar grid. It is built on top of BpkCalendarDate
+and uses the same props. The only difference is that when isOutside is true,
+null is returned in order to only display of specific month in the calendar grid.
+
+[Please refer to the props of BpkCalendarDate here](../bpk-component-calendar/README.md#bpkcalendardate).

package/bpk-component-scrollable-calendar/index.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
+
+import BpkScrollableCalendar from './src/BpkScrollableCalendar';
+import BpkScrollableCalendarDate from './src/BpkScrollableCalendarDate';
+import BpkScrollableCalendarGrid from './src/BpkScrollableCalendarGrid';
+import BpkScrollableCalendarGridList from './src/BpkScrollableCalendarGridList';
+
+export default BpkScrollableCalendar;
+
+export {
+  CALENDAR_SELECTION_TYPE,
+  BpkScrollableCalendarDate,
+  BpkScrollableCalendarGrid,
+  BpkScrollableCalendarGridList,
+};

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar-test.tsx

@@ -0,0 +1,101 @@
+/*
+ * 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 '@testing-library/jest-dom';
+import { DateUtils } from '../../bpk-component-calendar';
+import { weekDays, formatDateFull, formatMonth } from '../test-utils';
+
+import BpkScrollableCalendar from './BpkScrollableCalendar';
+
+const testDate = new Date(2010, 1, 15);
+const id = 'scrollableCalendar';
+
+describe('BpkScrollableCalendar', () => {
+  it('should render correctly', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendar
+        id={id}
+        weekStartsOn={1}
+        daysOfWeek={weekDays}
+        formatMonth={formatMonth}
+        formatDateFull={formatDateFull}
+        // Subtract one day from today's date to make today selectable by default
+        minDate={DateUtils.addDays(testDate, -1)}
+        maxDate={DateUtils.addMonths(testDate, 12)}
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render ranges correctly', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendar
+        id={id}
+        weekStartsOn={1}
+        daysOfWeek={weekDays}
+        formatMonth={formatMonth}
+        formatDateFull={formatDateFull}
+        // Subtract one day from today's date to make today selectable by default
+        minDate={DateUtils.addDays(testDate, -1)}
+        maxDate={DateUtils.addMonths(testDate, 12)}
+        selectionConfiguration={{
+          type: 'range',
+          startDate: testDate,
+          endDate: DateUtils.addDays(testDate, +5),
+        }}
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should support custom class names', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendar
+        id={id}
+        weekStartsOn={1}
+        daysOfWeek={weekDays}
+        formatMonth={formatMonth}
+        formatDateFull={formatDateFull}
+        // Subtract one day from today's date to make today selectable by default
+        minDate={DateUtils.addDays(testDate, -1)}
+        maxDate={DateUtils.addMonths(testDate, 12)}
+        className="custom-classname"
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should support arbitrary props', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendar
+        id={id}
+        weekStartsOn={1}
+        daysOfWeek={weekDays}
+        formatMonth={formatMonth}
+        formatDateFull={formatDateFull}
+        // Subtract one day from today's date to make today selectable by default
+        minDate={DateUtils.addDays(testDate, -1)}
+        maxDate={DateUtils.addMonths(testDate, 12)}
+        testid="123"
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 {
+  BpkCalendarGridHeader,
+  withCalendarState,
+  composeCalendar,
+} from '../../bpk-component-calendar';
+
+import BpkscrollableCalendarDate from './BpkScrollableCalendarDate';
+import BpkScrollableCalendarGridList from './BpkScrollableCalendarGridList';
+
+export default withCalendarState(
+  composeCalendar(
+    null,
+    BpkCalendarGridHeader,
+    BpkScrollableCalendarGridList,
+    BpkscrollableCalendarDate,
+  ),
+);

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate-test.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 BpkScrollableCalendarDate from './BpkScrollableCalendarDate';
+
+const testDate = new Date(2010, 1, 15);
+
+describe('BpkScrollableCalendarDate', () => {
+  it('should render correctly', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendarDate date={testDate} />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render a disabled button', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendarDate date={testDate} disabled />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render with a click and keyDown handler', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendarDate
+        date={testDate}
+        onClick={() => null}
+        onKeyDown={() => null}
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render a focused button with tabIndex', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendarDate date={testDate} isFocused />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should pass props through to button', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendarDate
+        date={testDate}
+        aria-label="Nothing happened on this day in 2010"
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should return null when isOutside is true', () => {
+    const { asFragment } = render(
+      <BpkScrollableCalendarDate date={testDate} isOutside />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});