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

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

@@ -1,201 +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 type { KeyboardEvent, MouseEvent } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText from '../../bpk-component-text';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButton from '../../bpk-component-button';
-
-import STYLES from './BpkGraphicPromo.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const ACCESSIBILITY_KEYS = {
-  Enter: 13 /* Enter */,
-  Space: 32 /* Space */,
-};
-
-const isAccessibilityClick = (event: KeyboardEvent<HTMLElement>) =>
-  Object.keys(ACCESSIBILITY_KEYS).includes(event.key) ||
-  Object.values(ACCESSIBILITY_KEYS).includes(event.keyCode || event.which);
-
-export const TEXT_ALIGN = {
-  start: 'start',
-  center: 'center',
-  end: 'end',
-} as const;
-
-export type Props = {
-  className?: string | null;
-  contentId?: string | null;
-  tagline?: string | null;
-  headline: string;
-  subheading?: string | null;
-  sponsor?: {
-    label: string;
-    logo: string;
-    altText: string;
-  } | null;
-  buttonText: string;
-  onClick: () => void;
-  invertVertically?: boolean;
-  textAlign: (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN];
-  style?: {};
-};
-
-const constructAriaLabel = ({
-  buttonText,
-  headline,
-  sponsor,
-  subheading,
-  tagline,
-}: Pick<
-  Props,
-  'buttonText' | 'headline' | 'sponsor' | 'subheading' | 'tagline'
->) => {
-  const text: string[] = [];
-  const addText = (value?: string | null) => value && text.push(value);
-
-  if (sponsor) {
-    addText(sponsor.label);
-    addText(sponsor.altText);
-  } else {
-    addText(tagline);
-  }
-
-  addText(headline);
-  addText(subheading);
-  addText(buttonText);
-
-  return text.join('. ');
-};
-
-const BpkGraphicPromo = ({
-  buttonText,
-  className = null,
-  contentId,
-  headline,
-  invertVertically = false,
-  onClick,
-  sponsor = null,
-  style = {},
-  subheading = null,
-  tagline = null,
-  textAlign,
-}: Props) => {
-  // FIXME: Use useCallback() here when React is updated.
-  const onClickWrapper = (event: MouseEvent<HTMLElement>) => {
-    event.stopPropagation();
-    onClick();
-  };
-
-  const onKeyWrapper = (event: KeyboardEvent<HTMLElement>) =>
-    isAccessibilityClick(event) && onClick();
-
-  const cardClasses = getClassName('bpk-card', 'bpk-graphic-promo', className);
-  const containerClasses = getClassName(
-    'bpk-graphic-promo__container',
-    `bpk-graphic-promo__container--${textAlign}`,
-    invertVertically && 'bpk-graphic-promo__container--inverted',
-  );
-
-  const getTextClasses = (baseClass: string) =>
-    getClassName(baseClass, `${baseClass}--${textAlign}`);
-
-  return (
-    // The card appears as a single component for the screen reader; its children are hidden. The card handles mouse
-    // clicks and key presses (Enter/Space) for the whole component, as described here:
-    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
-    <div
-      id={contentId || ''}
-      className={cardClasses}
-      style={style}
-      role="link"
-      aria-label={constructAriaLabel({
-        buttonText,
-        headline,
-        sponsor,
-        subheading,
-        tagline,
-      })}
-      tabIndex={0}
-      onClick={onClickWrapper}
-      onKeyDown={onKeyWrapper}
-    >
-      <div
-        id={(contentId && `${contentId}__content`) || ''}
-        className={containerClasses}
-        aria-hidden
-      >
-        <div className={getTextClasses('bpk-graphic-promo__sponsor-content')}>
-          {sponsor && (
-            <>
-              <BpkText
-                tagName="span"
-                className={getClassName('bpk-graphic-promo__sponsor-label')}
-              >
-                {sponsor.label}
-              </BpkText>
-              <img
-                className={getClassName('bpk-graphic-promo__sponsor-logo')}
-                alt={sponsor.altText}
-                src={sponsor.logo}
-              />
-            </>
-          )}
-        </div>
-        <div className={getTextClasses('bpk-graphic-promo__promo-content')}>
-          {!sponsor && tagline && (
-            <BpkText
-              tagName="span"
-              className={getClassName('bpk-graphic-promo__tagline')}
-            >
-              {tagline}
-            </BpkText>
-          )}
-          <BpkText
-            tagName="h2"
-            className={getClassName('bpk-graphic-promo__headline')}
-          >
-            {headline}
-          </BpkText>
-          {subheading && (
-            <BpkText
-              tagName="p"
-              className={getClassName('bpk-graphic-promo__subheading')}
-            >
-              {subheading}
-            </BpkText>
-          )}
-          <BpkButton
-            primaryOnDark
-            className={getClassName('bpk-graphic-promo__cta')}
-            onClick={onClickWrapper}
-            tabIndex={-1} /* button is not focusable for accessibility */
-          >
-            {buttonText}
-          </BpkButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default BpkGraphicPromo;

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

@@ -1,146 +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 { 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();
-  });
-});

