From f3037a1b3debcd63084bf8794ec1d777bb3014e1 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 14 Nov 2024 10:01:59 +0100 Subject: [PATCH 1/6] feat(SW-827): Added bed types and icons --- components/Icons/BedSingle.tsx | 29 +++++++++++++++ components/Icons/KingBedSmall.tsx | 29 +++++++++++++++ components/Icons/index.tsx | 2 + components/SidePeeks/RoomSidePeek/bedIcon.ts | 37 +++++++++++++++++++ components/SidePeeks/RoomSidePeek/index.tsx | 28 ++++++++++---- .../RoomSidePeek/roomSidePeek.module.css | 6 +++ 6 files changed, 123 insertions(+), 8 deletions(-) create mode 100644 components/Icons/BedSingle.tsx create mode 100644 components/Icons/KingBedSmall.tsx create mode 100644 components/SidePeeks/RoomSidePeek/bedIcon.ts diff --git a/components/Icons/BedSingle.tsx b/components/Icons/BedSingle.tsx new file mode 100644 index 000000000..0e9aaa68f --- /dev/null +++ b/components/Icons/BedSingle.tsx @@ -0,0 +1,29 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function BedSingleIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/KingBedSmall.tsx b/components/Icons/KingBedSmall.tsx new file mode 100644 index 000000000..711ce0f12 --- /dev/null +++ b/components/Icons/KingBedSmall.tsx @@ -0,0 +1,29 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function KingBedSmallIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx index fc6e5c069..1bc195717 100644 --- a/components/Icons/index.tsx +++ b/components/Icons/index.tsx @@ -9,6 +9,7 @@ export { default as ArrowRightIcon } from "./ArrowRight" export { default as BarIcon } from "./Bar" export { default as BathtubIcon } from "./Bathtub" export { default as BedDoubleIcon } from "./BedDouble" +export { default as BedSingleIcon } from "./BedSingle" export { default as BikingIcon } from "./Biking" export { default as BreakfastIcon } from "./Breakfast" export { default as BusinessIcon } from "./Business" @@ -77,6 +78,7 @@ export { default as IronIcon } from "./Iron" export { default as KayakingIcon } from "./Kayaking" export { default as KettleIcon } from "./Kettle" export { default as KingBedIcon } from "./KingBed" +export { default as KingBedSmallIcon } from "./KingBedSmall" export { default as LampIcon } from "./Lamp" export { default as LaundryMachineIcon } from "./LaundryMachine" export { default as LocalBarIcon } from "./LocalBar" diff --git a/components/SidePeeks/RoomSidePeek/bedIcon.ts b/components/SidePeeks/RoomSidePeek/bedIcon.ts new file mode 100644 index 000000000..41947bd77 --- /dev/null +++ b/components/SidePeeks/RoomSidePeek/bedIcon.ts @@ -0,0 +1,37 @@ +import { FC } from "react" + +import { + BedDoubleIcon, + BedSingleIcon, + KingBedSmallIcon, +} from "@/components/Icons" + +import { IconProps } from "@/types/components/icon" + +export function getBedIcon(name: string): FC | null { + const iconMappings = [ + { + icon: BedDoubleIcon, + texts: ["Queen"], + }, + { + icon: KingBedSmallIcon, + texts: ["King"], + }, + { + icon: KingBedSmallIcon, + texts: ["CustomOccupancy"], + }, + { + icon: BedSingleIcon, + texts: ["Twin"], + }, + { + icon: BedSingleIcon, + texts: ["Single"], + }, + ] + + const icon = iconMappings.find((icon) => icon.texts.includes(name)) + return icon ? icon.icon : BedSingleIcon +} diff --git a/components/SidePeeks/RoomSidePeek/index.tsx b/components/SidePeeks/RoomSidePeek/index.tsx index 34fc3afca..da46a6f42 100644 --- a/components/SidePeeks/RoomSidePeek/index.tsx +++ b/components/SidePeeks/RoomSidePeek/index.tsx @@ -1,11 +1,11 @@ import { useIntl } from "react-intl" import ImageGallery from "@/components/ImageGallery" -import Button from "@/components/TempDesignSystem/Button" import SidePeek from "@/components/TempDesignSystem/SidePeek" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import { getBedIcon } from "./bedIcon" import { getFacilityIcon } from "./facilityIcon" import styles from "./roomSidePeek.module.css" @@ -79,15 +79,27 @@ export default function RoomSidePeek({ {intl.formatMessage({ id: "booking.basedOnAvailability" })} - {/* TODO: Get data for bed options */} + -
- -
) } diff --git a/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css b/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css index c76c57877..2e1fb5e6f 100644 --- a/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css +++ b/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css @@ -44,6 +44,12 @@ margin-bottom: var(--Spacing-x-half); } +.bedOptions li { + display: flex; + gap: var(--Spacing-x1); + margin-bottom: var(--Spacing-x-half); +} + .noIcon { margin-left: var(--Spacing-x4); } From 38c48006bec2028f0685852e2e63d3823a1f5132 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 14 Nov 2024 10:02:36 +0100 Subject: [PATCH 2/6] feat(827): Added fallback on image if is error --- components/ImageGallery/imageGallery.module.css | 9 +++++---- components/ImageGallery/index.tsx | 4 +++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/components/ImageGallery/imageGallery.module.css b/components/ImageGallery/imageGallery.module.css index 2ffdcf595..050f9be3b 100644 --- a/components/ImageGallery/imageGallery.module.css +++ b/components/ImageGallery/imageGallery.module.css @@ -27,16 +27,17 @@ .imagePlaceholder { height: 100%; min-height: 190px; + aspect-ratio: 16/9; width: 100%; background-color: #fff; background-image: linear-gradient(45deg, #000000 25%, transparent 25%), linear-gradient(-45deg, #000000 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #000000 75%), linear-gradient(-45deg, transparent 75%, #000000 75%); - background-size: 160px 160px; + background-size: 180px 180px; background-position: 0 0, - 0 80px, - 80px -80px, - -80px 0; + 0 90px, + 90px -90px, + -90px 0; } diff --git a/components/ImageGallery/index.tsx b/components/ImageGallery/index.tsx index eaeee684b..3fc10448b 100644 --- a/components/ImageGallery/index.tsx +++ b/components/ImageGallery/index.tsx @@ -20,9 +20,10 @@ export default function ImageGallery({ }: ImageGalleryProps) { const intl = useIntl() const [lightboxIsOpen, setLightboxIsOpen] = useState(false) + const [imageError, setImageError] = useState(false) const imageProps = fill ? { fill } : { height, width: height * 1.5 } - if (!images || images.length === 0) { + if (!images || images.length === 0 || imageError) { return
} @@ -38,6 +39,7 @@ export default function ImageGallery({ className={styles.image} src={images[0].imageSizes.medium} alt={images[0].metaData.altText} + onError={() => setImageError(true)} {...imageProps} />
From b9ff5dc920990257f77103e05e87984d4009b219 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 14 Nov 2024 10:02:54 +0100 Subject: [PATCH 3/6] feat(SW-827): updated sidepeek width after design --- components/TempDesignSystem/SidePeek/sidePeek.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/TempDesignSystem/SidePeek/sidePeek.module.css b/components/TempDesignSystem/SidePeek/sidePeek.module.css index 68f588ab3..5fb93dc80 100644 --- a/components/TempDesignSystem/SidePeek/sidePeek.module.css +++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css @@ -1,5 +1,5 @@ .modal { - --sidepeek-desktop-width: 600px; + --sidepeek-desktop-width: 560px; } @keyframes slide-in { from { From dc988e32fa9acb69c1ea3a7271fd5a825935cdfb Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 14 Nov 2024 10:10:42 +0100 Subject: [PATCH 4/6] feat(SW-827): Added type --- components/SidePeeks/RoomSidePeek/bedIcon.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/SidePeeks/RoomSidePeek/bedIcon.ts b/components/SidePeeks/RoomSidePeek/bedIcon.ts index 41947bd77..389045159 100644 --- a/components/SidePeeks/RoomSidePeek/bedIcon.ts +++ b/components/SidePeeks/RoomSidePeek/bedIcon.ts @@ -6,7 +6,7 @@ import { KingBedSmallIcon, } from "@/components/Icons" -import { IconProps } from "@/types/components/icon" +import type { IconProps } from "@/types/components/icon" export function getBedIcon(name: string): FC | null { const iconMappings = [ From b005af5bf1ffbc5e0d83e45210cee0bd3af5855a Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 14 Nov 2024 11:05:36 +0100 Subject: [PATCH 5/6] feat(SW-827): Fixed fillRule and clipRule --- components/Icons/KingBedSmall.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Icons/KingBedSmall.tsx b/components/Icons/KingBedSmall.tsx index 711ce0f12..6c3bc9be6 100644 --- a/components/Icons/KingBedSmall.tsx +++ b/components/Icons/KingBedSmall.tsx @@ -19,8 +19,8 @@ export default function KingBedSmallIcon({ {...props} > From ff1434cd45dfa39e079a54e734c61d7349efa865 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 14 Nov 2024 14:54:27 +0100 Subject: [PATCH 6/6] feat(SW-827) fixed fillRule and clipRule --- components/Icons/BedSingle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Icons/BedSingle.tsx b/components/Icons/BedSingle.tsx index 0e9aaa68f..9ff42333a 100644 --- a/components/Icons/BedSingle.tsx +++ b/components/Icons/BedSingle.tsx @@ -19,8 +19,8 @@ export default function BedSingleIcon({ {...props} >