From 33a34450d65d0bed50ad26526644dc538f8e02e6 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Fri, 23 Feb 2024 16:27:37 +0100 Subject: [PATCH 1/6] chore: install design system --- app/[lang]/(live-current)/layout.tsx | 1 + components/Current/Aside/Puff/index.tsx | 2 ++ package.json | 1 + 3 files changed, 4 insertions(+) diff --git a/app/[lang]/(live-current)/layout.tsx b/app/[lang]/(live-current)/layout.tsx index 7e3604559..6e2c96d97 100644 --- a/app/[lang]/(live-current)/layout.tsx +++ b/app/[lang]/(live-current)/layout.tsx @@ -1,4 +1,5 @@ /* eslint-disable @next/next/no-css-tags */ +import "@scandic-hotels/design-system/style.css" import AdobeScript from "@/components/Current/AdobeScript" import Footer from "@/components/Current/Footer" diff --git a/components/Current/Aside/Puff/index.tsx b/components/Current/Aside/Puff/index.tsx index a33e9f0fe..bdbbfee60 100644 --- a/components/Current/Aside/Puff/index.tsx +++ b/components/Current/Aside/Puff/index.tsx @@ -2,6 +2,7 @@ import { renderOptions } from "./renderOptions" import Image from "@/components/Image" import JsonToHtml from "@/components/JsonToHtml" +import { Button } from "@scandic-hotels/design-system" import styles from "./puff.module.css" @@ -27,6 +28,7 @@ export default function Puff({ /> ))}
+

{title}

