feat(SW-706): make eslint rule 'formatjs/no-literal-string-in-jsx' pass
This commit is contained in:
Michael Zetterberg
@@ -39,7 +39,9 @@ export default function RoomDetails({
|
||||
<div className={styles.listContainer}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p className={styles.text}>
|
||||
{intl.formatMessage({ id: "This room is equipped with" })}
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "This room is equipped with",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<ul className={styles.facilityList}>
|
||||
@@ -56,12 +58,16 @@ export default function RoomDetails({
|
||||
<div className={styles.listContainer}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p className={styles.text}>
|
||||
{intl.formatMessage({ id: "Bed options" })}
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Bed options",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.text}>
|
||||
{intl.formatMessage({ id: "Based on availability" })}
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Based on availability",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<ul className={styles.bedOptions}>
|
||||
|
||||
@@ -77,7 +77,9 @@ export default function BookedRoomSidePeek({
|
||||
const galleryImages = mapApiImagesToGalleryImages(room.images)
|
||||
|
||||
const adultsMsg = intl.formatMessage(
|
||||
{ id: "{adults, plural, one {# adult} other {# adults}}" },
|
||||
{
|
||||
defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
|
||||
},
|
||||
{
|
||||
adults: adults,
|
||||
}
|
||||
@@ -85,7 +87,7 @@ export default function BookedRoomSidePeek({
|
||||
|
||||
const childrenMsg = intl.formatMessage(
|
||||
{
|
||||
id: "{children, plural, one {# child} other {# children}}",
|
||||
defaultMessage: "{children, plural, one {# child} other {# children}}",
|
||||
},
|
||||
{
|
||||
children: childrenInRoom.length,
|
||||
@@ -114,7 +116,11 @@ export default function BookedRoomSidePeek({
|
||||
}
|
||||
>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{intl.formatMessage({ id: "Cancelled" })}</span>
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Cancelled",
|
||||
})}
|
||||
</span>
|
||||
</Typography>
|
||||
</IconChip>
|
||||
) : (
|
||||
@@ -122,7 +128,9 @@ export default function BookedRoomSidePeek({
|
||||
<Typography variant="Tag/sm">
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
{ id: "Room {roomIndex}" },
|
||||
{
|
||||
defaultMessage: "Room {roomIndex}",
|
||||
},
|
||||
{ roomIndex: roomNumber }
|
||||
)}
|
||||
</span>
|
||||
@@ -132,9 +140,21 @@ export default function BookedRoomSidePeek({
|
||||
<div className={styles.reference}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
{isCancelled ? (
|
||||
<span>{intl.formatMessage({ id: "Cancellation no" })}:</span>
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Cancellation no",
|
||||
})}
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{":"}
|
||||
</span>
|
||||
) : (
|
||||
<span>{intl.formatMessage({ id: "Reference" })}:</span>
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Reference",
|
||||
})}
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{":"}
|
||||
</span>
|
||||
)}
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
@@ -161,7 +181,11 @@ export default function BookedRoomSidePeek({
|
||||
<span className={styles.rowTitle}>
|
||||
<MaterialIcon icon="person" color="Icon/Default" size={20} />
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>{intl.formatMessage({ id: "Guests" })}</p>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Guests",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</span>
|
||||
<div className={styles.rowContent}>
|
||||
@@ -178,7 +202,11 @@ export default function BookedRoomSidePeek({
|
||||
<span className={styles.rowTitle}>
|
||||
<MaterialIcon icon="contract" color="Icon/Default" size={20} />
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>{intl.formatMessage({ id: "Terms" })}</p>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Terms",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</span>
|
||||
<div className={styles.rowContent}>
|
||||
@@ -194,14 +222,20 @@ export default function BookedRoomSidePeek({
|
||||
<span className={styles.rowTitle}>
|
||||
<MaterialIcon icon="refresh" color="Icon/Default" size={20} />
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>{intl.formatMessage({ id: "Modify By" })}</p>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Modify By",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</span>
|
||||
<div className={styles.rowContent}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p color="uiTextHighContrast">
|
||||
{intl.formatMessage(
|
||||
{ id: "Until {time}, {date}" },
|
||||
{
|
||||
defaultMessage: "Until {time}, {date}",
|
||||
},
|
||||
{ time: "18:00", date: fromDate.format("dddd D MMM") }
|
||||
)}
|
||||
</p>
|
||||
@@ -213,7 +247,11 @@ export default function BookedRoomSidePeek({
|
||||
<span className={styles.rowTitle}>
|
||||
<MaterialIcon icon="coffee" color="Icon/Default" size={20} />
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>{intl.formatMessage({ id: "Breakfast" })}</p>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Breakfast",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</span>
|
||||
<div className={styles.rowContent}>
|
||||
@@ -225,8 +263,12 @@ export default function BookedRoomSidePeek({
|
||||
code: pkg.code,
|
||||
}))
|
||||
)
|
||||
? intl.formatMessage({ id: "Included" })
|
||||
: intl.formatMessage({ id: "Not included" })}
|
||||
? intl.formatMessage({
|
||||
defaultMessage: "Included",
|
||||
})
|
||||
: intl.formatMessage({
|
||||
defaultMessage: "Not included",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
@@ -244,7 +286,11 @@ export default function BookedRoomSidePeek({
|
||||
size={20}
|
||||
/>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>{intl.formatMessage({ id: "Room classification" })}</p>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Room classification",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</span>
|
||||
<div className={styles.rowContent}>
|
||||
@@ -267,7 +313,11 @@ export default function BookedRoomSidePeek({
|
||||
<span className={styles.rowTitle}>
|
||||
<MaterialIcon icon="bed" color="Icon/Default" size={20} />
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>{intl.formatMessage({ id: "Bed preference" })}</p>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Bed preference",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</span>
|
||||
<div className={styles.rowContent}>
|
||||
@@ -282,7 +332,9 @@ export default function BookedRoomSidePeek({
|
||||
<div className={styles.price}>
|
||||
<Typography variant="Body/Lead text">
|
||||
<p color="uiTextHighContrast">
|
||||
{intl.formatMessage({ id: "Room total" })}
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Room total",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
|
||||
@@ -300,7 +352,9 @@ export default function BookedRoomSidePeek({
|
||||
icon={<DiscountIcon color="Icon/Feedback/Information" />}
|
||||
>
|
||||
{intl.formatMessage(
|
||||
{ id: "<strong>Booking code</strong>: {value}" },
|
||||
{
|
||||
defaultMessage: "<strong>Booking code</strong>: {value}",
|
||||
},
|
||||
{
|
||||
value: bookingCode,
|
||||
strong: (text) => (
|
||||
@@ -327,7 +381,9 @@ export default function BookedRoomSidePeek({
|
||||
</div>
|
||||
<Accordion>
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({ id: "Room details" })}
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Room details",
|
||||
})}
|
||||
variant="sidepeek"
|
||||
>
|
||||
<RoomDetails
|
||||
|
||||
@@ -12,7 +12,9 @@ export default function Accessibility({
|
||||
const intl = useIntl()
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({ id: "Accessibility" })}
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Accessibility",
|
||||
})}
|
||||
iconName={IconName.Accessibility}
|
||||
variant="sidepeek"
|
||||
>
|
||||
|
||||
@@ -11,14 +11,22 @@ export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({ id: "Check-in/Check-out" })}
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Check-in/Check-out",
|
||||
})}
|
||||
iconName={IconName.Calendar}
|
||||
variant="sidepeek"
|
||||
>
|
||||
<Body textTransform="bold">{intl.formatMessage({ id: "Hours" })}</Body>
|
||||
<Body textTransform="bold">
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Hours",
|
||||
})}
|
||||
</Body>
|
||||
<Body>
|
||||
{intl.formatMessage(
|
||||
{ id: "Check in from: {checkInTime}" },
|
||||
{
|
||||
defaultMessage: "Check in from: {checkInTime}",
|
||||
},
|
||||
{
|
||||
checkInTime: checkin.checkInTime,
|
||||
}
|
||||
@@ -26,7 +34,9 @@ export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
|
||||
</Body>
|
||||
<Body>
|
||||
{intl.formatMessage(
|
||||
{ id: "Check out at latest: {checkOutTime}" },
|
||||
{
|
||||
defaultMessage: "Check out at latest: {checkOutTime}",
|
||||
},
|
||||
{
|
||||
checkOutTime: checkin.checkOutTime,
|
||||
}
|
||||
|
||||
@@ -12,7 +12,9 @@ export default function MeetingsAndConferences({
|
||||
const intl = useIntl()
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({ id: "Meetings & Conferences" })}
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Meetings & Conferences",
|
||||
})}
|
||||
iconName={IconName.Business}
|
||||
variant="sidepeek"
|
||||
>
|
||||
|
||||
@@ -15,7 +15,9 @@ export default function Parking({ parking }: ParkingProps) {
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({ id: "Parking" })}
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Parking",
|
||||
})}
|
||||
iconName={IconName.Parking}
|
||||
className={styles.parking}
|
||||
variant="sidepeek"
|
||||
@@ -31,7 +33,9 @@ export default function Parking({ parking }: ParkingProps) {
|
||||
<li>
|
||||
<MaterialIcon icon="favorite" isFilled color="Icon/Accent" />
|
||||
{intl.formatMessage(
|
||||
{ id: "Address: {address}" },
|
||||
{
|
||||
defaultMessage: "Address: {address}",
|
||||
},
|
||||
{
|
||||
address: p.address,
|
||||
}
|
||||
@@ -42,7 +46,9 @@ export default function Parking({ parking }: ParkingProps) {
|
||||
<li>
|
||||
<MaterialIcon icon="favorite" isFilled color="Icon/Accent" />
|
||||
{intl.formatMessage(
|
||||
{ id: "Number of parking spots: {number}" },
|
||||
{
|
||||
defaultMessage: "Number of parking spots: {number}",
|
||||
},
|
||||
{ number: p.numberOfParkingSpots }
|
||||
)}
|
||||
</li>
|
||||
@@ -52,7 +58,8 @@ export default function Parking({ parking }: ParkingProps) {
|
||||
<MaterialIcon icon="favorite" isFilled color="Icon/Accent" />
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "Number of charging points for electric cars: {number}",
|
||||
defaultMessage:
|
||||
"Number of charging points for electric cars: {number}",
|
||||
},
|
||||
{ number: p.numberOfChargingSpaces }
|
||||
)}
|
||||
|
||||
@@ -15,7 +15,8 @@ export default function Restaurant({
|
||||
<AccordionItem
|
||||
title={intl.formatMessage(
|
||||
{
|
||||
id: "{totalRestaurants, plural, one {Restaurant} other {Restaurants}}",
|
||||
defaultMessage:
|
||||
"{totalRestaurants, plural, one {Restaurant} other {Restaurants}}",
|
||||
},
|
||||
{ totalRestaurants: 1 }
|
||||
)}
|
||||
|
||||
@@ -39,7 +39,9 @@ export default function HotelSidePeek({
|
||||
>
|
||||
<div className={styles.content}>
|
||||
<Subtitle color="baseTextHighContrast">
|
||||
{intl.formatMessage({ id: "Practical information" })}
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Practical information",
|
||||
})}
|
||||
</Subtitle>
|
||||
<Contact hotel={hotel} />
|
||||
<Accordion>
|
||||
|
||||
@@ -41,7 +41,8 @@ export default function RoomSidePeek({
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "Max. {max, plural, one {{range} guest} other {{range} guests}}",
|
||||
defaultMessage:
|
||||
"Max. {max, plural, one {{range} guest} other {{range} guests}}",
|
||||
},
|
||||
{
|
||||
max: totalOccupancy.max,
|
||||
@@ -54,14 +55,16 @@ export default function RoomSidePeek({
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{roomSize.min === roomSize.max
|
||||
? intl.formatMessage(
|
||||
{ id: "{roomSize} m²" },
|
||||
{
|
||||
defaultMessage: "{roomSize} m²",
|
||||
},
|
||||
{
|
||||
roomSize: roomSize.min,
|
||||
}
|
||||
)
|
||||
: intl.formatMessage(
|
||||
{
|
||||
id: "{roomSizeMin}–{roomSizeMax} m²",
|
||||
defaultMessage: "{roomSizeMin}–{roomSizeMax} m²",
|
||||
},
|
||||
{
|
||||
roomSizeMin: roomSize.min,
|
||||
@@ -81,7 +84,9 @@ export default function RoomSidePeek({
|
||||
</div>
|
||||
<div className={styles.listContainer}>
|
||||
<Subtitle type="two" color="uiTextHighContrast">
|
||||
{intl.formatMessage({ id: "Room amenities" })}
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Room amenities",
|
||||
})}
|
||||
</Subtitle>
|
||||
<ul className={styles.facilityList}>
|
||||
{room.roomFacilities
|
||||
@@ -111,10 +116,14 @@ export default function RoomSidePeek({
|
||||
</div>
|
||||
<div className={styles.listContainer}>
|
||||
<Subtitle type="two" color="uiTextHighContrast">
|
||||
{intl.formatMessage({ id: "Bed options" })}
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Bed options",
|
||||
})}
|
||||
</Subtitle>
|
||||
<Body color="grey">
|
||||
{intl.formatMessage({ id: "Based on availability" })}
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Based on availability",
|
||||
})}
|
||||
</Body>
|
||||
<ul className={styles.bedOptions}>
|
||||
{room.roomTypes.map((roomType) => {
|
||||
|
||||
Reference in New Issue
Block a user