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"
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>
</>