[BDES-96] [BpkCardList] Base Component (#3632)

* Base BpkCardList

* fix stories

* remove props from readme

---------

Co-authored-by: Ana Belciug <[email protected]>

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

@@ -0,0 +1,31 @@
+/*
+ * 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 BpkCardList from "../../packages/bpk-component-card-list";
+
+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={() => {}}
+  />
+);
+
+export default BasicExample;

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

@@ -0,0 +1,37 @@
+/*
+ * 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 BpkCardList from "../../packages/bpk-component-card-list";
+
+import BasicExample from './examples';
+
+export default {
+  title: 'bpk-component-card-list',
+  component: BpkCardList,
+};
+
+export const Basic = BasicExample;
+
+export const VisualTest = Basic;
+
+export const VisualTestWithZoom = {
+  render: VisualTest,
+  args: {
+    zoomEnabled: true
+  }
+}

packages/bpk-component-card-list/README.md

@@ -0,0 +1,25 @@
+# bpk-component-card-list
+
+> Backpack card list component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+### BpkCardList
+
+```js
+import { BpkCardList } from '@skyscanner/backpack-web/bpk-component-card-list';
+
+export default () => (
+  <BpkCardList
+    title="Title"
+    description="Description"
+    buttonText="Button"
+    buttonHref="https://www.skyscanner.net"
+    onButtonClick={() => {}}
+  />
+);
+```

packages/bpk-component-card-list/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 BpkCardList from "./src/BpkCardList";
+
+export default BpkCardList;

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

@@ -0,0 +1,39 @@
+/*
+ * 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 { render, screen } from "@testing-library/react";
+
+import BpkCardList from "./BpkCardList";
+
+describe('BpkCardList', () => {
+  it('should render correctly', () => {
+    render(
+      <BpkCardList
+        title="Title"
+        description="Description"
+        buttonText="Button"
+        buttonHref="https://www.skyscanner.net"
+        onButtonClick={() => {}}
+      />
+    );
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Button')).toBeInTheDocument();
+  });
+});

packages/bpk-component-card-list/src/BpkCardList.module.scss

@@ -0,0 +1,30 @@
+/*
+ * 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 '../../unstable__bpk-mixins/tokens';
+
+.bpk-card-list {
+  display: flex;
+  flex-direction: column;
+  gap: tokens.bpk-spacing-lg();
+
+  &--card-list {
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,60 @@
+/*
+ * 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 { BpkButtonV2 } from '../../bpk-component-button';
+import BpkSectionHeader from '../../bpk-component-section-header';
+import { cssModules } from '../../bpk-react-utils';
+
+import type CardListProps from './common-types';
+
+import STYLES from './BpkCardList.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkCardList = (props: CardListProps) => {
+  const {
+    buttonHref,
+    buttonText,
+    description,
+    onButtonClick,
+    title,
+  } = props;
+
+  const button = buttonText && (
+    <BpkButtonV2 onClick={onButtonClick} href={buttonHref}>{buttonText}</BpkButtonV2>
+  );
+
+  return (
+    <div className={getClassName('bpk-card-list')}>
+      <BpkSectionHeader
+        title={title}
+        description={description}
+        button={button}
+      />
+
+      <div
+        className={getClassName('bpk-card-list--card-list')}
+        data-testid="bpk-card-list--card-list"
+      >
+        TODO: CARDS
+      </div>
+    </div>
+  );
+};
+
+export default BpkCardList;

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

@@ -0,0 +1,39 @@
+/*
+ * 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 { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import BpkCardList from "./BpkCardList";
+
+describe('BpkCardList accessibility tests', () => {
+  it('should not have any accessibility issues', async () => {
+    const { container } = render(
+      <BpkCardList
+        title="Title"
+        description="Description"
+        buttonText="Button"
+        buttonHref="https://www.skyscanner.net"
+        onButtonClick={() => {}}
+      />
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

packages/bpk-component-card-list/src/common-types.ts

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+type CardListProps = {
+  title: string,  
+  description?: string,
+  buttonText?: string,
+  onButtonClick?: () => void,
+  buttonHref?: string,
+}
+
+export default CardListProps;