diff --git a/components/Icons/Accessibility.tsx b/components/Icons/Accessibility.tsx new file mode 100644 index 000000000..60d9a79d4 --- /dev/null +++ b/components/Icons/Accessibility.tsx @@ -0,0 +1,40 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function AccessibilityIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Bar.tsx b/components/Icons/Bar.tsx new file mode 100644 index 000000000..45796be66 --- /dev/null +++ b/components/Icons/Bar.tsx @@ -0,0 +1,36 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function BarIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Biking.tsx b/components/Icons/Biking.tsx new file mode 100644 index 000000000..1cc9b3b9f --- /dev/null +++ b/components/Icons/Biking.tsx @@ -0,0 +1,36 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function BikingIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Coffee.tsx b/components/Icons/Coffee.tsx new file mode 100644 index 000000000..840f78b0d --- /dev/null +++ b/components/Icons/Coffee.tsx @@ -0,0 +1,36 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function CoffeeIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Concierge.tsx b/components/Icons/Concierge.tsx new file mode 100644 index 000000000..69119a969 --- /dev/null +++ b/components/Icons/Concierge.tsx @@ -0,0 +1,40 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function ConciergeIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/DoorOpen.tsx b/components/Icons/DoorOpen.tsx new file mode 100644 index 000000000..f70c29859 --- /dev/null +++ b/components/Icons/DoorOpen.tsx @@ -0,0 +1,36 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function CoffeeIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/ElectricBike.tsx b/components/Icons/ElectricBike.tsx new file mode 100644 index 000000000..44e796cd8 --- /dev/null +++ b/components/Icons/ElectricBike.tsx @@ -0,0 +1,40 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function ElectricBikeIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Fitness.tsx b/components/Icons/Fitness.tsx new file mode 100644 index 000000000..69b965a7b --- /dev/null +++ b/components/Icons/Fitness.tsx @@ -0,0 +1,36 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function FitnessIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Parking.tsx b/components/Icons/Parking.tsx new file mode 100644 index 000000000..3680757e4 --- /dev/null +++ b/components/Icons/Parking.tsx @@ -0,0 +1,36 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function ParkingIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Pets.tsx b/components/Icons/Pets.tsx new file mode 100644 index 000000000..db832a5af --- /dev/null +++ b/components/Icons/Pets.tsx @@ -0,0 +1,36 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function PetsIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Restaurant.tsx b/components/Icons/Restaurant.tsx new file mode 100644 index 000000000..4ac06eb32 --- /dev/null +++ b/components/Icons/Restaurant.tsx @@ -0,0 +1,40 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function RestaurantIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/TshirtWash.tsx b/components/Icons/TshirtWash.tsx new file mode 100644 index 000000000..7b952490f --- /dev/null +++ b/components/Icons/TshirtWash.tsx @@ -0,0 +1,40 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function TshirtWashIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Wifi.tsx b/components/Icons/Wifi.tsx new file mode 100644 index 000000000..80d2d1000 --- /dev/null +++ b/components/Icons/Wifi.tsx @@ -0,0 +1,36 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function BarIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/get-icon-by-icon-name.ts b/components/Icons/get-icon-by-icon-name.ts new file mode 100644 index 000000000..5feab994d --- /dev/null +++ b/components/Icons/get-icon-by-icon-name.ts @@ -0,0 +1,106 @@ +import { FC } from "react" + +import { + AccessibilityIcon, + AccountCircleIcon, + ArrowRightIcon, + BarIcon, + BikingIcon, + CalendarIcon, + CellphoneIcon, + CheckCircleIcon, + CheckIcon, + ChevronDownIcon, + ChevronRightIcon, + CloseIcon, + CoffeeIcon, + ConciergeIcon, + DoorOpenIcon, + ElectricBikeIcon, + EmailIcon, + FitnessIcon, + GlobeIcon, + HouseIcon, + InfoCircleIcon, + LocationIcon, + LockIcon, + ParkingIcon, + PersonIcon, + PetsIcon, + PhoneIcon, + PlusCircleIcon, + RestaurantIcon, + TshirtWashIcon, + WifiIcon, +} from "." + +import { IconName, IconProps } from "@/types/components/icon" + +export function getIconByIconName(icon?: IconName): FC | null { + switch (icon) { + case IconName.Accessibility: + return AccessibilityIcon + case IconName.AccountCircle: + return AccountCircleIcon + case IconName.ArrowRight: + return ArrowRightIcon + case IconName.Bar: + return BarIcon + case IconName.Biking: + return BikingIcon + case IconName.Calendar: + return CalendarIcon + case IconName.Cellphone: + return CellphoneIcon + case IconName.Check: + return CheckIcon + case IconName.CheckCircle: + return CheckCircleIcon + case IconName.ChevronDown: + return ChevronDownIcon + case IconName.ChevronRight: + return ChevronRightIcon + case IconName.Close: + return CloseIcon + case IconName.Coffee: + return CoffeeIcon + case IconName.Concierge: + return ConciergeIcon + case IconName.DoorOpen: + return DoorOpenIcon + case IconName.ElectricBike: + return ElectricBikeIcon + case IconName.Email: + return EmailIcon + case IconName.Fitness: + return FitnessIcon + case IconName.Globe: + return GlobeIcon + case IconName.House: + return HouseIcon + case IconName.InfoCircle: + return InfoCircleIcon + case IconName.Location: + return LocationIcon + case IconName.Lock: + return LockIcon + case IconName.Parking: + return ParkingIcon + case IconName.Person: + return PersonIcon + case IconName.Pets: + return PetsIcon + case IconName.Phone: + return PhoneIcon + case IconName.PlusCircle: + return PlusCircleIcon + case IconName.Restaurant: + return RestaurantIcon + case IconName.TshirtWash: + return TshirtWashIcon + case IconName.Wifi: + return WifiIcon + default: + return null + } +} diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx index 7db0306cf..125925da3 100644 --- a/components/Icons/index.tsx +++ b/components/Icons/index.tsx @@ -1,5 +1,8 @@ +export { default as AccessibilityIcon } from "./Accessibility" export { default as AccountCircleIcon } from "./AccountCircle" export { default as ArrowRightIcon } from "./ArrowRight" +export { default as BarIcon } from "./Bar" +export { default as BikingIcon } from "./Biking" export { default as CalendarIcon } from "./Calendar" export { default as CellphoneIcon } from "./Cellphone" export { default as CheckIcon } from "./Check" @@ -7,12 +10,22 @@ export { default as CheckCircleIcon } from "./CheckCircle" export { default as ChevronDownIcon } from "./ChevronDown" export { default as ChevronRightIcon } from "./ChevronRight" export { default as CloseIcon } from "./Close" +export { default as CoffeeIcon } from "./Coffee" +export { default as ConciergeIcon } from "./Concierge" +export { default as DoorOpenIcon } from "./DoorOpen" +export { default as ElectricBikeIcon } from "./ElectricBike" export { default as EmailIcon } from "./Email" +export { default as FitnessIcon } from "./Fitness" export { default as GlobeIcon } from "./Globe" export { default as HouseIcon } from "./House" export { default as InfoCircleIcon } from "./InfoCircle" export { default as LocationIcon } from "./Location" export { default as LockIcon } from "./Lock" +export { default as ParkingIcon } from "./Parking" export { default as PersonIcon } from "./Person" +export { default as PetsIcon } from "./Pets" export { default as PhoneIcon } from "./Phone" export { default as PlusCircleIcon } from "./PlusCircle" +export { default as RestaurantIcon } from "./Restaurant" +export { default as TshirtWashIcon } from "./TshirtWash" +export { default as WifiIcon } from "./Wifi" diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css index 08183a5fb..a96c3b419 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css +++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css @@ -22,9 +22,8 @@ .summary { position: relative; display: flex; - justify-content: space-between; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Spacing-x1); cursor: pointer; color: var(--Base-Text-High-contrast); font-family: var(--typography-Body-Bold-fontFamily); @@ -33,6 +32,10 @@ transition: background-color 0.3s; } +.title { + flex-grow: 1; +} + .summary:hover, .summary:focus { background-color: var(--Base-Surface-Primary-light-Hover); diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts index 10f7a9a76..aebdba957 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts +++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts @@ -2,8 +2,11 @@ import { VariantProps } from "class-variance-authority" import { accordionItemVariants } from "./variants" +import { IconName } from "@/types/components/icon" + export interface AccordionItemProps extends React.HtmlHTMLAttributes, VariantProps { title: string + icon?: IconName } diff --git a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx index 16a1b276b..ccf81cd3a 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx +++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx @@ -3,6 +3,7 @@ import { useRef } from "react" import { ChevronDownIcon } from "@/components/Icons" +import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name" import { AccordionItemProps } from "./accordionItem" import { accordionItemVariants } from "./variants" @@ -11,12 +12,15 @@ import styles from "./accordionItem.module.css" export default function AccordionItem({ children, + icon, title, variant, }: AccordionItemProps) { const contentRef = useRef(null) const detailsRef = useRef(null) + const IconComp = getIconByIconName(icon) + function toggleAccordion() { const details = detailsRef.current const content = contentRef.current @@ -41,7 +45,8 @@ export default function AccordionItem({
  • - {title} + {IconComp && } + {title}
    diff --git a/components/TempDesignSystem/Accordion/accordion.module.css b/components/TempDesignSystem/Accordion/accordion.module.css index 42d1be85f..3b9025ace 100644 --- a/components/TempDesignSystem/Accordion/accordion.module.css +++ b/components/TempDesignSystem/Accordion/accordion.module.css @@ -5,6 +5,7 @@ .card { border-radius: var(--Corner-radius-Medium); background-color: var(--Base-Surface-Primary-light-Normal); + background-color: white; } .faq { background-color: var(--Base-Background-Primary-Normal); diff --git a/components/TempDesignSystem/Accordion/index.tsx b/components/TempDesignSystem/Accordion/index.tsx index 79d4c83bf..98ba687e2 100644 --- a/components/TempDesignSystem/Accordion/index.tsx +++ b/components/TempDesignSystem/Accordion/index.tsx @@ -14,9 +14,10 @@ export default function Accordion({ {Children.map(children, (child) => { if (isValidElement(child)) { return cloneElement(child, { variant }) + } else { + return child } })} - {/* {children} */} ) } diff --git a/components/TempDesignSystem/Accordion/variants.ts b/components/TempDesignSystem/Accordion/variants.ts index 354c03fba..7b12f74d7 100644 --- a/components/TempDesignSystem/Accordion/variants.ts +++ b/components/TempDesignSystem/Accordion/variants.ts @@ -10,6 +10,6 @@ export const accordionVariants = cva(styles.accordion, { }, }, defaultVariants: { - variant: "card", + variant: "faq", }, }) diff --git a/types/components/icon.ts b/types/components/icon.ts index bb2030a17..1885c221c 100644 --- a/types/components/icon.ts +++ b/types/components/icon.ts @@ -5,3 +5,37 @@ import { iconVariants } from "@/components/Icons/variants" export interface IconProps extends Omit, "color">, VariantProps {} + +export enum IconName { + Accessibility = "Accessibility", + AccountCircle = "AccountCircle", + ArrowRight = "ArrowRight", + Bar = "Bar", + Biking = "Biking", + Calendar = "Calendar", + Cellphone = "Cellphone", + Check = "Check", + CheckCircle = "CheckCircle", + ChevronDown = "ChevronDown", + ChevronRight = "ChevronRight", + Close = "Close", + Coffee = "Coffee", + Concierge = "Concierge", + DoorOpen = "DoorOpen", + ElectricBike = "ElectricBike", + Email = "Email", + Fitness = "Fitness", + Globe = "Globe", + House = "House", + InfoCircle = "InfoCircle", + Location = "Location", + Lock = "Lock", + Parking = "Parking", + Person = "Person", + Pets = "Pets", + Phone = "Phone", + PlusCircle = "PlusCircle", + Restaurant = "Restaurant", + TshirtWash = "TshirtWash", + Wifi = "Wifi", +}