package/bpk-component-grid-toggle/README.md

@@ -1,24 +0,0 @@
-# bpk-component-grid-toggle
-
-> Backpack vertical grid toggle component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkGridToggle from '@skyscanner/backpack-web/bpk-component-grid-toggle';
-
-export default () => (
-  <BpkGridToggle />
-);
-```
-
-## Props
-
-| Property         | PropType | Required | Default Value |
-| ---------------- | -------- | -------- | ------------- |
-| className        | string   | false    | null          |
-| targetContainer  | string   | false    | 'body'        |

package/bpk-component-grid-toggle/src/BpkGridToggle.module.scss

@@ -1,52 +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-vertical-grid {
-  &--on {
-    position: relative;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      content: '';
-      display: block;
-      z-index: 9999;
-      width: auto;
-      height: auto;
-      background: linear-gradient(
-          to bottom,
-          rgba($bpk-status-danger-spot-day, 0.3) 0,
-          transparent $bpk-one-pixel-rem
-        )
-        repeat left 0;
-      background-size: $bpk-spacing-xs $bpk-spacing-xs;
-      pointer-events: none;
-    }
-
-    &:active {
-      &::after {
-        display: none;
-      }
-    }
-  }
-}

package/bpk-component-horizontal-nav/README.md

@@ -1,101 +0,0 @@
-# bpk-component-horizontal-nav
-
-> Backpack horizontal nav component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { Component } from 'react';
-import BpkHorizontalNav, { BpkHorizontalNavItem } from '@skyscanner/backpack-web/bpk-component-horizontal-nav';
-
-export default class App extends Component {
-  constructor() {
-    super();
-    this.state = {
-      selected: 'flights',
-    };
-  }
-
-  onClick = (e) => {
-    this.setState({
-      selected: e.target.name,
-    });
-  }
-
-  render() {
-    return (
-      <BpkHorizontalNav>
-        <BpkHorizontalNavItem
-          name="flights"
-          selected={this.state.selected === 'flights'}
-          onClick={this.onClick}
-        >
-          Flights
-        </BpkHorizontalNavItem>
-        <BpkHorizontalNavItem
-          name="hotels"
-          selected={this.state.selected === 'hotels'}
-          onClick={this.onClick}
-        >
-          Hotels
-        </BpkHorizontalNavItem>
-        <BpkHorizontalNavItem
-          name="car-hire"
-          selected={this.state.selected === 'car-hire'}
-          onClick={this.onClick}
-        >
-          Car hire
-        </BpkHorizontalNavItem>
-      </BpkHorizontalNav>
-    );
-  }
-};
-```
-
-## Props
-
-### BpkHorizontalNav
-
-| Property                          | PropType | Required | Default Value |
-| --------------------------------- | -------- | -------- | ------------- |
-| children                          | node     | true     | -             |
-| autoScrollToSelected              | bool     | false    | false         |
-| className                         | string   | false    | null          |
-| leadingScrollIndicatorClassName   | string   | false    | null          |
-| showUnderline                     | bool     | false    | true          |
-| trailingScrollIndicatorClassName  | string   | false    | null          |
-| type                              | oneOf('default', 'light') | false | 'default' |
-
-#### `autoScrollToSelected`
-
-Ensures that the selected item is within view when loaded on narrow-screened devices.
-
-#### `showUnderline`
-
-When set to `false`, the bottom border on the component isn't included. This refers
-to the underline on the whole `BpkHorizontalNav`, not the line that appears under the selected item.
-
-### BpkHorizontalNavItem
-
-| Property    | PropType | Required | Default Value |
-| ----------- | -------- | -------- | ------------- |
-| children    | node     | true     | -             |
-| className   | string   | false    | null          |
-| spaceAround | bool     | false    | false         |
-| selected    | bool     | false    | false         |
-| disabled    | bool     | false    | false         |
-| href        | string   | false    | null          |
-
-**Note:** `disabled` and `selected` are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
-
-## Theme Props
-
-* `horizontalNavLinkColor`
-* `horizontalNavLinkHoverColor`
-* `horizontalNavLinkActiveColor`
-* `horizontalNavLinkSelectedColor`
-* `horizontalNavBarSelectedColor`

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss

@@ -1,37 +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-horizontal-nav {
-  &--show-default-underline {
-    @include bpk-border-bottom-sm($bpk-line-day, '');
-  }
-
-  &--show-light-underline {
-    @include bpk-border-bottom-sm($bpk-line-day, '');
-  }
-
-  &__list {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    align-items: stretch;
-    list-style-type: none;
-  }
-}