Merge pull request #764 from Amsterdam/WON-67-update-wonen-ui-expanda…

…ble-content

Add ExpandableContainer component and integrate it into HolidayRental…

src/components/Data/ExpandableContainer/ExpandableContainer.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode, useState } from "react"
+import styled from "styled-components"
+import { Button, Icon } from "@amsterdam/asc-ui"
+import { ExpandMore } from "../../Icons"
+
+export type StyleProps = {
+  isOpen?: boolean
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  React.HTMLAttributes<HTMLDivElement>;
+
+export const StyledExpandableButton = styled(Button)<StyleProps>`
+  position: relative;
+  width: 100%;
+  height: initial;
+  background-color: transparent;
+  padding: 12px 0;
+  font-size: 18px;
+  &:hover,
+  &:focus {
+    background-color: transparent;
+  }
+  span {
+    span {
+      transform: rotate(${ ({ isOpen }) => (isOpen ? "180deg" : "0deg") });
+      transition: transform 0.3s ease;
+    }
+  }
+` 
+
+export const StyledExpandableContent = styled.div<StyleProps>`
+  transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
+  opacity: ${ ({ isOpen }) => (isOpen ? 1 : 0) };
+  max-height: ${ ({ isOpen }) => (isOpen ? "1000px" : "0") }; 
+  overflow: hidden;
+  position: relative;
+`
+
+const StyledDiv = styled.div`
+  margin-bottom: 12px;
+`
+
+type Props = {
+  title: string
+  children: ReactNode
+  defaultOpen?: boolean 
+}
+
+const ExpandableContainer: React.FC<Props> = ({ title, children, defaultOpen = false }) => {
+  const [open, setOpen] = useState(defaultOpen)
+
+  const onClick = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <StyledDiv>
+      <StyledExpandableButton 
+        aria-expanded={open}
+        isOpen={open}
+        type="button"
+        variant="blank"
+        iconRight={<Icon size={20}><ExpandMore /></Icon>}
+        onClick={onClick}
+      >
+        { title }
+      </StyledExpandableButton>
+      <StyledExpandableContent isOpen={open}>
+        { children }
+      </StyledExpandableContent>
+    </StyledDiv>    
+  )
+}
+
+export default ExpandableContainer

src/components/EventsTimeline/components/Timeline/TimelineStyle.tsx

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components"
 import { themeColor, themeSpacing, breakpoint, Icon, Button } from "@amsterdam/asc-ui"
-import { IconStyle } from "@amsterdam/asc-ui/lib/components/Icon"
 
 export type Props = {
   isOpen?: boolean
@@ -106,11 +105,12 @@ const NestedContainer = styled.div<Props>`
 `
 
 const TimelineContent = styled.div<Props>`
-  transition: border-color 0.1s ease-in-out;
-  border: none;
-  padding: ${ themeSpacing(4) } 0;
+  transition: opacity 0.3s ease-in-out, max-height 0.5s ease-in-out;
+  opacity: ${ ({ isOpen }) => (isOpen ? 1 : 0) };
+  max-height: ${ ({ isOpen }) => (isOpen ? "1000px" : "0") }; /* Adjust 500px based on your content */
+  overflow: hidden;
+  padding: ${ ({ isOpen }) => (isOpen ? "16px 0" : "0") };
   position: relative;
-  display: ${ ({ isOpen }) => !isOpen && "none" };
 `
 
 const TimelineButtonContent = styled.span`
@@ -137,12 +137,11 @@ const TimelineButton = styled(Button)<Props>`
       border: 0;
     }
   }
