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

fix: make sure of design system button and inherent typography props

Browse Source
This commit is contained in:
Christian Andolf
2025-05-09 09:54:55 +02:00
parent 7af4d3be1e
commit 485fddfa3d
3 changed files with 36 additions and 48 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" "use client"
import { useState } from "react" import { useState } from "react"
import { Button } from "react-aria-components"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -42,16 +42,19 @@ export default function DigitalTeamMemberCardClient({
return ( return (
<> <>
<Button className={styles.button} onPress={() => onToggle(true)}> <Button
<Typography variant="Body/Paragraph/mdBold"> className={styles.button}
<span className={styles.text}> onPress={() => onToggle(true)}
{/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */} variant="Tertiary"
<MaterialIcon icon="id_card" size={24} color="CurrentColor" /> typography="Body/Paragraph/mdBold"
{intl.formatMessage({ >
defaultMessage: "Show Team Member Card", <span className={styles.text}>
})} {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
</span> <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
</Typography> {intl.formatMessage({
defaultMessage: "Show Team Member Card",
})}
</span>
</Button> </Button>
<Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}> <Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}>
<Typography variant="Title/xs"> <Typography variant="Title/xs">
@@ -71,15 +74,18 @@ export default function DigitalTeamMemberCardClient({
</p> </p>
</Typography> </Typography>
{/* TODO: Add missing link to benefits page */} {/* TODO: Add missing link to benefits page */}
<ButtonLink href="#" target="_blank" variant="Tertiary"> <ButtonLink
<Typography variant="Body/Supporting text (caption)/smBold"> href="#"
<span className={styles.link}> target="_blank"
{intl.formatMessage({ variant="Tertiary"
defaultMessage: "Check out all your benefits", typography="Body/Supporting text (caption)/smBold"
})} >
<MaterialIcon icon="open_in_new" size={20} color="CurrentColor" /> <span className={styles.link}>
</span> {intl.formatMessage({
</Typography> defaultMessage: "Check out all your benefits",
})}
<MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
</span>
</ButtonLink> </ButtonLink>
</Modal> </Modal>
</> </>

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

@@ -133,18 +133,16 @@ export default function DigitalTeamMemberCardContent({
<div className={styles.card} ref={cardRef} style={renderSkew()}> <div className={styles.card} ref={cardRef} style={renderSkew()}>
<div className={styles.shimmer} style={renderShimmer()} /> <div className={styles.shimmer} style={renderShimmer()} />
<div className={styles.content}> <div className={styles.content}>
<div className={styles.top}> <Typography variant="Tag/sm">
<Typography variant="Tag/sm"> <div className={styles.top}>
<span> <span>
{intl.formatMessage({ defaultMessage: "Team Member" })} {intl.formatMessage({ defaultMessage: "Team Member" })}
</span> </span>
</Typography>
<Typography variant="Tag/sm">
{/* TODO: Should display country of employment */} {/* TODO: Should display country of employment */}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>SWE</span> <span>SWE</span>
</Typography> </div>
</div> </Typography>
<div className={styles.middle}> <div className={styles.middle}>
<div className={styles.employeeNumber}> <div className={styles.employeeNumber}>
<Typography variant="Title/sm"> <Typography variant="Title/sm">
@@ -174,21 +172,19 @@ export default function DigitalTeamMemberCardContent({
</div> </div>
</Typography> </Typography>
</div> </div>
<div className={styles.bottom}> <Typography variant="Tag/sm">
<Typography variant="Tag/sm"> <div className={styles.bottom}>
<span> <span>
{/* TODO: Should display department of employment */} {/* TODO: Should display department of employment */}
{/* eslint-disable formatjs/no-literal-string-in-jsx */} {/* eslint-disable formatjs/no-literal-string-in-jsx */}
Haymarket by Scandic Haymarket by Scandic
{/* eslint-enable */} {/* eslint-enable */}
</span> </span>
</Typography>
<Typography variant="Tag/sm">
{/* TODO: Should display current state of employment */} {/* TODO: Should display current state of employment */}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>Employee</span> <span>Employee</span>
</Typography> </div>
</div> </Typography>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,24 +1,10 @@
.button { .button {
padding: var(--Space-x2) var(--Space-x15);
border-radius: var(--Corner-radius-md); 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); color: var(--Text-Brand-OnPrimary-3-Accent);
&:focus, &:focus,
&:hover { &:not(:disabled):hover {
background: color: var(--Text-Brand-OnPrimary-3-Accent);
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);
} }
} }