diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx index 0851a5a95..e955686d4 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx @@ -45,7 +45,7 @@ export default async function CurrentBenefitsBlock({ return ( - + {currentLevel.benefits.map((benefit, idx) => (
</article> ))} - </Grids.Scrollable> + </Grids.Stackable> <SectionLink link={link} variant="mobile" /> </SectionContainer> ) diff --git a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx index 825f4ed3b..151ef6412 100644 --- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx +++ b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx @@ -42,7 +42,7 @@ export default async function NextLevelBenefitsBlock({ return ( <SectionContainer> <SectionHeader title={title} subtitle={subtitle} link={link} /> - <Grids.Stackable> + <Grids.Stackable columns={2}> {nextLevel.benefits.map((benefit) => ( <article key={benefit.title} className={styles.card}> <Chip> diff --git a/components/TempDesignSystem/Grids/Scrollable/index.tsx b/components/TempDesignSystem/Grids/Scrollable/index.tsx deleted file mode 100644 index e7e53df0a..000000000 --- a/components/TempDesignSystem/Grids/Scrollable/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import styles from "./scrollableGrid.module.css" - -export default function Scrollable({ children }: React.PropsWithChildren) { - return <section className={styles.carousel}>{children}</section> -} diff --git a/components/TempDesignSystem/Grids/Scrollable/scrollableGrid.module.css b/components/TempDesignSystem/Grids/Scrollable/scrollableGrid.module.css deleted file mode 100644 index 6bc7fa6c0..000000000 --- a/components/TempDesignSystem/Grids/Scrollable/scrollableGrid.module.css +++ /dev/null @@ -1,38 +0,0 @@ -.carousel { - display: grid; - grid-auto-columns: 350px; - grid-auto-flow: column; - gap: var(--Spacing-x2); - margin-left: calc(0 - var(--Spacing-x2)); - margin-right: calc(0 - var(--Spacing-x2)); - overflow-x: scroll; - scroll-padding-left: var(--Spacing-x2); - scroll-snap-type: x mandatory; - scrollbar-width: none; - /* Hide scrollbar IE and Edge */ - -ms-overflow-style: none; - /* Hide Scrollbar Firefox */ -} - -.carousel > * { - scroll-snap-align: start; -} - -/* Hide Scrollbar Chrome, Safari and Opera */ -.carousel::-webkit-scrollbar { - display: none; -} - -/* 3 cols + 2 gaps (+ padding) before falling back to scroll */ -@media screen and (min-width: 964px) { - .carousel { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - } -} - -@media screen and (min-width: 1367px) { - .carousel { - margin: 0; - padding: 0; - } -} diff --git a/components/TempDesignSystem/Grids/Stackable/index.tsx b/components/TempDesignSystem/Grids/Stackable/index.tsx index 8f1c989af..34aea6f61 100644 --- a/components/TempDesignSystem/Grids/Stackable/index.tsx +++ b/components/TempDesignSystem/Grids/Stackable/index.tsx @@ -1,5 +1,11 @@ -import styles from "./stackable.module.css" +import { StackableGridProps } from "./stackable" +import { stackableGridVariants } from "./variants" -export default function Stackable({ children }: React.PropsWithChildren) { - return <section className={styles.container}>{children}</section> +export default function Stackable({ + children, + className, + columns, +}: React.PropsWithChildren<StackableGridProps>) { + const classNames = stackableGridVariants({ className, columns }) + return <section className={classNames}>{children}</section> } diff --git a/components/TempDesignSystem/Grids/Stackable/stackable.module.css b/components/TempDesignSystem/Grids/Stackable/stackable.module.css index 968334e85..671e0fa6d 100644 --- a/components/TempDesignSystem/Grids/Stackable/stackable.module.css +++ b/components/TempDesignSystem/Grids/Stackable/stackable.module.css @@ -1,7 +1,6 @@ .container { display: grid; gap: var(--Spacing-x2); - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* Hide Scrollbar Chrome, Safari and Opera */ @@ -10,33 +9,11 @@ } @media (min-width: 768px) { - .container { - grid-template-columns: repeat(2, minmax(370px, 1fr)); - } -} - -@media (min-width: 1367px) { - .container:has(> :nth-child(2)) { - grid-template-columns: 1fr 1fr; - } - - .container:has(> :nth-child(3)) { - grid-template-columns: 1fr 1fr 1fr; - } - - .container:has(> :nth-child(4), > :nth-child(5)) { - grid-template-columns: 1fr 1fr; - } - - .container:has(> :nth-child(6)) { - grid-template-columns: 1fr 1fr 1fr; - } - - .container:has(> :nth-child(7), > :nth-child(8)) { - grid-template-columns: 1fr 1fr; - } - - .container:has(> :nth-child(9)) { - grid-template-columns: 1fr 1fr 1fr; + .threeColumns { + grid-template-columns: repeat(3, 1fr); + } + + .twoColumns { + grid-template-columns: repeat(2, 1fr); } } diff --git a/components/TempDesignSystem/Grids/Stackable/stackable.ts b/components/TempDesignSystem/Grids/Stackable/stackable.ts new file mode 100644 index 000000000..0f5c249f7 --- /dev/null +++ b/components/TempDesignSystem/Grids/Stackable/stackable.ts @@ -0,0 +1,9 @@ +import { stackableGridVariants } from "./variants" + +import type { VariantProps } from "class-variance-authority" + +export interface StackableGridProps + extends React.HTMLAttributes<HTMLDivElement>, + VariantProps<typeof stackableGridVariants> { + columns?: 2 | 3 +} diff --git a/components/TempDesignSystem/Grids/Stackable/variants.ts b/components/TempDesignSystem/Grids/Stackable/variants.ts new file mode 100644 index 000000000..fbe93cd7c --- /dev/null +++ b/components/TempDesignSystem/Grids/Stackable/variants.ts @@ -0,0 +1,15 @@ +import { cva } from "class-variance-authority" + +import styles from "./stackable.module.css" + +export const stackableGridVariants = cva(styles.container, { + variants: { + columns: { + 2: styles.twoColumns, + 3: styles.threeColumns, + }, + }, + defaultVariants: { + columns: 3, + }, +}) diff --git a/components/TempDesignSystem/Grids/index.tsx b/components/TempDesignSystem/Grids/index.tsx index 216c984d9..26ec48acb 100644 --- a/components/TempDesignSystem/Grids/index.tsx +++ b/components/TempDesignSystem/Grids/index.tsx @@ -1,5 +1,4 @@ import Dynamic from "./Dynamic" -import Scrollable from "./Scrollable" import Stackable from "./Stackable" export default function Grids() { @@ -7,5 +6,4 @@ export default function Grids() { } Grids.Dynamic = Dynamic -Grids.Scrollable = Scrollable Grids.Stackable = Stackable diff --git a/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css b/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css index bc83ef0b7..d1e30f123 100644 --- a/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css +++ b/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css @@ -3,7 +3,7 @@ display: grid; border-radius: var(--Corner-radius-xLarge); gap: var(--Spacing-x2); - height: 480px; + min-height: 480px; justify-content: space-between; margin-right: var(--Spacing-x2); padding: var(--Spacing-x4) var(--Spacing-x3);