From 09797ceb22f45e199cb5d7b9e98293ecd6277f1e Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Fri, 7 Jun 2024 15:01:11 +0200 Subject: [PATCH 1/8] feat: implement ui on benefits card --- .../Benefits/CurrentLevel/current.module.css | 24 +++++++ .../CardGrid/cardGrid.module.css | 66 +++++++++++++++++++ .../TempDesignSystem/CardGrid/variants.ts | 21 ++++++ 3 files changed, 111 insertions(+) create mode 100644 components/TempDesignSystem/CardGrid/cardGrid.module.css create mode 100644 components/TempDesignSystem/CardGrid/variants.ts diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index 2487b91ae..348a28976 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -19,3 +19,27 @@ min-height: 280px; padding: var(--Spacing-x3); } + +.card { + align-items: center; + background-color: var(--Base-Background-Primary-Normal, #faf6f2); + border: 1px solid var(--Base-Border-Subtle, #e3d9d1); + border-radius: var(--Medium, 8px); + color: var(--Theme-Primary-Light-On-Surface-Text); + display: flex; + flex: 1 1 0px; + flex-direction: column; + gap: 10px; + justify-content: center; + min-height: 280px; + padding: 30px; + text-align: center; +} + +.preTitle { + font-family: var(--typography-Script-2-fontFamily); + font-size: var(--typography-Script-2-fontSize); + font-weight: var(--typography-Script-2-fontWeight); + color: var(--Primary-Light-On-Surface-Accent, #b05b65); + transform: rotate(-3deg); +} diff --git a/components/TempDesignSystem/CardGrid/cardGrid.module.css b/components/TempDesignSystem/CardGrid/cardGrid.module.css new file mode 100644 index 000000000..04548ba66 --- /dev/null +++ b/components/TempDesignSystem/CardGrid/cardGrid.module.css @@ -0,0 +1,66 @@ +.gridContainer { + display: grid; + gap: 1.6rem; +} + +.carousel { + display: grid; + grid-auto-columns: 80dvw; + grid-auto-flow: column; + gap: 1.6rem; + + margin-left: -1.6rem; + margin-right: -1.6rem; + padding-left: 1.6rem; + + overflow-x: scroll; + scroll-padding-left: 1.6rem; + scroll-snap-type: x mandatory; + + scrollbar-width: none; + /* Hide scrollbar IE and Edge */ + -ms-overflow-style: none; + /* Hide Scrollbar Firefox */ +} + +.carousel:last-child { + margin-right: 1.6rem; +} + +.carousel > * { + scroll-snap-align: start; +} + +/* Hide Scrollbar Chrome, Safari and Opera */ +.gridContainer::-webkit-scrollbar { + display: none; +} + +@media screen and (min-width: 1367px) { + .oneColumnGrid { + grid-template-columns: repeat(1, 1fr); + } + + .twoColumnGrid, + .twoPlusOne { + grid-template-columns: repeat(2, 1fr); + } + + .threeColumnGrid { + grid-template-columns: repeat(3, 1fr); + } + + .fourColumnGrid { + grid-template-columns: repeat(4, 1fr); + } + + .twoPlusOne > *:last-child { + grid-column: span 2; + } + + .carousel { + grid-auto-flow: unset; + margin: 0; + padding: 0; + } +} diff --git a/components/TempDesignSystem/CardGrid/variants.ts b/components/TempDesignSystem/CardGrid/variants.ts new file mode 100644 index 000000000..c1fc69db6 --- /dev/null +++ b/components/TempDesignSystem/CardGrid/variants.ts @@ -0,0 +1,21 @@ +import { cva } from "class-variance-authority" + +import styles from "./cardGrid.module.css" + +export const cardGridVariants = cva(styles.gridContainer, { + variants: { + isMobileCarousel: { + true: styles.carousel, + }, + variant: { + oneColumnGrid: styles.oneColumnGrid, + twoColumnGrid: styles.twoColumnGrid, + threeColumnGrid: styles.threeColumnGrid, + fourColumnGrid: styles.fourColumnGrid, + twoPlusOne: styles.twoPlusOne, + }, + }, + defaultVariants: { + variant: "threeColumnGrid", + }, +}) From 9284d6697552dfe7c6cd766d3aa1bb5c33e75375 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Fri, 7 Jun 2024 16:47:31 +0200 Subject: [PATCH 2/8] feat: change css variables --- .../MyPages/Blocks/Benefits/CurrentLevel/current.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index 348a28976..8afabc03d 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -22,7 +22,7 @@ .card { align-items: center; - background-color: var(--Base-Background-Primary-Normal, #faf6f2); + background-color: var(--Base-Background-Normal, #faf6f2); border: 1px solid var(--Base-Border-Subtle, #e3d9d1); border-radius: var(--Medium, 8px); color: var(--Theme-Primary-Light-On-Surface-Text); @@ -40,6 +40,6 @@ font-family: var(--typography-Script-2-fontFamily); font-size: var(--typography-Script-2-fontSize); font-weight: var(--typography-Script-2-fontWeight); - color: var(--Primary-Light-On-Surface-Accent, #b05b65); + color: var(--Theme-Primary-Light-On-Surface-Accent); transform: rotate(-3deg); } From 8b25d1cbf487380da98ec71c9f86ad370ae3215d Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Tue, 11 Jun 2024 17:08:02 +0200 Subject: [PATCH 3/8] feat: add biro script component --- .../MyPages/Blocks/Benefits/CurrentLevel/current.module.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index 8afabc03d..1a6776eca 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -36,10 +36,6 @@ text-align: center; } -.preTitle { - font-family: var(--typography-Script-2-fontFamily); - font-size: var(--typography-Script-2-fontSize); - font-weight: var(--typography-Script-2-fontWeight); - color: var(--Theme-Primary-Light-On-Surface-Accent); +.scriptTitle { transform: rotate(-3deg); } From c45a239005d2e1613f902cd13fa1512a8dcd4807 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Wed, 12 Jun 2024 13:45:04 +0200 Subject: [PATCH 4/8] feat: change grid logic --- .../MyPages/Blocks/Benefits/CurrentLevel/current.module.css | 4 ++++ components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx | 2 +- components/TempDesignSystem/CardGrid/cardGrid.module.css | 4 ---- components/TempDesignSystem/CardGrid/variants.ts | 1 - 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index 1a6776eca..a1fe5cbae 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -39,3 +39,7 @@ .scriptTitle { transform: rotate(-3deg); } + +.test { + height: 100px; +} diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx index 1fc105be7..40a40d877 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx @@ -19,7 +19,7 @@ export default async function CurrentBenefitsBlock({ const user = await serverClient().user.get() const { formatMessage } = await getIntl() // TODO: level should be fetched from the `user` object once available - // TAKE NOTE: we need clarification on how benefits stack from different levels + // TAKE NOTE: we need clarification on how benefits stack from different levels // in order to determine if a benefit is specific to a level or if it is a cumulative benefit // we might have to add a new boolean property "exclusive" or similar const userLevel = 1 diff --git a/components/TempDesignSystem/CardGrid/cardGrid.module.css b/components/TempDesignSystem/CardGrid/cardGrid.module.css index 04548ba66..72ba11227 100644 --- a/components/TempDesignSystem/CardGrid/cardGrid.module.css +++ b/components/TempDesignSystem/CardGrid/cardGrid.module.css @@ -37,10 +37,6 @@ } @media screen and (min-width: 1367px) { - .oneColumnGrid { - grid-template-columns: repeat(1, 1fr); - } - .twoColumnGrid, .twoPlusOne { grid-template-columns: repeat(2, 1fr); diff --git a/components/TempDesignSystem/CardGrid/variants.ts b/components/TempDesignSystem/CardGrid/variants.ts index c1fc69db6..a8d80b275 100644 --- a/components/TempDesignSystem/CardGrid/variants.ts +++ b/components/TempDesignSystem/CardGrid/variants.ts @@ -8,7 +8,6 @@ export const cardGridVariants = cva(styles.gridContainer, { true: styles.carousel, }, variant: { - oneColumnGrid: styles.oneColumnGrid, twoColumnGrid: styles.twoColumnGrid, threeColumnGrid: styles.threeColumnGrid, fourColumnGrid: styles.fourColumnGrid, From e677079caedc88cc0dc0384d5909c958bb91e85b Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Wed, 12 Jun 2024 15:37:16 +0200 Subject: [PATCH 5/8] feat: design changes --- .../Benefits/CurrentLevel/current.module.css | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index a1fe5cbae..e73d5660a 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -9,37 +9,35 @@ .card { align-items: center; - background-color: var(--UI-Grey-10); - border-radius: var(--Corner-radius-Small); + background-color: var(--Base-Background-Normal); + border: 1px solid var(--Base-Border-Subtle); + border-radius: var(--Corner-radius-Medium); display: flex; flex-direction: column; gap: var(--Spacing-x1); justify-content: center; - padding: var(--Spacing-x7) var(--Spacing-x3); min-height: 280px; - padding: var(--Spacing-x3); + padding: var(--Spacing-x7) var(--Spacing-x3); + text-align: center; } -.card { - align-items: center; - background-color: var(--Base-Background-Normal, #faf6f2); - border: 1px solid var(--Base-Border-Subtle, #e3d9d1); - border-radius: var(--Medium, 8px); - color: var(--Theme-Primary-Light-On-Surface-Text); +.title { display: flex; - flex: 1 1 0px; flex-direction: column; - gap: 10px; - justify-content: center; - min-height: 280px; - padding: 30px; - text-align: center; + text-wrap: balance; } .scriptTitle { transform: rotate(-3deg); } -.test { - height: 100px; +.subtitle { + color: var(--Theme-Primary-Light-On-Surface-Text); + font-family: var(--typography-Body-Regular-fontFamily); + font-size: 16px; + font-weight: 400; + line-height: 150%; + letter-spacing: 0.096px; + text-align: center; + margin: 0; } From 6c0cbd1de7ccdae2decc885c4b8369e509a88fa3 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Wed, 12 Jun 2024 15:39:36 +0200 Subject: [PATCH 6/8] feat: remove char in comment --- components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx index 40a40d877..1fc105be7 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx @@ -19,7 +19,7 @@ export default async function CurrentBenefitsBlock({ const user = await serverClient().user.get() const { formatMessage } = await getIntl() // TODO: level should be fetched from the `user` object once available - // TAKE NOTE: we need clarification on how benefits stack from different levels + // TAKE NOTE: we need clarification on how benefits stack from different levels // in order to determine if a benefit is specific to a level or if it is a cumulative benefit // we might have to add a new boolean property "exclusive" or similar const userLevel = 1 From e9e9568d23fa2a2b15c8b26aac6c2f5e1f068ae5 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Thu, 13 Jun 2024 14:46:26 +0200 Subject: [PATCH 7/8] feat: remove CardGrid --- .../CardGrid/cardGrid.module.css | 62 ------------------- .../TempDesignSystem/CardGrid/variants.ts | 20 ------ 2 files changed, 82 deletions(-) delete mode 100644 components/TempDesignSystem/CardGrid/cardGrid.module.css delete mode 100644 components/TempDesignSystem/CardGrid/variants.ts diff --git a/components/TempDesignSystem/CardGrid/cardGrid.module.css b/components/TempDesignSystem/CardGrid/cardGrid.module.css deleted file mode 100644 index 72ba11227..000000000 --- a/components/TempDesignSystem/CardGrid/cardGrid.module.css +++ /dev/null @@ -1,62 +0,0 @@ -.gridContainer { - display: grid; - gap: 1.6rem; -} - -.carousel { - display: grid; - grid-auto-columns: 80dvw; - grid-auto-flow: column; - gap: 1.6rem; - - margin-left: -1.6rem; - margin-right: -1.6rem; - padding-left: 1.6rem; - - overflow-x: scroll; - scroll-padding-left: 1.6rem; - scroll-snap-type: x mandatory; - - scrollbar-width: none; - /* Hide scrollbar IE and Edge */ - -ms-overflow-style: none; - /* Hide Scrollbar Firefox */ -} - -.carousel:last-child { - margin-right: 1.6rem; -} - -.carousel > * { - scroll-snap-align: start; -} - -/* Hide Scrollbar Chrome, Safari and Opera */ -.gridContainer::-webkit-scrollbar { - display: none; -} - -@media screen and (min-width: 1367px) { - .twoColumnGrid, - .twoPlusOne { - grid-template-columns: repeat(2, 1fr); - } - - .threeColumnGrid { - grid-template-columns: repeat(3, 1fr); - } - - .fourColumnGrid { - grid-template-columns: repeat(4, 1fr); - } - - .twoPlusOne > *:last-child { - grid-column: span 2; - } - - .carousel { - grid-auto-flow: unset; - margin: 0; - padding: 0; - } -} diff --git a/components/TempDesignSystem/CardGrid/variants.ts b/components/TempDesignSystem/CardGrid/variants.ts deleted file mode 100644 index a8d80b275..000000000 --- a/components/TempDesignSystem/CardGrid/variants.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { cva } from "class-variance-authority" - -import styles from "./cardGrid.module.css" - -export const cardGridVariants = cva(styles.gridContainer, { - variants: { - isMobileCarousel: { - true: styles.carousel, - }, - variant: { - twoColumnGrid: styles.twoColumnGrid, - threeColumnGrid: styles.threeColumnGrid, - fourColumnGrid: styles.fourColumnGrid, - twoPlusOne: styles.twoPlusOne, - }, - }, - defaultVariants: { - variant: "threeColumnGrid", - }, -}) From 991ae0135ffe725d284f8f6c3a95d72d61fdd157 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Thu, 13 Jun 2024 15:08:30 +0200 Subject: [PATCH 8/8] feat: resolve rebase --- .../Benefits/CurrentLevel/current.module.css | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index e73d5660a..15e551baa 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -18,26 +18,4 @@ justify-content: center; min-height: 280px; padding: var(--Spacing-x7) var(--Spacing-x3); - text-align: center; -} - -.title { - display: flex; - flex-direction: column; - text-wrap: balance; -} - -.scriptTitle { - transform: rotate(-3deg); -} - -.subtitle { - color: var(--Theme-Primary-Light-On-Surface-Text); - font-family: var(--typography-Body-Regular-fontFamily); - font-size: 16px; - font-weight: 400; - line-height: 150%; - letter-spacing: 0.096px; - text-align: center; - margin: 0; }