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

feat(SW-214): Implement usp component

Browse Source
This commit is contained in:
Pontus Dreij
2024-09-25 13:31:13 +02:00
parent ca162651c5
commit 717a5ef307
17 changed files with 286 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/Blocks/UspGrid/index.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import JsonToHtml from "@/components/JsonToHtml"
import { renderOptions } from "./renderOptions"
import { getUspIconName } from "./utils"
import styles from "./uspgrid.module.css"
import type { UspGridProps, UspIcon } from "@/types/components/blocks/uspGrid"
function UspIcon({ icon }: { icon: UspIcon }) {
const iconName = getUspIconName(icon)
const Icon = iconName ? getIconByIconName(iconName) : null
return Icon ? <Icon color="red" /> : null
}
export default function UspGrid({ usp_grid }: UspGridProps) {
return (
<div className={styles.grid}>
{usp_grid.usp_card.map(
(usp) =>
usp.text.json && (
<div key={usp.text.json.uid} className={styles.usp}>
<UspIcon icon={usp.icon} />
<JsonToHtml
embeds={usp.text.embedded_itemsConnection?.edges}
nodes={usp.text.json.children}
renderOptions={{ ...renderOptions }}
/>
</div>
)
)}
</div>
)
}

73
components/Blocks/UspGrid/renderOptions.tsx Normal file
View File

@@ -0,0 +1,73 @@
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 {
RTEDefaultNode,
RTENext,
RTENode,
RTERegularNode,
} from "@/types/transitionTypes/rte/node"
import type { RenderOptions } from "@/types/transitionTypes/rte/option"
export const renderOptions: RenderOptions = {
[RTETypeEnum.p]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
return (
<p key={node.uid} className={styles.p}>
{next(node.children, embeds, fullRenderOptions)}
</p>
)
},
[RTETypeEnum.a]: (
node: RTERegularNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
if (node.attrs.url) {
return (
<a
href={node.attrs.url}
target={node.attrs.target ?? "_blank"}
key={node.uid}
className={styles.a}
>
{next(node.children, embeds, fullRenderOptions)}
</a>
)
}
return null
},
[RTETypeEnum.reference]: (
node: RTENode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
if ("attrs" in node) {
const type = node.attrs.type
if (type !== RTEItemTypeEnum.asset) {
const href = node.attrs?.locale
? `/${node.attrs.locale}${node.attrs.href}`
: node.attrs.href
return (
<Link href={href} key={node.uid} className={styles.a}>
{next(node.children, embeds, fullRenderOptions)}
</Link>
)
}
return null
}
},
}

28
components/Blocks/UspGrid/uspgrid.module.css Normal file
View File

@@ -0,0 +1,28 @@
.grid {
display: grid;
gap: var(--Spacing-x3);
padding: var(--Spacing-x3) var(--Spacing-x4);
}
@media screen and (min-width: 767px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
.grid:has(.usp:nth-child(4)) {
grid-template-columns: repeat(2, 1fr);
}
}
.usp {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
}
.p {
margin: 0;
font-size: var(--typography-Caption-Regular-fontSize);
color: var(--UI-Text-Medium-contrast);
line-height: 21px; /* Caption variable for line-height is 139.9999976158142%, but it set to 21px in design */
}
.a {
font-size: var(--typography-Caption-Regular-fontSize);
color: var(--Base-Text-High-contrast);
}

11
components/Blocks/UspGrid/utils.ts Normal file
View File

@@ -0,0 +1,11 @@
import { UspIcon } from "@/types/components/blocks/uspGrid"
import { IconName } from "@/types/components/icon"
export function getUspIconName(icon?: UspIcon | null) {
switch (icon) {
case "Snowflake":
return IconName.Snowflake
default:
return IconName.Snowflake
}
}

3
components/Blocks/index.tsx
View File

@@ -2,6 +2,7 @@ import CardsGrid from "@/components/Blocks/CardsGrid"
import DynamicContent from "@/components/Blocks/DynamicContent"
import Shortcuts from "@/components/Blocks/Shortcuts"
import TextCols from "@/components/Blocks/TextCols"
import UspGrid from "@/components/Blocks/UspGrid"
import JsonToHtml from "@/components/JsonToHtml"
import type { BlocksProps } from "@/types/components/blocks"
@@ -57,6 +58,8 @@ export default function Blocks({ blocks }: BlocksProps) {
/>
</section>
)
case BlocksEnums.block.UspGrid:
return <UspGrid usp_grid={block.usp_grid} />
default:
return null
}