-  // TODO This doesn't seem to do anything
-  ${ IconStyle } {
-    align-self: flex-start;
-    transform: rotate(${ ({ isOpen }) => (isOpen ? "180deg" : "0deg") });
-    transition: transform 0.3s ease;
-    width: 14px;
+  span {
+    span {
+      transform: rotate(${ ({ isOpen }) => (isOpen ? "180deg" : "0deg") });
+      transition: transform 0.3s ease;
+    }
   }
 `
 

src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx

@@ -9,6 +9,7 @@ type Props = {
   horizontalBordered?: boolean
   loading?: boolean
   loadingRows?: number
+  defaultOpen?: boolean 
 }
 
 /**
@@ -19,7 +20,8 @@ const HolidayRentalRegistrations: React.FC<Props> = ({
   data,
   horizontalBordered = true,
   loading = false,
-  loadingRows
+  loadingRows,
+  defaultOpen
 }) => {
   if (loading) {
     return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner data-testid="spinner"/>
@@ -35,6 +37,7 @@ const HolidayRentalRegistrations: React.FC<Props> = ({
               key={registration.registrationNumber}
               registration={registration}
               horizontalBordered={horizontalBordered}
+              defaultOpen={defaultOpen}
             />
           ))}
         </>

src/components/HolidayRentalRegistrations/components/Registration.tsx

@@ -1,29 +1,28 @@
 import React from "react"
-import styled from "styled-components"
-import DefinitionList  from "../../Data/DefinitionList/DefinitionList"
+import DefinitionList from "../../Data/DefinitionList/DefinitionList"
+import ExpandableContainer from "../../Data/ExpandableContainer/ExpandableContainer"
 import useValues from "./hooks/useValues"
 import type { HolidayRentalRegistration } from "../types"
 
 type Props = {
   registration: HolidayRentalRegistration
   horizontalBordered?: boolean
+  defaultOpen?: boolean
 }
 
-const StyledDiv = styled.div`
-  margin-top: 12px;
-`
+const Registration: React.FC<Props> = ({ registration, horizontalBordered, defaultOpen }) => {
+  const values = useValues(registration)
 
-const Registration: React.FC<Props> = ({ registration, horizontalBordered }) => {
-  const values = useValues(registration) 
   return (
-    <StyledDiv>
-      <DefinitionList 
-        title={ `Registratie (${ registration.registrationNumber })` }
-        data={ values }
-        horizontalBordered={ horizontalBordered }
-        headingSize="h4"
-      /> 
-    </StyledDiv>    
+    <ExpandableContainer 
+      title={`Registratie (${ registration.registrationNumber })`}  
+      defaultOpen={defaultOpen}
+    >
+      <DefinitionList
+        data={values}
+        horizontalBordered={horizontalBordered}
+      />
+    </ExpandableContainer>
   )
 }
 

src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx

@@ -2,9 +2,10 @@ import React from "react"
 import type { HolidayRentalRegistration } from "../../types"
 import DateDisplay from "../../../DateDisplay/DateDisplay"
 
-const formatRequester = (requester: HolidayRentalRegistration["requester"]) => {
-  const { personalDetails } = requester
-  const name = `${ personalDetails?.firstName ?? "" } ${ personalDetails?.lastNamePrefix ? `${ personalDetails?.lastNamePrefix } ` : "" }${ personalDetails?.lastName ?? "" }`
+const formatPersonName = (personalDetails: Record<string, any>) => {
+  if (!personalDetails) return ""
+  const { firstName, lastNamePrefix, lastName } = personalDetails
+  const name = `${ firstName ?? "" } ${ lastNamePrefix ? `${ lastNamePrefix } ` : "" }${ lastName ?? "" }`
   return name
 }
 
@@ -13,18 +14,21 @@ export default (registration: HolidayRentalRegistration) => {
     requester,
     agreementDate,
     createdAt,
-    requestForBedAndBreakfast
+    requestForBedAndBreakfast,
+    rentalHouse: { owner }
   } = registration
 
-  const requesterName = formatRequester(requester)
-
-  const values = {
-    "Aanvrager": requesterName,
+  const values: Record<string, any> = {
+    "Aanvrager": formatPersonName(requester?.personalDetails),
     "E-mail": requester?.email,
     "Aangemaakt": <DateDisplay date={createdAt} emptyText="-" />,
     "Overeenkomst": <DateDisplay date={agreementDate} emptyText="-" />,
     "B&B verzoek": requestForBedAndBreakfast ? "Ja" : "Nee"
   }
 
+  if (owner?.personalDetails) {
+    values["Aangevraagd voor"] = formatPersonName(owner?.personalDetails)
+  }
+
   return values
 }

src/stories/HolidayRentalRegistrations.stories.tsx

@@ -15,6 +15,7 @@ export const Default: Story = {
   args: {
     data: holidayRentalRegistrationsData,
     horizontalBordered: true,
-    loading: false
+    loading: false,
+    defaultOpen: true
   }
 }