scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add LargeTable component

Browse Source
This commit is contained in:
Arvid Norlin
2024-05-31 16:03:30 +02:00
parent de79c2dc80
commit 92f5f7f7c0
17 changed files with 136 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DA.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/new-friend.svg"
"icon": "/_static/icons/loyaltyLevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/good-friend.svg"
"icon": "/_static/icons/loyaltyLevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/close-friend.svg"
"icon": "/_static/icons/loyaltyLevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/dear-friend.svg"
"icon": "/_static/icons/loyaltyLevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltyLevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/true-friend.svg"
"icon": "/_static/icons/loyaltyLevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/best-friend.svg"
"icon": "/_static/icons/loyaltyLevels/best-friend.svg"
}
]
}

14
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DE.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/new-friend.svg"
"icon": "/_static/icons/loyaltyLevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/good-friend.svg"
"icon": "/_static/icons/loyaltyLevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/close-friend.svg"
"icon": "/_static/icons/loyaltyLevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/dear-friend.svg"
"icon": "/_static/icons/loyaltyLevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltyLevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/true-friend.svg"
"icon": "/_static/icons/loyaltyLevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/best-friend.svg"
"icon": "/_static/icons/loyaltyLevels/best-friend.svg"
}
]
}

14
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/EN.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/new-friend.svg"
"icon": "/_static/icons/loyaltyLevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/good-friend.svg"
"icon": "/_static/icons/loyaltyLevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/close-friend.svg"
"icon": "/_static/icons/loyaltyLevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/dear-friend.svg"
"icon": "/_static/icons/loyaltyLevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltyLevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/true-friend.svg"
"icon": "/_static/icons/loyaltyLevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/best-friend.svg"
"icon": "/_static/icons/loyaltyLevels/best-friend.svg"
}
]
}

14
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/FI.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/new-friend.svg"
"icon": "/_static/icons/loyaltyLevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/good-friend.svg"
"icon": "/_static/icons/loyaltyLevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/close-friend.svg"
"icon": "/_static/icons/loyaltyLevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/dear-friend.svg"
"icon": "/_static/icons/loyaltyLevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltyLevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/true-friend.svg"
"icon": "/_static/icons/loyaltyLevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltyLevels/best-friend.svg"
"icon": "/_static/icons/loyaltyLevels/best-friend.svg"
}
]
}

14
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/NO.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/new-friend.svg"
"icon": "/_static/icons/loyaltylevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/good-friend.svg"
"icon": "/_static/icons/loyaltylevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/close-friend.svg"
"icon": "/_static/icons/loyaltylevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/dear-friend.svg"
"icon": "/_static/icons/loyaltylevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/true-friend.svg"
"icon": "/_static/icons/loyaltylevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/best-friend.svg"
"icon": "/_static/icons/loyaltylevels/best-friend.svg"
}
]
}

14
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/SV.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/new-friend.svg"
"icon": "/_static/icons/loyaltylevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/good-friend.svg"
"icon": "/_static/icons/loyaltylevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/close-friend.svg"
"icon": "/_static/icons/loyaltylevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/dear-friend.svg"
"icon": "/_static/icons/loyaltylevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/true-friend.svg"
"icon": "/_static/icons/loyaltylevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/best-friend.svg"
"icon": "/_static/icons/loyaltylevels/best-friend.svg"
}
]
}

2
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -56,7 +56,7 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
<Title className={styles.tierHeading} level="h4">
{level.tier}
</Title>
<Image src={level.logo} alt={level.name} width={140} height={54} />
<Image src={level.icon} alt={level.name} width={140} height={54} />
<p className={styles.qualifications}>{qualifications}</p>
{level.benefits.map((benefit) => (
<p key={benefit.title} className={styles.benefits}>

26
components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import Image from "@/components/Image"
import { LargeTableProps } from "@/types/components/loyalty/blocks"
export default function LargeTable({ levels }: LargeTableProps) {
return (
<table>
<thead>
<th />
{levels.map((level) => {
console.log({ level })
return (
<th key={level.tier}>
<Image
src={level.icon}
alt={level.name}
width={140}
height={54}
/>
</th>
)
})}
</thead>
</table>
)
}

5
components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
View File

@@ -10,6 +10,7 @@ import Select from "@/components/TempDesignSystem/Form/Select"
import levelsData from "./data/EN.json"
import BenefitList from "./BenefitList"
import LargeTable from "./LargeTable"
import LevelSummary from "./LevelSummary"
import OverviewTableTitle from "./Title"
@@ -178,6 +179,10 @@ export default function OverviewTable() {
levels={[selectedLevelA, selectedLevelB, selectedLevelC]}
/>
</div>
<div className={styles.largeTableContainer}>
{/* Remove `as` once we have real data */}
<LargeTable levels={levelsData.levels as ComparisonLevel[]} />
</div>
</div>
)
}

14
components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
View File

@@ -25,6 +25,10 @@
margin: 0;
}
.largeTableContainer {
display: none;
}
.columns {
display: none;
position: relative;
@@ -95,3 +99,13 @@
margin: 0 calc(var(--Spacing-x2) * -1);
}
}
@media screen and (min-width: 1367px) {
.columns {
display: none;
}
.largeTableContainer {
display: block;
}
}

