scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: cleanup

Browse Source
This commit is contained in:
Erik Tiekstra
2024-08-26 08:52:32 +02:00
parent f1242e69e3
commit d1a2175804
45 changed files with 70 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Header/HeaderLink/headerLink.module.css
+1 -1
View File
@@ -1,4 +1,4 @@
.topLink {
.headerLink {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
components/Header/HeaderLink/index.tsx
+2 -2
View File
@@ -2,11 +2,11 @@ import Link from "@/components/TempDesignSystem/Link"
import styles from "./headerLink.module.css"
import { HeaderLinkProps } from "@/types/components/header/headerLink"
import type { HeaderLinkProps } from "@/types/components/header/headerLink"
export default function HeaderLink({ children, ...props }: HeaderLinkProps) {
return (
<Link color="burgundy" className={styles.topLink} {...props}>
<Link color="burgundy" className={styles.headerLink} {...props}>
{children}
</Link>
)
components/Header/MainMenu/Avatar/index.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import Image from "@/components/Image"
import styles from "./avatar.module.css"
import { AvatarProps } from "@/types/components/header/avatar"
import type { AvatarProps } from "@/types/components/header/avatar"
export default function Avatar({ image, initials }: AvatarProps) {
let classNames = [styles.avatar]
components/Header/MainMenu/MainMenuButton/index.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import styles from "./menuButton.module.css"
import { MainMenuButtonProps } from "@/types/components/header/mainMenuButton"
import type { MainMenuButtonProps } from "@/types/components/header/mainMenuButton"
export default function MainMenuButton({
className = "",
components/Header/MainMenu/MobileMenu/index.tsx
+8 -2
View File
@@ -14,7 +14,7 @@ import NavigationMenu from "../NavigationMenu"
import styles from "./mobileMenu.module.css"
import { MobileMenuProps } from "@/types/components/header/mobileMenu"
import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
export default function MobileMenu({
mainNavigation,
@@ -24,8 +24,10 @@ export default function MobileMenu({
const {
isHamburgerMenuOpen,
isMyPagesMobileMenuOpen,
isLanguageSwitcherOpen,
toggleHamburgerMenu,
toggleMyPagesMobileMenu,
toggleLanguageSwitcher,
} = useDropdownStore()
useHandleKeyUp((event: KeyboardEvent) => {
@@ -38,6 +40,10 @@ export default function MobileMenu({
if (isMyPagesMobileMenuOpen) {
toggleMyPagesMobileMenu()
} else {
if (isLanguageSwitcherOpen) {
toggleLanguageSwitcher()
}
toggleHamburgerMenu()
}
}
@@ -73,7 +79,7 @@ export default function MobileMenu({
<ServiceIcon width={20} height={20} color="burgundy" />
{intl.formatMessage({ id: "Customer service" })}
</HeaderLink>
<LanguageSwitcher variant="mobileHeader" urls={languageUrls} />
<LanguageSwitcher type="mobileHeader" urls={languageUrls} />
</footer>
</Dialog>
</Modal>
components/Header/MainMenu/MobileMenu/mobileMenu.module.css
+2 -2
View File
@@ -25,7 +25,7 @@
display: inline-block;
height: 3px;
position: relative;
transition: all 0.2s;
transition: all 0.3s;
width: 32px;
}
@@ -72,7 +72,7 @@
width: 100%;
background-color: var(--Base-Surface-Primary-light-Normal);
transition: right 0.3s;
z-index: var(--mobile-menu-overlay-z-index);
z-index: var(--menu-overlay-z-index);
}
.modal[data-entering] {
components/Header/MainMenu/MyPagesMenu/index.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
import styles from "./myPagesMenu.module.css"
import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
const intl = useIntl()
components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
+4 -4
View File
@@ -9,7 +9,7 @@
}
.chevron {
transition: transform 0.2s;
transition: transform 0.3s;
}
.chevron.isExpanded {
@@ -18,13 +18,13 @@
.dropdown {
position: absolute;
top: 46px;
top: 2.875rem; /* 2.875rem is the height of the main menu + bottom padding */
right: 0;
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Large);
box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1);
min-width: 20rem;
z-index: 1;
z-index: var(--menu-overlay-z-index);
}
/* Triangle above dropdown */
components/Header/MainMenu/MyPagesMenuContent/index.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"
import styles from "./myPagesMenuContent.module.css"
import { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"
import type { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"
export default function MyPagesMenuContent({
navigation,
components/Header/MainMenu/MyPagesMobileMenu/index.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
import styles from "./myPagesMobileMenu.module.css"
import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
export default function MyPagesMobileMenu({
navigation,
components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css
+1 -2
View File
@@ -15,8 +15,7 @@
bottom: 0;
width: 100%;
background-color: var(--Base-Surface-Primary-light-Normal);
transition: right 0.3s;
z-index: var(--mobile-menu-overlay-z-index);
z-index: var(--menu-overlay-z-index);
}
.modal[data-entering] {
components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import { navigationMenuItemVariants } from "./variants"
import styles from "./navigationMenuItem.module.css"
import { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
const { children, title, href, seeAllLinkText, infoCard } = item
components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+1 -1
View File
@@ -6,7 +6,7 @@
}
.chevron {
transition: transform 0.2s;
transition: transform 0.3s;
}
.chevron.isExpanded {
components/Header/MainMenu/NavigationMenu/index.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { navigationMenuVariants } from "./variants"
import styles from "./navigationMenu.module.css"
import { NavigationMenuProps } from "@/types/components/header/navigationMenu"
import type { NavigationMenuProps } from "@/types/components/header/navigationMenu"
export default function NavigationMenu({
items,
components/Header/MainMenu/index.tsx
+5 -11
View File
@@ -17,7 +17,7 @@ import NavigationMenu from "./NavigationMenu"
import styles from "./mainMenu.module.css"
import { MainMenuProps } from "@/types/components/header/mainMenu"
import type { MainMenuProps } from "@/types/components/header/mainMenu"
export default async function MainMenu({ languageUrls }: MainMenuProps) {
const intl = await getIntl()
@@ -30,7 +30,7 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
return (
<div className={styles.mainMenu}>
<nav className={styles.nav}>
<NextLink className={styles.logoLink} href="/">
<NextLink className={styles.logoLink} href={`/${lang}`}>
<Image
alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
className={styles.logo}
@@ -44,16 +44,10 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
</NextLink>
<div className={styles.menus}>
<NavigationMenu items={navigationMenuItems} />
{true ? (
{user ? (
<>
<MyPagesMenu
navigation={myPagesNavigation}
user={{ firstName: "Hubba", lastName: "Bubba" }}
/>
<MyPagesMobileMenu
navigation={myPagesNavigation}
user={{ firstName: "Hubba", lastName: "Bubba" }}
/>
<MyPagesMenu navigation={myPagesNavigation} user={user} />
<MyPagesMobileMenu navigation={myPagesNavigation} user={user} />
</>
) : (
<Link
components/Header/MainMenu/mainMenu.module.css
+1 -1
View File
@@ -26,7 +26,7 @@
}
.logo {
width: 6.4375rem;
height: 1.375rem;
}
.loginLink {
components/Header/TopMenu/Search/index.tsx
-18
View File
@@ -1,18 +0,0 @@
"use client"
import { useIntl } from "react-intl"
import { SearchIcon } from "@/components/Icons"
import styles from "./search.module.css"
export default function Search() {
const intl = useIntl()
return (
<button type="button" className={styles.button}>
<SearchIcon width={20} height={20} color="burgundy" />
{intl.formatMessage({ id: "Find booking" })}
</button>
)
}
components/Header/TopMenu/Search/search.module.css
-20
View File
@@ -1,20 +0,0 @@
.button {
background-color: transparent;
color: var(--Base-Text-High-contrast);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
border-width: 0;
padding: 0;
cursor: pointer;
display: flex;
gap: var(--Spacing-x1);
align-items: center;
width: 100%;
}
@media screen and (min-width: 768px) {
.button {
font-size: var(--typography-Body-Bold-fontSize);
font-family: var(--typography-Body-Bold-fontFamily);
}
}
components/Header/TopMenu/index.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import HeaderLink from "../HeaderLink"
import styles from "./topMenu.module.css"
import { TopMenuProps } from "@/types/components/header/topMenu"
import type { TopMenuProps } from "@/types/components/header/topMenu"
export default async function TopMenu({ languageUrls }: TopMenuProps) {
const intl = await getIntl()
@@ -19,7 +19,7 @@ export default async function TopMenu({ languageUrls }: TopMenuProps) {
{intl.formatMessage({ id: "Join Scandic Friends" })}
</HeaderLink>
<div className={styles.right}>
<LanguageSwitcher variant="desktopHeader" urls={languageUrls} />
<LanguageSwitcher type="desktopHeader" urls={languageUrls} />
<HeaderLink href="#">
<SearchIcon width={20} height={20} color="burgundy" />
{intl.formatMessage({ id: "Find booking" })}
components/Header/header.module.css
-1
View File
@@ -1,5 +1,4 @@
.header {
font-family: var(--typography-Body-Regular-fontFamily);
color: var(--Base-Text-High-contrast);
z-index: 10;
}