From 227a65434804646eb1f31745614f894b18b86b92 Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Wed, 27 Sep 2023 11:29:53 +0100 Subject: [PATCH 01/57] initial commit --- README.md | 1 + examples/bpk-component-card-list/examples.js | 68 +++++++++++++++++++ .../examples.module.css | 18 +++++ .../examples.module.scss | 34 ++++++++++ examples/bpk-component-card-list/stories.js | 34 ++++++++++ packages/bpk-component-card-list/README.md | 41 +++++++++++ packages/bpk-component-card-list/index.ts | 21 ++++++ .../src/BpkCardList-test.tsx | 36 ++++++++++ .../src/BpkCardList.css | 18 +++++ .../src/BpkCardList.d.ts | 39 +++++++++++ .../src/BpkCardList.module.css | 18 +++++ .../src/BpkCardList.module.scss | 25 +++++++ .../src/BpkCardList.tsx | 66 ++++++++++++++++++ .../src/accessibility-test.tsx | 36 ++++++++++ 14 files changed, 455 insertions(+) create mode 100644 examples/bpk-component-card-list/examples.js create mode 100644 examples/bpk-component-card-list/examples.module.css create mode 100644 examples/bpk-component-card-list/examples.module.scss create mode 100644 examples/bpk-component-card-list/stories.js create mode 100644 packages/bpk-component-card-list/README.md create mode 100644 packages/bpk-component-card-list/index.ts create mode 100644 packages/bpk-component-card-list/src/BpkCardList-test.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardList.css create mode 100644 packages/bpk-component-card-list/src/BpkCardList.d.ts create mode 100644 packages/bpk-component-card-list/src/BpkCardList.module.css create mode 100644 packages/bpk-component-card-list/src/BpkCardList.module.scss create mode 100644 packages/bpk-component-card-list/src/BpkCardList.tsx create mode 100644 packages/bpk-component-card-list/src/accessibility-test.tsx diff --git a/README.md b/README.md index cc0ea8b117..f82426ae87 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ To contribute please see [contributing.md](CONTRIBUTING.md). [`bpk-component-button`](/packages/bpk-component-button) [`bpk-component-calendar`](/packages/bpk-component-calendar) [`bpk-component-card`](/packages/bpk-component-card) +[`bpk-component-card-list`](/packages/bpk-component-card-list) [`bpk-component-checkbox`](/packages/bpk-component-checkbox) [`bpk-component-chip`](/packages/bpk-component-chip) [`bpk-component-close-button`](/packages/bpk-component-close-button) diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js new file mode 100644 index 0000000000..5c1ef7f3af --- /dev/null +++ b/examples/bpk-component-card-list/examples.js @@ -0,0 +1,68 @@ +/* + * 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. + */ +/* @flow strict */ + +// import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import BpkCardList from '../../packages/bpk-component-card-list'; + +// import STYLES from './examples.module.scss'; + +// const getClassName = cssModules(STYLES); + +const RowToRailExample = () => ( + +); + +const GridToRailExample = () => ( + +); + +const RowToStackExample = () => ( + +); + +const GridToStackExample = () => ( + +); + +export { + RowToRailExample, + GridToRailExample, + RowToStackExample, + GridToStackExample, +}; diff --git a/examples/bpk-component-card-list/examples.module.css b/examples/bpk-component-card-list/examples.module.css new file mode 100644 index 0000000000..ca41a05113 --- /dev/null +++ b/examples/bpk-component-card-list/examples.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-card-list-examples__header{display:flex;height:2.5rem;padding:0.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem} diff --git a/examples/bpk-component-card-list/examples.module.scss b/examples/bpk-component-card-list/examples.module.scss new file mode 100644 index 0000000000..0546394c02 --- /dev/null +++ b/examples/bpk-component-card-list/examples.module.scss @@ -0,0 +1,34 @@ +/* + * 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 '../../packages/bpk-mixins/index.scss'; + +.bpk-card-list-examples { + &__header { + display: flex; + height: bpk-spacing-xxl(); + padding: bpk-spacing-md(); + justify-content: space-between; + align-items: center; + color: $bpk-text-on-dark-day; + } + + &__wrapper { + width: bpk-spacing-md() * 41; + } +} diff --git a/examples/bpk-component-card-list/stories.js b/examples/bpk-component-card-list/stories.js new file mode 100644 index 0000000000..f3b83dc226 --- /dev/null +++ b/examples/bpk-component-card-list/stories.js @@ -0,0 +1,34 @@ +/* + * 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. + */ +/* @flow strict */ + +import { + RowToRailExample, + GridToRailExample, + RowToStackExample, + GridToStackExample, +} from './examples'; + +export default { + title: 'bpk-component-card-list', +}; + +export const RowToRail = RowToRailExample; +export const GridToRail = GridToRailExample; +export const RowToStack = RowToStackExample; +export const GridToStack = GridToStackExample; diff --git a/packages/bpk-component-card-list/README.md b/packages/bpk-component-card-list/README.md new file mode 100644 index 0000000000..b572f1bbde --- /dev/null +++ b/packages/bpk-component-card-list/README.md @@ -0,0 +1,41 @@ +# 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 () => ( + +); +``` + +## Props + +### BpkCardList + +| Property | PropType | Required | Default Value | +| ------------------- | -------------------------------------- | -------- | ------------- | +| accessory | oneOf('expand' ,'button','pagination') | false | - | +| buttonText | string | false | - | +| cardList | array(node) | true | - | +| description | string | false | - | +| expandText | string | false | - | +| initiallyShownCards | number | false | 3 | +| layoutDesktop | oneOf('row','grid') | true | - | +| layoutMobile | oneOf('rail','stack') | true | - | +| onButtonClick | Function | false | - | +| title | string | true | - | diff --git a/packages/bpk-component-card-list/index.ts b/packages/bpk-component-card-list/index.ts new file mode 100644 index 0000000000..05fe35805c --- /dev/null +++ b/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; diff --git a/packages/bpk-component-card-list/src/BpkCardList-test.tsx b/packages/bpk-component-card-list/src/BpkCardList-test.tsx new file mode 100644 index 0000000000..86e3cd4d1d --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardList-test.tsx @@ -0,0 +1,36 @@ +/* + * 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 BpkCardList from './BpkCardList'; + +describe('BpkCardList', () => { + it('should render correctly', () => { + const { asFragment } = render( + , + ); + expect(asFragment()).toMatchSnapshot(); + }); + + // TODO: test cases +}); diff --git a/packages/bpk-component-card-list/src/BpkCardList.css b/packages/bpk-component-card-list/src/BpkCardList.css new file mode 100644 index 0000000000..da8c081573 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardList.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)}}@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:0.5rem;border-radius:50%;background-color:transparent}.bpk-no-touch-support .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}:global(.bpk-no-touch-support) .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}.bpk-save-button:active{background-color:transparent}.bpk-save-button__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#161616}.bpk-save-button__icon:hover{color:#161616}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1}.bpk-save-button__heartOutlineIcon--show:hover{transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon--hide{opacity:0}.bpk-save-button__heartOutlineIcon--onDark{color:#fff}.bpk-save-button__heartIcon{z-index:2;color:#0062e3;opacity:0}.bpk-save-button__heartIcon--toggle{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--show{opacity:1}.bpk-save-button__heartIcon--show:hover{color:#0062e3}.bpk-save-button__heartIcon--hide:hover{transition:opacity 200ms ease-in-out;color:#161616;opacity:1}.bpk-save-button__heartIcon--onDark{color:#fff}.bpk-save-button__heartIcon--onDark:hover{color:#fff}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,0.8)}.bpk-no-touch-support .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}:global(.bpk-no-touch-support) .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}.bpk-save-button__contained:active{background-color:rgba(255,255,255,0.8)} diff --git a/packages/bpk-component-card-list/src/BpkCardList.d.ts b/packages/bpk-component-card-list/src/BpkCardList.d.ts new file mode 100644 index 0000000000..6493bb8686 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardList.d.ts @@ -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 type { ReactNode } from 'react'; +type Props = { + accessory?: ['expand', 'button', 'pagination']; + buttonText?: string; + cardList: any[]; + description?: string; + expandText?: string; + initiallyShownCards?: number; + layoutDesktop: ['row', 'grid']; + layoutMobile: ['rail', 'stack']; + onButtonClick?: Function; + title: string; +}; + +declare const BpkCardList: ({ + cardList, + layoutDesktop, + layoutMobile, + title, +}: Props) => JSX.Element; +export default BpkCardList; diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.css b/packages/bpk-component-card-list/src/BpkCardList.module.css new file mode 100644 index 0000000000..91684b5d6a --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardList.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-component-card-list__header{margin-bottom:1rem} diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.scss b/packages/bpk-component-card-list/src/BpkCardList.module.scss new file mode 100644 index 0000000000..d914c030f7 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardList.module.scss @@ -0,0 +1,25 @@ +/* + * 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.scss'; + +.bpk-component-card-list { + &__header { + margin-bottom: bpk-spacing-base(); + } +} diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx new file mode 100644 index 0000000000..49fa1d7c6e --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -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. + */ + +import { cssModules } from '../../bpk-react-utils'; +import BpkSectionHeader from '../../bpk-component-section-header'; + +import STYLES from './BpkCardList.module.scss'; + +const getClassName = cssModules(STYLES); + +export type layoutDesktopProps = 'row' | 'grid'; +export type layoutMobileProps = 'rail' | 'stack'; +type Props = { + // accessory?: 'expand' | 'button' | 'pagination'; + // buttonText?: string; + cardList: any[]; + description?: string; + // expandText?: string; + initiallyShownCards?: number; + layoutDesktop: layoutDesktopProps; + layoutMobile: layoutMobileProps; + // onButtonClick?: Function; + title: string; +}; + +const MAX_ITEMS = 12; // MAX should be 12 for Desktop Grid and Mobile Stack +const DEFAULT_ITEMS = 3; + +const BpkCardList = (props: Props) => { + const { + cardList, + description, + initiallyShownCards = 3, + layoutDesktop, + layoutMobile, + title, + } = props; + const classNames = getClassName('bpk-component-card-list'); + + return ( +
+
+ +
+ +
CARD LIST
+
+ ); +}; + +export default BpkCardList; diff --git a/packages/bpk-component-card-list/src/accessibility-test.tsx b/packages/bpk-component-card-list/src/accessibility-test.tsx new file mode 100644 index 0000000000..c002e096e7 --- /dev/null +++ b/packages/bpk-component-card-list/src/accessibility-test.tsx @@ -0,0 +1,36 @@ +/* + * 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 programmatically-detectable accessibility issues', async () => { + const { container } = render( + , + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); From ad2fd2b681ea5e75c02f1c8ecf4e7e35d289ab0e Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Wed, 27 Sep 2023 15:05:14 +0100 Subject: [PATCH 02/57] progress --- examples/bpk-component-card-list/examples.js | 31 ++++- .../src/BpkAccessory.tsx | 49 ++++++++ .../src/BpkCardList.module.css | 2 +- .../src/BpkCardList.module.scss | 42 ++++++- .../src/BpkCardList.tsx | 114 ++++++++++++++---- .../bpk-component-card-list/src/BpkExpand.tsx | 40 ++++++ .../bpk-component-page-indicator/index.d.ts | 9 ++ 7 files changed, 254 insertions(+), 33 deletions(-) create mode 100644 packages/bpk-component-card-list/src/BpkAccessory.tsx create mode 100644 packages/bpk-component-card-list/src/BpkExpand.tsx create mode 100644 packages/bpk-component-page-indicator/index.d.ts diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index 5c1ef7f3af..00430ddc3a 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -18,6 +18,7 @@ /* @flow strict */ // import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import BpkCard from '../../packages/bpk-component-card'; import BpkCardList from '../../packages/bpk-component-card-list'; // import STYLES from './examples.module.scss'; @@ -26,7 +27,13 @@ import BpkCardList from '../../packages/bpk-component-card-list'; const RowToRailExample = () => ( ( + + {/* */} + TEST {i} + + ))} + accessory='pagination' layoutDesktop="row" layoutMobile="rail" title="Card List Component" @@ -35,7 +42,12 @@ const RowToRailExample = () => ( const GridToRailExample = () => ( ( + + {/* */} + TEST {i} + + ))} layoutDesktop="grid" layoutMobile="rail" title="Card List Component" @@ -44,7 +56,12 @@ const GridToRailExample = () => ( const RowToStackExample = () => ( ( + + {/* */} + TEST {i} + + ))} layoutDesktop="row" layoutMobile="stack" title="Card List Component" @@ -53,7 +70,13 @@ const RowToStackExample = () => ( const GridToStackExample = () => ( ( + + {/* */} + TEST {i} + + ))} + accessory='expand' layoutDesktop="grid" layoutMobile="stack" title="Card List Component" diff --git a/packages/bpk-component-card-list/src/BpkAccessory.tsx b/packages/bpk-component-card-list/src/BpkAccessory.tsx new file mode 100644 index 0000000000..8c36149326 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkAccessory.tsx @@ -0,0 +1,49 @@ +import type { MouseEvent } from 'react'; + +import BpkPageIndicator from '../../bpk-component-page-indicator'; +import BpkButtonV2 from '../../bpk-component-button/src/BpkButtonV2/BpkButton'; + +import BpkExpand from './BpkExpand'; + +export type BpkAccessoryTypes = 'expand' | 'button' | 'pagination'; + +type Props = { + accessory: BpkAccessoryTypes; + currentIndex: number; + hideContent: () => void; + setCurrentIndex: (index: number) => void; + showContent: () => void; +} +const BpkAccessory = ({ + accessory, + currentIndex, + hideContent, + setCurrentIndex, + showContent, +}: Props) => { + if (accessory === 'expand') { + // { + return ; + } + if (accessory === 'pagination') { + return ( + , newIndex: number, direction: string) => { + setCurrentIndex(newIndex); + }} + /> + ); + } + if (accessory === 'button') { + return Action; + } + return null; +}; + +export default BpkAccessory; diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.css b/packages/bpk-component-card-list/src/BpkCardList.module.css index 91684b5d6a..501b594ce2 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.css +++ b/packages/bpk-component-card-list/src/BpkCardList.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-component-card-list__header{margin-bottom:1rem} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--chip-group{display:flex;gap:0.5rem}.bpk-card-list--card-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem}.bpk-card-list--card-list--grid{flex-direction:row;flex-wrap:wrap}.bpk-card-list--card-list--row{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem;width:100%}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:15.0625rem;flex-grow:1} diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.scss b/packages/bpk-component-card-list/src/BpkCardList.module.scss index d914c030f7..88e097883a 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardList.module.scss @@ -18,8 +18,44 @@ @import '../../bpk-mixins/index.scss'; -.bpk-component-card-list { - &__header { - margin-bottom: bpk-spacing-base(); +.bpk-card-list { + display: flex; + flex-direction: column; + gap: bpk-spacing-lg(); + + &--chip-group { + display: flex; + gap: bpk-spacing-md(); + } + + &--card-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + // TODO: this needed? + gap: bpk-spacing-lg(); + + &--grid { + flex-direction: row; + flex-wrap: wrap; + } + + &--row { + display: flex; + width: 100%; + flex-direction: row; + flex-wrap: wrap; + gap: bpk-spacing-lg(); + } + + &--stack { + flex-direction: column; + } + + &--card { + min-width: $bpk-one-pixel-rem * 241; + flex-grow: 1; + } } } diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 49fa1d7c6e..d6f3d2f375 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -16,49 +16,113 @@ * limitations under the License. */ +import { useState } from 'react'; + import { cssModules } from '../../bpk-react-utils'; import BpkSectionHeader from '../../bpk-component-section-header'; +import { BpkButtonV2 } from '../../bpk-component-button'; +import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint'; import STYLES from './BpkCardList.module.scss'; +import type { BpkAccessoryTypes } from './BpkAccessory'; +import BpkAccessory from './BpkAccessory'; const getClassName = cssModules(STYLES); export type layoutDesktopProps = 'row' | 'grid'; export type layoutMobileProps = 'rail' | 'stack'; -type Props = { - // accessory?: 'expand' | 'button' | 'pagination'; - // buttonText?: string; - cardList: any[]; + +const MAX_ITEMS = 12; // MAX should be 12 for Desktop Grid and Mobile Stack +const DEFAULT_ITEMS = 3; + +type BpkChipGroup = any; + +export type BpkCardListProps = { + title: string; description?: string; - // expandText?: string; + buttonText?: string; + onButtonClick?: () => void; + chipGroup?: BpkChipGroup; + cardList: JSX.Element[]; initiallyShownCards?: number; - layoutDesktop: layoutDesktopProps; - layoutMobile: layoutMobileProps; - // onButtonClick?: Function; - title: string; + layoutDesktop: 'row' | 'grid'; + layoutMobile: 'rail' | 'stack'; + accessory?: BpkAccessoryTypes; + expandString?: string; }; -const MAX_ITEMS = 12; // MAX should be 12 for Desktop Grid and Mobile Stack -const DEFAULT_ITEMS = 3; +const CARDS_PER_ROW = 3; + +const BpkCardList = ({ + accessory, + buttonText, + cardList, + chipGroup, + description, + expandString, + initiallyShownCards = 3, + layoutDesktop, + layoutMobile, + onButtonClick, + title, +}: BpkCardListProps) => { + const [cards, setCards] = useState(cardList.slice(0, initiallyShownCards)); + const [currentIndex, setCurrentIndex] = useState(0); + const [currentLayout, setCurrentLayout] = useState(); + const cardRows = []; -const BpkCardList = (props: Props) => { - const { - cardList, - description, - initiallyShownCards = 3, - layoutDesktop, - layoutMobile, - title, - } = props; - const classNames = getClassName('bpk-component-card-list'); + for (let i = 0; i < cards.length; i += CARDS_PER_ROW) { + cardRows.push(cards.slice(i, i + CARDS_PER_ROW)); + } + + const showContent = () => { + setCards(cardList); + }; + const hideContent = () => { + setCards(cardList.slice(0, initiallyShownCards)); + }; return ( -
-
- +
+ {buttonText}} + /> +
+ {chipGroup} +
+ {/* + + */} +
+ {cardRows.map((row) => ( +
+ {row.map((card) => ( +
+ {card} +
+ ))} +
+ ))}
-
CARD LIST
+ {!buttonText && accessory && ( + + )}
); }; diff --git a/packages/bpk-component-card-list/src/BpkExpand.tsx b/packages/bpk-component-card-list/src/BpkExpand.tsx new file mode 100644 index 0000000000..2bc3206463 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkExpand.tsx @@ -0,0 +1,40 @@ +import { useState } from 'react'; + +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import ChevronDown from '../../bpk-component-icon/sm/chevron-down'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import ChevronUp from '../../bpk-component-icon/sm/chevron-up'; +import { BUTTON_TYPES, BpkButtonV2 } from '../../bpk-component-button'; +import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon'; + +const AlignedChevronDownIcon = withButtonAlignment(withRtlSupport(ChevronDown)); +const AlignedChevronUpIcon = withButtonAlignment(withRtlSupport(ChevronUp)); + +const BpkExpand = ({ hideContent, showContent }: any) => { + const [contentHidden, setContentHidden] = useState(true); + + const buttonText = contentHidden ? 'Show More' : 'Show Less'; + const buttonIcon = contentHidden ? ( + + ) : ( + + ); + const buttonOnClick = () => { + if (contentHidden) { + showContent(); + setContentHidden(false); + } else { + hideContent(); + setContentHidden(true); + } + }; + + return ( + buttonOnClick()}> + {buttonText} + {buttonIcon} + + ); +}; + +export default BpkExpand; diff --git a/packages/bpk-component-page-indicator/index.d.ts b/packages/bpk-component-page-indicator/index.d.ts new file mode 100644 index 0000000000..9565b8e7aa --- /dev/null +++ b/packages/bpk-component-page-indicator/index.d.ts @@ -0,0 +1,9 @@ +import BpkPageIndicator, { + type Props as BpkPageIndicatorProps, + VARIANT, +} from './src/BpkPageIndicator'; +import { DIRECTIONS } from './src/NavButton'; + +export type { BpkPageIndicatorProps }; +export { DIRECTIONS, VARIANT }; +export default BpkPageIndicator; From 2c66b8215505b53ce22171be1be2e451cadf91c1 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Wed, 8 Nov 2023 15:49:28 +0000 Subject: [PATCH 03/57] progress --- examples/bpk-component-card-list/examples.js | 1 + .../src/BpkAccessory.tsx | 4 +- .../src/BpkCardList.module.css | 2 +- .../src/BpkCardList.module.scss | 11 +++- .../src/BpkCardList.tsx | 62 ++++++++++--------- 5 files changed, 47 insertions(+), 33 deletions(-) diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index 00430ddc3a..fd691cb083 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -48,6 +48,7 @@ const GridToRailExample = () => ( TEST {i} ))} + accessory='expand' layoutDesktop="grid" layoutMobile="rail" title="Card List Component" diff --git a/packages/bpk-component-card-list/src/BpkAccessory.tsx b/packages/bpk-component-card-list/src/BpkAccessory.tsx index 8c36149326..b3028efbe2 100644 --- a/packages/bpk-component-card-list/src/BpkAccessory.tsx +++ b/packages/bpk-component-card-list/src/BpkAccessory.tsx @@ -13,6 +13,7 @@ type Props = { hideContent: () => void; setCurrentIndex: (index: number) => void; showContent: () => void; + totalIndicators: number; } const BpkAccessory = ({ accessory, @@ -20,6 +21,7 @@ const BpkAccessory = ({ hideContent, setCurrentIndex, showContent, + totalIndicators, }: Props) => { if (accessory === 'expand') { // { @@ -29,7 +31,7 @@ const BpkAccessory = ({ return ( { - const [cards, setCards] = useState(cardList.slice(0, initiallyShownCards)); + const [visibleCards, setVisibleCards] = useState( + cardList.slice(0, initiallyShownCards), + ); const [currentIndex, setCurrentIndex] = useState(0); - const [currentLayout, setCurrentLayout] = useState(); - const cardRows = []; - for (let i = 0; i < cards.length; i += CARDS_PER_ROW) { - cardRows.push(cards.slice(i, i + CARDS_PER_ROW)); - } + const cards = visibleCards.map((card) => ( +
{card}
+ )); const showContent = () => { - setCards(cardList); + setVisibleCards(cardList); }; const hideContent = () => { - setCards(cardList.slice(0, initiallyShownCards)); + setVisibleCards(cardList.slice(0, initiallyShownCards)); }; return ( @@ -92,25 +90,30 @@ const BpkCardList = ({
{chipGroup}
- {/* - */} -
- {cardRows.map((row) => ( -
- {row.map((card) => ( -
- {card} -
- ))} -
- ))} -
+ + {(isActive) => + isActive ? ( +
+ {cards} +
+ ) : ( +
+ {cards} +
+ ) + } + {!buttonText && accessory && ( )} From 62f6b2e0cfdf98102702d24d42c23d88a4466541 Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Wed, 8 Nov 2023 17:00:52 +0000 Subject: [PATCH 04/57] split types --- .../src/BpkCardList.tsx | 66 +++++++++---------- .../src/BpkCardListGrid.tsx | 45 +++++++++++++ .../src/BpkCardListRail.tsx | 25 +++++++ .../src/BpkCardListRow.tsx | 54 +++++++++++++++ .../src/BpkCardListStack.tsx | 45 +++++++++++++ 5 files changed, 200 insertions(+), 35 deletions(-) create mode 100644 packages/bpk-component-card-list/src/BpkCardListGrid.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListRail.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListRow.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListStack.tsx diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 632084647d..9b8a4b1c6e 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -25,7 +25,10 @@ import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint'; import STYLES from './BpkCardList.module.scss'; import type { BpkAccessoryTypes } from './BpkAccessory'; -import BpkAccessory from './BpkAccessory'; +import BpkCardListGrid from './BpkCardListGrid'; +import BpkCardListStack from './BpkCardListStack'; +import BpkCardListRow from './BpkCardListRow'; +import BpkCardListRail from './BpkCardListRail'; const getClassName = cssModules(STYLES); @@ -91,42 +94,35 @@ const BpkCardList = ({ {chipGroup}
- - {(isActive) => - isActive ? ( -
- {cards} -
- ) : ( -
- {cards} -
- ) - } - +
+ + {(isActive) => { + if (isActive) { + return layoutMobile === 'rail' ? ( + {cards} + ) : ( + + {cards} + + ); + } - {!buttonText && accessory && ( - + {cards} + + ) : ( + {cards} + ); }} - /> - )} + +
); }; diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid.tsx new file mode 100644 index 0000000000..728c1ec870 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListGrid.tsx @@ -0,0 +1,45 @@ +import { BpkButtonV2 } from '../../bpk-component-button'; +import { cssModules } from '../../bpk-react-utils'; + +/* + * 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 STYLES from './BpkCardList.module.scss'; +import BpkExpand from './BpkExpand'; + +const getClassName = cssModules(STYLES); + +const BpkCardListGrid = ({ + accessory, // EXPAND OR BUTTON + buttonText, + cardList, + hideContent, + showContent, +}: any) => ( + <> +
{cardList}
+ + {!buttonText && + (accessory === 'expand' ? ( + + ) : ( + Action + ))} + +); + +export default BpkCardListGrid; diff --git a/packages/bpk-component-card-list/src/BpkCardListRail.tsx b/packages/bpk-component-card-list/src/BpkCardListRail.tsx new file mode 100644 index 0000000000..db2d5030e3 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRail.tsx @@ -0,0 +1,25 @@ +/* + * 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. + */ +// @ts-ignore: TODO - fix +import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container'; + +const BpkCardListRail = ({ children }: any) => ( + {children} +); + +export default BpkCardListRail; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow.tsx new file mode 100644 index 0000000000..353b735257 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRow.tsx @@ -0,0 +1,54 @@ +/* + * 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 BpkPageIndicator from '../../bpk-component-page-indicator'; +import { cssModules } from '../../bpk-react-utils'; + +import STYLES from './BpkCardList.module.scss'; + +const getClassName = cssModules(STYLES); + +const BpkCardListRow = ({ + accessory, // PAGE INDICATOR + buttonText, + cardList, +}: any) => ( + <> +
{cardList}
+ + {!buttonText && ( + , + newIndex: number, + direction: string, + ) => { + setCurrentIndex(newIndex); + }} + /> + )} + +); + +export default BpkCardListRow; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack.tsx b/packages/bpk-component-card-list/src/BpkCardListStack.tsx new file mode 100644 index 0000000000..a19255d562 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListStack.tsx @@ -0,0 +1,45 @@ +import { BpkButtonV2 } from '../../bpk-component-button'; +import { cssModules } from '../../bpk-react-utils'; + +/* + * 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 STYLES from './BpkCardList.module.scss'; +import BpkExpand from './BpkExpand'; + +const getClassName = cssModules(STYLES); + +const BpkCardListStack = ({ + accessory, // EXPAND OR BUTTON + buttonText, + cardList, + hideContent, + showContent, +}: any) => ( + <> +
{cardList}
+ + {!buttonText && + (accessory === 'expand' ? ( + + ) : ( + Action + ))} + +); + +export default BpkCardListStack; From 39b3d31b3231faedb811f7eebff46479d8beff0e Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Tue, 21 Nov 2023 15:00:47 +0000 Subject: [PATCH 05/57] fix grid and stack --- .../src/BpkCardList.module.scss | 11 ++--------- .../src/BpkCardList.tsx | 19 ++++++++++++------- .../src/BpkCardListGrid.module.scss | 8 ++++++++ .../src/BpkCardListGrid.tsx | 9 +++++---- .../src/BpkCardListStack.module.scss | 7 +++++++ .../src/BpkCardListStack.tsx | 13 +++++++------ 6 files changed, 41 insertions(+), 26 deletions(-) create mode 100644 packages/bpk-component-card-list/src/BpkCardListGrid.module.scss create mode 100644 packages/bpk-component-card-list/src/BpkCardListStack.module.scss diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.scss b/packages/bpk-component-card-list/src/BpkCardList.module.scss index 1b84d5564a..6b96616c72 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardList.module.scss @@ -30,21 +30,14 @@ &--card-list { display: flex; - flex-direction: row; - // flex-wrap: wrap; - - // TODO: this needed? + flex-direction: column; gap: bpk-spacing-lg(); - &--grid { - flex-direction: row; - flex-wrap: wrap; - } - &--row { display: flex; width: 100%; flex-direction: row; + // flex-wrap: wrap; gap: bpk-spacing-lg(); diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 9b8a4b1c6e..c256a1f7ea 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -51,7 +51,7 @@ export type BpkCardListProps = { layoutDesktop: 'row' | 'grid'; layoutMobile: 'rail' | 'stack'; accessory?: BpkAccessoryTypes; - expandString?: string; + expandText?: string; }; const BpkCardList = ({ @@ -60,7 +60,7 @@ const BpkCardList = ({ cardList, chipGroup, description, - expandString, + expandText, initiallyShownCards = DEFAULT_ITEMS, layoutDesktop, layoutMobile, @@ -70,7 +70,6 @@ const BpkCardList = ({ const [visibleCards, setVisibleCards] = useState( cardList.slice(0, initiallyShownCards), ); - const [currentIndex, setCurrentIndex] = useState(0); const cards = visibleCards.map((card) => (
{card}
@@ -90,9 +89,9 @@ const BpkCardList = ({ description={description} button={buttonText && {buttonText}} /> -
+ {/*
{chipGroup} -
+
*/}
@@ -101,7 +100,13 @@ const BpkCardList = ({ return layoutMobile === 'rail' ? ( {cards} ) : ( - + {cards} ); @@ -111,7 +116,7 @@ const BpkCardList = ({ diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.module.scss b/packages/bpk-component-card-list/src/BpkCardListGrid.module.scss new file mode 100644 index 0000000000..28ce959a90 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListGrid.module.scss @@ -0,0 +1,8 @@ +@import '../../bpk-mixins/index.scss'; + +.bpk-card-list-grid { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: bpk-spacing-lg(); +} diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid.tsx index 728c1ec870..69d1716c46 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid.tsx @@ -18,7 +18,7 @@ import { cssModules } from '../../bpk-react-utils'; * See the License for the specific language governing permissions and * limitations under the License. */ -import STYLES from './BpkCardList.module.scss'; +import STYLES from './BpkCardListGrid.module.scss'; import BpkExpand from './BpkExpand'; const getClassName = cssModules(STYLES); @@ -26,12 +26,13 @@ const getClassName = cssModules(STYLES); const BpkCardListGrid = ({ accessory, // EXPAND OR BUTTON buttonText, - cardList, + children, + expandText, hideContent, - showContent, + showContent }: any) => ( <> -
{cardList}
+
{children}
{!buttonText && (accessory === 'expand' ? ( diff --git a/packages/bpk-component-card-list/src/BpkCardListStack.module.scss b/packages/bpk-component-card-list/src/BpkCardListStack.module.scss new file mode 100644 index 0000000000..49f800e715 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListStack.module.scss @@ -0,0 +1,7 @@ +@import '../../bpk-mixins/index.scss'; + +.bpk-card-list-stack { + display: flex; + flex-direction: column; + gap: bpk-spacing-base(); +} diff --git a/packages/bpk-component-card-list/src/BpkCardListStack.tsx b/packages/bpk-component-card-list/src/BpkCardListStack.tsx index a19255d562..3fb08a6145 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListStack.tsx @@ -1,6 +1,3 @@ -import { BpkButtonV2 } from '../../bpk-component-button'; -import { cssModules } from '../../bpk-react-utils'; - /* * Backpack - Skyscanner's Design System * @@ -18,7 +15,10 @@ import { cssModules } from '../../bpk-react-utils'; * See the License for the specific language governing permissions and * limitations under the License. */ -import STYLES from './BpkCardList.module.scss'; +import { BpkButtonV2 } from '../../bpk-component-button'; +import { cssModules } from '../../bpk-react-utils'; + +import STYLES from './BpkCardListStack.module.scss'; import BpkExpand from './BpkExpand'; const getClassName = cssModules(STYLES); @@ -26,12 +26,13 @@ const getClassName = cssModules(STYLES); const BpkCardListStack = ({ accessory, // EXPAND OR BUTTON buttonText, - cardList, + children, + expandText, hideContent, showContent, }: any) => ( <> -
{cardList}
+
{children}
{!buttonText && (accessory === 'expand' ? ( From 53c1248ba6d910055b35feee6a7da7a868c11e78 Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Tue, 21 Nov 2023 16:52:46 +0000 Subject: [PATCH 06/57] BpkCardListRow v1 --- .../src/BpkAccessory.tsx | 8 +- .../src/BpkCardList.module.css | 2 +- .../src/BpkCardList.tsx | 9 ++- .../src/BpkCardListGrid.module.css | 18 +++++ .../src/BpkCardListRow.tsx | 54 ------------- .../BpkCardListRow/BpkCardListRow.module.css | 18 +++++ .../BpkCardListRow/BpkCardListRow.module.scss | 11 +++ .../src/BpkCardListRow/BpkCardListRow.tsx | 78 +++++++++++++++++++ .../src/BpkCardListStack.module.css | 18 +++++ 9 files changed, 157 insertions(+), 59 deletions(-) create mode 100644 packages/bpk-component-card-list/src/BpkCardListGrid.module.css delete mode 100644 packages/bpk-component-card-list/src/BpkCardListRow.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css create mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss create mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListStack.module.css diff --git a/packages/bpk-component-card-list/src/BpkAccessory.tsx b/packages/bpk-component-card-list/src/BpkAccessory.tsx index b3028efbe2..6c25448209 100644 --- a/packages/bpk-component-card-list/src/BpkAccessory.tsx +++ b/packages/bpk-component-card-list/src/BpkAccessory.tsx @@ -14,7 +14,7 @@ type Props = { setCurrentIndex: (index: number) => void; showContent: () => void; totalIndicators: number; -} +}; const BpkAccessory = ({ accessory, currentIndex, @@ -36,7 +36,11 @@ const BpkAccessory = ({ prevNabLabel="" nextNavLabel="" showNav - onClick={(e: MouseEvent, newIndex: number, direction: string) => { + onClick={( + e: MouseEvent, + newIndex: number, + direction: string, + ) => { setCurrentIndex(newIndex); }} /> diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.css b/packages/bpk-component-card-list/src/BpkCardList.module.css index 71f0846d72..f46972b731 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.css +++ b/packages/bpk-component-card-list/src/BpkCardList.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--chip-group{display:flex;gap:0.5rem}.bpk-card-list--card-list{display:flex;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--grid{flex-direction:row;flex-wrap:wrap}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:15.0625rem;flex-grow:1;scroll-snap-align:start} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--chip-group{display:flex;gap:0.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:15.0625rem;flex-grow:1;scroll-snap-align:start} diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index c256a1f7ea..082a2ad4cf 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -25,9 +25,9 @@ import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint'; import STYLES from './BpkCardList.module.scss'; import type { BpkAccessoryTypes } from './BpkAccessory'; +import BpkCardListRow from './BpkCardListRow/BpkCardListRow'; import BpkCardListGrid from './BpkCardListGrid'; import BpkCardListStack from './BpkCardListStack'; -import BpkCardListRow from './BpkCardListRow'; import BpkCardListRail from './BpkCardListRail'; const getClassName = cssModules(STYLES); @@ -123,7 +123,12 @@ const BpkCardList = ({ {cards} ) : ( - {cards} + + {cardList} + ); }} diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.module.css b/packages/bpk-component-card-list/src/BpkCardListGrid.module.css new file mode 100644 index 0000000000..c13c99d77c --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListGrid.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-card-list-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem} diff --git a/packages/bpk-component-card-list/src/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow.tsx deleted file mode 100644 index 353b735257..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListRow.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/* - * 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 BpkPageIndicator from '../../bpk-component-page-indicator'; -import { cssModules } from '../../bpk-react-utils'; - -import STYLES from './BpkCardList.module.scss'; - -const getClassName = cssModules(STYLES); - -const BpkCardListRow = ({ - accessory, // PAGE INDICATOR - buttonText, - cardList, -}: any) => ( - <> -
{cardList}
- - {!buttonText && ( - , - newIndex: number, - direction: string, - ) => { - setCurrentIndex(newIndex); - }} - /> - )} - -); - -export default BpkCardListRow; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css new file mode 100644 index 0000000000..c13c99d77c --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.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-card-list-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem} diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss new file mode 100644 index 0000000000..0c9c19bdd5 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss @@ -0,0 +1,11 @@ +@import '../../../bpk-mixins/index.scss'; + +.bpk-card-list--row { + display: flex; + flex-direction: row; + gap: bpk-spacing-lg(); + + > * { + flex-grow: 1; + } +} diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx new file mode 100644 index 0000000000..722060cb00 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx @@ -0,0 +1,78 @@ +/* + * 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 { useCallback, type MouseEvent, useState } from 'react'; + +import BpkPageIndicator from '../../../bpk-component-page-indicator'; +import { cssModules } from '../../../bpk-react-utils'; + +import STYLES from './BpkCardListRow.module.scss'; + +const getClassName = cssModules(STYLES); + +const BpkCardListRow = ({ + accessory, + children, + numberOfCardsToShow, +}: any) => { + const [index, setCurrentIndex] = useState(0); + const [visibleCards, setVisibleCards] = useState( + children.slice(0, numberOfCardsToShow), + ); + const numberOfItems = children.length; + + // const withinBounds = (value: number) => (value < 0 ? 0 : value); + + const handleArrowClick = useCallback( + (newIndex, type) => { + setCurrentIndex(newIndex); + const maxValue = (newIndex + 1) * numberOfCardsToShow; + // TODO: work out range when not exact multiple? + const newCards = children.slice(maxValue - numberOfCardsToShow, maxValue); + return setVisibleCards(newCards); + }, + [children, numberOfCardsToShow], + ); + + return ( + <> +
+ {visibleCards} +
+ {accessory && ( + , + newIndex: number, + direction: string, + ) => { + handleArrowClick(newIndex, direction); + }} + /> + )} + + ); +}; + +export default BpkCardListRow; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack.module.css b/packages/bpk-component-card-list/src/BpkCardListStack.module.css new file mode 100644 index 0000000000..125ccaba91 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListStack.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-card-list-stack{display:flex;flex-direction:column;gap:1rem} From 4b44d2282a92c4504f18146f4ec5d002514f6267 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Tue, 28 Nov 2023 14:14:28 +0000 Subject: [PATCH 07/57] bare minimum of responsibe grid --- .../src/BpkCardList.module.css | 2 +- .../src/BpkCardList.module.scss | 2 +- .../src/BpkCardList.tsx | 1 + .../src/BpkCardListGrid.module.css | 2 +- .../src/BpkCardListGrid.module.scss | 9 ++ .../src/BpkCardListGrid.tsx | 119 +++++++++++++++--- .../BpkCardListRow/BpkCardListRow.module.css | 2 +- 7 files changed, 116 insertions(+), 21 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.css b/packages/bpk-component-card-list/src/BpkCardList.module.css index f46972b731..0bb95375a1 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.css +++ b/packages/bpk-component-card-list/src/BpkCardList.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--chip-group{display:flex;gap:0.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:15.0625rem;flex-grow:1;scroll-snap-align:start} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--chip-group{display:flex;gap:0.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.scss b/packages/bpk-component-card-list/src/BpkCardList.module.scss index 6b96616c72..4b2c3ce5ad 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardList.module.scss @@ -53,7 +53,7 @@ } &--card { - min-width: $bpk-one-pixel-rem * 241; + min-width: $bpk-one-pixel-rem * 281; flex-grow: 1; scroll-snap-align: start; } diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 082a2ad4cf..939dcfa483 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -119,6 +119,7 @@ const BpkCardList = ({ expandText={expandText} showContent={showContent} hideContent={hideContent} + cardList={cardList} > {cards} diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.module.css b/packages/bpk-component-card-list/src/BpkCardListGrid.module.css index c13c99d77c..667c8c947a 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListGrid.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem;min-width:17.5625rem}.bpk-card-list-grid--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.module.scss b/packages/bpk-component-card-list/src/BpkCardListGrid.module.scss index 28ce959a90..befc2efcef 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListGrid.module.scss @@ -2,7 +2,16 @@ .bpk-card-list-grid { display: flex; + min-width: $bpk-one-pixel-rem * 281; + padding: $bpk-one-pixel-rem * 5; // TODO: remove flex-direction: row; flex-wrap: wrap; + overflow-y: hidden; gap: bpk-spacing-lg(); + + &--card { + min-width: $bpk-one-pixel-rem * 281; + flex-grow: 1; + scroll-snap-align: start; + } } diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid.tsx index 69d1716c46..855148af75 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid.tsx @@ -1,6 +1,3 @@ -import { BpkButtonV2 } from '../../bpk-component-button'; -import { cssModules } from '../../bpk-react-utils'; - /* * Backpack - Skyscanner's Design System * @@ -18,29 +15,117 @@ import { cssModules } from '../../bpk-react-utils'; * See the License for the specific language governing permissions and * limitations under the License. */ + +import { useEffect, useRef, useState } from 'react'; +import { debounce } from 'lodash'; + +import { BpkButtonV2 } from '../../bpk-component-button'; +import { cssModules } from '../../bpk-react-utils'; + import STYLES from './BpkCardListGrid.module.scss'; import BpkExpand from './BpkExpand'; const getClassName = cssModules(STYLES); +const DEBOUNCE_TIME = 100; +const MIN_CARD_WIDTH = 281; +const DEFAULT_ITEMS = 3; + const BpkCardListGrid = ({ accessory, // EXPAND OR BUTTON buttonText, + cardList, children, expandText, - hideContent, - showContent -}: any) => ( - <> -
{children}
- - {!buttonText && - (accessory === 'expand' ? ( - - ) : ( - Action - ))} - -); +}: any) => { + const containerRef = useRef(null); + const cardRef = useRef(null); + + const [containerWidth, setContainerWidth] = useState(0); + const [showAll, setShowAll] = useState(false); + // const [visibleCards, setVisibleCards] = useState([]); + + const showContent = () => { + if (containerRef.current) { + containerRef.current.style.height = `auto`; + } + setShowAll(true); + } + + const hideContent = () => { + if (containerRef.current) { + containerRef.current.style.height = `${(cardRef.current?.clientHeight || 0) + 15}px`; + } + setShowAll(false); + } + + /* + Calculate the number of cards that can be displayed on a page + The +2 is to avoid the calculation error caused by clientWidth in rounding + */ + const calculateNumberOfDisplay = (): number => + Math.floor((containerWidth + 2) / MIN_CARD_WIDTH); + + // The number of cards that can be displayed on a page + let numberOfDisplay = calculateNumberOfDisplay(); + + const debouncedGetWidth = debounce(() => { + if (!containerRef.current) { + return; + } + // Get the latest width of the container and card + setContainerWidth(containerRef.current?.clientWidth || 0); + if (containerRef.current) { + containerRef.current.style.height = `${(cardRef.current?.clientHeight || 0) + 15}px`; + } + + // Recalculate and initialize component position + numberOfDisplay = calculateNumberOfDisplay(); + }, DEBOUNCE_TIME); + + useEffect(() => { + setContainerWidth(containerRef.current?.clientWidth || 0); + if(containerRef.current) { + containerRef.current.style.height = `${(cardRef.current?.clientHeight || 0) + 15}px`; + } + }, []); + + // Listen for screen width + useEffect(() => { + window.addEventListener('resize', debouncedGetWidth); + return () => { + window.removeEventListener('resize', debouncedGetWidth); + }; + }); + + const cards = cardList.map((card: any, index: number) => { + if (index === 0) { + return (
{card}
) + } + return ( +
{card}
+ ) + }); + + + return ( + <> +
+ {/* {cards.slice( + 0, + numberOfDisplay < DEFAULT_ITEMS ? numberOfDisplay : DEFAULT_ITEMS, + )} */} + {cards} +
+ + {!buttonText && + (accessory === 'expand' ? ( + + ) : ( + Action + ))} + + ); +}; export default BpkCardListGrid; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css index c13c99d77c..7c2868254c 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list--row{display:flex;flex-direction:row;gap:1.5rem}.bpk-card-list--row>*{flex-grow:1} From 22cfbebcccd40a6b61f1176aea09f185c829f873 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Tue, 28 Nov 2023 14:22:00 +0000 Subject: [PATCH 08/57] move bpkcardlistgrid to new folder --- .../src/{ => BpkCardListGrid}/BpkCardListGrid.module.css | 2 +- .../src/{ => BpkCardListGrid}/BpkCardListGrid.module.scss | 2 +- .../src/{ => BpkCardListGrid}/BpkCardListGrid.tsx | 6 +++--- .../bpk-component-card-list/src/BpkCardListGrid/index.ts | 3 +++ 4 files changed, 8 insertions(+), 5 deletions(-) rename packages/bpk-component-card-list/src/{ => BpkCardListGrid}/BpkCardListGrid.module.css (76%) rename packages/bpk-component-card-list/src/{ => BpkCardListGrid}/BpkCardListGrid.module.scss (88%) rename packages/bpk-component-card-list/src/{ => BpkCardListGrid}/BpkCardListGrid.tsx (96%) create mode 100644 packages/bpk-component-card-list/src/BpkCardListGrid/index.ts diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.module.css b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css similarity index 76% rename from packages/bpk-component-card-list/src/BpkCardListGrid.module.css rename to packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css index 667c8c947a..f1e0d68912 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem;min-width:17.5625rem}.bpk-card-list-grid--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:flex;min-width:17.5625rem;padding:.3125rem;flex-direction:row;flex-wrap:wrap;overflow-y:hidden;gap:1.5rem}.bpk-card-list-grid--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.module.scss b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss similarity index 88% rename from packages/bpk-component-card-list/src/BpkCardListGrid.module.scss rename to packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss index befc2efcef..7563b4d941 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss @@ -1,4 +1,4 @@ -@import '../../bpk-mixins/index.scss'; +@import '../../../bpk-mixins/index.scss'; .bpk-card-list-grid { display: flex; diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx similarity index 96% rename from packages/bpk-component-card-list/src/BpkCardListGrid.tsx rename to packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx index 855148af75..78de8e159e 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx @@ -19,11 +19,11 @@ import { useEffect, useRef, useState } from 'react'; import { debounce } from 'lodash'; -import { BpkButtonV2 } from '../../bpk-component-button'; -import { cssModules } from '../../bpk-react-utils'; +import { BpkButtonV2 } from '../../../bpk-component-button'; +import { cssModules } from '../../../bpk-react-utils'; +import BpkExpand from '../BpkExpand'; import STYLES from './BpkCardListGrid.module.scss'; -import BpkExpand from './BpkExpand'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/index.ts b/packages/bpk-component-card-list/src/BpkCardListGrid/index.ts new file mode 100644 index 0000000000..9f70b44799 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/index.ts @@ -0,0 +1,3 @@ +import BpkCardListGrid from "./BpkCardListGrid"; + +export default BpkCardListGrid; From 4af5213b5e5ee2e1627fdab0dc722c527f0beeab Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Tue, 28 Nov 2023 16:47:00 +0000 Subject: [PATCH 09/57] added support for default items --- .../BpkCardListGrid.module.scss | 2 +- .../src/BpkCardListGrid/BpkCardListGrid.tsx | 70 +++++++------------ 2 files changed, 25 insertions(+), 47 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss index 7563b4d941..51bc76817b 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss @@ -12,6 +12,6 @@ &--card { min-width: $bpk-one-pixel-rem * 281; flex-grow: 1; - scroll-snap-align: start; + flex-shrink: 0; } } diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx index 78de8e159e..217d3b623a 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx @@ -28,7 +28,6 @@ import STYLES from './BpkCardListGrid.module.scss'; const getClassName = cssModules(STYLES); const DEBOUNCE_TIME = 100; -const MIN_CARD_WIDTH = 281; const DEFAULT_ITEMS = 3; const BpkCardListGrid = ({ @@ -37,57 +36,32 @@ const BpkCardListGrid = ({ cardList, children, expandText, + initiallyShownCards = DEFAULT_ITEMS, }: any) => { const containerRef = useRef(null); const cardRef = useRef(null); - const [containerWidth, setContainerWidth] = useState(0); + const [cardHeight, setCardHeight] = useState(0); const [showAll, setShowAll] = useState(false); - // const [visibleCards, setVisibleCards] = useState([]); const showContent = () => { - if (containerRef.current) { - containerRef.current.style.height = `auto`; - } setShowAll(true); - } + }; const hideContent = () => { - if (containerRef.current) { - containerRef.current.style.height = `${(cardRef.current?.clientHeight || 0) + 15}px`; - } setShowAll(false); - } - - /* - Calculate the number of cards that can be displayed on a page - The +2 is to avoid the calculation error caused by clientWidth in rounding - */ - const calculateNumberOfDisplay = (): number => - Math.floor((containerWidth + 2) / MIN_CARD_WIDTH); - - // The number of cards that can be displayed on a page - let numberOfDisplay = calculateNumberOfDisplay(); + }; const debouncedGetWidth = debounce(() => { if (!containerRef.current) { return; } - // Get the latest width of the container and card - setContainerWidth(containerRef.current?.clientWidth || 0); - if (containerRef.current) { - containerRef.current.style.height = `${(cardRef.current?.clientHeight || 0) + 15}px`; - } - // Recalculate and initialize component position - numberOfDisplay = calculateNumberOfDisplay(); + setCardHeight(cardRef.current?.clientHeight || 0); }, DEBOUNCE_TIME); useEffect(() => { - setContainerWidth(containerRef.current?.clientWidth || 0); - if(containerRef.current) { - containerRef.current.style.height = `${(cardRef.current?.clientHeight || 0) + 15}px`; - } + setCardHeight(cardRef.current?.clientHeight || 0); }, []); // Listen for screen width @@ -98,23 +72,27 @@ const BpkCardListGrid = ({ }; }); - const cards = cardList.map((card: any, index: number) => { - if (index === 0) { - return (
{card}
) - } - return ( -
{card}
- ) - }); - + const cards = cardList.map((card: any, index: number) => ( +
+ {card} +
+ )); return ( <> -
- {/* {cards.slice( - 0, - numberOfDisplay < DEFAULT_ITEMS ? numberOfDisplay : DEFAULT_ITEMS, - )} */} +
{cards}
From e1b7fe2273f0800ca8d3eaa167d290458c1ceaf2 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Tue, 28 Nov 2023 16:55:34 +0000 Subject: [PATCH 10/57] add typing for BpkCardListGrid --- .../bpk-component-card-list/src/BpkCardList.tsx | 6 +----- .../src/BpkCardListGrid/BpkCardListGrid.tsx | 14 +++++++++++--- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 939dcfa483..f9d376f1c6 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -117,12 +117,8 @@ const BpkCardList = ({ accessory={accessory} buttonText={buttonText} expandText={expandText} - showContent={showContent} - hideContent={hideContent} cardList={cardList} - > - {cards} - + /> ) : ( { +}: BpkCardListGridProps) => { const containerRef = useRef(null); const cardRef = useRef(null); From d74517ea56c1340670645b56130e6d939c4ec921 Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Thu, 7 Dec 2023 14:32:10 +0000 Subject: [PATCH 11/57] update CardList Row --- examples/bpk-component-card-list/examples.js | 12 +- .../src/BpkCardList.tsx | 16 +- .../BpkCardListRail.module.css} | 19 +- .../BpkCardListRail.module.scss | 7 + .../src/BpkCardListRail/BpkCardListRail.tsx | 34 ++++ .../BpkCardListRow/BpkCardListRow.module.css | 2 +- .../BpkCardListRow/BpkCardListRow.module.scss | 33 +++- .../src/BpkCardListRow/BpkCardListRow.tsx | 164 ++++++++++++++---- 8 files changed, 228 insertions(+), 59 deletions(-) rename packages/bpk-component-card-list/src/{BpkCardListRail.tsx => BpkCardListRail/BpkCardListRail.module.css} (69%) create mode 100644 packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss create mode 100644 packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index fd691cb083..8c9c064d1d 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -20,6 +20,7 @@ // import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkCard from '../../packages/bpk-component-card'; import BpkCardList from '../../packages/bpk-component-card-list'; +import BpkImage from '../../packages/bpk-component-image'; // import STYLES from './examples.module.scss'; @@ -29,11 +30,14 @@ const RowToRailExample = () => ( ( - {/* */} + TEST {i} ))} - accessory='pagination' + accessory="pagination" layoutDesktop="row" layoutMobile="rail" title="Card List Component" @@ -48,7 +52,7 @@ const GridToRailExample = () => ( TEST {i} ))} - accessory='expand' + accessory="expand" layoutDesktop="grid" layoutMobile="rail" title="Card List Component" @@ -77,7 +81,7 @@ const GridToStackExample = () => ( TEST {i} ))} - accessory='expand' + accessory="expand" layoutDesktop="grid" layoutMobile="stack" title="Card List Component" diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index f9d376f1c6..9e33d7c32b 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -25,10 +25,10 @@ import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint'; import STYLES from './BpkCardList.module.scss'; import type { BpkAccessoryTypes } from './BpkAccessory'; +import BpkCardListGrid from './BpkCardListGrid/BpkCardListGrid'; +import BpkCardListRail from './BpkCardListRail/BpkCardListRail'; import BpkCardListRow from './BpkCardListRow/BpkCardListRow'; -import BpkCardListGrid from './BpkCardListGrid'; import BpkCardListStack from './BpkCardListStack'; -import BpkCardListRail from './BpkCardListRail'; const getClassName = cssModules(STYLES); @@ -67,6 +67,7 @@ const BpkCardList = ({ onButtonClick, title, }: BpkCardListProps) => { + const allCards = cardList.slice(0, MAX_ITEMS); const [visibleCards, setVisibleCards] = useState( cardList.slice(0, initiallyShownCards), ); @@ -89,9 +90,12 @@ const BpkCardList = ({ description={description} button={buttonText && {buttonText}} /> - {/*
- {chipGroup} -
*/} + + {chipGroup && ( +
+ {chipGroup} +
+ )}
@@ -124,7 +128,7 @@ const BpkCardList = ({ accessory={accessory === 'pagination' && !buttonText} numberOfCardsToShow={initiallyShownCards} > - {cardList} + {allCards} ); }} diff --git a/packages/bpk-component-card-list/src/BpkCardListRail.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css similarity index 69% rename from packages/bpk-component-card-list/src/BpkCardListRail.tsx rename to packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css index db2d5030e3..824e4be219 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css @@ -1,25 +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. - */ -// @ts-ignore: TODO - fix -import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container'; - -const BpkCardListRail = ({ children }: any) => ( - {children} -); - -export default BpkCardListRail; +*/ +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list--rail_card{padding:0.25rem} diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss new file mode 100644 index 0000000000..71927b406c --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss @@ -0,0 +1,7 @@ +@import '../../../bpk-mixins/index.scss'; + +.bpk-card-list--rail { + &_card { + padding: bpk-spacing-sm(); + } +} diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx new file mode 100644 index 0000000000..fd4738542f --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx @@ -0,0 +1,34 @@ +/* + * 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. + */ +// @ts-ignore: TODO - fix +import BpkMobileScrollContainer from '../../../bpk-component-mobile-scroll-container'; +import { cssModules } from '../../../bpk-react-utils'; + +import STYLES from './BpkCardListRail.module.scss'; + +const getClassName = cssModules(STYLES); + +const BpkCardListRail = ({ children }: any) => ( + + {children.map((card: any) => ( +
{card}
+ ))} + +); + +export default BpkCardListRail; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css index 7c2868254c..a16d27e42d 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list--row{display:flex;flex-direction:row;gap:1.5rem}.bpk-card-list--row>*{flex-grow:1} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-.75rem}.bpk-card-list-row .bpk-card-list-row__card{flex-shrink:0;padding:0.25rem}@media (min-width: 64.0625rem){.bpk-card-list-row .bpk-card-list-row__card{width:calc(100% / 3)}}@media (max-width: 64rem){.bpk-card-list-row .bpk-card-list-row__card{width:50%}}@media (min-width: 32.0625rem) and (max-width: 48rem){.bpk-card-list-row .bpk-card-list-row__card{width:100%}}@media (max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none}} diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss index 0c9c19bdd5..4a80bc86a4 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss @@ -1,11 +1,32 @@ @import '../../../bpk-mixins/index.scss'; -.bpk-card-list--row { - display: flex; - flex-direction: row; - gap: bpk-spacing-lg(); +.bpk-card-list-row { + position: relative; - > * { - flex-grow: 1; + .bpk-card-list-row__cards { + display: flex; + overflow: hidden; + margin-inline: 0 - 1.5 * bpk-spacing-md(); + } + + .bpk-card-list-row__card { + padding: bpk-spacing-sm(); + flex-shrink: 0; + + @include bpk-breakpoint-above-tablet { + width: calc(100% / 3); + } + + @include bpk-breakpoint-tablet { + width: 50%; + } + + @include bpk-breakpoint-small-tablet-only { + width: 100%; + } + + @include bpk-breakpoint-mobile { + display: none; + } } } diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx index 722060cb00..103dd2c8a7 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx @@ -16,51 +16,157 @@ * limitations under the License. */ -import { useCallback, type MouseEvent, useState } from 'react'; +import { + useCallback, + useEffect, + useRef, + useState, + type MouseEvent, +} from 'react'; +import debounce from 'lodash/debounce'; import BpkPageIndicator from '../../../bpk-component-page-indicator'; -import { cssModules } from '../../../bpk-react-utils'; +import { cssModules, isRTL } from '../../../bpk-react-utils'; import STYLES from './BpkCardListRow.module.scss'; const getClassName = cssModules(STYLES); +const DEBOUNCE_TIME = 150; +let setVisibleIndexes: (array: number[]) => {}; -const BpkCardListRow = ({ - accessory, - children, - numberOfCardsToShow, -}: any) => { - const [index, setCurrentIndex] = useState(0); - const [visibleCards, setVisibleCards] = useState( - children.slice(0, numberOfCardsToShow), +const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { + const numberOfCards = children.length; + // TODO: need to update when width changes + const numberOfIndicators = Math.ceil(numberOfCards / numberOfCardsToShow); + + const containerRef = useRef(null); + const cardRef = useRef(null); + + const [containerWidth, setContainerWidth] = useState(0); + const [cardIndex, setCardIndex] = useState(0); + const [cardWidth, setCardWidth] = useState(0); + const [pageIndex, setCurrentPageIndex] = useState(0); + + const calculateNumberOfDisplay = (): number => + Math.floor((containerWidth + 2) / cardWidth); + + const touchEnd = useCallback( + (nextCardIndex: number): boolean => + (numberOfCards - nextCardIndex) * cardWidth <= containerWidth, + [cardWidth, numberOfCards, containerWidth], ); - const numberOfItems = children.length; - // const withinBounds = (value: number) => (value < 0 ? 0 : value); + const touchStart = (nextCardIndex: number): boolean => nextCardIndex <= 0; + + const setScrollPosition = (xOffset: number) => { + if (!containerRef.current?.scroll) { + return; + } + containerRef.current.scroll({ + left: isRTL() ? -xOffset : xOffset, + behavior: 'smooth', + }); + }; + + // TODO: how to incorporate the initiallyShownCards here? + let numberOfDisplay = calculateNumberOfDisplay(); + + const debouncedGetWidth = debounce(() => { + if (!containerRef.current) { + return; + } + setContainerWidth(containerRef.current?.clientWidth || 0); + setCardWidth(cardRef.current?.clientWidth || 0); + numberOfDisplay = calculateNumberOfDisplay(); + setScrollPosition(0); + setCardIndex(0); + }, DEBOUNCE_TIME); + + useEffect(() => { + setContainerWidth(containerRef.current?.clientWidth || 0); + setCardWidth(cardRef.current?.clientWidth || 0); + }, []); + + useEffect(() => { + setScrollPosition(cardIndex * cardWidth); + }, [cardIndex, cardWidth]); + + useEffect(() => { + if (numberOfDisplay !== Infinity && numberOfDisplay > 0) { + setVisibleIndexes && + setVisibleIndexes( + Array.from(Array(numberOfDisplay), (_, i) => i + cardIndex), + ); + } + }, [cardIndex, numberOfDisplay]); + + useEffect(() => { + window.addEventListener('resize', debouncedGetWidth); + return () => { + window.removeEventListener('resize', debouncedGetWidth); + }; + }); const handleArrowClick = useCallback( - (newIndex, type) => { - setCurrentIndex(newIndex); - const maxValue = (newIndex + 1) * numberOfCardsToShow; - // TODO: work out range when not exact multiple? - const newCards = children.slice(maxValue - numberOfCardsToShow, maxValue); - return setVisibleCards(newCards); + (newIndex, direction) => { + if (!containerWidth || !cardWidth) { + return; + } + + if (direction === 'NEXT') { + const nextCardIndex = cardIndex + numberOfDisplay; + setCurrentPageIndex(newIndex); + if (touchEnd(nextCardIndex)) { + setCardIndex(numberOfCards - numberOfDisplay); + } else { + setCardIndex(nextCardIndex); + } + } + if (direction === 'PREV') { + const nextCardIndex = cardIndex - numberOfDisplay; + setCurrentPageIndex(newIndex); + if (touchStart(nextCardIndex)) { + setCardIndex(0); + } else { + setCardIndex(nextCardIndex); + } + } }, - [children, numberOfCardsToShow], + [ + cardIndex, + cardWidth, + containerWidth, + numberOfCards, + numberOfDisplay, + touchEnd, + ], ); return ( - <> -
- {visibleCards} +
+
+ {children.map((card: any, index: number) => ( +
+ {card} +
+ ))}
- {accessory && ( + + {accessory && numberOfIndicators !== 1 && ( , @@ -71,7 +177,7 @@ const BpkCardListRow = ({ }} /> )} - +
); }; From 6c0a596b4fb0be47338c303d45a0d40d17261981 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Thu, 18 Jan 2024 10:39:38 +0000 Subject: [PATCH 12/57] fix grid and stack --- .../src/BpkCardList.tsx | 7 ++- .../BpkCardListGrid.module.css | 2 +- .../BpkCardListGrid.module.scss | 13 ++--- .../src/BpkCardListGrid/BpkCardListGrid.tsx | 56 ++++--------------- .../BpkCardListRow/BpkCardListRow.module.css | 2 +- .../BpkCardListStack.module.css | 0 .../BpkCardListStack.module.scss | 2 +- .../BpkCardListStack.tsx | 6 +- .../src/BpkCardListStack/index.ts | 3 + 9 files changed, 29 insertions(+), 62 deletions(-) rename packages/bpk-component-card-list/src/{ => BpkCardListStack}/BpkCardListStack.module.css (100%) rename packages/bpk-component-card-list/src/{ => BpkCardListStack}/BpkCardListStack.module.scss (69%) rename packages/bpk-component-card-list/src/{ => BpkCardListStack}/BpkCardListStack.tsx (88%) create mode 100644 packages/bpk-component-card-list/src/BpkCardListStack/index.ts diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 9e33d7c32b..57bfeecdf7 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -16,6 +16,7 @@ * limitations under the License. */ +import type { ReactElement} from 'react'; import { useState } from 'react'; import { cssModules } from '../../bpk-react-utils'; @@ -28,7 +29,7 @@ import type { BpkAccessoryTypes } from './BpkAccessory'; import BpkCardListGrid from './BpkCardListGrid/BpkCardListGrid'; import BpkCardListRail from './BpkCardListRail/BpkCardListRail'; import BpkCardListRow from './BpkCardListRow/BpkCardListRow'; -import BpkCardListStack from './BpkCardListStack'; +import BpkCardListStack from './BpkCardListStack/BpkCardListStack'; const getClassName = cssModules(STYLES); @@ -46,7 +47,7 @@ export type BpkCardListProps = { buttonText?: string; onButtonClick?: () => void; chipGroup?: BpkChipGroup; - cardList: JSX.Element[]; + cardList: ReactElement[]; initiallyShownCards?: number; layoutDesktop: 'row' | 'grid'; layoutMobile: 'rail' | 'stack'; @@ -72,7 +73,7 @@ const BpkCardList = ({ cardList.slice(0, initiallyShownCards), ); - const cards = visibleCards.map((card) => ( + const cards = visibleCards.map((card: ReactElement) => (
{card}
)); diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css index f1e0d68912..5dfffcaae3 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:flex;min-width:17.5625rem;padding:.3125rem;flex-direction:row;flex-wrap:wrap;overflow-y:hidden;gap:1.5rem}.bpk-card-list-grid--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:grid;align-content:start;gap:1.5rem;grid-template-columns:repeat(auto-fit, minmax(17.5625rem, 1fr))}.bpk-card-list-grid--card{min-width:17.5625rem} diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss index 51bc76817b..ea681243c4 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss @@ -1,17 +1,14 @@ @import '../../../bpk-mixins/index.scss'; .bpk-card-list-grid { - display: flex; - min-width: $bpk-one-pixel-rem * 281; - padding: $bpk-one-pixel-rem * 5; // TODO: remove - flex-direction: row; - flex-wrap: wrap; - overflow-y: hidden; + display: grid; + grid-template-columns: repeat( + auto-fit, + minmax($bpk-one-pixel-rem * 281, 1fr) + ); gap: bpk-spacing-lg(); &--card { min-width: $bpk-one-pixel-rem * 281; - flex-grow: 1; - flex-shrink: 0; } } diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx index 16998fba3a..742cd2ba02 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx @@ -16,8 +16,8 @@ * limitations under the License. */ -import { useEffect, useRef, useState } from 'react'; -import { debounce } from 'lodash'; +import type { ReactElement } from 'react'; +import { useState } from 'react'; import { BpkButtonV2 } from '../../../bpk-component-button'; import { cssModules } from '../../../bpk-react-utils'; @@ -28,16 +28,15 @@ import STYLES from './BpkCardListGrid.module.scss'; const getClassName = cssModules(STYLES); -const DEBOUNCE_TIME = 100; -const DEFAULT_ITEMS = 3; +const DEFAULT_ITEMS = 4; type BpkCardListGridProps = { accessory?: BpkAccessoryTypes; buttonText?: string; - cardList: JSX.Element[]; + cardList: ReactElement[]; expandText?: string; initiallyShownCards?: number; -} +}; const BpkCardListGrid = ({ accessory, @@ -46,10 +45,6 @@ const BpkCardListGrid = ({ expandText, initiallyShownCards = DEFAULT_ITEMS, }: BpkCardListGridProps) => { - const containerRef = useRef(null); - const cardRef = useRef(null); - - const [cardHeight, setCardHeight] = useState(0); const [showAll, setShowAll] = useState(false); const showContent = () => { @@ -60,48 +55,19 @@ const BpkCardListGrid = ({ setShowAll(false); }; - const debouncedGetWidth = debounce(() => { - if (!containerRef.current) { - return; - } - - setCardHeight(cardRef.current?.clientHeight || 0); - }, DEBOUNCE_TIME); - - useEffect(() => { - setCardHeight(cardRef.current?.clientHeight || 0); - }, []); - - // Listen for screen width - useEffect(() => { - window.addEventListener('resize', debouncedGetWidth); - return () => { - window.removeEventListener('resize', debouncedGetWidth); - }; - }); - const cards = cardList.map((card: any, index: number) => ( -
- {card} -
+
{card}
)); return ( <>
- {cards} + {!showAll ? cards.slice(0, initiallyShownCards) : cards}
{!buttonText && diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css index a16d27e42d..3bbd2fa368 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-.75rem}.bpk-card-list-row .bpk-card-list-row__card{flex-shrink:0;padding:0.25rem}@media (min-width: 64.0625rem){.bpk-card-list-row .bpk-card-list-row__card{width:calc(100% / 3)}}@media (max-width: 64rem){.bpk-card-list-row .bpk-card-list-row__card{width:50%}}@media (min-width: 32.0625rem) and (max-width: 48rem){.bpk-card-list-row .bpk-card-list-row__card{width:100%}}@media (max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none}} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:0.25rem;flex-shrink:0}@media (min-width: 64.0625rem){.bpk-card-list-row .bpk-card-list-row__card{width:calc(100% / 3)}}@media (max-width: 64rem){.bpk-card-list-row .bpk-card-list-row__card{width:50%}}@media (min-width: 32.0625rem) and (max-width: 48rem){.bpk-card-list-row .bpk-card-list-row__card{width:100%}}@media (max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none}} diff --git a/packages/bpk-component-card-list/src/BpkCardListStack.module.css b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css similarity index 100% rename from packages/bpk-component-card-list/src/BpkCardListStack.module.css rename to packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css diff --git a/packages/bpk-component-card-list/src/BpkCardListStack.module.scss b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss similarity index 69% rename from packages/bpk-component-card-list/src/BpkCardListStack.module.scss rename to packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss index 49f800e715..c2d328c30d 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss @@ -1,4 +1,4 @@ -@import '../../bpk-mixins/index.scss'; +@import '../../../bpk-mixins/index.scss'; .bpk-card-list-stack { display: flex; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack.tsx b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx similarity index 88% rename from packages/bpk-component-card-list/src/BpkCardListStack.tsx rename to packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx index 3fb08a6145..0c4f7ad73f 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx @@ -15,11 +15,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BpkButtonV2 } from '../../bpk-component-button'; -import { cssModules } from '../../bpk-react-utils'; +import { BpkButtonV2 } from '../../../bpk-component-button'; +import { cssModules } from '../../../bpk-react-utils'; +import BpkExpand from '../BpkExpand'; import STYLES from './BpkCardListStack.module.scss'; -import BpkExpand from './BpkExpand'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/index.ts b/packages/bpk-component-card-list/src/BpkCardListStack/index.ts new file mode 100644 index 0000000000..223969d0b9 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListStack/index.ts @@ -0,0 +1,3 @@ +import BpkCardListStack from "./BpkCardListStack"; + +export default BpkCardListStack; From f920d99f0b6e2bf5cdd2f95c8c6f07f23e40b745 Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Fri, 19 Jan 2024 08:48:23 +0000 Subject: [PATCH 13/57] Card List Rail --- examples/bpk-component-card-list/examples.js | 32 +++++++++++++------ examples/bpk-component-card-list/stories.js | 2 ++ .../src/BpkCardList.tsx | 4 +-- .../BpkCardListGrid.module.css | 2 +- .../BpkCardListRail.module.css | 2 +- .../BpkCardListRail.module.scss | 14 +++++++- .../src/BpkCardListRail/BpkCardListRail.tsx | 17 +++++++--- .../src/BpkCardListRow/BpkCardListRow.tsx | 16 ++++++---- 8 files changed, 63 insertions(+), 26 deletions(-) diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index 8c9c064d1d..836ccd1efb 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -26,21 +26,34 @@ import BpkImage from '../../packages/bpk-component-image'; // const getClassName = cssModules(STYLES); +const DealsCard = (index) => ( + + + {`Deals Card ${index}`} + +); + const RowToRailExample = () => ( ( - - - TEST {i} - - ))} + cardList={[...Array(14).keys()].map((i) => DealsCard(i))} + accessory="pagination" + layoutDesktop="row" + layoutMobile="rail" + title="Card List Component" + /> +); + +const RowToRailWithHeaderButtonExample = () => ( + DealsCard(i))} accessory="pagination" layoutDesktop="row" layoutMobile="rail" title="Card List Component" + buttonText="Header Button" /> ); @@ -90,6 +103,7 @@ const GridToStackExample = () => ( export { RowToRailExample, + RowToRailWithHeaderButtonExample, GridToRailExample, RowToStackExample, GridToStackExample, diff --git a/examples/bpk-component-card-list/stories.js b/examples/bpk-component-card-list/stories.js index f3b83dc226..f87e960c45 100644 --- a/examples/bpk-component-card-list/stories.js +++ b/examples/bpk-component-card-list/stories.js @@ -22,6 +22,7 @@ import { GridToRailExample, RowToStackExample, GridToStackExample, + RowToRailWithHeaderButtonExample, } from './examples'; export default { @@ -32,3 +33,4 @@ export const RowToRail = RowToRailExample; export const GridToRail = GridToRailExample; export const RowToStack = RowToStackExample; export const GridToStack = GridToStackExample; +export const RowToRailWithHeaderButton = RowToRailWithHeaderButtonExample; diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 57bfeecdf7..57c3ab4312 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -import type { ReactElement} from 'react'; +import type { ReactElement } from 'react'; import { useState } from 'react'; import { cssModules } from '../../bpk-react-utils'; @@ -103,7 +103,7 @@ const BpkCardList = ({ {(isActive) => { if (isActive) { return layoutMobile === 'rail' ? ( - {cards} + {allCards} ) : ( *{width:100%} diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss index 71927b406c..963d1b2bde 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss @@ -1,7 +1,19 @@ @import '../../../bpk-mixins/index.scss'; .bpk-card-list--rail { + &_container { + display: flex; + } + &_card { - padding: bpk-spacing-sm(); + display: flex; + min-width: 100%; + padding: bpk-spacing-base(); + justify-content: center; + align-items: center; + + > * { + width: 100%; + } } } diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx index fd4738542f..5b076386c4 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-undef */ /* * Backpack - Skyscanner's Design System * @@ -15,7 +16,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -// @ts-ignore: TODO - fix import BpkMobileScrollContainer from '../../../bpk-component-mobile-scroll-container'; import { cssModules } from '../../../bpk-react-utils'; @@ -23,11 +23,18 @@ import STYLES from './BpkCardListRail.module.scss'; const getClassName = cssModules(STYLES); -const BpkCardListRail = ({ children }: any) => ( +const BpkCardListRail = ({ children }: { children: JSX.Element[] }) => ( - {children.map((card: any) => ( -
{card}
- ))} +
+ {children.map((item: JSX.Element) => ( +
+ {item} +
+ ))} +
); diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx index 103dd2c8a7..8873020b8f 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx @@ -37,7 +37,6 @@ let setVisibleIndexes: (array: number[]) => {}; const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { const numberOfCards = children.length; // TODO: need to update when width changes - const numberOfIndicators = Math.ceil(numberOfCards / numberOfCardsToShow); const containerRef = useRef(null); const cardRef = useRef(null); @@ -50,6 +49,12 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { const calculateNumberOfDisplay = (): number => Math.floor((containerWidth + 2) / cardWidth); + // TODO: how to incorporate the initiallyShownCards here? + let numberOfDisplay = calculateNumberOfDisplay(); + const numberOfIndicators = Math.ceil(numberOfCards / numberOfDisplay); + + const [indicators, setNumberOfIndicators] = useState(numberOfIndicators); + const touchEnd = useCallback( (nextCardIndex: number): boolean => (numberOfCards - nextCardIndex) * cardWidth <= containerWidth, @@ -68,9 +73,6 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { }); }; - // TODO: how to incorporate the initiallyShownCards here? - let numberOfDisplay = calculateNumberOfDisplay(); - const debouncedGetWidth = debounce(() => { if (!containerRef.current) { return; @@ -97,8 +99,9 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { setVisibleIndexes( Array.from(Array(numberOfDisplay), (_, i) => i + cardIndex), ); + setNumberOfIndicators(Math.ceil(numberOfCards / numberOfDisplay)); } - }, [cardIndex, numberOfDisplay]); + }, [cardIndex, numberOfDisplay, numberOfCards, indicators]); useEffect(() => { window.addEventListener('resize', debouncedGetWidth); @@ -112,10 +115,10 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { if (!containerWidth || !cardWidth) { return; } + setCurrentPageIndex(newIndex); if (direction === 'NEXT') { const nextCardIndex = cardIndex + numberOfDisplay; - setCurrentPageIndex(newIndex); if (touchEnd(nextCardIndex)) { setCardIndex(numberOfCards - numberOfDisplay); } else { @@ -124,7 +127,6 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { } if (direction === 'PREV') { const nextCardIndex = cardIndex - numberOfDisplay; - setCurrentPageIndex(newIndex); if (touchStart(nextCardIndex)) { setCardIndex(0); } else { From ab307af910c6ecf4505e465fbc844a900bd4f777 Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Fri, 19 Jan 2024 09:09:14 +0000 Subject: [PATCH 14/57] demo --- examples/bpk-component-card-list/examples.js | 30 ++++++++++++------- .../BpkCardListRail.module.scss | 1 + .../BpkCardListRow/BpkCardListRow.module.scss | 1 + 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index 836ccd1efb..a9ab8717d2 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -17,25 +17,34 @@ */ /* @flow strict */ -// import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkCard from '../../packages/bpk-component-card'; import BpkCardList from '../../packages/bpk-component-card-list'; -import BpkImage from '../../packages/bpk-component-image'; +// import BpkImage, { +// BORDER_RADIUS_STYLES, +// } from '../../packages/bpk-component-image'; // import STYLES from './examples.module.scss'; // const getClassName = cssModules(STYLES); -const DealsCard = (index) => ( - - - {`Deals Card ${index}`} +const DealsCard = (i) => ( + null}> + + {`Let's explore Deal ${i}`} + + + It's your world and we'll help you explore it. Find the best + prices across millions of flights, hotels and car hire options to create + your perfect trip. +
+ ); - const RowToRailExample = () => ( DealsCard(i))} @@ -80,6 +89,7 @@ const RowToStackExample = () => ( TEST {i} ))} + accessory="pagination" layoutDesktop="row" layoutMobile="stack" title="Card List Component" diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss index 963d1b2bde..7dda08609a 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss @@ -11,6 +11,7 @@ padding: bpk-spacing-base(); justify-content: center; align-items: center; + text-wrap: wrap; > * { width: 100%; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss index 4a80bc86a4..118051c4de 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss @@ -12,6 +12,7 @@ .bpk-card-list-row__card { padding: bpk-spacing-sm(); flex-shrink: 0; + text-wrap: wrap; @include bpk-breakpoint-above-tablet { width: calc(100% / 3); From e2bf1e049cb2d5b06161816ca73f4bd4215bd4a9 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Fri, 19 Jan 2024 09:21:41 +0000 Subject: [PATCH 15/57] typing and cleanup --- .../src/BpkAccessory.tsx | 55 ------------------- .../src/BpkCardList.tsx | 31 +++++++---- .../src/BpkCardListGrid/BpkCardListGrid.tsx | 48 +++++++--------- .../src/BpkCardListRail/index.ts | 3 + .../src/BpkCardListRow/index.ts | 3 + .../src/BpkCardListStack/BpkCardListStack.tsx | 28 ++++++++-- .../src/{ => BpkExpand}/BpkExpand.tsx | 30 +++++----- .../src/BpkExpand/index.ts | 3 + 8 files changed, 87 insertions(+), 114 deletions(-) delete mode 100644 packages/bpk-component-card-list/src/BpkAccessory.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListRail/index.ts create mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/index.ts rename packages/bpk-component-card-list/src/{ => BpkExpand}/BpkExpand.tsx (51%) create mode 100644 packages/bpk-component-card-list/src/BpkExpand/index.ts diff --git a/packages/bpk-component-card-list/src/BpkAccessory.tsx b/packages/bpk-component-card-list/src/BpkAccessory.tsx deleted file mode 100644 index 6c25448209..0000000000 --- a/packages/bpk-component-card-list/src/BpkAccessory.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type { MouseEvent } from 'react'; - -import BpkPageIndicator from '../../bpk-component-page-indicator'; -import BpkButtonV2 from '../../bpk-component-button/src/BpkButtonV2/BpkButton'; - -import BpkExpand from './BpkExpand'; - -export type BpkAccessoryTypes = 'expand' | 'button' | 'pagination'; - -type Props = { - accessory: BpkAccessoryTypes; - currentIndex: number; - hideContent: () => void; - setCurrentIndex: (index: number) => void; - showContent: () => void; - totalIndicators: number; -}; -const BpkAccessory = ({ - accessory, - currentIndex, - hideContent, - setCurrentIndex, - showContent, - totalIndicators, -}: Props) => { - if (accessory === 'expand') { - // { - return ; - } - if (accessory === 'pagination') { - return ( - , - newIndex: number, - direction: string, - ) => { - setCurrentIndex(newIndex); - }} - /> - ); - } - if (accessory === 'button') { - return Action; - } - return null; -}; - -export default BpkAccessory; diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 57c3ab4312..896ac12eb6 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -25,11 +25,10 @@ import { BpkButtonV2 } from '../../bpk-component-button'; import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint'; import STYLES from './BpkCardList.module.scss'; -import type { BpkAccessoryTypes } from './BpkAccessory'; -import BpkCardListGrid from './BpkCardListGrid/BpkCardListGrid'; -import BpkCardListRail from './BpkCardListRail/BpkCardListRail'; -import BpkCardListRow from './BpkCardListRow/BpkCardListRow'; -import BpkCardListStack from './BpkCardListStack/BpkCardListStack'; +import BpkCardListGrid from './BpkCardListGrid'; +import BpkCardListRail from './BpkCardListRail'; +import BpkCardListRow from './BpkCardListRow'; +import BpkCardListStack from './BpkCardListStack'; const getClassName = cssModules(STYLES); @@ -40,11 +39,12 @@ const MAX_ITEMS = 12; // MAX should be 12 for Desktop Grid and Mobile Stack const DEFAULT_ITEMS = 3; type BpkChipGroup = any; +type BpkAccessoryTypes = 'expand' | 'button' | 'pagination'; export type BpkCardListProps = { title: string; description?: string; - buttonText?: string; + buttonText?: string; // For Button in Section Header onButtonClick?: () => void; chipGroup?: BpkChipGroup; cardList: ReactElement[]; @@ -72,6 +72,7 @@ const BpkCardList = ({ const [visibleCards, setVisibleCards] = useState( cardList.slice(0, initiallyShownCards), ); + const [collapsed, setCollapsed] = useState(true); const cards = visibleCards.map((card: ReactElement) => (
{card}
@@ -89,7 +90,11 @@ const BpkCardList = ({ {buttonText}} + button={ + buttonText && ( + {buttonText} + ) + } /> {chipGroup && ( @@ -107,10 +112,11 @@ const BpkCardList = ({ ) : ( {cards} @@ -120,13 +126,16 @@ const BpkCardList = ({ return layoutDesktop === 'grid' ? ( ) : ( {allCards} diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx index 742cd2ba02..cb73743708 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx @@ -16,63 +16,53 @@ * limitations under the License. */ -import type { ReactElement } from 'react'; -import { useState } from 'react'; +import type { Dispatch, ReactElement, SetStateAction } from 'react'; import { BpkButtonV2 } from '../../../bpk-component-button'; import { cssModules } from '../../../bpk-react-utils'; import BpkExpand from '../BpkExpand'; -import type { BpkAccessoryTypes } from '../BpkAccessory'; import STYLES from './BpkCardListGrid.module.scss'; const getClassName = cssModules(STYLES); -const DEFAULT_ITEMS = 4; - type BpkCardListGridProps = { - accessory?: BpkAccessoryTypes; - buttonText?: string; + accessory?: 'expand' | 'button'; cardList: ReactElement[]; expandText?: string; - initiallyShownCards?: number; + showContent: () => void; + hideContent: () => void; + collapsed: boolean; + setCollapsed: Dispatch>; }; const BpkCardListGrid = ({ accessory, - buttonText, cardList, + collapsed, expandText, - initiallyShownCards = DEFAULT_ITEMS, + hideContent, + setCollapsed, + showContent, }: BpkCardListGridProps) => { - const [showAll, setShowAll] = useState(false); - - const showContent = () => { - setShowAll(true); - }; - - const hideContent = () => { - setShowAll(false); - }; - const cards = cardList.map((card: any, index: number) => (
{card}
)); return ( <> -
- {!showAll ? cards.slice(0, initiallyShownCards) : cards} +
+ {cards}
- {!buttonText && + {!expandText && (accessory === 'expand' ? ( - + ) : ( Action ))} diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/index.ts b/packages/bpk-component-card-list/src/BpkCardListRail/index.ts new file mode 100644 index 0000000000..41344ef95b --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRail/index.ts @@ -0,0 +1,3 @@ +import BpkCardListRail from "./BpkCardListRail"; + +export default BpkCardListRail; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/index.ts b/packages/bpk-component-card-list/src/BpkCardListRow/index.ts new file mode 100644 index 0000000000..05f47a6367 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRow/index.ts @@ -0,0 +1,3 @@ +import BpkCardListRow from "./BpkCardListRow"; + +export default BpkCardListRow; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx index 0c4f7ad73f..c491217528 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx @@ -15,6 +15,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import type { Dispatch, SetStateAction } from 'react'; + import { BpkButtonV2 } from '../../../bpk-component-button'; import { cssModules } from '../../../bpk-react-utils'; import BpkExpand from '../BpkExpand'; @@ -23,20 +25,36 @@ import STYLES from './BpkCardListStack.module.scss'; const getClassName = cssModules(STYLES); +type BpkCardListStackProps = { + accessory: 'expand' | 'button'; + children: any; + expandText?: string; + showContent: () => void; + hideContent: () => void; + collapsed: boolean; + setCollapsed: Dispatch>; +}; + const BpkCardListStack = ({ - accessory, // EXPAND OR BUTTON - buttonText, + accessory, children, + collapsed, expandText, hideContent, + setCollapsed, showContent, -}: any) => ( +}: BpkCardListStackProps) => ( <>
{children}
- {!buttonText && + {!expandText && (accessory === 'expand' ? ( - + ) : ( Action ))} diff --git a/packages/bpk-component-card-list/src/BpkExpand.tsx b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx similarity index 51% rename from packages/bpk-component-card-list/src/BpkExpand.tsx rename to packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx index 2bc3206463..1d560f06e6 100644 --- a/packages/bpk-component-card-list/src/BpkExpand.tsx +++ b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx @@ -1,31 +1,33 @@ -import { useState } from 'react'; - // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import ChevronDown from '../../bpk-component-icon/sm/chevron-down'; +import ChevronDown from '../../../bpk-component-icon/sm/chevron-down'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import ChevronUp from '../../bpk-component-icon/sm/chevron-up'; -import { BUTTON_TYPES, BpkButtonV2 } from '../../bpk-component-button'; -import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon'; +import ChevronUp from '../../../bpk-component-icon/sm/chevron-up'; +import { BUTTON_TYPES, BpkButtonV2 } from '../../../bpk-component-button'; +import { withButtonAlignment, withRtlSupport } from '../../../bpk-component-icon'; const AlignedChevronDownIcon = withButtonAlignment(withRtlSupport(ChevronDown)); const AlignedChevronUpIcon = withButtonAlignment(withRtlSupport(ChevronUp)); -const BpkExpand = ({ hideContent, showContent }: any) => { - const [contentHidden, setContentHidden] = useState(true); - - const buttonText = contentHidden ? 'Show More' : 'Show Less'; - const buttonIcon = contentHidden ? ( +const BpkExpand = ({ + collapsed, + hideContent, + setCollapsed, + showContent, +}: any) => { + // TODO: pass a prop for both strings + const buttonText = collapsed ? 'Show More' : 'Show Less'; + const buttonIcon = collapsed ? ( ) : ( ); const buttonOnClick = () => { - if (contentHidden) { + if (collapsed) { showContent(); - setContentHidden(false); + setCollapsed(false); } else { hideContent(); - setContentHidden(true); + setCollapsed(true); } }; diff --git a/packages/bpk-component-card-list/src/BpkExpand/index.ts b/packages/bpk-component-card-list/src/BpkExpand/index.ts new file mode 100644 index 0000000000..407b204bd2 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkExpand/index.ts @@ -0,0 +1,3 @@ +import BpkExpand from "./BpkExpand"; + +export default BpkExpand; From 2cfeaeb3ff9538c6b1a906afc4528f3afbb24072 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Fri, 26 Jan 2024 11:56:46 +0000 Subject: [PATCH 16/57] add tests for grid, and expand components --- .../BpkCardListGrid/BpkCardListGrid-test.tsx | 57 ++++++++++++++ .../BpkCardListGrid.module.css | 2 +- .../BpkCardListGrid.module.scss | 4 - .../src/BpkCardListGrid/BpkCardListGrid.tsx | 70 ++++++++++------- .../BpkCardListStack-test.tsx | 57 ++++++++++++++ .../src/BpkCardListStack/BpkCardListStack.tsx | 76 ++++++++++++------- .../src/BpkExpand/BpkExpand-test.tsx | 67 ++++++++++++++++ .../src/BpkExpand/BpkExpand.tsx | 37 +++++++-- 8 files changed, 302 insertions(+), 68 deletions(-) create mode 100644 packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid-test.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx create mode 100644 packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid-test.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid-test.tsx new file mode 100644 index 0000000000..212411b315 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid-test.tsx @@ -0,0 +1,57 @@ +/* + * 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 BpkCard from '../../../bpk-component-card'; + +import BpkCardListGrid from './BpkCardListGrid'; + +describe('BpkCardListGrid', () => { + it('should show expand accessory', () => { + const cards = Array(12).map(() => test); + const { asFragment } = render( + + {cards} + , + ); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('should show button accessory', () => { + const cards = Array(12).map(() => test); + const { asFragment } = render( + + {cards} + , + ); + + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css index 6374720be6..a36742dbad 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(17.5625rem, 1fr));gap:1.5rem}.bpk-card-list-grid--card{min-width:17.5625rem} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(17.5625rem, 1fr));gap:1.5rem} diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss index ea681243c4..94dd334a1e 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss @@ -7,8 +7,4 @@ minmax($bpk-one-pixel-rem * 281, 1fr) ); gap: bpk-spacing-lg(); - - &--card { - min-width: $bpk-one-pixel-rem * 281; - } } diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx index cb73743708..9083a380b0 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx @@ -26,46 +26,58 @@ import STYLES from './BpkCardListGrid.module.scss'; const getClassName = cssModules(STYLES); -type BpkCardListGridProps = { - accessory?: 'expand' | 'button'; - cardList: ReactElement[]; - expandText?: string; +interface BpkCardListGridBaseProps { + children: ReactElement[]; + expandText: string; +} + +type BpkCardListGridExpandModeProps = BpkCardListGridBaseProps & { + accessory: 'expand'; showContent: () => void; hideContent: () => void; collapsed: boolean; setCollapsed: Dispatch>; }; -const BpkCardListGrid = ({ - accessory, - cardList, - collapsed, - expandText, - hideContent, - setCollapsed, - showContent, -}: BpkCardListGridProps) => { - const cards = cardList.map((card: any, index: number) => ( -
{card}
- )); +type BpkCardListGridButtonModeProps = BpkCardListGridBaseProps & { + accessory: 'button'; + onButtonClick: () => void; +}; + +type BpkCardListGridProps = + | BpkCardListGridExpandModeProps + | BpkCardListGridButtonModeProps; + +const BpkCardListGrid = (props: BpkCardListGridProps) => { + const { accessory, children } = props; + + let accessoryContent; + if (accessory === 'expand') { + const { collapsed, expandText, hideContent, setCollapsed, showContent } = + props; + accessoryContent = ( + + {expandText} + + ); + } else if (accessory === 'button') { + const { expandText, onButtonClick } = props; + accessoryContent = ( + {expandText} + ); + } return ( <>
- {cards} + {children}
- - {!expandText && - (accessory === 'expand' ? ( - - ) : ( - Action - ))} + {accessoryContent} ); }; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx new file mode 100644 index 0000000000..75735a60ba --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx @@ -0,0 +1,57 @@ +/* + * 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 BpkCard from '../../../bpk-component-card'; + +import BpkCardListStack from './BpkCardListStack'; + +describe('BpkCardListStack', () => { + it('should show expand accessory', () => { + const cards = Array(12).map(() => test); + const { asFragment } = render( + + {cards} + , + ); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('should show button accessory', () => { + const cards = Array(12).map(() => test); + const { asFragment } = render( + + {cards} + , + ); + + expect(asFragment()).toMatchSnapshot(); + }) +}); diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx index c491217528..cca08c180a 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx @@ -15,7 +15,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { Dispatch, SetStateAction } from 'react'; + +import type { Dispatch, ReactElement, SetStateAction } from 'react'; import { BpkButtonV2 } from '../../../bpk-component-button'; import { cssModules } from '../../../bpk-react-utils'; @@ -25,40 +26,57 @@ import STYLES from './BpkCardListStack.module.scss'; const getClassName = cssModules(STYLES); -type BpkCardListStackProps = { - accessory: 'expand' | 'button'; - children: any; - expandText?: string; +interface BpkCardListStackBaseProps { + children: ReactElement[]; + expandText: string; +} + +type BpkCardListStackExpandModeProps = BpkCardListStackBaseProps & { + accessory: 'expand'; showContent: () => void; hideContent: () => void; collapsed: boolean; setCollapsed: Dispatch>; }; -const BpkCardListStack = ({ - accessory, - children, - collapsed, - expandText, - hideContent, - setCollapsed, - showContent, -}: BpkCardListStackProps) => ( - <> -
{children}
+type BpkCardListStackButtonModeProps = BpkCardListStackBaseProps & { + accessory: 'button'; + onButtonClick: () => void; +}; + +type BpkCardListStackProps = + | BpkCardListStackExpandModeProps + | BpkCardListStackButtonModeProps; - {!expandText && - (accessory === 'expand' ? ( - - ) : ( - Action - ))} - -); +const BpkCardListStack = (props: BpkCardListStackProps) => { + const { accessory, children } = props; + + let accessoryContent; + if (accessory === 'expand') { + const { collapsed, expandText, hideContent, setCollapsed, showContent } = + props; + accessoryContent = ( + + {expandText} + + ); + } else if (accessory === 'button') { + const { expandText, onButtonClick } = props; + {expandText}; + } + + return ( + <> +
{children}
+ + {accessoryContent} + + ); +}; export default BpkCardListStack; diff --git a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx new file mode 100644 index 0000000000..2e30bf96d3 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx @@ -0,0 +1,67 @@ +/* + * 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 userEvent from '@testing-library/user-event'; + +import BpkExpand from './BpkExpand'; + +describe('BpkExpand', () => { + it('should render correctly', () => { + const { asFragment } = render( + + Show More + , + ); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('should call call support functions when button is clicked', async () => { + const hideContent = jest.fn(); + const setCollapsed = jest.fn(); + const showContent = jest.fn(); + + const { asFragment, getByTestId } = render( + + Show More + , + ); + + expect(asFragment()).toMatchSnapshot(); + + await userEvent.click(getByTestId('button')) + + expect(showContent).toHaveBeenCalled() + expect(setCollapsed).toHaveBeenCalledWith(false) + + await userEvent.click(getByTestId('button')) + + expect(hideContent).toHaveBeenCalled() + expect(setCollapsed).toHaveBeenCalledWith(true) + }); +}); diff --git a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx index 1d560f06e6..203bfdfcc6 100644 --- a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx +++ b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx @@ -1,3 +1,23 @@ +/* + * 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 type { Dispatch, SetStateAction } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronDown from '../../../bpk-component-icon/sm/chevron-down'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. @@ -8,14 +28,21 @@ import { withButtonAlignment, withRtlSupport } from '../../../bpk-component-icon const AlignedChevronDownIcon = withButtonAlignment(withRtlSupport(ChevronDown)); const AlignedChevronUpIcon = withButtonAlignment(withRtlSupport(ChevronUp)); +type BpkExpandProps = { + children: string; + collapsed: boolean; + hideContent: () => void; + setCollapsed: Dispatch>; + showContent: () => void; +} + const BpkExpand = ({ + children, collapsed, hideContent, setCollapsed, showContent, -}: any) => { - // TODO: pass a prop for both strings - const buttonText = collapsed ? 'Show More' : 'Show Less'; +}: BpkExpandProps) => { const buttonIcon = collapsed ? ( ) : ( @@ -32,8 +59,8 @@ const BpkExpand = ({ }; return ( - buttonOnClick()}> - {buttonText} + buttonOnClick()}> + {children} {buttonIcon} ); From 57020f9bc64042f11ae13e49bbbf11d2bf3a6916 Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Mon, 5 Feb 2024 14:44:22 +0000 Subject: [PATCH 17/57] Row updates, additions to Storybook, and some tests --- examples/bpk-component-card-list/examples.js | 148 ++++++++++++------ .../examples.module.css | 2 +- .../examples.module.scss | 37 +++++ examples/bpk-component-card-list/stories.js | 10 +- .../src/BpkCardList.module.scss | 8 - .../src/BpkCardList.tsx | 6 +- .../BpkCardListRail/BpkCardListRail-test.tsx | 39 +++++ .../BpkCardListRail.module.css | 2 +- .../BpkCardListRail-test.tsx.snap | 53 +++++++ .../BpkCardListRow/BpkCardListRow.module.css | 2 +- .../BpkCardListRow/BpkCardListRow.module.scss | 15 +- .../src/BpkCardListRow/BpkCardListRow.tsx | 28 ++-- .../BpkCardListRow-test.tsx.snap | 141 +++++++++++++++++ .../index.d.ts | 21 +++ 14 files changed, 421 insertions(+), 91 deletions(-) create mode 100644 packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap create mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap create mode 100644 packages/bpk-component-mobile-scroll-container/index.d.ts diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index a9ab8717d2..90a0fe615e 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -19,14 +19,11 @@ import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkCard from '../../packages/bpk-component-card'; +import BpkImage from '../../packages/bpk-component-image'; import BpkCardList from '../../packages/bpk-component-card-list'; -// import BpkImage, { -// BORDER_RADIUS_STYLES, -// } from '../../packages/bpk-component-image'; +import BpkLink from '../../packages/bpk-component-link'; -// import STYLES from './examples.module.scss'; - -// const getClassName = cssModules(STYLES); +import STYLES from './examples.module.scss'; const DealsCard = (i) => ( null}> @@ -45,69 +42,125 @@ const DealsCard = (i) => ( ); -const RowToRailExample = () => ( +const DestinationCard = (i) => ( + + + +
+
+ + {`Destination Name ${i}`} + + Country +
+ +
+ Direct + £100 +
+
+ +); +const InternalLinkCard = (i) => ( + + + +
+ {`Amsterdam Schiphol ${i}`} + +
+ Flights + + {'\u2022'} + + Hotels + + {'\u2022'} + + Car Hire +
+
+ +); +// const InternalLinkBlock = (i) => { +//
+// Alicante Car Hire +// Barcelona Car Hire +// London Car Hire +//
; +// }; + +const cards = (cardType) => [...Array(14).keys()].map((i) => cardType(i)); + +const title = 'Must Vist Spots'; +const description = + 'Check out these world-famous destinations perfect for visiting in spring.'; + +const GridToRailExample = () => ( DealsCard(i))} - accessory="pagination" - layoutDesktop="row" + cardList={cards(DealsCard)} + accessory="expand" + layoutDesktop="grid" layoutMobile="rail" - title="Card List Component" + title={title} + /> +); +const GridToStackExample = () => ( + +); +const GridToStackWithButtonExample = () => ( + ); const RowToRailWithHeaderButtonExample = () => ( DealsCard(i))} + cardList={cards(DealsCard)} accessory="pagination" layoutDesktop="row" layoutMobile="rail" - title="Card List Component" + title={title} + description={description} buttonText="Header Button" + initiallyShownCards={4} /> ); - -const GridToRailExample = () => ( +const RowToRailExample = () => ( ( - - {/* */} - TEST {i} - - ))} - accessory="expand" - layoutDesktop="grid" + cardList={cards(DealsCard)} + accessory="pagination" + layoutDesktop="row" layoutMobile="rail" - title="Card List Component" + title={title} /> ); - const RowToStackExample = () => ( ( - - {/* */} - TEST {i} - - ))} + cardList={cards(DestinationCard)} accessory="pagination" layoutDesktop="row" layoutMobile="stack" - title="Card List Component" - /> -); - -const GridToStackExample = () => ( - ( - - {/* */} - TEST {i} - - ))} - accessory="expand" - layoutDesktop="grid" - layoutMobile="stack" - title="Card List Component" + title={title} /> ); @@ -115,6 +168,7 @@ export { RowToRailExample, RowToRailWithHeaderButtonExample, GridToRailExample, + GridToStackWithButtonExample, RowToStackExample, GridToStackExample, }; diff --git a/examples/bpk-component-card-list/examples.module.css b/examples/bpk-component-card-list/examples.module.css index ca41a05113..2ad3bb411f 100644 --- a/examples/bpk-component-card-list/examples.module.css +++ b/examples/bpk-component-card-list/examples.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-examples__header{display:flex;height:2.5rem;padding:0.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-examples__header{display:flex;height:2.5rem;padding:0.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem}.DestinationCard{overflow:hidden}.DestinationCard .Bottom{display:flex;justify-content:space-between;padding:1.5rem}.DestinationCard .Column{display:flex;flex-direction:column}.InternalLinkCard{overflow:hidden;display:flex}.InternalLinkCard .Image{flex:0 0 5.5rem}.InternalLinkCard .Info{display:flex;flex-direction:column;margin:auto 1.5rem}.InternalLinkCard .VerticalLinks .bullet{margin:0 0.25rem;color:#0062e3} diff --git a/examples/bpk-component-card-list/examples.module.scss b/examples/bpk-component-card-list/examples.module.scss index 0546394c02..872fd1b226 100644 --- a/examples/bpk-component-card-list/examples.module.scss +++ b/examples/bpk-component-card-list/examples.module.scss @@ -32,3 +32,40 @@ width: bpk-spacing-md() * 41; } } + +.bpk-destinationCard { + overflow: hidden; + + .bpk-bottom { + display: flex; + padding: bpk-spacing-lg(); + justify-content: space-between; + } + + .bpk-column { + display: flex; + flex-direction: column; + } +} + +.bpk-internalLinkCard { + display: flex; + overflow: hidden; + + .bpk-image { + flex: 0 0 5.5rem; + } + + .bpk-info { + display: flex; + margin: auto bpk-spacing-lg(); + flex-direction: column; + } + + .bpk-verticalLinks { + &_bullet { + margin: 0 bpk-spacing-sm(); + color: $bpk-core-accent-day; + } + } +} diff --git a/examples/bpk-component-card-list/stories.js b/examples/bpk-component-card-list/stories.js index f87e960c45..59babfd39a 100644 --- a/examples/bpk-component-card-list/stories.js +++ b/examples/bpk-component-card-list/stories.js @@ -18,19 +18,21 @@ /* @flow strict */ import { - RowToRailExample, GridToRailExample, - RowToStackExample, GridToStackExample, + GridToStackWithButtonExample, + RowToRailExample, RowToRailWithHeaderButtonExample, + RowToStackExample, } from './examples'; export default { title: 'bpk-component-card-list', }; -export const RowToRail = RowToRailExample; export const GridToRail = GridToRailExample; -export const RowToStack = RowToStackExample; export const GridToStack = GridToStackExample; +export const GridToStackWithButton = GridToStackWithButtonExample; +export const RowToRail = RowToRailExample; export const RowToRailWithHeaderButton = RowToRailWithHeaderButtonExample; +export const RowToStack = RowToStackExample; diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.scss b/packages/bpk-component-card-list/src/BpkCardList.module.scss index 4b2c3ce5ad..fa044ae04c 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardList.module.scss @@ -37,15 +37,7 @@ display: flex; width: 100%; flex-direction: row; - - // flex-wrap: wrap; gap: bpk-spacing-lg(); - - // overflow-clip-margin: 20px; - // overflow-inline: auto; - // overflow-y: visible; - // scroll-snap-type: x mandatory; - // scroll-behavior: smooth; } &--stack { diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 896ac12eb6..814ca661a9 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -127,12 +127,14 @@ const BpkCardList = ({ + > + {visibleCards} + ) : ( { + it('should render cards correctly in the MobileScrollContainer', () => { + const { container } = render( + + Card 1 + Card 2 + Card 3 + , + ); + + expect(container).toMatchSnapshot(); + expect( + container.getElementsByClassName('bpk-card-list--rail_card'), + ).toHaveLength(3); + }); +}); diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css index ce841ceff4..7f210640e2 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list--rail_container{display:flex}.bpk-card-list--rail_card{display:flex;justify-content:center;align-items:center;min-width:100%;padding:1rem}.bpk-card-list--rail_card>*{width:100%} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list--rail_container{display:flex}.bpk-card-list--rail_card{display:flex;min-width:100%;padding:1rem;justify-content:center;align-items:center;text-wrap:wrap}.bpk-card-list--rail_card>*{width:100%} diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap new file mode 100644 index 0000000000..062b4110e6 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap @@ -0,0 +1,53 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkCardListRail should render cards correctly in the MobileScrollContainer 1`] = ` +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+`; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css index 3bbd2fa368..dfb7095814 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:0.25rem;flex-shrink:0}@media (min-width: 64.0625rem){.bpk-card-list-row .bpk-card-list-row__card{width:calc(100% / 3)}}@media (max-width: 64rem){.bpk-card-list-row .bpk-card-list-row__card{width:50%}}@media (min-width: 32.0625rem) and (max-width: 48rem){.bpk-card-list-row .bpk-card-list-row__card{width:100%}}@media (max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none}} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:1.5rem 1.5rem 1.5rem 0.25rem;flex-shrink:0;text-wrap:wrap}@media (max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none;padding:1rem 1rem 1rem}} diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss index 118051c4de..0812b861bf 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss @@ -10,24 +10,13 @@ } .bpk-card-list-row__card { - padding: bpk-spacing-sm(); + padding: bpk-spacing-lg() bpk-spacing-lg() bpk-spacing-lg() bpk-spacing-sm(); flex-shrink: 0; text-wrap: wrap; - @include bpk-breakpoint-above-tablet { - width: calc(100% / 3); - } - - @include bpk-breakpoint-tablet { - width: 50%; - } - - @include bpk-breakpoint-small-tablet-only { - width: 100%; - } - @include bpk-breakpoint-mobile { display: none; + padding: bpk-spacing-base() bpk-spacing-base() bpk-spacing-base(); } } } diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx index 8873020b8f..d697edc865 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx @@ -15,13 +15,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import { useCallback, useEffect, useRef, useState, type MouseEvent, + type ReactNode, } from 'react'; import debounce from 'lodash/debounce'; @@ -35,9 +35,6 @@ const DEBOUNCE_TIME = 150; let setVisibleIndexes: (array: number[]) => {}; const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { - const numberOfCards = children.length; - // TODO: need to update when width changes - const containerRef = useRef(null); const cardRef = useRef(null); @@ -46,11 +43,8 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { const [cardWidth, setCardWidth] = useState(0); const [pageIndex, setCurrentPageIndex] = useState(0); - const calculateNumberOfDisplay = (): number => - Math.floor((containerWidth + 2) / cardWidth); - - // TODO: how to incorporate the initiallyShownCards here? - let numberOfDisplay = calculateNumberOfDisplay(); + const numberOfCards = children.length; + let numberOfDisplay = numberOfCardsToShow; const numberOfIndicators = Math.ceil(numberOfCards / numberOfDisplay); const [indicators, setNumberOfIndicators] = useState(numberOfIndicators); @@ -79,7 +73,7 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { } setContainerWidth(containerRef.current?.clientWidth || 0); setCardWidth(cardRef.current?.clientWidth || 0); - numberOfDisplay = calculateNumberOfDisplay(); + numberOfDisplay = numberOfCardsToShow; setScrollPosition(0); setCardIndex(0); }, DEBOUNCE_TIME); @@ -115,9 +109,9 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { if (!containerWidth || !cardWidth) { return; } - setCurrentPageIndex(newIndex); if (direction === 'NEXT') { + setCurrentPageIndex(newIndex); const nextCardIndex = cardIndex + numberOfDisplay; if (touchEnd(nextCardIndex)) { setCardIndex(numberOfCards - numberOfDisplay); @@ -126,6 +120,7 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { } } if (direction === 'PREV') { + setCurrentPageIndex(newIndex); const nextCardIndex = cardIndex - numberOfDisplay; if (touchStart(nextCardIndex)) { setCardIndex(0); @@ -133,6 +128,10 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { setCardIndex(nextCardIndex); } } + if (direction === 'INDICATORS') { + setCurrentPageIndex(newIndex); + setCardIndex(newIndex * numberOfDisplay); + } }, [ cardIndex, @@ -151,18 +150,19 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { className={getClassName('bpk-card-list-row__cards')} ref={containerRef} > - {children.map((card: any, index: number) => ( + {children.map((card: ReactNode, index: number) => (
{card}
))}
- {accessory && numberOfIndicators !== 1 && ( + {accessory && numberOfIndicators > 1 && ( { onClick={( e: MouseEvent, newIndex: number, - direction: string, + direction: 'NEXT' | 'PREV' | 'INDICATORS', ) => { handleArrowClick(newIndex, direction); }} diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap new file mode 100644 index 0000000000..a7da325e42 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap @@ -0,0 +1,141 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkCardListRow should render cards correctly 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+`; diff --git a/packages/bpk-component-mobile-scroll-container/index.d.ts b/packages/bpk-component-mobile-scroll-container/index.d.ts new file mode 100644 index 0000000000..ff15cb9275 --- /dev/null +++ b/packages/bpk-component-mobile-scroll-container/index.d.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 BpkMobileScrollContainer from './src/BpkMobileScrollContainer'; + +export default BpkMobileScrollContainer; From 46d9e3f606110aef2f86edd9e6b21ae9573cfa4a Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Fri, 9 Feb 2024 15:09:25 +0000 Subject: [PATCH 18/57] added types for all components --- examples/bpk-component-card-list/examples.js | 91 +++--- .../src/BpkCardList.tsx | 87 +++--- .../src/BpkCardListGrid/BpkCardListGrid.tsx | 44 +-- .../src/BpkCardListRail/BpkCardListRail.tsx | 8 +- .../src/BpkCardListRow/BpkCardListRow.tsx | 13 +- .../src/BpkCardListStack/BpkCardListStack.tsx | 43 +-- .../src/BpkExpand/BpkExpand.tsx | 25 +- .../src/common-types.ts | 280 ++++++++++++++++++ 8 files changed, 432 insertions(+), 159 deletions(-) create mode 100644 packages/bpk-component-card-list/src/common-types.ts diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index 90a0fe615e..0ae08c251f 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -17,11 +17,16 @@ */ /* @flow strict */ +import { useState } from 'react'; + import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkCard from '../../packages/bpk-component-card'; import BpkImage from '../../packages/bpk-component-image'; import BpkCardList from '../../packages/bpk-component-card-list'; -import BpkLink from '../../packages/bpk-component-link'; +// import BpkLink from '../../packages/bpk-component-link'; +// import BpkImage, { +// BORDER_RADIUS_STYLES, +// } from '../../packages/bpk-component-image'; import STYLES from './examples.module.scss'; @@ -64,33 +69,34 @@ const DestinationCard = (i) => (
); -const InternalLinkCard = (i) => ( - - -
- {`Amsterdam Schiphol ${i}`} - -
- Flights - - {'\u2022'} - - Hotels - - {'\u2022'} - - Car Hire -
-
- -); +// const InternalLinkCard = (i) => ( +// +// + +//
+// {`Amsterdam Schiphol ${i}`} + +//
+// Flights +// +// {'\u2022'} +// +// Hotels +// +// {'\u2022'} +// +// Car Hire +//
+//
+// +// ); // const InternalLinkBlock = (i) => { //
// Alicante Car Hire @@ -114,15 +120,6 @@ const GridToRailExample = () => ( title={title} /> ); -const GridToStackExample = () => ( - -); const GridToStackWithButtonExample = () => ( ( /> ); +const GridToStackExample = () => { + const [collapsed, setCollapsed] = useState(true); + const expandText = "Show More"; + const collapseText = "Show Less"; + + const onButtonClick = () => { + setCollapsed(!collapsed); + } + + return ( + DealsCard(i))} + accessory="expand" + layoutDesktop="grid" + layoutMobile="stack" + title="Card List Component" + initiallyShownCards={4} + expandText={collapsed ? expandText : collapseText} + onButtonClick={onButtonClick} + /> +)}; + export { RowToRailExample, RowToRailWithHeaderButtonExample, diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 814ca661a9..6536307337 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -29,46 +29,27 @@ import BpkCardListGrid from './BpkCardListGrid'; import BpkCardListRail from './BpkCardListRail'; import BpkCardListRow from './BpkCardListRow'; import BpkCardListStack from './BpkCardListStack'; +import type { BpkCardListProps } from './common-types'; const getClassName = cssModules(STYLES); - -export type layoutDesktopProps = 'row' | 'grid'; -export type layoutMobileProps = 'rail' | 'stack'; - const MAX_ITEMS = 12; // MAX should be 12 for Desktop Grid and Mobile Stack const DEFAULT_ITEMS = 3; -type BpkChipGroup = any; -type BpkAccessoryTypes = 'expand' | 'button' | 'pagination'; - -export type BpkCardListProps = { - title: string; - description?: string; - buttonText?: string; // For Button in Section Header - onButtonClick?: () => void; - chipGroup?: BpkChipGroup; - cardList: ReactElement[]; - initiallyShownCards?: number; - layoutDesktop: 'row' | 'grid'; - layoutMobile: 'rail' | 'stack'; - accessory?: BpkAccessoryTypes; - expandText?: string; -}; - -const BpkCardList = ({ - accessory, - buttonText, - cardList, - chipGroup, - description, - expandText, - initiallyShownCards = DEFAULT_ITEMS, - layoutDesktop, - layoutMobile, - onButtonClick, - title, -}: BpkCardListProps) => { +const BpkCardList = (props: BpkCardListProps) => { + const { + buttonText, + cardList, + chipGroup, + description, + initiallyShownCards = DEFAULT_ITEMS, + layoutDesktop, + layoutMobile, + onButtonClick, + title + } = props; const allCards = cardList.slice(0, MAX_ITEMS); + + // TODO: might be worth putting them under a HOC const [visibleCards, setVisibleCards] = useState( cardList.slice(0, initiallyShownCards), ); @@ -80,9 +61,14 @@ const BpkCardList = ({ const showContent = () => { setVisibleCards(cardList); + + onButtonClick?.(); }; + const hideContent = () => { setVisibleCards(cardList.slice(0, initiallyShownCards)); + + onButtonClick?.(); }; return ( @@ -107,9 +93,11 @@ const BpkCardList = ({ {(isActive) => { if (isActive) { - return layoutMobile === 'rail' ? ( - {allCards} - ) : ( + if (layoutMobile === 'rail') { + return {allCards}; + } + const {accessory, expandText} = props; + return ( {cards} ); } - return layoutDesktop === 'grid' ? ( + if (layoutDesktop === 'row') { + const {accessory} = props; + return ( + + {allCards} + + ); + } + + const {accessory, expandText} = props; + return ( {visibleCards} - ) : ( - - {allCards} - ); }} diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx index 9083a380b0..a43aca3a88 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx @@ -16,43 +16,23 @@ * limitations under the License. */ -import type { Dispatch, ReactElement, SetStateAction } from 'react'; - import { BpkButtonV2 } from '../../../bpk-component-button'; import { cssModules } from '../../../bpk-react-utils'; import BpkExpand from '../BpkExpand'; +import { + BpkAccessoryTypes, + type BpkCardListGridStackProps, +} from '../common-types'; import STYLES from './BpkCardListGrid.module.scss'; const getClassName = cssModules(STYLES); -interface BpkCardListGridBaseProps { - children: ReactElement[]; - expandText: string; -} - -type BpkCardListGridExpandModeProps = BpkCardListGridBaseProps & { - accessory: 'expand'; - showContent: () => void; - hideContent: () => void; - collapsed: boolean; - setCollapsed: Dispatch>; -}; - -type BpkCardListGridButtonModeProps = BpkCardListGridBaseProps & { - accessory: 'button'; - onButtonClick: () => void; -}; - -type BpkCardListGridProps = - | BpkCardListGridExpandModeProps - | BpkCardListGridButtonModeProps; - -const BpkCardListGrid = (props: BpkCardListGridProps) => { +const BpkCardListGrid = (props: BpkCardListGridStackProps) => { const { accessory, children } = props; let accessoryContent; - if (accessory === 'expand') { + if (accessory === BpkAccessoryTypes.Expand) { const { collapsed, expandText, hideContent, setCollapsed, showContent } = props; accessoryContent = ( @@ -62,21 +42,19 @@ const BpkCardListGrid = (props: BpkCardListGridProps) => { collapsed={collapsed} setCollapsed={setCollapsed} > - {expandText} + <>{expandText} ); - } else if (accessory === 'button') { - const { expandText, onButtonClick } = props; + } else if (accessory === BpkAccessoryTypes.Button) { + const { buttonText, onButtonClick } = props; accessoryContent = ( - {expandText} + {buttonText} ); } return ( <> -
- {children} -
+
{children}
{accessoryContent} ); diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx index 5b076386c4..aa5b77faf5 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx @@ -16,6 +16,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import type { ReactElement } from 'react'; + import BpkMobileScrollContainer from '../../../bpk-component-mobile-scroll-container'; import { cssModules } from '../../../bpk-react-utils'; @@ -23,7 +25,11 @@ import STYLES from './BpkCardListRail.module.scss'; const getClassName = cssModules(STYLES); -const BpkCardListRail = ({ children }: { children: JSX.Element[] }) => ( +type BpkCardListRailProps = { + children: ReactElement[]; +}; + +const BpkCardListRail = ({ children }: BpkCardListRailProps) => (
{children.map((item: JSX.Element) => ( diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx index d697edc865..699f60e19c 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx @@ -21,12 +21,13 @@ import { useRef, useState, type MouseEvent, - type ReactNode, + type ReactElement, } from 'react'; import debounce from 'lodash/debounce'; import BpkPageIndicator from '../../../bpk-component-page-indicator'; import { cssModules, isRTL } from '../../../bpk-react-utils'; +import type { BpkAccessoryTypes } from '../common-types'; import STYLES from './BpkCardListRow.module.scss'; @@ -34,7 +35,13 @@ const getClassName = cssModules(STYLES); const DEBOUNCE_TIME = 150; let setVisibleIndexes: (array: number[]) => {}; -const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { +type BpkCardListRowProps = { + children: ReactElement[]; + numberOfCardsToShow: number; + accessory?: typeof BpkAccessoryTypes.Pagination; +}; + +const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: BpkCardListRowProps) => { const containerRef = useRef(null); const cardRef = useRef(null); @@ -150,7 +157,7 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: any) => { className={getClassName('bpk-card-list-row__cards')} ref={containerRef} > - {children.map((card: ReactNode, index: number) => ( + {children.map((card, index) => (
void; - hideContent: () => void; - collapsed: boolean; - setCollapsed: Dispatch>; -}; - -type BpkCardListStackButtonModeProps = BpkCardListStackBaseProps & { - accessory: 'button'; - onButtonClick: () => void; -}; - -type BpkCardListStackProps = - | BpkCardListStackExpandModeProps - | BpkCardListStackButtonModeProps; - -const BpkCardListStack = (props: BpkCardListStackProps) => { +const BpkCardListStack = (props: BpkCardListGridStackProps) => { const { accessory, children } = props; let accessoryContent; - if (accessory === 'expand') { + if (accessory === BpkAccessoryTypes.Expand) { const { collapsed, expandText, hideContent, setCollapsed, showContent } = props; accessoryContent = ( @@ -62,18 +42,19 @@ const BpkCardListStack = (props: BpkCardListStackProps) => { collapsed={collapsed} setCollapsed={setCollapsed} > - {expandText} + <>{expandText} ); - } else if (accessory === 'button') { - const { expandText, onButtonClick } = props; - {expandText}; + } else if (accessory === BpkAccessoryTypes.Button) { + const { buttonText, onButtonClick } = props; + accessoryContent = ( + {buttonText} + ); } return ( <>
{children}
- {accessoryContent} ); diff --git a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx index 203bfdfcc6..aef245e915 100644 --- a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx +++ b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx @@ -16,25 +16,28 @@ * limitations under the License. */ -import type { Dispatch, SetStateAction } from 'react'; +import type { Dispatch, ReactElement, SetStateAction } from 'react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronDown from '../../../bpk-component-icon/sm/chevron-down'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronUp from '../../../bpk-component-icon/sm/chevron-up'; import { BUTTON_TYPES, BpkButtonV2 } from '../../../bpk-component-button'; -import { withButtonAlignment, withRtlSupport } from '../../../bpk-component-icon'; +import { + withButtonAlignment, + withRtlSupport, +} from '../../../bpk-component-icon'; const AlignedChevronDownIcon = withButtonAlignment(withRtlSupport(ChevronDown)); const AlignedChevronUpIcon = withButtonAlignment(withRtlSupport(ChevronUp)); type BpkExpandProps = { - children: string; - collapsed: boolean; - hideContent: () => void; - setCollapsed: Dispatch>; - showContent: () => void; -} + children: ReactElement; + collapsed: boolean; + hideContent: () => void; + setCollapsed: Dispatch>; + showContent: () => void; +}; const BpkExpand = ({ children, @@ -59,7 +62,11 @@ const BpkExpand = ({ }; return ( - buttonOnClick()}> + buttonOnClick()} + > {children} {buttonIcon} diff --git a/packages/bpk-component-card-list/src/common-types.ts b/packages/bpk-component-card-list/src/common-types.ts new file mode 100644 index 0000000000..a5e3daffd5 --- /dev/null +++ b/packages/bpk-component-card-list/src/common-types.ts @@ -0,0 +1,280 @@ +/* + * 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 type { Dispatch, ReactElement, SetStateAction } from 'react'; + +export type layoutDesktopProps = 'row' | 'grid'; +export type layoutMobileProps = 'rail' | 'stack'; + +type BpkChipGroup = ReactElement; +export const BpkAccessoryTypes = { + Expand: 'expand', + Button: 'button', + Pagination: 'pagination', +} as const; + +type BpkCardListBaseProps = { + title: string; + description?: string; + chipGroup?: BpkChipGroup; + cardList: ReactElement[]; + initiallyShownCards?: number; + layoutDesktop: layoutDesktopProps; + layoutMobile: layoutMobileProps; +}; + +type HeaderProps = { + buttonText: string; + onButtonClick: () => void; +}; + +type GridProps = { + layoutDesktop: 'grid'; + accessory?: typeof BpkAccessoryTypes.Expand | typeof BpkAccessoryTypes.Button; +}; + +type RowProps = { + layoutDesktop: 'row'; + accessory?: typeof BpkAccessoryTypes.Pagination; +}; + +type StackProps = { + layoutMobile: 'stack'; + accessory?: typeof BpkAccessoryTypes.Expand | typeof BpkAccessoryTypes.Button; +}; + +type RailProps = { + layoutMobile: 'rail'; +}; + +type PaginationProps = { + accessory: typeof BpkAccessoryTypes.Pagination; +}; + +type ExpandProps = { + accessory: typeof BpkAccessoryTypes.Expand; + expandText: string; + onButtonClick?: () => void; +}; + +type ButtonProps = { + accessory: typeof BpkAccessoryTypes.Button; + buttonText: string; + onButtonClick: () => void; +}; + +export type BpkCardListProps = BpkCardListBaseProps & + (HeaderProps | ButtonProps | null | undefined) & + (GridProps | RowProps) & + (StackProps | RailProps) & + (PaginationProps | ExpandProps | null | undefined); + +interface BpkCardListGridStackBaseProps { + children: ReactElement[]; + showContent: () => void; + hideContent: () => void; + collapsed: boolean; + setCollapsed: Dispatch>; +} + +type BpkCardListGridStackExpandModeProps = { + accessory: typeof BpkAccessoryTypes.Expand; + expandText: string; + onButtonClick: () => void; +}; + +type BpkCardListGridStackButtonModeProps = { + accessory: typeof BpkAccessoryTypes.Button; + buttonText: string; + onButtonClick: () => void; +}; + +export type BpkCardListGridStackProps = BpkCardListGridStackBaseProps & + ( + | BpkCardListGridStackExpandModeProps + | BpkCardListGridStackButtonModeProps + | null + | undefined + ); + +// Test cases +// TODO: Remove +// base + grid + stack + expand +const test1 = { + title: 'title', + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'stack', + accessory: BpkAccessoryTypes.Expand, + expandText: 'expand', +}; + +// base + grid + stack + button +const test2 = { + title: 'title', + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'stack', + accessory: BpkAccessoryTypes.Button, + buttonText: 'button', + onButtonClick: () => {}, +}; + +// base + grid + stack + no accessory +const test3 = { + title: 'title', + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'stack', +}; + +// base + grid + rail + expand +const test4 = { + title: 'title', + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'rail', + accessory: BpkAccessoryTypes.Expand, + expandText: 'expand', +}; + +// base + grid + rail + button +const test5 = { + title: 'title', + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'rail', + accessory: BpkAccessoryTypes.Button, + buttonText: 'button', + onButtonClick: () => {}, +}; + +// base + grid + rail + no accessory +const test6 = { + title: 'title', + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'rail', +}; + +// base + row + stack + no accessory +const test7 = { + title: 'title', + cardList: [], + layoutDesktop: 'row', + layoutMobile: 'stack', +}; + +// base + row + rail + pagination +const test8 = { + title: 'title', + cardList: [], + layoutDesktop: 'row', + layoutMobile: 'rail', + accessory: BpkAccessoryTypes.Pagination, +}; + +// base + row + rail + no accessory +const test9 = { + title: 'title', + cardList: [], + layoutDesktop: 'row', + layoutMobile: 'rail', +}; + +// base + header + grid + stack + expand +const test10 = { + title: 'title', + description: 'description', + buttonText: 'button', + onButtonClick: () => {}, + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'stack', + accessory: BpkAccessoryTypes.Expand, + expandText: 'expand', +}; + +// base + header + grid + stack + no accessory +const test11 = { + title: 'title', + description: 'description', + buttonText: 'button', + onButtonClick: () => {}, + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'stack', +}; + +// base + header + grid + rail + expand +const test12 = { + title: 'title', + description: 'description', + buttonText: 'button', + onButtonClick: () => {}, + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'rail', + accessory: BpkAccessoryTypes.Expand, + expandText: 'expand', +}; + +// base + header + grid + rail + no accessory +const test13 = { + title: 'title', + description: 'description', + buttonText: 'button', + onButtonClick: () => {}, + cardList: [], + layoutDesktop: 'grid', + layoutMobile: 'rail', +}; + +// base + header + row + stack + no accessory +const test14 = { + title: 'title', + description: 'description', + buttonText: 'button', + onButtonClick: () => {}, + cardList: [], + layoutDesktop: 'row', + layoutMobile: 'stack', +}; + +// base + header + row + rail + pagination +const test15 = { + title: 'title', + description: 'description', + buttonText: 'button', + onButtonClick: () => {}, + cardList: [], + layoutDesktop: 'row', + layoutMobile: 'rail', + accessory: BpkAccessoryTypes.Pagination, +}; + +// base + header + row + rail + no accessory +const test16 = { + title: 'title', + description: 'description', + buttonText: 'button', + onButtonClick: () => {}, + cardList: [], + layoutDesktop: 'row', + layoutMobile: 'rail', +}; From 85b7c4fac568b13a466bea85e6161c8ba4b87640 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Mon, 12 Feb 2024 16:23:18 +0000 Subject: [PATCH 19/57] types are working, still needs cleanup --- .../examples.module.css | 2 +- .../src/BpkCardList-test.tsx | 9 +- .../src/BpkCardList.tsx | 47 ++++-- .../src/common-types.ts | 149 ++++++++++++++---- 4 files changed, 157 insertions(+), 50 deletions(-) diff --git a/examples/bpk-component-card-list/examples.module.css b/examples/bpk-component-card-list/examples.module.css index 2ad3bb411f..10d1058a89 100644 --- a/examples/bpk-component-card-list/examples.module.css +++ b/examples/bpk-component-card-list/examples.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-examples__header{display:flex;height:2.5rem;padding:0.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem}.DestinationCard{overflow:hidden}.DestinationCard .Bottom{display:flex;justify-content:space-between;padding:1.5rem}.DestinationCard .Column{display:flex;flex-direction:column}.InternalLinkCard{overflow:hidden;display:flex}.InternalLinkCard .Image{flex:0 0 5.5rem}.InternalLinkCard .Info{display:flex;flex-direction:column;margin:auto 1.5rem}.InternalLinkCard .VerticalLinks .bullet{margin:0 0.25rem;color:#0062e3} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-examples__header{display:flex;height:2.5rem;padding:0.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem}.bpk-destinationCard{overflow:hidden}.bpk-destinationCard .bpk-bottom{display:flex;padding:1.5rem;justify-content:space-between}.bpk-destinationCard .bpk-column{display:flex;flex-direction:column}.bpk-internalLinkCard{display:flex;overflow:hidden}.bpk-internalLinkCard .bpk-image{flex:0 0 5.5rem}.bpk-internalLinkCard .bpk-info{display:flex;margin:auto 1.5rem;flex-direction:column}.bpk-internalLinkCard .bpk-verticalLinks_bullet{margin:0 0.25rem;color:#0062e3} diff --git a/packages/bpk-component-card-list/src/BpkCardList-test.tsx b/packages/bpk-component-card-list/src/BpkCardList-test.tsx index 86e3cd4d1d..ee5e188981 100644 --- a/packages/bpk-component-card-list/src/BpkCardList-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList-test.tsx @@ -23,14 +23,13 @@ describe('BpkCardList', () => { it('should render correctly', () => { const { asFragment } = render( Card 1
,
Card 2
]} layoutDesktop="row" - layoutMobile="rail" - title="Card List Component" + layoutMobile="stack" />, ); expect(asFragment()).toMatchSnapshot(); }); - - // TODO: test cases }); diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 6536307337..0c76c7f425 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -29,7 +29,7 @@ import BpkCardListGrid from './BpkCardListGrid'; import BpkCardListRail from './BpkCardListRail'; import BpkCardListRow from './BpkCardListRow'; import BpkCardListStack from './BpkCardListStack'; -import type { BpkCardListProps } from './common-types'; +import { BpkAccessoryTypes, type BpkCardListProps } from './common-types'; const getClassName = cssModules(STYLES); const MAX_ITEMS = 12; // MAX should be 12 for Desktop Grid and Mobile Stack @@ -45,7 +45,7 @@ const BpkCardList = (props: BpkCardListProps) => { layoutDesktop, layoutMobile, onButtonClick, - title + title, } = props; const allCards = cardList.slice(0, MAX_ITEMS); @@ -96,16 +96,29 @@ const BpkCardList = (props: BpkCardListProps) => { if (layoutMobile === 'rail') { return {allCards}; } - const {accessory, expandText} = props; + const { accessory } = props; + + let modeProps = {}; + if (accessory === BpkAccessoryTypes.Expand) { + modeProps = { + accessory, + expandText: props.expandText, + onButtonClick: props.onButtonClick, + }; + } else if (accessory === BpkAccessoryTypes.Button) { + modeProps = { + accessory, + buttonText: props.buttonText, + onButtonClick: props.onButtonClick, + }; + } return ( {cards} @@ -113,7 +126,7 @@ const BpkCardList = (props: BpkCardListProps) => { } if (layoutDesktop === 'row') { - const {accessory} = props; + const { accessory } = props; return ( { ); } - const {accessory, expandText} = props; + const { accessory } = props; + let accessoryProps = {}; + if (accessory === BpkAccessoryTypes.Expand) { + accessoryProps = { + accessory, + expandText: props.expandText, + onButtonClick: props.onButtonClick, + }; + } else if (accessory === BpkAccessoryTypes.Button) { + accessoryProps = { + accessory, + buttonText: props.buttonText, + onButtonClick: props.onButtonClick, + }; + } return ( {visibleCards} diff --git a/packages/bpk-component-card-list/src/common-types.ts b/packages/bpk-component-card-list/src/common-types.ts index a5e3daffd5..b711a489b2 100644 --- a/packages/bpk-component-card-list/src/common-types.ts +++ b/packages/bpk-component-card-list/src/common-types.ts @@ -38,11 +38,6 @@ type BpkCardListBaseProps = { layoutMobile: layoutMobileProps; }; -type HeaderProps = { - buttonText: string; - onButtonClick: () => void; -}; - type GridProps = { layoutDesktop: 'grid'; accessory?: typeof BpkAccessoryTypes.Expand | typeof BpkAccessoryTypes.Button; @@ -62,27 +57,68 @@ type RailProps = { layoutMobile: 'rail'; }; -type PaginationProps = { - accessory: typeof BpkAccessoryTypes.Pagination; +type ButtonProps = { + buttonText: string; + onButtonClick: () => void; }; -type ExpandProps = { - accessory: typeof BpkAccessoryTypes.Expand; - expandText: string; - onButtonClick?: () => void; +type NoAccessory = { + accessory?: undefined; }; -type ButtonProps = { +type ButtonAccessory = { accessory: typeof BpkAccessoryTypes.Button; buttonText: string; onButtonClick: () => void; }; +type PaginationAccessory = { + accessory: typeof BpkAccessoryTypes.Pagination; +}; + +type ExpandAccessory = { + accessory: typeof BpkAccessoryTypes.Expand; + expandText: string; + onButtonClick: () => void; +}; + +type DontGiveMe = { + [Key in Exclude]?: undefined; +}; + +type MaybeWithButtonProps = T extends {} + ? (DontGiveMe & T) | (T & ButtonProps) + : never; + export type BpkCardListProps = BpkCardListBaseProps & - (HeaderProps | ButtonProps | null | undefined) & (GridProps | RowProps) & (StackProps | RailProps) & - (PaginationProps | ExpandProps | null | undefined); + MaybeWithButtonProps< + NoAccessory | ButtonAccessory | PaginationAccessory | ExpandAccessory + >; +/* + ( + | (NoAccessory | ButtonAccessory | PaginationAccessory | ExpandAccessory) + | (NoAccessory & ButtonProps) + | (ButtonAccessory & ButtonProps) + | (PaginationAccessory & ButtonProps) + | (ExpandAccessory & ButtonProps) + ); + */ + +type VeryExplicitBpkCardListProps = + | (BpkCardListBaseProps & GridProps & RailProps & ButtonAccessory) + | (BpkCardListBaseProps & GridProps & RailProps & ExpandAccessory) + | (BpkCardListBaseProps & GridProps & RailProps & PaginationAccessory) + | (BpkCardListBaseProps & GridProps & RailProps) + | (BpkCardListBaseProps & GridProps & StackProps & ButtonAccessory) + | (BpkCardListBaseProps & GridProps & StackProps & ExpandAccessory) + | (BpkCardListBaseProps & GridProps & StackProps) + | (BpkCardListBaseProps & RowProps & RailProps & ExpandAccessory) + | (BpkCardListBaseProps & RowProps & RailProps & PaginationAccessory) + | (BpkCardListBaseProps & RowProps & RailProps) + | (BpkCardListBaseProps & RowProps & StackProps & ExpandAccessory) + | (BpkCardListBaseProps & RowProps & StackProps) interface BpkCardListGridStackBaseProps { children: ReactElement[]; @@ -107,25 +143,71 @@ type BpkCardListGridStackButtonModeProps = { export type BpkCardListGridStackProps = BpkCardListGridStackBaseProps & ( | BpkCardListGridStackExpandModeProps - | BpkCardListGridStackButtonModeProps - | null - | undefined + | (BpkCardListGridStackButtonModeProps & { expandText?: undefined }) + | (NoAccessory & { onButtonClick?: undefined; expandText?: undefined }) ); +// Test cases +// TODO: Remove +// BpkCardListGridStackProps +// base + expand +const BpkCardListGridStackTest1: BpkCardListGridStackProps = { + children: [], + showContent: () => {}, + hideContent: () => {}, + collapsed: false, + setCollapsed: () => {}, + accessory: BpkAccessoryTypes.Expand, + expandText: 'expand', + onButtonClick: () => {}, +}; + +// base + button +const BpkCardListGridStackTest2: BpkCardListGridStackProps = { + children: [], + showContent: () => {}, + hideContent: () => {}, + collapsed: false, + setCollapsed: () => {}, + accessory: BpkAccessoryTypes.Button, + buttonText: 'button', + onButtonClick: () => {}, +}; + +// base + no accessory +const BpkCardListGridStackTest3: BpkCardListGridStackProps = { + children: [], + showContent: () => {}, + hideContent: () => {}, + collapsed: false, + setCollapsed: () => {}, +}; + +const BpkCardListGridStackTest4: BpkCardListGridStackProps = { + children: [], + showContent: () => {}, + hideContent: () => {}, + collapsed: false, + setCollapsed: () => {}, + accessory: undefined, + +}; + // Test cases // TODO: Remove // base + grid + stack + expand -const test1 = { +const test1: BpkCardListProps = { title: 'title', cardList: [], layoutDesktop: 'grid', layoutMobile: 'stack', accessory: BpkAccessoryTypes.Expand, expandText: 'expand', + onButtonClick: () => {}, }; // base + grid + stack + button -const test2 = { +const test2: BpkCardListProps = { title: 'title', cardList: [], layoutDesktop: 'grid', @@ -136,7 +218,7 @@ const test2 = { }; // base + grid + stack + no accessory -const test3 = { +const test3: BpkCardListProps = { title: 'title', cardList: [], layoutDesktop: 'grid', @@ -144,17 +226,18 @@ const test3 = { }; // base + grid + rail + expand -const test4 = { +const test4: BpkCardListProps = { title: 'title', cardList: [], layoutDesktop: 'grid', layoutMobile: 'rail', accessory: BpkAccessoryTypes.Expand, expandText: 'expand', + onButtonClick: () => {}, }; // base + grid + rail + button -const test5 = { +const test5: BpkCardListProps = { title: 'title', cardList: [], layoutDesktop: 'grid', @@ -165,7 +248,7 @@ const test5 = { }; // base + grid + rail + no accessory -const test6 = { +const test6: BpkCardListProps = { title: 'title', cardList: [], layoutDesktop: 'grid', @@ -173,7 +256,7 @@ const test6 = { }; // base + row + stack + no accessory -const test7 = { +const test7: BpkCardListProps = { title: 'title', cardList: [], layoutDesktop: 'row', @@ -181,7 +264,7 @@ const test7 = { }; // base + row + rail + pagination -const test8 = { +const test8: BpkCardListProps = { title: 'title', cardList: [], layoutDesktop: 'row', @@ -190,7 +273,7 @@ const test8 = { }; // base + row + rail + no accessory -const test9 = { +const test9: BpkCardListProps = { title: 'title', cardList: [], layoutDesktop: 'row', @@ -198,7 +281,7 @@ const test9 = { }; // base + header + grid + stack + expand -const test10 = { +const test10: BpkCardListProps = { title: 'title', description: 'description', buttonText: 'button', @@ -211,7 +294,7 @@ const test10 = { }; // base + header + grid + stack + no accessory -const test11 = { +const test11: BpkCardListProps = { title: 'title', description: 'description', buttonText: 'button', @@ -222,7 +305,7 @@ const test11 = { }; // base + header + grid + rail + expand -const test12 = { +const test12: BpkCardListProps = { title: 'title', description: 'description', buttonText: 'button', @@ -235,7 +318,7 @@ const test12 = { }; // base + header + grid + rail + no accessory -const test13 = { +const test13: BpkCardListProps = { title: 'title', description: 'description', buttonText: 'button', @@ -246,7 +329,7 @@ const test13 = { }; // base + header + row + stack + no accessory -const test14 = { +const test14: BpkCardListProps = { title: 'title', description: 'description', buttonText: 'button', @@ -257,7 +340,7 @@ const test14 = { }; // base + header + row + rail + pagination -const test15 = { +const test15: BpkCardListProps = { title: 'title', description: 'description', buttonText: 'button', @@ -269,7 +352,7 @@ const test15 = { }; // base + header + row + rail + no accessory -const test16 = { +const test16: BpkCardListProps = { title: 'title', description: 'description', buttonText: 'button', From c6c461f2d11bf40f5315a846b36096a25c6e08f6 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Mon, 12 Feb 2024 17:21:11 +0000 Subject: [PATCH 20/57] added tests for bpkcardlist --- .../src/BpkCardList-test.tsx | 235 ++++- .../src/BpkCardList.module.scss | 5 - .../src/BpkCardList.tsx | 17 +- .../BpkCardListGrid-test.tsx.snap | 43 + .../BpkCardListRow-test.tsx.snap | 141 --- .../BpkCardListStack-test.tsx.snap | 43 + .../__snapshots__/BpkExpand-test.tsx.snap | 55 + .../__snapshots__/BpkCardList-test.tsx.snap | 976 ++++++++++++++++++ .../src/common-types.ts | 171 --- 9 files changed, 1356 insertions(+), 330 deletions(-) create mode 100644 packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap delete mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap create mode 100644 packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap create mode 100644 packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap create mode 100644 packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap diff --git a/packages/bpk-component-card-list/src/BpkCardList-test.tsx b/packages/bpk-component-card-list/src/BpkCardList-test.tsx index ee5e188981..debf7c7816 100644 --- a/packages/bpk-component-card-list/src/BpkCardList-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList-test.tsx @@ -20,7 +20,101 @@ import { render } from '@testing-library/react'; import BpkCardList from './BpkCardList'; describe('BpkCardList', () => { - it('should render correctly', () => { + it('should render correctly with grid, stack and no accessory', () => { + const { asFragment } = render( + Card 1
,
Card 2
]} + layoutDesktop="grid" + layoutMobile="stack" + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with grid, stack and expand accessory', () => { + const { asFragment } = render( + Card 1
,
Card 2
,
Card 3
]} + layoutDesktop="grid" + layoutMobile="stack" + initiallyShownCards={2} + accessory='expand' + expandText='Expand' + onButtonClick={jest.fn()} + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with grid, stack and button accessory', () => { + const { asFragment } = render( + Card 1
,
Card 2
,
Card 3
]} + layoutDesktop="grid" + layoutMobile="stack" + initiallyShownCards={2} + accessory='button' + buttonText='Button' + onButtonClick={jest.fn()} + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with grid, rail and no accessory', () => { + const { asFragment } = render( + Card 1
,
Card 2
]} + layoutDesktop="grid" + layoutMobile="rail" + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with grid, rail and expand accessory', () => { + const { asFragment } = render( + Card 1
,
Card 2
,
Card 3
]} + layoutDesktop="grid" + layoutMobile="rail" + initiallyShownCards={2} + accessory='expand' + expandText='Expand' + onButtonClick={jest.fn()} + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with grid, rail and button accessory', () => { + const { asFragment } = render( + Card 1
,
Card 2
,
Card 3
]} + layoutDesktop="grid" + layoutMobile="rail" + initiallyShownCards={2} + accessory='button' + buttonText='Button' + onButtonClick={jest.fn()} + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with row, stack and no accessory', () => { const { asFragment } = render( { ); expect(asFragment()).toMatchSnapshot(); }); + + it('should render correctly with row, rail and pagination accessory', () => { + const { asFragment } = render( + Card 1,
Card 2
,
Card 3
]} + layoutDesktop="row" + layoutMobile="rail" + accessory='pagination' + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with row, rail and no accessory', () => { + const { asFragment } = render( + Card 1,
Card 2
]} + layoutDesktop="row" + layoutMobile="rail" + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with header, grid, stack and expand accessory', () => { + const { asFragment } = render( + Card 1,
Card 2
,
Card 3
]} + layoutDesktop="grid" + layoutMobile="stack" + initiallyShownCards={2} + accessory='expand' + expandText='Expand' + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with header, grid, stack and no accessory', () => { + const { asFragment } = render( + Card 1,
Card 2
]} + layoutDesktop="grid" + layoutMobile="stack" + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with header, grid, rail and expand accessory', () => { + const { asFragment } = render( + Card 1,
Card 2
,
Card 3
]} + layoutDesktop="grid" + layoutMobile="rail" + initiallyShownCards={2} + accessory='expand' + expandText='Expand' + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with header, grid, rail and no accessory', () => { + const { asFragment } = render( + Card 1,
Card 2
]} + layoutDesktop="grid" + layoutMobile="rail" + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with header, row, stack and no accessory', () => { + const { asFragment } = render( + Card 1,
Card 2
]} + layoutDesktop="row" + layoutMobile="stack" + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with header, row, rail and pagination accessory', () => { + const { asFragment } = render( + Card 1,
Card 2
,
Card 3
]} + layoutDesktop="row" + layoutMobile="rail" + accessory='pagination' + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with header, row, rail and no accessory', () => { + const { asFragment } = render( + Card 1,
Card 2
]} + layoutDesktop="row" + layoutMobile="rail" + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); }); diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.scss b/packages/bpk-component-card-list/src/BpkCardList.module.scss index fa044ae04c..67248dfcbc 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardList.module.scss @@ -23,11 +23,6 @@ flex-direction: column; gap: bpk-spacing-lg(); - &--chip-group { - display: flex; - gap: bpk-spacing-md(); - } - &--card-list { display: flex; flex-direction: column; diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 0c76c7f425..ff6964f450 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -39,7 +39,6 @@ const BpkCardList = (props: BpkCardListProps) => { const { buttonText, cardList, - chipGroup, description, initiallyShownCards = DEFAULT_ITEMS, layoutDesktop, @@ -71,24 +70,18 @@ const BpkCardList = (props: BpkCardListProps) => { onButtonClick?.(); }; + const button = buttonText && ( + {buttonText} + ); + return (
{buttonText} - ) - } + button={button} /> - {chipGroup && ( -
- {chipGroup} -
- )} -
{(isActive) => { diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap new file mode 100644 index 0000000000..ffef70ac8d --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkCardListGrid should show button accessory 1`] = ` + +
+ + +`; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap deleted file mode 100644 index a7da325e42..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap +++ /dev/null @@ -1,141 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkCardListRow should render cards correctly 1`] = ` -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
-
- -
-
-
-
-`; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap new file mode 100644 index 0000000000..f004928964 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkCardListStack should show button accessory 1`] = ` + +
+ + +`; diff --git a/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap b/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap new file mode 100644 index 0000000000..b96733ae65 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkExpand should call call support functions when button is clicked 1`] = ` + + + +`; + +exports[`BpkExpand should render correctly 1`] = ` + + + +`; diff --git a/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap b/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap new file mode 100644 index 0000000000..2ab97cb3d4 --- /dev/null +++ b/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap @@ -0,0 +1,976 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkCardList should render correctly with grid, rail and button accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+ +
+
+ +`; + +exports[`BpkCardList should render correctly with grid, rail and expand accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+ +
+
+ +`; + +exports[`BpkCardList should render correctly with grid, rail and no accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+
+
+ +`; + +exports[`BpkCardList should render correctly with grid, stack and button accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+ +
+
+ +`; + +exports[`BpkCardList should render correctly with grid, stack and expand accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+ +
+
+ +`; + +exports[`BpkCardList should render correctly with grid, stack and no accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+
+
+ +`; + +exports[`BpkCardList should render correctly with header, grid, rail and expand accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+ +
+
+ +`; + +exports[`BpkCardList should render correctly with header, grid, rail and no accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+
+
+ +`; + +exports[`BpkCardList should render correctly with header, grid, stack and button accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+ +
+
+ +`; + +exports[`BpkCardList should render correctly with header, grid, stack and expand accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+ +
+
+ +`; + +exports[`BpkCardList should render correctly with header, grid, stack and no accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+ Card 1 +
+
+ Card 2 +
+
+ +
+
+ +`; + +exports[`BpkCardList should render correctly with header, row, rail and no accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+
+
+ Card 1 +
+
+
+
+ Card 2 +
+
+
+
+
+
+ +`; + +exports[`BpkCardList should render correctly with header, row, rail and pagination accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+
+
+ Card 1 +
+
+
+
+ Card 2 +
+
+
+
+ Card 3 +
+
+
+
+
+
+ +`; + +exports[`BpkCardList should render correctly with header, row, stack and no accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+ +
+
+
+
+
+
+ Card 1 +
+
+
+
+ Card 2 +
+
+
+
+
+
+ +`; + +exports[`BpkCardList should render correctly with row, rail and no accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+
+
+
+
+
+
+ Card 1 +
+
+
+
+ Card 2 +
+
+
+
+
+
+ +`; + +exports[`BpkCardList should render correctly with row, rail and pagination accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+
+
+
+
+
+
+ Card 1 +
+
+
+
+ Card 2 +
+
+
+
+ Card 3 +
+
+
+
+
+
+ +`; + +exports[`BpkCardList should render correctly with row, stack and no accessory 1`] = ` + +
+
+
+

+ Title +

+ + Description + +
+
+
+
+
+
+
+ Card 1 +
+
+
+
+ Card 2 +
+
+
+
+
+
+ +`; diff --git a/packages/bpk-component-card-list/src/common-types.ts b/packages/bpk-component-card-list/src/common-types.ts index b711a489b2..eadb5344e8 100644 --- a/packages/bpk-component-card-list/src/common-types.ts +++ b/packages/bpk-component-card-list/src/common-types.ts @@ -21,7 +21,6 @@ import type { Dispatch, ReactElement, SetStateAction } from 'react'; export type layoutDesktopProps = 'row' | 'grid'; export type layoutMobileProps = 'rail' | 'stack'; -type BpkChipGroup = ReactElement; export const BpkAccessoryTypes = { Expand: 'expand', Button: 'button', @@ -31,7 +30,6 @@ export const BpkAccessoryTypes = { type BpkCardListBaseProps = { title: string; description?: string; - chipGroup?: BpkChipGroup; cardList: ReactElement[]; initiallyShownCards?: number; layoutDesktop: layoutDesktopProps; @@ -192,172 +190,3 @@ const BpkCardListGridStackTest4: BpkCardListGridStackProps = { accessory: undefined, }; - -// Test cases -// TODO: Remove -// base + grid + stack + expand -const test1: BpkCardListProps = { - title: 'title', - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'stack', - accessory: BpkAccessoryTypes.Expand, - expandText: 'expand', - onButtonClick: () => {}, -}; - -// base + grid + stack + button -const test2: BpkCardListProps = { - title: 'title', - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'stack', - accessory: BpkAccessoryTypes.Button, - buttonText: 'button', - onButtonClick: () => {}, -}; - -// base + grid + stack + no accessory -const test3: BpkCardListProps = { - title: 'title', - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'stack', -}; - -// base + grid + rail + expand -const test4: BpkCardListProps = { - title: 'title', - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'rail', - accessory: BpkAccessoryTypes.Expand, - expandText: 'expand', - onButtonClick: () => {}, -}; - -// base + grid + rail + button -const test5: BpkCardListProps = { - title: 'title', - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'rail', - accessory: BpkAccessoryTypes.Button, - buttonText: 'button', - onButtonClick: () => {}, -}; - -// base + grid + rail + no accessory -const test6: BpkCardListProps = { - title: 'title', - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'rail', -}; - -// base + row + stack + no accessory -const test7: BpkCardListProps = { - title: 'title', - cardList: [], - layoutDesktop: 'row', - layoutMobile: 'stack', -}; - -// base + row + rail + pagination -const test8: BpkCardListProps = { - title: 'title', - cardList: [], - layoutDesktop: 'row', - layoutMobile: 'rail', - accessory: BpkAccessoryTypes.Pagination, -}; - -// base + row + rail + no accessory -const test9: BpkCardListProps = { - title: 'title', - cardList: [], - layoutDesktop: 'row', - layoutMobile: 'rail', -}; - -// base + header + grid + stack + expand -const test10: BpkCardListProps = { - title: 'title', - description: 'description', - buttonText: 'button', - onButtonClick: () => {}, - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'stack', - accessory: BpkAccessoryTypes.Expand, - expandText: 'expand', -}; - -// base + header + grid + stack + no accessory -const test11: BpkCardListProps = { - title: 'title', - description: 'description', - buttonText: 'button', - onButtonClick: () => {}, - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'stack', -}; - -// base + header + grid + rail + expand -const test12: BpkCardListProps = { - title: 'title', - description: 'description', - buttonText: 'button', - onButtonClick: () => {}, - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'rail', - accessory: BpkAccessoryTypes.Expand, - expandText: 'expand', -}; - -// base + header + grid + rail + no accessory -const test13: BpkCardListProps = { - title: 'title', - description: 'description', - buttonText: 'button', - onButtonClick: () => {}, - cardList: [], - layoutDesktop: 'grid', - layoutMobile: 'rail', -}; - -// base + header + row + stack + no accessory -const test14: BpkCardListProps = { - title: 'title', - description: 'description', - buttonText: 'button', - onButtonClick: () => {}, - cardList: [], - layoutDesktop: 'row', - layoutMobile: 'stack', -}; - -// base + header + row + rail + pagination -const test15: BpkCardListProps = { - title: 'title', - description: 'description', - buttonText: 'button', - onButtonClick: () => {}, - cardList: [], - layoutDesktop: 'row', - layoutMobile: 'rail', - accessory: BpkAccessoryTypes.Pagination, -}; - -// base + header + row + rail + no accessory -const test16: BpkCardListProps = { - title: 'title', - description: 'description', - buttonText: 'button', - onButtonClick: () => {}, - cardList: [], - layoutDesktop: 'row', - layoutMobile: 'rail', -}; From 8c2f3a656ba65a34b5034df1081119109314923a Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Mon, 4 Mar 2024 10:53:47 +0000 Subject: [PATCH 21/57] BpkCardListRow test and updates --- examples/bpk-component-card-list/examples.js | 133 +++++++------- .../examples.module.css | 2 +- .../examples.module.scss | 6 +- examples/bpk-component-card-list/stories.js | 5 +- .../src/BpkCardList.module.css | 2 +- .../src/BpkCardList.tsx | 4 +- .../BpkCardListRow/BpkCardListRow-test.tsx | 169 ++++++++++++++++++ .../BpkCardListRow/BpkCardListRow.module.css | 2 +- .../BpkCardListRow/BpkCardListRow.module.scss | 2 +- .../src/BpkCardListRow/BpkCardListRow.tsx | 13 +- .../BpkCardListRow-test.tsx.snap | 167 +++++++++++++++++ .../__snapshots__/BpkCardList-test.tsx.snap | 59 ------ 12 files changed, 423 insertions(+), 141 deletions(-) create mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index 0ae08c251f..ce382024f8 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -23,10 +23,7 @@ import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkCard from '../../packages/bpk-component-card'; import BpkImage from '../../packages/bpk-component-image'; import BpkCardList from '../../packages/bpk-component-card-list'; -// import BpkLink from '../../packages/bpk-component-link'; -// import BpkImage, { -// BORDER_RADIUS_STYLES, -// } from '../../packages/bpk-component-image'; +import BpkLink from '../../packages/bpk-component-link'; import STYLES from './examples.module.scss'; @@ -40,9 +37,7 @@ const DealsCard = (i) => ( {`Let's explore Deal ${i}`} - It's your world and we'll help you explore it. Find the best - prices across millions of flights, hotels and car hire options to create - your perfect trip. + {`It's your world and we'll help you explore it. Find the best prices across millions of flights, hotels and car hire options to create your perfect trip.`}
@@ -51,6 +46,7 @@ const DestinationCard = (i) => ( @@ -69,57 +65,75 @@ const DestinationCard = (i) => (
); +const InternalLinkCard = (i) => ( + + -// const InternalLinkCard = (i) => ( -// -// - -//
-// {`Amsterdam Schiphol ${i}`} - -//
-// Flights -// -// {'\u2022'} -// -// Hotels -// -// {'\u2022'} -// -// Car Hire -//
-//
-// -// ); -// const InternalLinkBlock = (i) => { -//
-// Alicante Car Hire -// Barcelona Car Hire -// London Car Hire -//
; -// }; - +
+ {`Amsterdam Schiphol ${i}`} + +
+ Flights + + {'\u2022'} + + Hotels + + {'\u2022'} + + Car Hire +
+
+ +); const cards = (cardType) => [...Array(14).keys()].map((i) => cardType(i)); -const title = 'Must Vist Spots'; +const title = 'Must-visit spots'; const description = 'Check out these world-famous destinations perfect for visiting in spring.'; const GridToRailExample = () => ( ); + +const GridToStackExample = () => { + const [collapsed, setCollapsed] = useState(true); + const expandText = 'Show More'; + const collapseText = 'Show Less'; + + const onButtonClick = () => { + setCollapsed(!collapsed); + }; + + return ( + + ); +}; + const GridToStackWithButtonExample = () => ( ( layoutDesktop="grid" layoutMobile="stack" title={title} + description={description} + buttonText="Click Me" /> ); -const RowToRailWithHeaderButtonExample = () => ( +const RowToRailWith4InitiallyShownCardsExmaple = () => ( ( layoutMobile="rail" title={title} description={description} - buttonText="Header Button" initiallyShownCards={4} /> ); @@ -149,6 +164,7 @@ const RowToRailExample = () => ( layoutDesktop="row" layoutMobile="rail" title={title} + description={description} /> ); const RowToStackExample = () => ( @@ -158,34 +174,13 @@ const RowToStackExample = () => ( layoutDesktop="row" layoutMobile="stack" title={title} + description={description} /> ); -const GridToStackExample = () => { - const [collapsed, setCollapsed] = useState(true); - const expandText = "Show More"; - const collapseText = "Show Less"; - - const onButtonClick = () => { - setCollapsed(!collapsed); - } - - return ( - DealsCard(i))} - accessory="expand" - layoutDesktop="grid" - layoutMobile="stack" - title="Card List Component" - initiallyShownCards={4} - expandText={collapsed ? expandText : collapseText} - onButtonClick={onButtonClick} - /> -)}; - export { RowToRailExample, - RowToRailWithHeaderButtonExample, + RowToRailWith4InitiallyShownCardsExmaple, GridToRailExample, GridToStackWithButtonExample, RowToStackExample, diff --git a/examples/bpk-component-card-list/examples.module.css b/examples/bpk-component-card-list/examples.module.css index 10d1058a89..1f089aa949 100644 --- a/examples/bpk-component-card-list/examples.module.css +++ b/examples/bpk-component-card-list/examples.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-examples__header{display:flex;height:2.5rem;padding:0.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem}.bpk-destinationCard{overflow:hidden}.bpk-destinationCard .bpk-bottom{display:flex;padding:1.5rem;justify-content:space-between}.bpk-destinationCard .bpk-column{display:flex;flex-direction:column}.bpk-internalLinkCard{display:flex;overflow:hidden}.bpk-internalLinkCard .bpk-image{flex:0 0 5.5rem}.bpk-internalLinkCard .bpk-info{display:flex;margin:auto 1.5rem;flex-direction:column}.bpk-internalLinkCard .bpk-verticalLinks_bullet{margin:0 0.25rem;color:#0062e3} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-examples__header{display:flex;height:2.5rem;padding:0.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem}.bpk-destinationCard .bpk-destinationCard-image>*{border-top-left-radius:0.75rem;border-top-right-radius:0.75rem}.bpk-destinationCard .bpk-bottom{display:flex;padding:1.5rem;justify-content:space-between}.bpk-destinationCard .bpk-column{display:flex;flex-direction:column}.bpk-internalLinkCard{display:flex;overflow:hidden}.bpk-internalLinkCard .bpk-image{flex:0 0 5.5rem}.bpk-internalLinkCard .bpk-info{display:flex;margin:auto 1.5rem;flex-direction:column}.bpk-internalLinkCard .bpk-verticalLinks_bullet{margin:0 0.25rem;color:#0062e3} diff --git a/examples/bpk-component-card-list/examples.module.scss b/examples/bpk-component-card-list/examples.module.scss index 872fd1b226..2dd29c9d3a 100644 --- a/examples/bpk-component-card-list/examples.module.scss +++ b/examples/bpk-component-card-list/examples.module.scss @@ -34,7 +34,11 @@ } .bpk-destinationCard { - overflow: hidden; + .bpk-destinationCard-image { + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; + overflow: hidden; + } .bpk-bottom { display: flex; diff --git a/examples/bpk-component-card-list/stories.js b/examples/bpk-component-card-list/stories.js index 59babfd39a..ac186abc10 100644 --- a/examples/bpk-component-card-list/stories.js +++ b/examples/bpk-component-card-list/stories.js @@ -22,7 +22,7 @@ import { GridToStackExample, GridToStackWithButtonExample, RowToRailExample, - RowToRailWithHeaderButtonExample, + RowToRailWith4InitiallyShownCardsExmaple, RowToStackExample, } from './examples'; @@ -34,5 +34,6 @@ export const GridToRail = GridToRailExample; export const GridToStack = GridToStackExample; export const GridToStackWithButton = GridToStackWithButtonExample; export const RowToRail = RowToRailExample; -export const RowToRailWithHeaderButton = RowToRailWithHeaderButtonExample; +export const RowToRailWithHeaderButton = + RowToRailWith4InitiallyShownCardsExmaple; export const RowToStack = RowToStackExample; diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.css b/packages/bpk-component-card-list/src/BpkCardList.module.css index 0bb95375a1..795a7dfe0a 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.css +++ b/packages/bpk-component-card-list/src/BpkCardList.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--chip-group{display:flex;gap:0.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index ff6964f450..0dcfd343a8 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -73,7 +73,7 @@ const BpkCardList = (props: BpkCardListProps) => { const button = buttonText && ( {buttonText} ); - + return (
{ const { accessory } = props; return ( {allCards} diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx new file mode 100644 index 0000000000..5d7d8dcbb5 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx @@ -0,0 +1,169 @@ +/* + * 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. + */ +/* eslint-disable no-underscore-dangle */ +import { useRef } from 'react'; +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import BpkCard from '../../../bpk-component-card'; +import type { BpkAccessoryTypes } from '../common-types'; + +import BpkCardListRow from './BpkCardListRow'; + +jest.mock('../../../bpk-react-utils', () => ({ + ...jest.requireActual('../../../bpk-react-utils'), + isRTL: jest.fn(), +})); +jest.mock('react', () => ({ + ...jest.requireActual('react'), + useRef: jest.fn(), +})); + +const mockScroll = jest.fn(); + +describe('BpkCardListRow', () => { + const cards = (numberOfCards: number) => + Array(numberOfCards) + .fill(null) + .map((k, v) => {`Card ${v}`}); + + const props = { + accessory: 'pagination' as typeof BpkAccessoryTypes.Pagination, + numberOfCardsToShow: 3, + }; + + const mockRef = ( + clientWidth: number, + type: 'once' | 'default' = 'default', + ) => { + const ref = { current: {} }; + Object.defineProperty(ref, 'current', { + set(_current) { + if (_current) { + jest + .spyOn(_current, 'clientWidth', 'get') + .mockReturnValue(clientWidth); + } + this._current = { ..._current, scroll: mockScroll }; + }, + get() { + return this._current; + }, + }); + type === 'once' + ? (useRef as jest.Mock).mockReturnValueOnce(ref) + : (useRef as jest.Mock).mockReturnValue(ref); + }; + + it('should render cards and accessory correctly for 7 cards', () => { + mockRef(1224, 'once'); + mockRef(408); + const { container, getAllByRole } = render( + {cards(7)}, + ); + + expect(container).toMatchSnapshot(); + expect( + container.getElementsByClassName('bpk-card-list-row__card'), + ).toHaveLength(7); + expect(getAllByRole('button')).toHaveLength(12); // 7 cards, 2 arrow, 3 indicators + expect(container.getElementsByClassName('bpk-button')).toHaveLength(2); + expect( + container.getElementsByClassName('bpk-page-indicator__indicator'), + ).toHaveLength(3); + }); + + it('should not render accessory when the number of indicators is 1', () => { + const { container } = render( + {cards(2)}, + ); + + expect(container.getElementsByClassName('bpk-page-indicator')).toHaveLength( + 0, + ); + }); + + it('should not render accessory when there is no accessory prop', () => { + const { container } = render( + + {cards(7)} + , + ); + + expect(container.getElementsByClassName('bpk-page-indicator')).toHaveLength( + 0, + ); + }); + + describe('pagination accessory', () => { + it('should render cards and accessory correctly for 10 cards', () => { + mockRef(1224, 'once'); + mockRef(408); + const { container } = render( + {cards(10)}, + ); + + expect( + container.getElementsByClassName('bpk-page-indicator__indicator'), + ).toHaveLength(4); + }); + + it('should update the pageIndicator buttons when next arrow clicked', async () => { + mockRef(1224, 'once'); + mockRef(408); + const { container } = render( + {cards(4)}, + ); + const prevArrow = screen.getByRole('button', { name: 'Previous' }); + const nextArrow = screen.getByRole('button', { name: 'Next' }); + + expect( + container.getElementsByClassName('bpk-page-indicator__indicator'), + ).toHaveLength(2); + expect(prevArrow).toHaveAttribute('disabled', ''); + expect(nextArrow).not.toHaveAttribute('disabled'); + + await userEvent.click(nextArrow); + + expect(prevArrow).not.toHaveAttribute('disabled'); + expect(nextArrow).toHaveAttribute('disabled', ''); + }); + + it('should update the pageIndicator indicators on click', async () => { + mockRef(1224, 'once'); + mockRef(408); + const { container } = render( + {cards(4)}, + ); + const indicator1 = screen.getByRole('button', { name: 'Go to slide 1' }); + const indicator2 = screen.getByRole('button', { name: 'Go to slide 2' }); + + expect( + container.getElementsByClassName('bpk-page-indicator__indicator'), + ).toHaveLength(2); + expect(indicator1).toHaveAttribute('aria-current', 'true'); + expect(indicator2).toHaveAttribute('aria-current', 'false'); + + await userEvent.click(indicator2); + + expect(indicator1).toHaveAttribute('aria-current', 'false'); + expect(indicator2).toHaveAttribute('aria-current', 'true'); + }); + }); +}); diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css index dfb7095814..90ab757dae 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:1.5rem 1.5rem 1.5rem 0.25rem;flex-shrink:0;text-wrap:wrap}@media (max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none;padding:1rem 1rem 1rem}} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:0 1.5rem 1.5rem 0.25rem;flex-shrink:0;text-wrap:wrap}@media (max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none;padding:1rem 1rem 1rem}} diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss index 0812b861bf..5241be6df3 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss @@ -10,7 +10,7 @@ } .bpk-card-list-row__card { - padding: bpk-spacing-lg() bpk-spacing-lg() bpk-spacing-lg() bpk-spacing-sm(); + padding: 0 bpk-spacing-lg() bpk-spacing-lg() bpk-spacing-sm(); flex-shrink: 0; text-wrap: wrap; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx index 699f60e19c..e54ef5f328 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx @@ -41,7 +41,11 @@ type BpkCardListRowProps = { accessory?: typeof BpkAccessoryTypes.Pagination; }; -const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: BpkCardListRowProps) => { +const BpkCardListRow = ({ + accessory, + children, + numberOfCardsToShow, +}: BpkCardListRowProps) => { const containerRef = useRef(null); const cardRef = useRef(null); @@ -83,6 +87,7 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: BpkCardLis numberOfDisplay = numberOfCardsToShow; setScrollPosition(0); setCardIndex(0); + setCurrentPageIndex(0); }, DEBOUNCE_TIME); useEffect(() => { @@ -173,9 +178,9 @@ const BpkCardListRow = ({ accessory, children, numberOfCardsToShow }: BpkCardLis , diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap new file mode 100644 index 0000000000..0f27782e43 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap @@ -0,0 +1,167 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkCardListRow should render cards and accessory correctly for 7 cards 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+`; diff --git a/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap b/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap index 2ab97cb3d4..5d6d045be5 100644 --- a/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap +++ b/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap @@ -430,59 +430,6 @@ exports[`BpkCardList should render correctly with header, grid, rail and no acce `; -exports[`BpkCardList should render correctly with header, grid, stack and button accessory 1`] = ` - -
-
-
-

- Title -

- - Description - -
- -
-
-
-
- Card 1 -
-
- Card 2 -
-
- -
-
- -`; - exports[`BpkCardList should render correctly with header, grid, stack and expand accessory 1`] = `
-
From c161b63493a3bceae46e01036b1d21512c390fec Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Mon, 4 Mar 2024 11:09:09 +0000 Subject: [PATCH 22/57] accessibility tests --- .../BpkCardListGrid/accessibility-test.tsx | 43 +++++++++++++++++++ .../BpkCardListRail/BpkCardListRail-test.tsx | 8 +--- .../BpkCardListRail/accessibility-test.tsx | 33 ++++++++++++++ .../BpkCardListRow/BpkCardListRow-test.tsx | 19 +++----- .../src/BpkCardListRow/accessibility-test.tsx | 35 +++++++++++++++ .../BpkCardListStack/accessibility-test.tsx | 43 +++++++++++++++++++ .../bpk-component-card-list/testMocks.tsx | 6 +++ 7 files changed, 169 insertions(+), 18 deletions(-) create mode 100644 packages/bpk-component-card-list/src/BpkCardListGrid/accessibility-test.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListRail/accessibility-test.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/accessibility-test.tsx create mode 100644 packages/bpk-component-card-list/src/BpkCardListStack/accessibility-test.tsx create mode 100644 packages/bpk-component-card-list/testMocks.tsx diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/accessibility-test.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/accessibility-test.tsx new file mode 100644 index 0000000000..0b8de34b20 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/accessibility-test.tsx @@ -0,0 +1,43 @@ +/* + * 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 mockCards from '../../testMocks'; + +import BpkCardListGrid from './BpkCardListGrid'; + +describe('BpkCardListGrid accessibility tests', () => { + it('should not have programmatically-detectable accessibility issues', async () => { + const { container } = render( + {}} + onButtonClick={() => {}} + setCollapsed={() => {}} + showContent={() => {}} + > + {mockCards(12)} + , + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx index e5e551d9f1..952f7f4455 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx @@ -17,18 +17,14 @@ */ import { render } from '@testing-library/react'; -import BpkCard from '../../../bpk-component-card'; +import mockCards from '../../testMocks'; import BpkCardListRail from './BpkCardListRail'; describe('BpkCardListRail', () => { it('should render cards correctly in the MobileScrollContainer', () => { const { container } = render( - - Card 1 - Card 2 - Card 3 - , + {mockCards(3)}, ); expect(container).toMatchSnapshot(); diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/accessibility-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/accessibility-test.tsx new file mode 100644 index 0000000000..a74e396559 --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRail/accessibility-test.tsx @@ -0,0 +1,33 @@ +/* + * 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 mockCards from '../../testMocks'; + +import BpkCardListRail from './BpkCardListRail'; + +describe('BpkCardListRail accessibility tests', () => { + it('should not have programmatically-detectable accessibility issues', async () => { + const { container } = render( + {mockCards(12)}, + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx index 5d7d8dcbb5..edb40190cf 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx @@ -21,8 +21,8 @@ import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import BpkCard from '../../../bpk-component-card'; import type { BpkAccessoryTypes } from '../common-types'; +import mockCards from '../../testMocks'; import BpkCardListRow from './BpkCardListRow'; @@ -38,11 +38,6 @@ jest.mock('react', () => ({ const mockScroll = jest.fn(); describe('BpkCardListRow', () => { - const cards = (numberOfCards: number) => - Array(numberOfCards) - .fill(null) - .map((k, v) => {`Card ${v}`}); - const props = { accessory: 'pagination' as typeof BpkAccessoryTypes.Pagination, numberOfCardsToShow: 3, @@ -75,7 +70,7 @@ describe('BpkCardListRow', () => { mockRef(1224, 'once'); mockRef(408); const { container, getAllByRole } = render( - {cards(7)}, + {mockCards(7)}, ); expect(container).toMatchSnapshot(); @@ -91,7 +86,7 @@ describe('BpkCardListRow', () => { it('should not render accessory when the number of indicators is 1', () => { const { container } = render( - {cards(2)}, + {mockCards(2)}, ); expect(container.getElementsByClassName('bpk-page-indicator')).toHaveLength( @@ -102,7 +97,7 @@ describe('BpkCardListRow', () => { it('should not render accessory when there is no accessory prop', () => { const { container } = render( - {cards(7)} + {mockCards(7)} , ); @@ -116,7 +111,7 @@ describe('BpkCardListRow', () => { mockRef(1224, 'once'); mockRef(408); const { container } = render( - {cards(10)}, + {mockCards(10)}, ); expect( @@ -128,7 +123,7 @@ describe('BpkCardListRow', () => { mockRef(1224, 'once'); mockRef(408); const { container } = render( - {cards(4)}, + {mockCards(4)}, ); const prevArrow = screen.getByRole('button', { name: 'Previous' }); const nextArrow = screen.getByRole('button', { name: 'Next' }); @@ -149,7 +144,7 @@ describe('BpkCardListRow', () => { mockRef(1224, 'once'); mockRef(408); const { container } = render( - {cards(4)}, + {mockCards(4)}, ); const indicator1 = screen.getByRole('button', { name: 'Go to slide 1' }); const indicator2 = screen.getByRole('button', { name: 'Go to slide 2' }); diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/accessibility-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/accessibility-test.tsx new file mode 100644 index 0000000000..52bf3fc42c --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListRow/accessibility-test.tsx @@ -0,0 +1,35 @@ +/* + * 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 mockCards from '../../testMocks'; + +import BpkCardListRow from './BpkCardListRow'; + +describe('BpkCardListRow accessibility tests', () => { + it('should not have programmatically-detectable accessibility issues', async () => { + const { container } = render( + + {mockCards(12)} + , + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/accessibility-test.tsx b/packages/bpk-component-card-list/src/BpkCardListStack/accessibility-test.tsx new file mode 100644 index 0000000000..94041b230f --- /dev/null +++ b/packages/bpk-component-card-list/src/BpkCardListStack/accessibility-test.tsx @@ -0,0 +1,43 @@ +/* + * 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 mockCards from '../../testMocks'; + +import BpkCardListStack from './BpkCardListStack'; + +describe('BpkCardListStack accessibility tests', () => { + it('should not have programmatically-detectable accessibility issues', async () => { + const { container } = render( + {}} + onButtonClick={() => {}} + setCollapsed={() => {}} + showContent={() => {}} + > + {mockCards(12)} + , + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/bpk-component-card-list/testMocks.tsx b/packages/bpk-component-card-list/testMocks.tsx new file mode 100644 index 0000000000..0d9f099703 --- /dev/null +++ b/packages/bpk-component-card-list/testMocks.tsx @@ -0,0 +1,6 @@ +import BpkCard from '../bpk-component-card'; + +const mockCards = (numberOfCards: number) => + Array(numberOfCards).map((k, v) => {`Card ${v}`}); + +export default mockCards; From 0053be784757f6e41e643cd18405f34a04e221bf Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Wed, 6 Mar 2024 16:34:52 +0000 Subject: [PATCH 23/57] update storybook examples --- examples/bpk-component-card-list/examples.js | 36 ++++++++++++------- .../examples.module.css | 4 +-- .../src/BpkCardList.module.css | 4 +-- .../BpkCardListGrid.module.css | 4 +-- .../BpkCardListRail.module.css | 4 +-- .../BpkCardListRow/BpkCardListRow.module.css | 4 +-- .../BpkCardListStack.module.css | 4 +-- 7 files changed, 36 insertions(+), 24 deletions(-) diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index ce382024f8..e51c862c4d 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -98,17 +98,28 @@ const title = 'Must-visit spots'; const description = 'Check out these world-famous destinations perfect for visiting in spring.'; -const GridToRailExample = () => ( - -); +const GridToRailExample = () => { + const [collapsed, setCollapsed] = useState(true); + const expandText = 'Show More'; + const collapseText = 'Show Less'; + + const onButtonClick = () => { + setCollapsed(!collapsed); + }; + + return ( + + ); +}; const GridToStackExample = () => { const [collapsed, setCollapsed] = useState(true); @@ -142,7 +153,7 @@ const GridToStackWithButtonExample = () => ( layoutMobile="stack" title={title} description={description} - buttonText="Click Me" + buttonText="Explore More" /> ); @@ -155,6 +166,7 @@ const RowToRailWith4InitiallyShownCardsExmaple = () => ( title={title} description={description} initiallyShownCards={4} + buttonText="Explore more" /> ); const RowToRailExample = () => ( diff --git a/examples/bpk-component-card-list/examples.module.css b/examples/bpk-component-card-list/examples.module.css index 1f089aa949..32a6409e3c 100644 --- a/examples/bpk-component-card-list/examples.module.css +++ b/examples/bpk-component-card-list/examples.module.css @@ -14,5 +14,5 @@ * 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-card-list-examples__header{display:flex;height:2.5rem;padding:0.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem}.bpk-destinationCard .bpk-destinationCard-image>*{border-top-left-radius:0.75rem;border-top-right-radius:0.75rem}.bpk-destinationCard .bpk-bottom{display:flex;padding:1.5rem;justify-content:space-between}.bpk-destinationCard .bpk-column{display:flex;flex-direction:column}.bpk-internalLinkCard{display:flex;overflow:hidden}.bpk-internalLinkCard .bpk-image{flex:0 0 5.5rem}.bpk-internalLinkCard .bpk-info{display:flex;margin:auto 1.5rem;flex-direction:column}.bpk-internalLinkCard .bpk-verticalLinks_bullet{margin:0 0.25rem;color:#0062e3} + */ +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-examples__header{display:flex;height:2.5rem;padding:.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem}.bpk-destinationCard .bpk-destinationCard-image{border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden}.bpk-destinationCard .bpk-bottom{display:flex;padding:1.5rem;justify-content:space-between}.bpk-destinationCard .bpk-column{display:flex;flex-direction:column}.bpk-internalLinkCard{display:flex;overflow:hidden}.bpk-internalLinkCard .bpk-image{flex:0 0 5.5rem}.bpk-internalLinkCard .bpk-info{display:flex;margin:auto 1.5rem;flex-direction:column}.bpk-internalLinkCard .bpk-verticalLinks_bullet{margin:0 .25rem;color:#0062e3} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.css b/packages/bpk-component-card-list/src/BpkCardList.module.css index 795a7dfe0a..a9863f2cf0 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.css +++ b/packages/bpk-component-card-list/src/BpkCardList.module.css @@ -14,5 +14,5 @@ * 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-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} + */ +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css index a36742dbad..2ac782499c 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css @@ -14,5 +14,5 @@ * 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-card-list-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(17.5625rem, 1fr));gap:1.5rem} + */ +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(17.5625rem, 1fr));gap:1.5rem} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css index 7f210640e2..d6f1cb792d 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css @@ -14,5 +14,5 @@ * 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-card-list--rail_container{display:flex}.bpk-card-list--rail_card{display:flex;min-width:100%;padding:1rem;justify-content:center;align-items:center;text-wrap:wrap}.bpk-card-list--rail_card>*{width:100%} + */ +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list--rail_container{display:flex}.bpk-card-list--rail_card{display:flex;min-width:100%;padding:1rem;justify-content:center;align-items:center;text-wrap:wrap}.bpk-card-list--rail_card>*{width:100%} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css index 90ab757dae..f4aae84e82 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css @@ -14,5 +14,5 @@ * 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-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:0 1.5rem 1.5rem 0.25rem;flex-shrink:0;text-wrap:wrap}@media (max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none;padding:1rem 1rem 1rem}} + */ +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-0.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:0 1.5rem 1.5rem .25rem;flex-shrink:0;text-wrap:wrap}@media(max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none;padding:1rem 1rem 1rem}} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css index 125ccaba91..168aa41eaa 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css @@ -14,5 +14,5 @@ * 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-card-list-stack{display:flex;flex-direction:column;gap:1rem} + */ +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-stack{display:flex;flex-direction:column;gap:1rem} \ No newline at end of file From cb9123b7424f6d02f9464da7233f2d2675c57797 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Mon, 11 Mar 2024 13:21:23 +0000 Subject: [PATCH 24/57] simplify types --- .../src/common-types.ts | 90 ++----------------- 1 file changed, 7 insertions(+), 83 deletions(-) diff --git a/packages/bpk-component-card-list/src/common-types.ts b/packages/bpk-component-card-list/src/common-types.ts index eadb5344e8..aa9e5f4a48 100644 --- a/packages/bpk-component-card-list/src/common-types.ts +++ b/packages/bpk-component-card-list/src/common-types.ts @@ -58,17 +58,19 @@ type RailProps = { type ButtonProps = { buttonText: string; onButtonClick: () => void; + href?: string; }; +type HeaderButtonProps = ButtonProps; +type NoHeaderButton = Partial; + type NoAccessory = { accessory?: undefined; }; type ButtonAccessory = { accessory: typeof BpkAccessoryTypes.Button; - buttonText: string; - onButtonClick: () => void; -}; +} & ButtonProps; type PaginationAccessory = { accessory: typeof BpkAccessoryTypes.Pagination; @@ -80,43 +82,11 @@ type ExpandAccessory = { onButtonClick: () => void; }; -type DontGiveMe = { - [Key in Exclude]?: undefined; -}; - -type MaybeWithButtonProps = T extends {} - ? (DontGiveMe & T) | (T & ButtonProps) - : never; - export type BpkCardListProps = BpkCardListBaseProps & (GridProps | RowProps) & (StackProps | RailProps) & - MaybeWithButtonProps< - NoAccessory | ButtonAccessory | PaginationAccessory | ExpandAccessory - >; -/* - ( - | (NoAccessory | ButtonAccessory | PaginationAccessory | ExpandAccessory) - | (NoAccessory & ButtonProps) - | (ButtonAccessory & ButtonProps) - | (PaginationAccessory & ButtonProps) - | (ExpandAccessory & ButtonProps) - ); - */ - -type VeryExplicitBpkCardListProps = - | (BpkCardListBaseProps & GridProps & RailProps & ButtonAccessory) - | (BpkCardListBaseProps & GridProps & RailProps & ExpandAccessory) - | (BpkCardListBaseProps & GridProps & RailProps & PaginationAccessory) - | (BpkCardListBaseProps & GridProps & RailProps) - | (BpkCardListBaseProps & GridProps & StackProps & ButtonAccessory) - | (BpkCardListBaseProps & GridProps & StackProps & ExpandAccessory) - | (BpkCardListBaseProps & GridProps & StackProps) - | (BpkCardListBaseProps & RowProps & RailProps & ExpandAccessory) - | (BpkCardListBaseProps & RowProps & RailProps & PaginationAccessory) - | (BpkCardListBaseProps & RowProps & RailProps) - | (BpkCardListBaseProps & RowProps & StackProps & ExpandAccessory) - | (BpkCardListBaseProps & RowProps & StackProps) + (HeaderButtonProps | NoHeaderButton) & + (NoAccessory | ButtonAccessory | PaginationAccessory | ExpandAccessory); interface BpkCardListGridStackBaseProps { children: ReactElement[]; @@ -144,49 +114,3 @@ export type BpkCardListGridStackProps = BpkCardListGridStackBaseProps & | (BpkCardListGridStackButtonModeProps & { expandText?: undefined }) | (NoAccessory & { onButtonClick?: undefined; expandText?: undefined }) ); - -// Test cases -// TODO: Remove -// BpkCardListGridStackProps -// base + expand -const BpkCardListGridStackTest1: BpkCardListGridStackProps = { - children: [], - showContent: () => {}, - hideContent: () => {}, - collapsed: false, - setCollapsed: () => {}, - accessory: BpkAccessoryTypes.Expand, - expandText: 'expand', - onButtonClick: () => {}, -}; - -// base + button -const BpkCardListGridStackTest2: BpkCardListGridStackProps = { - children: [], - showContent: () => {}, - hideContent: () => {}, - collapsed: false, - setCollapsed: () => {}, - accessory: BpkAccessoryTypes.Button, - buttonText: 'button', - onButtonClick: () => {}, -}; - -// base + no accessory -const BpkCardListGridStackTest3: BpkCardListGridStackProps = { - children: [], - showContent: () => {}, - hideContent: () => {}, - collapsed: false, - setCollapsed: () => {}, -}; - -const BpkCardListGridStackTest4: BpkCardListGridStackProps = { - children: [], - showContent: () => {}, - hideContent: () => {}, - collapsed: false, - setCollapsed: () => {}, - accessory: undefined, - -}; From 0bd982f2598c7da45002932fffb37687e7e40e46 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Mon, 11 Mar 2024 13:26:35 +0000 Subject: [PATCH 25/57] add href to button --- .../bpk-component-card-list/src/BpkCardList-test.tsx | 9 +++++++++ packages/bpk-component-card-list/src/BpkCardList.tsx | 1 + 2 files changed, 10 insertions(+) diff --git a/packages/bpk-component-card-list/src/BpkCardList-test.tsx b/packages/bpk-component-card-list/src/BpkCardList-test.tsx index debf7c7816..31f553ab34 100644 --- a/packages/bpk-component-card-list/src/BpkCardList-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList-test.tsx @@ -62,6 +62,7 @@ describe('BpkCardList', () => { accessory='button' buttonText='Button' onButtonClick={jest.fn()} + href='https://www.skyscanner.net' />, ); expect(asFragment()).toMatchSnapshot(); @@ -109,6 +110,7 @@ describe('BpkCardList', () => { accessory='button' buttonText='Button' onButtonClick={jest.fn()} + href='https://www.skyscanner.net' />, ); expect(asFragment()).toMatchSnapshot(); @@ -161,6 +163,7 @@ describe('BpkCardList', () => { description="Description" buttonText="Button" onButtonClick={jest.fn()} + href='https://www.skyscanner.net' cardList={[
Card 1
,
Card 2
,
Card 3
]} layoutDesktop="grid" layoutMobile="stack" @@ -179,6 +182,7 @@ describe('BpkCardList', () => { description="Description" buttonText="Button" onButtonClick={jest.fn()} + href='https://www.skyscanner.net' cardList={[
Card 1
,
Card 2
]} layoutDesktop="grid" layoutMobile="stack" @@ -194,6 +198,7 @@ describe('BpkCardList', () => { description="Description" buttonText="Button" onButtonClick={jest.fn()} + href='https://www.skyscanner.net' cardList={[
Card 1
,
Card 2
,
Card 3
]} layoutDesktop="grid" layoutMobile="rail" @@ -212,6 +217,7 @@ describe('BpkCardList', () => { description="Description" buttonText="Button" onButtonClick={jest.fn()} + href='https://www.skyscanner.net' cardList={[
Card 1
,
Card 2
]} layoutDesktop="grid" layoutMobile="rail" @@ -227,6 +233,7 @@ describe('BpkCardList', () => { description="Description" buttonText="Button" onButtonClick={jest.fn()} + href='https://www.skyscanner.net' cardList={[
Card 1
,
Card 2
]} layoutDesktop="row" layoutMobile="stack" @@ -242,6 +249,7 @@ describe('BpkCardList', () => { description="Description" buttonText="Button" onButtonClick={jest.fn()} + href='https://www.skyscanner.net' cardList={[
Card 1
,
Card 2
,
Card 3
]} layoutDesktop="row" layoutMobile="rail" @@ -258,6 +266,7 @@ describe('BpkCardList', () => { description="Description" buttonText="Button" onButtonClick={jest.fn()} + href='https://www.skyscanner.net' cardList={[
Card 1
,
Card 2
]} layoutDesktop="row" layoutMobile="rail" diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 0dcfd343a8..7da152d726 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -143,6 +143,7 @@ const BpkCardList = (props: BpkCardListProps) => { accessory, buttonText: props.buttonText, onButtonClick: props.onButtonClick, + href: props.href, }; } return ( From 84a6faf57ff422d605c5cdd3167668955ab9d5b4 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Mon, 11 Mar 2024 13:45:20 +0000 Subject: [PATCH 26/57] fix typing issues --- .../BpkCardListGrid/BpkCardListGrid-test.tsx | 3 +- .../BpkCardListStack-test.tsx | 3 +- .../src/BpkExpand/BpkExpand.tsx | 11 +------ .../src/common-types.ts | 31 ++++++++----------- 4 files changed, 18 insertions(+), 30 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid-test.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid-test.tsx index 212411b315..10634567aa 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid-test.tsx @@ -32,6 +32,7 @@ describe('BpkCardListGrid', () => { hideContent={jest.fn()} collapsed setCollapsed={jest.fn()} + onButtonClick={jest.fn()} > {cards} , @@ -45,7 +46,7 @@ describe('BpkCardListGrid', () => { const { asFragment } = render( {cards} diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx index 75735a60ba..6e79331287 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx @@ -32,6 +32,7 @@ describe('BpkCardListStack', () => { hideContent={jest.fn()} collapsed setCollapsed={jest.fn()} + onButtonClick={jest.fn()} > {cards} , @@ -45,7 +46,7 @@ describe('BpkCardListStack', () => { const { asFragment } = render( {cards} diff --git a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx index aef245e915..01dbe7a3e5 100644 --- a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx +++ b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx @@ -16,8 +16,6 @@ * limitations under the License. */ -import type { Dispatch, ReactElement, SetStateAction } from 'react'; - // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronDown from '../../../bpk-component-icon/sm/chevron-down'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. @@ -27,18 +25,11 @@ import { withButtonAlignment, withRtlSupport, } from '../../../bpk-component-icon'; +import type { BpkExpandProps } from '../common-types'; const AlignedChevronDownIcon = withButtonAlignment(withRtlSupport(ChevronDown)); const AlignedChevronUpIcon = withButtonAlignment(withRtlSupport(ChevronUp)); -type BpkExpandProps = { - children: ReactElement; - collapsed: boolean; - hideContent: () => void; - setCollapsed: Dispatch>; - showContent: () => void; -}; - const BpkExpand = ({ children, collapsed, diff --git a/packages/bpk-component-card-list/src/common-types.ts b/packages/bpk-component-card-list/src/common-types.ts index aa9e5f4a48..3763cd058c 100644 --- a/packages/bpk-component-card-list/src/common-types.ts +++ b/packages/bpk-component-card-list/src/common-types.ts @@ -88,29 +88,24 @@ export type BpkCardListProps = BpkCardListBaseProps & (HeaderButtonProps | NoHeaderButton) & (NoAccessory | ButtonAccessory | PaginationAccessory | ExpandAccessory); -interface BpkCardListGridStackBaseProps { +type BpkCardListGridStackBaseProps = { children: ReactElement[]; +}; + +type BpkCardListGridStackExpandModeProps = { showContent: () => void; hideContent: () => void; collapsed: boolean; setCollapsed: Dispatch>; -} +} & ExpandAccessory; -type BpkCardListGridStackExpandModeProps = { - accessory: typeof BpkAccessoryTypes.Expand; - expandText: string; - onButtonClick: () => void; -}; +export type BpkCardListGridStackProps = BpkCardListGridStackBaseProps & + (BpkCardListGridStackExpandModeProps | ButtonAccessory | NoAccessory); -type BpkCardListGridStackButtonModeProps = { - accessory: typeof BpkAccessoryTypes.Button; - buttonText: string; - onButtonClick: () => void; +export type BpkExpandProps = { + children: string | ReactElement; + collapsed: boolean; + hideContent: () => void; + setCollapsed: Dispatch>; + showContent: () => void; }; - -export type BpkCardListGridStackProps = BpkCardListGridStackBaseProps & - ( - | BpkCardListGridStackExpandModeProps - | (BpkCardListGridStackButtonModeProps & { expandText?: undefined }) - | (NoAccessory & { onButtonClick?: undefined; expandText?: undefined }) - ); From d380d62c3e0e177f0a1edacc547a797ddf2bc1f8 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Mon, 11 Mar 2024 13:59:54 +0000 Subject: [PATCH 27/57] update node-sass imports to sass --- packages/bpk-component-card-list/src/BpkCardList.module.scss | 2 +- .../src/BpkCardListGrid/BpkCardListGrid.module.scss | 2 +- .../src/BpkCardListRail/BpkCardListRail.module.scss | 2 +- .../src/BpkCardListRow/BpkCardListRow.module.scss | 3 ++- .../src/BpkCardListStack/BpkCardListStack.module.scss | 2 +- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.scss b/packages/bpk-component-card-list/src/BpkCardList.module.scss index 67248dfcbc..3f15125339 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardList.module.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -@import '../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-card-list { display: flex; diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss index 94dd334a1e..e63b01689a 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss @@ -1,4 +1,4 @@ -@import '../../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-card-list-grid { display: grid; diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss index 7dda08609a..24e4629c2b 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss @@ -1,4 +1,4 @@ -@import '../../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-card-list--rail { &_container { diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss index 5241be6df3..f6c5511c6a 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss @@ -1,4 +1,5 @@ -@import '../../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/breakpoints'; .bpk-card-list-row { position: relative; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss index c2d328c30d..33e0152538 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss @@ -1,4 +1,4 @@ -@import '../../../bpk-mixins/index.scss'; +@use '../../unstable__bpk-mixins/tokens'; .bpk-card-list-stack { display: flex; From 7d55a98b8e90ec1a80017f369d4bc949f3944eb9 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Mon, 11 Mar 2024 14:06:42 +0000 Subject: [PATCH 28/57] update node-sass imports to sass --- .../src/BpkCardListGrid/BpkCardListGrid.module.scss | 2 +- .../src/BpkCardListRail/BpkCardListRail.module.scss | 2 +- .../src/BpkCardListRow/BpkCardListRow.module.scss | 4 ++-- .../src/BpkCardListStack/BpkCardListStack.module.scss | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss index e63b01689a..a51a1b573f 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss @@ -1,4 +1,4 @@ -@use '../../unstable__bpk-mixins/tokens'; +@use '../../../unstable__bpk-mixins/tokens'; .bpk-card-list-grid { display: grid; diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss index 24e4629c2b..20c5a69cc2 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.scss @@ -1,4 +1,4 @@ -@use '../../unstable__bpk-mixins/tokens'; +@use '../../../unstable__bpk-mixins/tokens'; .bpk-card-list--rail { &_container { diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss index f6c5511c6a..5717d1fcb0 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss @@ -1,5 +1,5 @@ -@use '../../unstable__bpk-mixins/tokens'; -@use '../../unstable__bpk-mixins/breakpoints'; +@use '../../../unstable__bpk-mixins/tokens'; +@use '../../../unstable__bpk-mixins/breakpoints'; .bpk-card-list-row { position: relative; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss index 33e0152538..da111a279f 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.scss @@ -1,4 +1,4 @@ -@use '../../unstable__bpk-mixins/tokens'; +@use '../../../unstable__bpk-mixins/tokens'; .bpk-card-list-stack { display: flex; From 4bfd247206cf35b2bdb8004a476aba25f47b6b34 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Mon, 11 Mar 2024 15:33:27 +0000 Subject: [PATCH 29/57] fix build issues --- packages/bpk-component-card-list/src/BpkCardList.module.css | 2 +- packages/bpk-component-card-list/src/BpkCardList.module.scss | 2 +- .../src/BpkCardListGrid/BpkCardListGrid.module.css | 2 +- .../src/BpkCardListGrid/BpkCardListGrid.module.scss | 2 +- .../src/BpkCardListRail/BpkCardListRail.module.css | 2 +- .../src/BpkCardListRow/BpkCardListRow.module.css | 2 +- .../src/BpkCardListRow/BpkCardListRow.module.scss | 4 ++-- .../src/BpkCardListStack/BpkCardListStack.module.css | 2 +- 8 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.css b/packages/bpk-component-card-list/src/BpkCardList.module.css index a9863f2cf0..6e04a62d39 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.css +++ b/packages/bpk-component-card-list/src/BpkCardList.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} \ No newline at end of file +.bpk-card-list{display:flex;flex-direction:column;gap:bpk-spacing-lg()}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:bpk-spacing-lg()}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:bpk-spacing-lg()}.bpk-card-list--card-list--stack{flex-direction:column}.bpk-card-list--card-list--card{min-width:17.5625rem;flex-grow:1;scroll-snap-align:start} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.scss b/packages/bpk-component-card-list/src/BpkCardList.module.scss index 3f15125339..04a3d9d8df 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardList.module.scss @@ -40,7 +40,7 @@ } &--card { - min-width: $bpk-one-pixel-rem * 281; + min-width: tokens.$bpk-one-pixel-rem * 281; flex-grow: 1; scroll-snap-align: start; } diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css index 2ac782499c..3ac3d64caa 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(17.5625rem, 1fr));gap:1.5rem} \ No newline at end of file +.bpk-card-list-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(17.5625rem, 1fr));gap:bpk-spacing-lg()} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss index a51a1b573f..4fb5b889f5 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.scss @@ -4,7 +4,7 @@ display: grid; grid-template-columns: repeat( auto-fit, - minmax($bpk-one-pixel-rem * 281, 1fr) + minmax(tokens.$bpk-one-pixel-rem * 281, 1fr) ); gap: bpk-spacing-lg(); } diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css index d6f1cb792d..d2699d6a60 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list--rail_container{display:flex}.bpk-card-list--rail_card{display:flex;min-width:100%;padding:1rem;justify-content:center;align-items:center;text-wrap:wrap}.bpk-card-list--rail_card>*{width:100%} \ No newline at end of file +.bpk-card-list--rail_container{display:flex}.bpk-card-list--rail_card{display:flex;min-width:100%;padding:bpk-spacing-base();justify-content:center;align-items:center;text-wrap:wrap}.bpk-card-list--rail_card>*{width:100%} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css index f4aae84e82..bf567dd8f5 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-0.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:0 1.5rem 1.5rem .25rem;flex-shrink:0;text-wrap:wrap}@media(max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none;padding:1rem 1rem 1rem}} \ No newline at end of file +.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-0.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:0 bpk-spacing-lg() bpk-spacing-lg() bpk-spacing-sm();flex-shrink:0;text-wrap:wrap}@media(max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none;padding:bpk-spacing-base() bpk-spacing-base() bpk-spacing-base()}} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss index 5717d1fcb0..106d437706 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss @@ -7,7 +7,7 @@ .bpk-card-list-row__cards { display: flex; overflow: hidden; - margin-inline: 0 - 1.5 * bpk-spacing-md(); + margin-inline: 0 - 1.5 * tokens.bpk-spacing-md(); } .bpk-card-list-row__card { @@ -15,7 +15,7 @@ flex-shrink: 0; text-wrap: wrap; - @include bpk-breakpoint-mobile { + @include breakpoints.bpk-breakpoint-mobile { display: none; padding: bpk-spacing-base() bpk-spacing-base() bpk-spacing-base(); } diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css index 168aa41eaa..78b1712266 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-list-stack{display:flex;flex-direction:column;gap:1rem} \ No newline at end of file +.bpk-card-list-stack{display:flex;flex-direction:column;gap:bpk-spacing-base()} \ No newline at end of file From 9e84caceba75dc37e063972ce16e500562b010f8 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Thu, 14 Mar 2024 11:32:26 +0000 Subject: [PATCH 30/57] fix tests --- .../BpkCardListGrid-test.tsx.snap | 4 ++- .../BpkCardListRail-test.tsx.snap | 6 ++-- .../BpkCardListStack-test.tsx.snap | 4 ++- .../src/BpkExpand/BpkExpand-test.tsx | 33 +++++++++++++++---- .../__snapshots__/BpkExpand-test.tsx.snap | 29 +++++++++++++++- .../__snapshots__/BpkCardList-test.tsx.snap | 32 +++++++++--------- .../bpk-component-card-list/testMocks.tsx | 2 +- 7 files changed, 80 insertions(+), 30 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap index ffef70ac8d..c9e8f7141f 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap @@ -8,7 +8,9 @@ exports[`BpkCardListGrid should show button accessory 1`] = ` `; diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap index 062b4110e6..81e5917a26 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap +++ b/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap @@ -22,7 +22,7 @@ exports[`BpkCardListRail should render cards correctly in the MobileScrollContai class="bpk-card bpk-card--atomic-button bpk-card--padded" type="button" > - Card 1 + Card 0
- Card 2 + Card 1
- Card 3 + Card 2
diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap index f004928964..e39fd71d17 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap +++ b/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap @@ -8,7 +8,9 @@ exports[`BpkCardListStack should show button accessory 1`] = ` `; diff --git a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx index 2e30bf96d3..250eeb0b3f 100644 --- a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx +++ b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx @@ -36,7 +36,7 @@ describe('BpkExpand', () => { expect(asFragment()).toMatchSnapshot(); }); - it('should call call support functions when button is clicked', async () => { + it('should call showContent function when collapsed and button is clicked', async () => { const hideContent = jest.fn(); const setCollapsed = jest.fn(); const showContent = jest.fn(); @@ -54,14 +54,33 @@ describe('BpkExpand', () => { expect(asFragment()).toMatchSnapshot(); - await userEvent.click(getByTestId('button')) + await userEvent.click(getByTestId('button')); - expect(showContent).toHaveBeenCalled() - expect(setCollapsed).toHaveBeenCalledWith(false) + expect(showContent).toHaveBeenCalled(); + expect(setCollapsed).toHaveBeenCalledWith(false); + }); + + it('should call hideContent function when not collapsed and button is clicked', async () => { + const hideContent = jest.fn(); + const setCollapsed = jest.fn(); + const showContent = jest.fn(); + + const { asFragment, getByTestId } = render( + + Show More + , + ); + + expect(asFragment()).toMatchSnapshot(); - await userEvent.click(getByTestId('button')) + await userEvent.click(getByTestId('button')); - expect(hideContent).toHaveBeenCalled() - expect(setCollapsed).toHaveBeenCalledWith(true) + expect(hideContent).toHaveBeenCalled(); + expect(setCollapsed).toHaveBeenCalledWith(true); }); }); diff --git a/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap b/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap index b96733ae65..00c2d7a4bb 100644 --- a/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap +++ b/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap @@ -1,6 +1,33 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`BpkExpand should call call support functions when button is clicked 1`] = ` +exports[`BpkExpand should call hideContent function when not collapsed and button is clicked 1`] = ` + + + +`; + +exports[`BpkExpand should call showContent function when collapsed and button is clicked 1`] = `
- -
- +
+
- Card 1 - -
-
- +
+
- Card 2 - + +
diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap index 99e342b5f1..c2d4be570d 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap +++ b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap @@ -87,7 +87,10 @@ exports[`BpkCardListRow should render cards and accessory correctly for 7 cards -
+
From 1238a1618bd95e907335f68103dd016048bbb8f8 Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Mon, 22 Jul 2024 16:43:42 +0100 Subject: [PATCH 51/57] padding variants for Row when there are different numbers of cards shown --- examples/bpk-component-card-list/examples.js | 6 ++-- examples/bpk-component-card-list/stories.js | 4 +-- .../BpkCardListRow/BpkCardListRow-test.tsx | 19 ++++++++++++- .../BpkCardListRow/BpkCardListRow.module.scss | 5 ++++ .../src/BpkCardListRow/BpkCardListRow.tsx | 5 +++- .../BpkCardListRow-test.tsx.snap | 14 +++++----- .../__snapshots__/BpkCardList-test.tsx.snap | 28 +++++++++---------- 7 files changed, 53 insertions(+), 28 deletions(-) diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.js index ead635c519..0b9963cbba 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.js @@ -157,7 +157,7 @@ const GridToStackWithButtonExample = () => ( /> ); -const RowToRailWith4InitiallyShownCardsExmaple = () => ( +const RowToRailWith5InitiallyShownCardsExample = () => ( ( layoutMobile="rail" title={title} description={description} - initiallyShownCards={4} + initiallyShownCards={5} buttonText="Explore more" /> ); @@ -192,7 +192,7 @@ const RowToStackExample = () => ( export { RowToRailExample, - RowToRailWith4InitiallyShownCardsExmaple, + RowToRailWith5InitiallyShownCardsExample, GridToRailExample, GridToStackWithButtonExample, RowToStackExample, diff --git a/examples/bpk-component-card-list/stories.js b/examples/bpk-component-card-list/stories.js index c86e5c95d3..116c5f512e 100644 --- a/examples/bpk-component-card-list/stories.js +++ b/examples/bpk-component-card-list/stories.js @@ -23,7 +23,7 @@ import { GridToStackExample, GridToStackWithButtonExample, RowToRailExample, - RowToRailWith4InitiallyShownCardsExmaple, + RowToRailWith5InitiallyShownCardsExample, RowToStackExample, } from './examples'; @@ -37,7 +37,7 @@ export const GridToStack = GridToStackExample; export const GridToStackWithButton = GridToStackWithButtonExample; export const RowToRail = RowToRailExample; export const RowToRailWithHeaderButton = - RowToRailWith4InitiallyShownCardsExmaple; + RowToRailWith5InitiallyShownCardsExample; export const RowToStack = RowToStackExample; export const VisualTest = GridToRail; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx index 15ee46bb73..e0f76b5020 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx @@ -80,7 +80,9 @@ describe('BpkCardListRow', () => { expect(container).toMatchSnapshot(); expect( - container.getElementsByClassName('bpk-card-list-row__card'), + container.getElementsByClassName( + 'bpk-card-list-row__card bpk-card-list-row__card-padding', + ), ).toHaveLength(7); expect(getAllByRole('button')).toHaveLength(12); // 7 cards, 2 arrow, 3 indicators expect(container.getElementsByClassName('bpk-button')).toHaveLength(2); @@ -111,6 +113,21 @@ describe('BpkCardListRow', () => { ); }); + it('should not render without padding className when number of cards displayed is > 5', () => { + const { container } = render( + + {mockCards(7)} + , + ); + + expect( + container.getElementsByClassName('bpk-card-list-row__card'), + ).toHaveLength(7); + expect( + container.getElementsByClassName('bpk-card-list-row__card-padding'), + ).toHaveLength(0); + }); + describe('pagination accessory', () => { it('should render cards and accessory correctly for 10 cards with correct aria labels', () => { mockRef(1224, 'once'); diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss index 5853efceea..c5279f75ec 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.scss @@ -39,5 +39,10 @@ padding: tokens.bpk-spacing-base() tokens.bpk-spacing-base() tokens.bpk-spacing-base(); } + + &-padding { + padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-base() + tokens.bpk-spacing-base() tokens.bpk-spacing-sm(); + } } } diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx index 3c4a4afa67..6c794be769 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx @@ -173,7 +173,10 @@ const BpkCardListRow = ({ {children.map((card, index) => (
diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap index c2d4be570d..db6557a67f 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap +++ b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap @@ -10,7 +10,7 @@ exports[`BpkCardListRow should render cards and accessory correctly for 7 cards data-testid="container" >
+
-
- Card 2 -
+
+
-
- Card 2 -
+
+
-
- Card 2 -
+ @@ -209,12 +227,18 @@ exports[`BpkCardList should render correctly with grid, stack and button accesso
-
+ +
-
- Card 2 -
+
+ + @@ -379,12 +415,18 @@ exports[`BpkCardList should render correctly with header, grid, rail and expand
-
+ +
-
- Card 2 -
+
+ @@ -504,12 +552,18 @@ exports[`BpkCardList should render correctly with header, grid, stack and expand
-
+ +
-
- Card 2 -
+
+ @@ -637,17 +697,23 @@ exports[`BpkCardList should render correctly with header, row, rail and no acces class="bpk-card-list-row__card bpk-card-list-row__card-padding" style="width: calc(100% / 3);" > -
- Card 1 -
+
-
- Card 2 -
+
@@ -703,25 +769,34 @@ exports[`BpkCardList should render correctly with header, row, rail and paginati class="bpk-card-list-row__card bpk-card-list-row__card-padding" style="width: calc(100% / 3);" > -
- Card 1 -
+
-
- Card 2 -
+
-
- Card 3 -
+
@@ -777,17 +852,23 @@ exports[`BpkCardList should render correctly with header, row, stack and no acce class="bpk-card-list-row__card bpk-card-list-row__card-padding" style="width: calc(100% / 3);" > -
- Card 1 -
+
-
- Card 2 -
+
@@ -837,17 +918,23 @@ exports[`BpkCardList should render correctly with row, rail and no accessory 1`] class="bpk-card-list-row__card bpk-card-list-row__card-padding" style="width: calc(100% / 3);" > -
- Card 1 -
+
-
- Card 2 -
+
@@ -897,25 +984,34 @@ exports[`BpkCardList should render correctly with row, rail and pagination acces class="bpk-card-list-row__card bpk-card-list-row__card-padding" style="width: calc(100% / 3);" > -
- Card 1 -
+
-
- Card 2 -
+
-
- Card 3 -
+
@@ -965,17 +1061,23 @@ exports[`BpkCardList should render correctly with row, stack and no accessory 1` class="bpk-card-list-row__card bpk-card-list-row__card-padding" style="width: calc(100% / 3);" > -
- Card 1 -
+
-
- Card 2 -
+
From 47c29aaeaca1023187f607fca4a4ba9175352b6a Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Thu, 25 Jul 2024 16:32:28 +0100 Subject: [PATCH 55/57] addressing comments --- .../src/BpkCardList.tsx | 25 +++++----- .../src/BpkCardListGrid/BpkCardListGrid.tsx | 12 ++--- .../BpkCardListRow/BpkCardListRow-test.tsx | 4 +- .../src/BpkCardListRow/BpkCardListRow.tsx | 4 +- .../src/BpkCardListStack/BpkCardListStack.tsx | 10 ++-- .../src/BpkExpand/BpkExpand.tsx | 4 +- .../src/common-types.ts | 48 +++++++++++-------- 7 files changed, 57 insertions(+), 50 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index 1de41e553e..bbbfa9f30f 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -16,7 +16,6 @@ * limitations under the License. */ -import type { ReactElement } from 'react'; import { useState } from 'react'; import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint'; @@ -28,7 +27,7 @@ import BpkCardListGrid from './BpkCardListGrid'; import BpkCardListRail from './BpkCardListRail'; import BpkCardListRow from './BpkCardListRow'; import BpkCardListStack from './BpkCardListStack'; -import { BpkAccessoryTypes, type BpkCardListProps } from './common-types'; +import { ACCESSORY_TYPES, LAYOUTS, type CardListProps } from './common-types'; import STYLES from './BpkCardList.module.scss'; @@ -36,7 +35,7 @@ const getClassName = cssModules(STYLES); const MAX_ITEMS = 12; // MAX should be 12 for Desktop Grid and Mobile Stack const DEFAULT_ITEMS = 3; -const BpkCardList = (props: BpkCardListProps) => { +const BpkCardList = (props: CardListProps) => { const { buttonText, cardList, @@ -81,19 +80,19 @@ const BpkCardList = (props: BpkCardListProps) => { {(isActive) => { if (isActive) { - if (layoutMobile === 'rail') { + if (layoutMobile === LAYOUTS.rail) { return {cardList}; } const { accessory } = props; let modeProps = {}; - if (accessory === BpkAccessoryTypes.Expand) { + if (accessory === ACCESSORY_TYPES.Expand) { modeProps = { accessory, expandText: props.expandText, onButtonClick: props.onButtonClick, }; - } else if (accessory === BpkAccessoryTypes.Button) { + } else if (accessory === ACCESSORY_TYPES.Button) { modeProps = { accessory, buttonText: props.buttonText, @@ -113,15 +112,15 @@ const BpkCardList = (props: BpkCardListProps) => { ); } - if (layoutDesktop === 'row') { - const { accessory } = props; + if (layoutDesktop === LAYOUTS.row) { + const { accessory, ariaLabelIndicator, ariaLabelNext, ariaLabelPrev } = props; return ( {cardList} @@ -130,13 +129,13 @@ const BpkCardList = (props: BpkCardListProps) => { const { accessory } = props; let accessoryProps = {}; - if (accessory === BpkAccessoryTypes.Expand) { + if (accessory === ACCESSORY_TYPES.Expand) { accessoryProps = { accessory, expandText: props.expandText, onButtonClick: props.onButtonClick, }; - } else if (accessory === BpkAccessoryTypes.Button) { + } else if (accessory === ACCESSORY_TYPES.Button) { accessoryProps = { accessory, buttonText: props.buttonText, diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx index a43aca3a88..57161909b7 100644 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.tsx @@ -20,19 +20,19 @@ import { BpkButtonV2 } from '../../../bpk-component-button'; import { cssModules } from '../../../bpk-react-utils'; import BpkExpand from '../BpkExpand'; import { - BpkAccessoryTypes, - type BpkCardListGridStackProps, + ACCESSORY_TYPES, + type CardListGridStackProps, } from '../common-types'; import STYLES from './BpkCardListGrid.module.scss'; const getClassName = cssModules(STYLES); -const BpkCardListGrid = (props: BpkCardListGridStackProps) => { +const BpkCardListGrid = (props: CardListGridStackProps) => { const { accessory, children } = props; let accessoryContent; - if (accessory === BpkAccessoryTypes.Expand) { + if (accessory === ACCESSORY_TYPES.Expand) { const { collapsed, expandText, hideContent, setCollapsed, showContent } = props; accessoryContent = ( @@ -42,10 +42,10 @@ const BpkCardListGrid = (props: BpkCardListGridStackProps) => { collapsed={collapsed} setCollapsed={setCollapsed} > - <>{expandText} + {expandText} ); - } else if (accessory === BpkAccessoryTypes.Button) { + } else if (accessory === ACCESSORY_TYPES.Button) { const { buttonText, onButtonClick } = props; accessoryContent = ( {buttonText} diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx index e0f76b5020..6c752def2f 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx @@ -26,7 +26,7 @@ import mockCards from '../../testMocks'; import BpkCardListRow from './BpkCardListRow'; -import type { BpkAccessoryTypes } from '../common-types'; +import type { ACCESSORY_TYPES } from '../common-types'; jest.mock('../../../bpk-react-utils', () => ({ ...jest.requireActual('../../../bpk-react-utils'), @@ -41,7 +41,7 @@ const mockScroll = jest.fn(); describe('BpkCardListRow', () => { const props = { - accessory: 'pagination' as typeof BpkAccessoryTypes.Pagination, + accessory: 'pagination' as typeof ACCESSORY_TYPES.Pagination, ariaLabelIndicator: 'Go to slide', ariaLabelNext: 'Next', ariaLabelPrev: 'Previous', diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx index 6c794be769..1dde8e169c 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx @@ -29,7 +29,7 @@ import debounce from 'lodash/debounce'; import BpkPageIndicator from '../../../bpk-component-page-indicator'; import { cssModules, isRTL } from '../../../bpk-react-utils'; -import type { BpkAccessoryTypes } from '../common-types'; +import type { ACCESSORY_TYPES } from '../common-types'; import STYLES from './BpkCardListRow.module.scss'; @@ -38,7 +38,7 @@ const DEBOUNCE_TIME = 150; let setVisibleIndexes: (array: number[]) => {}; type BpkCardListRowProps = { - accessory?: typeof BpkAccessoryTypes.Pagination; + accessory?: typeof ACCESSORY_TYPES.Pagination; ariaLabelIndicator: string; ariaLabelNext: string; ariaLabelPrev: string; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx index 5172542717..3dd24861e7 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.tsx @@ -20,19 +20,19 @@ import { BpkButtonV2 } from '../../../bpk-component-button'; import { cssModules } from '../../../bpk-react-utils'; import BpkExpand from '../BpkExpand'; import { - BpkAccessoryTypes, - type BpkCardListGridStackProps, + ACCESSORY_TYPES, + type CardListGridStackProps, } from '../common-types'; import STYLES from './BpkCardListStack.module.scss'; const getClassName = cssModules(STYLES); -const BpkCardListStack = (props: BpkCardListGridStackProps) => { +const BpkCardListStack = (props: CardListGridStackProps) => { const { accessory, children } = props; let accessoryContent; - if (accessory === BpkAccessoryTypes.Expand) { + if (accessory === ACCESSORY_TYPES.Expand) { const { collapsed, expandText, hideContent, setCollapsed, showContent } = props; accessoryContent = ( @@ -45,7 +45,7 @@ const BpkCardListStack = (props: BpkCardListGridStackProps) => { <>{expandText} ); - } else if (accessory === BpkAccessoryTypes.Button) { + } else if (accessory === ACCESSORY_TYPES.Button) { const { buttonText, onButtonClick } = props; accessoryContent = ( {buttonText} diff --git a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx index fb31241f8e..0a80095473 100644 --- a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx +++ b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand.tsx @@ -23,7 +23,7 @@ import { import ChevronDown from '../../../bpk-component-icon/sm/chevron-down'; import ChevronUp from '../../../bpk-component-icon/sm/chevron-up'; -import type { BpkExpandProps } from '../common-types'; +import type { ExpandProps } from '../common-types'; const AlignedChevronDownIcon = withButtonAlignment(withRtlSupport(ChevronDown)); const AlignedChevronUpIcon = withButtonAlignment(withRtlSupport(ChevronUp)); @@ -34,7 +34,7 @@ const BpkExpand = ({ hideContent, setCollapsed, showContent, -}: BpkExpandProps) => { +}: ExpandProps) => { const buttonIcon = collapsed ? ( ) : ( diff --git a/packages/bpk-component-card-list/src/common-types.ts b/packages/bpk-component-card-list/src/common-types.ts index de2b25d5fa..a142cf1c57 100644 --- a/packages/bpk-component-card-list/src/common-types.ts +++ b/packages/bpk-component-card-list/src/common-types.ts @@ -18,16 +18,24 @@ import type { Dispatch, ReactElement, SetStateAction } from 'react'; -export type layoutDesktopProps = 'row' | 'grid'; -export type layoutMobileProps = 'rail' | 'stack'; +export const LAYOUTS = { + row: 'row', + grid: 'grid', + rail: 'rail', + stack: 'stack' +} as const; + + +export type layoutDesktopProps = typeof LAYOUTS.row | typeof LAYOUTS.grid; +export type layoutMobileProps = typeof LAYOUTS.stack | typeof LAYOUTS.rail; -export const BpkAccessoryTypes = { +export const ACCESSORY_TYPES = { Expand: 'expand', Button: 'button', Pagination: 'pagination', } as const; -type BpkCardListBaseProps = { +type CardListBaseProps = { title: string; description?: string; cardList: ReactElement[]; @@ -37,25 +45,25 @@ type BpkCardListBaseProps = { }; type GridProps = { - layoutDesktop: 'grid'; - accessory?: typeof BpkAccessoryTypes.Expand | typeof BpkAccessoryTypes.Button; + layoutDesktop: typeof LAYOUTS.grid; + accessory?: typeof ACCESSORY_TYPES.Expand | typeof ACCESSORY_TYPES.Button; }; type RowProps = { - layoutDesktop: 'row'; - accessory?: typeof BpkAccessoryTypes.Pagination; + layoutDesktop: typeof LAYOUTS.row; + accessory?: typeof ACCESSORY_TYPES.Pagination; ariaLabelIndicator: string; ariaLabelNext: string; ariaLabelPrev: string; }; type StackProps = { - layoutMobile: 'stack'; - accessory?: typeof BpkAccessoryTypes.Expand | typeof BpkAccessoryTypes.Button; + layoutMobile: typeof LAYOUTS.stack; + accessory?: typeof ACCESSORY_TYPES.Expand | typeof ACCESSORY_TYPES.Button; }; type RailProps = { - layoutMobile: 'rail'; + layoutMobile: typeof LAYOUTS.rail; }; type ButtonProps = { @@ -72,40 +80,40 @@ type NoAccessory = { }; type ButtonAccessory = { - accessory: typeof BpkAccessoryTypes.Button; + accessory: typeof ACCESSORY_TYPES.Button; } & ButtonProps; type PaginationAccessory = { - accessory: typeof BpkAccessoryTypes.Pagination; + accessory: typeof ACCESSORY_TYPES.Pagination; }; type ExpandAccessory = { - accessory: typeof BpkAccessoryTypes.Expand; + accessory: typeof ACCESSORY_TYPES.Expand; expandText: string; onButtonClick: () => void; }; -export type BpkCardListProps = BpkCardListBaseProps & +export type CardListProps = CardListBaseProps & (GridProps | RowProps) & (StackProps | RailProps) & (HeaderButtonProps | NoHeaderButton) & (NoAccessory | ButtonAccessory | PaginationAccessory | ExpandAccessory); -type BpkCardListGridStackBaseProps = { +type CardListGridStackBaseProps = { children: ReactElement[]; }; -type BpkCardListGridStackExpandModeProps = { +type CardListGridStackExpandModeProps = { showContent: () => void; hideContent: () => void; collapsed: boolean; setCollapsed: Dispatch>; } & ExpandAccessory; -export type BpkCardListGridStackProps = BpkCardListGridStackBaseProps & - (BpkCardListGridStackExpandModeProps | ButtonAccessory | NoAccessory); +export type CardListGridStackProps = CardListGridStackBaseProps & + (CardListGridStackExpandModeProps | ButtonAccessory | NoAccessory); -export type BpkExpandProps = { +export type ExpandProps = { children: string | ReactElement; collapsed: boolean; hideContent: () => void; From 5e83e16e5b641830d4c9efca6006527e3ac4b6b9 Mon Sep 17 00:00:00 2001 From: Noel Rajan Date: Thu, 25 Jul 2024 16:56:12 +0100 Subject: [PATCH 56/57] remove autogenerated files --- .../src/BpkCardList.d.ts | 22 --------------- .../src/BpkCardList.module.css | 18 ------------- .../BpkCardListGrid.module.css | 18 ------------- .../BpkCardListRail.module.css | 18 ------------- .../BpkCardListRow/BpkCardListRow.module.css | 18 ------------- .../BpkCardListStack.module.css | 18 ------------- .../index.d.ts | 21 --------------- .../bpk-component-page-indicator/index.d.ts | 27 ------------------- 8 files changed, 160 deletions(-) delete mode 100644 packages/bpk-component-card-list/src/BpkCardList.d.ts delete mode 100644 packages/bpk-component-card-list/src/BpkCardList.module.css delete mode 100644 packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css delete mode 100644 packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css delete mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css delete mode 100644 packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css delete mode 100644 packages/bpk-component-mobile-scroll-container/index.d.ts delete mode 100644 packages/bpk-component-page-indicator/index.d.ts diff --git a/packages/bpk-component-card-list/src/BpkCardList.d.ts b/packages/bpk-component-card-list/src/BpkCardList.d.ts deleted file mode 100644 index 699593d351..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardList.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -/* - * 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 './BpkCardList'; -import { BpkCardListProps } from "./common-types"; -export { type BpkCardListProps }; -export default BpkCardList; diff --git a/packages/bpk-component-card-list/src/BpkCardList.module.css b/packages/bpk-component-card-list/src/BpkCardList.module.css deleted file mode 100644 index 606642976e..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardList.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * 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. - */ -.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list--row{display:flex;width:100%;flex-direction:row;gap:1.5rem}.bpk-card-list--card-list--stack{flex-direction:column} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css b/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css deleted file mode 100644 index 77ed5516c2..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/BpkCardListGrid.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * 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. - */ -.bpk-card-list-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(17.5625rem, 1fr));gap:1.5rem} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css deleted file mode 100644 index 94d6b94721..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * 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. - */ -.bpk-card-list--rail_container{display:flex;max-width:90%;padding:1rem;gap:1rem}.bpk-card-list--rail_scrollContainer{margin-inline:-1rem}.bpk-card-list--rail_card{display:flex;min-width:100%;justify-content:center;align-items:center;text-wrap:wrap}.bpk-card-list--rail_card>*{width:100%}.bpk-card-list--rail_card:last-child{padding-right:1rem} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css deleted file mode 100644 index f754908b15..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * 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. - */ -.bpk-card-list-row{position:relative}.bpk-card-list-row .bpk-card-list-row__cards{display:flex;overflow:hidden;margin-inline:-0.75rem}.bpk-card-list-row .bpk-card-list-row__card{padding:.25rem 1.5rem 1.5rem .25rem;flex-shrink:0;text-wrap:wrap}@media(max-width: 32rem){.bpk-card-list-row .bpk-card-list-row__card{display:none;padding:1rem 1rem 1rem}}.bpk-card-list-row .bpk-card-list-row__card-padding{padding:.25rem 1rem 1rem .25rem} \ No newline at end of file diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css deleted file mode 100644 index 93553a3900..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * 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. - */ -.bpk-card-list-stack{display:flex;flex-direction:column;gap:1rem} \ No newline at end of file diff --git a/packages/bpk-component-mobile-scroll-container/index.d.ts b/packages/bpk-component-mobile-scroll-container/index.d.ts deleted file mode 100644 index ff15cb9275..0000000000 --- a/packages/bpk-component-mobile-scroll-container/index.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * 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 BpkMobileScrollContainer from './src/BpkMobileScrollContainer'; - -export default BpkMobileScrollContainer; diff --git a/packages/bpk-component-page-indicator/index.d.ts b/packages/bpk-component-page-indicator/index.d.ts deleted file mode 100644 index f2bb49298c..0000000000 --- a/packages/bpk-component-page-indicator/index.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * 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 BpkPageIndicator, { - type Props as BpkPageIndicatorProps, - VARIANT, -} from './src/BpkPageIndicator'; -import { DIRECTIONS } from './src/NavButton'; - -export type { BpkPageIndicatorProps }; -export { DIRECTIONS, VARIANT }; -export default BpkPageIndicator; From a35d91e82fb8a76156511385b8008a1797655e95 Mon Sep 17 00:00:00 2001 From: YJ Lee Date: Tue, 6 Aug 2024 15:29:29 +0100 Subject: [PATCH 57/57] address comments --- .../examples.module.css | 18 - .../examples.module.scss | 47 +- .../{examples.js => examples.tsx} | 167 +-- .../src/BpkCardList-test.tsx | 208 +++- .../src/BpkCardList.tsx | 12 +- .../BpkCardListGrid/BpkCardListGrid-test.tsx | 22 +- .../BpkCardListGrid-test.tsx.snap | 46 - .../BpkCardListRail/BpkCardListRail-test.tsx | 4 +- .../src/BpkCardListRail/BpkCardListRail.tsx | 1 + .../BpkCardListRail-test.tsx.snap | 57 - .../BpkCardListRow/BpkCardListRow-test.tsx | 1 - .../src/BpkCardListRow/BpkCardListRow.tsx | 1 + .../BpkCardListRow-test.tsx.snap | 172 --- .../BpkCardListStack-test.tsx | 24 +- .../BpkCardListStack-test.tsx.snap | 46 - .../src/BpkExpand/BpkExpand-test.tsx | 18 +- .../__snapshots__/BpkExpand-test.tsx.snap | 85 -- .../__snapshots__/BpkCardList-test.tsx.snap | 1087 ----------------- .../src/BpkCarousel.tsx | 1 + .../src/BpkMultiSelectChipGroup.tsx | 1 + 20 files changed, 344 insertions(+), 1674 deletions(-) delete mode 100644 examples/bpk-component-card-list/examples.module.css rename examples/bpk-component-card-list/{examples.js => examples.tsx} (57%) delete mode 100644 packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap delete mode 100644 packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap delete mode 100644 packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap delete mode 100644 packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap delete mode 100644 packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap delete mode 100644 packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap diff --git a/examples/bpk-component-card-list/examples.module.css b/examples/bpk-component-card-list/examples.module.css deleted file mode 100644 index 32a6409e3c..0000000000 --- a/examples/bpk-component-card-list/examples.module.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * 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-card-list-examples__header{display:flex;height:2.5rem;padding:.5rem;justify-content:space-between;align-items:center;color:#fff}.bpk-card-list-examples__wrapper{width:20.5rem}.bpk-destinationCard .bpk-destinationCard-image{border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden}.bpk-destinationCard .bpk-bottom{display:flex;padding:1.5rem;justify-content:space-between}.bpk-destinationCard .bpk-column{display:flex;flex-direction:column}.bpk-internalLinkCard{display:flex;overflow:hidden}.bpk-internalLinkCard .bpk-image{flex:0 0 5.5rem}.bpk-internalLinkCard .bpk-info{display:flex;margin:auto 1.5rem;flex-direction:column}.bpk-internalLinkCard .bpk-verticalLinks_bullet{margin:0 .25rem;color:#0062e3} \ No newline at end of file diff --git a/examples/bpk-component-card-list/examples.module.scss b/examples/bpk-component-card-list/examples.module.scss index 2dd29c9d3a..4bf7efaf05 100644 --- a/examples/bpk-component-card-list/examples.module.scss +++ b/examples/bpk-component-card-list/examples.module.scss @@ -16,33 +16,18 @@ * limitations under the License. */ -@import '../../packages/bpk-mixins/index.scss'; +@use '../../packages/unstable__bpk-mixins/tokens'; -.bpk-card-list-examples { - &__header { - display: flex; - height: bpk-spacing-xxl(); - padding: bpk-spacing-md(); - justify-content: space-between; - align-items: center; - color: $bpk-text-on-dark-day; - } - - &__wrapper { - width: bpk-spacing-md() * 41; - } -} - -.bpk-destinationCard { - .bpk-destinationCard-image { - border-top-left-radius: 0.75rem; - border-top-right-radius: 0.75rem; +.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: bpk-spacing-lg(); + padding: tokens.bpk-spacing-lg(); justify-content: space-between; } @@ -52,24 +37,30 @@ } } -.bpk-internalLinkCard { +.bpkdocs-consumer-level__internal-card { display: flex; + flex-direction: row; + align-items: center; overflow: hidden; - .bpk-image { - flex: 0 0 5.5rem; + .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 { - display: flex; - margin: auto bpk-spacing-lg(); + margin: auto tokens.bpk-spacing-lg(); flex-direction: column; } .bpk-verticalLinks { &_bullet { - margin: 0 bpk-spacing-sm(); - color: $bpk-core-accent-day; + margin: 0 tokens.bpk-spacing-sm(); + color: tokens.$bpk-core-accent-day; } } } diff --git a/examples/bpk-component-card-list/examples.js b/examples/bpk-component-card-list/examples.tsx similarity index 57% rename from examples/bpk-component-card-list/examples.js rename to examples/bpk-component-card-list/examples.tsx index 0b9963cbba..9fb9f409c7 100644 --- a/examples/bpk-component-card-list/examples.js +++ b/examples/bpk-component-card-list/examples.tsx @@ -22,18 +22,15 @@ 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'; +// @ts-ignore import BpkLink from '../../packages/bpk-component-link'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import STYLES from './examples.module.scss'; -const DealsCard = (i) => ( +const DealsCard = (i: number) => ( null}> - + {`Let's explore Deal ${i}`} @@ -42,57 +39,74 @@ const DealsCard = (i) => ( ); -const DestinationCard = (i) => ( - - - -
-
- - {`Destination Name ${i}`} - - Country -
- -
- Direct - £100 +const DestinationCard = (i: number) => ( + +
+ + +
+
+ + {`Destination Name ${i}`} + + Country +
+ +
+ Direct + £100 +
); -const InternalLinkCard = (i) => ( - - +const InternalLinkCard = (i: number) => ( + +
+
+ +
-
- {`Amsterdam Schiphol ${i}`} - -
- Flights - - {'\u2022'} - - Hotels - - {'\u2022'} - - Car Hire +
+ {`Amsterdam Schiphol ${i}`} + +
+ Flights + + {'\u2022'} + + Hotels + + {'\u2022'} + + Car Hire +
); -const cards = (cardType) => [...Array(14).keys()].map((i) => cardType(i)); + +type ExampleCard = + | typeof InternalLinkCard + | typeof DealsCard + | typeof DestinationCard; +const cards = (cardType: ExampleCard) => { + const cardList = []; + for (let i = 0; i < 14; i += 1) { + cardList.push(cardType(i)); + } + return cardList; +}; const title = 'Must-visit spots'; const description = @@ -109,14 +123,14 @@ const GridToRailExample = () => { return ( ); }; @@ -132,61 +146,76 @@ const GridToStackExample = () => { return ( ); }; const GridToStackWithButtonExample = () => ( {}} title={title} - description={description} - buttonText="Explore More" /> ); const RowToRailWith5InitiallyShownCardsExample = () => ( ); const RowToRailExample = () => ( ); + +// TODO: this use case is currently not available as proposed due the sturucture of the props +// Row layoutDesktop variant requires accesory of "pagination" +// Stack layoutMobile variant requires accesory of "button" or "expand" +// The component only supports one accessory prop value so cannot cross support 2 different types of accesories const RowToStackExample = () => ( ); diff --git a/packages/bpk-component-card-list/src/BpkCardList-test.tsx b/packages/bpk-component-card-list/src/BpkCardList-test.tsx index 5e7016a34d..322f206bd3 100644 --- a/packages/bpk-component-card-list/src/BpkCardList-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList-test.tsx @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import mockCards from '../testMocks'; @@ -23,7 +23,7 @@ import BpkCardList from './BpkCardList'; describe('BpkCardList', () => { it('should render correctly with grid, stack and no accessory', () => { - const { asFragment } = render( + render( { layoutMobile="stack" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-grid'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); }); it('should render correctly with grid, stack and expand accessory', () => { - const { asFragment } = render( + render( { onButtonClick={jest.fn()} />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.getByTestId('button')).toHaveTextContent('Expand'); + expect(screen.getByTestId('button')).toHaveClass( + 'bpk-button bpk-button--link', + ); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-grid'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); }); it('should render correctly with grid, stack and button accessory', () => { - const { asFragment } = render( + render( { href="https://www.skyscanner.net" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryAllByRole('button')[0]).toHaveTextContent('Button'); + expect(screen.queryAllByRole('button')[0]).toHaveClass( + 'bpk-button bpk-button--primary', + ); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); }); it('should render correctly with grid, rail and no accessory', () => { - const { asFragment } = render( + render( { layoutMobile="rail" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-grid'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); }); it('should render correctly with grid, rail and expand accessory', () => { - const { asFragment } = render( + render( { onButtonClick={jest.fn()} />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).toHaveTextContent('Expand'); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-grid'); }); it('should render correctly with grid, rail and button accessory', () => { - const { asFragment } = render( + render( { href="https://www.skyscanner.net" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryAllByRole('button')[0]).toHaveTextContent('Button'); + expect(screen.queryAllByRole('button')[0]).toHaveClass( + 'bpk-button bpk-button--primary', + ); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-grid'); }); it('should render correctly with row, stack and no accessory', () => { - const { asFragment } = render( + render( { ariaLabelPrev="Previous" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-row'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); }); it('should render correctly with row, rail and pagination accessory', () => { - const { asFragment } = render( + render( { ariaLabelPrev="Previous" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-row'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(6); + expect( + screen.getByRole('button', { name: 'Previous' }), + ).toBeInTheDocument(); + expect( + screen.getByRole('button', { name: 'Go to page 1' }), + ).toBeInTheDocument(); + expect( + screen.getByRole('button', { name: 'Go to page 2' }), + ).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument(); }); it('should render correctly with row, rail and no accessory', () => { - const { asFragment } = render( + render( { ariaLabelPrev="Previous" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-row'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); + expect(screen.queryAllByRole('button', { name: 'Previous' })).toHaveLength( + 0, + ); }); it('should render correctly with header, grid, stack and expand accessory', () => { - const { asFragment } = render( + render( { expandText="Expand" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).toHaveTextContent('Expand'); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-grid'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); }); it('should render correctly with header, grid, stack and no accessory', () => { - const { asFragment } = render( + render( { layoutMobile="stack" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-grid'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); }); it('should render correctly with header, grid, rail and expand accessory', () => { - const { asFragment } = render( + render( { expandText="Expand" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).toHaveTextContent('Expand'); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-grid'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); }); it('should render correctly with header, grid, rail and no accessory', () => { - const { asFragment } = render( + render( { layoutMobile="rail" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-grid'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); }); it('should render correctly with header, row, stack and no accessory', () => { - const { asFragment } = render( + render( { ariaLabelPrev="Previous" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-row'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(6); + expect(screen.queryAllByRole('button', { name: 'Previous' })).toHaveLength( + 0, + ); }); it('should render correctly with header, row, rail and pagination accessory', () => { - const { asFragment } = render( + render( { ariaLabelPrev="Previous" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-row'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(6); + expect(screen.queryAllByRole('button', { name: 'Previous' })).toHaveLength( + 0, + ); }); it('should render correctly with header, row, rail and no accessory', () => { - const { asFragment } = render( + render( { ariaLabelPrev="Previous" />, ); - expect(asFragment()).toMatchSnapshot(); + + expect(screen.getByText('Title')).toBeInTheDocument(); + expect(screen.getByText('Description')).toBeInTheDocument(); + expect(screen.queryByTestId('button')).not.toBeInTheDocument(); + expect( + screen.getByTestId('bpk-card-list--card-list').firstChild, + ).toHaveClass('bpk-card-list-row'); + expect(screen.getAllByRole('button', { name: /Card \d/ })).toHaveLength(2); + expect(screen.queryAllByRole('button', { name: 'Previous' })).toHaveLength( + 0, + ); }); }); diff --git a/packages/bpk-component-card-list/src/BpkCardList.tsx b/packages/bpk-component-card-list/src/BpkCardList.tsx index bbbfa9f30f..c14bb1bd3b 100644 --- a/packages/bpk-component-card-list/src/BpkCardList.tsx +++ b/packages/bpk-component-card-list/src/BpkCardList.tsx @@ -76,7 +76,10 @@ const BpkCardList = (props: CardListProps) => { button={button} /> -
+
{(isActive) => { if (isActive) { @@ -113,7 +116,12 @@ const BpkCardList = (props: CardListProps) => { } if (layoutDesktop === LAYOUTS.row) { - const { accessory, ariaLabelIndicator, ariaLabelNext, ariaLabelPrev } = props; + const { + accessory, + ariaLabelIndicator, + ariaLabelNext, + ariaLabelPrev, + } = props; return ( { it('should show expand accessory', () => { const cards = Array(12).map(() => test); - const { asFragment } = render( + render( { , ); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByRole('button')).toHaveClass( + 'bpk-button bpk-button--link', + ); }); - it('should show button accessory', () => { + it('should show button accessory and handle onButtonClick', async () => { const cards = Array(12).map(() => test); - const { asFragment } = render( + const onButtonClick = jest.fn(); + render( {cards} , ); + await userEvent.click(screen.getByRole('button')); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByRole('button')).toHaveClass( + 'bpk-button bpk-button--primary', + ); + expect(onButtonClick).toHaveBeenCalled(); }); }); diff --git a/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap deleted file mode 100644 index 97b7bb4cdf..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListGrid/__snapshots__/BpkCardListGrid-test.tsx.snap +++ /dev/null @@ -1,46 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkCardListGrid should show button accessory 1`] = ` - -
- - -`; - -exports[`BpkCardListGrid should show expand accessory 1`] = ` - -
- - -`; diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx index 952f7f4455..90e1bfbbb9 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail-test.tsx @@ -27,7 +27,9 @@ describe('BpkCardListRail', () => { {mockCards(3)}, ); - expect(container).toMatchSnapshot(); + expect(container.firstChild).toHaveClass( + 'bpk-card-list--rail_scrollContainer', + ); expect( container.getElementsByClassName('bpk-card-list--rail_card'), ).toHaveLength(3); diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx index def918aa11..e5ab591820 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRail/BpkCardListRail.tsx @@ -18,6 +18,7 @@ */ import type { ReactElement } from 'react'; +// @ts-ignore import BpkMobileScrollContainer from '../../../bpk-component-mobile-scroll-container'; import { cssModules } from '../../../bpk-react-utils'; diff --git a/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap deleted file mode 100644 index 309912f4b5..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListRail/__snapshots__/BpkCardListRail-test.tsx.snap +++ /dev/null @@ -1,57 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkCardListRail should render cards correctly in the MobileScrollContainer 1`] = ` -
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
-`; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx index 6c752def2f..91ace3df1d 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow-test.tsx @@ -78,7 +78,6 @@ describe('BpkCardListRow', () => { {mockCards(7)}, ); - expect(container).toMatchSnapshot(); expect( container.getElementsByClassName( 'bpk-card-list-row__card bpk-card-list-row__card-padding', diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx index 1dde8e169c..c959c9adbb 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListRow/BpkCardListRow.tsx @@ -26,6 +26,7 @@ import { import debounce from 'lodash/debounce'; +// @ts-ignore import BpkPageIndicator from '../../../bpk-component-page-indicator'; import { cssModules, isRTL } from '../../../bpk-react-utils'; diff --git a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap deleted file mode 100644 index db6557a67f..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListRow/__snapshots__/BpkCardListRow-test.tsx.snap +++ /dev/null @@ -1,172 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkCardListRow should render cards and accessory correctly for 7 cards 1`] = ` -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
-`; diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx index 6e79331287..dc088c37a4 100644 --- a/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx +++ b/packages/bpk-component-card-list/src/BpkCardListStack/BpkCardListStack-test.tsx @@ -15,7 +15,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import BpkCard from '../../../bpk-component-card'; @@ -24,7 +25,7 @@ import BpkCardListStack from './BpkCardListStack'; describe('BpkCardListStack', () => { it('should show expand accessory', () => { const cards = Array(12).map(() => test); - const { asFragment } = render( + render( { , ); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByRole('button')).toHaveClass( + 'bpk-button bpk-button--link', + ); }); - it('should show button accessory', () => { + it('should show button accessory', async () => { const cards = Array(12).map(() => test); - const { asFragment } = render( + const onButtonClick = jest.fn(); + render( {cards} , ); + await userEvent.click(screen.getByRole('button')); - expect(asFragment()).toMatchSnapshot(); - }) + expect(screen.getByRole('button')).toHaveClass( + 'bpk-button bpk-button--primary', + ); + expect(onButtonClick).toHaveBeenCalled(); + }); }); diff --git a/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap b/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap deleted file mode 100644 index 29be608b30..0000000000 --- a/packages/bpk-component-card-list/src/BpkCardListStack/__snapshots__/BpkCardListStack-test.tsx.snap +++ /dev/null @@ -1,46 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkCardListStack should show button accessory 1`] = ` - -
- - -`; - -exports[`BpkCardListStack should show expand accessory 1`] = ` - -
- - -`; diff --git a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx index 250eeb0b3f..ecab51b17b 100644 --- a/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx +++ b/packages/bpk-component-card-list/src/BpkExpand/BpkExpand-test.tsx @@ -15,14 +15,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import BpkExpand from './BpkExpand'; describe('BpkExpand', () => { it('should render correctly', () => { - const { asFragment } = render( + render( { , ); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByRole('button')).toHaveAttribute('type', 'button'); }); it('should call showContent function when collapsed and button is clicked', async () => { @@ -41,7 +41,7 @@ describe('BpkExpand', () => { const setCollapsed = jest.fn(); const showContent = jest.fn(); - const { asFragment, getByTestId } = render( + render( { , ); - expect(asFragment()).toMatchSnapshot(); - - await userEvent.click(getByTestId('button')); + await userEvent.click(screen.getByTestId('button')); expect(showContent).toHaveBeenCalled(); expect(setCollapsed).toHaveBeenCalledWith(false); @@ -65,7 +63,7 @@ describe('BpkExpand', () => { const setCollapsed = jest.fn(); const showContent = jest.fn(); - const { asFragment, getByTestId } = render( + render( { , ); - expect(asFragment()).toMatchSnapshot(); - - await userEvent.click(getByTestId('button')); + await userEvent.click(screen.getByTestId('button')); expect(hideContent).toHaveBeenCalled(); expect(setCollapsed).toHaveBeenCalledWith(true); diff --git a/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap b/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap deleted file mode 100644 index aba98943eb..0000000000 --- a/packages/bpk-component-card-list/src/BpkExpand/__snapshots__/BpkExpand-test.tsx.snap +++ /dev/null @@ -1,85 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkExpand should call hideContent function when not collapsed and button is clicked 1`] = ` - - - -`; - -exports[`BpkExpand should call showContent function when collapsed and button is clicked 1`] = ` - - - -`; - -exports[`BpkExpand should render correctly 1`] = ` - - - -`; diff --git a/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap b/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap deleted file mode 100644 index c5532bdeab..0000000000 --- a/packages/bpk-component-card-list/src/__snapshots__/BpkCardList-test.tsx.snap +++ /dev/null @@ -1,1087 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkCardList should render correctly with grid, rail and button accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
- -
-
-
- - -
- -
-
- -`; - -exports[`BpkCardList should render correctly with grid, rail and expand accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
-
-
-
- - -
- -
-
- -`; - -exports[`BpkCardList should render correctly with grid, rail and no accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
-
-
-
- - -
-
-
- -`; - -exports[`BpkCardList should render correctly with grid, stack and button accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
- -
-
-
- - -
- -
-
- -`; - -exports[`BpkCardList should render correctly with grid, stack and expand accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
-
-
-
- - -
- -
-
- -`; - -exports[`BpkCardList should render correctly with grid, stack and no accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
-
-
-
- - -
-
-
- -`; - -exports[`BpkCardList should render correctly with header, grid, rail and expand accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
- -
-
-
- - -
- -
-
- -`; - -exports[`BpkCardList should render correctly with header, grid, rail and no accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
- -
-
-
- - -
-
-
- -`; - -exports[`BpkCardList should render correctly with header, grid, stack and expand accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
- -
-
-
- - -
- -
-
- -`; - -exports[`BpkCardList should render correctly with header, grid, stack and no accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
- -
-
-
- - -
-
-
- -`; - -exports[`BpkCardList should render correctly with header, row, rail and no accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
- -
-
-
-
-
- -
-
- -
-
-
-
-
- -`; - -exports[`BpkCardList should render correctly with header, row, rail and pagination accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
- -
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
- -`; - -exports[`BpkCardList should render correctly with header, row, stack and no accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
- -
-
-
-
-
- -
-
- -
-
-
-
-
- -`; - -exports[`BpkCardList should render correctly with row, rail and no accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
-
-
-
-
-
- -
-
- -
-
-
-
-
- -`; - -exports[`BpkCardList should render correctly with row, rail and pagination accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
- -`; - -exports[`BpkCardList should render correctly with row, stack and no accessory 1`] = ` - -
-
-
-

- Title -

- - - Description - - -
-
-
-
-
-
- -
-
- -
-
-
-
-
- -`; diff --git a/packages/bpk-component-carousel/src/BpkCarousel.tsx b/packages/bpk-component-carousel/src/BpkCarousel.tsx index 9d7b6378ea..53de929a8a 100644 --- a/packages/bpk-component-carousel/src/BpkCarousel.tsx +++ b/packages/bpk-component-carousel/src/BpkCarousel.tsx @@ -18,6 +18,7 @@ import { useRef, useState } from 'react'; +// @ts-ignore import BpkPageIndicator, { VARIANT } from '../../bpk-component-page-indicator'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-chip-group/src/BpkMultiSelectChipGroup.tsx b/packages/bpk-component-chip-group/src/BpkMultiSelectChipGroup.tsx index 70837707d5..9d640f3ac6 100644 --- a/packages/bpk-component-chip-group/src/BpkMultiSelectChipGroup.tsx +++ b/packages/bpk-component-chip-group/src/BpkMultiSelectChipGroup.tsx @@ -21,6 +21,7 @@ import { useRef } from 'react'; import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint'; import BpkSelectableChip, { BpkDismissibleChip, BpkIconChip, BpkDropdownChip, CHIP_TYPES } from '../../bpk-component-chip'; import FilterIconSm from '../../bpk-component-icon/sm/filter'; +// @ts-ignore import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText'; import { cssModules } from '../../bpk-react-utils';