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

feat(LOY-198): dtmc card animation when hovering

Browse Source
This commit is contained in:
Christian Andolf
2025-05-08 11:11:30 +02:00
parent 194a401a56
commit d53b07b907
3 changed files with 221 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx
View File

@@ -10,6 +10,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import Modal from "@/components/Modal"
import useWakeLock from "@/hooks/useWakeLock"
import DigitalTeamMemberCardContent from "./Content"
import styles from "./digitalTeamMemberCard.module.css"
import type { User } from "@/types/user"
@@ -56,66 +58,9 @@ export default function DigitalTeamMemberCardClient({
{intl.formatMessage({ defaultMessage: "Scandic Family" })}
</h2>
</Typography>
<div className={styles.card}>
<div className={styles.content}>
<div className={styles.top}>
<Typography variant="Tag/sm">
<span>
{intl.formatMessage({ defaultMessage: "Team Member" })}
</span>
</Typography>
<Typography variant="Tag/sm">
{/* TODO: Should display country of employment */}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>SWE</span>
</Typography>
</div>
<div className={styles.middle}>
<div className={styles.employeeNumber}>
<Typography variant="Title/sm">
{/* TODO: Should display employee number */}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<div>123 456</div>
</Typography>
<svg
width="42"
height="42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={styles.icon}
>
<path
d="M3.5 35V12.288C3.5 8.933 3.5 7 4.268 7c.912 0 1.569 1.156 3.17 3.978l11.374 20.044C20.413 33.844 21.041 35 21.982 35c.768 0 .768-1.933.768-5.288V7M28 22.75h10.5M29.016 8.016c1.355-1.355 7.113-1.355 8.468 0 1.355 1.355 1.355 7.113 0 8.468-1.355 1.355-7.114 1.355-8.468 0-1.355-1.355-1.355-7.113 0-8.468Z"
strokeWidth="2.625"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<Typography variant="Title/md">
<div>
{user.firstName} {user.lastName}
</div>
</Typography>
</div>
<div className={styles.bottom}>
<Typography variant="Tag/sm">
<span>
{/* TODO: Should display department of employment */}
{/* eslint-disable formatjs/no-literal-string-in-jsx */}
Haymarket by Scandic
{/* eslint-enable */}
</span>
</Typography>
<Typography variant="Tag/sm">
{/* TODO: Should display current state of employment */}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>Employee</span>
</Typography>
</div>
</div>
</div>
<DigitalTeamMemberCardContent user={user} />
<Typography variant="Body/Paragraph/mdRegular">
<div className={styles.footer}>
{intl.formatMessage({