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

feat: add button to puff

Browse Source
This commit is contained in:
Christel Westerberg
2024-02-26 13:49:21 +01:00
parent 33a34450d6
commit ade2387b80
5 changed files with 74 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[lang]/(live-current)/layout.tsx
View File

@@ -72,7 +72,7 @@ export default function RootLayout({
<AdobeScript /> <AdobeScript />
<VwoScript /> <VwoScript />
</head> </head>
<body> <body className="theme-00Corecolours theme-X0Oldcorecolours">
<LangPopup lang={params.lang} /> <LangPopup lang={params.lang} />
<SkipToMainContent lang={params.lang} /> <SkipToMainContent lang={params.lang} />
{children} {children}

91
components/Current/Aside/Puff/index.tsx
View File

@@ -1,4 +1,6 @@
"use client"
import { renderOptions } from "./renderOptions" import { renderOptions } from "./renderOptions"
import { useRouter } from "next/navigation"
import Image from "@/components/Image" import Image from "@/components/Image"
import JsonToHtml from "@/components/JsonToHtml" import JsonToHtml from "@/components/JsonToHtml"
@@ -7,38 +9,73 @@ import { Button } from "@scandic-hotels/design-system"
import styles from "./puff.module.css" import styles from "./puff.module.css"
import type { PuffProps } from "@/types/components/current/asides/puff" import type { PuffProps } from "@/types/components/current/asides/puff"
import { PuffStyleEnum } from "@/types/requests/puff"
export default function Puff({ export default function Puff({
imageConnection, imageConnection,
link, link,
text, text,
puff_style,
title, title,
}: PuffProps) { }: PuffProps) {
return ( const router = useRouter()
<a className={styles.link} href={link.href}>
<article> switch (puff_style) {
{imageConnection.edges.map((image) => ( case PuffStyleEnum.button:
<Image function onClick() {
alt={image.node.title} router.push(link.href)
className={styles.image} }
height={image.node.dimension.height}
key={image.node.system.uid} return (
src={image.node.url} <article>
width={image.node.dimension.width} {imageConnection.edges.map((image) => (
/> <Image
))} alt={image.node.title}
<section className={styles.content}> className={styles.image}
<Button>Hej!</Button> height={image.node.dimension.height}
<header> key={image.node.system.uid}
<h3 className={styles.heading}>{title}</h3> src={image.node.url}
</header> width={image.node.dimension.width}
<JsonToHtml />
embeds={[]} ))}
nodes={text.json.children} <section className={styles.content}>
renderOptions={renderOptions} <JsonToHtml
/> embeds={[]}
</section> nodes={text.json.children}
</article> renderOptions={renderOptions}
</a> />
) <div>
<Button onPress={onClick}>{link.title}</Button>
</div>
</section>
</article>
)
case PuffStyleEnum.default:
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>
)
}
} }

3
components/Current/Aside/Puff/puff.module.css
View File

@@ -16,8 +16,10 @@
} }
.content { .content {
display: grid;
padding: 10px; padding: 10px;
background-color: #fff; background-color: #fff;
gap: 27px;
} }
.heading { .heading {
@@ -38,7 +40,6 @@
color: #333; color: #333;
line-height: 1.3; line-height: 1.3;
margin-bottom: 0; margin-bottom: 0;
padding-top: 7px;
text-decoration: none; text-decoration: none;
} }

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

@@ -8,6 +8,7 @@ fragment Puff on Puff {
} }
} }
} }
puff_style
link { link {
href href
title title

6
types/requests/puff.ts
View File

@@ -2,12 +2,18 @@ import type { Image } from "../image"
import type { Edges } from "./utils/edges" import type { Edges } from "./utils/edges"
import type { RTEDocument } from "../rte/node" import type { RTEDocument } from "../rte/node"
export enum PuffStyleEnum {
button = "button",
default = "default",
}
export type Puff = { export type Puff = {
imageConnection: Edges<Image> imageConnection: Edges<Image>
link: { link: {
href: string href: string
title: string title: string
} }
puff_style: PuffStyleEnum
text: { text: {
json: RTEDocument json: RTEDocument
} }