feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/SectionWrapper/index.tsx

@@ -0,0 +1,46 @@
+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,
+  dynamic_content,
+  firstItem,
+}: React.PropsWithChildren<DynamicContentProps>) {
+  const displayHeader = !!(
+    dynamic_content.link ||
+    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 ? (
+        <SectionHeader
+          link={dynamic_content.link}
+          preamble={dynamic_content.subtitle}
+          title={dynamic_content.title}
+          topTitle={firstItem}
+        />
+      ) : null}
+      {children}
+      {displayHeader ? (
+        <SectionLink link={dynamic_content.link} variant="mobile" />
+      ) : null}
+    </SectionContainer>
+  )
+}

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

@@ -0,0 +1,30 @@
+.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;
+  }
+}