scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-112): adjust current-blocks-page to new model

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-02-20 13:50:50 +01:00
parent 99c2a136ba
commit 9e56ff158d
33 changed files with 116 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/Current/Aside/Puff/index.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { renderOptions } from "./renderOptions"
import Image from "@/components/Image"
import JsonToHtml from "@/components/JsonToHtml"
import styles from "./puff.module.css"
import type { PuffProps } from "@/types/components/current/asides/puff"
export default function Puff({
imageConnection,
link,
text,
title,
}: PuffProps) {
return (
<a className={styles.link} href={link.href}>
<article>
{imageConnection.edges.map((image) => (
<Image
alt={image.node.title}
className={styles.image}
height={image.node.dimension.height}
key={image.node.system.uid}
src={image.node.url}
width={image.node.dimension.width}
/>
))}
<section className={styles.content}>
<header>
<h3 className={styles.heading}>{title}</h3>
</header>
<JsonToHtml
embeds={[]}
nodes={text.json.children}
renderOptions={renderOptions}
/>
</section>
</article>
</a>
)
}

0
components/Current/Aside/Puffs/Puff/puff.module.css → components/Current/Aside/Puff/puff.module.css
View File

0
components/Current/Aside/Puffs/Puff/renderOptions.tsx → components/Current/Aside/Puff/renderOptions.tsx
View File

74
components/Current/Aside/Puffs/Puff/index.tsx
View File

@@ -1,74 +0,0 @@
import { renderOptions } from "./renderOptions"
import Image from "@/components/Image"
import JsonToHtml from "@/components/JsonToHtml"
import Link from "next/link"
import styles from "./puff.module.css"
import type { PuffProps } from "@/types/components/current/asides/puff"
export default function Puff({
imageConnection,
is_internal,
link,
pageConnection,
text,
title,
}: PuffProps) {
if (is_internal) {
const page = pageConnection.edges[0]
if (!page?.node?.url) {
return null
}
return (
<Link className={styles.link} href={`/${page.node.system.locale}${page.node.url}`}>
<PuffContent
imageConnection={imageConnection}
text={text}
title={title}
/>
</Link>
)
}
return (
<a className={styles.link} href={link.href} target="_blank">
<PuffContent
imageConnection={imageConnection}
text={text}
title={title}
/>
</a>
)
}
function PuffContent({
imageConnection,
text,
title,
}: Pick<PuffProps, "imageConnection" | "text" | "title">) {
return (
<article>
{imageConnection.edges.map((image) => (
<Image
alt={image.node.title}
className={styles.image}
height={image.node.dimension.height}
key={image.node.system.uid}
src={image.node.url}
width={image.node.dimension.width}
/>
))}
<section className={styles.content}>
<header>
<h3 className={styles.heading}>{title}</h3>
</header>
<JsonToHtml
embeds={text.embedded_itemsConnection.edges}
nodes={text.json.children}
renderOptions={renderOptions}
/>
</section>
</article>
)
}

16
components/Current/Aside/Puffs/index.tsx
View File

@@ -1,16 +0,0 @@
import Puff from "./Puff"
import type { PuffsProps } from "@/types/components/current/asides/puffs"
export default function Puffs({ puffs }: PuffsProps) {
if (!puffs.length) {
return null
}
return (
<>
{puffs.map((puff) => (
<Puff key={puff.node.system.uid} {...puff.node} />
))}
</>
)
}

6
components/Current/Aside/index.tsx
View File

@@ -1,4 +1,4 @@
import Puffs from "./Puffs"
import Puff from "./Puff"
import Contacts from "./Contacts"
import { AsideTypenameEnum } from "@/types/requests/utils/typename"
@@ -25,9 +25,9 @@ export default function Aside({ blocks }: AsideProps) {
)
case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
return (
<Puffs
<Puff
key={`block-${idx}`}
puffs={block.puff.puffConnection.edges}
{...block.puff}
/>
)
default:

22
components/Current/Blocks/List/ListItem.tsx
View File

