@skyscanner/backpack-web 9.2.0 → 9.3.0

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.0",
+  "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.2",
+    "bpk-mixins": "^31.1.6",
+    "bpk-react-utils": "^7.0.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}

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

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

@@ -0,0 +1,19 @@
+/*
+ * 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

@@ -0,0 +1,126 @@
+/*
+ * 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/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-cards/src/BpkContentCards.tsx

@@ -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/accessibility-test.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",