Merged in feat/sw-2873-move-tripadvisorchip-to-booking-flow (pull request #2591)
feat(SW-2873): Move TripAdvisorChip to booking-flow * Move TripAdvisorChip to booking-flow Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
import Caption from "@scandic-hotels/design-system/Caption"
|
||||
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
|
||||
|
||||
import styles from "./tripAdvisorChip.module.css"
|
||||
|
||||
type TripAdvisorProps = {
|
||||
rating: number
|
||||
}
|
||||
|
||||
export default function TripAdvisorChip({ rating }: TripAdvisorProps) {
|
||||
return (
|
||||
// Wrapping the chip in a transparent container with some padding to increase the touch target
|
||||
<div className={styles.container}>
|
||||
<div className={styles.tripAdvisor}>
|
||||
<TripadvisorIcon color="Icon/Interactive/Default" />
|
||||
<Caption color="burgundy">{rating}</Caption>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.tripAdvisor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
padding: var(--Spacing-x-quarter) var(--Spacing-x1);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
}
|
||||
Reference in New Issue
Block a user