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

Feat/list block Approved-by: Michael Zetterberg Approved-by: Simon.Emanuelsson
2024-02-12 12:51:57 +00:00
parent 59b4e83d0b 32cf13613c
commit cb502fbada
12 changed files with 256 additions and 45 deletions
--- a/components/Current/Blocks/List.tsx
+++ b/components/Current/Blocks/List.tsx
@@ -1,7 +0,0 @@
-export default function List() {
-  return (
-    <>
-
-    </>
-  )
-}
--- a/components/Current/Blocks/List/ListItem.tsx
+++ b/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
+  }
+}
--- a/components/Current/Blocks/List/index.tsx
+++ b/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>
+  )
+}
--- a/components/Current/Blocks/List/list.module.css
+++ b/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;
+  }
+}
--- a/lib/graphql/Fragments/PageLinks.graphql
+++ b/lib/graphql/Fragments/PageLinks.graphql
@@ -1,6 +1,7 @@
 fragment CurrentBlocksPageLink on CurrentBlocksPage {
  system {
    uid
+    locale
  }
  title
  url
@@ -9,7 +10,8 @@ fragment CurrentBlocksPageLink on CurrentBlocksPage {
 fragment TempPageLink on TempPage {
  system {
    uid
+    locale
  }
  title
  url
-}
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
      "name": "web",
      "version": "0.1.0",
      "dependencies": {
+        "class-variance-authority": "^0.7.0",
        "graphql": "16.8.1",
        "graphql-request": "6.1.0",
        "graphql-tag": "2.12.6",
@@ -873,11 +874,30 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
    "node_modules/client-only": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
    },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
    "lint": "next lint && tsc"
  },
  "dependencies": {
+    "class-variance-authority": "^0.7.0",
    "graphql": "16.8.1",
    "graphql-request": "6.1.0",
    "graphql-tag": "2.12.6",
--- a/types/requests/blocks/list.ts
+++ b/types/requests/blocks/list.ts
@@ -1,6 +1,7 @@
 import type { Edges } from "../utils/edges"
-import type { ExternalLink } from "../utils/externalLink"
+import type { TempPageLink } from "../utils/tempPageLink"
 import type { PageLink } from "../utils/pageLink"
+import { Typename } from "../utils/typename"

 enum ListItemStyleEnum {
  checkmark = "checkmark",
@@ -9,38 +10,60 @@ enum ListItemStyleEnum {

 type ListItemStyle = keyof typeof ListItemStyleEnum

-type ExternalLinkListItem = {
-  list_item_external_link: {
-    link: {
-      href: string
+export enum BlockListItemsEnum {
+  CurrentBlocksPageBlocksListBlockListItemsListItem = "CurrentBlocksPageBlocksListBlockListItemsListItem",
+  CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink = "CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink",
+  CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink = "CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink",
+}
+
+type ExternalLinkListItem = Typename<
+  {
+    list_item_external_link: {
+      link: {
+        href: string
+        title: string
+      }
+      list_item_style: ListItemStyle
+      subtitle?: string
+    }
+  },
+  BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink
+>
+
+type InternalLinkListItem = Typename<
+  {
+    list_item_internal_link: {
+      link_text?: string
+      list_item_style: ListItemStyle
+      subtitle?: string
+      pageConnection: Edges<TempPageLink | PageLink>
+    }
+  },
+  BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink
+>
+
+type RegularListItem = Typename<
+  {
+    list_item: {
+      list_item_style: ListItemStyle
+      subtitle?: string
      title: string
    }
-    list_item_style: ListItemStyle
-    subtitle?: string
-  }
-}
+  },
+  BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItem
+>

-type InternalLinkListItem = {
-  list_item_internal_link: {
-    link_text?: string
-    list_item_style: ListItemStyle
-    subtitle?: string
-    pageConnection: Edges<ExternalLink | PageLink>
-  }
-}
-
-type RegularListItem = {
-  list_item: {
-    list_item_style: ListItemStyle
-    subtitle?: string
-    title: string
-  }
-}
-
-type ListItem = ExternalLinkListItem | InternalLinkListItem | RegularListItem
+export type ListItem =
+  | ExternalLinkListItem
+  | InternalLinkListItem
+  | RegularListItem

 export type List = {
  list: {
-    list_items: ListItem
+    title?: string
+    list_items: ListItem[]
  }
 }
+
+
+export type ListProps = List
--- a/types/requests/embeds.ts
+++ b/types/requests/embeds.ts
@@ -1,8 +1,5 @@
 import type { SysAsset } from "./utils/asset"
-import type { ExternalLinkType } from "./utils/externalLink"
+import type { TempPageLinkType } from "./utils/tempPageLink"
 import type { PageLinkType } from "./utils/pageLink"

-export type Embeds =
-  | ExternalLinkType
-  | PageLinkType
-  | SysAsset
+export type Embeds = TempPageLinkType | PageLinkType | SysAsset
--- a/types/requests/puff.ts
+++ b/types/requests/puff.ts
@@ -1,7 +1,7 @@
 import type { Image } from "../image"
 import type { Edges } from "./utils/edges"
 import type { Embeds } from "./embeds"
-import type { ExternalLink } from "./utils/externalLink"
+import type { TempPageLink } from "./utils/tempPageLink"
 import type { PageLink } from "./utils/pageLink"
 import type { RTEDocument } from "../rte/node"

@@ -13,7 +13,7 @@ export type Puff = {
    title: string
  }
  link_text?: string
-  pageConnection: Edges<ExternalLink | PageLink>
+  pageConnection: Edges<TempPageLink | PageLink>
  system: {
    uid: string
  }
--- a/types/requests/utils/pageLink.ts
+++ b/types/requests/utils/pageLink.ts
@@ -1,9 +1,11 @@
+import { Lang } from "@/types/lang"
 import type { EmbedEnum } from "./embeds"
 import type { Typename } from "./typename"

 export type PageLink = {
  system: {
    uid: string
+    locale: Lang
  }
  title: string
  url: string
--- a/types/requests/utils/tempPageLink.ts
+++ b/types/requests/utils/tempPageLink.ts
@@ -1,12 +1,14 @@
+import { Lang } from "@/types/lang"
 import type { EmbedEnum } from "./embeds"
 import type { Typename } from "./typename"

-export type ExternalLink = {
+export type TempPageLink = {
  system: {
    uid: string
+    locale: Lang
  }
  title: string
  url: string
 }

-export type ExternalLinkType = Typename<ExternalLink, EmbedEnum.TempPage>
+export type TempPageLinkType = Typename<TempPageLink, EmbedEnum.TempPage>