diff --git a/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css index f61e97546..b21c50e61 100644 --- a/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css +++ b/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css @@ -18,8 +18,8 @@ background-color: var(--UI-Opacity-White-100); display: grid; grid-template-columns: 1fr 1fr; - margin: 0 calc(var(--Spacing-x2) * -1) calc(var(--Spacing-x9) * -1) - calc(var(--Spacing-x2) * -1); + margin: 0 calc(0px - var(--Spacing-x2)) calc(0px - var(--Spacing-x9)) + calc(0px - var(--Spacing-x2)); padding-bottom: var(--Spacing-x9); position: relative; } @@ -60,6 +60,13 @@ padding-left: var(--Spacing-x1); } +@media screen and (min-width: 768px) { + .mobileColumns { + padding-bottom: 0; + margin-bottom: 0; + } +} + @media screen and (min-width: 950px) { .mobileColumns { display: none; diff --git a/components/Blocks/DynamicContent/SectionWrapper/index.tsx b/components/Blocks/DynamicContent/SectionWrapper/index.tsx index 664486697..6c95d16df 100644 --- a/components/Blocks/DynamicContent/SectionWrapper/index.tsx +++ b/components/Blocks/DynamicContent/SectionWrapper/index.tsx @@ -1,13 +1,8 @@ import SectionContainer from "@/components/Section/Container" import SectionHeader from "@/components/Section/Header" import SectionLink from "@/components/Section/Link" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" -import Title from "@/components/TempDesignSystem/Text/Title" - -import styles from "./sectionWrapper.module.css" import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent" -import { DynamicContentEnum } from "@/types/enums/dynamicContent" export default function SectionWrapper({ children, @@ -19,17 +14,9 @@ export default function SectionWrapper({ dynamic_content.subtitle || dynamic_content.title ) - const isOverviewTable = - dynamic_content.component === - DynamicContentEnum.Blocks.components.overview_table return ( - - {isOverviewTable ? ( -
- {dynamic_content.title} - {dynamic_content.subtitle} -
- ) : displayHeader ? ( + + {displayHeader ? ( ) : null} {children} - {displayHeader ? ( + {dynamic_content.link ? ( ) : null} diff --git a/components/Blocks/DynamicContent/SectionWrapper/sectionWrapper.module.css b/components/Blocks/DynamicContent/SectionWrapper/sectionWrapper.module.css deleted file mode 100644 index 059ecdac1..000000000 --- a/components/Blocks/DynamicContent/SectionWrapper/sectionWrapper.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.container { - /* These negative margins are needed for getting the right background color for mobile loyalty table overview */ - margin: 0 calc(0px - var(--Spacing-x2)) calc(0px - var(--Spacing-x9)) - calc(0px - var(--Spacing-x2)); - overflow-x: hidden; - padding: 0 var(--Spacing-x2) var(--Spacing-x9) var(--Spacing-x2); -} - -.header { - display: grid; - gap: var(--Spacing-x1); - padding-bottom: var(--Spacing-x2); -} - -.tableTitle { - text-wrap: balance; -} - -.preamble { - color: var(--Base-Text-High-contrast); - font-size: var(--typography-Body-Regular-fontSize); - line-height: var(--typography-Body-Regular-lineHeight); - margin: 0; -} - -@media screen and (min-width: 950px) { - .header { - width: 800px; - } -} diff --git a/components/Section/Container/container.module.css b/components/Section/Container/container.module.css index 230868385..54bbc26fd 100644 --- a/components/Section/Container/container.module.css +++ b/components/Section/Container/container.module.css @@ -1,4 +1,5 @@ .container { display: grid; gap: var(--Spacing-x3); + z-index: 0; } diff --git a/components/Section/Header/header.module.css b/components/Section/Header/header.module.css index 08a25baf2..5fe35771d 100644 --- a/components/Section/Header/header.module.css +++ b/components/Section/Header/header.module.css @@ -8,6 +8,7 @@ .title, .preamble { grid-column: 1 / -1; + max-width: var(--max-width-text-block); } @media screen and (min-width: 768px) { diff --git a/components/Section/Link/link.module.css b/components/Section/Link/link.module.css index fecf1be6b..0c23f34be 100644 --- a/components/Section/Link/link.module.css +++ b/components/Section/Link/link.module.css @@ -1,6 +1,7 @@ .linkWrapper { align-items: baseline; gap: var(--Spacing-x-half); + z-index: 1; } .mobile { diff --git a/lib/graphql/Fragments/Blocks/DynamicContent.graphql b/lib/graphql/Fragments/Blocks/DynamicContent.graphql index af829e382..7b3f721b4 100644 --- a/lib/graphql/Fragments/Blocks/DynamicContent.graphql +++ b/lib/graphql/Fragments/Blocks/DynamicContent.graphql @@ -52,6 +52,48 @@ fragment DynamicContent_AccountPageRefs on AccountPageContentDynamicContent { } } +fragment DynamicContent_CollectionPage on CollectionPageBlocksDynamicContent { + dynamic_content { + component + subtitle + title + link { + text + linkConnection: pageConnection { + edges { + node { + __typename + ...AccountPageLink + ...ContentPageLink + ...CollectionPageLink + ...HotelPageLink + ...LoyaltyPageLink + } + } + } + } + } +} + +fragment DynamicContent_CollectionPageRefs on CollectionPageBlocksDynamicContent { + dynamic_content { + link { + linkConnection: pageConnection { + edges { + node { + __typename + ...ContentPageRef + ...HotelPageRef + ...LoyaltyPageRef + ...AccountPageRef + ...CollectionPageRef + } + } + } + } + } +} + fragment DynamicContent_ContentPage on ContentPageBlocksDynamicContent { dynamic_content { component diff --git a/lib/graphql/Query/CollectionPage/CollectionPage.graphql b/lib/graphql/Query/CollectionPage/CollectionPage.graphql index 239eb3c20..41bc621c5 100644 --- a/lib/graphql/Query/CollectionPage/CollectionPage.graphql +++ b/lib/graphql/Query/CollectionPage/CollectionPage.graphql @@ -1,6 +1,7 @@ #import "../../Fragments/System.graphql" #import "../../Fragments/Blocks/CardsGrid.graphql" +#import "../../Fragments/Blocks/DynamicContent.graphql" #import "../../Fragments/Blocks/Shortcuts.graphql" #import "../../Fragments/Blocks/UspGrid.graphql" @@ -20,6 +21,7 @@ query GetCollectionPage($locale: String!, $uid: String!) { ...CardsGrid_CollectionPage ...Shortcuts_CollectionPage ...UspGrid_CollectionPage + ...DynamicContent_CollectionPage } system { ...System @@ -42,6 +44,7 @@ query GetCollectionPageRefs($locale: String!, $uid: String!) { ...CardsGrid_CollectionPageRefs ...Shortcuts_CollectionPageRefs ...UspGrid_CollectionPageRefs + ...DynamicContent_CollectionPageRefs } system { ...System diff --git a/server/routers/contentstack/collectionPage/output.ts b/server/routers/contentstack/collectionPage/output.ts index 2f485654e..4d68e48ed 100644 --- a/server/routers/contentstack/collectionPage/output.ts +++ b/server/routers/contentstack/collectionPage/output.ts @@ -6,6 +6,10 @@ import { cardGridRefsSchema, cardsGridSchema, } from "../schemas/blocks/cardsGrid" +import { + dynamicContentRefsSchema, + dynamicContentSchema as blockDynamicContentSchema, +} from "../schemas/blocks/dynamicContent" import { shortcutsRefsSchema, shortcutsSchema, @@ -39,8 +43,17 @@ export const collectionPageUspGrid = z }) .merge(uspGridSchema) +export const collectionPageDynamicContent = z + .object({ + __typename: z.literal( + CollectionPageEnum.ContentStack.blocks.DynamicContent + ), + }) + .merge(blockDynamicContentSchema) + export const blocksSchema = z.discriminatedUnion("__typename", [ collectionPageCards, + collectionPageDynamicContent, collectionPageShortcuts, collectionPageUspGrid, ]) @@ -103,8 +116,17 @@ const collectionPageUspGridRefs = z }) .merge(uspGridRefsSchema) +const contentPageDynamicContentRefs = z + .object({ + __typename: z.literal( + CollectionPageEnum.ContentStack.blocks.DynamicContent + ), + }) + .merge(dynamicContentRefsSchema) + const collectionPageBlockRefsItem = z.discriminatedUnion("__typename", [ collectionPageShortcutsRefs, + contentPageDynamicContentRefs, collectionPageCardsRefs, collectionPageUspGridRefs, ]) diff --git a/types/enums/collectionPage.ts b/types/enums/collectionPage.ts index d48d68e34..567a8a457 100644 --- a/types/enums/collectionPage.ts +++ b/types/enums/collectionPage.ts @@ -2,6 +2,7 @@ export namespace CollectionPageEnum { export namespace ContentStack { export const enum blocks { CardsGrid = "CollectionPageBlocksCardsGrid", + DynamicContent = "CollectionPageBlocksDynamicContent", Shortcuts = "CollectionPageBlocksShortcuts", UspGrid = "CollectionPageBlocksUspGrid", }