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

Merged in fix/dtmc-card-fixes (pull request #2022)

Browse Source 
Fix/dtmc card fixes

Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Christian Andolf
2025-05-09 11:37:08 +00:00
parent 61983dc4e0 2b32a9c1ff
commit ae657c2b49
3 changed files with 40 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
"use client"
import { useState } from "react"
import { Button } from "react-aria-components"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -42,16 +42,19 @@ export default function DigitalTeamMemberCardClient({
return (
<>
<Button className={styles.button} onPress={() => onToggle(true)}>
<Typography variant="Body/Paragraph/mdBold">
<span className={styles.text}>
{/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
<MaterialIcon icon="id_card" size={24} color="CurrentColor" />
{intl.formatMessage({
defaultMessage: "Show Team Member Card",
})}
</span>
</Typography>
<Button
className={styles.button}
onPress={() => onToggle(true)}
variant="Tertiary"
typography="Body/Paragraph/mdBold"
>
<span className={styles.text}>
{/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
<MaterialIcon icon="id_card" size={24} color="CurrentColor" />
{intl.formatMessage({
defaultMessage: "Show Team Member Card",
})}
</span>
</Button>
<Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}>
<Typography variant="Title/xs">
@@ -71,15 +74,18 @@ export default function DigitalTeamMemberCardClient({
</p>
</Typography>
{/* TODO: Add missing link to benefits page */}
<ButtonLink href="#" target="_blank" variant="Tertiary">
<Typography variant="Body/Supporting text (caption)/smBold">
<span className={styles.link}>
{intl.formatMessage({
defaultMessage: "Check out all your benefits",
})}
<MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
</span>
</Typography>
<ButtonLink
href="#"
target="_blank"
variant="Tertiary"
typography="Body/Supporting text (caption)/smBold"
>
<span className={styles.link}>
{intl.formatMessage({
defaultMessage: "Check out all your benefits",
})}
<MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
</span>
</ButtonLink>
</Modal>
</>

28
apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx
View File

@@ -87,7 +87,7 @@ export default function DigitalTeamMemberCardContent({
}
}
function renderShimmer(): CSSProperties {
function getShimmerStyle(): CSSProperties {
const { x, y } = coords
const oppositeX = 100 - (x / rect.width) * 100
const oppositeY = 100 - (y / rect.height) * 100
@@ -97,7 +97,7 @@ export default function DigitalTeamMemberCardContent({
}
}
function renderSkew(): CSSProperties {
function getSkewStyle(): CSSProperties {
const { x, y } = coords
const centerX = rect.width / 2
const centerY = rect.height / 2
@@ -130,21 +130,19 @@ export default function DigitalTeamMemberCardContent({
onTouchMove={onInteractionMove}
onTouchEnd={handleInteractionEnd}
>
<div className={styles.card} ref={cardRef} style={renderSkew()}>
<div className={styles.shimmer} style={renderShimmer()} />
<div className={styles.card} ref={cardRef} style={getSkewStyle()}>
<div className={styles.shimmer} style={getShimmerStyle()} />
<div className={styles.content}>
<div className={styles.top}>
<Typography variant="Tag/sm">
<Typography variant="Tag/sm">
<div className={styles.top}>
<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>
</Typography>
<div className={styles.middle}>
<div className={styles.employeeNumber}>
<Typography variant="Title/sm">
@@ -174,21 +172,19 @@ export default function DigitalTeamMemberCardContent({
</div>
</Typography>
</div>
<div className={styles.bottom}>
<Typography variant="Tag/sm">
<Typography variant="Tag/sm">
<div className={styles.bottom}>
<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>
</Typography>
</div>
</div>
</div>

18
apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css
View File

@@ -1,24 +1,10 @@
.button {
padding: var(--Space-x2) var(--Space-x15);
border-radius: var(--Corner-radius-md);
border: 0;
cursor: pointer;
background: var(--Surface-Brand-Primary-1-OnSurface-Default);
color: var(--Text-Brand-OnPrimary-3-Accent);
&:focus,
&:hover {
background:
linear-gradient(
0deg,
rgb(255 255 255 / 10%) 0%,
rgb(255 255 255 / 10%) 100%
),
var(--Surface-Brand-Primary-1-OnSurface-Default);
}
&:disabled {
background: var(--Surface-UI-Fill-Disabled);
color: var(--Text-Interactive-Disabled);
&:not(:disabled):hover {
color: var(--Text-Brand-OnPrimary-3-Accent);
}
}