14
components/MyPages/Blocks/Benefits/data/DA.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/new-friend.svg"
"icon": "/_static/icons/loyaltylevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/good-friend.svg"
"icon": "/_static/icons/loyaltylevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/close-friend.svg"
"icon": "/_static/icons/loyaltylevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/dear-friend.svg"
"icon": "/_static/icons/loyaltylevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/true-friend.svg"
"icon": "/_static/icons/loyaltylevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/best-friend.svg"
"icon": "/_static/icons/loyaltylevels/best-friend.svg"
}
]
}

14
components/MyPages/Blocks/Benefits/data/DE.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/new-friend.svg"
"icon": "/_static/icons/loyaltylevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/good-friend.svg"
"icon": "/_static/icons/loyaltylevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/close-friend.svg"
"icon": "/_static/icons/loyaltylevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/dear-friend.svg"
"icon": "/_static/icons/loyaltylevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/true-friend.svg"
"icon": "/_static/icons/loyaltylevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/best-friend.svg"
"icon": "/_static/icons/loyaltylevels/best-friend.svg"
}
]
}

14
components/MyPages/Blocks/Benefits/data/EN.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/new-friend.svg"
"icon": "/_static/icons/loyaltylevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/good-friend.svg"
"icon": "/_static/icons/loyaltylevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/close-friend.svg"
"icon": "/_static/icons/loyaltylevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/dear-friend.svg"
"icon": "/_static/icons/loyaltylevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/true-friend.svg"
"icon": "/_static/icons/loyaltylevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/best-friend.svg"
"icon": "/_static/icons/loyaltylevels/best-friend.svg"
}
]
}

14
components/MyPages/Blocks/Benefits/data/FI.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/new-friend.svg"
"icon": "/_static/icons/loyaltylevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/good-friend.svg"
"icon": "/_static/icons/loyaltylevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/close-friend.svg"
"icon": "/_static/icons/loyaltylevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/dear-friend.svg"
"icon": "/_static/icons/loyaltylevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/true-friend.svg"
"icon": "/_static/icons/loyaltylevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/best-friend.svg"
"icon": "/_static/icons/loyaltylevels/best-friend.svg"
}
]
}

14
components/MyPages/Blocks/Benefits/data/NO.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/new-friend.svg"
"icon": "/_static/icons/loyaltylevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/good-friend.svg"
"icon": "/_static/icons/loyaltylevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/close-friend.svg"
"icon": "/_static/icons/loyaltylevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/dear-friend.svg"
"icon": "/_static/icons/loyaltylevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/true-friend.svg"
"icon": "/_static/icons/loyaltylevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/best-friend.svg"
"icon": "/_static/icons/loyaltylevels/best-friend.svg"
}
]
}

14
components/MyPages/Blocks/Benefits/data/SV.json
View File

@@ -28,7 +28,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/new-friend.svg"
"icon": "/_static/icons/loyaltylevels/new-friend.svg"
},
{
"tier": 2,
@@ -44,7 +44,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/good-friend.svg"
"icon": "/_static/icons/loyaltylevels/good-friend.svg"
},
{
"tier": 3,
@@ -67,7 +67,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/close-friend.svg"
"icon": "/_static/icons/loyaltylevels/close-friend.svg"
},
{
"tier": 4,
@@ -97,7 +97,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/dear-friend.svg"
"icon": "/_static/icons/loyaltylevels/dear-friend.svg"
},
{
"tier": 5,
@@ -127,7 +127,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
"icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
},
{
"tier": 6,
@@ -164,7 +164,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/true-friend.svg"
"icon": "/_static/icons/loyaltylevels/true-friend.svg"
},
{
"tier": 7,
@@ -194,7 +194,7 @@
"href": ""
}
],
"logo": "/_static/icons/loyaltylevels/best-friend.svg"
"icon": "/_static/icons/loyaltylevels/best-friend.svg"
}
]
}

15
types/components/loyalty/blocks.ts
View File

@@ -38,21 +38,14 @@ export type Level = {
name: string
requiredPoints: number
requiredNights?: number
logo: string
icon: string
benefits: Benefit[]
}
export type LevelCardProps = {
formatMessage: IntlFormatters["formatMessage"]
lang: Lang
level: {
tier: number
name: string
requiredPoints: number
requiredNights?: number
benefits: Benefit[]
logo: string
}
level: Level
}
export type ComparisonLevel = {
@@ -95,3 +88,7 @@ export type BenefitValueProps = {
export type BenefitListProps = {
levels: ComparisonLevel[]
}
export type LargeTableProps = {
levels: ComparisonLevel[]
}