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

Merged in feat/LOY-311-New-Avatar-Component (pull request #2694)

Browse Source 
Feat(LOY-311) Create avatar design system component

* feat(LOY-311): Creat & use New Avatar Design System Component

* refactor(LOY-311): replace avatar used in app header with design system component

* fix(LOY-311): use correct space vars


Approved-by: Erik Tiekstra
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-08-25 14:41:50 +00:00
parent 87f597ae1a
commit 7561e996c6
19 changed files with 399 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/scandic-web/components/Header/MainMenu/Avatar/avatar.module.css
View File

@@ -1,14 +0,0 @@
.avatar {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: var(--Corner-radius-rounded);
width: 2rem;
height: 2rem;
background-color: var(--UI-Grey-40);
}
.initials {
background-color: var(--Base-Icon-Low-contrast);
}

28
apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx
View File

@@ -1,28 +0,0 @@
import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import styles from "./avatar.module.css"
import type { AvatarProps } from "@/types/components/header/avatar"
export default function Avatar({ image, initials }: AvatarProps) {
let classNames = [styles.avatar]
let element = <MaterialIcon icon="person" color="Icon/Inverted" />
if (image) {
classNames.push(styles.image)
element = <Image src={image.src} alt={image.alt} width={28} height={28} />
} else if (initials) {
classNames.push(styles.initials)
element = (
<Footnote type="label" color="white" textTransform="uppercase" asChild>
<span>{initials}</span>
</Footnote>
)
}
return (
<span data-hj-suppress className={classNames.join(" ")}>
{element}
</span>
)
}

2
apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx
View File

@@ -3,6 +3,7 @@
import { useRef } from "react"
import { useIntl } from "react-intl"
import { Avatar } from "@scandic-hotels/design-system/Avatar"
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
@@ -13,7 +14,6 @@ import useClickOutside from "@/hooks/useClickOutside"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import { getInitials } from "@/utils/user"
import Avatar from "../Avatar"
import MainMenuButton from "../MainMenuButton"
import MyPagesMenuContent, { useMyPagesNavigation } from "../MyPagesMenuContent"

2
apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
View File

@@ -4,13 +4,13 @@ import { useSession } from "next-auth/react"
import { useIntl } from "react-intl"
import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
import { Avatar } from "@scandic-hotels/design-system/Avatar"
import { trpc } from "@scandic-hotels/trpc/client"
import LoginButton from "@/components/LoginButton"
import useLang from "@/hooks/useLang"
import { isValidClientSession } from "@/utils/clientSession"
import Avatar from "../Avatar"
import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
import MyPagesMobileMenu, {
MyPagesMobileMenuSkeleton,

3
apps/scandic-web/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
View File

@@ -5,12 +5,13 @@ import { Dialog, Modal } from "react-aria-components"
import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import { Avatar } from "@scandic-hotels/design-system/Avatar"
import useDropdownStore from "@/stores/main-menu"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import { getInitials } from "@/utils/user"
import Avatar from "../Avatar"
import MainMenuButton from "../MainMenuButton"
import MyPagesMenuContent from "../MyPagesMenuContent"