[BDES-96] [BpkCardList] Add Grid and Stack Layouts

examples/bpk-component-card-list/examples.tsx

@@ -16,16 +16,97 @@
  * limitations under the License.
  */
 
-import BpkCardList from "../../packages/bpk-component-card-list";
+import { useState } from 'react';
+
+import BpkCard from '../../packages/bpk-component-card';
+import BpkCardList from '../../packages/bpk-component-card-list';
+import BpkImage from '../../packages/bpk-component-image';
+import BpkText, {
+  TEXT_STYLES,
+} from '../../packages/bpk-component-text/src/BpkText';
+
+import STYLES from './exampless.module.scss';
+
+const DestinationCard = (i: number) => (
+  <BpkCard href="/" padded={false}>
+    <div className={STYLES['bpkdocs-consumer-level']}>
+      <BpkImage
+        aspectRatio={3000 / 1800}
+        altText="card image"
+        src="https://content.skyscnr.com/7adba3a46af3ca29695f96937d19fcf1/GettyImages-149127892.jpg?crop=960px:640px&quality=100"
+      />
+
+      <div className={STYLES['bpk-bottom']}>
+        <div className={STYLES['bpk-column']}>
+          <BpkText textStyle={TEXT_STYLES.heading4}>
+            {`Destination Name ${i}`}
+          </BpkText>
+          <BpkText>Country</BpkText>
+        </div>
+
+        <div className={STYLES['bpk-column']}>
+          <BpkText>Direct</BpkText>
+          <BpkText textStyle={TEXT_STYLES.heading4}>£100</BpkText>
+        </div>
+      </div>
+    </div>
+  </BpkCard>
+);
+
+type ExampleCard = typeof DestinationCard;
+
+const cards = (cardType: ExampleCard) => {
+  const cardList = [];
+  for (let i = 0; i < 14; i += 1) {
+    cardList.push(cardType(i));
+  }
+  return cardList;
+};
 
 const BasicExample = () => (
   <BpkCardList
     title="Must-visit spots"
     description="Check out these world-famous destinations perfect for visiting in spring."
     buttonText="Explore More"
-    buttonHref="https://www.skyscanner.net/"
-    onButtonClick={() => {}}
+    buttonHref=""
+    onButtonClick={() => null}
+    cardList={cards(DestinationCard)}
+    layoutDesktop="grid"
+    layoutMobile="stack"
   />
 );
 
-export default BasicExample;
+const GridToStackExample = () => (
+  <BpkCardList
+    title="Must-visit spots"
+    description="Check out these world-famous destinations perfect for visiting in spring."
+    cardList={cards(DestinationCard)}
+    layoutDesktop="grid"
+    layoutMobile="stack"
+    onButtonClick={() => null}
+    accessory="button"
+    buttonText="Explore more"
+  />
+);
+
+const GridToStackWithExpandExample = () => {
+  const [expandText, setExpandText] = useState('Show more');
+
+  return (
+    <BpkCardList
+      title="Must-visit spots"
+      description="Check out these world-famous destinations perfect for visiting in spring."
+      cardList={cards(DestinationCard)}
+      layoutDesktop="grid"
+      layoutMobile="stack"
+      onButtonClick={() =>
+        setExpandText(expandText === 'Show more' ? 'Show less' : 'Show more')
+      }
+      accessory="expand"
+      buttonText="Explore more"
+      expandText={expandText}
+    />
+  );
+};
+
+export { BasicExample, GridToStackExample, GridToStackWithExpandExample };

examples/bpk-component-card-list/exampless.module.scss

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+@use '../../packages/unstable__bpk-mixins/tokens';
+
+.bpkdocs-consumer-level {
+  img {
+    border-top-left-radius: tokens.$bpk-border-radius-md;
+    border-top-right-radius: tokens.$bpk-border-radius-md;
+    overflow: hidden;
+  }
+
+  .bpk-bottom {
+    display: flex;
+    padding: tokens.bpk-spacing-lg();
+    justify-content: space-between;
+  }
+
+  .bpk-column {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.bpkdocs-consumer-level__internal-card {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+
+  .bpkdocs-internal-link-img {
+    width: 20%;
+  }
+
+  img {
+    border-top-left-radius: tokens.$bpk-border-radius-md;
+    border-bottom-left-radius: tokens.$bpk-border-radius-md;
+  }
+
+  .bpk-info {
+    margin: auto tokens.bpk-spacing-lg();
+    flex-direction: column;
+  }
+
+  .bpk-verticalLinks {
+    &_bullet {
+      margin: 0 tokens.bpk-spacing-sm();
+      color: tokens.$bpk-core-accent-day;
+    }
+  }
+}

examples/bpk-component-card-list/stories.ts

@@ -16,22 +16,27 @@
  * limitations under the License.
  */
 
-import BpkCardList from "../../packages/bpk-component-card-list";
+import BpkCardList from '../../packages/bpk-component-card-list';
 
-import BasicExample from './examples';
+import {
+  BasicExample,
+  GridToStackExample,
+  GridToStackWithExpandExample,
+} from './examples';
 
 export default {
   title: 'bpk-component-card-list',
   component: BpkCardList,
 };
 
 export const Basic = BasicExample;
+export const GridToStack = GridToStackExample;
+export const GridToStackWithExpand = GridToStackWithExpandExample;
 
 export const VisualTest = Basic;
-
 export const VisualTestWithZoom = {
   render: VisualTest,
   args: {
-    zoomEnabled: true
-  }
-}
+    zoomEnabled: true,
+  },
+};

