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

Merged in feat/consume-design-system (pull request #46)

Browse Source 
[WEB-58] Feat/consume design system

Approved-by: Michael Zetterberg
Approved-by: Arvid Norlin
This commit is contained in:
Christel Westerberg
2024-03-08 17:17:02 +00:00
committed by Michael Zetterberg
parent 6abf6f3b5e 015a213c75
commit f1278a8d11
10 changed files with 1845 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.local.example
View File

@@ -5,3 +5,4 @@ CMS_URL="https://eu-graphql.contentstack.com/stacks/${CMS_API_KEY}?environment=$
CMS_PREVIEW_URL="https://graphql-preview.contentstack.com/stacks/${CMS_API_KEY}?environment=${CMS_ENVIRONMENT}"; CMS_PREVIEW_URL="https://graphql-preview.contentstack.com/stacks/${CMS_API_KEY}?environment=${CMS_ENVIRONMENT}";
CMS_PREVIEW_TOKEN="" CMS_PREVIEW_TOKEN=""
ADOBE_SCRIPT_SRC="" ADOBE_SCRIPT_SRC=""
DESIGN_SYSTEM_ACCESS_TOKEN=""

3
.prettierignore
View File

@@ -1,10 +1,11 @@
# Directories # Directories
public/_static public/_static
# Files # Files
app/core.css app/core.css
app/scandic.css app/scandic.css
.env.local.example .env.local.example
.prettierignore .prettierignore
netlify.toml netlify.toml
package.json
package-lock.json

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

@@ -1,4 +1,4 @@
/* eslint-disable @next/next/no-css-tags */ import "@scandic-hotels/design-system/current/style.css"
import AdobeScript from "@/components/Current/AdobeScript" import AdobeScript from "@/components/Current/AdobeScript"
import Footer from "@/components/Current/Footer" import Footer from "@/components/Current/Footer"
@@ -22,7 +22,9 @@ export default function RootLayout({
return ( return (
<html lang={params.lang}> <html lang={params.lang}>
<head> <head>
{/* eslint-disable-next-line @next/next/no-css-tags */}
<link rel="stylesheet" href="/_static/css/core.css" /> <link rel="stylesheet" href="/_static/css/core.css" />
{/* eslint-disable-next-line @next/next/no-css-tags */}
<link rel="stylesheet" href="/_static/css/scandic.css" /> <link rel="stylesheet" href="/_static/css/scandic.css" />
<Script <Script
data-cookieconsent="ignore" data-cookieconsent="ignore"
@@ -71,7 +73,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,42 +1,81 @@
"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"
import { Button } from "@scandic-hotels/design-system/current"
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}
<header> height={image.node.dimension.height}
<h3 className={styles.heading}>{title}</h3> key={image.node.system.uid}
</header> src={image.node.url}
<JsonToHtml width={image.node.dimension.width}
embeds={[]} />
nodes={text.json.children} ))}
renderOptions={renderOptions} <section className={styles.content}>
/> <JsonToHtml
</section> embeds={[]}
</article> nodes={text.json.children}
</a> renderOptions={renderOptions}
) />
<div>
<Button onPress={onClick}>{link.title || 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;
} }

2
env/server.ts vendored
View File

@@ -15,6 +15,7 @@ export const env = createEnv({
NODE_ENV: z.enum(["development", "test", "production"]), NODE_ENV: z.enum(["development", "test", "production"]),
PRINT_QUERY: z.boolean().default(false), PRINT_QUERY: z.boolean().default(false),
REVALIDATE_SECRET: z.string(), REVALIDATE_SECRET: z.string(),
DESIGN_SYSTEM_ACCESS_TOKEN: z.string(),
}, },
emptyStringAsUndefined: true, emptyStringAsUndefined: true,
runtimeEnv: { runtimeEnv: {
@@ -30,5 +31,6 @@ export const env = createEnv({
NODE_ENV: process.env.NODE_ENV, NODE_ENV: process.env.NODE_ENV,
PRINT_QUERY: process.env.PRINT_QUERY, PRINT_QUERY: process.env.PRINT_QUERY,
REVALIDATE_SECRET: process.env.REVALIDATE_SECRET, REVALIDATE_SECRET: process.env.REVALIDATE_SECRET,
DESIGN_SYSTEM_ACCESS_TOKEN: process.env.DESIGN_SYSTEM_ACCESS_TOKEN,
}, },
}) })

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

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

1755
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -13,11 +13,13 @@
"test:component:headless": "cypress run --component", "test:component:headless": "cypress run --component",
"test:e2e": "start-server-and-test test:setup http://127.0.0.1:3000/en/test \"cypress open --e2e\"", "test:e2e": "start-server-and-test test:setup http://127.0.0.1:3000/en/test \"cypress open --e2e\"",
"test:e2e:headless": "start-server-and-test test:setup http://127.0.0.1:3000/en/test \"cypress run --e2e\"", "test:e2e:headless": "start-server-and-test test:setup http://127.0.0.1:3000/en/test \"cypress run --e2e\"",
"test:setup": "npm run build && npm run start" "test:setup": "npm run build && npm run start",
"preinstall": "export $(cat .env.local | grep -v '^#' | xargs)"
}, },
"dependencies": { "dependencies": {
"@contentstack/live-preview-utils": "^1.4.0", "@contentstack/live-preview-utils": "^1.4.0",
"@netlify/plugin-nextjs": "^5.0.0-beta.9", "@netlify/plugin-nextjs": "^5.0.0-beta.9",
"@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.2",
"@t3-oss/env-nextjs": "^0.9.2", "@t3-oss/env-nextjs": "^0.9.2",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"graphql": "^16.8.1", "graphql": "^16.8.1",

8
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
} }