@skyscanner/backpack-web 9.2.0 → 11.0.0

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.1",
+  "version": "5.1.3",
   "description": "Backpack card component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-link": "^4.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-link": "^4.0.4",
+    "bpk-component-text": "^8.0.4"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-checkbox",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Backpack checkbox component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-storybook-utils": "^2.0.4"
   }
 }

package/bpk-component-chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-chip",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "description": "Backpack chip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-mixins": "^31.6.3",
     "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.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-aria-live": "^3.1.1",
+    "bpk-component-text": "^8.0.4"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-close-button",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "Backpack close button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-storybook-utils": "^2.0.4"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-code",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "Backpack code component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "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.js

@@ -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.2",
+  "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.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "bpk-component-text": "^8.0.4",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}

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

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

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/BpkContentCards.js

@@ -0,0 +1,72 @@
+/*
+ * 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 BpkContentCard from './BpkContentCard';
+import STYLES from './BpkContentCards.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  heading: string,
+  cards: Array<{
+    image: {
+      url: string,
+      alt?: string,
+    },
+    headline: string,
+    description: string,
+    href: string,
+  }>,
+};
+
+const BpkContentCards = ({ cards, heading }: Props) => {
+  if (cards.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <BpkText
+        tagName="h2"
+        className={getClassName('bpk-content-cards--header-text')}
+      >
+        {heading}
+      </BpkText>
+      <div role="list" className={getClassName('bpk-content-cards--layout')}>
+        {cards.map((card) => (
+          <div role="listitem">
+            <BpkContentCard
+              key={card.image.url}
+              card={card}
+              layout={cards.length === 1 ? 'HORIZONTAL' : 'VERTICAL'}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BpkContentCards;

package/bpk-component-content-cards/src/BpkContentCards.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-cards{display:flex}

package/bpk-component-content-cards/src/BpkContentCards.module.scss

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable selector-max-compound-selectors */
+@import '~bpk-mixins/index';
+
+$bpk-spacing-v2: true;
+
+.bpk-content-cards {
+  &--header-text {
+    margin-bottom: bpk-spacing-base();
+
+    @include bpk-heading-2;
+
+    @include bpk-breakpoint-mobile {
+      @include bpk-heading-3;
+    }
+  }
+
+  &--layout {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax($bpk-one-pixel-rem * 50, 1fr)
+    );
+    grid-auto-flow: column;
+    gap: bpk-spacing-base();
+
+    @include bpk-breakpoint-small-tablet {
+      grid-template-columns: 1fr;
+      grid-auto-flow: row;
+      gap: bpk-spacing-lg();
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-content-container",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "description": "Backpack content container component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },