Add listBlock to ui

src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx

@@ -1,6 +1,7 @@
 import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/lib/interfaces/customerCases";
 
 import ImageSection from "./image/ImageSection";
+import ListBlock from "./list/ListBlock";
 import QuoteBlock from "./quote/QuoteBlock";
 import ResultsBlock from "./results/ResultsBlock";
 import RichTextSection from "./richText/RichTextSection";
@@ -22,5 +23,7 @@ export function CustomerCaseSection({
       return <ImageSection section={section} />;
     case "resultsBlock":
       return <ResultsBlock section={section} />;
+    case "listBlock":
+      return <ListBlock section={section} />;
   }
 }

src/components/customerCases/customerCase/sections/list/ListBlock.tsx

@@ -0,0 +1,32 @@
+import Text from "src/components/text/Text";
+import { ListBlock as ListBlockObject } from "studioShared/lib/interfaces/listBlock";
+
+import styles from "./listBlock.module.css";
+
+export interface ListBlockProps {
+  section: ListBlockObject;
+}
+
+export default function ListBlock({ section }: ListBlockProps) {
+  console.log(section);
+  return (
+    section.description && (
+      <div className={styles.wrapper}>
+        <div className={styles.listwrapper}>
+          <Text type="h4">{section.description}</Text>
+          <div className={styles.tagwrapper}>
+            {section.list?.map((listItem) => (
+              <Text
+                type="labelRegular"
+                key={listItem._key}
+                className={styles.tag}
+              >
+                {listItem.text}
+              </Text>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  );
+}

src/components/customerCases/customerCase/sections/list/listBlock.module.css

@@ -0,0 +1,34 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.listwrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  max-width: 960px;
+}
+
+.tagwrapper {
+  display: flex;
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 0.5rem 0.5rem;
+  align-self: stretch;
+  flex-wrap: wrap;
+}
+
+.tag {
+  display: flex;
+  height: 2.4375rem;
+  padding: 0.375rem 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid #0e0f0f;
+}

src/components/text/text.module.css

@@ -38,6 +38,13 @@
   font-weight: 600;
 }
 
+.h4 {
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%; /* 1.8rem */
+}
+
 /* TODO: add font variables */
 /* .h4 */
 /* .h5 */