@skyscanner/backpack-web 9.2.0-beta.3 → 10.0.0

package/bpk-component-calendar/src/BpkCalendarDate.module.scss

@@ -51,26 +51,6 @@ $bpk-spacing-v2: true;
     }
   }
 
-  &--colored {
-    color: $bpk-color-white;
-
-    &-default {
-      background-color: $bpk-color-sky-gray-tint-02;
-    }
-
-    &-positive {
-      background-color: $bpk-color-monteverde;
-    }
-
-    &-neutral {
-      background-color: $bpk-color-erfoud;
-    }
-
-    &-negative {
-      background-color: $bpk-color-panjin;
-    }
-  }
-
   &:not(.bpk-calendar-date--selected):active {
     background-color: $bpk-calendar-day-active-background-color;
 
@@ -89,11 +69,6 @@ $bpk-spacing-v2: true;
   &--selected {
     cursor: default;
 
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-calendar-date-selected-background-color,
-      $bpk-calendar-day-selected-background-color
-    );
     @include bpk-themeable-property(
       color,
       --bpk-calendar-date-text-selected-color,
@@ -102,44 +77,36 @@ $bpk-spacing-v2: true;
   }
 
   &--middle {
-    background-color: $bpk-color-sky-blue-tint-03;
-    color: $bpk-color-sky-gray;
+    background-color: $bpk-surface-highlight-day;
+    color: $bpk-text-primary-day;
   }
 
   &--single {
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
   }
 
   &--start {
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
   }
 
   &--end {
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
   }
 
   &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
-    &:not(.bpk-calendar-date--colored) {
-      box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
-      box-shadow: 0 0 0 2px
-        var(
-          --bpk-calendar-date-focused-border-color,
-          $bpk-calendar-day-focused-border-color
-        )
-        inset;
-
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-date-text-focus-color,
-        $bpk-calendar-day-focused-color
-      );
-    }
+    box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
+    box-shadow: 0 0 0 2px
+      var(
+        --bpk-calendar-date-focused-border-color,
+        $bpk-calendar-day-focused-border-color
+      )
+      inset;
 
-    &.bpk-calendar-date--colored {
-      border: (bpk-spacing-sm() / 2) solid
-        $bpk-calendar-day-focused-border-color;
-      box-shadow: 0 0 0 1px $bpk-color-white inset;
-    }
+    @include bpk-themeable-property(
+      color,
+      --bpk-calendar-date-text-focus-color,
+      $bpk-calendar-day-focused-color
+    );
   }
 
   &:disabled,

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -24,6 +24,7 @@ import { cssModules, deprecated, isDeviceIos } from '../../bpk-react-utils';
 import BpkCalendarGridHeader from './BpkCalendarGridHeader';
 import Week from './Week';
 import {
+  addMonths,
   formatIsoDate,
   getCalendarMonthWeeks,
   isSameMonth,
@@ -199,8 +200,8 @@ BpkCalendarGrid.defaultProps = {
   isKeyboardFocusable: true,
   markOutsideDays: true,
   markToday: true,
-  maxDate: null,
-  minDate: null,
+  maxDate: addMonths(new Date(), 12),
+  minDate: new Date(),
   onDateClick: null,
   onDateKeyDown: null,
   preventKeyboardFocus: false,

package/bpk-component-calendar/src/BpkCalendarGrid.module.scss

@@ -40,20 +40,20 @@
     &--start {
       background-image: linear-gradient(
         to right,
-        $bpk-color-white 50%,
-        $bpk-color-sky-blue-tint-03 50%
+        $bpk-surface-default-day 50%,
+        $bpk-surface-highlight-day 50%
       );
     }
 
     &--middle {
-      background-color: $bpk-color-sky-blue-tint-03;
+      background-color: $bpk-surface-highlight-day;
     }
 
     &--end {
       background-image: linear-gradient(
         to left,
-        $bpk-color-white 50%,
-        $bpk-color-sky-blue-tint-03 50%
+        $bpk-surface-default-day 50%,
+        $bpk-surface-highlight-day 50%
       );
     }
   }

package/bpk-component-calendar/src/_variables.scss

@@ -18,7 +18,5 @@
 
 @import '~bpk-mixins/index';
 
-$shadow-bottom: 0 1px 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
-$shadow-left: -1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
-$shadow-right: 1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
+$shadow-bottom: 0 1px 0 0 $bpk-line-day; /* stylelint-disable-line unit-disallowed-list */
 $calendar-width: 7 * ($bpk-calendar-day-size + (2 * $bpk-calendar-day-spacing));

package/bpk-component-card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-card",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "Backpack card component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-link": "^4.0.1",
-    "bpk-component-text": "^8.0.1"
+    "bpk-component-link": "^4.0.3",
+    "bpk-component-text": "^8.0.3"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-checkbox",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "Backpack checkbox component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-storybook-utils": "^2.0.1"
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-chip",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "Backpack chip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^3.0.1",
-    "bpk-component-text": "^8.0.1"
+    "bpk-component-aria-live": "^3.1.0",
+    "bpk-component-text": "^8.0.3"
   }
 }

package/bpk-component-close-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-close-button",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Backpack close button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-storybook-utils": "^2.0.3"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-code",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Backpack code component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-content-cards/README.md