27
components/Icons/Snowflake.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function SnowflakeIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M24.0005 48C23.6026 48 23.2211 47.842 22.9398 47.5607C22.6585 47.2794 22.5005 46.8978 22.5005 46.5V42.621L20.5625 44.562C20.2808 44.8433 19.8989 45.0011 19.5009 45.0008C19.1028 45.0006 18.7212 44.8422 18.44 44.5605C18.1587 44.2788 18.0008 43.897 18.0011 43.4989C18.0014 43.1009 18.1598 42.7193 18.4415 42.438L22.5005 38.379V26.598L12.3005 32.487L10.8125 38.037C10.709 38.4213 10.4572 38.7488 10.1123 38.9474C9.7674 39.146 9.35775 39.1994 8.97345 39.096C8.58915 38.9926 8.26168 38.7407 8.06308 38.3958C7.86448 38.0509 7.81102 37.6413 7.91445 37.257L8.62545 34.611L5.26545 36.549C4.92112 36.7448 4.51332 36.7964 4.13106 36.6926C3.74879 36.5888 3.4231 36.3381 3.22504 35.995C3.02699 35.652 2.97265 35.2446 3.0739 34.8616C3.17514 34.4787 3.42374 34.1513 3.76545 33.951L7.12545 32.013L4.47345 31.302C4.28317 31.2508 4.10483 31.1626 3.94863 31.0425C3.79243 30.9223 3.66142 30.7726 3.56308 30.6018C3.46475 30.4311 3.40101 30.2426 3.3755 30.0472C3.35 29.8518 3.36324 29.6533 3.41445 29.463C3.46567 29.2727 3.55386 29.0944 3.674 28.9382C3.79413 28.782 3.94386 28.651 4.11463 28.5526C4.28539 28.4543 4.47386 28.3906 4.66926 28.3651C4.86466 28.3396 5.06317 28.3528 5.25345 28.404L10.7975 29.889L21.0005 24L10.8005 18.111L5.25045 19.596C4.86865 19.6912 4.46475 19.6325 4.12581 19.4326C3.78687 19.2328 3.54003 18.9077 3.4385 18.5276C3.33697 18.1474 3.38888 17.7426 3.58303 17.4004C3.77719 17.0581 4.09805 16.8059 4.47645 16.698L7.12545 15.987L3.76545 14.049C3.59348 13.9512 3.44255 13.8204 3.32135 13.6641C3.20015 13.5077 3.11107 13.3289 3.05924 13.138C3.00741 12.9471 2.99385 12.7479 3.01935 12.5517C3.04485 12.3555 3.1089 12.1663 3.20781 11.995C3.30672 11.8237 3.43854 11.6736 3.59568 11.5535C3.75283 11.4333 3.93218 11.3454 4.12343 11.2949C4.31468 11.2443 4.51404 11.2321 4.71004 11.2589C4.90604 11.2857 5.0948 11.351 5.26545 11.451L8.62545 13.389L7.91445 10.74C7.85987 10.5485 7.84395 10.3481 7.86761 10.1504C7.89128 9.95275 7.95407 9.76176 8.05231 9.58859C8.15055 9.41542 8.28228 9.26354 8.43983 9.14181C8.59737 9.02007 8.77757 8.93092 8.96992 8.87955C9.16227 8.82817 9.36293 8.81561 9.56019 8.84258C9.75745 8.86955 9.94737 8.93552 10.1189 9.03665C10.2904 9.13778 10.44 9.27203 10.5591 9.43159C10.6782 9.59115 10.7643 9.77281 10.8125 9.966L12.2975 15.513L22.5005 21.402V9.621L18.4415 5.562C18.302 5.42273 18.1913 5.25736 18.1158 5.07532C18.0402 4.89329 18.0013 4.69815 18.0011 4.50106C18.001 4.30397 18.0397 4.10878 18.115 3.92664C18.1903 3.74449 18.3007 3.57896 18.44 3.4395C18.5792 3.30004 18.7446 3.18937 18.9266 3.11382C19.1087 3.03826 19.3038 2.99931 19.5009 2.99917C19.698 2.99903 19.8932 3.03771 20.0753 3.113C20.2575 3.1883 20.423 3.29873 20.5625 3.438L22.5005 5.379V1.5C22.5005 1.10218 22.6585 0.720644 22.9398 0.43934C23.2211 0.158035 23.6026 0 24.0005 0C24.3983 0 24.7798 0.158035 25.0611 0.43934C25.3424 0.720644 25.5005 1.10218 25.5005 1.5V5.379L27.4415 3.438C27.7231 3.15674 28.105 2.99888 28.503 2.99917C28.9011 2.99945 29.2827 3.15784 29.564 3.4395C29.8452 3.72116 30.0031 4.10301 30.0028 4.50106C30.0025 4.89911 29.8441 5.28074 29.5625 5.562L25.5005 9.621V21.402L35.7005 15.513L37.1885 9.963C37.2919 9.5787 37.5437 9.25123 37.8886 9.05263C38.2335 8.85403 38.6432 8.80057 39.0275 8.904C39.4118 9.00743 39.7392 9.25929 39.9378 9.60417C40.1364 9.94905 40.1899 10.3587 40.0865 10.743L39.3785 13.389L42.7385 11.451C43.0828 11.2552 43.4906 11.2036 43.8728 11.3074C44.2551 11.4112 44.5808 11.6619 44.7789 12.005C44.9769 12.348 45.0313 12.7554 44.93 13.1384C44.8288 13.5213 44.5802 13.8487 44.2385 14.049L40.8785 15.987L43.5275 16.698C43.9118 16.8014 44.2392 17.0533 44.4378 17.3982C44.6364 17.7431 44.6899 18.1527 44.5865 18.537C44.483 18.9213 44.2312 19.2488 43.8863 19.4474C43.5414 19.646 43.1318 19.6994 42.7475 19.596L37.2035 18.111L27.0005 24L37.2005 29.889L42.7475 28.404C43.1318 28.301 43.5412 28.3548 43.8858 28.5537C44.2304 28.7526 44.4819 29.0802 44.585 29.4645C44.688 29.8488 44.6341 30.2583 44.4353 30.6029C44.2364 30.9475 43.9088 31.199 43.5245 31.302L40.8755 32.013L44.2355 33.951C44.5772 34.1513 44.8258 34.4787 44.927 34.8616C45.0283 35.2446 44.9739 35.652 44.7759 35.995C44.5778 36.3381 44.2521 36.5888 43.8699 36.6926C43.4876 36.7964 43.0798 36.7448 42.7355 36.549L39.3755 34.611L40.0835 37.26C40.138 37.4515 40.154 37.6519 40.1303 37.8496C40.1066 38.0472 40.0438 38.2382 39.9456 38.4114C39.8474 38.5846 39.7156 38.7365 39.5581 38.8582C39.4005 38.9799 39.2203 39.0691 39.028 39.1205C38.8356 39.1718 38.635 39.1844 38.4377 39.1574C38.2405 39.1305 38.0505 39.0645 37.879 38.9633C37.7075 38.8622 37.5579 38.728 37.4388 38.5684C37.3197 38.4089 37.2336 38.2272 37.1855 38.034L35.7005 32.487L25.5005 26.598V38.379L29.5595 42.438C29.8411 42.7193 29.9995 43.1009 29.9998 43.4989C30.0001 43.897 29.8422 44.2788 29.561 44.5605C29.2797 44.8422 28.8981 45.0006 28.5 45.0008C28.102 45.0011 27.7201 44.8433 27.4385 44.562L25.4975 42.621V46.5C25.4975 46.8978 25.3394 47.2794 25.0581 47.5607C24.7768 47.842 24.3983 48 24.0005 48Z"
fill="#CD0921"
/>
</svg>
)
}

