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

[WEB-58] Feat/consume design system Approved-by: Michael Zetterberg Approved-by: Arvid Norlin
2024-03-08 17:17:02 +00:00
parent 6abf6f3b5e 015a213c75
commit f1278a8d11
10 changed files with 1845 additions and 35 deletions
--- a/.env.local.example
+++ b/.env.local.example
@@ -4,4 +4,5 @@ CMS_ENVIRONMENT="development"
 CMS_URL="https://eu-graphql.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=""
-ADOBE_SCRIPT_SRC=""
+ADOBE_SCRIPT_SRC=""
+DESIGN_SYSTEM_ACCESS_TOKEN=""
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,10 +1,11 @@
 # Directories
 public/_static

-
-# Files 
+# Files
 app/core.css
 app/scandic.css
 .env.local.example
 .prettierignore
-netlify.toml
+netlify.toml
+package.json
+package-lock.json
--- a/app/[lang]/(live-current)/layout.tsx
+++ b/app/[lang]/(live-current)/layout.tsx
@@ -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 Footer from "@/components/Current/Footer"
@@ -22,7 +22,9 @@ export default function RootLayout({
  return (
    <html lang={params.lang}>
      <head>
+        {/* eslint-disable-next-line @next/next/no-css-tags */}
        <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" />
        <Script
          data-cookieconsent="ignore"
@@ -71,7 +73,7 @@ export default function RootLayout({
        <AdobeScript />
        <VwoScript />
      </head>
-      <body>
+      <body className="theme-00Corecolours theme-X0Oldcorecolours">
        <LangPopup lang={params.lang} />
        <SkipToMainContent lang={params.lang} />
        {children}
--- a/components/Current/Aside/Puff/index.tsx
+++ b/components/Current/Aside/Puff/index.tsx
@@ -1,42 +1,81 @@
+"use client"
 import { renderOptions } from "./renderOptions"
+import { useRouter } from "next/navigation"

 import Image from "@/components/Image"
 import JsonToHtml from "@/components/JsonToHtml"
+import { Button } from "@scandic-hotels/design-system/current"

 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}>
-          <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 || 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>
+      )
+  }
 }
--- 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;
 }

--- a/env/server.ts
+++ b/env/server.ts
@@ -15,6 +15,7 @@ export const env = createEnv({
    NODE_ENV: z.enum(["development", "test", "production"]),
    PRINT_QUERY: z.boolean().default(false),
    REVALIDATE_SECRET: z.string(),
+    DESIGN_SYSTEM_ACCESS_TOKEN: z.string(),
  },
  emptyStringAsUndefined: true,
  runtimeEnv: {
@@ -30,5 +31,6 @@ export const env = createEnv({
    NODE_ENV: process.env.NODE_ENV,
    PRINT_QUERY: process.env.PRINT_QUERY,
    REVALIDATE_SECRET: process.env.REVALIDATE_SECRET,
+    DESIGN_SYSTEM_ACCESS_TOKEN: process.env.DESIGN_SYSTEM_ACCESS_TOKEN,
  },
 })
--- 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
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,11 +13,13 @@
    "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: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": {
    "@contentstack/live-preview-utils": "^1.4.0",
    "@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",
    "class-variance-authority": "^0.7.0",
    "graphql": "^16.8.1",
--- 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<Image>
  link: {
    href: string
-    title: string
+    title?: string
  }
+  puff_style: PuffStyleEnum
  text: {
    json: RTEDocument
  }