3f632e6031
fix(BOOK-293): changed variants and props on IconButton component * fix(BOOK-293): changed variants and props on IconButton component * fix(BOOK-293): inherit color for icon Approved-by: Bianca Widstam Approved-by: Christel Westerberg
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
"use client"
|
|
import { cx } from "class-variance-authority"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useIsMobile } from "@scandic-hotels/booking-flow/hooks/useBreakpoint"
|
|
import { Button, type ButtonProps } from "@scandic-hotels/design-system/Button"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import styles from "./UsePoints.module.css"
|
|
|
|
export function UsePointsButton({ variant, onPress }: ButtonProps) {
|
|
const intl = useIntl()
|
|
const isSmallScreen = useIsMobile()
|
|
|
|
const buttonVariant =
|
|
variant === "Text" && isSmallScreen ? "Secondary" : variant
|
|
|
|
const buttonClassName = cx(
|
|
variant === "Text" ? styles.textButton : styles.primaryButton
|
|
)
|
|
|
|
return (
|
|
<Button
|
|
size="md"
|
|
className={buttonClassName}
|
|
variant={buttonVariant}
|
|
onPress={onPress}
|
|
>
|
|
{intl.formatMessage({
|
|
id: "myPages.membershipPointsOverview.usePointsButton",
|
|
defaultMessage: "Use points",
|
|
})}
|
|
<MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
|
|
</Button>
|
|
)
|
|
}
|