feat(SW-213): Created Text Cols component and added to Blocks in Contentstack

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 (
+    <div className={styles.columns}>
+      {text_cols.columns.map((col) => {
+        return (
+          <div key={col.title} className={styles.column}>
+            <Subtitle>{col.title}</Subtitle>
+            <div className={styles.text}>
+              <JsonToHtml
+                nodes={col.text.json.children}
+                embeds={col.text.embedded_itemsConnection.edges}
+              />
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

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));
+  }
+}

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 <TextCols text_cols={block.text_cols} />
       default:
         return null
     }

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 {

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({

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<CardsGrid, "cards_grid"> & {
   firstItem?: boolean
 }
 
+export type TextColsProps = Pick<TextCols, "text_cols">
+
 export type DynamicContentProps = {
   dynamicContent: DynamicContent["dynamic_content"]
   firstItem: boolean

types/components/content/enums.ts

@@ -6,6 +6,7 @@ export enum ContentBlocksTypenameEnum {
   ContentPageBlocksShortcuts = "ContentPageBlocksShortcuts",
   ContentPageBlocksCardsGrid = "ContentPageBlocksCardsGrid",
   ContentPageBlocksDynamicContent = "ContentPageBlocksDynamicContent",
+  ContentPageBlocksTextCols = "ContentPageBlocksTextCols",
 }
 
 export enum CardsGridEnum {

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<CardsGridRaw, "cards"> & {
 }
 export type CardsRaw = CardsGrid["cards_grid"]["cards"][number]
 
-export type Block = RteBlockContent | Shortcuts | CardsGrid | DynamicContent
+type TextColsRaw = z.infer<typeof contentPageTextCols>
+export interface TextCols extends TextColsRaw {
+  text_cols: {
+    columns: {
+      title: string
+      text: {
+        json: RTEDocument
+        embedded_itemsConnection: EdgesWithTotalCount<Embeds>
+      }
+    }[]
+  }
+}
+
+export type Block =
+  | RteBlockContent
+  | Shortcuts
+  | CardsGrid
+  | DynamicContent
+  | TextCols