914b095e16
fix(BOOK-210): add local charges for Finland and update design for hotel card * fix(BOOK-210): add local charges for Finland and update design for hotel card * feat(BOOK-210): change variant to conditional classname * fix(BOOK-210): update link with icon * fix(BOOK-210): update buttonlink tripadvisor * fix(BOOK-210): switch wrapper logic * fix(BOOK-210): update variants tripadvisor Approved-by: Erik Tiekstra
62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import TripadvisorIcon from '../Icons/Customised/Socials/Tripadvisor'
|
|
import styles from './tripAdvisorChip.module.css'
|
|
import { Typography } from '../Typography'
|
|
|
|
const container = cva(styles.container, {
|
|
variants: {
|
|
size: {
|
|
default: null,
|
|
small: styles.containerSmall,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'default',
|
|
},
|
|
})
|
|
|
|
const chip = cva(styles.tripAdvisor, {
|
|
variants: {
|
|
size: {
|
|
default: null,
|
|
small: styles.tripAdvisorSmall,
|
|
},
|
|
color: {
|
|
default: null,
|
|
subtle: styles.tripAdvisorSubtle,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'default',
|
|
color: 'default',
|
|
},
|
|
})
|
|
|
|
type TripAdvisorProps = {
|
|
rating: number
|
|
wrapper?: boolean
|
|
} & VariantProps<typeof chip>
|
|
|
|
export function TripAdvisorChip({
|
|
rating,
|
|
wrapper = true,
|
|
size,
|
|
color,
|
|
}: TripAdvisorProps) {
|
|
const content = (
|
|
<div className={chip({ size, color })}>
|
|
<TripadvisorIcon size={16} color="CurrentColor" />
|
|
<Typography variant="Tag/sm">
|
|
<p>{rating}</p>
|
|
</Typography>
|
|
</div>
|
|
)
|
|
|
|
return wrapper ? (
|
|
// Wrapping the chip in a transparent container with some padding to increase the touch target
|
|
<div className={container({ size })}>{content}</div>
|
|
) : (
|
|
content
|
|
)
|
|
}
|