feat(SW-1269): added dynamic content to collection page

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;

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 (
-    <SectionContainer className={styles.container}>
-      {isOverviewTable ? (
-        <div className={styles.header}>
-          <Title className={styles.tableTitle}> {dynamic_content.title}</Title>
-          <Subtitle>{dynamic_content.subtitle}</Subtitle>
-        </div>
-      ) : displayHeader ? (
+    <SectionContainer>
+      {displayHeader ? (
         <SectionHeader
           link={dynamic_content.link}
           preamble={dynamic_content.subtitle}
@@ -38,7 +25,7 @@ export default function SectionWrapper({
         />
       ) : null}
       {children}
-      {displayHeader ? (
+      {dynamic_content.link ? (
         <SectionLink link={dynamic_content.link} variant="mobile" />
       ) : null}
     </SectionContainer>

components/Blocks/DynamicContent/SectionWrapper/sectionWrapper.module.css

@@ -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;
-  }
-}

components/Section/Container/container.module.css

@@ -1,4 +1,5 @@
 .container {
   display: grid;
   gap: var(--Spacing-x3);
+  z-index: 0;
 }

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

components/Section/Link/link.module.css

@@ -1,6 +1,7 @@
 .linkWrapper {
   align-items: baseline;
   gap: var(--Spacing-x-half);
+  z-index: 1;
 }
 
 .mobile {