packages/bpk-component-card-list/index.ts

@@ -16,6 +16,6 @@
  * limitations under the License.
  */
 
-import BpkCardList from "./src/BpkCardList";
+import BpkCardList from './src/BpkCardList';
 
-export default BpkCardList;
+export default BpkCardList;

packages/bpk-component-card-list/src/BpkCardList-test.tsx

@@ -16,24 +16,107 @@
  * limitations under the License.
  */
 
-import { render, screen } from "@testing-library/react";
+import { getByText, render, screen } from '@testing-library/react';
 
-import BpkCardList from "./BpkCardList";
+import mockCards from '../testMocks';
+
+import BpkCardList from './BpkCardList';
 
 describe('BpkCardList', () => {
-  it('should render correctly', () => {
+  it('should render correctly with grid, stack and no accessory', () => {
     render(
       <BpkCardList
         title="Title"
         description="Description"
+        layoutDesktop="grid"
+        layoutMobile="stack"
+        cardList={mockCards(2)}
+      />,
+    );
+
+    const cardsSection = screen.getByTestId('bpk-card-list--card-list')
+      .firstChild?.firstChild;
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(cardsSection?.childNodes.length).toBe(2);
+  });
+
+  it('should render correctly with grid, stack, header button and no accessory', () => {
+    render(
+      <BpkCardList
+        title="Title"
+        description="Description"
+        layoutDesktop="grid"
+        layoutMobile="stack"
+        cardList={mockCards(2)}
+        buttonText="Header Button"
+        buttonHref="#"
+        onButtonClick={() => {}}
+      />,
+    );
+
+    const header = screen.getByTestId('bpk-card-list').firstElementChild;
+    const cardsSection = screen.getByTestId('bpk-card-list--card-list')
+      .firstChild?.firstChild;
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(
+      getByText(header as HTMLElement, 'Header Button'),
+    ).toBeInTheDocument();
+    expect(cardsSection?.childNodes.length).toBe(2);
+  });
+
+  it('should render correctly with grid, stack and expand accessory', () => {
+    render(
+      <BpkCardList
+        title="Title"
+        description="Description"
+        layoutDesktop="grid"
+        layoutMobile="stack"
+        cardList={mockCards(2)}
+        accessory="expand"
+        expandText="Expand"
+      />,
+    );
+
+    const cardsAndAccessorySection = screen.getByTestId(
+      'bpk-card-list--card-list',
+    ).firstChild;
+    const cardsSection = cardsAndAccessorySection?.firstChild;
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Expand')).toBeInTheDocument();
+    expect(cardsSection?.childNodes.length).toBe(2);
+    expect(
+      getByText(cardsAndAccessorySection as HTMLElement, 'Expand'),
+    ).toBeInTheDocument();
+  });
+
+  it('should render correctly with grid, stack and button accessory', () => {
+    render(
+      <BpkCardList
+        title="Title"
+        description="Description"
+        layoutDesktop="grid"
+        layoutMobile="stack"
+        cardList={mockCards(2)}
+        accessory="button"
         buttonText="Button"
-        buttonHref="https://www.skyscanner.net"
         onButtonClick={() => {}}
-      />
+      />,
     );
 
+    const cardsAndAccessorySection = screen.getByTestId(
+      'bpk-card-list--card-list',
+    ).firstChild;
+    const cardsSection = cardsAndAccessorySection?.firstChild;
+
     expect(screen.getByText('Title')).toBeInTheDocument();
     expect(screen.getByText('Description')).toBeInTheDocument();
     expect(screen.getByText('Button')).toBeInTheDocument();
+    expect(cardsSection?.childNodes.length).toBe(2);
+    expect(
+      getByText(cardsAndAccessorySection as HTMLElement, 'Button'),
+    ).toBeInTheDocument();
   });
-});
+});