diff --git a/components/Current/Blocks.tsx b/components/Current/Blocks.tsx index dc90c952f..04e138e43 100644 --- a/components/Current/Blocks.tsx +++ b/components/Current/Blocks.tsx @@ -16,7 +16,7 @@ export default function Blocks({ blocks }: BlocksProps) { const type = block.__typename switch (type) { case BlocksTypenameEnum.CurrentBlocksPageBlocksList: - return + return case BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs: return case BlocksTypenameEnum.CurrentBlocksPageBlocksText: diff --git a/components/Current/Blocks/List.tsx b/components/Current/Blocks/List.tsx deleted file mode 100644 index 4cdb5ac56..000000000 --- a/components/Current/Blocks/List.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function List() { - return ( - <> - - - ) -} diff --git a/components/Current/Blocks/List/index.tsx b/components/Current/Blocks/List/index.tsx new file mode 100644 index 000000000..7a236bc4d --- /dev/null +++ b/components/Current/Blocks/List/index.tsx @@ -0,0 +1,93 @@ +import { BlockListItemsEnum } from "@/types/requests/blocks/list" +import type { ListProps, ListItem } from "@/types/requests/blocks/list" + +import styles from "./list.module.css" +import Link from "next/link" + +export default function List({ listBlock }: ListProps) { + return ( +
+ {listBlock.list.title ? ( +

{listBlock.list.title}

+ ) : null} +
    + {listBlock.list.list_items.map((item, i) => ( + + ))} +
+
+ ) +} + +function ListItem({ listItem }: { listItem: ListItem }) { + const typeName = listItem.__typename + + switch (typeName) { + case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItem: + return ( +
  • + {listItem.list_item.subtitle ? ( + <> + {listItem.list_item.title} +
    + {listItem.list_item.subtitle} + + ) : ( + listItem.list_item.title + )} +
  • + ) + case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink: + return ( +
  • + + {listItem.list_item_external_link.link.title} + +
    + {listItem.list_item_external_link.subtitle} +
  • + ) + case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink: + const links = listItem.list_item_internal_link.pageConnection.edges + return links.map((link, i) => ( +
  • + + {listItem.list_item_internal_link.link_text} + +
    + {listItem.list_item_internal_link.subtitle} +
  • + )) + + default: + return null + } +} diff --git a/components/Current/Blocks/List/list.module.css b/components/Current/Blocks/List/list.module.css new file mode 100644 index 000000000..be9aebcaf --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/types/requests/blocks/list.ts b/types/requests/blocks/list.ts index 05f74a200..c9d05cdd1 100644 --- 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 { PageLink } from "../utils/pageLink" +import { Typename } from "../utils/typename" enum ListItemStyleEnum { checkmark = "checkmark", @@ -9,38 +10,62 @@ 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 + } + }, + 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 - } -} - -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 = { + listBlock: List +}