From 00f99912fceb3eff1c315e5533336aa7fa7e99f8 Mon Sep 17 00:00:00 2001 From: Simon Emanuelsson Date: Wed, 29 May 2024 13:57:03 +0200 Subject: [PATCH] feat(WEB-249): first iteration design system primitives (typography, grid) --- .../[contentType]/[uid]/layout.module.css | 4 +- .../middleware-error/[status]/page.module.css | 2 +- app/[lang]/webview/layout.module.css | 2 +- .../LanguageSwitcher/language.module.css | 2 +- .../DynamicContent/HowItWorks/index.tsx | 2 +- .../DynamicContent/LoyaltyLevels/index.tsx | 2 +- .../LoyaltyLevels/loyaltyLevels.module.css | 4 +- .../OverviewTable/BenefitCard/index.tsx | 2 +- .../OverviewTable/Title/index.tsx | 2 +- .../Loyalty/Blocks/DynamicContent/index.tsx | 4 +- .../Contact/ContactRow/contactRow.module.css | 4 +- .../Sidebar/JoinLoyalty/Contact/index.tsx | 2 +- .../Loyalty/Sidebar/JoinLoyalty/index.tsx | 2 +- .../JoinLoyalty/joinLoyalty.module.css | 2 +- .../Benefits/CurrentLevel/current.module.css | 2 +- .../Blocks/Benefits/CurrentLevel/index.tsx | 2 +- .../Blocks/Benefits/NextLevel/next.module.css | 7 +- .../Blocks/Challenges/challenges.module.css | 4 +- .../MyPages/Blocks/Challenges/index.tsx | 2 +- components/MyPages/Blocks/Header/index.tsx | 4 +- .../MyPages/Blocks/Overview/Friend/index.tsx | 4 +- .../Blocks/Overview/Stats/NextLevel/index.tsx | 4 +- .../Blocks/Overview/Stats/Points/index.tsx | 2 +- .../Blocks/Shortcuts/shortcuts.module.css | 4 +- .../Previous/EmptyPreviousStays/index.tsx | 2 +- .../Soonest/EmptyUpcomingStays/index.tsx | 2 +- .../MyPages/Blocks/Stays/StayCard/index.tsx | 2 +- .../Upcoming/EmptyUpcomingStays/index.tsx | 2 +- .../MyPages/Header/User/user.module.css | 2 +- components/MyPages/Sidebar/index.tsx | 2 +- components/MyProfile/Card/Title/index.tsx | 21 - .../MyProfile/Card/Title/title.module.css | 68 ---- components/MyProfile/Card/Title/variants.ts | 33 -- components/MyProfile/Card/index.tsx | 10 +- .../CommunicationPreferences/index.tsx | 3 +- components/MyProfile/CreditCards/index.tsx | 3 +- components/MyProfile/Field/field.module.css | 4 +- components/MyProfile/MembershipCard/index.tsx | 3 +- components/MyProfile/Password/index.tsx | 3 +- components/MyProfile/Profile/Container.tsx | 5 +- components/MyProfile/Wishes/index.tsx | 3 +- .../TempDesignSystem/Button/button.module.css | 88 ++--- .../TempDesignSystem/Card/card.module.css | 2 +- components/TempDesignSystem/Card/index.tsx | 2 +- .../Form/Country/country.module.css | 2 +- .../Form/Date/Select/select.module.css | 4 +- .../Form/ErrorMessage/error.module.css | 2 +- .../Form/Input/input.module.css | 2 +- .../Form/Select/select.module.css | 4 +- .../TempDesignSystem/Grid/Item/index.tsx | 14 + .../Grid/Item/item.module.css | 372 ++++++++++++++++++ components/TempDesignSystem/Grid/Item/item.ts | 7 + .../TempDesignSystem/Grid/Item/variants.ts | 138 +++++++ .../TempDesignSystem/Grid/grid.module.css | 18 + components/TempDesignSystem/Grid/grid.ts | 30 ++ components/TempDesignSystem/Grid/index.tsx | 66 ++++ .../TempDesignSystem/Link/link.module.css | 4 +- .../BiroScript/biroScript.module.css | 32 +- .../{ => Text}/BiroScript/biroScript.ts | 0 .../{ => Text}/BiroScript/index.tsx | 0 .../{ => Text}/BiroScript/variants.ts | 0 .../Text/Body/body.module.css | 44 +++ components/TempDesignSystem/Text/Body/body.ts | 7 + .../TempDesignSystem/Text/Body/index.tsx | 17 + .../TempDesignSystem/Text/Body/variants.ts | 24 ++ .../Text/Caption/caption.module.css | 35 ++ .../TempDesignSystem/Text/Caption/caption.ts | 7 + .../TempDesignSystem/Text/Caption/index.tsx | 17 + .../TempDesignSystem/Text/Caption/variants.ts | 23 ++ .../Text/Footnote/footnote.module.css | 35 ++ .../Text/Footnote/footnote.ts | 7 + .../TempDesignSystem/Text/Footnote/index.tsx | 17 + .../Text/Footnote/variants.ts | 23 ++ .../{ => Text}/Subtitle/index.tsx | 0 .../{ => Text}/Subtitle/subtitle.module.css | 18 +- .../{ => Text}/Subtitle/subtitle.ts | 0 .../{ => Text}/Subtitle/variants.ts | 0 .../{ => Text}/Title/index.tsx | 0 .../{ => Text}/Title/title.module.css | 149 +++---- .../{ => Text}/Title/title.ts | 0 .../{ => Text}/Title/variants.ts | 0 lib/graphql/Fragments/Grid.graphql | 17 + .../myPages/myProfile/card/title.ts | 11 - 83 files changed, 1110 insertions(+), 367 deletions(-) delete mode 100644 components/MyProfile/Card/Title/index.tsx delete mode 100644 components/MyProfile/Card/Title/title.module.css delete mode 100644 components/MyProfile/Card/Title/variants.ts create mode 100644 components/TempDesignSystem/Grid/Item/index.tsx create mode 100644 components/TempDesignSystem/Grid/Item/item.module.css create mode 100644 components/TempDesignSystem/Grid/Item/item.ts create mode 100644 components/TempDesignSystem/Grid/Item/variants.ts create mode 100644 components/TempDesignSystem/Grid/grid.module.css create mode 100644 components/TempDesignSystem/Grid/grid.ts create mode 100644 components/TempDesignSystem/Grid/index.tsx rename components/TempDesignSystem/{ => Text}/BiroScript/biroScript.module.css (52%) rename components/TempDesignSystem/{ => Text}/BiroScript/biroScript.ts (100%) rename components/TempDesignSystem/{ => Text}/BiroScript/index.tsx (100%) rename components/TempDesignSystem/{ => Text}/BiroScript/variants.ts (100%) create mode 100644 components/TempDesignSystem/Text/Body/body.module.css create mode 100644 components/TempDesignSystem/Text/Body/body.ts create mode 100644 components/TempDesignSystem/Text/Body/index.tsx create mode 100644 components/TempDesignSystem/Text/Body/variants.ts create mode 100644 components/TempDesignSystem/Text/Caption/caption.module.css create mode 100644 components/TempDesignSystem/Text/Caption/caption.ts create mode 100644 components/TempDesignSystem/Text/Caption/index.tsx create mode 100644 components/TempDesignSystem/Text/Caption/variants.ts create mode 100644 components/TempDesignSystem/Text/Footnote/footnote.module.css create mode 100644 components/TempDesignSystem/Text/Footnote/footnote.ts create mode 100644 components/TempDesignSystem/Text/Footnote/index.tsx create mode 100644 components/TempDesignSystem/Text/Footnote/variants.ts rename components/TempDesignSystem/{ => Text}/Subtitle/index.tsx (100%) rename components/TempDesignSystem/{ => Text}/Subtitle/subtitle.module.css (59%) rename components/TempDesignSystem/{ => Text}/Subtitle/subtitle.ts (100%) rename components/TempDesignSystem/{ => Text}/Subtitle/variants.ts (100%) rename components/TempDesignSystem/{ => Text}/Title/index.tsx (100%) rename components/TempDesignSystem/{ => Text}/Title/title.module.css (54%) rename components/TempDesignSystem/{ => Text}/Title/title.ts (100%) rename components/TempDesignSystem/{ => Text}/Title/variants.ts (100%) create mode 100644 lib/graphql/Fragments/Grid.graphql delete mode 100644 types/components/myPages/myProfile/card/title.ts diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css index 29fea3d1b..5343823c1 100644 --- a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css +++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css @@ -1,8 +1,8 @@ .layout { --header-height: 4.5rem; - display: grid; - font-family: var(--ff-fira-sans); background-color: var(--Scandic-Brand-Warm-White); + display: grid; + font-family: var(--typography-Body-Regular-fontFamily); grid-template-rows: var(--header-height) auto 1fr; } diff --git a/app/[lang]/(live)/middleware-error/[status]/page.module.css b/app/[lang]/(live)/middleware-error/[status]/page.module.css index bc92b147e..7f039aed6 100644 --- a/app/[lang]/(live)/middleware-error/[status]/page.module.css +++ b/app/[lang]/(live)/middleware-error/[status]/page.module.css @@ -1,3 +1,3 @@ .layout { - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); } diff --git a/app/[lang]/webview/layout.module.css b/app/[lang]/webview/layout.module.css index 423a25ccc..e5a3ec68c 100644 --- a/app/[lang]/webview/layout.module.css +++ b/app/[lang]/webview/layout.module.css @@ -1,5 +1,5 @@ .layout { - font-family: var(--ff-fira-sans); background-color: var(--Scandic-Brand-Warm-White); + font-family: var(--typography-Body-Regular-fontFamily); min-height: 100dvh; } diff --git a/components/Header/LanguageSwitcher/language.module.css b/components/Header/LanguageSwitcher/language.module.css index a976bf0ff..f5d108e99 100644 --- a/components/Header/LanguageSwitcher/language.module.css +++ b/components/Header/LanguageSwitcher/language.module.css @@ -1,7 +1,7 @@ .switcher { align-items: center; display: none; - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.4rem; font-weight: 400; gap: 0.6rem; diff --git a/components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx b/components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx index 28c990577..076d5e838 100644 --- a/components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx @@ -1,6 +1,6 @@ import { _ } from "@/lib/translation" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./howItWorks.module.css" diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx index 6a23bc878..2d2173ef4 100644 --- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx @@ -9,7 +9,7 @@ import { _ } from "@/lib/translation" import Image from "@/components/Image" import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import levelsData from "./data" diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css index 41fa84d56..ee92cf353 100644 --- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css +++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css @@ -45,7 +45,7 @@ } .benefits { - font-family: var(--fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: var(--typography-Body-Regular-fontSize); line-height: var(--typography-Body-Regular-lineHeight); margin: 0; @@ -53,7 +53,7 @@ } .icon { - font-family: var(--fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); position: relative; top: 0.3rem; height: 1.4rem; diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx index 37ef5ea49..d408d723a 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx @@ -1,7 +1,7 @@ import { ChevronDown, Minus } from "react-feather" import CheckCircle from "@/components/Icons/CheckCircle" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./benefitCard.module.css" diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/Title/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/Title/index.tsx index 51cdcc79a..5cbed84dc 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/Title/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/Title/index.tsx @@ -1,6 +1,6 @@ import { Fragment } from "react" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./overviewTableTitle.module.css" diff --git a/components/Loyalty/Blocks/DynamicContent/index.tsx b/components/Loyalty/Blocks/DynamicContent/index.tsx index d2fced2ea..3e5bb7ab0 100644 --- a/components/Loyalty/Blocks/DynamicContent/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/index.tsx @@ -1,6 +1,6 @@ import Link from "@/components/TempDesignSystem/Link" -import Subtitle from "@/components/TempDesignSystem/Subtitle" -import Title from "@/components/TempDesignSystem/Title" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import Title from "@/components/TempDesignSystem/Text/Title" import HowItWorks from "./HowItWorks" import LoyaltyLevels from "./LoyaltyLevels" diff --git a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css index 47bd6b899..9620263f8 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css +++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css @@ -6,7 +6,7 @@ } .title { - font-family: var(--fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.6rem; font-weight: 700; @@ -14,7 +14,7 @@ } .value { - font-family: var(--fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.6rem; font-weight: 400; margin: 0; diff --git a/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx index 80294b4ec..2feeb7525 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx +++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx @@ -1,6 +1,6 @@ import { _ } from "@/lib/translation" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import ContactRow from "./ContactRow" diff --git a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx index d438bec67..644b4cb85 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx +++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx @@ -3,7 +3,7 @@ import { _ } from "@/lib/translation" import Image from "@/components/Image" import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import Contact from "./Contact" diff --git a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css index b0607e924..0a58f374a 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css +++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css @@ -13,7 +13,7 @@ } .preamble { - font-family: var(--fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.6rem; font-weight: 400; line-height: 2.4rem; diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index 3c9e2a7b1..2341f7988 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -13,7 +13,7 @@ } .cardSubtitle { - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 16px; font-weight: 400; line-height: 14.4px; diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx index febab3940..64afaae32 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx @@ -5,7 +5,7 @@ import { serverClient } from "@/lib/trpc/server" import Header from "@/components/MyPages/Blocks/Header" import CardGrid from "@/components/TempDesignSystem/CardGrid" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import levelsData from "../data" diff --git a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css index 24c91414b..2e3bd07cb 100644 --- a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css +++ b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css @@ -31,10 +31,9 @@ } .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); */ + font-family: var(--typography-Script-2-fontFamily); + font-size: var(--typography-Script-2-Desktop-fontSize); + font-weight: var(--typography-Script-2-fontWeight); } .cardSubtitle { diff --git a/components/MyPages/Blocks/Challenges/challenges.module.css b/components/MyPages/Blocks/Challenges/challenges.module.css index 75cf49e22..df30c46be 100644 --- a/components/MyPages/Blocks/Challenges/challenges.module.css +++ b/components/MyPages/Blocks/Challenges/challenges.module.css @@ -17,7 +17,7 @@ .subtitle { color: var(--some-black-color, #000); - /* font-family: var(--ff-biro-script-plus); */ + font-family: var(--typography-Script-1-fontFamily); font-size: 1.6rem; font-weight: 400; line-height: 1.8rem; @@ -26,7 +26,7 @@ .title { color: var(--some-black-color, #000); - /* font-family: var(--ff-brandon-text); */ + font-family: var(--typography-Title-1-fontFamily); font-size: 1.6rem; font-weight: 900; inline-size: 18rem; diff --git a/components/MyPages/Blocks/Challenges/index.tsx b/components/MyPages/Blocks/Challenges/index.tsx index 52448bb32..4671d1f22 100644 --- a/components/MyPages/Blocks/Challenges/index.tsx +++ b/components/MyPages/Blocks/Challenges/index.tsx @@ -1,7 +1,7 @@ import { _ } from "@/lib/translation" import Image from "@/components/Image" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./challenges.module.css" diff --git a/components/MyPages/Blocks/Header/index.tsx b/components/MyPages/Blocks/Header/index.tsx index 17b966f2e..3435bf481 100644 --- a/components/MyPages/Blocks/Header/index.tsx +++ b/components/MyPages/Blocks/Header/index.tsx @@ -1,6 +1,6 @@ import Link from "@/components/TempDesignSystem/Link" -import Subtitle from "@/components/TempDesignSystem/Subtitle" -import Title from "@/components/TempDesignSystem/Title" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./header.module.css" diff --git a/components/MyPages/Blocks/Overview/Friend/index.tsx b/components/MyPages/Blocks/Overview/Friend/index.tsx index 30aa03f0d..ff1d87059 100644 --- a/components/MyPages/Blocks/Overview/Friend/index.tsx +++ b/components/MyPages/Blocks/Overview/Friend/index.tsx @@ -1,8 +1,8 @@ import { _ } from "@/lib/translation" import { GoodFriend } from "@/components/Levels" -import BiroScript from "@/components/TempDesignSystem/BiroScript" -import Title from "@/components/TempDesignSystem/Title" +import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./friend.module.css" diff --git a/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx b/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx index 7c339adb4..9f6bce6da 100644 --- a/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx +++ b/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx @@ -1,7 +1,7 @@ import { _ } from "@/lib/translation" -import BiroScript from "@/components/TempDesignSystem/BiroScript" -import Title from "@/components/TempDesignSystem/Title" +import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" +import Title from "@/components/TempDesignSystem/Text/Title" import Label from "../Label" diff --git a/components/MyPages/Blocks/Overview/Stats/Points/index.tsx b/components/MyPages/Blocks/Overview/Stats/Points/index.tsx index 335e46aa7..d518edd73 100644 --- a/components/MyPages/Blocks/Overview/Stats/Points/index.tsx +++ b/components/MyPages/Blocks/Overview/Stats/Points/index.tsx @@ -1,4 +1,4 @@ -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import Label from "../Label" diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index f4139941f..2c021f73b 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -9,7 +9,7 @@ } .subtitle { - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; @@ -27,7 +27,7 @@ border-radius: 0.4rem; color: var(--some-black-color, #000); display: flex; - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.6rem; font-weight: 700; gap: 0.4rem; diff --git a/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx index 3cb3da361..14cc05038 100644 --- a/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx +++ b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx @@ -1,6 +1,6 @@ import { _ } from "@/lib/translation" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./emptyPreviousStays.module.css" diff --git a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx index bfe68095e..66bc50a63 100644 --- a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx +++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx @@ -2,7 +2,7 @@ import { _ } from "@/lib/translation" import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./emptyUpcomingStays.module.css" diff --git a/components/MyPages/Blocks/Stays/StayCard/index.tsx b/components/MyPages/Blocks/Stays/StayCard/index.tsx index 9068ccb15..c552626c6 100644 --- a/components/MyPages/Blocks/Stays/StayCard/index.tsx +++ b/components/MyPages/Blocks/Stays/StayCard/index.tsx @@ -3,7 +3,7 @@ import { Calendar } from "react-feather" import { dt } from "@/lib/dt" import Image from "@/components/Image" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./stay.module.css" diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx index bfe68095e..66bc50a63 100644 --- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx +++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx @@ -2,7 +2,7 @@ import { _ } from "@/lib/translation" import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./emptyUpcomingStays.module.css" diff --git a/components/MyPages/Header/User/user.module.css b/components/MyPages/Header/User/user.module.css index 01731546e..0add59570 100644 --- a/components/MyPages/Header/User/user.module.css +++ b/components/MyPages/Header/User/user.module.css @@ -4,7 +4,7 @@ border-radius: 50%; color: var(--some-white-color, #fff); display: flex; - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.2rem; font-weight: 600; height: 3.5rem; diff --git a/components/MyPages/Sidebar/index.tsx b/components/MyPages/Sidebar/index.tsx index 42a98481b..dbfc71128 100644 --- a/components/MyPages/Sidebar/index.tsx +++ b/components/MyPages/Sidebar/index.tsx @@ -5,7 +5,7 @@ import { logout } from "@/constants/routes/handleAuth" import { serverClient } from "@/lib/trpc/server" import Link from "@/components/TempDesignSystem/Link" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./sidebar.module.css" diff --git a/components/MyProfile/Card/Title/index.tsx b/components/MyProfile/Card/Title/index.tsx deleted file mode 100644 index 576cc7ba6..000000000 --- a/components/MyProfile/Card/Title/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -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 {children} -} diff --git a/components/MyProfile/Card/Title/title.module.css b/components/MyProfile/Card/Title/title.module.css deleted file mode 100644 index 296812fd3..000000000 --- a/components/MyProfile/Card/Title/title.module.css +++ /dev/null @@ -1,68 +0,0 @@ -.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: 1367px) { - .h1 { - font-size: 3.8rem; - line-height: 4.5rem; - } -} */ diff --git a/components/MyProfile/Card/Title/variants.ts b/components/MyProfile/Card/Title/variants.ts deleted file mode 100644 index c4c2ee202..000000000 --- a/components/MyProfile/Card/Title/variants.ts +++ /dev/null @@ -1,33 +0,0 @@ -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) diff --git a/components/MyProfile/Card/index.tsx b/components/MyProfile/Card/index.tsx index 27ba0dd30..b361bb9ea 100644 --- a/components/MyProfile/Card/index.tsx +++ b/components/MyProfile/Card/index.tsx @@ -1,16 +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) { +export default function Card({ + className, + tag = "section", + ...props +}: CardProps) { const Cmp = tag return } - -Card.Title = Title diff --git a/components/MyProfile/CommunicationPreferences/index.tsx b/components/MyProfile/CommunicationPreferences/index.tsx index 703408364..767705523 100644 --- a/components/MyProfile/CommunicationPreferences/index.tsx +++ b/components/MyProfile/CommunicationPreferences/index.tsx @@ -1,11 +1,12 @@ import Card from "@/components/MyProfile/Card" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./com.module.css" export default function CommunicationPreferences() { return ( - My communication preferences + My communication preferences ) } diff --git a/components/MyProfile/CreditCards/index.tsx b/components/MyProfile/CreditCards/index.tsx index 25fe3d123..82b49e0f8 100644 --- a/components/MyProfile/CreditCards/index.tsx +++ b/components/MyProfile/CreditCards/index.tsx @@ -1,11 +1,12 @@ import Card from "@/components/MyProfile/Card" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./creditCards.module.css" export default function CreditCards() { return ( - My credit cards + My credit cards ) } diff --git a/components/MyProfile/Field/field.module.css b/components/MyProfile/Field/field.module.css index b5c3fefdc..cb3b66ae5 100644 --- a/components/MyProfile/Field/field.module.css +++ b/components/MyProfile/Field/field.module.css @@ -15,7 +15,7 @@ background-color: var(--some-white-color, #fff); border-radius: 50%; display: flex; - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.6rem; font-weight: 400; grid-area: icon; @@ -27,7 +27,7 @@ .label, .content { - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-weight: 400; letter-spacing: -1.5%; line-height: 2.4rem; diff --git a/components/MyProfile/MembershipCard/index.tsx b/components/MyProfile/MembershipCard/index.tsx index 3cb5c2f2c..fb9c8b12e 100644 --- a/components/MyProfile/MembershipCard/index.tsx +++ b/components/MyProfile/MembershipCard/index.tsx @@ -1,11 +1,12 @@ import Card from "@/components/MyProfile/Card" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./membershipCard.module.css" export default function MembershipCard() { return ( - Membership cards + Membership cards ) } diff --git a/components/MyProfile/Password/index.tsx b/components/MyProfile/Password/index.tsx index e3e85e573..e34872045 100644 --- a/components/MyProfile/Password/index.tsx +++ b/components/MyProfile/Password/index.tsx @@ -1,11 +1,12 @@ import Card from "@/components/MyProfile/Card" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./password.module.css" export default function Password() { return ( - Password + Password ) } diff --git a/components/MyProfile/Profile/Container.tsx b/components/MyProfile/Profile/Container.tsx index 91bb85338..c93d9823a 100644 --- a/components/MyProfile/Profile/Container.tsx +++ b/components/MyProfile/Profile/Container.tsx @@ -2,6 +2,7 @@ import { cva } from "class-variance-authority" import Image from "@/components/Image" import Card from "@/components/MyProfile/Card" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./profile.module.css" @@ -24,7 +25,9 @@ export default function Container({ src="/_static/icons/account_circle.svg" width={40} /> - {user.name} + + {user.name} + {children} diff --git a/components/MyProfile/Wishes/index.tsx b/components/MyProfile/Wishes/index.tsx index 8f437a1e0..b57aed6cc 100644 --- a/components/MyProfile/Wishes/index.tsx +++ b/components/MyProfile/Wishes/index.tsx @@ -1,11 +1,12 @@ import Card from "@/components/MyProfile/Card" +import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./wishes.module.css" export default function Wishes() { return ( - My wishes + My wishes ) } diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css index 95236593a..108e253bb 100644 --- a/components/TempDesignSystem/Button/button.module.css +++ b/components/TempDesignSystem/Button/button.module.css @@ -5,34 +5,34 @@ margin: 0; padding: 0; text-align: center; - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-weight: 600; line-height: 150%; letter-spacing: 1%; } .primary { - color: var(--font-color,); - background-color: var(--background-color,); + color: var(--font-color); + background-color: var(--background-color); } .primary:hover, .primary:active, .primary:focus { - background-color: var(--hover-background,); - color: var(--hover-color,); + background-color: var(--hover-background); + color: var(--hover-color); } .secondary { background-color: transparent; border: 0.1rem solid var(--background-color); - color: var(--background-color,); + color: var(--background-color); } .secondary:hover, .secondary:active, .secondary:focus { - border: 0.1rem solid var(--hover-color,); + border: 0.1rem solid var(--hover-color); color: var(--hover-color); } @@ -66,7 +66,7 @@ .medium { height: 3rem; - padding: 1.2rem var(--Spacing-x2,); + padding: 1.2rem var(--Spacing-x2); font-size: 1.6rem; } @@ -80,68 +80,59 @@ .primaryLight { --font-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal); - --background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal,); - --hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover,); - --hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover,); - + --background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal); + --hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover); + --hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover); --disabled-background-color: var( - --Theme-Primary-Light-Button-Primary-Fill-Disabled, + --Theme-Primary-Light-Button-Primary-Fill-Disabled ); - --disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled,); + --disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled); } .primaryDark { - --font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal,); - --background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal,); - --hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover,); - --hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover,); - + --font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal); + --background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal); + --hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover); + --hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover); --disabled-background-color: var( - --Theme-Primary-Dark-Button-Primary-Fill-Disabled, + --Theme-Primary-Dark-Button-Primary-Fill-Disabled ); - --disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled,); + --disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled); } .secondaryLight { - --font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal,); - --background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal,); - --hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover,); - --hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover,); - + --font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal); + --background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal); + --hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover); + --hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover); --disabled-background-color: var( - --Theme-Secondary-Light-Button-Primary-Fill-Disabled, + --Theme-Secondary-Light-Button-Primary-Fill-Disabled ); --disabled-color: var( - --Theme-Secondary-Light-Button-Primary-On-Fill-Disabled, + --Theme-Secondary-Light-Button-Primary-On-Fill-Disabled ); } .secondaryDark { - --font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal,); - --background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal,); - --hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover,); - --hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover,); - + --font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal); + --background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal); + --hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover); + --hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover); --disabled-background-color: var( - --Theme-Secondary-Dark-Button-Primary-Fill-Disabled, - ); - --disabled-color: var( - --Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled, + --Theme-Secondary-Dark-Button-Primary-Fill-Disabled ); + --disabled-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled); } .tertiaryLight { - --font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal,); - --background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal,); - --hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover,); - --hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover,); - + --font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal); + --background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal); + --hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover); + --hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover); --disabled-background-color: var( - --Theme-Tertiary-Light-Button-Primary-Fill-Disabled, - ); - --disabled-color: var( - --Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled, + --Theme-Tertiary-Light-Button-Primary-Fill-Disabled ); + --disabled-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled); } .tertiaryDark { @@ -149,9 +140,8 @@ --background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal); --hover-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover); --hover-background: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover); - --disabled-background-color: var( - --Theme-Tertiary-Dark-Button-Primary-Fill-Disabled, + --Theme-Tertiary-Dark-Button-Primary-Fill-Disabled ); - --disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled,); + --disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled); } diff --git a/components/TempDesignSystem/Card/card.module.css b/components/TempDesignSystem/Card/card.module.css index aa62ab967..4d3b1cd75 100644 --- a/components/TempDesignSystem/Card/card.module.css +++ b/components/TempDesignSystem/Card/card.module.css @@ -45,7 +45,7 @@ .scriptedTitle { color: var(--script-color); - font-family: var(--ff-biro-script-plus); + font-family: var(--typography-Script-2-fontFamily); font-size: var(--typography-Script-2-fontSize); font-weight: var(--typography-Script-2-fontWeight); line-height: var(--typography-Script-2-lineHeight); diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx index 545978598..88d02849b 100644 --- a/components/TempDesignSystem/Card/index.tsx +++ b/components/TempDesignSystem/Card/index.tsx @@ -1,7 +1,7 @@ import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" -import Title from "@/components/TempDesignSystem/Title" +import Title from "@/components/TempDesignSystem/Text/Title" import { cardVariants } from "./variants" diff --git a/components/TempDesignSystem/Form/Country/country.module.css b/components/TempDesignSystem/Form/Country/country.module.css index 44ab08ca0..aa5c70f42 100644 --- a/components/TempDesignSystem/Form/Country/country.module.css +++ b/components/TempDesignSystem/Form/Country/country.module.css @@ -24,7 +24,7 @@ .input, .listBoxItem { color: var(--some-black-color, #757575); - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.6rem; font-weight: 400; letter-spacing: -1.5%; diff --git a/components/TempDesignSystem/Form/Date/Select/select.module.css b/components/TempDesignSystem/Form/Date/Select/select.module.css index c949de5d2..bdcd08329 100644 --- a/components/TempDesignSystem/Form/Date/Select/select.module.css +++ b/components/TempDesignSystem/Form/Date/Select/select.module.css @@ -3,7 +3,7 @@ } .label { - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.5rem; font-weight: 400; } @@ -21,7 +21,7 @@ border-radius: var(--radius); color: var(--some-black-color, #757575); display: grid; - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.6rem; font-weight: 400; gap: 1rem; diff --git a/components/TempDesignSystem/Form/ErrorMessage/error.module.css b/components/TempDesignSystem/Form/ErrorMessage/error.module.css index 57d2d359f..6881845bd 100644 --- a/components/TempDesignSystem/Form/ErrorMessage/error.module.css +++ b/components/TempDesignSystem/Form/ErrorMessage/error.module.css @@ -1,6 +1,6 @@ .message { color: var(--some-red-color, #d64242); - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.4rem; font-weight: 400; line-height: 2.2rem; diff --git a/components/TempDesignSystem/Form/Input/input.module.css b/components/TempDesignSystem/Form/Input/input.module.css index 22b3e4ad2..6ac94b253 100644 --- a/components/TempDesignSystem/Form/Input/input.module.css +++ b/components/TempDesignSystem/Form/Input/input.module.css @@ -2,7 +2,7 @@ border: 0.2rem solid var(--some-black-color, #757575); border-radius: 0.4rem; color: var(--some-black-color, #757575); - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.6rem; font-weight: 400; height: 4rem; diff --git a/components/TempDesignSystem/Form/Select/select.module.css b/components/TempDesignSystem/Form/Select/select.module.css index c1e7d1bc6..11620e027 100644 --- a/components/TempDesignSystem/Form/Select/select.module.css +++ b/components/TempDesignSystem/Form/Select/select.module.css @@ -4,7 +4,7 @@ .label { color: var(--Base-Text-UI-Placeholder); - font-family: var(--ff-fira-sans); + font-family: var(--typography-Footnote-Regular-fontFamily); font-size: var(--typography-Footnote-Regular-fontSize); font-weight: 400; position: absolute; @@ -24,7 +24,7 @@ border-radius: 0.8rem; color: var(--some-black-color, #757575); display: grid; - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); font-size: 1.6rem; font-weight: 400; gap: 1rem; diff --git a/components/TempDesignSystem/Grid/Item/index.tsx b/components/TempDesignSystem/Grid/Item/index.tsx new file mode 100644 index 000000000..ddee0b8fa --- /dev/null +++ b/components/TempDesignSystem/Grid/Item/index.tsx @@ -0,0 +1,14 @@ +import { Slot } from "@radix-ui/react-slot" + +import { itemVariants } from "./variants" + +import type { ItemProps } from "./item" + +export default function Item({ columns, order, rows, ...props }: ItemProps) { + const classNames = itemVariants({ + columns, + order, + rows, + }) + return +} diff --git a/components/TempDesignSystem/Grid/Item/item.module.css b/components/TempDesignSystem/Grid/Item/item.module.css new file mode 100644 index 000000000..d0b3cc955 --- /dev/null +++ b/components/TempDesignSystem/Grid/Item/item.module.css @@ -0,0 +1,372 @@ +.item { + margin: 0; + padding: 0; +} + +.c2r1 { + grid-column: span 4; + grid-row: span 1; +} + +.c2r2 { + grid-column: span 4; + grid-row: span 1; +} + +.c2r3 { + grid-column: span 4; + grid-row: span 1; +} + +.c2r6 { + grid-column: span 4; + grid-row: span 1; +} + +.c3r1 { + grid-column: span 4; + grid-row: span 1; +} + +.c3r2 { + grid-column: span 4; + grid-row: span 1; +} + +.c3r3 { + grid-column: span 4; + grid-row: span 1; +} + +.c3r6 { + grid-column: span 4; + grid-row: span 1; +} + +.c4r1 { + grid-column: span 4; + grid-row: span 1; +} + +.c4r2 { + grid-column: span 4; + grid-row: span 1; +} + +.c4r3 { + grid-column: span 4; + grid-row: span 1; +} + +.c4r6 { + grid-column: span 4; + grid-row: span 1; +} + +.c6r1 { + grid-column: span 4; + grid-row: span 1; +} + +.c6r2 { + grid-column: span 4; + grid-row: span 1; +} + +.c6r3 { + grid-column: span 4; + grid-row: span 1; +} + +.c6r6 { + grid-column: span 4; + grid-row: span 1; +} + +.c8r1 { + grid-column: span 4; + grid-row: span 1; +} + +.c8r2 { + grid-column: span 4; + grid-row: span 1; +} + +.c8r3 { + grid-column: span 4; + grid-row: span 1; +} + +.c8r6 { + grid-column: span 4; + grid-row: span 1; +} + +.order1 { + order: 1; +} + +.order2 { + order: 4; +} + +.order3 { + order: 7; +} + +.order4 { + order: 2; +} + +.order5 { + order: 5; +} + +.order6 { + order: 8; +} + +.order7 { + order: 3; +} + +.order8 { + order: 6; +} + +.order9 { + order: 9; +} + +@media screen and (min-width: 768px) { + .c2r1 { + grid-column: span 4; + grid-row: span 1; + } + + .c2r2 { + grid-column: span 4; + grid-row: span 1; + } + + .c2r3 { + grid-column: span 4; + grid-row: span 1; + } + + .c2r6 { + grid-column: span 4; + grid-row: span 1; + } + + .c3r1 { + grid-column: span 4; + grid-row: span 1; + } + + .c3r2 { + grid-column: span 4; + grid-row: span 1; + } + + .c3r3 { + grid-column: span 4; + grid-row: span 1; + } + + .c3r6 { + grid-column: span 4; + grid-row: span 1; + } + + .c4r1 { + grid-column: span 4; + grid-row: span 1; + } + + .c4r2 { + grid-column: span 4; + grid-row: span 1; + } + + .c4r3 { + grid-column: span 4; + grid-row: span 1; + } + + .c4r6 { + grid-column: span 4; + grid-row: span 1; + } + + .c6r1 { + grid-column: span 8; + grid-row: span 1; + } + + .c6r2 { + grid-column: span 8; + grid-row: span 1; + } + + .c6r3 { + grid-column: span 8; + grid-row: span 1; + } + + .c6r6 { + grid-column: span 8; + grid-row: span 1; + } + + .c8r1 { + grid-column: span 8; + grid-row: span 1; + } + + .c8r2 { + grid-column: span 8; + grid-row: span 1; + } + + .c8r3 { + grid-column: span 8; + grid-row: span 1; + } + + .c8r6 { + grid-column: span 8; + grid-row: span 1; + } +} + +@media screen and (min-width: 1367px) { + .c2r1 { + grid-column: span 2; + grid-row: span 1; + } + + .c2r2 { + grid-column: span 2; + grid-row: span 2; + } + + .c2r3 { + grid-column: span 2; + grid-row: span 3; + } + + .c2r6 { + grid-column: span 2; + grid-row: span 6; + } + + .c3r1 { + grid-column: span 3; + grid-row: span 1; + } + + .c3r2 { + grid-column: span 3; + grid-row: span 2; + } + + .c3r3 { + grid-column: span 3; + grid-row: span 3; + } + + .c3r6 { + grid-column: span 3; + grid-row: span 6; + } + + .c4r1 { + grid-column: span 4; + grid-row: span 1; + } + + .c4r2 { + grid-column: span 4; + grid-row: span 2; + } + + .c4r3 { + grid-column: span 4; + grid-row: span 3; + } + + .c4r6 { + grid-column: span 4; + grid-row: span 6; + } + + .c6r1 { + grid-column: span 6; + grid-row: span 1; + } + + .c6r2 { + grid-column: span 6; + grid-row: span 2; + } + + .c6r3 { + grid-column: span 6; + grid-row: span 3; + } + + .c6r6 { + grid-column: span 6; + grid-row: span 6; + } + + .c8r1 { + grid-column: span 8; + grid-row: span 1; + } + + .c8r2 { + grid-column: span 8; + grid-row: span 2; + } + + .c8r3 { + grid-column: span 8; + grid-row: span 3; + } + + .c8r6 { + grid-column: span 8; + grid-row: span 6; + } + + .order2 { + order: 2; + } + + .order3 { + order: 3; + } + + .order4 { + order: 4; + } + + .order5 { + order: 5; + } + + .order6 { + order: 6; + } + + .order7 { + order: 7; + } + + .order8 { + order: 8; + } +} diff --git a/components/TempDesignSystem/Grid/Item/item.ts b/components/TempDesignSystem/Grid/Item/item.ts new file mode 100644 index 000000000..58d9b561f --- /dev/null +++ b/components/TempDesignSystem/Grid/Item/item.ts @@ -0,0 +1,7 @@ +import { itemVariants } from "./variants" + +import type { VariantProps } from "class-variance-authority" + +export interface ItemProps + extends React.HTMLAttributes, + VariantProps {} diff --git a/components/TempDesignSystem/Grid/Item/variants.ts b/components/TempDesignSystem/Grid/Item/variants.ts new file mode 100644 index 000000000..35b0d4369 --- /dev/null +++ b/components/TempDesignSystem/Grid/Item/variants.ts @@ -0,0 +1,138 @@ +import { cva } from "class-variance-authority" + +import styles from "./item.module.css" + +export const itemVariants = cva(styles.item, { + variants: { + order: { + 1: styles.order1, + 2: styles.order2, + 3: styles.order3, + 4: styles.order4, + 5: styles.order5, + 6: styles.order6, + 7: styles.order7, + 8: styles.order8, + 9: styles.order9, + }, + // These are only placeholder classes + // so that we can use compoundVariants + columns: { + 2: styles.colTwo, + 3: styles.colThree, + 4: styles.colFour, + 6: styles.colSix, + 8: styles.colEight, + }, + // These are only placeholder classes + // so that we can use compoundVariants + rows: { + 1: styles.rowOne, + 2: styles.rowTwo, + 3: styles.rowThree, + 6: styles.rowSix, + }, + }, + compoundVariants: [ + { + class: styles.c2r1, + columns: 2, + rows: 1, + }, + { + class: styles.c2r2, + columns: 2, + rows: 2, + }, + { + class: styles.c2r3, + columns: 2, + rows: 3, + }, + { + class: styles.c2r6, + columns: 2, + rows: 6, + }, + { + class: styles.c3r1, + columns: 3, + rows: 1, + }, + { + class: styles.c3r2, + columns: 3, + rows: 2, + }, + { + class: styles.c3r3, + columns: 3, + rows: 3, + }, + { + class: styles.c3r6, + columns: 3, + rows: 6, + }, + { + class: styles.c4r1, + columns: 4, + rows: 1, + }, + { + class: styles.c4r2, + columns: 4, + rows: 2, + }, + { + class: styles.c4r3, + columns: 4, + rows: 3, + }, + { + class: styles.c4r6, + columns: 4, + rows: 6, + }, + { + class: styles.c6r1, + columns: 6, + rows: 1, + }, + { + class: styles.c6r2, + columns: 6, + rows: 2, + }, + { + class: styles.c6r3, + columns: 6, + rows: 3, + }, + { + class: styles.c6r6, + columns: 6, + rows: 6, + }, + { + class: styles.c8r1, + columns: 8, + rows: 1, + }, + { + class: styles.c8r2, + columns: 8, + rows: 2, + }, + { + class: styles.c8r3, + columns: 8, + rows: 3, + }, + { + class: styles.c8r6, + columns: 8, + rows: 6, + }, + ], +}) diff --git a/components/TempDesignSystem/Grid/grid.module.css b/components/TempDesignSystem/Grid/grid.module.css new file mode 100644 index 000000000..7e26bafc2 --- /dev/null +++ b/components/TempDesignSystem/Grid/grid.module.css @@ -0,0 +1,18 @@ +.grid { + display: grid; + gap: var(--Spacing-x2); + grid-auto-flow: dense; + grid-template-columns: repeat(4, 1fr); +} + +@media screen and (min-width: 768px) { + .grid { + grid-template-columns: repeat(8, 1fr); + } +} + +@media screen and (min-width: 1367px) { + .grid { + grid-template-columns: repeat(12, 1fr); + } +} diff --git a/components/TempDesignSystem/Grid/grid.ts b/components/TempDesignSystem/Grid/grid.ts new file mode 100644 index 000000000..e7f6dfb2e --- /dev/null +++ b/components/TempDesignSystem/Grid/grid.ts @@ -0,0 +1,30 @@ +import type { Edges } from "@/types/requests/utils/edges" +import type { TypenameInterface } from "@/types/requests/utils/typename" + +export type Order = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 + +export type ColSpan = 2 | 3 | 4 | 6 | 8 +export type RowSpan = 1 | 2 | 3 | 6 + +// TODO: Extend query and fix type accordingly +export interface Row extends TypenameInterface<"Card"> { + title: string +} + +type Column = { + span: ColSpan + rows: { + rowConnection: Edges + }[] +} + +export interface Grid { + columns: Column[] +} + +export interface GridProps + extends Omit, "children"> { + children: (row: Row) => React.ReactNode + items: Grid + tag?: "aside" | "article" | "div" | "main" | "section" +} diff --git a/components/TempDesignSystem/Grid/index.tsx b/components/TempDesignSystem/Grid/index.tsx new file mode 100644 index 000000000..9dcf7bbc5 --- /dev/null +++ b/components/TempDesignSystem/Grid/index.tsx @@ -0,0 +1,66 @@ +import Item from "./Item" + +import styles from "./grid.module.css" + +import type { GridProps, Order, RowSpan } from "./grid" + +export default function Grid({ children, items, tag = "section" }: GridProps) { + const Elm = tag + + const allRows: number[] = items.columns.map((col) => col.rows.length) + const onlySingleRows = allRows.every((row) => row === 1) + const oneColumnWithTwoRows = allRows.includes(2) + const oneColumnWithThreeRows = allRows.includes(3) + /** + * When we have one column with 2 rows and another with 3, + * we have to reach the closest denominator which is 6 to be + * able to have the column with 2 rows span half the grid each. + */ + const doubleTheRows = oneColumnWithTwoRows && oneColumnWithThreeRows + return ( + + {items.columns.map((column, columnIndex) => { + const rows = column.rows.map((row) => row.rowConnection.edges).flat() + let rowSpan: RowSpan = 1 + if (!onlySingleRows) { + if (doubleTheRows) { + switch (rows.length) { + case 1: + rowSpan = 6 + break + case 2: + rowSpan = 3 + break + case 3: + rowSpan = 2 + break + } + } else if (oneColumnWithTwoRows) { + if (rows.length === 1) { + rowSpan = 2 + } + } else if (oneColumnWithThreeRows) { + if (rows.length === 1) { + rowSpan = 3 + } + } + } + return rows.map(({ node: row }, rowIndex) => { + const order = (columnIndex + + 1 + + rowIndex * items.columns.length) as Order + return ( + + {children(row)} + + ) + }) + })} + + ) +} diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css index a6ebb9f6e..99e26d9ac 100644 --- a/components/TempDesignSystem/Link/link.module.css +++ b/components/TempDesignSystem/Link/link.module.css @@ -3,7 +3,7 @@ } .default { - font-family: var(--ff-fira-sans); + font-family: var(--typography-Body-Regular-fontFamily); } .sidebar { @@ -28,4 +28,4 @@ height: 0.2rem; position: absolute; width: 100%; -} \ No newline at end of file +} diff --git a/components/TempDesignSystem/BiroScript/biroScript.module.css b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css similarity index 52% rename from components/TempDesignSystem/BiroScript/biroScript.module.css rename to components/TempDesignSystem/Text/BiroScript/biroScript.module.css index de4c421c8..1b45db2f5 100644 --- a/components/TempDesignSystem/BiroScript/biroScript.module.css +++ b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css @@ -4,39 +4,27 @@ } .one { - font-size: var(--typography-Script-1-Mobile-fontSize); + font-size: clamp( + var(--typography-Script-1-Mobile-fontSize), + 1.3vw + 14px, + var(--typography-Script-1-Desktop-fontSize) + ); font-weight: var(--typography-Script-1-fontWeight); letter-spacing: var(--typography-Script-1-letterSpacing); line-height: var(--typography-Script-1-lineHeight); } .two { - font-size: var(--typography-Script-2-Mobile-fontSize); + font-size: clamp( + var(--typography-Script-2-Mobile-fontSize), + 0.6vw + 15px, + var(--typography-Script-2-Desktop-fontSize) + ); font-weight: var(--typography-Script-2-fontWeight); letter-spacing: var(--typography-Script-2-letterSpacing); line-height: var(--typography-Script-2-lineHeight); } -@media screen and (min-width: 768px) { - .one { - font-size: var(--typography-Script-1-Tablet-estimate-fontSize); - } - - .two { - font-size: var(--typography-Script-2-Tablet-estimate-fontSize); - } -} - -@media screen and (min-width: 1367px) { - .one { - font-size: var(--typography-Script-1-Desktop-fontSize); - } - - .two { - font-size: var(--typography-Script-2-Desktop-fontSize); - } -} - .burgundy { color: var(--Scandic-Brand-Burgundy); } diff --git a/components/TempDesignSystem/BiroScript/biroScript.ts b/components/TempDesignSystem/Text/BiroScript/biroScript.ts similarity index 100% rename from components/TempDesignSystem/BiroScript/biroScript.ts rename to components/TempDesignSystem/Text/BiroScript/biroScript.ts diff --git a/components/TempDesignSystem/BiroScript/index.tsx b/components/TempDesignSystem/Text/BiroScript/index.tsx similarity index 100% rename from components/TempDesignSystem/BiroScript/index.tsx rename to components/TempDesignSystem/Text/BiroScript/index.tsx diff --git a/components/TempDesignSystem/BiroScript/variants.ts b/components/TempDesignSystem/Text/BiroScript/variants.ts similarity index 100% rename from components/TempDesignSystem/BiroScript/variants.ts rename to components/TempDesignSystem/Text/BiroScript/variants.ts diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css new file mode 100644 index 000000000..cc3171a23 --- /dev/null +++ b/components/TempDesignSystem/Text/Body/body.module.css @@ -0,0 +1,44 @@ +.body { + margin: 0; + padding: 0; +} + +.bold { + font-family: var(--typography-Body-Bold-fontFamily); + font-size: var(--typography-Body-Bold-fontSize); + font-weight: var(--typography-Body-Bold-fontWeight); + letter-spacing: var(--typography-Body-Bold-letterSpacing); + line-height: var(--typography-Body-Bold-lineHeight); + text-decoration: var(--typography-Body-Bold-textDecoration); +} + +.regular { + font-family: var(--typography-Body-Regular-fontFamily); + font-size: var(--typography-Body-Regular-fontSize); + font-weight: var(--typography-Body-Regular-fontWeight); + letter-spacing: var(--typography-Body-Regular-letterSpacing); + line-height: var(--typography-Body-Regular-lineHeight); + text-decoration: var(--typography-Body-Regular-textDecoration); +} + +.underlined { + font-family: var(--typography-Body-Underlined-fontFamily); + font-size: var(--typography-Body-Underlined-fontSize); + font-weight: var(--typography-Body-Underlined-fontWeight); + letter-spacing: var(--typography-Body-Underlined-letterSpacing); + line-height: var(--typography-Body-Underlined-lineHeight); + text-decoration: var(--typography-Body-Underlined-textDecoration); +} + +.black { + /* No black variable exist yet */ + color: #000; +} + +.burgundy { + color: var(--Scandic-Brand-Burgundy); +} + +.pale { + color: var(--Scandic-Brand-Pale-Peach); +} diff --git a/components/TempDesignSystem/Text/Body/body.ts b/components/TempDesignSystem/Text/Body/body.ts new file mode 100644 index 000000000..7862d3e53 --- /dev/null +++ b/components/TempDesignSystem/Text/Body/body.ts @@ -0,0 +1,7 @@ +import { bodyVariants } from "./variants" + +import type { VariantProps } from "class-variance-authority" + +export interface BodyProps + extends Omit, "color">, + VariantProps {} diff --git a/components/TempDesignSystem/Text/Body/index.tsx b/components/TempDesignSystem/Text/Body/index.tsx new file mode 100644 index 000000000..a29d8e73e --- /dev/null +++ b/components/TempDesignSystem/Text/Body/index.tsx @@ -0,0 +1,17 @@ +import { bodyVariants } from "./variants" + +import type { BodyProps } from "./body" + +export default function Body({ + children, + className = "", + color, + textTransform, +}: BodyProps) { + const classNames = bodyVariants({ + className, + color, + textTransform, + }) + return

{children}

+} diff --git a/components/TempDesignSystem/Text/Body/variants.ts b/components/TempDesignSystem/Text/Body/variants.ts new file mode 100644 index 000000000..013a69c54 --- /dev/null +++ b/components/TempDesignSystem/Text/Body/variants.ts @@ -0,0 +1,24 @@ +import { cva } from "class-variance-authority" + +import styles from "./body.module.css" + +const config = { + variants: { + color: { + black: styles.black, + burgundy: styles.burgundy, + pale: styles.pale, + }, + textTransform: { + bold: styles.bold, + regular: styles.regular, + underlined: styles.underlined, + }, + }, + defaultVariants: { + color: "black", + textTransform: "regular", + }, +} as const + +export const bodyVariants = cva(styles.body, config) diff --git a/components/TempDesignSystem/Text/Caption/caption.module.css b/components/TempDesignSystem/Text/Caption/caption.module.css new file mode 100644 index 000000000..ab4e172da --- /dev/null +++ b/components/TempDesignSystem/Text/Caption/caption.module.css @@ -0,0 +1,35 @@ +.body { + margin: 0; + padding: 0; +} + +.bold { + font-family: var(--typography-Caption-Bold-fontFamily); + font-size: var(--typography-Caption-Bold-fontSize); + font-weight: var(--typography-Caption-Bold-fontWeight); + letter-spacing: var(--typography-Caption-Bold-letterSpacing); + line-height: var(--typography-Caption-Bold-lineHeight); + text-decoration: var(--typography-Caption-Bold-textDecoration); +} + +.regular { + font-family: var(--typography-Caption-Regular-fontFamily); + font-size: var(--typography-Caption-Regular-fontSize); + font-weight: var(--typography-Caption-Regular-fontWeight); + letter-spacing: var(--typography-Caption-Regular-letterSpacing); + line-height: var(--typography-Caption-Regular-lineHeight); + text-decoration: var(--typography-Caption-Regular-textDecoration); +} + +.black { + /* No black variable exist yet */ + color: #000; +} + +.burgundy { + color: var(--Scandic-Brand-Burgundy); +} + +.pale { + color: var(--Scandic-Brand-Pale-Peach); +} diff --git a/components/TempDesignSystem/Text/Caption/caption.ts b/components/TempDesignSystem/Text/Caption/caption.ts new file mode 100644 index 000000000..f6fd68625 --- /dev/null +++ b/components/TempDesignSystem/Text/Caption/caption.ts @@ -0,0 +1,7 @@ +import { captionVariants } from "./variants" + +import type { VariantProps } from "class-variance-authority" + +export interface CaptionProps + extends Omit, "color">, + VariantProps {} diff --git a/components/TempDesignSystem/Text/Caption/index.tsx b/components/TempDesignSystem/Text/Caption/index.tsx new file mode 100644 index 000000000..72bb86c93 --- /dev/null +++ b/components/TempDesignSystem/Text/Caption/index.tsx @@ -0,0 +1,17 @@ +import { captionVariants } from "./variants" + +import type { CaptionProps } from "./caption" + +export default function Caption({ + children, + className = "", + color, + textTransform, +}: CaptionProps) { + const classNames = captionVariants({ + className, + color, + textTransform, + }) + return

{children}

+} diff --git a/components/TempDesignSystem/Text/Caption/variants.ts b/components/TempDesignSystem/Text/Caption/variants.ts new file mode 100644 index 000000000..55a96ac15 --- /dev/null +++ b/components/TempDesignSystem/Text/Caption/variants.ts @@ -0,0 +1,23 @@ +import { cva } from "class-variance-authority" + +import styles from "./caption.module.css" + +const config = { + variants: { + color: { + black: styles.black, + burgundy: styles.burgundy, + pale: styles.pale, + }, + textTransform: { + bold: styles.bold, + regular: styles.regular, + }, + }, + defaultVariants: { + color: "black", + textTransform: "regular", + }, +} as const + +export const captionVariants = cva(styles.caption, config) diff --git a/components/TempDesignSystem/Text/Footnote/footnote.module.css b/components/TempDesignSystem/Text/Footnote/footnote.module.css new file mode 100644 index 000000000..85608cc1b --- /dev/null +++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css @@ -0,0 +1,35 @@ +.body { + margin: 0; + padding: 0; +} + +.bold { + font-family: var(--typography-Footnote-Bold-fontFamily); + font-size: var(--typography-Footnote-Bold-fontSize); + font-weight: var(--typography-Footnote-Bold-fontWeight); + letter-spacing: var(--typography-Footnote-Bold-letterSpacing); + line-height: var(--typography-Footnote-Bold-lineHeight); + text-decoration: var(--typography-Footnote-Bold-textDecoration); +} + +.regular { + font-family: var(--typography-Footnote-Regular-fontFamily); + font-size: var(--typography-Footnote-Regular-fontSize); + font-weight: var(--typography-Footnote-Regular-fontWeight); + letter-spacing: var(--typography-Footnote-Regular-letterSpacing); + line-height: var(--typography-Footnote-Regular-lineHeight); + text-decoration: var(--typography-Footnote-Regular-textDecoration); +} + +.black { + /* No black variable exist yet */ + color: #000; +} + +.burgundy { + color: var(--Scandic-Brand-Burgundy); +} + +.pale { + color: var(--Scandic-Brand-Pale-Peach); +} diff --git a/components/TempDesignSystem/Text/Footnote/footnote.ts b/components/TempDesignSystem/Text/Footnote/footnote.ts new file mode 100644 index 000000000..a6bf10246 --- /dev/null +++ b/components/TempDesignSystem/Text/Footnote/footnote.ts @@ -0,0 +1,7 @@ +import { footnoteVariants } from "./variants" + +import type { VariantProps } from "class-variance-authority" + +export interface FootnoteProps + extends Omit, "color">, + VariantProps {} diff --git a/components/TempDesignSystem/Text/Footnote/index.tsx b/components/TempDesignSystem/Text/Footnote/index.tsx new file mode 100644 index 000000000..bad167e31 --- /dev/null +++ b/components/TempDesignSystem/Text/Footnote/index.tsx @@ -0,0 +1,17 @@ +import { footnoteVariants } from "./variants" + +import type { FootnoteProps } from "./footnote" + +export default function Footnote({ + children, + className = "", + color, + textTransform, +}: FootnoteProps) { + const classNames = footnoteVariants({ + className, + color, + textTransform, + }) + return

{children}

+} diff --git a/components/TempDesignSystem/Text/Footnote/variants.ts b/components/TempDesignSystem/Text/Footnote/variants.ts new file mode 100644 index 000000000..88d23e224 --- /dev/null +++ b/components/TempDesignSystem/Text/Footnote/variants.ts @@ -0,0 +1,23 @@ +import { cva } from "class-variance-authority" + +import styles from "./footnote.module.css" + +const config = { + variants: { + color: { + black: styles.black, + burgundy: styles.burgundy, + pale: styles.pale, + }, + textTransform: { + bold: styles.bold, + regular: styles.regular, + }, + }, + defaultVariants: { + color: "black", + textTransform: "regular", + }, +} as const + +export const footnoteVariants = cva(styles.footnote, config) diff --git a/components/TempDesignSystem/Subtitle/index.tsx b/components/TempDesignSystem/Text/Subtitle/index.tsx similarity index 100% rename from components/TempDesignSystem/Subtitle/index.tsx rename to components/TempDesignSystem/Text/Subtitle/index.tsx diff --git a/components/TempDesignSystem/Subtitle/subtitle.module.css b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css similarity index 59% rename from components/TempDesignSystem/Subtitle/subtitle.module.css rename to components/TempDesignSystem/Text/Subtitle/subtitle.module.css index f3bc9a3c8..e712f8e0d 100644 --- a/components/TempDesignSystem/Subtitle/subtitle.module.css +++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css @@ -1,6 +1,10 @@ .subtitle { font-family: var(--typography-Subtitle-fontFamily); - font-size: var(--typography-Subtitle-Mobile-fontSize); + font-size: clamp( + var(--typography-Subtitle-Mobile-fontSize), + 0.3vw + 15px, + var(--typography-Subtitle-Desktop-fontSize) + ); font-weight: var(--typography-Subtitle-fontWeight); letter-spacing: var(--typography-Subtitle-letterSpacing); line-height: var(--typography-Subtitle-lineHeight); @@ -8,18 +12,6 @@ padding: 0; } -@media screen and (min-width: 768px) { - .subtitle { - font-size: var(--typography-Subtitle-Tablet-estimate-fontSize); - } -} - -@media screen and (min-width: 1367px) { - .subtitle { - font-size: var(--typography-Subtitle-Desktop-fontSize); - } -} - .regular { text-transform: none; } diff --git a/components/TempDesignSystem/Subtitle/subtitle.ts b/components/TempDesignSystem/Text/Subtitle/subtitle.ts similarity index 100% rename from components/TempDesignSystem/Subtitle/subtitle.ts rename to components/TempDesignSystem/Text/Subtitle/subtitle.ts diff --git a/components/TempDesignSystem/Subtitle/variants.ts b/components/TempDesignSystem/Text/Subtitle/variants.ts similarity index 100% rename from components/TempDesignSystem/Subtitle/variants.ts rename to components/TempDesignSystem/Text/Subtitle/variants.ts diff --git a/components/TempDesignSystem/Title/index.tsx b/components/TempDesignSystem/Text/Title/index.tsx similarity index 100% rename from components/TempDesignSystem/Title/index.tsx rename to components/TempDesignSystem/Text/Title/index.tsx diff --git a/components/TempDesignSystem/Title/title.module.css b/components/TempDesignSystem/Text/Title/title.module.css similarity index 54% rename from components/TempDesignSystem/Title/title.module.css rename to components/TempDesignSystem/Text/Title/title.module.css index bbefa4d79..adc62d83a 100644 --- a/components/TempDesignSystem/Title/title.module.css +++ b/components/TempDesignSystem/Text/Title/title.module.css @@ -3,6 +3,71 @@ padding: 0; } +.h1 { + font-family: var(--typography-Title-1-fontFamily); + font-size: clamp( + var(--typography-Title-1-Mobile-fontSize), + 2.6vw + 27px, + var(--typography-Title-1-Desktop-fontSize) + ); + font-weight: var(--typography-Title-1-fontWeight); + letter-spacing: var(--typography-Title-1-letterSpacing); + line-height: var(--typography-Title-1-lineHeight); + text-decoration: var(--typography-Title-1-textDecoration); +} + +.h2 { + font-family: var(--typography-Title-2-fontFamily); + font-size: clamp( + var(--typography-Title-2-Mobile-fontSize), + 2vw + 20px, + var(--typography-Title-2-Desktop-fontSize) + ); + font-weight: var(--typography-Title-2-fontWeight); + letter-spacing: var(--typography-Title-2-letterSpacing); + line-height: var(--typography-Title-2-lineHeight); + text-decoration: var(--typography-Title-2-textDecoration); +} + +.h3 { + font-family: var(--typography-Title-3-fontFamily); + font-size: clamp( + var(--typography-Title-3-Mobile-fontSize), + 0.6vw + 27px, + var(--typography-Title-3-Desktop-fontSize) + ); + font-weight: var(--typography-Title-3-fontWeight); + letter-spacing: var(--typography-Title-3-letterSpacing); + line-height: var(--typography-Title-3-lineHeight); + text-decoration: var(--typography-Title-3-textDecoration); +} + +.h4 { + font-family: var(--typography-Title-4-fontFamily); + font-size: clamp( + var(--typography-Title-4-Mobile-fontSize), + 0.6vw + 19px, + var(--typography-Title-4-Desktop-fontSize) + ); + font-weight: var(--typography-Title-4-fontWeight); + letter-spacing: var(--typography-Title-4-letterSpacing); + line-height: var(--typography-Title-4-lineHeight); + text-decoration: var(--typography-Title-4-textDecoration); +} + +.h5 { + font-family: var(--typography-Title-5-fontFamily); + font-size: clamp( + var(--typography-Title-5-Mobile-fontSize), + 0.3vw + 17px, + var(--typography-Title-5-Desktop-fontSize) + ); + font-weight: var(--typography-Title-5-fontWeight); + letter-spacing: var(--typography-Title-5-letterSpacing); + line-height: var(--typography-Title-5-lineHeight); + text-decoration: var(--typography-Title-5-textDecoration); +} + .regular { text-transform: none; } @@ -11,90 +76,6 @@ text-transform: uppercase; } -.h1 { - font-family: var(--typography-Title-1-fontFamily); - font-size: var(--typography-Title-1-Mobile-fontSize); - font-weight: var(--typography-Title-1-fontWeight); - letter-spacing: var(--typography-Title-1-letterSpacing); - line-height: var(--typography-Title-1-lineHeight); -} - -.h2 { - font-family: var(--typography-Title-2-fontFamily); - font-size: var(--typography-Title-2-Mobile-fontSize); - font-weight: var(--typography-Title-2-fontWeight); - letter-spacing: var(--typography-Title-2-letterSpacing); - line-height: var(--typography-Title-2-lineHeight); -} - -.h3 { - font-family: var(--typography-Title-3-fontFamily); - font-size: var(--typography-Title-3-Mobile-fontSize); - font-weight: var(--typography-Title-3-fontWeight); - letter-spacing: var(--typography-Title-3-letterSpacing); - line-height: var(--typography-Title-3-lineHeight); -} - -.h4 { - font-family: var(--typography-Title-4-fontFamily); - font-size: var(--typography-Title-4-Mobile-fontSize); - font-weight: var(--typography-Title-4-fontWeight); - letter-spacing: var(--typography-Title-4-letterSpacing); - line-height: var(--typography-Title-4-lineHeight); -} - -.h5 { - font-family: var(--typography-Title-5-fontFamily); - font-size: var(--typography-Title-5-Mobile-fontSize); - font-weight: var(--typography-Title-5-fontWeight); - letter-spacing: var(--typography-Title-5-letterSpacing); - line-height: var(--typography-Title-5-lineHeight); -} - -@media screen and (min-width: 768px) { - .h1 { - font-size: var(--typography-Title-1-Tablet-estimate-fontSize); - } - - .h2 { - font-size: var(--typography-Title-2-Tablet-estimate-fontSize); - } - - .h3 { - font-size: var(--typography-Title-3-Tablet-estimate-fontSize); - } - - .h4 { - font-size: var(--typography-Title-4-Tablet-estimate-fontSize); - } - - .h5 { - font-size: var(--typography-Title-5-Tablet-estimate-fontSize); - } -} - -@media screen and (min-width: 1367px) { - .h1 { - font-size: var(--typography-Title-1-Desktop-fontSize); - } - - .h2 { - font-size: var(--typography-Title-2-Desktop-fontSize); - } - - .h3 { - font-size: var(--typography-Title-3-Desktop-fontSize); - } - - .h4 { - font-size: var(--typography-Title-4-Desktop-fontSize); - } - - .h5 { - font-size: var(--typography-Title-5-Desktop-fontSize); - } -} - .burgundy { color: var(--Scandic-Brand-Burgundy); } diff --git a/components/TempDesignSystem/Title/title.ts b/components/TempDesignSystem/Text/Title/title.ts similarity index 100% rename from components/TempDesignSystem/Title/title.ts rename to components/TempDesignSystem/Text/Title/title.ts diff --git a/components/TempDesignSystem/Title/variants.ts b/components/TempDesignSystem/Text/Title/variants.ts similarity index 100% rename from components/TempDesignSystem/Title/variants.ts rename to components/TempDesignSystem/Text/Title/variants.ts diff --git a/lib/graphql/Fragments/Grid.graphql b/lib/graphql/Fragments/Grid.graphql new file mode 100644 index 000000000..7cde03700 --- /dev/null +++ b/lib/graphql/Fragments/Grid.graphql @@ -0,0 +1,17 @@ +fragment Grid on Grid { + columns { + span + rows { + rowConnection { + edges { + node { + __typename + ... on Card { + title + } + } + } + } + } + } +} diff --git a/types/components/myPages/myProfile/card/title.ts b/types/components/myPages/myProfile/card/title.ts deleted file mode 100644 index bfe8269bb..000000000 --- a/types/components/myPages/myProfile/card/title.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { headingVariants } from "@/components/MyProfile/Card/Title/variants" - -import type { VariantProps } from "class-variance-authority" - -type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" - -export interface HeadingProps extends React.HTMLAttributes, VariantProps { - as?: HeadingLevel - level?: HeadingLevel - uppercase?: boolean -}