Bianca Widstam
5f8d77e54a
fix(SW-1655): update design tripadvisor on hotel map card * fix(SW-1655): update design tripadvisor on hotel map card * fix(SW-1655): update radius * fix(SW-1655): use tripadvisor chip, create different variants * fix(SW-1655): update variants, storybook, and global css Approved-by: Joakim Jäderberg
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import TripadvisorIcon from '@scandic-hotels/design-system/Icons/TripadvisorIcon'
|
|
import styles from './tripAdvisorChip.module.css'
|
|
import { Typography } from '@scandic-hotels/design-system/Typography'
|
|
|
|
const container = cva(styles.container, {
|
|
variants: {
|
|
variant: {
|
|
default: null,
|
|
small: styles.containerSmall,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
},
|
|
})
|
|
|
|
const chip = cva(styles.tripAdvisor, {
|
|
variants: {
|
|
variant: {
|
|
default: null,
|
|
small: styles.tripAdvisorSmall,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
},
|
|
})
|
|
|
|
type TripAdvisorProps = {
|
|
rating: number
|
|
} & VariantProps<typeof container>
|
|
|
|
export function TripAdvisorChip({ rating, variant }: TripAdvisorProps) {
|
|
return (
|
|
// Wrapping the chip in a transparent container with some padding to increase the touch target
|
|
<div className={container({ variant })}>
|
|
<div className={chip({ variant })}>
|
|
<TripadvisorIcon size={16} color="Icon/Interactive/Default" />
|
|
<Typography variant="Tag/sm">
|
|
<p>{rating}</p>
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|