@skyscanner/backpack-web 10.0.0 → 11.1.1

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "5.0.3",
+  "version": "5.0.6",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.6.1",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.6",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^6.0.3",
-    "bpk-storybook-utils": "^2.0.3"
+    "bpk-component-label": "^6.0.6",
+    "bpk-storybook-utils": "^2.0.6"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-textarea/src/BpkTextarea.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-theme-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "4.0.3",
+  "version": "4.0.6",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.2.0",
-    "bpk-component-label": "^6.0.3",
-    "bpk-component-select": "^6.0.3",
-    "bpk-mixins": "^31.6.1",
-    "bpk-react-utils": "^7.0.0",
+    "@skyscanner/bpk-foundations-web": "^9.4.0",
+    "bpk-component-label": "^6.0.6",
+    "bpk-component-select": "^6.0.6",
+    "bpk-mixins": "^31.6.6",
+    "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.3",
+  "version": "6.0.6",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.6.1",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.6",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.3",
-    "bpk-component-icon": "^10.0.3"
+    "bpk-component-button": "^7.0.6",
+    "bpk-component-icon": "^10.0.6"
   }
 }

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.3",
+  "version": "9.0.6",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,15 +15,15 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@popperjs/core": "^2.11.5",
-    "bpk-mixins": "^31.6.1",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.6",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.2.0",
-    "bpk-component-text": "^8.0.3"
+    "@skyscanner/bpk-foundations-web": "^9.4.0",
+    "bpk-component-text": "^8.0.6"
   }
 }

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.3",
+  "version": "6.0.6",
   "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.6.1",
-    "bpk-react-utils": "^7.0.0"
+    "bpk-mixins": "^31.6.6",
+    "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.3",
+  "version": "3.0.5",
   "description": "Backpack theming utlities.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "@skyscanner/bpk-foundations-web": "^9.4.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "10.0.0",
+  "version": "11.1.1",
   "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.2.0",
-    "@skyscanner/bpk-svgs": "^14.4.1",
+    "@skyscanner/bpk-foundations-web": "^9.4.0",
+    "@skyscanner/bpk-svgs": "^14.5.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.6.1",
+    "bpk-mixins": "^31.6.6",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",

package/bpk-component-aria-live/src/BpkAriaLive-test.tsx

@@ -1,60 +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 BpkAriaLive, { POLITENESS_SETTINGS } from './BpkAriaLive';
-import type { PolitenessSetting } from './BpkAriaLive';
-
-describe('BpkAriaLive', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(<BpkAriaLive>Backpack</BpkAriaLive>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  Object.keys(POLITENESS_SETTINGS).forEach((politenessSetting) => {
-    it(`should render correctly with politenessSetting="${politenessSetting}"`, () => {
-      const { asFragment } = render(
-        <BpkAriaLive politenessSetting={politenessSetting as PolitenessSetting}>
-          Backpack
-        </BpkAriaLive>,
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-
-  it('should render correctly with the "visible" prop', () => {
-    const { asFragment } = render(<BpkAriaLive visible>Backpack</BpkAriaLive>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should support custom class names', () => {
-    const { asFragment } = render(
-      <BpkAriaLive className="custom-classname">Backpack</BpkAriaLive>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should support arbitrary props', () => {
-    const { asFragment } = render(
-      <BpkAriaLive testid="123">Backpack</BpkAriaLive>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/bpk-component-aria-live/src/accessibility-test.tsx

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

package/bpk-component-content-cards/src/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/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();
-  });
-});