@skyscanner/backpack-web 9.3.0 → 11.1.0

package/bpk-component-datatable/src/sorter.js

@@ -1,166 +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.
- */
-
-/* @flow strict */
-import React from 'react';
-import _sortBy from 'lodash/sortBy';
-import { SortDirection } from 'react-virtualized';
-
-import { getSortIconDirection } from './bpkHeaderRenderer';
-import type { Props, SortProps, SortDirectionType } from './common-types';
-
-export type Sorter<Row> = {
-  rowCount: number,
-  getRow(indext: number): Row,
-  propsChange(props: Props<Row>): void,
-  onHeaderClick(sortBy: string, eventTarget: Element, column: any): Sorter<Row>,
-  sortProps: SortProps,
-};
-
-const getSortDirection = (
-  sortProps: SortProps,
-  newSortBy: ?string,
-  newSortDirection: ?SortDirectionType,
-  defaultSortDirection: SortDirectionType,
-): SortDirectionType => {
-  const { sortBy, sortDirection } = sortProps;
-  if (newSortDirection != null) {
-    return newSortDirection;
-  }
-  if (sortBy === newSortBy) {
-    return sortDirection === SortDirection.ASC
-      ? SortDirection.DESC
-      : SortDirection.ASC;
-  }
-  return defaultSortDirection;
-};
-
-class NaiveSorter<Row> {
-  sortProps: SortProps;
-
-  list: Array<Row>;
-
-  sortedList: Array<Row>;
-
-  rowCount: number;
-
-  constructor(props: Props<Row>) {
-    const children = React.Children.toArray(props.children);
-
-    const sortBy =
-      React.Children.count(props.children) > 0
-        ? children[props.defaultColumnSortIndex].props.dataKey
-        : undefined;
-    const sortDirection =
-      children[props.defaultColumnSortIndex].props.defaultSortDirection ||
-      SortDirection.ASC;
-
-    this.sortProps = {
-      sortBy,
-      sortDirection,
-      sort: null,
-    };
-    this.list = props.rows;
-    this.sort();
-  }
-
-  getRow(index: number): Row {
-    return this.sortedList[index];
-  }
-
-  sort() {
-    const sorted = _sortBy(this.list, this.sortProps.sortBy);
-    if (this.sortProps.sortDirection === 'DESC') {
-      sorted.reverse();
-    }
-    this.sortedList = sorted;
-    this.rowCount = this.sortedList.length;
-  }
-
-  propsChange(nextProps: Props<Row>) {
-    this.list = nextProps.rows;
-    this.sort();
-  }
-
-  onHeaderClick(sortBy: string, eventTarget: Element, column): Sorter<Row> {
-    const sortDirection = getSortDirection(
-      this.sortProps,
-      sortBy,
-      getSortIconDirection(eventTarget),
-      column.props.defaultSortDirection || SortDirection.ASC,
-    );
-
-    this.sortProps = {
-      sortBy,
-      sortDirection,
-      sort: null,
-    };
-
-    this.sort();
-    return this;
-  }
-}
-
-class PropSorter<Row> {
-  sortProps: SortProps;
-
-  list: Array<Row>;
-
-  rowCount: number;
-
-  constructor(props: Props<Row>) {
-    this.sortProps = {
-      sortBy: props.sortBy,
-      sortDirection: props.sortDirection,
-      sort: props.sort,
-    };
-    this.list = props.rows;
-    this.rowCount = props.rows.length;
-  }
-
-  getRow(index: number): Row {
-    return this.list[index];
-  }
-
-  propsChange(nextProps: Props<Row>) {
-    this.sortProps = {
-      sortBy: nextProps.sortBy,
-      sortDirection: nextProps.sortDirection,
-      sort: nextProps.sort,
-    };
-    this.list = nextProps.rows;
-    this.rowCount = nextProps.rows.length;
-  }
-
-  onHeaderClick(): Sorter<Row> {
-    return this;
-  }
-}
-
-const makeSorter = <Row>(props: Props<Row>): Sorter<Row> => {
-  if (
-    props.sort !== null &&
-    props.sortBy !== null &&
-    props.sortDirection !== null
-  ) {
-    return new PropSorter(props);
-  }
-  return new NaiveSorter(props);
-};
-
-export default makeSorter;

