fix: add intents for buttons

app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css

@@ -1,6 +1,6 @@
 .container {
   display: flex;
-  gap: 2rem;
+  gap: 3.4rem;
   flex-direction: column;
   max-width: var(--max-width);
   padding-left: 2rem;
@@ -10,7 +10,7 @@
 .header {
   display: grid;
   gap: 2rem;
-  margin-top: 4rem;
+  padding-top: 4rem;
 }
 
 .title {
@@ -24,18 +24,22 @@
 .preamble {
   font-weight: 400;
   font-family: var(--fira-sans);
-  font-size: 2.4rem;
+  font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
   margin: 0;
 }
 
 @media screen and (min-width: 950px) {
   .header {
-    margin: 0;
+    padding: 0;
   }
 
   .container {
     padding-left: 0;
     padding-right: 0;
-    gap: 3.4rem;
+    gap: 4.7rem;
+  }
+
+  .preamble {
+    font-size: var(--typography-Subtitle-Desktop-fontSize, 18px);
   }
 }

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -10,7 +10,7 @@ export default async function CurrentBenefitsBlock() {
     <section className={styles.container}>
       {benefits.map((benefit) => (
         <Link href={benefit.href} key={benefit.id} className={styles.card}>
-          <Title level="h3" as="h4" className={styles.title}>
+          <Title level="h3" as="h5" className={styles.title}>
             <span className={styles.value}>{benefit.value}</span>{" "}
             {benefit.explanation}
           </Title>

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -0,0 +1,39 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import Title from "../../../Title"
+import Button from "@/components/TempDesignSystem/Button"
+import { Lock } from "react-feather"
+
+import styles from "./next.module.css"
+
+export default async function NextLevelBenefitsBlock() {
+  const { nextLevel, perks } = await serverClient().user.benefits.next()
+
+  return (
+    <section className={styles.container}>
+      <header className={styles.header}>
+        <Title as="h3" uppercase>
+          Next Level perks and benefits.
+        </Title>
+        <p className={styles.subtitle}>
+          Here&apos;s a sneak peek at the extra benefits waiting just for you,
+          when you level up to {nextLevel}
+        </p>
+      </header>
+      <div className={styles.cardContainer}>
+        {perks.map((perk) => (
+          <article key={perk.id} className={styles.card}>
+            <Button type="button" intent="secondary" variant="icon" disabled>
+              <Lock height={16} />
+              Level up to unlock
+            </Button>
+            <div>
+              <span className={styles.level}>As our {nextLevel}</span>{" "}
+              <p className={styles.subtitle}>{perk.explanation}</p>
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  )
+}

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -0,0 +1,47 @@
+.container {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.cardContainer {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.card {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  border-radius: 4px;
+  background-color: var(--some-grey-color, #e5e5e5);
+  text-align: center;
+}
+
+.level {
+  font-size: var(--typography-Script-Mobile-fontSize, 18px);
+  font-weight: var(--typography-Script-Mobile-fontWeight);
+  font-style: italic; /* font-family: var(--ff-biro-script-plus); */
+}
+
+.subtitle {
+  font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
+}
+
+@media screen and (min-width: 950px) {
+  .cardContainer {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .level {
+    font-size: var(--typography-Script-Desktop-fontSize);
+    font-weight: var(--typography-Script-Desktop-fontWeight);
+  }
+
+  .subtitle {
+    font-size: var(--typography-Subtitle-Desktop-fontSize, 18px);
+  }
+}

components/MyPages/Title/title.module.css

@@ -10,52 +10,52 @@
 
 .h1 {
   font-size: var(--typography-Title1-Mobile-fontSize);
-  line-height: var(--typography-Title1-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title1-Mobile-lineHeight);
 }
 
 .h2 {
   font-size: var(--typography-Title2-Mobile-fontSize);
-  line-height: var(--typography-Title2-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title2-Mobile-lineHeight);
 }
 
 .h3 {
   font-size: var(--typography-Title3-Mobile-fontSize);
-  line-height: var(--typography-Title3-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title3-Mobile-lineHeight);
 }
 
 .h4 {
   font-size: var(--typography-Title4-Mobile-fontSize);
-  line-height: var(--typography-Title4-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title4-Mobile-lineHeight);
 }
 
 .h5 {
   font-size: var(--typography-Title5-Mobile-fontSize);
-  line-height: var(--typography-Title5-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title5-Mobile-lineHeight);
 }
 
 @media screen and (min-width: 950px) {
   .h1 {
     font-size: var(--typography-Title1-Desktop-fontSize);
-    line-height: var(--typography-Title1-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title1-Desktop-lineHeight);
   }
 
   .h2 {
     font-size: var(--typography-Title2-Desktop-fontSize);
-    line-height: var(--typography-Title2-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title2-Desktop-lineHeight);
   }
 
   .h3 {
     font-size: var(--typography-Title3-Desktop-fontSize);
-    line-height: var(--typography-Title3-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title3-Desktop-lineHeight);
   }
 
   .h4 {
     font-size: var(--typography-Title4-Desktop-fontSize);
-    line-height: var(--typography-Title4-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title4-Desktop-lineHeight);
   }
 
   .h5 {
     font-size: var(--typography-Title5-Desktop-fontSize);
-    line-height: var(--typography-Title5-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title5-Desktop-lineHeight);
   }
 }

components/TempDesignSystem/Button/button.module.css

@@ -23,4 +23,53 @@
 
 .icon {
   font-size: 1.8rem;
+  align-items: baseline;
+}
+
+/* Primary styles */
+.primary {
+  background-color: var(--some-grey-color, #444343);
+  border: 2px solid transparent;
+  outline: 1px solid transparent;
+  border-radius: 46px;
+  padding: 6px 12px;
+}
+
+.primary:hover {
+  background: var(--some-grey-color, #444343);
+}
+
+.primary:active,
+.primary:focus {
+  border: var(--some-grey-color, #444343);
+  outline: var(--some-grey-color, #444343);
+}
+
+/* Secondary styles */
+.secondary {
+  border: 1px solid var(--some-grey-color, #444343);
+  background-color: transparent;
+  color: var(--some-grey-color, #444343);
+  border-radius: 46px;
+  padding: 6px 12px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.secondary:hover {
+  border: 1px solid var(--some-grey-color, #444343);
+}
+
+.secondary:active,
+.secondary:focus {
+  border: 1px solid var(--some-grey-color, #444343);
+}
+
+/* Disabled styles */
+.btn:disabled {
+  border: 1px solid var(--some-grey-color, #444343);
+  background-color: transparent;
+  color: var(--some-grey-color, #444343);
+  cursor: not-allowed;
 }

components/TempDesignSystem/Button/index.tsx

@@ -10,8 +10,14 @@ export default function Button({
   asChild = false,
   className,
   variant,
+  intent,
   ...props
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
-  return <Comp className={buttonVariants({ className, variant })} {...props} />
+  return (
+    <Comp
+      className={buttonVariants({ className, variant, intent })}
+      {...props}
+    />
+  )
 }

components/TempDesignSystem/Button/variants.ts

@@ -8,6 +8,10 @@ export const buttonVariants = cva(styles.btn, {
       default: styles.default,
       icon: styles.icon,
     },
+    intent: {
+      primary: styles.primary,
+      secondary: styles.secondary,
+    },
   },
   defaultVariants: {
     variant: "default",

lib/graphql/Query/BenefitPage.graphql

@@ -1,45 +0,0 @@
-fragment Breadcrumbs on MyPage {
-  breadcrumbs {
-    parents {
-      href
-      title
-    }
-    title
-  }
-}
-
-query GetBenefitsPage($locale: String!, $url: String!) {
-  all_my_page(where: { code_defined_route: $url, locale: $locale }) {
-    items {
-      blocks {
-        ... on MyPageBlocksShortcuts {
-          __typename
-          shortcuts {
-            external_link {
-              href
-              title
-            }
-          }
-        }
-        ... on MyPageBlocksNextLevelBlock {
-          __typename
-          next_level_block {
-            subtitle
-            title
-          }
-        }
-        ... on MyPageBlocksPersonalBenefitsBlock {
-          __typename
-          personal_benefits_block {
-            is_visible
-          }
-        }
-      }
-      ...Breadcrumbs
-      preamble
-      title
-      url
-    }
-    total
-  }
-}

lib/graphql/Query/CurrentBlockPage.graphql

@@ -3,9 +3,9 @@
 #import "../Fragments/Blocks/List.graphql"
 #import "../Fragments/Blocks/Puff.graphql"
 #import "../Fragments/Blocks/Text.graphql"
-#import "../Fragments/CurrentBlocksPage/Breadcrumbs.graphql"
+#import "../Fragments/Breadcrumbs.graphql"
 #import "../Fragments/Hero.graphql"
-#import "../Fragments/CurrentBlocksPage/Preamble.graphql"
+#import "../Fragments/Preamble.graphql"
 
 query GetCurrentBlockPage($locale: String!, $url: String!) {
   all_current_blocks_page(limit: 1, locale: $locale, where: { url: $url }) {

package-lock.json

@@ -12,7 +12,7 @@
         "@contentstack/live-preview-utils": "^1.4.0",
         "@netlify/plugin-nextjs": "^5.0.0",
         "@radix-ui/react-slot": "^1.0.2",
-        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.3",
+        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.5",
         "@t3-oss/env-nextjs": "^0.9.2",
         "@tanstack/react-query": "^5.28.6",
         "@trpc/client": "^11.0.0-next-beta.318",
@@ -2237,7 +2237,7 @@
     },
     "node_modules/@scandic-hotels/design-system": {
       "version": "0.1.0",
-      "resolved": "git+https://x-token-auth:ATCTT3xFfGN0gu4BSBWR71ifMM-_iAT2ip_jnjF0OjTkYhEB3sn71fPCGuMUA7O3BxJ2oHptZVGAlVvMUoeo3Wfute7RYido9HlvrVjemqns9hR3WSf6eNHhsSy5bLtxQ6VK7mnSSAGHaCqTejxirs_PmOB_jPIi1Ft4OEDehtnMxCteg8rO-IE%3D27DF8E0B@bitbucket.org/scandic-swap/design-system.git#33f0dc9660683409679f9f1a977dec049608377e",
+      "resolved": "git+https://x-token-auth@bitbucket.org/scandic-swap/design-system.git#ea5ae53b69bf868f88728db3baa81006fa0ccad4",
       "peerDependencies": {
         "react": "^18.2.0",
         "react-aria-components": "^1.0.1",

package.json

@@ -21,7 +21,7 @@
     "@contentstack/live-preview-utils": "^1.4.0",
     "@netlify/plugin-nextjs": "^5.0.0",
     "@radix-ui/react-slot": "^1.0.2",
-    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.3",
+    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.5",
     "@t3-oss/env-nextjs": "^0.9.2",
     "@tanstack/react-query": "^5.28.6",
     "@trpc/client": "^11.0.0-next-beta.318",

types/requests/benefitPage.ts

@@ -1,56 +0,0 @@
-import type { AllRequestResponse } from "./utils/all"
-import type { MyPageBlocksEnum, Typename } from "./utils/typename"
-
-type Shortcuts = {
-  title: string
-  subtitle: string
-  external_link: {
-    href: string
-    title: string
-  }
-}
-
-type PersonalBenefitsBlock = {
-  is_visible: boolean
-}
-
-type NextLevelBlock = {
-  title: string
-  subtitle: string
-}
-
-export type Blocks =
-  | Typename<NextLevelBlock, MyPageBlocksEnum.MyPageBlocksNextLevelBlock>
-  | Typename<
-      PersonalBenefitsBlock,
-      MyPageBlocksEnum.MyPageBlocksPersonalBenefitsBlock
-    >
-  | Typename<Shortcuts, MyPageBlocksEnum.MyPageBlocksShortcuts>
-
-export type Breadcrumb = {
-  href: string
-  title: string
-}
-
-export type Breadcrumbs = {
-  parents: Breadcrumb[]
-  title: string
-}
-
-export type BenefitPage = {
-  content: Blocks[]
-  breadcrumbs: Breadcrumbs
-  code_defined_route: string
-  preamble: string
-  system: {
-    created_at: string
-    uid: string
-    updated_at: string
-  }
-  title: string
-  url: string
-}
-
-export type GetBenefitsPageData = {
-  all_my_page: AllRequestResponse<BenefitPage>
-}

types/requests/utils/typename.ts

@@ -16,10 +16,3 @@ export type BlocksTypename = keyof typeof BlocksTypenameEnum
 export type Typename<T, K> = T & {
   __typename: K
 }
-
-export enum MyPageBlocksEnum {
-  MyPageBlocksNextLevelBlock = "MyPageBlocksNextLevelBlock",
-  MyPageBlocksPersonalBenefitsBlock = "MyPageBlocksPersonalBenefitsBlock",
-  MyPageBlocksShortcuts = "MyPageBlocksShortcuts",
-}
-export type MyPageBlocksTypename = keyof typeof MyPageBlocksEnum