From efb8d278cd8223bc3b3d847fc88894fa7b77a565 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Wed, 18 Sep 2024 12:41:40 +0200 Subject: [PATCH 01/10] fix(sw-398): moved logic for disable scroll in mobile and fixed issue that page is scrolling when toggling languageswitcher --- app/globals.css | 11 ++++++++ components/LanguageSwitcher/index.tsx | 36 +++++++++++++-------------- server/trpc.ts | 2 +- stores/main-menu.ts | 5 ++++ 4 files changed, 35 insertions(+), 19 deletions(-) diff --git a/app/globals.css b/app/globals.css index 67624cbcf..5ec453db0 100644 --- a/app/globals.css +++ b/app/globals.css @@ -123,6 +123,7 @@ html, body { margin: 0; padding: 0; + scroll-behavior: smooth; } body { @@ -130,6 +131,16 @@ body { overflow-x: hidden; } +body.overflow-hidden { + overflow: hidden; +} +@media screen and (min-width: 768px) { + body.overflow-hidden { + overflow: auto; + overflow-x: hidden; + } +} + ul { padding-inline-start: 0; margin-block-start: 0; diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx index 7a5ecb6b2..3d0543051 100644 --- a/components/LanguageSwitcher/index.tsx +++ b/components/LanguageSwitcher/index.tsx @@ -1,6 +1,5 @@ "use client" -import { useEffect } from "react" import { useIntl } from "react-intl" import { languages } from "@/constants/languages" @@ -28,12 +27,16 @@ export default function LanguageSwitcher({ }: LanguageSwitcherProps) { const intl = useIntl() const currentLanguage = useLang() - const { - toggleDropdown, - isFooterLanguageSwitcherOpen, - isHeaderLanguageSwitcherOpen, - isHeaderLanguageSwitcherMobileOpen, - } = useDropdownStore() + const toggleDropdown = useDropdownStore((state) => state.toggleDropdown) + const isFooterLanguageSwitcherOpen = useDropdownStore( + (state) => state.isFooterLanguageSwitcherOpen + ) + const isHeaderLanguageSwitcherOpen = useDropdownStore( + (state) => state.isHeaderLanguageSwitcherOpen + ) + const isHeaderLanguageSwitcherMobileOpen = useDropdownStore( + (state) => state.isHeaderLanguageSwitcherMobileOpen + ) const isFooter = type === LanguageSwitcherTypesEnum.Footer const isHeader = !isFooter @@ -58,17 +61,14 @@ export default function LanguageSwitcher({ } }) - useEffect(() => { - if (isFooter && isFooterLanguageSwitcherOpen) { - document.body.style.overflow = "hidden" - } else { - document.body.style.overflow = "" - } + function handleClick() { + const scrollPosition = window.scrollY + toggleDropdown(dropdownType) - return () => { - document.body.style.overflow = "" - } - }, [isFooter, isFooterLanguageSwitcherOpen]) + requestAnimationFrame(() => { + window.scrollTo(0, scrollPosition) + }) + } const classNames = languageSwitcherVariants({ color, position }) @@ -82,7 +82,7 @@ export default function LanguageSwitcher({ ? "Close language menu" : "Open language menu", })} - onClick={() => toggleDropdown(dropdownType)} + onClick={handleClick} > {languages[currentLanguage]} diff --git a/server/trpc.ts b/server/trpc.ts index 7a7a7f7ea..e3085f216 100644 --- a/server/trpc.ts +++ b/server/trpc.ts @@ -4,13 +4,13 @@ import { ZodError } from "zod" import { env } from "@/env/server" -import { type Context, createContext } from "./context" import { badRequestError, internalServerError, sessionExpiredError, unauthorizedError, } from "./errors/trpc" +import { type Context, createContext } from "./context" import { fetchServiceToken } from "./tokenManager" import { transformer } from "./transformer" diff --git a/stores/main-menu.ts b/stores/main-menu.ts index 29e039e99..4ccbcb290 100644 --- a/stores/main-menu.ts +++ b/stores/main-menu.ts @@ -85,6 +85,11 @@ const useDropdownStore = create((set, get) => ({ state.isMyPagesMenuOpen = false state.isHeaderLanguageSwitcherOpen = false state.isHeaderLanguageSwitcherMobileOpen = false + if (state.isFooterLanguageSwitcherOpen) { + document.body.classList.add("overflow-hidden") + } else { + document.body.classList.remove("overflow-hidden") + } break } }) From e0e0ef2712b97c177ecbe9e5580e11aaacace739 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Wed, 18 Sep 2024 15:12:11 +0200 Subject: [PATCH 02/10] feat(SW-213): Created Text Cols component and added to Blocks in Contentstack --- components/Content/Blocks/TextCols/index.tsx | 26 ++++++++++++++ .../Blocks/TextCols/textcols.module.css | 36 +++++++++++++++++++ components/Content/Blocks/index.tsx | 3 ++ lib/graphql/Query/ContentPage.graphql | 22 ++++++++++++ .../contentstack/contentPage/output.ts | 22 +++++++++--- types/components/content/blocks.ts | 3 ++ types/components/content/enums.ts | 1 + .../trpc/routers/contentstack/contentPage.ts | 21 ++++++++++- 8 files changed, 129 insertions(+), 5 deletions(-) create mode 100644 components/Content/Blocks/TextCols/index.tsx create mode 100644 components/Content/Blocks/TextCols/textcols.module.css diff --git a/components/Content/Blocks/TextCols/index.tsx b/components/Content/Blocks/TextCols/index.tsx new file mode 100644 index 000000000..4777c496a --- /dev/null +++ b/components/Content/Blocks/TextCols/index.tsx @@ -0,0 +1,26 @@ +import JsonToHtml from "@/components/JsonToHtml" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" + +import styles from "./textcols.module.css" + +import { TextColsProps } from "@/types/components/content/blocks" + +export default function TextCols({ text_cols }: TextColsProps) { + return ( +
+ {text_cols.columns.map((col) => { + return ( +
+ {col.title} +
+ +
+
+ ) + })} +
+ ) +} diff --git a/components/Content/Blocks/TextCols/textcols.module.css b/components/Content/Blocks/TextCols/textcols.module.css new file mode 100644 index 000000000..d9fd60a1c --- /dev/null +++ b/components/Content/Blocks/TextCols/textcols.module.css @@ -0,0 +1,36 @@ +.columns { + display: flex; + flex-direction: column; + gap: var(--Spacing-x3); + padding: var(--Spacing-x3) var(--Spacing-x4); + background-color: var(--UI-Opacity-White-100); +} + +.column { + padding-bottom: var(--Spacing-x2); + border-bottom: 1px solid var(--Base-Border-Subtle); + gap: var(--Spacing-x1); + display: flex; + flex-direction: column; +} + +.text p { + color: var(--UI-Text-High-contrast); + line-height: var(--Spacing-x3); +} + +.text section { + gap: 0; +} + +@media (min-width: 768px) { + .columns { + flex-direction: row; + flex-wrap: wrap; + } + + .column { + flex: 0 0 calc(50% - var(--Spacing-x3)); + max-width: calc(50% - var(--Spacing-x3)); + } +} diff --git a/components/Content/Blocks/index.tsx b/components/Content/Blocks/index.tsx index 9c396ed11..fc162f590 100644 --- a/components/Content/Blocks/index.tsx +++ b/components/Content/Blocks/index.tsx @@ -3,6 +3,7 @@ import JsonToHtml from "@/components/JsonToHtml" import Shortcuts from "@/components/MyPages/Blocks/Shortcuts" import CardsGrid from "./CardsGrid" +import TextCols from "./TextCols" import type { BlocksProps } from "@/types/components/content/blocks" import { ContentBlocksTypenameEnum } from "@/types/components/content/enums" @@ -38,6 +39,8 @@ export function Blocks({ blocks }: BlocksProps) { firstItem={firstItem} /> ) + case ContentBlocksTypenameEnum.ContentPageBlocksTextCols: + return default: return null } diff --git a/lib/graphql/Query/ContentPage.graphql b/lib/graphql/Query/ContentPage.graphql index dec4b0d6f..e84612c0c 100644 --- a/lib/graphql/Query/ContentPage.graphql +++ b/lib/graphql/Query/ContentPage.graphql @@ -98,6 +98,28 @@ query GetContentPage($locale: String!, $uid: String!) { } } } + ... on ContentPageBlocksTextCols { + __typename + text_cols { + columns { + title + text { + json + embedded_itemsConnection { + edges { + node { + __typename + ...LoyaltyPageLink + ...ContentPageLink + ...HotelPageLink + } + } + totalCount + } + } + } + } + } } title header { diff --git a/server/routers/contentstack/contentPage/output.ts b/server/routers/contentstack/contentPage/output.ts index 1aa324041..21d7b1708 100644 --- a/server/routers/contentstack/contentPage/output.ts +++ b/server/routers/contentstack/contentPage/output.ts @@ -12,12 +12,8 @@ import { SidebarDynamicComponentEnum, SidebarTypenameEnum, } from "@/types/components/content/enums" -import { ImageVaultAsset } from "@/types/components/imageVault" -import { Embeds } from "@/types/requests/embeds" import { PageLinkEnum } from "@/types/requests/pageLinks" import { RTEEmbedsEnum } from "@/types/requests/rte" -import { EdgesWithTotalCount } from "@/types/requests/utils/edges" -import { RTEDocument } from "@/types/rte/node" // Block schemas export const contentPageBlockTextContent = z.object({ @@ -135,11 +131,29 @@ export const contentPageCards = z.object({ }), }) +export const contentPageTextCols = z.object({ + __typename: z.literal(ContentBlocksTypenameEnum.ContentPageBlocksTextCols), + text_cols: z.object({ + columns: z.array( + z.object({ + title: z.string(), + text: z.object({ + json: z.any(), + embedded_itemsConnection: z.object({ + edges: z.array(z.any()), + totalCount: z.number(), + }), + }), + }) + ), + }), +}) const contentPageBlockItem = z.discriminatedUnion("__typename", [ contentPageBlockTextContent, contentPageCards, contentPageDynamicContent, contentPageShortcuts, + contentPageTextCols, ]) export const contentPageSidebarTextContent = z.object({ diff --git a/types/components/content/blocks.ts b/types/components/content/blocks.ts index a97ac9780..a9f27bafb 100644 --- a/types/components/content/blocks.ts +++ b/types/components/content/blocks.ts @@ -7,6 +7,7 @@ import { Block, CardsGrid, DynamicContent, + TextCols, } from "@/types/trpc/routers/contentstack/contentPage" export type BlocksProps = { @@ -17,6 +18,8 @@ export type CardsGridProps = Pick & { firstItem?: boolean } +export type TextColsProps = Pick + export type DynamicContentProps = { dynamicContent: DynamicContent["dynamic_content"] firstItem: boolean diff --git a/types/components/content/enums.ts b/types/components/content/enums.ts index 3bc20ac48..cafb608fa 100644 --- a/types/components/content/enums.ts +++ b/types/components/content/enums.ts @@ -6,6 +6,7 @@ export enum ContentBlocksTypenameEnum { ContentPageBlocksShortcuts = "ContentPageBlocksShortcuts", ContentPageBlocksCardsGrid = "ContentPageBlocksCardsGrid", ContentPageBlocksDynamicContent = "ContentPageBlocksDynamicContent", + ContentPageBlocksTextCols = "ContentPageBlocksTextCols", } export enum CardsGridEnum { diff --git a/types/trpc/routers/contentstack/contentPage.ts b/types/trpc/routers/contentstack/contentPage.ts index 4c3f27ce6..35bb9118f 100644 --- a/types/trpc/routers/contentstack/contentPage.ts +++ b/types/trpc/routers/contentstack/contentPage.ts @@ -9,6 +9,7 @@ import { contentPageShortcuts, contentPageSidebarDynamicContent, contentPageSidebarTextContent, + contentPageTextCols, loyaltyCardBlock, validateContentPageRefsSchema, validateContentPageSchema, @@ -81,4 +82,22 @@ export type CardsGrid = Omit & { } export type CardsRaw = CardsGrid["cards_grid"]["cards"][number] -export type Block = RteBlockContent | Shortcuts | CardsGrid | DynamicContent +type TextColsRaw = z.infer +export interface TextCols extends TextColsRaw { + text_cols: { + columns: { + title: string + text: { + json: RTEDocument + embedded_itemsConnection: EdgesWithTotalCount + } + }[] + } +} + +export type Block = + | RteBlockContent + | Shortcuts + | CardsGrid + | DynamicContent + | TextCols From dede0cebb37e7bbfea9d6aedbf82708c4d8a3cec Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Wed, 18 Sep 2024 15:14:01 +0200 Subject: [PATCH 03/10] feat(sw-213): added type --- components/Content/Blocks/TextCols/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Content/Blocks/TextCols/index.tsx b/components/Content/Blocks/TextCols/index.tsx index 4777c496a..8fd79c478 100644 --- a/components/Content/Blocks/TextCols/index.tsx +++ b/components/Content/Blocks/TextCols/index.tsx @@ -3,7 +3,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import styles from "./textcols.module.css" -import { TextColsProps } from "@/types/components/content/blocks" +import type { TextColsProps } from "@/types/components/content/blocks" export default function TextCols({ text_cols }: TextColsProps) { return ( From f27dee0c56afd6a6720f2ddf352befd3082f9a5c Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Wed, 18 Sep 2024 15:12:11 +0200 Subject: [PATCH 04/10] feat(SW-213): Created Text Cols component and added to Blocks in Contentstack --- components/Content/Blocks/TextCols/index.tsx | 26 ++++++++++++++ .../Blocks/TextCols/textcols.module.css | 36 +++++++++++++++++++ components/Content/Blocks/index.tsx | 3 ++ lib/graphql/Query/ContentPage.graphql | 22 ++++++++++++ .../contentstack/contentPage/output.ts | 22 +++++++++--- types/components/content/blocks.ts | 3 ++ types/components/content/enums.ts | 1 + .../trpc/routers/contentstack/contentPage.ts | 21 ++++++++++- 8 files changed, 129 insertions(+), 5 deletions(-) create mode 100644 components/Content/Blocks/TextCols/index.tsx create mode 100644 components/Content/Blocks/TextCols/textcols.module.css diff --git a/components/Content/Blocks/TextCols/index.tsx b/components/Content/Blocks/TextCols/index.tsx new file mode 100644 index 000000000..4777c496a --- /dev/null +++ b/components/Content/Blocks/TextCols/index.tsx @@ -0,0 +1,26 @@ +import JsonToHtml from "@/components/JsonToHtml" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" + +import styles from "./textcols.module.css" + +import { TextColsProps } from "@/types/components/content/blocks" + +export default function TextCols({ text_cols }: TextColsProps) { + return ( +
+ {text_cols.columns.map((col) => { + return ( +
+ {col.title} +
+ +
+
+ ) + })} +
+ ) +} diff --git a/components/Content/Blocks/TextCols/textcols.module.css b/components/Content/Blocks/TextCols/textcols.module.css new file mode 100644 index 000000000..d9fd60a1c --- /dev/null +++ b/components/Content/Blocks/TextCols/textcols.module.css @@ -0,0 +1,36 @@ +.columns { + display: flex; + flex-direction: column; + gap: var(--Spacing-x3); + padding: var(--Spacing-x3) var(--Spacing-x4); + background-color: var(--UI-Opacity-White-100); +} + +.column { + padding-bottom: var(--Spacing-x2); + border-bottom: 1px solid var(--Base-Border-Subtle); + gap: var(--Spacing-x1); + display: flex; + flex-direction: column; +} + +.text p { + color: var(--UI-Text-High-contrast); + line-height: var(--Spacing-x3); +} + +.text section { + gap: 0; +} + +@media (min-width: 768px) { + .columns { + flex-direction: row; + flex-wrap: wrap; + } + + .column { + flex: 0 0 calc(50% - var(--Spacing-x3)); + max-width: calc(50% - var(--Spacing-x3)); + } +} diff --git a/components/Content/Blocks/index.tsx b/components/Content/Blocks/index.tsx index 9c396ed11..fc162f590 100644 --- a/components/Content/Blocks/index.tsx +++ b/components/Content/Blocks/index.tsx @@ -3,6 +3,7 @@ import JsonToHtml from "@/components/JsonToHtml" import Shortcuts from "@/components/MyPages/Blocks/Shortcuts" import CardsGrid from "./CardsGrid" +import TextCols from "./TextCols" import type { BlocksProps } from "@/types/components/content/blocks" import { ContentBlocksTypenameEnum } from "@/types/components/content/enums" @@ -38,6 +39,8 @@ export function Blocks({ blocks }: BlocksProps) { firstItem={firstItem} /> ) + case ContentBlocksTypenameEnum.ContentPageBlocksTextCols: + return default: return null } diff --git a/lib/graphql/Query/ContentPage.graphql b/lib/graphql/Query/ContentPage.graphql index dec4b0d6f..e84612c0c 100644 --- a/lib/graphql/Query/ContentPage.graphql +++ b/lib/graphql/Query/ContentPage.graphql @@ -98,6 +98,28 @@ query GetContentPage($locale: String!, $uid: String!) { } } } + ... on ContentPageBlocksTextCols { + __typename + text_cols { + columns { + title + text { + json + embedded_itemsConnection { + edges { + node { + __typename + ...LoyaltyPageLink + ...ContentPageLink + ...HotelPageLink + } + } + totalCount + } + } + } + } + } } title header { diff --git a/server/routers/contentstack/contentPage/output.ts b/server/routers/contentstack/contentPage/output.ts index 1aa324041..21d7b1708 100644 --- a/server/routers/contentstack/contentPage/output.ts +++ b/server/routers/contentstack/contentPage/output.ts @@ -12,12 +12,8 @@ import { SidebarDynamicComponentEnum, SidebarTypenameEnum, } from "@/types/components/content/enums" -import { ImageVaultAsset } from "@/types/components/imageVault" -import { Embeds } from "@/types/requests/embeds" import { PageLinkEnum } from "@/types/requests/pageLinks" import { RTEEmbedsEnum } from "@/types/requests/rte" -import { EdgesWithTotalCount } from "@/types/requests/utils/edges" -import { RTEDocument } from "@/types/rte/node" // Block schemas export const contentPageBlockTextContent = z.object({ @@ -135,11 +131,29 @@ export const contentPageCards = z.object({ }), }) +export const contentPageTextCols = z.object({ + __typename: z.literal(ContentBlocksTypenameEnum.ContentPageBlocksTextCols), + text_cols: z.object({ + columns: z.array( + z.object({ + title: z.string(), + text: z.object({ + json: z.any(), + embedded_itemsConnection: z.object({ + edges: z.array(z.any()), + totalCount: z.number(), + }), + }), + }) + ), + }), +}) const contentPageBlockItem = z.discriminatedUnion("__typename", [ contentPageBlockTextContent, contentPageCards, contentPageDynamicContent, contentPageShortcuts, + contentPageTextCols, ]) export const contentPageSidebarTextContent = z.object({ diff --git a/types/components/content/blocks.ts b/types/components/content/blocks.ts index a97ac9780..a9f27bafb 100644 --- a/types/components/content/blocks.ts +++ b/types/components/content/blocks.ts @@ -7,6 +7,7 @@ import { Block, CardsGrid, DynamicContent, + TextCols, } from "@/types/trpc/routers/contentstack/contentPage" export type BlocksProps = { @@ -17,6 +18,8 @@ export type CardsGridProps = Pick & { firstItem?: boolean } +export type TextColsProps = Pick + export type DynamicContentProps = { dynamicContent: DynamicContent["dynamic_content"] firstItem: boolean diff --git a/types/components/content/enums.ts b/types/components/content/enums.ts index 3bc20ac48..cafb608fa 100644 --- a/types/components/content/enums.ts +++ b/types/components/content/enums.ts @@ -6,6 +6,7 @@ export enum ContentBlocksTypenameEnum { ContentPageBlocksShortcuts = "ContentPageBlocksShortcuts", ContentPageBlocksCardsGrid = "ContentPageBlocksCardsGrid", ContentPageBlocksDynamicContent = "ContentPageBlocksDynamicContent", + ContentPageBlocksTextCols = "ContentPageBlocksTextCols", } export enum CardsGridEnum { diff --git a/types/trpc/routers/contentstack/contentPage.ts b/types/trpc/routers/contentstack/contentPage.ts index 4c3f27ce6..35bb9118f 100644 --- a/types/trpc/routers/contentstack/contentPage.ts +++ b/types/trpc/routers/contentstack/contentPage.ts @@ -9,6 +9,7 @@ import { contentPageShortcuts, contentPageSidebarDynamicContent, contentPageSidebarTextContent, + contentPageTextCols, loyaltyCardBlock, validateContentPageRefsSchema, validateContentPageSchema, @@ -81,4 +82,22 @@ export type CardsGrid = Omit & { } export type CardsRaw = CardsGrid["cards_grid"]["cards"][number] -export type Block = RteBlockContent | Shortcuts | CardsGrid | DynamicContent +type TextColsRaw = z.infer +export interface TextCols extends TextColsRaw { + text_cols: { + columns: { + title: string + text: { + json: RTEDocument + embedded_itemsConnection: EdgesWithTotalCount + } + }[] + } +} + +export type Block = + | RteBlockContent + | Shortcuts + | CardsGrid + | DynamicContent + | TextCols From 5a955e9fb2d936120913b0d95fabcf2fd7ada64e Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Wed, 18 Sep 2024 15:14:01 +0200 Subject: [PATCH 05/10] feat(sw-213): added type --- components/Content/Blocks/TextCols/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Content/Blocks/TextCols/index.tsx b/components/Content/Blocks/TextCols/index.tsx index 4777c496a..8fd79c478 100644 --- a/components/Content/Blocks/TextCols/index.tsx +++ b/components/Content/Blocks/TextCols/index.tsx @@ -3,7 +3,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import styles from "./textcols.module.css" -import { TextColsProps } from "@/types/components/content/blocks" +import type { TextColsProps } from "@/types/components/content/blocks" export default function TextCols({ text_cols }: TextColsProps) { return ( From d8b12356d44f489a6fb83e2c946dca0ea54158f4 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 19 Sep 2024 10:11:26 +0200 Subject: [PATCH 06/10] feat(SW-213): Added renderOptions for text cols --- components/Content/Blocks/TextCols/index.tsx | 3 + .../Content/Blocks/TextCols/renderOptions.tsx | 70 +++++++++++++++++++ .../Blocks/TextCols/textcols.module.css | 7 +- 3 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 components/Content/Blocks/TextCols/renderOptions.tsx diff --git a/components/Content/Blocks/TextCols/index.tsx b/components/Content/Blocks/TextCols/index.tsx index 8fd79c478..e61fe754f 100644 --- a/components/Content/Blocks/TextCols/index.tsx +++ b/components/Content/Blocks/TextCols/index.tsx @@ -1,6 +1,8 @@ import JsonToHtml from "@/components/JsonToHtml" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import { renderOptions } from "./renderOptions" + import styles from "./textcols.module.css" import type { TextColsProps } from "@/types/components/content/blocks" @@ -16,6 +18,7 @@ export default function TextCols({ text_cols }: TextColsProps) { diff --git a/components/Content/Blocks/TextCols/renderOptions.tsx b/components/Content/Blocks/TextCols/renderOptions.tsx new file mode 100644 index 000000000..55582de95 --- /dev/null +++ b/components/Content/Blocks/TextCols/renderOptions.tsx @@ -0,0 +1,70 @@ +import Link from "@/components/TempDesignSystem/Link" + +import styles from "./textcols.module.css" + +import type { EmbedByUid } from "@/types/components/jsontohtml" +import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums" +import type { + RTEDefaultNode, + RTENext, + RTENode, + RTERegularNode, +} from "@/types/rte/node" +import type { RenderOptions } from "@/types/rte/option" + +export const renderOptions: RenderOptions = { + [RTETypeEnum.p]: ( + node: RTEDefaultNode, + embeds: EmbedByUid, + next: RTENext, + fullRenderOptions: RenderOptions + ) => { + return ( +

+ {next(node.children, embeds, fullRenderOptions)} +

+ ) + }, + [RTETypeEnum.a]: ( + node: RTERegularNode, + embeds: EmbedByUid, + next: RTENext, + fullRenderOptions: RenderOptions + ) => { + if (node.attrs.url) { + return ( + + {next(node.children, embeds, fullRenderOptions)} + + ) + } + 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 ( + + {next(node.children, embeds, fullRenderOptions)} + + ) + } + + return null + } + }, +} diff --git a/components/Content/Blocks/TextCols/textcols.module.css b/components/Content/Blocks/TextCols/textcols.module.css index d9fd60a1c..dfa0a3c49 100644 --- a/components/Content/Blocks/TextCols/textcols.module.css +++ b/components/Content/Blocks/TextCols/textcols.module.css @@ -14,9 +14,14 @@ flex-direction: column; } -.text p { +.p { color: var(--UI-Text-High-contrast); line-height: var(--Spacing-x3); + margin: 0; +} + +.a { + color: var(--Base-Text-High-contrast); } .text section { From d9d0fe5992671a7d3333b6311a5b8af3b24c0dcd Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 19 Sep 2024 10:21:01 +0200 Subject: [PATCH 07/10] feat(SW-213): Use camelCase as prop --- components/Content/Blocks/TextCols/index.tsx | 4 ++-- components/Content/Blocks/index.tsx | 2 +- types/components/content/blocks.ts | 4 +++- types/trpc/routers/contentstack/contentPage.ts | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/components/Content/Blocks/TextCols/index.tsx b/components/Content/Blocks/TextCols/index.tsx index e61fe754f..9f339bc3c 100644 --- a/components/Content/Blocks/TextCols/index.tsx +++ b/components/Content/Blocks/TextCols/index.tsx @@ -7,10 +7,10 @@ import styles from "./textcols.module.css" import type { TextColsProps } from "@/types/components/content/blocks" -export default function TextCols({ text_cols }: TextColsProps) { +export default function TextCols({ textCols }: TextColsProps) { return (
- {text_cols.columns.map((col) => { + {textCols.columns.map((col) => { return (
{col.title} diff --git a/components/Content/Blocks/index.tsx b/components/Content/Blocks/index.tsx index fc162f590..77dabdfd1 100644 --- a/components/Content/Blocks/index.tsx +++ b/components/Content/Blocks/index.tsx @@ -40,7 +40,7 @@ export function Blocks({ blocks }: BlocksProps) { /> ) case ContentBlocksTypenameEnum.ContentPageBlocksTextCols: - return + return default: return null } diff --git a/types/components/content/blocks.ts b/types/components/content/blocks.ts index a9f27bafb..a29912359 100644 --- a/types/components/content/blocks.ts +++ b/types/components/content/blocks.ts @@ -18,7 +18,9 @@ export type CardsGridProps = Pick & { firstItem?: boolean } -export type TextColsProps = Pick +export type TextColsProps = { + textCols: TextCols["text_cols"] +} export type DynamicContentProps = { dynamicContent: DynamicContent["dynamic_content"] diff --git a/types/trpc/routers/contentstack/contentPage.ts b/types/trpc/routers/contentstack/contentPage.ts index 35bb9118f..29eaf983e 100644 --- a/types/trpc/routers/contentstack/contentPage.ts +++ b/types/trpc/routers/contentstack/contentPage.ts @@ -84,7 +84,7 @@ export type CardsRaw = CardsGrid["cards_grid"]["cards"][number] type TextColsRaw = z.infer export interface TextCols extends TextColsRaw { - text_cols: { + textCols: { columns: { title: string text: { From 8cccdafcf1de442c10a8b4f9a2f2e0aa10f11ce1 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 19 Sep 2024 15:15:50 +0200 Subject: [PATCH 08/10] feat(sw-213): updated html to section --- components/Content/Blocks/TextCols/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Content/Blocks/TextCols/index.tsx b/components/Content/Blocks/TextCols/index.tsx index 9f339bc3c..afcc6d0cf 100644 --- a/components/Content/Blocks/TextCols/index.tsx +++ b/components/Content/Blocks/TextCols/index.tsx @@ -12,7 +12,7 @@ export default function TextCols({ textCols }: TextColsProps) {
{textCols.columns.map((col) => { return ( -
+
{col.title}
-
+ ) })}
From f149831c23afcfcee68e0101a2f19e452e7b19e6 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 20 Sep 2024 11:23:24 +0200 Subject: [PATCH 09/10] feat(sw-213): Removed background --- components/Content/Blocks/TextCols/textcols.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/components/Content/Blocks/TextCols/textcols.module.css b/components/Content/Blocks/TextCols/textcols.module.css index dfa0a3c49..9f8ad92eb 100644 --- a/components/Content/Blocks/TextCols/textcols.module.css +++ b/components/Content/Blocks/TextCols/textcols.module.css @@ -3,7 +3,6 @@ flex-direction: column; gap: var(--Spacing-x3); padding: var(--Spacing-x3) var(--Spacing-x4); - background-color: var(--UI-Opacity-White-100); } .column { From cfb5ac6d46029c1e1651f0c5355730445b995938 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 20 Sep 2024 11:42:11 +0200 Subject: [PATCH 10/10] feat(sw-214): Target first section with style --- components/Content/Blocks/TextCols/textcols.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Content/Blocks/TextCols/textcols.module.css b/components/Content/Blocks/TextCols/textcols.module.css index 9f8ad92eb..b3e9e2824 100644 --- a/components/Content/Blocks/TextCols/textcols.module.css +++ b/components/Content/Blocks/TextCols/textcols.module.css @@ -23,7 +23,7 @@ color: var(--Base-Text-High-contrast); } -.text section { +.text > section { gap: 0; }