package/bpk-component-graphic-promotion/src/BpkGraphicPromo-test.tsx

@@ -1,134 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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 React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-
-// @ts-expect-error Untyped import. Not added as a stub declaration so consumers still have the suppression in their node_modules when shipped untranspiled.
-import { cssModules } from '../../bpk-react-utils';
-
-import BpkGraphicPromo, { TEXT_ALIGN } from './BpkGraphicPromo';
-import type { Props } from './BpkGraphicPromo';
-import STYLES from './BpkGraphicPromo.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const props: Props = {
-  buttonText: 'Learn more',
-  headline: 'Ride your wave',
-  invertVertically: false,
-  onClick: jest.fn(),
-  sponsor: {
-    label: 'Sponsored',
-    logo: 'path/to/logo.png',
-    altText: 'Airline Name',
-  },
-  subheading:
-    'Portugal and 6 more countries have just been added to the UK travel green list',
-  tagline: 'Tagline',
-  textAlign: TEXT_ALIGN.start,
-  contentId: 'mock-content-id',
-};
-
-describe('BpkGraphicPromo', () => {
-  beforeEach(() => {
-    (props.onClick as jest.MockedFunction<Props['onClick']>).mockReset();
-  });
-
-  it('should render correctly with all properties set', () => {
-    const { asFragment } = render(<BpkGraphicPromo {...props} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should support custom class names', () => {
-    const { asFragment } = render(
-      <BpkGraphicPromo className="custom-classname" {...props} />,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when centre aligned', () => {
-    const customProps = { ...props, textAlign: TEXT_ALIGN.center };
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when right aligned', () => {
-    const customProps = { ...props, textAlign: TEXT_ALIGN.end };
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when inverted portrait', () => {
-    const customProps = { ...props, invertVertically: true };
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should not display tagline or subheading when not provided', () => {
-    const customProps = { ...props };
-    delete customProps.tagline;
-    delete customProps.subheading;
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should display the tagline and no sponsor for non-sponsored ad', () => {
-    const customProps = { ...props };
-    delete customProps.sponsor;
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should redirect us to link when card is clicked', () => {
-    render(<BpkGraphicPromo {...props} />);
-
-    const graphicPromo = document.getElementsByClassName(
-      getClassName('bpk-graphic-promo'),
-    )[0];
-    fireEvent.click(graphicPromo);
-
-    expect(props.onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('should redirect us to link when button is clicked', () => {
-    render(<BpkGraphicPromo {...props} />);
-
-    const graphicPromoCTA = document.getElementsByClassName(
-      getClassName('bpk-graphic-promo__cta'),
-    )[0];
-    fireEvent.click(graphicPromoCTA);
-
-    expect(props.onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('should render as expected without a content ID', () => {
-    const { asFragment } = render(
-      <BpkGraphicPromo {...props} contentId={null} />,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/bpk-component-graphic-promotion/src/accessibility-test.tsx

@@ -1,147 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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 React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import BpkGraphicPromo, { TEXT_ALIGN } from './BpkGraphicPromo';
-
-const sponsor = {
-  label: 'Sponsored',
-  logo: 'path/to/logo.png',
-  altText: 'Airline Name',
-};
-const buttonText = 'Learn more';
-const onClick = () => {
-  window.location.href = 'https://www.skyscanner.net';
-};
-
-const tagline = 'Tagline';
-const headline = 'Ride your wave';
-const subheading =
-  'Portugal and 6 more countries have just been added to the UK travel green list';
-
-describe('BpkGraphicPromo accessibility tests', () => {
-  // TODO: Temporarily disabling tests due to a newer version of jest-axe which causes tests to fail when using nested interactive elements
-
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        className="test"
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        sponsor={sponsor}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.start}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues in centre aligned', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        sponsor={sponsor}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.center}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues in right aligned', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        sponsor={sponsor}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.end}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues in inverted portrait', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically
-        onClick={onClick}
-        sponsor={sponsor}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.start}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues when optional text is missing', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        sponsor={sponsor}
-        textAlign={TEXT_ALIGN.start}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues in non-sponsored', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.start}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});