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 />
<VwoScript />
</head>
<body>
<body className="theme-00Corecolours theme-X0Oldcorecolours">
<LangPopup lang={params.lang} />
<SkipToMainContent lang={params.lang} />
{children}

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

@@ -1,4 +1,6 @@
"use client"
import { renderOptions } from "./renderOptions"
import { useRouter } from "next/navigation"
import Image from "@/components/Image"
import JsonToHtml from "@/components/JsonToHtml"
@@ -7,38 +9,73 @@ import { Button } from "@scandic-hotels/design-system"
import styles from "./puff.module.css"
import type { PuffProps } from "@/types/components/current/asides/puff"
import { PuffStyleEnum } from "@/types/requests/puff"
export default function Puff({
imageConnection,
link,
text,
puff_style,
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}>
<Button>Hej!</Button>
<header>
<h3 className={styles.heading}>{title}</h3>
</header>
<JsonToHtml
embeds={[]}
nodes={text.json.children}
renderOptions={renderOptions}
/>
</section>
</article>
</a>
)
const router = useRouter()
switch (puff_style) {
case PuffStyleEnum.button:
function onClick() {
router.push(link.href)
}
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}>
<JsonToHtml
embeds={[]}
nodes={text.json.children}
renderOptions={renderOptions}
/>
<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 {
display: grid;
padding: 10px;
background-color: #fff;
gap: 27px;
}
.heading {
@@ -38,7 +40,6 @@
color: #333;
line-height: 1.3;
margin-bottom: 0;
padding-top: 7px;
text-decoration: none;
}

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

@@ -8,6 +8,7 @@ fragment Puff on Puff {
}
}
}
puff_style
link {
href
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 { RTEDocument } from "../rte/node"
export enum PuffStyleEnum {
button = "button",
default = "default",
}
export type Puff = {
imageConnection: Edges<Image>
link: {
href: string
title: string
}
puff_style: PuffStyleEnum
text: {
json: RTEDocument
}