From ade2387b805ec283047534730027ced5ab1b9fe3 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 26 Feb 2024 13:49:21 +0100 Subject: [PATCH] feat: add button to puff --- app/[lang]/(live-current)/layout.tsx | 2 +- components/Current/Aside/Puff/index.tsx | 91 +++++++++++++------ components/Current/Aside/Puff/puff.module.css | 3 +- lib/graphql/Fragments/Puff.graphql | 1 + types/requests/puff.ts | 6 ++ 5 files changed, 74 insertions(+), 29 deletions(-) diff --git a/app/[lang]/(live-current)/layout.tsx b/app/[lang]/(live-current)/layout.tsx index 6e2c96d97..27915c9e3 100644 --- a/app/[lang]/(live-current)/layout.tsx +++ b/app/[lang]/(live-current)/layout.tsx @@ -72,7 +72,7 @@ export default function RootLayout({ - + {children} diff --git a/components/Current/Aside/Puff/index.tsx b/components/Current/Aside/Puff/index.tsx index bdbbfee60..f5aad9c17 100644 --- a/components/Current/Aside/Puff/index.tsx +++ b/components/Current/Aside/Puff/index.tsx @@ -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 ( - -
- {imageConnection.edges.map((image) => ( - {image.node.title} - ))} -
- -
-

{title}

-
- -
-
- - ) + const router = useRouter() + + switch (puff_style) { + case PuffStyleEnum.button: + function onClick() { + router.push(link.href) + } + + return ( +
+ {imageConnection.edges.map((image) => ( + {image.node.title} + ))} +
+ +
+ +
+
+
+ ) + case PuffStyleEnum.default: + return ( + +
+ {imageConnection.edges.map((image) => ( + {image.node.title} + ))} +
+
+

{title}

+
+ +
+
+ + ) + } } diff --git a/components/Current/Aside/Puff/puff.module.css b/components/Current/Aside/Puff/puff.module.css index 7cad16293..862f9335f 100644 --- a/components/Current/Aside/Puff/puff.module.css +++ b/components/Current/Aside/Puff/puff.module.css @@ -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; } diff --git a/lib/graphql/Fragments/Puff.graphql b/lib/graphql/Fragments/Puff.graphql index e63c3a16d..c28a46358 100644 --- a/lib/graphql/Fragments/Puff.graphql +++ b/lib/graphql/Fragments/Puff.graphql @@ -8,6 +8,7 @@ fragment Puff on Puff { } } } + puff_style link { href title diff --git a/types/requests/puff.ts b/types/requests/puff.ts index 48a89d5e0..1c3d6d8a8 100644 --- a/types/requests/puff.ts +++ b/types/requests/puff.ts @@ -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 link: { href: string title: string } + puff_style: PuffStyleEnum text: { json: RTEDocument }