@@ -1,4 +1,3 @@
import Link from "next/link"
import { cva } from "class-variance-authority"
import { BlockListItemsEnum } from "@/types/requests/blocks/list"
@@ -63,27 +62,6 @@ export default function ListItem({ listItem }: { listItem: ListItem }) {
)}
</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

9
components/Current/Blocks/List/index.tsx
View File

@@ -1,17 +1,18 @@
import type { ListProps } from "@/types/requests/blocks/list"
import ListItem from "./ListItem"
import styles from "./list.module.css"
import ListItem from "./ListItem"
import type { ListProps } from "@/types/requests/blocks/list"
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>
</>
)
}

13
components/Current/Blocks/List/list.module.css
View File

@@ -1,11 +1,16 @@
.title {
color: #483729;
font-family: BrandonText-Bold, Arial, Helvetica, sans-serif;
font-size: 1.375rem;
line-height: 1.1em;
text-transform: uppercase;
font-weight: 400;
color: #483729;
line-height: 1.1em;
margin-bottom: 1rem;
margin-top: 2rem;
text-transform: uppercase;
}
.title:first-child {
margin-top: 0;
}
.ul {
@@ -64,4 +69,4 @@
.title {
font-size: 1.625rem;
}
}
}

4
components/Current/ContentPage/index.tsx
View File

