From e272b1602c5ee82ebc5d9edc9e7ebc1a3bf73efd Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 3 Jul 2024 11:25:24 +0200 Subject: [PATCH 1/4] feat: added accordion component --- .../AccordionItem/accordionItem.module.css | 54 +++++++++++++++++++ .../Accordion/AccordionItem/accordionItem.ts | 9 ++++ .../Accordion/AccordionItem/index.tsx | 53 ++++++++++++++++++ .../Accordion/AccordionItem/variants.ts | 15 ++++++ .../Accordion/accordion.module.css | 11 ++++ .../TempDesignSystem/Accordion/accordion.ts | 7 +++ .../TempDesignSystem/Accordion/index.tsx | 22 ++++++++ .../TempDesignSystem/Accordion/variants.ts | 15 ++++++ 8 files changed, 186 insertions(+) create mode 100644 components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css create mode 100644 components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts create mode 100644 components/TempDesignSystem/Accordion/AccordionItem/index.tsx create mode 100644 components/TempDesignSystem/Accordion/AccordionItem/variants.ts create mode 100644 components/TempDesignSystem/Accordion/accordion.module.css create mode 100644 components/TempDesignSystem/Accordion/accordion.ts create mode 100644 components/TempDesignSystem/Accordion/index.tsx create mode 100644 components/TempDesignSystem/Accordion/variants.ts diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css new file mode 100644 index 000000000..08183a5fb --- /dev/null +++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css @@ -0,0 +1,54 @@ +.accordionItem { + border-bottom: 1px solid var(--Base-Border-Subtle); +} + +.card { + padding: var(--Spacing-x1); +} + +.card .summary { + padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); + border-radius: var(--Corner-radius-Medium); +} + +.faq .summary { + padding: var(--Spacing-x2) 0; +} + +.faq .content { + padding: 0; +} + +.summary { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--Spacing-x2); + cursor: pointer; + color: var(--Base-Text-High-contrast); + font-family: var(--typography-Body-Bold-fontFamily); + font-size: var(--typography-Body-Bold-fontSize); + font-weight: var(--typography-Body-Bold-fontWeight); + transition: background-color 0.3s; +} + +.summary:hover, +.summary:focus { + background-color: var(--Base-Surface-Primary-light-Hover); +} + +.content { + padding: 0 var(--Spacing-x-one-and-half); + overflow: hidden; + max-height: 0; + transition: max-height 0.3s; +} + +.chevron { + transition: transform 0.3s; +} + +details[open] .chevron { + transform: rotate(180deg); +} diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts new file mode 100644 index 000000000..10f7a9a76 --- /dev/null +++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts @@ -0,0 +1,9 @@ +import { VariantProps } from "class-variance-authority" + +import { accordionItemVariants } from "./variants" + +export interface AccordionItemProps + extends React.HtmlHTMLAttributes, + VariantProps { + title: string +} diff --git a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx new file mode 100644 index 000000000..16a1b276b --- /dev/null +++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx @@ -0,0 +1,53 @@ +"use client" + +import { useRef } from "react" + +import { ChevronDownIcon } from "@/components/Icons" + +import { AccordionItemProps } from "./accordionItem" +import { accordionItemVariants } from "./variants" + +import styles from "./accordionItem.module.css" + +export default function AccordionItem({ + children, + title, + variant, +}: AccordionItemProps) { + const contentRef = useRef(null) + const detailsRef = useRef(null) + + function toggleAccordion() { + const details = detailsRef.current + const content = contentRef.current + if (details && content) { + if (details.open) { + content.style.maxHeight = `${content.scrollHeight}px` + content.addEventListener( + "transitionend", + () => { + // Remove maxHeight after transition to allow content to transition multiple times + content.style.maxHeight = "none" + }, + { once: true } + ) + } else { + content.style.maxHeight = "0" + } + } + } + + return ( +
  • +
    + + {title} + + +
    + {children} +
    +
    +
    • + ) +} diff --git a/components/TempDesignSystem/Accordion/AccordionItem/variants.ts b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts new file mode 100644 index 000000000..819797a2b --- /dev/null +++ b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts @@ -0,0 +1,15 @@ +import { cva } from "class-variance-authority" + +import styles from "./accordionItem.module.css" + +export const accordionItemVariants = cva(styles.accordionItem, { + variants: { + variant: { + card: styles.card, + faq: styles.faq, + }, + }, + defaultVariants: { + variant: "card", + }, +}) diff --git a/components/TempDesignSystem/Accordion/accordion.module.css b/components/TempDesignSystem/Accordion/accordion.module.css new file mode 100644 index 000000000..42d1be85f --- /dev/null +++ b/components/TempDesignSystem/Accordion/accordion.module.css @@ -0,0 +1,11 @@ +.accordion { + list-style: none; +} + +.card { + border-radius: var(--Corner-radius-Medium); + background-color: var(--Base-Surface-Primary-light-Normal); +} +.faq { + background-color: var(--Base-Background-Primary-Normal); +} diff --git a/components/TempDesignSystem/Accordion/accordion.ts b/components/TempDesignSystem/Accordion/accordion.ts new file mode 100644 index 000000000..fa0ade85c --- /dev/null +++ b/components/TempDesignSystem/Accordion/accordion.ts @@ -0,0 +1,7 @@ +import { VariantProps } from "class-variance-authority" + +import { accordionVariants } from "./variants" + +export interface AccordionProps + extends React.HtmlHTMLAttributes, + VariantProps {} diff --git a/components/TempDesignSystem/Accordion/index.tsx b/components/TempDesignSystem/Accordion/index.tsx new file mode 100644 index 000000000..79d4c83bf --- /dev/null +++ b/components/TempDesignSystem/Accordion/index.tsx @@ -0,0 +1,22 @@ +import { Children, cloneElement, isValidElement } from "react" + +import { AccordionItemProps } from "./AccordionItem/accordionItem" +import { AccordionProps } from "./accordion" +import { accordionVariants } from "./variants" + +export default function Accordion({ + children, + className, + variant, +}: AccordionProps) { + return ( +
      + {Children.map(children, (child) => { + if (isValidElement(child)) { + return cloneElement(child, { variant }) + } + })} + {/* {children} */} +
    + ) +} diff --git a/components/TempDesignSystem/Accordion/variants.ts b/components/TempDesignSystem/Accordion/variants.ts new file mode 100644 index 000000000..354c03fba --- /dev/null +++ b/components/TempDesignSystem/Accordion/variants.ts @@ -0,0 +1,15 @@ +import { cva } from "class-variance-authority" + +import styles from "./accordion.module.css" + +export const accordionVariants = cva(styles.accordion, { + variants: { + variant: { + card: styles.card, + faq: styles.faq, + }, + }, + defaultVariants: { + variant: "card", + }, +}) From 05215b12ca01f8efa31175761193ae3df9df3f51 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 3 Jul 2024 13:07:25 +0200 Subject: [PATCH 2/4] feat: added support for icons inside accordion --- components/Icons/Accessibility.tsx | 40 +++++++ components/Icons/Bar.tsx | 36 ++++++ components/Icons/Biking.tsx | 36 ++++++ components/Icons/Coffee.tsx | 36 ++++++ components/Icons/Concierge.tsx | 40 +++++++ components/Icons/DoorOpen.tsx | 36 ++++++ components/Icons/ElectricBike.tsx | 40 +++++++ components/Icons/Fitness.tsx | 36 ++++++ components/Icons/Parking.tsx | 36 ++++++ components/Icons/Pets.tsx | 36 ++++++ components/Icons/Restaurant.tsx | 40 +++++++ components/Icons/TshirtWash.tsx | 40 +++++++ components/Icons/Wifi.tsx | 36 ++++++ components/Icons/get-icon-by-icon-name.ts | 106 ++++++++++++++++++ components/Icons/index.tsx | 13 +++ .../AccordionItem/accordionItem.module.css | 7 +- .../Accordion/AccordionItem/accordionItem.ts | 3 + .../Accordion/AccordionItem/index.tsx | 7 +- .../Accordion/accordion.module.css | 1 + .../TempDesignSystem/Accordion/index.tsx | 3 +- .../TempDesignSystem/Accordion/variants.ts | 2 +- types/components/icon.ts | 34 ++++++ 22 files changed, 659 insertions(+), 5 deletions(-) create mode 100644 components/Icons/Accessibility.tsx create mode 100644 components/Icons/Bar.tsx create mode 100644 components/Icons/Biking.tsx create mode 100644 components/Icons/Coffee.tsx create mode 100644 components/Icons/Concierge.tsx create mode 100644 components/Icons/DoorOpen.tsx create mode 100644 components/Icons/ElectricBike.tsx create mode 100644 components/Icons/Fitness.tsx create mode 100644 components/Icons/Parking.tsx create mode 100644 components/Icons/Pets.tsx create mode 100644 components/Icons/Restaurant.tsx create mode 100644 components/Icons/TshirtWash.tsx create mode 100644 components/Icons/Wifi.tsx create mode 100644 components/Icons/get-icon-by-icon-name.ts 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", +} From 37d91a23544ccc480977a3372d294dda6d14988e Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 3 Jul 2024 13:20:16 +0200 Subject: [PATCH 3/4] chore: cleanup --- .../AccordionItem/accordionItem.module.css | 35 ++++++++----------- .../Accordion/AccordionItem/variants.ts | 2 +- .../Accordion/accordion.module.css | 5 +-- 3 files changed, 19 insertions(+), 23 deletions(-) diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css index a96c3b419..fac317a58 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css +++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css @@ -2,23 +2,10 @@ border-bottom: 1px solid var(--Base-Border-Subtle); } -.card { +.accordionItem.card { padding: var(--Spacing-x1); } -.card .summary { - padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); - border-radius: var(--Corner-radius-Medium); -} - -.faq .summary { - padding: var(--Spacing-x2) 0; -} - -.faq .content { - padding: 0; -} - .summary { position: relative; display: flex; @@ -31,15 +18,21 @@ font-weight: var(--typography-Body-Bold-fontWeight); transition: background-color 0.3s; } - -.title { - flex-grow: 1; -} - .summary:hover, .summary:focus { background-color: var(--Base-Surface-Primary-light-Hover); } +.accordionItem.card .summary { + padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); + border-radius: var(--Corner-radius-Medium); +} +.accordionItem.faq .summary { + padding: var(--Spacing-x2) 0; +} + +.title { + flex-grow: 1; +} .content { padding: 0 var(--Spacing-x-one-and-half); @@ -47,11 +40,13 @@ max-height: 0; transition: max-height 0.3s; } +.accordionItem.faq .content { + padding: 0; +} .chevron { transition: transform 0.3s; } - details[open] .chevron { transform: rotate(180deg); } diff --git a/components/TempDesignSystem/Accordion/AccordionItem/variants.ts b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts index 819797a2b..f30eaaefa 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/variants.ts +++ b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts @@ -10,6 +10,6 @@ export const accordionItemVariants = cva(styles.accordionItem, { }, }, defaultVariants: { - variant: "card", + variant: "faq", }, }) diff --git a/components/TempDesignSystem/Accordion/accordion.module.css b/components/TempDesignSystem/Accordion/accordion.module.css index 3b9025ace..7e95784bd 100644 --- a/components/TempDesignSystem/Accordion/accordion.module.css +++ b/components/TempDesignSystem/Accordion/accordion.module.css @@ -2,11 +2,12 @@ list-style: none; } -.card { +.accordion.card { border-radius: var(--Corner-radius-Medium); background-color: var(--Base-Surface-Primary-light-Normal); background-color: white; } -.faq { + +.accordion.faq { background-color: var(--Base-Background-Primary-Normal); } From d0f4d07a0afc0b6c6a3f5998cd0cca47052a6731 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Thu, 4 Jul 2024 11:23:32 +0200 Subject: [PATCH 4/4] feat: changes to variants and styling --- .../AccordionItem/accordionItem.module.css | 26 +++++++++++++------ .../Accordion/AccordionItem/index.tsx | 3 ++- .../Accordion/AccordionItem/variants.ts | 9 +++++-- .../Accordion/accordion.module.css | 9 ++++--- .../TempDesignSystem/Accordion/index.tsx | 5 ++-- .../TempDesignSystem/Accordion/variants.ts | 9 +++++-- 6 files changed, 42 insertions(+), 19 deletions(-) diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css index fac317a58..234566ac5 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css +++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css @@ -6,6 +6,13 @@ padding: var(--Spacing-x1); } +.accordionItem.light { + background-color: var(--Base-Surface-Primary-Normal); +} +.accordionItem.subtle { + background-color: var(--Base-Background-Normal); +} + .summary { position: relative; display: flex; @@ -19,16 +26,22 @@ transition: background-color 0.3s; } .summary:hover, -.summary:focus { - background-color: var(--Base-Surface-Primary-light-Hover); +.accordionItem details[open] .summary { + background-color: var(--Base-Surface-Primary-light-Hover-alt, #f2ece6); } +.accordionItem.light .summary:hover, +.accordionItem.light details[open] .summary { + background-color: var(--Base-Surface-Primary-light-Hover, #f9f6f4); +} +.accordionItem.subtle .summary:hover, +.accordionItem.subtle details[open] .summary { + background-color: var(--Base-Surface-Primary-Normal); +} + .accordionItem.card .summary { padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); border-radius: var(--Corner-radius-Medium); } -.accordionItem.faq .summary { - padding: var(--Spacing-x2) 0; -} .title { flex-grow: 1; @@ -40,9 +53,6 @@ max-height: 0; transition: max-height 0.3s; } -.accordionItem.faq .content { - padding: 0; -} .chevron { transition: transform 0.3s; diff --git a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx index ccf81cd3a..84be2d010 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx +++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx @@ -14,6 +14,7 @@ export default function AccordionItem({ children, icon, title, + theme, variant, }: AccordionItemProps) { const contentRef = useRef(null) @@ -42,7 +43,7 @@ export default function AccordionItem({ } return ( -
  • +
  • {IconComp && } diff --git a/components/TempDesignSystem/Accordion/AccordionItem/variants.ts b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts index f30eaaefa..dde0e253d 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/variants.ts +++ b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts @@ -6,10 +6,15 @@ export const accordionItemVariants = cva(styles.accordionItem, { variants: { variant: { card: styles.card, - faq: styles.faq, + }, + theme: { + default: styles.default, + light: styles.light, + subtle: styles.subtle, }, }, defaultVariants: { - variant: "faq", + variant: "card", + theme: "default", }, }) diff --git a/components/TempDesignSystem/Accordion/accordion.module.css b/components/TempDesignSystem/Accordion/accordion.module.css index 7e95784bd..63529495b 100644 --- a/components/TempDesignSystem/Accordion/accordion.module.css +++ b/components/TempDesignSystem/Accordion/accordion.module.css @@ -4,10 +4,11 @@ .accordion.card { border-radius: var(--Corner-radius-Medium); - background-color: var(--Base-Surface-Primary-light-Normal); - background-color: white; } -.accordion.faq { - background-color: var(--Base-Background-Primary-Normal); +.accordion.light { + background-color: var(--Base-Surface-Primary-Normal); +} +.accordion.subtle { + background-color: var(--Base-Background-Normal); } diff --git a/components/TempDesignSystem/Accordion/index.tsx b/components/TempDesignSystem/Accordion/index.tsx index 98ba687e2..64afe99b9 100644 --- a/components/TempDesignSystem/Accordion/index.tsx +++ b/components/TempDesignSystem/Accordion/index.tsx @@ -7,13 +7,14 @@ import { accordionVariants } from "./variants" export default function Accordion({ children, className, + theme, variant, }: AccordionProps) { return ( -
      +
        {Children.map(children, (child) => { if (isValidElement(child)) { - return cloneElement(child, { variant }) + return cloneElement(child, { variant, theme }) } else { return child } diff --git a/components/TempDesignSystem/Accordion/variants.ts b/components/TempDesignSystem/Accordion/variants.ts index 7b12f74d7..6fd5b8a7f 100644 --- a/components/TempDesignSystem/Accordion/variants.ts +++ b/components/TempDesignSystem/Accordion/variants.ts @@ -6,10 +6,15 @@ export const accordionVariants = cva(styles.accordion, { variants: { variant: { card: styles.card, - faq: styles.faq, + }, + theme: { + default: styles.default, + light: styles.light, + subtle: styles.subtle, }, }, defaultVariants: { - variant: "faq", + variant: "card", + theme: "default", }, })