diff --git a/package.json b/package.json index 3527342ac..91dd1314c 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@contentstack/live-preview-utils": "^1.4.0", "@netlify/plugin-nextjs": "^5.0.0-beta.9", "@t3-oss/env-nextjs": "^0.9.2", + "@scandic-hotels/design-system": "git+ssh://git@scandic.bitbucket.org:scandic-swap/design-system.git#v0.1.0-rc.1", "class-variance-authority": "^0.7.0", "graphql": "^16.8.1", "graphql-request": "^6.1.0", From ade2387b805ec283047534730027ced5ab1b9fe3 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 26 Feb 2024 13:49:21 +0100 Subject: [PATCH 2/6] 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 } From 6fe47fb9d7e76b00ab1e46b5f117c3ad0375c2b5 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 26 Feb 2024 14:24:52 +0100 Subject: [PATCH 3/6] fix: use scandichotels as host for fetching design system repo --- package-lock.json | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 28c341c26..85c432e52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@contentstack/live-preview-utils": "^1.4.0", "@netlify/plugin-nextjs": "^5.0.0-beta.9", + "@scandic-hotels/design-system": "git+ssh://git@scandichotels.bitbucket.org:scandic-swap/design-system.git#v0.1.0-rc.1", "@t3-oss/env-nextjs": "^0.9.2", "class-variance-authority": "^0.7.0", "graphql": "^16.8.1", @@ -586,6 +587,15 @@ "url": "https://github.com/sindresorhus/is?sponsor=1" } }, + "node_modules/@scandic-hotels/design-system": { + "version": "0.1.0", + "resolved": "git+ssh://git@scandichotels.bitbucket.org:scandic-swap/design-system.git#fa01fbbf819145fd69e9685232a6a254c0ff7f07", + "peerDependencies": { + "react": "^18.2.0", + "react-aria-components": "^1.0.1", + "react-dom": "^18.2.0" + } + }, "node_modules/@swc/helpers": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz", diff --git a/package.json b/package.json index 91dd1314c..b34baacdb 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@contentstack/live-preview-utils": "^1.4.0", "@netlify/plugin-nextjs": "^5.0.0-beta.9", "@t3-oss/env-nextjs": "^0.9.2", - "@scandic-hotels/design-system": "git+ssh://git@scandic.bitbucket.org:scandic-swap/design-system.git#v0.1.0-rc.1", + "@scandic-hotels/design-system": "git+ssh://git@scandichotels.bitbucket.org:scandic-swap/design-system.git#v0.1.0-rc.1", "class-variance-authority": "^0.7.0", "graphql": "^16.8.1", "graphql-request": "^6.1.0", From 9b25a72025f29ab384d1116721ba4f7818c1d7c8 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 26 Feb 2024 16:34:44 +0100 Subject: [PATCH 4/6] fix: install design repo with access token --- .env.local.example | 3 ++- components/Current/Aside/Puff/index.tsx | 2 +- env/server.ts | 2 ++ package-lock.json | 5 +++-- package.json | 5 +++-- types/requests/puff.ts | 2 +- 6 files changed, 12 insertions(+), 7 deletions(-) diff --git a/.env.local.example b/.env.local.example index 5b058d208..e62eb3856 100644 --- 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="" \ No newline at end of file +ADOBE_SCRIPT_SRC="" +REPOSITORY_ACCESS_TOKEN="" diff --git a/components/Current/Aside/Puff/index.tsx b/components/Current/Aside/Puff/index.tsx index f5aad9c17..3568d4292 100644 --- a/components/Current/Aside/Puff/index.tsx +++ b/components/Current/Aside/Puff/index.tsx @@ -45,7 +45,7 @@ export default function Puff({ renderOptions={renderOptions} />
- +
diff --git a/env/server.ts b/env/server.ts index 36581221f..faf3b62af 100644 --- 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(), + REPOSITORY_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, + REPOSITORY_ACCESS_TOKEN: process.env.REPOSITORY_ACCESS_TOKEN, }, }) diff --git a/package-lock.json b/package-lock.json index 85c432e52..5b4101134 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,10 +7,11 @@ "": { "name": "web", "version": "0.1.0", + "hasInstallScript": true, "dependencies": { "@contentstack/live-preview-utils": "^1.4.0", "@netlify/plugin-nextjs": "^5.0.0-beta.9", - "@scandic-hotels/design-system": "git+ssh://git@scandichotels.bitbucket.org:scandic-swap/design-system.git#v0.1.0-rc.1", + "@scandic-hotels/design-system": "git+https://x-token-auth:$REPOSITORY_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.1", "@t3-oss/env-nextjs": "^0.9.2", "class-variance-authority": "^0.7.0", "graphql": "^16.8.1", @@ -589,7 +590,7 @@ }, "node_modules/@scandic-hotels/design-system": { "version": "0.1.0", - "resolved": "git+ssh://git@scandichotels.bitbucket.org:scandic-swap/design-system.git#fa01fbbf819145fd69e9685232a6a254c0ff7f07", + "resolved": "git+https://x-token-auth:ATCTT3xFfGN0gu4BSBWR71ifMM-_iAT2ip_jnjF0OjTkYhEB3sn71fPCGuMUA7O3BxJ2oHptZVGAlVvMUoeo3Wfute7RYido9HlvrVjemqns9hR3WSf6eNHhsSy5bLtxQ6VK7mnSSAGHaCqTejxirs_PmOB_jPIi1Ft4OEDehtnMxCteg8rO-IE%3D27DF8E0B@bitbucket.org/scandic-swap/design-system.git#fa01fbbf819145fd69e9685232a6a254c0ff7f07", "peerDependencies": { "react": "^18.2.0", "react-aria-components": "^1.0.1", diff --git a/package.json b/package.json index b34baacdb..7d3e05956 100644 --- a/package.json +++ b/package.json @@ -13,13 +13,14 @@ "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:$REPOSITORY_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.1", "@t3-oss/env-nextjs": "^0.9.2", - "@scandic-hotels/design-system": "git+ssh://git@scandichotels.bitbucket.org:scandic-swap/design-system.git#v0.1.0-rc.1", "class-variance-authority": "^0.7.0", "graphql": "^16.8.1", "graphql-request": "^6.1.0", diff --git a/types/requests/puff.ts b/types/requests/puff.ts index 1c3d6d8a8..ddcd247bf 100644 --- a/types/requests/puff.ts +++ b/types/requests/puff.ts @@ -11,7 +11,7 @@ export type Puff = { imageConnection: Edges link: { href: string - title: string + title?: string } puff_style: PuffStyleEnum text: { From 9973e3921c78d263bd0e82034a112a560b5edaa2 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Wed, 28 Feb 2024 13:06:18 +0100 Subject: [PATCH 5/6] fix: rename access token variable and change eslint rules in layout --- .env.local.example | 2 +- app/[lang]/(live-current)/layout.tsx | 3 +- env/server.ts | 4 +- package-lock.json | 1764 +++++++++++++++++++++++++- package.json | 2 +- 5 files changed, 1760 insertions(+), 15 deletions(-) diff --git a/.env.local.example b/.env.local.example index e62eb3856..3f6c4d543 100644 --- a/.env.local.example +++ b/.env.local.example @@ -5,4 +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_TOKEN="" ADOBE_SCRIPT_SRC="" -REPOSITORY_ACCESS_TOKEN="" +DESIGN_SYSTEM_ACCESS_TOKEN="" diff --git a/app/[lang]/(live-current)/layout.tsx b/app/[lang]/(live-current)/layout.tsx index 27915c9e3..0d0445ae1 100644 --- a/app/[lang]/(live-current)/layout.tsx +++ b/app/[lang]/(live-current)/layout.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @next/next/no-css-tags */ import "@scandic-hotels/design-system/style.css" import AdobeScript from "@/components/Current/AdobeScript" @@ -23,7 +22,9 @@ export default function RootLayout({ return ( + {/* eslint-disable-next-line @next/next/no-css-tags */} + {/* eslint-disable-next-line @next/next/no-css-tags */}