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

Merge branch 'develop' into feat/sw-222-staycard-link

Browse Source
This commit is contained in:
Linus Flood
2024-10-21 08:30:07 +02:00
parent c1ae60d20b ae87b64cd5
commit 827417ba40
292 changed files with 7197 additions and 1979 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Blocks/Accordion/accordion.module.css
+7
View File
@@ -0,0 +1,7 @@
.accordion:not(.allVisible) :nth-child(n + 6) {
display: none;
}
.accordion:not(.allVisible) :nth-child(5) {
border: none;
}
components/Blocks/Accordion/index.tsx
+53
View File
@@ -0,0 +1,53 @@
"use client"
import { useState } from "react"
import JsonToHtml from "@/components/JsonToHtml"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import styles from "./accordion.module.css"
import type { AccordionProps } from "@/types/components/blocks/Accordion"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
export default function AccordionSection({ accordion, title }: AccordionProps) {
const showToggleButton = accordion.length > 5
const [allAccordionsVisible, setAllAccordionsVisible] =
useState(!showToggleButton)
function toggleAccordions() {
setAllAccordionsVisible((state) => !state)
}
return (
<SectionContainer id={HotelHashValues.faq}>
{title && <SectionHeader textTransform="uppercase" title={title} />}
<Accordion
className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}
theme="light"
variant="card"
>
{accordion.map((acc) => (
<AccordionItem key={acc.question} title={acc.question}>
<JsonToHtml
embeds={acc.answer.embedded_itemsConnection.edges}
nodes={acc.answer.json?.children[0].children}
/>
</AccordionItem>
))}
</Accordion>
{showToggleButton ? (
<ShowMoreButton
loadMoreData={toggleAccordions}
showLess={allAccordionsVisible}
textShowMore="See all FAQ"
textShowLess="See less FAQ"
/>
) : null}
</SectionContainer>
)
}
components/Blocks/CardsGrid.tsx
+20 -2
View File
@@ -6,12 +6,29 @@ import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
import TeaserCard from "@/components/TempDesignSystem/TeaserCard"
import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
import { CardsGridEnum } from "@/types/enums/cardsGrid"
import { CardsGridEnum, CardsGridLayoutEnum } from "@/types/enums/cardsGrid"
import type { StackableGridProps } from "../TempDesignSystem/Grids/Stackable/stackable"
export default function CardsGrid({
cards_grid,
firstItem = false,
}: CardsGridProps) {
let columns: StackableGridProps["columns"]
switch (cards_grid.layout) {
case CardsGridLayoutEnum.ONE_COLUMN:
columns = 1
break
case CardsGridLayoutEnum.TWO_COLUMNS:
columns = 2
break
case CardsGridLayoutEnum.THREE_COLUMNS:
columns = 3
break
default:
columns = 3
}
return (
<SectionContainer>
<SectionHeader
@@ -19,7 +36,7 @@ export default function CardsGrid({
preamble={cards_grid.preamble}
topTitle={firstItem}
/>
<Grids.Stackable>
<Grids.Stackable columns={columns}>
{cards_grid.cards.map((card) => {
switch (card.__typename) {
case CardsGridEnum.cards.Card:
@@ -43,6 +60,7 @@ export default function CardsGrid({
primaryButton={card.primaryButton}
secondaryButton={card.secondaryButton}
sidePeekButton={card.sidePeekButton}
sidePeekContent={card.sidePeekContent}
image={card.image}
/>
)
components/Blocks/DynamicContent/index.tsx
+5 -1
View File
@@ -1,3 +1,5 @@
import { env } from "@/env/server"
import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks"
import LoyaltyLevels from "@/components/Blocks/DynamicContent/LoyaltyLevels"
import Overview from "@/components/Blocks/DynamicContent/Overview"
@@ -26,7 +28,9 @@ export default async function DynamicContent({
case DynamicContentEnum.Blocks.components.earn_and_burn:
return <EarnAndBurn {...dynamic_content} />
case DynamicContentEnum.Blocks.components.expiring_points:
return <ExpiringPoints {...dynamic_content} />
return env.HIDE_FOR_NEXT_RELEASE ? null : (
<ExpiringPoints {...dynamic_content} />
)
case DynamicContentEnum.Blocks.components.how_it_works:
return (
<HowItWorks dynamic_content={dynamic_content} firstItem={firstItem} />
components/Blocks/Shortcuts/index.tsx
-37
View File
@@ -1,37 +0,0 @@
import { ArrowRightIcon } from "@/components/Icons"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./shortcuts.module.css"
import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
export default function Shortcuts({
firstItem = false,
shortcuts,
subtitle,
title,
}: ShortcutsProps) {
return (
<SectionContainer>
<SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
<section className={styles.links}>
{shortcuts.map((shortcut) => (
<Link
href={shortcut.url}
key={shortcut.title}
target={shortcut.openInNewTab ? "_blank" : undefined}
variant="shortcut"
>
<Body textTransform="bold" color="burgundy">
<span>{shortcut.text ? shortcut.text : shortcut.title}</span>
</Body>
<ArrowRightIcon color="burgundy" className={styles.arrowRight} />
</Link>
))}
</section>
</SectionContainer>
)
}
components/Blocks/Shortcuts/shortcuts.module.css
-11
View File
@@ -1,11 +0,0 @@
.links {
display: grid;
background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle);
}
.arrowRight {
height: 24px;
width: 24px;
}
components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx
+32
View File
@@ -0,0 +1,32 @@
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./shortcutsListItems.module.css"
import type { ShortcutsListItemsProps } from "@/types/components/blocks/shortcuts"
export default function ShortcutsListItems({
shortcutsListItems,
className,
}: ShortcutsListItemsProps) {
return (
<ul className={className}>
{shortcutsListItems.map((shortcut) => (
<li key={shortcut.title} className={styles.listItem}>
<Link
href={shortcut.url}
target={shortcut.openInNewTab ? "_blank" : undefined}
variant="shortcut"
className={styles.link}
>
<Body textTransform="bold" color="burgundy">
<span>{shortcut.text || shortcut.title}</span>
</Body>
<ArrowRightIcon color="burgundy" width={24} height={24} />
</Link>
</li>
))}
</ul>
)
}
components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css
+11
View File
@@ -0,0 +1,11 @@
.link {
background-color: var(--Base-Surface-Primary-light-Normal);
}
.listItem {
border-bottom: 1px solid var(--Base-Border-Subtle);
}
.listItem:last-child {
border-bottom: none;
}
components/Blocks/ShortcutsList/index.tsx
+51
View File
@@ -0,0 +1,51 @@
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import ShortcutsListItems from "./ShortcutsListItems"
import styles from "./shortcutsList.module.css"
import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"
export default function ShortcutsList({
firstItem = false,
shortcuts,
subtitle,
title,
hasTwoColumns,
}: ShortcutsListProps) {
const middleIndex = Math.ceil(shortcuts.length / 2)
const leftColumn = shortcuts.slice(0, middleIndex)
const rightColumn = shortcuts.slice(middleIndex)
const classNames =
hasTwoColumns && shortcuts.length > 1
? {
section: styles.twoColumnSection,
leftColumn: styles.leftColumn,
rightColumn: styles.rightColumn,
}
: {
section: styles.oneColumnSection,
leftColumn:
shortcuts.length === 1
? styles.leftColumnBorderBottomNone
: styles.leftColumnBorderBottom,
}
return (
<SectionContainer>
<SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
<section className={classNames.section}>
<ShortcutsListItems
shortcutsListItems={leftColumn}
className={classNames.leftColumn}
/>
<ShortcutsListItems
shortcutsListItems={rightColumn}
className={classNames.rightColumn}
/>
</section>
</SectionContainer>
)
}
components/Blocks/ShortcutsList/shortcutsList.module.css
+33
View File
@@ -0,0 +1,33 @@
.oneColumnSection,
.twoColumnSection {
display: grid;
border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle);
overflow: hidden;
}
.leftColumn,
.leftColumnBorderBottom {
border-bottom: 1px solid var(--Base-Border-Subtle);
}
.leftColumnBorderBottomNone {
border-bottom: none;
}
@media screen and (min-width: 1367px) {
.twoColumnSection {
grid-template-columns: 1fr 1fr;
column-gap: var(--Spacing-x2);
border-radius: 0;
border: none;
}
.leftColumn,
.rightColumn {
height: fit-content;
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
overflow: hidden;
}
}
components/Blocks/UspGrid/renderOptions.tsx
-2
View File
@@ -1,9 +1,7 @@
import Link from "@/components/TempDesignSystem/Link"
import { removeMultipleSlashes } from "@/utils/url"
import styles from "./uspgrid.module.css"
import { EmbedEnum } from "@/types/requests/utils/embeds"
import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"
import type {
components/Blocks/index.tsx
+13 -2
View File
@@ -1,10 +1,11 @@
import CardsGrid from "@/components/Blocks/CardsGrid"
import DynamicContent from "@/components/Blocks/DynamicContent"
import Shortcuts from "@/components/Blocks/Shortcuts"
import ShortcutsList from "@/components/Blocks/ShortcutsList"
import TextCols from "@/components/Blocks/TextCols"
import UspGrid from "@/components/Blocks/UspGrid"
import JsonToHtml from "@/components/JsonToHtml"
import AccordionSection from "./Accordion"
import Table from "./Table"
import type { BlocksProps } from "@/types/components/blocks"
@@ -14,6 +15,14 @@ export default function Blocks({ blocks }: BlocksProps) {
return blocks.map((block, idx) => {
const firstItem = idx === 0
switch (block.typename) {
case BlocksEnums.block.Accordion:
return (
<AccordionSection
accordion={block.accordion.accordions}
title={block.accordion.title}
key={`${block.typename}-${idx}`}
/>
)
case BlocksEnums.block.CardsGrid:
return (
<CardsGrid
@@ -41,12 +50,13 @@ export default function Blocks({ blocks }: BlocksProps) {
)
case BlocksEnums.block.Shortcuts:
return (
<Shortcuts
<ShortcutsList
firstItem={firstItem}
key={`${block.shortcuts.title}-${idx}`}
shortcuts={block.shortcuts.shortcuts}
subtitle={block.shortcuts.subtitle}
title={block.shortcuts.title}
hasTwoColumns={block.shortcuts.hasTwoColumns}
/>
)
case BlocksEnums.block.Table:
@@ -64,6 +74,7 @@ export default function Blocks({ blocks }: BlocksProps) {
)
case BlocksEnums.block.UspGrid:
return <UspGrid usp_grid={block.usp_grid} />
default:
return null
}