Skip to content

Commit

Permalink
address comments
Browse files Browse the repository at this point in the history
  • Loading branch information
YJ Lee committed Aug 6, 2024
1 parent 5e83e16 commit a35d91e
Show file tree
Hide file tree
Showing 20 changed files with 344 additions and 1,674 deletions.
18 changes: 0 additions & 18 deletions examples/bpk-component-card-list/examples.module.css
View file

This file was deleted.

47 changes: 19 additions & 28 deletions examples/bpk-component-card-list/examples.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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;
}
}
}
167 changes: 98 additions & 69 deletions examples/bpk-component-card-list/examples.js → ...ples/bpk-component-card-list/examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
<BpkCard atomic={false} onClick={() => null}>
<BpkText
tagName="h3"
textStyle={TEXT_STYLES.heading5}
style={{ marginBottom: '8px' }}
>
<BpkText tagName="h3" textStyle={TEXT_STYLES.heading5}>
{`Let's explore Deal ${i}`}
</BpkText>
<BpkText tagName="p">
Expand All @@ -42,57 +39,74 @@ const DealsCard = (i) => (
</BpkText>
</BpkCard>
);
const DestinationCard = (i) => (
<BpkCard href="/" className={STYLES['bpk-destinationCard']} padded={false}>
<BpkImage
aspectRatio={3000 / 1800}
className={STYLES['bpk-destinationCard-image']}
src="https://content.skyscnr.com/7adba3a46af3ca29695f96937d19fcf1/GettyImages-149127892.jpg?crop=960px:640px&quality=100"
/>

<div className={STYLES['bpk-bottom']}>
<div className={STYLES['bpk-column']}>
<BpkText textStyle={TEXT_STYLES.heading4}>
{`Destination Name ${i}`}
</BpkText>
<BpkText>Country</BpkText>
</div>

<div className={STYLES['bpk-column']}>
<BpkText>Direct</BpkText>
<BpkText textStyle={TEXT_STYLES.heading4}>£100</BpkText>
const DestinationCard = (i: number) => (
<BpkCard href="/" padded={false}>
<div className={STYLES['bpkdocs-consumer-level']}>
<BpkImage
aspectRatio={3000 / 1800}
altText="card image"
src="https://content.skyscnr.com/7adba3a46af3ca29695f96937d19fcf1/GettyImages-149127892.jpg?crop=960px:640px&quality=100"
/>

<div className={STYLES['bpk-bottom']}>
<div className={STYLES['bpk-column']}>
<BpkText textStyle={TEXT_STYLES.heading4}>
{`Destination Name ${i}`}
</BpkText>
<BpkText>Country</BpkText>
</div>

<div className={STYLES['bpk-column']}>
<BpkText>Direct</BpkText>
<BpkText textStyle={TEXT_STYLES.heading4}>£100</BpkText>
</div>
</div>
</div>
</BpkCard>
);
const InternalLinkCard = (i) => (
<BpkCard href="/" className={STYLES['bpk-internalLinkCard']} padded={false}>
<BpkImage
className={STYLES['bpk-image']}
aspectRatio={1000 / 1000}
src="https://content.skyscnr.com/fa0912c6ed6f75f0607dfc080359a021/amsterdam.jpg?crop=100px:100px&quality=90"
/>
const InternalLinkCard = (i: number) => (
<BpkCard href="/" padded={false}>
<div className={STYLES['bpkdocs-consumer-level__internal-card']}>
<div className={STYLES['bpkdocs-internal-link-img']}>
<BpkImage
aspectRatio={1}
altText="card image"
src="https://content.skyscnr.com/fa0912c6ed6f75f0607dfc080359a021/amsterdam.jpg?crop=100px:100px&quality=90"
/>
</div>

<div className={STYLES['bpk-info']}>
<BpkText
textStyle={TEXT_STYLES.heading5}
>{`Amsterdam Schiphol ${i}`}</BpkText>

<div className={STYLES['bpk-verticalLinks']}>
<BpkLink href="#">Flights</BpkLink>
<span aria-hidden className={STYLES['bpk-verticalLinks_bullet']}>
{'\u2022'}
</span>
<BpkLink href="#">Hotels</BpkLink>
<span aria-hidden className={STYLES['bpk-verticalLinks_bullet']}>
{'\u2022'}
</span>
<BpkLink href="#">Car Hire</BpkLink>
<div className={STYLES['bpk-info']}>
<BpkText
textStyle={TEXT_STYLES.heading5}
>{`Amsterdam Schiphol ${i}`}</BpkText>

<div className={STYLES['bpk-verticalLinks']}>
<BpkLink href="#">Flights</BpkLink>
<span aria-hidden className={STYLES['bpk-verticalLinks_bullet']}>
{'\u2022'}
</span>
<BpkLink href="#">Hotels</BpkLink>
<span aria-hidden className={STYLES['bpk-verticalLinks_bullet']}>
{'\u2022'}
</span>
<BpkLink href="#">Car Hire</BpkLink>
</div>
</div>
</div>
</BpkCard>
);
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 =
Expand All @@ -109,14 +123,14 @@ const GridToRailExample = () => {

return (
<BpkCardList
cardList={cards(InternalLinkCard)}
accessory="expand"
cardList={cards(InternalLinkCard)}
description={description}
expandText={collapsed ? expandText : collapseText}
layoutDesktop="grid"
layoutMobile="rail"
title={title}
onButtonClick={onButtonClick}
description={description}
expandText={collapsed ? expandText : collapseText}
title={title}
/>
);
};
Expand All @@ -132,61 +146,76 @@ const GridToStackExample = () => {

return (
<BpkCardList
cardList={cards(DealsCard)}
accessory="expand"
layoutDesktop="grid"
layoutMobile="stack"
title={title}
cardList={cards(DealsCard)}
description={description}
initiallyShownCards={4}
expandText={collapsed ? expandText : collapseText}
initiallyShownCards={4}
layoutDesktop="grid"
layoutMobile="stack"
onButtonClick={onButtonClick}
title={title}
/>
);
};

const GridToStackWithButtonExample = () => (
<BpkCardList
cardList={cards(DestinationCard)}
accessory="button"
buttonText="Explore More"
cardList={cards(DestinationCard)}
description={description}
layoutDesktop="grid"
layoutMobile="stack"
onButtonClick={() => {}}
title={title}
description={description}
buttonText="Explore More"
/>
);

const RowToRailWith5InitiallyShownCardsExample = () => (
<BpkCardList
cardList={cards(DealsCard)}
accessory="pagination"
ariaLabelIndicator="Go to page"
ariaLabelNext="Next"
ariaLabelPrev="Prev"
buttonText="Explore more"
cardList={cards(DealsCard)}
description={description}
initiallyShownCards={5}
layoutDesktop="row"
layoutMobile="rail"
title={title}
description={description}
initiallyShownCards={5}
buttonText="Explore more"
/>
);
const RowToRailExample = () => (
<BpkCardList
cardList={cards(DealsCard)}
accessory="pagination"
ariaLabelIndicator="Go to page"
ariaLabelNext="Next"
ariaLabelPrev="Prev"
cardList={cards(DealsCard)}
description={description}
layoutDesktop="row"
layoutMobile="rail"
title={title}
description={description}
/>
);

// 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 = () => (
<BpkCardList
cardList={cards(DestinationCard)}
accessory="pagination"
ariaLabelIndicator="Go to page"
ariaLabelNext="Next"
ariaLabelPrev="Prev"
cardList={cards(DestinationCard)}
description={description}
layoutDesktop="row"
layoutMobile="stack"
layoutMobile={'stack' as any}
title={title}
description={description}
/>
);

Expand Down
Loading

0 comments on commit a35d91e

Please sign in to comment.