Merged in feat/list-block (pull request #18)

Feat/list block

Approved-by: Michael Zetterberg
Approved-by: Simon.Emanuelsson

components/Current/Blocks/List.tsx

@@ -1,7 +0,0 @@
-export default function List() {
-  return (
-    <>
-
-    </>
-  )
-}

components/Current/Blocks/List/ListItem.tsx

@@ -0,0 +1,89 @@
+import Link from "next/link"
+import { cva } from "class-variance-authority"
+import { BlockListItemsEnum } from "@/types/requests/blocks/list"
+import type { ListItem } from "@/types/requests/blocks/list"
+import styles from "./list.module.css"
+
+const config = {
+  variants: {
+    type: {
+      default: styles.disc,
+      checkmark: styles.checkmark,
+    },
+  },
+  defaultVariants: {
+    type: "default",
+  },
+} as const
+
+const listItemStyle = cva(styles.listItem, config)
+
+export default function ListItem({ listItem }: { listItem: ListItem }) {
+  const typeName = listItem.__typename
+
+  switch (typeName) {
+    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItem:
+      return (
+        <li
+          className={listItemStyle({
+            type: listItem.list_item.list_item_style,
+          })}
+        >
+          {listItem.list_item.subtitle ? (
+            <>
+              <strong>{listItem.list_item.title}</strong>
+              <br />
+              <span>{listItem.list_item.subtitle}</span>
+            </>
+          ) : (
+            listItem.list_item.title
+          )}
+        </li>
+      )
+    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink:
+      return (
+        <li
+          className={listItemStyle({
+            type: listItem.list_item_external_link.list_item_style,
+          })}
+        >
+          <a
+            className={styles.link}
+            href={listItem.list_item_external_link.link.href}
+          >
+            <strong>{listItem.list_item_external_link.link.title}</strong>
+          </a>
+          {listItem.list_item_external_link.subtitle && (
+            <span>
+              <br />
+              {listItem.list_item_external_link.subtitle}
+            </span>
+          )}
+        </li>
+      )
+    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink:
+      const link = listItem.list_item_internal_link.pageConnection.edges[0]
+      const linkUrlWithLocale = `/${link.node.system.locale}${link.node.url}`
+      return (
+        <li
+          key={link.node.system.uid}
+          className={listItemStyle({
+            type: listItem.list_item_internal_link.list_item_style,
+          })}
+        >
+          <Link href={linkUrlWithLocale} className={styles.link}>
+            {listItem.list_item_internal_link.link_text}
+          </Link>
+          {listItem.list_item_internal_link.subtitle && (
+            <span>
+              <br />
+              {listItem.list_item_internal_link.subtitle}
+            </span>
+          )}
+        </li>
+      )
+
+    default:
+      return null
+  }
+}

components/Current/Blocks/List/index.tsx

@@ -0,0 +1,17 @@
+import type { ListProps } from "@/types/requests/blocks/list"
+
+import styles from "./list.module.css"
+import ListItem from "./ListItem"
+
+export default function List({ list }: ListProps) {
+  return (
+    <div>
+      {list.title ? <h2 className={styles.title}>{list.title}</h2> : null}
+      <ul className={styles.ul}>
+        {list.list_items.map((item, i) => (
+          <ListItem listItem={item} key={`list-item-${i}`} />
+        ))}
+      </ul>
+    </div>
+  )
+}

components/Current/Blocks/List/list.module.css

@@ -0,0 +1,65 @@
+.title {
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: normal;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    text-decoration: none;
+    text-transform: none;
+}
+
+.ul {
+    margin-bottom: 15px;
+}
+
+.listItem {
+    margin-bottom: 8px;
+    padding-left: 1.3em;
+}
+
+.checkmark {
+    padding-left: 1.6em;
+}
+
+.checkmark::before, .disc::before {
+    position:relative;
+    top: 4px;
+    display: inline-block;
+    height: 0px;
+    width: 0px;
+}
+
+.checkmark::before {
+    content: url('/Static/img/bullet-list-tick-birch-v2.svg');
+    transform: scale(.9);
+    left: -1.2em;
+}
+
+.disc::before {
+    content: "•";
+    color: rgb(157, 160, 161);
+    font-size: 26px;
+    left: -0.7em;
+}
+
+.link {
+    border-bottom: 1px dotted #00838e;
+    color: #00838e;
+    text-decoration: none;
+    background-color: transparent;
+}
+
+.link:active, .link:hover {
+    text-decoration: underline;
+    outline: 0;
+}
+
+.link:hover {
+    border-bottom: none;
+}
+
+@media screen and (min-width: 950px) {
+.title {
+    font-size: 1.375rem;
+  }
+}