3
components/Icons/get-icon-by-icon-name.ts
View File

@@ -49,6 +49,7 @@ import {
SearchIcon,
ServiceIcon,
ShoppingIcon,
SnowflakeIcon,
StarFilledIcon,
TrainIcon,
TshirtWashIcon,
@@ -154,6 +155,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
return ServiceIcon
case IconName.Shopping:
return ShoppingIcon
case IconName.Snowflake:
return SnowflakeIcon
case IconName.StarFilled:
return StarFilledIcon
case IconName.Train:

1
components/Icons/index.tsx
View File

@@ -48,6 +48,7 @@ export { default as ScandicLogoIcon } from "./ScandicLogo"
export { default as SearchIcon } from "./Search"
export { default as ServiceIcon } from "./Service"
export { default as ShoppingIcon } from "./Shopping"
export { default as SnowflakeIcon } from "./Snowflake"
export { default as StarFilledIcon } from "./StarFilled"
export { default as TrainIcon } from "./Train"
export { default as TshirtWashIcon } from "./TshirtWash"

3
lib/graphql/Fragments/Blocks/UspGrid.graphql
View File

@@ -16,6 +16,7 @@ fragment UspGrid_ContentPage on ContentPageBlocksUspGrid {
node {
... on UspGrid {
usp_card {
__typename
icon
text {
embedded_itemsConnection {
@@ -54,7 +55,7 @@ fragment UspGrid_ContentPageRefs on ContentPageBlocksUspGrid {
__typename
...AccountPageRef
...ContentPageRef
...ImageContainerRef
...HotelPageRef
...LoyaltyPageRef
}
}

9
server/routers/contentstack/contentPage/output.ts
View File

@@ -19,7 +19,7 @@ import {
shortcutsSchema,
} from "../schemas/blocks/shortcuts"
import { textColsRefsSchema, textColsSchema } from "../schemas/blocks/textCols"
import { uspGridSchema } from "../schemas/blocks/uspGrid"
import { uspGridRefsSchema, uspGridSchema } from "../schemas/blocks/uspGrid"
import { tempImageVaultAssetSchema } from "../schemas/imageVault"
import {
contentRefsSchema as sidebarContentRefsSchema,
@@ -157,12 +157,19 @@ const contentPageTextColsRefs = z
})
.merge(textColsRefsSchema)
const contentPageUspGridRefs = z
.object({
__typename: z.literal(ContentPageEnum.ContentStack.blocks.UspGrid),
})
.merge(uspGridRefsSchema)
const contentPageBlockRefsItem = z.discriminatedUnion("__typename", [
contentPageBlockContentRefs,
contentPageShortcutsRefs,
contentPageCardsRefs,
contentPageDynamicContentRefs,
contentPageTextColsRefs,
contentPageUspGridRefs,
])
const contentPageSidebarContentRef = z

6
server/routers/contentstack/contentPage/utils.ts
View File

@@ -147,6 +147,12 @@ export function getConnections({ content_page }: ContentPageRefs) {
}
break
}
case ContentPageEnum.ContentStack.blocks.UspGrid: {
if (block.usp_grid.length) {
connections.push(...block.usp_grid)
}
break
}
}
})
}