@@ -12,8 +12,8 @@ import type { ContentPageProps } from "@/types/components/current/contentPage"
export default function ContentPage({ data }: ContentPageProps) {
const page = data.all_current_blocks_page.items[0]
const images = page.hero?.imagesConnection
const breadcrumbs = page.breadcrumbs.parentsConnection
const parent = breadcrumbs.edges.at(-1)
const breadcrumbs = page.breadcrumbs.parents
const parent = breadcrumbs.at(-1)
return (
<>

15
components/Current/Header/MainMenu/index.tsx
View File

@@ -2,7 +2,6 @@
import { useState } from "react"
import Image from "@/components/Image"
import Link from "next/link"
// import Mobile from "../LanguageSwitcher/Mobile"
import styles from "./mainMenu.module.css"
@@ -40,7 +39,7 @@ export default function MainMenu({ frontpageLinkText, homeHref, links, logo, top
<span className={styles.hiddenAccessible}>Menu</span>
</button>
<Link
<a
className={styles.logoLink}
href={homeHref}
id="scandic-logo"
@@ -59,7 +58,7 @@ export default function MainMenu({ frontpageLinkText, homeHref, links, logo, top
src={logo.url}
width={logo.dimension.width}
/>
</Link>
</a>
<nav>
<ul
@@ -67,26 +66,26 @@ export default function MainMenu({ frontpageLinkText, homeHref, links, logo, top
data-collapsable="main-menu"
id="main-menu"
>
{links.map(({ link }) => (
{links.map(link => (
<li
className={styles.li}
key={link.href}
>
<Link
<a
className={styles.link}
href={link.href}
>
{link.title}
</Link>
</a>
</li>
))}
<ul className={styles.mobileList}>
{topMenuMobileLinks.map(({ link }) => (
<li className={styles.mobileLi} key={link.href}>
<Link className={styles.mobileLink} href={link.href}>
<a className={styles.mobileLink} href={link.href}>
{link.title}
</Link>
</a>
</li>
))}
</ul>

9
components/Current/Header/TopMenu/index.tsx
View File

@@ -1,5 +1,4 @@
// import Desktop from "../LanguageSwitcher/Desktop"
import Link from "next/link"
import styles from "./topMenu.module.css"
@@ -13,12 +12,12 @@ export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuP
return (
<div className={styles.topMenu}>
<div className={styles.container}>
<Link
<a
className={styles.homeLink}
href={homeHref}
>
{frontpageLinkText}
</Link>
</a>
<ul className={styles.list}>
{/* <li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
@@ -26,12 +25,12 @@ export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuP
</li> */}
{links.map(({ link }) => (
<li key={link.href}>
<Link
<a
className={styles.link}
href={link.href}
>
{link.title}
</Link>
</a>
</li>
))}
</ul>

18
components/Current/Preamble/Breadcrumbs/index.tsx
View File

@@ -1,5 +1,3 @@
import Link from "next/link"
import styles from "./breadcrumbs.module.css"
import type { BreadcrumbsProps } from "@/types/components/current/breadcrumbs"
@@ -14,20 +12,20 @@ export default function Breadcrumbs({
<ul className={styles.list}>
{parent ? (
<li className={styles.parent}>
<Link href={`/${parent.node.system.locale}${parent.node.url}`}>
{parent.node.breadcrumbs?.title ?? parent.node.title}
</Link>
<a href={parent.href}>
{parent.title}
</a>
</li>
) : null}
{breadcrumbs.edges.map((breadcrumb) => (
{breadcrumbs.map((breadcrumb) => (
<li
className={styles.li}
itemProp="breadcrumb"
key={breadcrumb.node.title}
key={breadcrumb.href}
>
<Link className={styles.link} href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
{breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
</Link>
<a className={styles.link} href={breadcrumb.href}>
{breadcrumb.title}
</a>
</li>
))}
<li className={styles.currentPage}>

18
components/Current/SubnavMobile.tsx
View File

@@ -1,5 +1,3 @@
import Link from "next/link"
import type { SubnavMobileProps } from "@/types/components/current/subnavMobile"
export default async function SubnavMobile({
@@ -13,16 +11,16 @@ export default async function SubnavMobile({
<ul className="breadcrumb-list hidden-small hidden-medium hidden-large">
{parent ? (
<li className="breadcrumb-list__parent hidden-medium hidden-large">
<Link href={`/${parent.node.system.locale}${parent.node.url}`}>
{parent.node.breadcrumbs?.title ?? parent.node.title}
</Link>
<a href={parent.href}>
{parent.title}
</a>
</li>
) : null}
{breadcrumbs.edges.map((breadcrumb) => (
<li className="breadcrumb-list__body" key={breadcrumb.node.url}>
<Link href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
{breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
</Link>
{breadcrumbs.map((breadcrumb) => (
<li className="breadcrumb-list__body" key={breadcrumb.href}>
<a href={breadcrumb.href}>
{breadcrumb.title}
</a>
</li>
))}
<li className="breadcrumb-list__body">

9
lib/graphql/Fragments/Aside/Puff.graphql
View File

@@ -2,13 +2,6 @@
fragment PuffAside on CurrentBlocksPageAsidePuff {
puff {
puffConnection {
totalCount
edges {
node {
...Puff
}
}
}
...Puff
}
}

20
lib/graphql/Fragments/Blocks/List.graphql
View File

@@ -1,5 +1,3 @@
#import "../PageLinks.graphql"
fragment ListItem on CurrentBlocksPageBlocksListBlockListItemsListItem {
list_item {
list_item_style
@@ -19,30 +17,12 @@ fragment ListItemExternalLink on CurrentBlocksPageBlocksListBlockListItemsListIt
}
}
fragment ListItemInternalLink on CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink {
list_item_internal_link {
link_text
list_item_style
subtitle
pageConnection {
totalCount
edges {
node {
__typename
...CurrentBlocksPageLink
}
}
}
}
}
fragment ListBlock on CurrentBlocksPageBlocksList {
list {
list_items {
__typename
...ListItem
...ListItemExternalLink
...ListItemInternalLink
}
title
}

8
lib/graphql/Fragments/Blocks/Puff.graphql
View File

@@ -2,11 +2,9 @@
fragment PuffBlock on CurrentBlocksPageBlocksPuffs {
puffs {
# We have to manually add a limit since Contentstack handles its complexity calculation in a certain way
puffsConnection(limit: 9) {
totalCount
edges {
node {
puffs {
... on CurrentBlocksPageBlocksPuffsBlockPuffsPuff {
puff {
...Puff
}
}

2
lib/graphql/Fragments/Blocks/Text.graphql
View File

@@ -1,5 +1,4 @@
#import "../Image.graphql"
#import "../PageLinks.graphql"
fragment TextBlock on CurrentBlocksPageBlocksText {
text {
@@ -9,7 +8,6 @@ fragment TextBlock on CurrentBlocksPageBlocksText {
edges {
node {
__typename
...CurrentBlocksPageLink
...Image
}
}

18
lib/graphql/Fragments/Breadcrumbs.graphql
View File

@@ -1,19 +1,9 @@
#import "./PageLinks.graphql"
fragment Breadcrumbs on CurrentBlocksPage {
breadcrumbs {
title
parentsConnection {
edges {
node {
... on CurrentBlocksPage {
breadcrumbs {
title
}
...CurrentBlocksPageLink
}
}
}
parents {
href
title
}
title
}
}

1
lib/graphql/Fragments/Hero.graphql
View File

@@ -1,5 +1,4 @@
#import "./Image.graphql"
#import "./PageLinks.graphql"
fragment Hero on Hero {
imagesConnection {

2
lib/graphql/Fragments/Preamble.graphql
View File

@@ -1,5 +1,4 @@
#import "./Image.graphql"
#import "./PageLinks.graphql"
fragment Preamble on CurrentBlocksPage {
preamble {
@@ -9,7 +8,6 @@ fragment Preamble on CurrentBlocksPage {
edges {
node {
__typename
...CurrentBlocksPageLink
...Image
}
}

22
lib/graphql/Fragments/Puff.graphql
View File

@@ -1,5 +1,4 @@
#import "./Image.graphql"
#import "./PageLinks.graphql"
fragment Puff on Puff {
imageConnection {
@@ -9,33 +8,12 @@ fragment Puff on Puff {
}
}
}
is_internal
link {
href
title
}
pageConnection {
edges {
node {
__typename
...CurrentBlocksPageLink
}
}
}
system {
uid
}
text {
json
embedded_itemsConnection {
totalCount
edges {
node {
__typename
...Image
}
}
}
}
title
}

6
lib/graphql/Query/CurrentBlockPage.graphql
View File

@@ -27,13 +27,13 @@ query GetCurrentBlockPage($locale: String!, $url: String!) {
...Hero
}
...Preamble
title
url
system {
uid
created_at
uid
updated_at
}
title
url
}
total
}

5
types/components/current/breadcrumbs.ts
View File

@@ -1,8 +1,7 @@
import type { Breadcrumb } from "@/types/requests/currentBlockPage"
import type { Edges, Node } from "@/types/requests/utils/edges"
export type BreadcrumbsProps = {
breadcrumbs: Edges<Breadcrumb>
parent?: Node<Breadcrumb>
breadcrumbs: Breadcrumb[]
parent?: Breadcrumb
title: string
}

5
types/components/current/subnavMobile.ts
View File

@@ -1,8 +1,7 @@
import type { Breadcrumb } from "@/types/requests/currentBlockPage"
import type { Edges, Node } from "@/types/requests/utils/edges"
export type SubnavMobileProps = {
breadcrumbs: Edges<Breadcrumb>
parent?: Node<Breadcrumb>
breadcrumbs: Breadcrumb[]
parent?: Breadcrumb
title: string
}

5
types/requests/asides/puff.ts
View File

@@ -1,8 +1,5 @@
import type { Puff } from "../puff"
import type { Edges } from "../utils/edges"
export type PuffAside = {
puff: {
puffConnection: Edges<Puff>
}
puff: Puff
}

16
types/requests/blocks/list.ts
View File

@@ -1,5 +1,3 @@
import type { Edges } from "../utils/edges"
import type { PageLink } from "../utils/pageLink"
import type { Typename } from "../utils/typename"
enum ListItemStyleEnum {
@@ -12,7 +10,6 @@ type ListItemStyle = keyof typeof ListItemStyleEnum
export enum BlockListItemsEnum {
CurrentBlocksPageBlocksListBlockListItemsListItem = "CurrentBlocksPageBlocksListBlockListItemsListItem",
CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink = "CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink",
CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink = "CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink",
}
type ExternalLinkListItem = Typename<
@@ -29,18 +26,6 @@ type ExternalLinkListItem = Typename<
BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink
>
type InternalLinkListItem = Typename<
{
list_item_internal_link: {
link_text?: string
list_item_style: ListItemStyle
subtitle?: string
pageConnection: Edges<PageLink>
}
},
BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink
>
type RegularListItem = Typename<
{
list_item: {
@@ -54,7 +39,6 @@ type RegularListItem = Typename<
export type ListItem =
| ExternalLinkListItem
| InternalLinkListItem
| RegularListItem
export type List = {

5
types/requests/blocks/puff.ts
View File

@@ -1,8 +1,9 @@
import type { Edges } from "../utils/edges"
import type { Puff } from "../puff"
export type PuffBlock = {
puffs: {
puffsConnection: Edges<Puff>
puffs: {
puff: Puff
}[]
}
}

27
types/requests/currentBlockPage.ts
View File

@@ -13,8 +13,6 @@ import type {
Typename,
PagesTypenameEnum,
} from "./utils/typename"
import type { EmbedEnum } from "./utils/embeds"
import type { Edges } from "./utils/edges"
export type Asides =
| Typename<Contact, AsideTypenameEnum.CurrentBlocksPageAsideContact>
@@ -25,26 +23,13 @@ export type Blocks =
| Typename<PuffBlock, BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs>
| Typename<Text, BlocksTypenameEnum.CurrentBlocksPageBlocksText>
interface SharedBreadcrumb {
breadcrumbs: {
title?: string
} | null
system: {
locale: string
uid: string
}
export type Breadcrumb = {
href: string
title: string
url: string
}
export interface CurrentBlocksPageBreadcrumb extends SharedBreadcrumb {
__typename: EmbedEnum.CurrentBlocksPage
}
export type Breadcrumb = CurrentBlocksPageBreadcrumb
export type Breadcrumbs = {
parentsConnection: Edges<Breadcrumb>
parents: Breadcrumb[]
title: string
}
@@ -55,13 +40,13 @@ export type BlockPage = {
breadcrumbs: Breadcrumbs
hero: Hero
preamble: Preamble
title: string
url: string
system: {
uid: string
created_at: string
uid: string
updated_at: string
}
title: string
url: string
}
export type GetCurrentBlockPageData = {

3
types/requests/embeds.ts
View File

@@ -1,4 +1,3 @@
import type { SysAsset } from "./utils/asset"
import type { PageLinkType } from "./utils/pageLink"
export type Embeds = PageLinkType | SysAsset
export type Embeds = SysAsset

6
types/requests/header.ts
View File

@@ -2,10 +2,8 @@ import type { Edges } from "./utils/edges"
import type { Image } from "../image"
export type HeaderLink = {
link: {
href: string
title: string
}
href: string
title: string
}
export type TopMenuHeaderLink = {

8
types/requests/puff.ts
View File

@@ -1,22 +1,14 @@
import type { Image } from "../image"
import type { Edges } from "./utils/edges"
import type { Embeds } from "./embeds"
import type { PageLink } from "./utils/pageLink"
import type { RTEDocument } from "../rte/node"
export type Puff = {
imageConnection: Edges<Image>
is_internal: boolean
link: {
href: string
title: string
}
pageConnection: Edges<PageLink>
system: {
uid: string
}
text: {
embedded_itemsConnection: Edges<Embeds>
json: RTEDocument
}
title: string

1
types/requests/utils/typename.ts
View File

@@ -7,7 +7,6 @@ export type AsideTypename = keyof typeof AsideTypenameEnum
export enum BlocksTypenameEnum {
CurrentBlocksPageBlocksList = "CurrentBlocksPageBlocksList",
CurrentBlocksPageBlocksPreamble = "CurrentBlocksPageBlocksPreamble",
CurrentBlocksPageBlocksPuffs = "CurrentBlocksPageBlocksPuffs",
CurrentBlocksPageBlocksText = "CurrentBlocksPageBlocksText",
}