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/ListItem.tsx b/components/Current/Blocks/List/ListItem.tsx new file mode 100644 index 000000000..975f7dbc4 --- /dev/null +++ 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 ( +
  • + {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 && ( + +
    + {listItem.list_item_external_link.subtitle} +     + )} +
    • + ) + case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink: + const link = listItem.list_item_internal_link.pageConnection.edges[0] + const linkUrlWithLocale = `/${link.node.system.locale}${link.node.url}` + return ( +
  • + + {listItem.list_item_internal_link.link_text} + + {listItem.list_item_internal_link.subtitle && ( + +
    + {listItem.list_item_internal_link.subtitle} +     + )} +
    • + ) + + default: + return null + } +} diff --git a/components/Current/Blocks/List/index.tsx b/components/Current/Blocks/List/index.tsx new file mode 100644 index 000000000..11e6589ec --- /dev/null +++ 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 ( +
    + {list.title ?

    {list.title}

    : 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/lib/graphql/Fragments/PageLinks.graphql b/lib/graphql/Fragments/PageLinks.graphql index aef03e93f..84d1bd89e 100644 --- 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 -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1cb8e28aa..d8c221c9c 100644 --- 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", diff --git a/package.json b/package.json index 0fa8479f3..70753f7c0 100644 --- 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", diff --git a/types/requests/blocks/list.ts b/types/requests/blocks/list.ts index 05f74a200..bd8c1de1b 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 { 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 + } + }, + 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 = List diff --git a/types/requests/embeds.ts b/types/requests/embeds.ts index fab2414d8..140dab873 100644 --- 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 diff --git a/types/requests/puff.ts b/types/requests/puff.ts index 820d09577..85cc77c6a 100644 --- 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 + pageConnection: Edges system: { uid: string } diff --git a/types/requests/utils/pageLink.ts b/types/requests/utils/pageLink.ts index 8555fe17d..810c40ae1 100644 --- 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 diff --git a/types/requests/utils/externalLink.ts b/types/requests/utils/tempPageLink.ts similarity index 52% rename from types/requests/utils/externalLink.ts rename to types/requests/utils/tempPageLink.ts index 71a10bc17..0230fa8be 100644 --- a/types/requests/utils/externalLink.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 +export type TempPageLinkType = Typename