@skyscanner/backpack-web 9.1.0-alpha.1 → 9.2.0-beta.2

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss

@@ -0,0 +1,270 @@
+/*
+ * 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 '~bpk-mixins/index';
+
+@mixin aspect-ratio($ratio) {
+  padding-top: $ratio;
+  box-sizing: border-box;
+}
+
+@mixin fill-parent {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 100%;
+}
+
+@mixin content-alignment {
+  &--start {
+    align-items: start;
+  }
+
+  &--center {
+    align-items: center;
+  }
+
+  &--end {
+    align-items: end;
+  }
+}
+
+@mixin text-alignment {
+  &--start {
+    align-items: start;
+    text-align: start;
+  }
+
+  &--center {
+    align-items: center;
+    text-align: center;
+  }
+
+  &--end {
+    align-items: start;
+    text-align: start;
+  }
+}
+
+@mixin reset-alignment {
+  align-items: start;
+  text-align: start;
+}
+
+.bpk-card {
+  @include bpk-card;
+}
+
+.bpk-graphic-promo {
+  max-width: 76.5rem;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: $bpk-color-sky-blue;
+  background-position: center;
+  background-size: cover;
+  color: $bpk-color-white;
+  box-shadow: none;
+
+  @include bpk-breakpoint-small-tablet {
+    @include aspect-ratio(133%);
+  }
+
+  /* remove shadow and hightlights from Backpack Card */
+  &::after {
+    display: none;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @include content-alignment;
+
+    @include bpk-breakpoint-above-tablet {
+      height: 28.75rem;
+
+      @include bpk-margin-leading(bpk-spacing-xxxl(), false);
+      @include bpk-margin-trailing(bpk-spacing-xxl(), false);
+
+      /* adjusting for 1.5rem difference between margins */
+      &--center > * {
+        @include bpk-margin-trailing(bpk-spacing-lg());
+      }
+    }
+
+    @include bpk-breakpoint-tablet {
+      height: 22.5rem;
+
+      @include bpk-margin-leading(bpk-spacing-xxl(), false);
+      @include bpk-margin-trailing(bpk-spacing-xl(), false);
+
+      /* adjusting for 1.5rem difference between margins */
+      &--center > * {
+        @include bpk-margin-trailing(bpk-spacing-md());
+      }
+    }
+
+    @include bpk-breakpoint-small-tablet {
+      padding: bpk-spacing-xl();
+      justify-content: space-between;
+
+      @include reset-alignment;
+      @include bpk-margin-leading(0);
+      @include fill-parent;
+
+      &--inverted {
+        flex-direction: column-reverse;
+      }
+
+      > * {
+        @include bpk-margin-leading(0);
+      }
+    }
+
+    @include bpk-breakpoint-small-mobile {
+      padding: bpk-spacing-lg();
+    }
+  }
+
+  &__tagline {
+    margin-bottom: bpk-spacing-md();
+
+    @include bpk-heading-5;
+
+    @include bpk-breakpoint-tablet {
+      @include bpk-label-1;
+    }
+
+    @include bpk-breakpoint-small-tablet {
+      @include bpk-subheading;
+    }
+
+    @include bpk-breakpoint-small-mobile {
+      @include bpk-label-1;
+    }
+  }
+
+  &__headline {
+    @include bpk-breakpoint-above-tablet {
+      @include bpk-hero-5;
+
+      &:not(:last-child) {
+        margin-bottom: bpk-spacing-md();
+      }
+    }
+
+    @include bpk-breakpoint-tablet {
+      @include bpk-heading-1;
+
+      &:not(:last-child) {
+        margin-bottom: bpk-spacing-md();
+      }
+    }
+
+    @include bpk-breakpoint-small-tablet {
+      margin-bottom: bpk-spacing-md();
+    }
+
+    @include bpk-breakpoint-mobile {
+      @include bpk-heading-2;
+    }
+  }
+
+  &__subheading {
+    @include bpk-body-default;
+
+    @include bpk-breakpoint-tablet {
+      @include bpk-heading-5;
+    }
+
+    @include bpk-breakpoint-small-tablet {
+      @include bpk-heading-3;
+    }
+
+    @include bpk-breakpoint-mobile {
+      @include bpk-heading-5;
+    }
+  }
+
+  &__promo-content,
+  &__sponsor-content {
+    display: flex;
+    flex-direction: column;
+
+    @include text-alignment;
+
+    @include bpk-breakpoint-above-tablet {
+      width: 22.5rem;
+    }
+
+    @include bpk-breakpoint-tablet {
+      width: 20rem;
+    }
+
+    @include bpk-breakpoint-small-tablet {
+      width: initial;
+
+      @include reset-alignment;
+    }
+  }
+
+  &__sponsor-content {
+    display: flex;
+    margin-bottom: bpk-spacing-base();
+    flex-direction: column;
+
+    @include bpk-breakpoint-small-tablet {
+      margin-bottom: initial;
+    }
+  }
+
+  &__sponsor-label {
+    margin-bottom: bpk-spacing-sm();
+
+    @include bpk-label-1;
+
+    @include bpk-breakpoint-small-tablet {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-heading-3;
+    }
+
+    @include bpk-breakpoint-small-mobile {
+      margin-bottom: bpk-spacing-sm();
+
+      @include bpk-label-1;
+    }
+  }
+
+  &__sponsor-logo {
+    width: auto;
+    max-width: 9.25rem;
+    height: auto;
+    max-height: 3.75rem;
+  }
+
+  &__cta {
+    margin-top: bpk-spacing-xl();
+
+    @include bpk-breakpoint-small-tablet {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,201 @@
+/*
+ * 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';
+// @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';
+// @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 BpkText from 'bpk-component-text';
+// @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 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: React.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 = {
+  buttonText: string;
+  className?: string | null;
+  contentId?: string | null;
+  headline: string;
+  invertVertically?: boolean;
+  onClick: () => void;
+  sponsor?: {
+    label: string;
+    logo: string;
+    altText: string;
+  } | null;
+  style?: {};
+  subheading?: string | null;
+  tagline?: string | null;
+  textAlign: typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
+};
+
+const constructAriaLabel = (
+  buttonText: Props['buttonText'],
+  headline: Props['headline'],
+  sponsor: Props['sponsor'],
+  subheading: Props['subheading'],
+  tagline: Props['tagline'],
+) => {
+  const text: string[] = [];
+  const addText = (value: string) => value && text.push(value);
+
+  if (sponsor) {
+    addText(sponsor.label);
+    addText(sponsor.altText);
+  } else if (tagline) {
+    addText(tagline);
+  }
+
+  addText(headline);
+
+  if (subheading) {
+    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: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    onClick();
+  };
+  const onKeyWrapper = (event: React.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

@@ -0,0 +1,147 @@
+/*
+ * 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();
+  });
+});

package/bpk-component-grid/README.md

@@ -0,0 +1,90 @@
+# bpk-component-grid
+
+> Backpack grid components.
+
+## Installation
+
+```sh
+npm install bpk-component-grid --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import { BpkGridContainer, BpkGridRow, BpkGridColumn } from 'bpk-component-grid';
+
+export default () => (
+  <BpkGridContainer>
+    <BpkGridRow>
+      <BpkGridColumn width={8} tabletWidth={12}>
+        Search controls
+      </BpkGridColumn>
+      <BpkGridColumn width={4} tabletWidth={0}>
+        MPU
+      </BpkGridColumn>
+    </BpkGridRow>
+    <BpkGridRow>
+      <BpkGridColumn width={12}>
+        Provider logos
+      </BpkGridColumn>
+    </BpkGridRow>
+    <BpkGridRow>
+      <BpkGridColumn width={4} mobileWidth={12}>
+        Content panel
+      </BpkGridColumn>
+      <BpkGridColumn width={4} mobileWidth={12}>
+        Content panel
+      </BpkGridColumn>
+      <BpkGridColumn width={4} mobileWidth={12}>
+        Content panel
+      </BpkGridColumn>
+    </BpkGridRow>
+    <BpkGridRow>
+      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
+        Confidence statement
+      </BpkGridColumn>
+      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
+        Confidence statement
+      </BpkGridColumn>
+      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
+        Confidence statement
+      </BpkGridColumn>
+      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
+        Confidence statement
+      </BpkGridColumn>
+    </BpkGridRow>
+  </BpkGridContainer>
+);
+```
+
+## Props
+
+### BpkGridContainer
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | node     | true     | -             |
+| debug     | bool     | false    | false         |
+| fullWidth | bool     | false    | false         |
+
+### BpkGridRow
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | node     | true     | -             |
+| padded    | bool     | false    | true          |
+
+### BpkGridColumn
+
+| Property     | PropType | Required | Default Value |
+| ------------ | -------- | -------- | ------------- |
+| children     | node     | true     | -             |
+| width        | number   | true     | -             |
+| mobileWidth  | number   | false    | null          |
+| tabletWidth  | number   | false    | null          |
+| offset       | number   | false    | null          |
+| mobileOffset | number   | false    | null          |
+| tabletOffset | number   | false    | null          |
+| padded       | bool     | false    | true          |
+| debug        | bool     | false    | false         |