@@ -0,0 +1,43 @@
+# BpkContentCards
+
+> Backpack example component.
+
+- [Storybook link](https://backpack.github.io/storybook)
+- [Content Cards Docs](backpack.github.io/components/content-cards)
+
+## Installation
+
+```sh
+npm install bpk-component-content-cards --save-dev
+```
+
+## Usage
+
+```tsx
+import React from 'react';
+import BpkContentCards from '@skyscanner/backpack-web/bpk-component-content-cards';
+
+<BpkContentCards
+    heading='Heading'
+    cards=[
+        {
+            image: {
+                url: 'http://skyscanner.net/card-1-image-link.jpg',
+                alt: 'People surfing in the ocean',
+            },
+            headline: 'Card headline',
+            description: 'Card description',
+            href: 'http://skyscanner.net/card-1-cta-link.html',
+        },
+    ]
+/>
+
+export default () => <BpkContentCards />;
+```
+
+## Props
+
+| Property                                                                                                         | PropType                                                                                                           | Required                                                                                               | Default Value |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | ------------- |
+| heading                                                                                                          | string                                                                                                             | true                                                                                                   |               |
+| cards <ul><li>image</li><ul><li>url</li><li>alt</li></ul><li>headline</li><li>description</li><li>href</li></ul> | Array <ul><li>Object</li><ul><li>string</li><li>string</li></ul><li>string</li><li>string</li><li>string</li></ul> | true <ul><li>true</li><ul><li>true</li><li>false</li></ul><li>true</li><li>true</li><li>true</li></ul> | ""            |

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

@@ -0,0 +1,21 @@
+/*
+ * 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 BpkContentCards from './src/BpkContentCards';
+
+export default BpkContentCards;

package/bpk-component-content-cards/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "bpk-component-content-cards",
+  "version": "1.0.1",
+  "description": "Backpack content-cards component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "bpk-component-text": "^8.0.3",
+    "bpk-mixins": "^31.1.6",
+    "bpk-react-utils": "^7.0.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}

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

@@ -0,0 +1,88 @@
+/*
+ * 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.module.scss

@@ -0,0 +1,87 @@
+/*
+ * 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';
+
+$bpk-spacing-v2: true;
+
+.bpk-content-card {
+  &--link {
+    color: inherit;
+    font: inherit;
+    text-decoration: inherit;
+  }
+
+  &--horizontal {
+    display: grid;
+    column-gap: bpk-spacing-xxl();
+    grid-template-columns: minmax(min(10%, 50%), $bpk-one-pixel-rem * 620) 40%;
+    align-items: center;
+
+    @include bpk-breakpoint-mobile {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &--horizontal &--image-container {
+    width: 100%;
+    height: $bpk-one-pixel-rem * 420;
+
+    @include bpk-breakpoint-mobile {
+      max-height: $bpk-one-pixel-rem * 180;
+      margin-bottom: bpk-spacing-base();
+    }
+
+    @include bpk-breakpoint-tablet {
+      height: 100%;
+    }
+  }
+
+  &--vertical &--image {
+    height: $bpk-one-pixel-rem * 460;
+    margin-bottom: bpk-spacing-base();
+
+    @include bpk-breakpoint-small-tablet {
+      width: 100%;
+      height: auto;
+      max-height: $bpk-one-pixel-rem * 260;
+    }
+
+    @include bpk-breakpoint-mobile {
+      max-height: $bpk-one-pixel-rem * 180;
+    }
+  }
+
+  &--headline {
+    margin-bottom: $bpk-heading-margin-bottom;
+
+    @include bpk-heading-4;
+  }
+
+  &--description {
+    color: $bpk-color-sky-gray-tint-02;
+
+    @include bpk-body-default;
+  }
+
+  &--image {
+    width: 100%;
+    height: 100%;
+    border-radius: $bpk-border-radius-md;
+    object-fit: cover;
+  }
+}

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

@@ -0,0 +1,84 @@
+/*
+ * 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';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkText from '../../bpk-component-text';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkContentCard.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type CardLayout = 'HORIZONTAL' | 'VERTICAL';
+
+type Props = {
+  card: {
+    image: {
+      url: string;
+      alt?: string;
+    };
+    headline: string;
+    description: string;
+    href: string;
+  };
+  layout: CardLayout;
+};
+
+const BpkContentCard = ({ card, layout }: Props) => (
+  <a
+    className={getClassName(
+      'bpk-content-card--link',
+      layout === 'HORIZONTAL'
+        ? 'bpk-content-card--horizontal'
+        : 'bpk-content-card--vertical',
+    )}
+    href={card.href}
+    target="_blank"
+    rel="noreferrer"
+  >
+    <div className={getClassName('bpk-content-card--image-container')}>
+      {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
+      <img
+        className={getClassName('bpk-content-card--image')}
+        alt={card.image.alt || ''}
+        src={card.image.url}
+        loading="lazy"
+      />
+    </div>
+
+    <div>
+      <BpkText
+        className={getClassName('bpk-content-card--headline')}
+        tagName="h3"
+      >
+        {card.headline}
+      </BpkText>
+      <BpkText
+        className={getClassName('bpk-content-card--description')}
+        tagName="p"
+      >
+        {card.description}
+      </BpkText>
+    </div>
+  </a>
+);
+
+export default BpkContentCard;