feat(WEB-128): desktop and mobile initial wireframe implemented

components/MyPages/Blocks/Overview/Mobile.tsx

@@ -0,0 +1,13 @@
+import Breadcrumbs from "@/components/MyPages/Header/Breadcrumbs"
+import Title from "@/components/MyPages/Title"
+
+import styles from "./overview.module.css"
+
+export default function OverviewMobile() {
+  return (
+    <section className={styles.overviewMobile}>
+      <Breadcrumbs />
+      <Title uppercase>Good Morning [NAME]</Title>
+    </section>
+  )
+}

components/MyPages/Blocks/Overview/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./overview.module.css"
+
+export default function Overview() {
+  return <section className={styles.overview}></section>
+}

components/MyPages/Blocks/Overview/overview.module.css

@@ -0,0 +1,34 @@
+.overview {
+  display: none;
+}
+
+.overviewMobile {
+  background-color: var(--some-grey-color, #f2f2f2);
+  left: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  padding: 3.5rem 2rem 2rem;
+  position: relative;
+  right: 50%;
+  width: 100dvw;
+}
+
+@media screen and (min-width: 950px) {
+  .overview {
+    background-color: var(--some-grey-color, #f2f2f2);
+    border-radius: 0.8rem;
+    display: block;
+    height: 35rem;
+    left: unset;
+    margin-left: unset;
+    margin-right: unset;
+    max-width: var(--max-width);
+    position: static;
+    right: unset;
+    width: 100%;
+  }
+
+  .overviewMobile {
+    display: none;
+  }
+}

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

@@ -0,0 +1,66 @@
+import { dt } from "@/lib/dt"
+
+import Image from "@/components/Image"
+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/stay"
+
+export default function Stay({
+  dateArrive,
+  dateDepart,
+  guests,
+  hotel,
+  lang,
+}: StayProps & LangParams) {
+  const daysUntilArrival = dt(dateArrive).diff(dt(), "days")
+  const arrival = dt(dateArrive).locale(lang)
+  const arrivalDate = arrival.format("DD MMM")
+  const arrivalDateTime = arrival.format("YYYY-MM-DD")
+  const depart = dt(dateDepart).locale(lang)
+  const departDate = depart.format("DD MMM YYYY")
+  const departDateTime = depart.format("YYYY-MM-DD")
+  return (
+    <article className={styles.stay}>
+      <div className={styles.imageContainer}>
+        <div className={styles.badge}>
+          <time className={styles.time}>In {daysUntilArrival} days</time>
+        </div>
+        <Image
+          alt="Placeholder image flower"
+          height={73}
+          src="/flower-image.svg"
+          width={73}
+        />
+      </div>
+      <footer className={styles.footer}>
+        <Title level="h3" uppercase>
+          {hotel}
+        </Title>
+        <section className={styles.container}>
+          <div className={styles.date}>
+            <Image
+              alt="Calendar Icon"
+              height={20}
+              src="/calendar_month.svg"
+              width={20}
+            />
+            <p>
+              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+              {" - "}
+              <time dateTime={departDateTime}>{departDate}</time>
+            </p>
+          </div>
+          <div className={styles.guests}>
+            <Image alt="Guests Icon" height={20} src="/person.svg" width={20} />
+            <span>
+              {guests} guest{guests > 1 ? "s" : ""}
+            </span>
+          </div>
+        </section>
+      </footer>
+    </article>
+  )
+}

components/MyPages/Blocks/UpcomingStays/Stay/stay.module.css

@@ -0,0 +1,61 @@
+.stay {
+  background-color: var(--some-grey-color, #ababab);
+  border-radius: 0.8rem;
+  display: grid;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 32rem;
+  grid-template-rows: 1fr 9rem;
+  height: 28rem;
+}
+
+.imageContainer {
+  align-items: center;
+  display: grid;
+  justify-content: center;
+  position: relative;
+}
+
+.badge {
+  background-color: var(--some-white-color, #fff);
+  border-radius: 4rem;
+  left: 1.5rem;
+  padding: 0.6rem 1.4rem;
+  position: absolute;
+  top: 1.5rem;
+}
+
+.time {
+  color: var(--some-black-color, #000);
+  font-family: var(--ff-fira-sans);
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+
+.footer {
+  background-color: var(--some-white-color, #fff);
+  border-bottom: 0.1rem solid var(--some-grey-color, #d9d9d9);
+  border-left: 0.1rem solid var(--some-grey-color, #d9d9d9);
+  border-right: 0.1rem solid var(--some-grey-color, #d9d9d9);
+  border-radius: 0 0 0.8rem 0.8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  height: 9rem;
+  padding: 1.5rem 2rem;
+}
+
+.container {
+  align-items: center;
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: auto 1fr;
+  justify-content: flex-start;
+}
+
+.date,
+.guests {
+  align-items: center;
+  display: flex;
+  gap: 0.6rem;
+}

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -0,0 +1,42 @@
+import Stay from "./Stay"
+import Title from "@/components/MyPages/Title"
+
+import styles from "./upcoming.module.css"
+
+import type { LangParams } from "@/types/params"
+
+const stays = [
+  {
+    dateArrive: new Date("04 27 2024"),
+    dateDepart: new Date("04 28 2024"),
+    guests: 2,
+    hotel: "Scandic Helsinki Hub",
+  },
+  {
+    dateArrive: new Date("05 27 2024"),
+    dateDepart: new Date("05 28 2024"),
+    guests: 2,
+    hotel: "Scandic Örebro Central",
+  },
+  {
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Oslo City",
+  },
+]
+
+export default function UpcomingStays({ lang }: LangParams) {
+  return (
+    <section className={styles.container}>
+      <Title level="h2" uppercase>
+        Your upcoming stays
+      </Title>
+      <section className={styles.stays}>
+        {stays.map((stay) => (
+          <Stay key={stay.hotel} {...stay} lang={lang} />
+        ))}
+      </section>
+    </section>
+  )
+}

components/MyPages/Blocks/UpcomingStays/upcoming.module.css

@@ -0,0 +1,30 @@
+.container {
+  display: grid;
+  gap: 2.2rem;
+  margin-right: -2rem;
+  max-width: var(--max-width);
+  overflow: hidden;
+}
+
+.stays {
+  display: flex;
+  gap: 2rem;
+  overflow-x: auto;
+  padding-right: 2rem;
+
+  /* Hide scrollbar IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide Scrollbar Firefox */
+  scrollbar-width: none;
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.stays::-webkit-scrollbar {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .container {
+    margin-right: 0;
+  }
+}

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

@@ -0,0 +1,21 @@
+.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;
+}

components/MyPages/Header/Breadcrumbs/index.tsx

@@ -0,0 +1,23 @@
+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>My Scandic</p>
+        </li>
+      </ul>
+    </nav>
+  )
+}

components/MyPages/Header/Hamburger/hamburger.module.css

@@ -0,0 +1,16 @@
+.hamburger {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0;
+}
+
+.line {
+  background-color: var(--some-black-color, #1c1b1f);
+  border-radius: 0.8rem;
+  height: 0.2rem;
+  width: 2.5rem;
+}

components/MyPages/Header/Hamburger/index.tsx

@@ -0,0 +1,11 @@
+import styles from "./hamburger.module.css"
+
+export default function Hamburger() {
+  return (
+    <button className={styles.hamburger} type="button">
+      <div className={styles.line} />
+      <div className={styles.line} />
+      <div className={styles.line} />
+    </button>
+  )
+}

components/MyPages/Header/LanguageSwitcher/index.tsx

@@ -0,0 +1,11 @@
+import Image from "@/components/Image"
+import styles from "./language.module.css"
+
+export default function LanguageSwitcher() {
+  return (
+    <div className={styles.switcher}>
+      <Image alt="Swedish flag" height={21} src="/sweden.svg" width={21} />
+      <span>SV / SEK</span>
+    </div>
+  )
+}

components/MyPages/Header/LanguageSwitcher/language.module.css

@@ -0,0 +1,15 @@
+.switcher {
+  align-items: center;
+  display: none;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.4rem;
+  font-weight: 400;
+  gap: 0.6rem;
+  line-height: 1.6rem;
+}
+
+@media screen and (min-width: 950px) {
+  .switcher {
+    display: flex;
+  }
+}

components/MyPages/Header/Logo/index.tsx

@@ -0,0 +1,33 @@
+import { request } from "@/lib/request"
+import { GetMyPagesLogo } from "@/lib/graphql/Query/Logo.graphql"
+
+import Image from "@/components/Image"
+import Link from "next/link"
+
+import styles from "./logo.module.css"
+
+import type { LangParams } from "@/types/params"
+import type { LogoQueryData } from "@/types/requests/myPages/logo"
+
+export default async function Logo({ lang }: LangParams) {
+  const { data } = await request<LogoQueryData>(GetMyPagesLogo, {
+    locale: lang,
+  })
+  if (
+    !data.all_header.items.length ||
+    !data.all_header.items?.[0].logoConnection.totalCount
+  ) {
+    return null
+  }
+  const logo = data.all_header.items[0].logoConnection.edges[0]
+  return (
+    <Link className={styles.link} href="#">
+      <Image
+        alt={logo.node.title}
+        height={logo.node.dimension.height}
+        src={logo.node.url}
+        width={logo.node.dimension.width}
+      />
+    </Link>
+  )
+}

components/MyPages/Header/Logo/logo.module.css

@@ -0,0 +1,4 @@
+.link {
+  cursor: pointer;
+  display: block;
+}

components/MyPages/Header/User/index.tsx

@@ -0,0 +1,10 @@
+import styles from "./user.module.css"
+
+export default function User() {
+  return (
+    <div className={styles.user}>
+      FK
+      <span className={styles.alert}>1</span>
+    </div>
+  )
+}

components/MyPages/Header/User/user.module.css

@@ -0,0 +1,43 @@
+.user {
+  align-items: center;
+  background-color: var(--some-black-color, #000);
+  border-radius: 50%;
+  color: var(--some-white-color, #fff);
+  display: flex;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.2rem;
+  font-weight: 600;
+  height: 3.5rem;
+  justify-content: center;
+  position: relative;
+  width: 3.5rem;
+}
+
+.alert {
+  align-items: center;
+  background-color: var(--some-red-color, #ed2027);
+  border-radius: 50%;
+  display: flex;
+  font-size: 1rem;
+  height: 2rem;
+  justify-content: center;
+  position: absolute;
+  right: -1rem;
+  top: -0.5rem;
+  width: 2rem;
+}
+
+@media screen and (min-width: 950px) {
+  .user {
+    height: 2.8rem;
+    width: 2.8rem;
+  }
+
+  .alert {
+    font-size: 0.6rem;
+    height: 1rem;
+    right: -0.2rem;
+    top: -0.1rem;
+    width: 1rem;
+  }
+}

components/MyPages/Header/header.module.css

@@ -0,0 +1,36 @@
+.container {
+  position: sticky;
+  top: 0;
+}
+
+.header {
+  align-items: center;
+  background-color: var(--some-white-color, #fff);
+  box-shadow: 0px 1.0006656646728516px 1.0006656646728516px 0px #0000000d;
+  display: grid;
+  gap: 3rem;
+  grid-template-columns: 1fr auto auto;
+  height: 7rem;
+  padding: 0 2rem;
+}
+
+.breadcrumbs {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .header {
+    background-color: var(--some-grey-color, #ececec);
+    border-bottom: 0.1rem solid var(--some-grey-color, #ccc);
+    box-shadow: none;
+    gap: 3.2rem;
+    grid-template-columns: 1fr 19rem auto auto;
+    height: 4.5rem;
+    padding: 0 2.4rem;
+  }
+
+  .breadcrumbs {
+    display: block;
+    padding-left: 2.4rem;
+  }
+}

components/MyPages/Header/index.tsx

@@ -0,0 +1,25 @@
+import Breadcrumbs from "./Breadcrumbs"
+import Hamburger from "./Hamburger"
+import LanguageSwitcher from "./LanguageSwitcher"
+import Logo from "./Logo"
+import User from "./User"
+
+import styles from "./header.module.css"
+
+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>
+  )
+}

components/MyPages/Sidebar/index.tsx

@@ -0,0 +1,40 @@
+import { LogOut } from "react-feather"
+import Link from "next/link"
+
+import styles from "./sidebar.module.css"
+
+export default function Sidebar() {
+  return (
+    <aside className={styles.sidebar}>
+      <nav className={styles.nav}>
+        <Link className={`${styles.link} ${styles.active}`} href="#">
+          My Scandic
+        </Link>
+        <Link className={styles.link} href="#">
+          My Stays
+        </Link>
+        <Link className={styles.link} href="#">
+          My Points
+        </Link>
+        <Link className={styles.link} href="#">
+          My Benefits
+        </Link>
+        <Link className={styles.link} href="#">
+          My Challenges
+        </Link>
+        <Link className={styles.link} href="#">
+          My Favourites
+        </Link>
+        <Link className={styles.link} href="#">
+          About Scandic Friends
+        </Link>
+        <Link className={styles.link} href="#">
+          My Profile
+        </Link>
+        <Link className={styles.link} href="/api/auth/signout">
+          Log out <LogOut height={16} width={16} />
+        </Link>
+      </nav>
+    </aside>
+  )
+}

components/MyPages/Sidebar/sidebar.module.css

@@ -0,0 +1,45 @@
+.sidebar {
+  align-self: flex-start;
+  display: none;
+  position: sticky;
+  top: 13.2rem;
+}
+
+.nav {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  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

@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+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,
+      h6: styles.h6,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+  },
+} as const
+
+const headingStyles = cva(styles.heading, config)
+
+export default function Title({
+  as,
+  children,
+  level = "h1",
+  uppercase = false,
+}: HeadingProps) {
+  const Hx = level
+  const className = headingStyles({
+    text: uppercase ? "uppercase" : undefined,
+    type: as ?? level,
+  })
+  return <Hx className={className}>{children}</Hx>
+}

components/MyPages/Title/title.module.css

@@ -0,0 +1,43 @@
+.heading {
+  font-weight: 900;
+  margin: 0;
+  padding: 0;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.h1 {
+  font-size: 2.4rem;
+  line-height: 2.8rem;
+}
+
+.h2 {
+  font-size: 2.4rem;
+  line-height: 2.8rem;
+}
+
+.h3 {
+  font-size: 1.6rem;
+  line-height: 1.8rem;
+}
+
+.h4 {
+  font-size: 1.4rem;
+}
+
+.h5 {
+  font-size: 1.2rem;
+}
+
+.h6 {
+  font-size: 1rem;
+}
+
+@media screen and (min-width: 950px) {
+  .h1 {
+    font-size: 3.8rem;
+    line-height: 4.5rem;
+  }
+}