feat(WEB-154): my profile view

components/MaxWidth/index.tsx

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./maxWidth.module.css"
+
+import type { MaxWidthProps } from "@/types/components/max-width"
+
+const maxWidthVariants = cva(styles.container)
+
+export default function MaxWidth({
+  className,
+  tag = "section",
+  ...props
+}: MaxWidthProps
+) {
+  const Cmp = tag
+  return <Cmp className={maxWidthVariants({ className })} {...props} />
+}

components/MaxWidth/maxWidth.module.css

@@ -0,0 +1,3 @@
+.container {
+  max-width: var(--max-width);
+}

components/Modal/Header/header.module.css

@@ -0,0 +1 @@
+.header {}

components/Modal/Header/index.tsx

@@ -0,0 +1,9 @@
+import styles from "./header.module.css"
+
+export default function Header({ children }: React.PropsWithChildren) {
+  return (
+    <header className={styles.header}>
+      {children}
+    </header>
+  )
+}

components/Modal/Modal/index.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react"
+
+import styles from "./modal.module.css"
+
+const Modal = forwardRef<HTMLDivElement, React.PropsWithChildren>(
+  function ({ children }, ref) {
+    return (
+      <div
+        className={styles.modal}
+        ref={ref}
+        role="dialog"
+        tabIndex={-1}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+Modal.displayName = "Modal"
+
+export default Modal

components/Modal/Modal/modal.module.css

@@ -0,0 +1,11 @@
+.modal {
+  background-color: var(--some-white-color, #F2F2F2);
+  border-radius: 0.4rem;
+  left: 50%;
+  outline: none;
+  overflow: auto;
+  padding: 3.5rem 7rem;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

components/Modal/Overlay/index.tsx

@@ -0,0 +1,44 @@
+"use client"
+import { useCallback, useLayoutEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import { useHandleKeyPress } from "@/hooks/useHandleKeyPress";
+
+import styles from "./overlay.module.css"
+
+export default function Overlay({ children }: React.PropsWithChildren) {
+  const router = useRouter()
+
+  const handleOnClose = useCallback(() => {
+    return router.back()
+  }, [router])
+
+  const handleOnEscape = useCallback((evt: KeyboardEvent) => {
+    if (evt.code === "Escape") {
+      handleOnClose()
+    }
+  }, [handleOnClose])
+
+  useHandleKeyPress(handleOnEscape)
+
+  useLayoutEffect(() => {
+    // Get original body overflow
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    // Prevent scrolling on mount
+    document.body.style.overflow = 'hidden';
+    // Re-enable scrolling when component unmounts
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={handleOnClose}
+      role="button"
+    >
+      {children}
+    </div>
+  );
+};

components/Modal/Overlay/overlay.module.css

@@ -0,0 +1,9 @@
+.overlay {
+  background-color: rgba(0, 0, 0, 0.3);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9999;
+}

components/Modal/Portal.tsx

@@ -0,0 +1,9 @@
+"use client"
+import { createPortal } from 'react-dom';
+
+export default function Portal({ children }: React.PropsWithChildren) {
+  return createPortal(
+    children,
+    document.body
+  );
+};

components/Modal/Title/index.tsx

@@ -0,0 +1,9 @@
+import styles from "./title.module.css"
+
+export default function Title({ children }: React.PropsWithChildren) {
+  return (
+    <h1 className={styles.heading}>
+      {children}
+    </h1>
+  )
+}

components/Modal/Title/title.module.css

@@ -0,0 +1 @@
+.heading {}

components/Modal/index.tsx

@@ -0,0 +1,20 @@
+import Header from "./Header"
+import UiModal from "./Modal"
+import Overlay from "./Overlay"
+import Portal from "./Portal"
+import Title from "./Title"
+
+export default function Modal({ children }: React.PropsWithChildren) {
+  return (
+    <Portal>
+      <Overlay>
+        <UiModal>
+          {children}
+        </UiModal>
+      </Overlay>
+    </Portal>
+  )
+}
+
+Modal.Header = Header
+Modal.Title = Title

components/MyPages/Blocks/Challenges/index.tsx

@@ -3,7 +3,7 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./challenges.module.css"
 
-import type { ChallengesProps } from "@/types/components/myPages/challenges"
+import type { ChallengesProps } from "@/types/components/myPages/myPage/challenges"
 
 export default function Challenges({ journeys, victories }: ChallengesProps) {
   return (

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -2,7 +2,7 @@ import Image from "@/components/Image"
 
 import styles from "./friend.module.css"
 
-import type { FriendProps } from "@/types/components/myPages/friend"
+import type { FriendProps } from "@/types/components/myPages/myPage/friend"
 
 export default function Friend({ user }: FriendProps) {
   return (

components/MyPages/Blocks/Overview/Stats/QualifyingPoints/index.tsx

@@ -3,7 +3,7 @@ import Image from "@/components/Image"
 
 import styles from "./points.module.css"
 
-import type { QualifyingPointsProps } from "@/types/components/myPages/qualifyingPoints"
+import type { QualifyingPointsProps } from "@/types/components/myPages/myPage/qualifyingPoints"
 
 export default function QualifyingPoints({ user }: QualifyingPointsProps) {
   return (

components/MyPages/Blocks/Overview/Stats/TotalPoints/index.tsx

@@ -3,7 +3,7 @@ import Title from "../Title"
 
 import styles from "./totalPoints.module.css"
 
-import type { TotalPointsProps } from "@/types/components/myPages/totalPoints"
+import type { TotalPointsProps } from "@/types/components/myPages/myPage/totalPoints"
 
 export default function TotalPoints({ user }: TotalPointsProps) {
   return (

components/MyPages/Blocks/Overview/Stats/index.tsx

@@ -3,7 +3,7 @@ import TotalPoints from "./TotalPoints"
 
 import styles from "./stats.module.css"
 
-import type { StatsProps } from "@/types/components/myPages/stats"
+import type { StatsProps } from "@/types/components/myPages/myPage/stats"
 
 export default function Stats({ user }: StatsProps) {
   return (

components/MyPages/Blocks/Overview/index.tsx

@@ -4,7 +4,7 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./overview.module.css"
 
-import type { OverviewProps } from "@/types/components/myPages/overview"
+import type { OverviewProps } from "@/types/components/myPages/myPage/overview"
 
 export default function Overview({ user }: OverviewProps) {
   return (

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -4,7 +4,7 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./shortcuts.module.css"
 
-import type { ShortcutsProps } from "@/types/components/myPages/shortcuts"
+import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
 
 export default function Shortcuts({
   shortcuts,

components/MyPages/Blocks/UpcomingStays/Stay/index.tsx

@@ -6,7 +6,7 @@ import Title from "@/components/MyPages/Title"
 import styles from "./stay.module.css"
 
 import type { LangParams } from "@/types/params"
-import type { StayProps } from "@/types/components/myPages/stays"
+import type { StayProps } from "@/types/components/myPages/myPage/stays"
 
 export default function Stay({
   dateArrive,

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -4,7 +4,7 @@ import Title from "@/components/MyPages/Title"
 import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
-import type { StaysProps } from "@/types/components/myPages/stays"
+import type { StaysProps } from "@/types/components/myPages/myPage/stays"
 import Link from "next/link"
 
 export default function UpcomingStays({

components/MyPages/Breadcrumbs/Client.tsx

@@ -0,0 +1,49 @@
+"use client"
+import { Fragment } from "react"
+import { usePathname } from "next/navigation"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
+
+export default function ClientBreadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
+  const pathname = usePathname()
+  /** Temp solution until we can get breadcrumbs from CS */
+  const path = pathname.replace(`/${lang}`, '')
+  const currentBreadcrumbs = breadcrumbs?.[path]
+  if (!currentBreadcrumbs?.length) {
+    return null
+  }
+
+  return (
+    <>
+      <li className={styles.listItem}>
+        <span>/</span>
+      </li>
+      {currentBreadcrumbs.map(breadcrumb => {
+        if (breadcrumb.href) {
+          return (
+            <Fragment key={breadcrumb.title}>
+              <li className={styles.listItem}>
+                <Link className={styles.link} href={breadcrumb.href}>
+                  {breadcrumb.title}
+                </Link>
+              </li>
+              <li className={styles.listItem}>
+                <span>/</span>
+              </li>
+            </Fragment>
+          )
+        }
+
+        return (
+          <li className={styles.listItem} key={breadcrumb.title}>
+            <p className={styles.currentPage}>{breadcrumb.title}</p>
+          </li>
+        )
+      })}
+    </>
+  )
+}

components/MyPages/Breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,40 @@
+.breadcrumbs {
+  background-color: var(--some-grey-color, #f2f2f2);
+  display: block;
+  padding-bottom: 0.8rem;
+  padding-left: 2rem;
+  padding-top: 3rem;
+  position: sticky;
+  top: var(--header-height);
+  z-index: 999;
+}
+
+.list {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+  justify-content: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.listItem,
+.link {
+  color: var(--some-text-color, #000);
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.56rem;
+}
+
+.currentPage {
+  margin: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .breadcrumbs {
+    background-color: var(--some-white-color, #fff);
+    padding-left: 2.4rem;
+    padding-top: 2rem;
+  }
+}

components/MyPages/Breadcrumbs/index.tsx

@@ -0,0 +1,21 @@
+import ClientBreadcrumbs from "./Client"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
+
+export default function Breadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <Link className={styles.link} href="#">
+            Home
+          </Link>
+        </li>
+        <ClientBreadcrumbs breadcrumbs={breadcrumbs} lang={lang} />
+      </ul>
+    </nav>
+  )
+}

components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css

@@ -1,25 +0,0 @@
-.list {
-  align-items: center;
-  display: flex;
-  gap: 0.4rem;
-  justify-content: flex-start;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.listItem,
-.link {
-  color: var(--some-text-color, #000);
-  font-size: 1.4rem;
-  font-weight: 400;
-  line-height: 1.56rem;
-}
-
-.link {
-  text-decoration: none;
-}
-
-.currentPage {
-  margin: 0;
-}

components/MyPages/Header/Breadcrumbs/index.tsx

@@ -1,23 +0,0 @@
-import Link from "next/link"
-
-import styles from "./breadcrumbs.module.css"
-
-export default function Breadcrumbs() {
-  return (
-    <nav className={styles.breadcrumbs}>
-      <ul className={styles.list}>
-        <li className={styles.listItem}>
-          <Link className={styles.link} href="#">
-            Home
-          </Link>
-        </li>
-        <li className={styles.listItem}>
-          <span>/</span>
-        </li>
-        <li className={styles.listItem}>
-          <p className={styles.currentPage}>My Scandic</p>
-        </li>
-      </ul>
-    </nav>
-  )
-}

components/MyPages/Header/header.module.css

@@ -1,9 +1,3 @@
-.container {
-  position: sticky;
-  top: 0;
-  z-index: 999;
-}
-
 .header {
   align-items: center;
   background-color: var(--some-white-color, #fff);
@@ -11,16 +5,12 @@
   display: grid;
   gap: 3rem;
   grid-template-columns: 1fr auto auto;
-  height: 7rem;
-  padding: 0 2rem;
-}
+  height: var(--header-height);
 
-.breadcrumbs {
-  background-color: var(--some-grey-color, #f2f2f2);
-  display: block;
-  padding-bottom: 0.8rem;
-  padding-left: 2rem;
-  padding-top: 3rem;
+  padding: 0 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 999;
 }
 
 @media screen and (min-width: 950px) {
@@ -30,13 +20,6 @@
     box-shadow: none;
     gap: 3.2rem;
     grid-template-columns: 1fr 19rem auto auto;
-    height: 4.5rem;
     padding: 0 2.4rem;
   }
-
-  .breadcrumbs {
-    background-color: var(--some-white-color, #fff);
-    padding-left: 2.4rem;
-    padding-top: 2rem;
-  }
-}
+}

components/MyPages/Header/index.tsx

@@ -1,4 +1,3 @@
-import Breadcrumbs from "./Breadcrumbs"
 import Hamburger from "./Hamburger"
 import LanguageSwitcher from "./LanguageSwitcher"
 import Logo from "./Logo"
@@ -10,16 +9,11 @@ import type { LangParams } from "@/types/params"
 
 export default function Header({ lang }: LangParams) {
   return (
-    <div className={styles.container}>
-      <header className={styles.header}>
-        <Logo lang={lang} />
-        <LanguageSwitcher />
-        <User />
-        <Hamburger />
-      </header>
-      <div className={styles.breadcrumbs}>
-        <Breadcrumbs />
-      </div>
-    </div>
+    <header className={styles.header}>
+      <Logo lang={lang} />
+      <LanguageSwitcher />
+      <User />
+      <Hamburger />
+    </header>
   )
 }

components/MyPages/Sidebar/Client.tsx

@@ -0,0 +1,46 @@
+"use client"
+import { usePathname } from "next/navigation"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import type { LangParams } from "@/types/params"
+
+export default function ClientSidebar({ lang }: LangParams) {
+  const pathname = usePathname()
+  return (
+    <>
+      <Link
+        currentPath={pathname}
+        href={`/${lang}/my-pages`}
+        variant="sidebar"
+      >
+        My Pages
+      </Link>
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        My Stays
+      </Link>
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        My Points
+      </Link>
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        My Benefits
+      </Link>
+      {/* <Link currentPath={pathname} href="#" variant="sidebar">
+          My Challenges
+        </Link>
+        <Link currentPath={pathname} href="#" variant="sidebar">
+          My Favourites
+        </Link> */}
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        About Scandic Friends
+      </Link>
+      <Link
+        currentPath={pathname}
+        href={`/${lang}/my-pages/profile`}
+        variant="sidebar"
+      >
+        My Profile
+      </Link>
+    </>
+  )
+}

components/MyPages/Sidebar/index.tsx

@@ -1,10 +1,10 @@
-"use client"
+import { Fragment } from "react"
 import { LogOut } from "react-feather"
-import Link from "../../TempDesignSystem/Link"
+import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./sidebar.module.css"
-import { SidebarProps } from "@/types/requests/myPages/navigation"
-import { Fragment } from "react"
+
+import type { SidebarProps } from "@/types/requests/myPages/navigation"
 
 export default function Sidebar({ menuItems }: SidebarProps) {
   return (
@@ -17,16 +17,16 @@ export default function Sidebar({ menuItems }: SidebarProps) {
             </Link>
             {item.subItems
               ? item.subItems.map((subItem) => {
-                  return (
-                    <Link
-                      key={subItem.uid}
-                      href={subItem.url}
-                      variant={"sidebar"}
-                    >
-                      {subItem.linkText}
-                    </Link>
-                  )
-                })
+                return (
+                  <Link
+                    key={subItem.uid}
+                    href={subItem.url}
+                    variant={"sidebar"}
+                  >
+                    {subItem.linkText}
+                  </Link>
+                )
+              })
               : null}
           </Fragment>
         ))}

components/MyPages/Sidebar/sidebar.module.css

@@ -2,7 +2,7 @@
   align-self: flex-start;
   display: none;
   position: sticky;
-  top: 13.2rem;
+  top: 14.6rem;
 }
 
 .nav {
@@ -13,33 +13,8 @@
   padding-left: 4rem;
 }
 
-.link {
-  align-items: center;
-  color: var(--some-text-color, #111);
-  display: flex;
-  font-size: 1.6rem;
-  font-weight: 400;
-  gap: 0.6rem;
-  line-height: 1.9rem;
-  position: relative;
-  text-decoration: none;
-}
-
-.active {
-  font-weight: 600;
-}
-
-.active::before {
-  bottom: -0.4rem;
-  background-color: var(--some-text-color, #000);
-  content: "";
-  height: 0.2rem;
-  position: absolute;
-  width: 100%;
-}
-
 @media screen and (min-width: 950px) {
   .sidebar {
     display: block;
   }
-}
+}

components/MyPages/Title/index.tsx

@@ -1,41 +1,21 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./title.module.css"
+import { headingVariants } from "./variants"
 
 import type { HeadingProps } from "@/types/components/myPages/title"
 
-const config = {
-  variants: {
-    text: {
-      uppercase: styles.uppercase,
-    },
-    type: {
-      h1: styles.h1,
-      h2: styles.h2,
-      h3: styles.h3,
-      h4: styles.h4,
-      h5: styles.h5,
-    },
-  },
-  defaultVariants: {
-    type: "h1",
-  },
-} as const
-
-const headingStyles = cva(styles.heading, config)
-
 export default function Title({
   as,
   children,
   className = "",
   level = "h1",
   uppercase = false,
+  weight,
 }: HeadingProps) {
   const Hx = level
-  const classNames = headingStyles({
+  const classNames = headingVariants({
     className,
     text: uppercase ? "uppercase" : undefined,
     type: as ?? level,
+    weight,
   })
   return <Hx className={classNames}>{children}</Hx>
 }

components/MyPages/Title/title.module.css

@@ -1,5 +1,5 @@
 .heading {
-  font-weight: 900;
+  /* font-family: var(--ff-brandon-text); */
   margin: 0;
   padding: 0;
 }
@@ -33,6 +33,30 @@
   line-height: var(--typography-Title5-Mobile-lineHeight);
 }
 
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
 @media screen and (min-width: 950px) {
   .h1 {
     font-size: var(--typography-Title1-Desktop-fontSize);
@@ -58,4 +82,4 @@
     font-size: var(--typography-Title5-Desktop-fontSize);
     line-height: var(--typography-Title5-Desktop-lineHeight);
   }
-}
+}

components/MyPages/Title/variants.ts

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+const config = {
+  variants: {
+    text: {
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+    weight: "black",
+  },
+} as const
+
+export const headingVariants = cva(styles.heading, config)

components/MyProfile/Card/Title/index.tsx

@@ -0,0 +1,21 @@
+import { headingVariants } from "./variants"
+
+import type { HeadingProps } from "@/types/components/myPages/myProfile/card/title"
+
+export default function Title({
+  as,
+  children,
+  className = "",
+  level = "h1",
+  uppercase = false,
+  weight,
+}: HeadingProps) {
+  const Hx = level
+  const classNames = headingVariants({
+    className,
+    text: uppercase ? "uppercase" : undefined,
+    type: as ?? level,
+    weight,
+  })
+  return <Hx className={classNames}>{children}</Hx>
+}

components/MyProfile/Card/Title/title.module.css

@@ -0,0 +1,68 @@
+.heading {
+  color: var(--some-black-color, #2E2E2E);
+  /* font-family: var(--ff-brandon-text); */
+  letter-spacing: 6%;
+  margin: 0;
+  padding: 0;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.h1 {
+  font-size: 2.5rem;
+  line-height: 3.5rem;
+}
+
+.h2 {
+  font-size: 1.3rem;
+  line-height: 1.6rem;
+}
+
+.h3 {
+  font-size: 1.8rem;
+}
+
+.h4 {
+  font-size: 1.6rem;
+}
+
+.h5 {
+  font-size: 1.3rem;
+}
+
+.h6 {
+  font-size: 1rem;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
+/* @media screen and (min-width: 950px) {
+  .h1 {
+    font-size: 3.8rem;
+    line-height: 4.5rem;
+  }
+} */

components/MyProfile/Card/Title/variants.ts

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+const config = {
+  variants: {
+    text: {
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+    weight: "medium",
+  },
+} as const
+
+export const headingVariants = cva(styles.heading, config)

components/MyProfile/Card/card.module.css

@@ -0,0 +1,6 @@
+.card {
+  background-color: var(--some-grey-color, #F2F2F2);
+  border-radius: 0.4rem;
+  min-height: 15.6rem;
+  padding: 3.8rem;
+}

components/MyProfile/Card/index.tsx

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority"
+
+import Title from "./Title"
+
+import styles from "./card.module.css"
+
+import type { CardProps } from "@/types/components/myPages/myProfile/card/card"
+
+const cardStyles = cva(styles.card)
+
+export default function Card({ className, tag = "section", ...props }: CardProps) {
+  const Cmp = tag
+  return <Cmp className={cardStyles({ className })} {...props} />
+}
+
+Card.Title = Title

components/MyProfile/CommunicationPreferences/com.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/MyProfile/CommunicationPreferences/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./com.module.css"
+
+export default function CommunicationPreferences() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>My communication preferences</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/CreditCards/creditCards.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/MyProfile/CreditCards/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./creditCards.module.css"
+
+export default function CreditCards() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>My credit cards</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/LabelAndIcon/index.tsx

@@ -0,0 +1,25 @@
+import styles from "./lai.module.css"
+
+export default function LabelAndIcon({ children }: React.PropsWithChildren) {
+  return (
+    <div className={styles.container}>
+      {children}
+    </div>
+  )
+}
+
+function Icon({ children }: React.PropsWithChildren) {
+  return <span className={styles.icon}>{children}</span>
+}
+
+function Label({ children }: React.PropsWithChildren) {
+  return <span className={styles.label}>{children}</span>
+}
+
+function Content({ children }: React.PropsWithChildren) {
+  return <span className={styles.content}>{children}</span>
+}
+
+LabelAndIcon.Icon = Icon
+LabelAndIcon.Label = Label
+LabelAndIcon.Content = Content

components/MyProfile/LabelAndIcon/lai.module.css

@@ -0,0 +1,45 @@
+.container {
+  align-content: flex-start;
+  align-items: center;
+  display: grid;
+  gap: 0.4rem 1.7rem;
+  grid-template-areas:
+    "icon label"
+    "icon content";
+  justify-content: flex-start;
+}
+
+.icon {
+  align-items: center;
+  background-color: var(--some-white-color, #FFF);
+  border-radius: 50%;
+  display: flex;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  grid-area: icon;
+  height: 3rem;
+  justify-content: center;
+  line-height: 1.9rem;
+  width: 3rem;
+}
+
+.label,
+.content {
+  font-family: var(--ff-fira-sans);
+  font-weight: 400;
+  letter-spacing: -1.5%;
+  line-height: 2.4rem;
+}
+
+.label {
+  color: var(--some-black-color, #404040);
+  grid-area: label;
+  font-size: 1.6rem;
+}
+
+.content {
+  color: var(--some-black-color, #000);
+  grid-area: content;
+  font-size: 1.8rem;
+}

components/MyProfile/MembershipCard/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./membershipCard.module.css"
+
+export default function MembershipCard() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>Membership cards</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/MembershipCard/membershipCard.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/MyProfile/Password/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./password.module.css"
+
+export default function Password() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>Password</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/Password/password.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/MyProfile/Profile/index.tsx

@@ -0,0 +1,108 @@
+import { cva } from "class-variance-authority"
+
+import Card from "@/components/MyProfile/Card"
+import Image from "@/components/Image"
+import LabelAndIcon from "../LabelAndIcon"
+
+import styles from "./profile.module.css"
+
+import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"
+
+const profileStyles = cva(styles.profile)
+
+export default function Profile({ className, user, ...props }: ProfileProps) {
+  return (
+    <Card className={profileStyles({ className })} {...props}>
+      <header className={styles.header}>
+        <Image
+          alt="Account Icon"
+          height={40}
+          src="/account_circle.svg"
+          width={40}
+        />
+        <Card.Title uppercase>
+          {user.name}
+        </Card.Title>
+      </header>
+      <section className={styles.info}>
+        <LabelAndIcon>
+          <LabelAndIcon.Icon>SE</LabelAndIcon.Icon>
+          <LabelAndIcon.Label>Country</LabelAndIcon.Label>
+          <LabelAndIcon.Content>Sweden</LabelAndIcon.Content>
+        </LabelAndIcon>
+        <LabelAndIcon>
+          <LabelAndIcon.Icon>
+            <Image
+              alt="Calendar Icon"
+              height={20}
+              src="/calendar_month.svg"
+              width={20}
+            />
+          </LabelAndIcon.Icon>
+          <LabelAndIcon.Label>Date of Birth</LabelAndIcon.Label>
+          <LabelAndIcon.Content>27/05/1977</LabelAndIcon.Content>
+        </LabelAndIcon>
+        <LabelAndIcon>
+          <LabelAndIcon.Icon>
+            <Image
+              alt="Email Icon"
+              height={20}
+              src="/alternate_email.svg"
+              width={20}
+            />
+          </LabelAndIcon.Icon>
+          <LabelAndIcon.Label>Email</LabelAndIcon.Label>
+          <LabelAndIcon.Content>f*********@g****.com</LabelAndIcon.Content>
+        </LabelAndIcon>
+        <LabelAndIcon>
+          <LabelAndIcon.Icon>
+            <Image
+              alt="Cellphone Icon"
+              height={20}
+              src="/phone.svg"
+              width={20}
+            />
+          </LabelAndIcon.Icon>
+          <LabelAndIcon.Label>Phone number</LabelAndIcon.Label>
+          <LabelAndIcon.Content>+46 ******00</LabelAndIcon.Content>
+        </LabelAndIcon>
+        <LabelAndIcon>
+          <LabelAndIcon.Icon>
+            <Image
+              alt="House Icon"
+              height={20}
+              src="/home.svg"
+              width={20}
+            />
+          </LabelAndIcon.Icon>
+          <LabelAndIcon.Label>Address</LabelAndIcon.Label>
+          <LabelAndIcon.Content>T***************</LabelAndIcon.Content>
+        </LabelAndIcon>
+        <LabelAndIcon>
+          <LabelAndIcon.Icon>
+            <Image
+              alt="House Icon"
+              height={20}
+              src="/home.svg"
+              width={20}
+            />
+          </LabelAndIcon.Icon>
+          <LabelAndIcon.Label>City/State</LabelAndIcon.Label>
+          <LabelAndIcon.Content>S*******</LabelAndIcon.Content>
+        </LabelAndIcon>
+        <LabelAndIcon>
+          <LabelAndIcon.Icon>
+            <Image
+              alt="House Icon"
+              height={20}
+              src="/home.svg"
+              width={20}
+            />
+          </LabelAndIcon.Icon>
+          <LabelAndIcon.Label>Zip code</LabelAndIcon.Label>
+          <LabelAndIcon.Content>1****</LabelAndIcon.Content>
+        </LabelAndIcon>
+      </section>
+    </Card>
+  )
+}

components/MyProfile/Profile/profile.module.css

@@ -0,0 +1,19 @@
+.profile {
+  display: grid;
+  gap: 3.4rem;
+  grid-template-rows: auto 1fr;
+  min-height: 46rem;
+}
+
+.header {
+  align-items: center;
+  display: grid;
+  gap: 1.4rem;
+  grid-template-columns: auto 1fr;
+}
+
+.info {
+  display: grid;
+  gap: 1.8rem;
+  grid-template-columns: 1fr 1fr;
+}

components/MyProfile/Wishes/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./wishes.module.css"
+
+export default function Wishes() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>My wishes</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/Wishes/wishes.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/TempDesignSystem/Button/button.module.css

@@ -72,3 +72,79 @@
   color: var(--some-grey-color, #444343);
   cursor: not-allowed;
 }
+
+.small {
+  border-radius: 3rem;
+  font-size: 1.4rem;
+  height: 2.6rem;
+  line-height: 1.7rem;
+  padding: 0.8rem 2.2rem;
+}
+
+.average {
+  border-radius: 4.7rem;
+  font-size: 1.4rem;
+  height: 3.2rem;
+  letter-spacing: 1%;
+  line-height: 1.6rem;
+  padding: 0.65rem 1.3rem;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
+.primary {
+  background-color: var(--scandic-blue, #02838E);
+  border: 0.1rem solid var(--scandic-blue, #02838E);
+  color: var(--some-white-color, #FFF);
+}
+
+.secondary {
+  background-color: var(--some-black-color, #000);
+  border: 0.1rem solid var(--some-black-color, #000);
+  color: var(--some-white-color, #FFF);
+}
+
+.tertiary {
+  background-color: var(--some-red-color, #D60728);
+  border: 0.1rem solid var(--some-red-color, #D60728);
+  color: var(--some-white-color, #FFF);
+}
+
+.quarternary {
+  background-color: var(--some-grey-color, #727272);
+  border: 0.1rem solid var(--some-black-color, #727272);
+  color: var(--some-white-color, #FFF);
+}
+
+.white {
+  background-color: var(--some-white-color, #FFF);
+  border: 0.1rem solid var(--some-black-color, #000);
+  color: var(--some-black-color, #000);
+}
+
+.disabled {
+  background-color: var(--some-grey-color, #D9D9D9);
+  color: var(--some-grey-color, #757575);
+}

components/TempDesignSystem/Button/index.tsx

@@ -8,16 +8,22 @@ import type { ButtonProps } from "./button"
 
 export default function Button({
   asChild = false,
+  bgcolor,
   className,
+  disabled,
+  size,
   variant,
-  intent,
+  weight,
   ...props
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
-  return (
-    <Comp
-      className={buttonVariants({ className, variant, intent })}
-      {...props}
-    />
-  )
+  const classNames = buttonVariants({
+    bgcolor,
+    className,
+    disabled,
+    size,
+    variant,
+    weight,
+  })
+  return <Comp className={classNames} disabled={disabled} {...props} />
 }

components/TempDesignSystem/Button/variants.ts

@@ -4,16 +4,32 @@ import styles from "./button.module.css"
 
 export const buttonVariants = cva(styles.btn, {
   variants: {
+    bgcolor: {
+      primary: styles.primary,
+      secondary: styles.secondary,
+      tertiary: styles.tertiary,
+      quarternary: styles.quarternary,
+      white: styles.white,
+    },
+    size: {
+      small: styles.small,
+      regular: styles.average,
+    },
     variant: {
       default: styles.default,
       icon: styles.icon,
     },
-    intent: {
-      primary: styles.primary,
-      secondary: styles.secondary,
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
     },
   },
   defaultVariants: {
     variant: "default",
+    weight: "regular",
   },
 })

components/TempDesignSystem/Link/link.module.css

@@ -28,4 +28,4 @@
   height: 0.2rem;
   position: absolute;
   width: 100%;
-}
+}

components/TempDesignSystem/Link/link.ts

@@ -4,6 +4,6 @@ import type { VariantProps } from "class-variance-authority"
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    VariantProps<typeof linkVariants> {
+  VariantProps<typeof linkVariants> {
   href: string
 }