118
server/routers/contentstack/schemas/blocks/uspGrid.ts
View File

@@ -5,41 +5,57 @@ import * as pageLinks from "@/server/routers/contentstack/schemas/pageLinks"
import { BlocksEnums } from "@/types/enums/blocks"
import { UspGridEnum } from "@/types/enums/uspGrid"
const uspCardSchema = z.object({
icon: UspGridEnum.uspIcons,
text: z.object({
json: z.any(), // JSON
embedded_itemsConnection: z.object({
edges: z.array(
z.object({
node: z
.discriminatedUnion("__typename", [
pageLinks.accountPageSchema,
pageLinks.contentPageSchema,
pageLinks.hotelPageSchema,
pageLinks.loyaltyPageSchema,
])
.transform((data) => {
const link = pageLinks.transform(data)
if (link) {
return link
}
return data
}),
})
),
}),
}),
})
export const uspGridSchema = z.object({
typename: z
.literal(BlocksEnums.block.UspGrid)
.optional()
.default(BlocksEnums.block.UspGrid),
usp_grid: z.object({
usp_card: z.array(
z.object({
icon: UspGridEnum.uspIcons,
text: z.object({
json: z.any(), // JSON
embedded_itemsConnection: z.object({
edges: z.array(
z.object({
node: z
.discriminatedUnion("__typename", [
pageLinks.accountPageSchema,
pageLinks.contentPageSchema,
pageLinks.hotelPageSchema,
pageLinks.loyaltyPageSchema,
])
.transform((data) => {
const link = pageLinks.transform(data)
if (link) {
return link
}
return data
}),
})
),
}),
}),
})
),
}),
usp_grid: z
.object({
cardsConnection: z.object({
edges: z.array(
z.object({
node: z.object({
usp_card: z.array(uspCardSchema),
}),
})
),
}),
})
.transform((data) => {
return {
usp_card: data.cardsConnection.edges.flatMap(
(edge) => edge.node.usp_card
),
}
}),
})
const actualRefs = z.discriminatedUnion("__typename", [
@@ -49,30 +65,40 @@ const actualRefs = z.discriminatedUnion("__typename", [
pageLinks.loyaltyPageRefSchema,
])
type Refs = {
node: z.TypeOf<typeof actualRefs>
}
export const uspGridRefsSchema = z.object({
usp_grid: z
.object({
usp_card: z.array(
z.object({
text: z.object({
embedded_itemsConnection: z.object({
edges: z.array(
cardsConnection: z.object({
edges: z.array(
z.object({
node: z.object({
usp_card: z.array(
z.object({
node: z.discriminatedUnion("__typename", [
...actualRefs.options,
]),
text: z.object({
embedded_itemsConnection: z.object({
edges: z.array(
z.object({
node: z.discriminatedUnion("__typename", [
...actualRefs.options,
]),
})
),
}),
}),
})
),
}),
}),
})
),
})
),
}),
})
.transform((data) => {
return data.usp_card.flat()
return data.cardsConnection.edges.flatMap(({ node }) =>
node.usp_card.flatMap((card) =>
card.text.embedded_itemsConnection.edges.map(
({ node }) => node.system
)
)
)
}),
})

4
types/components/blocks/uspGrid.ts Normal file
View File

@@ -0,0 +1,4 @@
import type { UspGrid } from "@/types/trpc/routers/contentstack/blocks"
export interface UspGridProps extends Pick<UspGrid, "usp_grid"> {}
export type UspIcon = UspGrid["usp_grid"]["usp_card"][number]["icon"]

1
types/components/icon.ts
View File

@@ -54,6 +54,7 @@ export enum IconName {
Search = "Search",
Service = "Service",
Shopping = "Shopping",
Snowflake = "Snowflake",
StarFilled = "StarFilled",
Train = "Train",
Tripadvisor = "Tripadvisor",

1
types/requests/utils/embeds.ts
View File

@@ -5,6 +5,7 @@ export enum EmbedEnum {
LoyaltyPage = "LoyaltyPage",
AccountPage = "AccountPage",
ContentPage = "ContentPage",
HotelPage = "HotelPage",
}
export type Embed = keyof typeof EmbedEnum

14
types/trpc/routers/contentstack/blocks.ts
View File

@@ -4,13 +4,13 @@ import { cardsGridSchema } from "@/server/routers/contentstack/schemas/blocks/ca
import { contentSchema } from "@/server/routers/contentstack/schemas/blocks/content"
import { dynamicContentSchema } from "@/server/routers/contentstack/schemas/blocks/dynamicContent"
import { shortcutsSchema } from "@/server/routers/contentstack/schemas/blocks/shortcuts"
import { textColsSchema } from "@/server/routers/contentstack/schemas/blocks/textCols"
import { uspGridSchema } from "@/server/routers/contentstack/schemas/blocks/uspGrid"
export interface CardsGrid extends z.output<typeof cardsGridSchema> { }
export interface Content extends z.output<typeof contentSchema> { }
export interface DynamicContent extends z.output<typeof dynamicContentSchema> { }
export interface Shortcuts extends z.output<typeof shortcutsSchema> { }
export interface CardsGrid extends z.output<typeof cardsGridSchema> {}
export interface Content extends z.output<typeof contentSchema> {}
export interface DynamicContent extends z.output<typeof dynamicContentSchema> {}
export interface Shortcuts extends z.output<typeof shortcutsSchema> {}
export type Shortcut = Shortcuts["shortcuts"]
export interface TextCols extends z.output<typeof textColsSchema> { }
export interface TextCols extends z.output<typeof textColsSchema> {}
export interface UspGrid extends z.output<typeof uspGridSchema> {}

8
types/trpc/routers/contentstack/contentPage.ts
View File

@@ -8,15 +8,15 @@ import {
} from "@/server/routers/contentstack/contentPage/output"
export interface GetContentPageRefsSchema
extends z.input<typeof contentPageRefsSchema> { }
extends z.input<typeof contentPageRefsSchema> {}
export interface ContentPageRefs
extends z.output<typeof contentPageRefsSchema> { }
extends z.output<typeof contentPageRefsSchema> {}
export interface GetContentPageSchema
extends z.input<typeof contentPageSchema> { }
extends z.input<typeof contentPageSchema> {}
export interface ContentPage extends z.output<typeof contentPageSchema> { }
export interface ContentPage extends z.output<typeof contentPageSchema> {}
export type Block = z.output<typeof blocksSchema>