@skyscanner/backpack-web 9.3.0 → 11.1.0

package/bpk-component-theme-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "4.0.2",
+  "version": "4.0.5",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-label": "^6.0.2",
-    "bpk-component-select": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-label": "^6.0.5",
+    "bpk-component-select": "^6.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-theme-toggle/src/BpkThemeToggle.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-theme-toggle {
   &__label {

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "6.0.2",
+  "version": "6.0.5",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-icon": "^10.0.2"
+    "bpk-component-button": "^7.0.5",
+    "bpk-component-icon": "^10.0.5"
   }
 }

package/bpk-component-ticket/src/BpkTicket.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "9.0.2",
+  "version": "9.0.5",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,15 +15,15 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@popperjs/core": "^2.11.5",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-text": "^8.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-text": "^8.0.5"
   }
 }

package/bpk-component-tooltip/src/BpkTooltip.module.scss

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
-$bpk-spacing-v2: true;
+@import '~bpk-mixins/index.scss';
 
+$bpk-spacing-v2: true;
 $arrow-size: bpk-spacing-md();
 $arrow-inset-margin: -($bpk-one-pixel-rem * 3);
 $light-arrow-border-color: $bpk-color-sky-gray-tint-06;
@@ -108,6 +108,7 @@ $dark-background-color: $bpk-color-sky-gray;
 
     &--dark {
       background-color: $dark-background-color;
+
       .bpk-tooltip-portal[data-popper-placement='top'] & {
         border-right-color: $dark-background-color;
         border-bottom-color: $dark-background-color;

package/bpk-react-utils/README.md

@@ -157,7 +157,7 @@ const MyComponent = (props) => (
 ```
 
 ```scss
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .my-transition-class {
   transition: opacity $bpk-duration-sm ease-in-out;

package/bpk-react-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-react-utils",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Utilities for Backpack's React components.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-scrim-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-scrim-utils",
-  "version": "6.0.2",
+  "version": "6.0.5",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,8 +16,8 @@
   "dependencies": {
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0"
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-scrim-utils/src/bpk-scrim-content.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-scrim-content {
   position: fixed;

package/bpk-scrim-utils/src/bpk-scrim.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-scrim {
   position: fixed;

package/bpk-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-theming",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "Backpack theming utlities.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "9.3.0",
+  "version": "11.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "@skyscanner/bpk-svgs": "^14.3.8",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "@skyscanner/bpk-svgs": "^14.4.3",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",

package/bpk-component-content-cards/src/BpkContentCard/BpkContentCard-test.tsx

@@ -1,88 +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 React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-import BpkContentCard from './BpkContentCard';
-
-describe('Content Card widget', () => {
-  const horizontalCardTestProps: React.ComponentProps<typeof BpkContentCard> = {
-    card: {
-      image: {
-        url: 'http://skyscanner.net/card-1-image-link.jpg',
-        alt: 'People surfing in the ocean',
-      },
-      headline: 'Card 1 headline',
-      description: 'Card 1 description',
-      href: 'http://skyscanner.net/card-1-cta-link.html',
-    },
-    layout: 'HORIZONTAL',
-  };
-
-  const verticalCardTestProps: React.ComponentProps<typeof BpkContentCard> = {
-    card: {
-      image: {
-        url: 'http://skyscanner.net/card-1-image-link.jpg',
-        alt: 'People surfing in the ocean',
-      },
-      headline: 'Card 1 headline',
-      description: 'Card 1 description',
-      href: 'http://skyscanner.net/card-1-cta-link.html',
-    },
-    layout: 'VERTICAL',
-  };
-
-  it('renders horizontal card correctly', async () => {
-    const { asFragment } = render(
-      <BpkContentCard
-        card={horizontalCardTestProps.card}
-        layout={horizontalCardTestProps.layout}
-      />,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('renders vertical card correctly', async () => {
-    const { asFragment } = render(
-      <BpkContentCard
-        card={verticalCardTestProps.card}
-        layout={verticalCardTestProps.layout}
-      />,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('renders the headline and the description for the card', async () => {
-    render(
-      <BpkContentCard
-        card={horizontalCardTestProps.card}
-        layout={horizontalCardTestProps.layout}
-      />,
-    );
-
-    const expectedElements = ['Card 1 headline', 'Card 1 description'];
-
-    expectedElements.forEach((element) =>
-      expect(screen.getByText(element)).toBeVisible(),
-    );
-  });
-});

package/bpk-component-content-cards/src/BpkContentCard/index.ts

@@ -1,19 +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.
- */
-
-export { default } from './BpkContentCard';

package/bpk-component-content-cards/src/BpkContentCards-test.tsx

@@ -1,126 +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 React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import BpkContentCards from './BpkContentCards';
-
-describe('Content Card widget', () => {
-  const contentContainerTestProps: React.ComponentProps<
-    typeof BpkContentCards
-  > = {
-    heading: 'Header for the component',
-    cards: [
-      {
-        image: {
-          url: 'http://skyscanner.net/card-1-image-link.jpg',
-          alt: 'People surfing in the ocean',
-        },
-        headline: 'Card 1 headline',
-        description: 'Card 1 description',
-        href: 'http://skyscanner.net/card-1-cta-link.html',
-      },
-      {
-        image: {
-          url: 'http://skyscanner.net/card-2-image-link.jpg',
-          alt: 'Man on boat in a fjord',
-        },
-        headline: 'Card 2 headline',
-        description: 'Card 2 description',
-        href: 'http://skyscanner.net/card-2-cta-link.html',
-      },
-      {
-        image: {
-          url: 'http://skyscanner.net/card-3-image-link.jpg',
-          alt: 'Airplane flying over mountains',
-        },
-        headline: 'Card 3 headline',
-        description: 'Card 3 description',
-        href: 'http://skyscanner.net/card-3-cta-link.html',
-      },
-    ],
-  };
-
-  it('renders correctly with 1 card', async () => {
-    const { asFragment } = render(
-      <BpkContentCards
-        heading={contentContainerTestProps.heading}
-        cards={contentContainerTestProps.cards.slice(0, 1)}
-      />,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('renders correctly with 2 cards', async () => {
-    const { asFragment } = render(
-      <BpkContentCards
-        heading={contentContainerTestProps.heading}
-        cards={contentContainerTestProps.cards.slice(0, 2)}
-      />,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('renders correctly with 3 cards', async () => {
-    const { asFragment } = render(
-      <BpkContentCards
-        heading={contentContainerTestProps.heading}
-        cards={contentContainerTestProps.cards}
-      />,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('renders the title, the headline and the description for each card', async () => {
-    render(
-      <BpkContentCards
-        heading={contentContainerTestProps.heading}
-        cards={contentContainerTestProps.cards}
-      />,
-    );
-
-    const expectedElements = [
-      'Header for the component',
-      'Card 1 headline',
-      'Card 1 description',
-      'Card 2 headline',
-      'Card 2 description',
-      'Card 3 headline',
-      'Card 3 description',
-    ];
-
-    expectedElements.forEach((element) =>
-      expect(screen.getByText(element)).toBeTruthy(),
-    );
-  });
-
-  it('does not render anything if the cards are not defined', () => {
-    const { container } = render(
-      <BpkContentCards
-        heading={contentContainerTestProps.heading}
-        cards={[]}
-      />,
-    );
-
-    expect(container.firstChild).toBe(null);
-  });
-});

package/bpk-component-content-cards/src/accessibility-test.tsx

@@ -1,64 +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 React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import BpkContentCards from './BpkContentCards';
-
-const heading = 'Header for the component';
-const cards = [
-  {
-    image: {
-      url: 'http://skyscanner.net/card-1-image-link.jpg',
-      alt: '',
-    },
-    headline: 'Card 1 headline',
-    description: 'Card 1 description',
-    href: 'http://skyscanner.net/card-1-cta-link.html',
-  },
-  {
-    image: {
-      url: 'http://skyscanner.net/card-2-image-link.jpg',
-      alt: '',
-    },
-    headline: 'Card 2 headline',
-    description: 'Card 2 description',
-    href: 'http://skyscanner.net/card-2-cta-link.html',
-  },
-  {
-    image: {
-      url: 'http://skyscanner.net/card-3-image-link.jpg',
-      alt: '',
-    },
-    headline: 'Card 3 headline',
-    description: 'Card 3 description',
-    href: 'http://skyscanner.net/card-3-cta-link.html',
-  },
-];
-
-describe('BpkContentCards accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(
-      <BpkContentCards heading={heading} cards={cards} />,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});

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

@@ -1,110 +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 { SortDirection } from 'react-virtualized';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down';
-import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up';
-import { withRtlSupport } from '../../bpk-component-icon';
-
-import { hasClassName } from './utils';
-import STYLES from './BpkDataTableColumn.module.scss';
-import { type SortDirectionType, type SortProps } from './sort-types';
-
-const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);
-const UpIcon = withRtlSupport(BpkSmallArrowUpIcon);
-
-const getClassName = cssModules(STYLES);
-const upIconClassName = getClassName('bpk-data-table-column__sort-icon--up');
-const downIconClassName = getClassName(
-  'bpk-data-table-column__sort-icon--down',
-);
-
-export const getSortIconDirection = (element: Element): ?SortDirectionType => {
-  if (
-    hasClassName(element, upIconClassName) ||
-    hasClassName(element.parentElement, upIconClassName)
-  ) {
-    return SortDirection.ASC;
-  }
-  if (
-    hasClassName(element, downIconClassName) ||
-    hasClassName(element.parentElement, downIconClassName)
-  ) {
-    return SortDirection.DESC;
-  }
-  return null;
-};
-
-type Props = {
-  dataKey: string,
-  label: string,
-  disableSort: boolean,
-  ...$Exact<SortProps>,
-};
-export default ({
-  dataKey,
-  disableSort,
-  label,
-  sortBy,
-  sortDirection,
-}: Props) => {
-  const children = [
-    <span
-      className={getClassName('bpk-data-table-column__header')}
-      key="label"
-      title={label}
-    >
-      {label}
-    </span>,
-  ];
-
-  if (!disableSort) {
-    const upIconClassNames = [
-      getClassName('bpk-data-table-column__sort-icon'),
-      upIconClassName,
-    ];
-
-    const downIconClassNames = [
-      getClassName('bpk-data-table-column__sort-icon'),
-      downIconClassName,
-    ];
-
-    if (sortBy === dataKey) {
-      (sortDirection === SortDirection.ASC
-        ? upIconClassNames
-        : downIconClassNames
-      ).push(getClassName('bpk-data-table-column__sort-icon--selected'));
-    }
-
-    children.push(
-      <div
-        className={getClassName('bpk-data-table-column__sort-icons')}
-        key="sort"
-      >
-        <UpIcon className={upIconClassNames.join(' ')} />
-        <DownIcon className={downIconClassNames.join(' ')} />
-      </div>,
-    );
-  }
-
-  return children;
-};