[feat]: details component

src/components/Detail/Detail.test.tsx

@@ -0,0 +1,50 @@
+import { screen, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { Detail } from './Detail'
+
+describe('Detail', () => {
+  it('should render the header and content', () => {
+    const header = 'Test Header'
+    const content = 'Test Content'
+    render(<Detail header={header} content={content} />)
+
+    expect(screen.getByText(header)).toBeInTheDocument()
+    expect(screen.getByText(content)).toBeInTheDocument()
+  })
+
+  it('should toggle the detailed information when the header is clicked', () => {
+    const header = 'Test Header'
+    const content = 'Test Content'
+    render(<Detail header={header} content={content} />)
+
+    const headerElement = screen.getByText(header)
+    const toggleButton = screen.getByRole('button')
+
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
+    expect(toggleButton).toHaveAttribute('title', 'Toon informatie')
+
+    userEvent.click(headerElement)
+
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true')
+    expect(toggleButton).toHaveAttribute('title', 'Verberg informatie')
+
+    userEvent.click(headerElement)
+
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
+    expect(toggleButton).toHaveAttribute('title', 'Toon informatie')
+  })
+
+  it('should render the children', () => {
+    const header = 'Test Header'
+    const content = 'Test Content'
+    const children = <div>Test Children</div>
+    render(
+      <Detail header={header} content={content}>
+        {children}
+      </Detail>
+    )
+
+    expect(screen.getByText('Test Children')).toBeInTheDocument()
+  })
+})

src/components/Detail/Detail.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+
+import {
+  Content,
+  Container,
+  StyledChevronDown as ChevronDown,
+  InvisibleButton,
+  Paragraph,
+  Header,
+  Wrapper,
+} from './styled'
+
+interface Props {
+  header: string
+  content: string
+  children?: React.ReactNode
+}
+
+export const Detail = ({ header, content, children }: Props) => {
+  const [showInfo, setShowInfo] = useState(false)
+
+  const handleOnClick = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault()
+
+    setShowInfo(!showInfo)
+  }
+
+  return (
+    <Container>
+      <Wrapper onClick={handleOnClick}>
+        <Header>{header}</Header>
+
+        <InvisibleButton
+          title={`${showInfo ? 'Verberg' : 'Toon'} informatie`}
+          aria-expanded={showInfo}
+          aria-controls="detailed-information"
+          toggle={showInfo}
+        >
+          <ChevronDown width={14} height={14} />
+        </InvisibleButton>
+      </Wrapper>
+
+      <Content id="detailed-information" visible={showInfo}>
+        <Paragraph>{content}</Paragraph>
+        {children}
+      </Content>
+    </Container>
+  )
+}

src/components/Detail/index.ts

@@ -0,0 +1 @@
+export { Detail } from './Detail'

src/components/Detail/styled.ts

@@ -0,0 +1,56 @@
+// SPDX-License-Identifier: MPL-2.0
+// Copyright (C) 2023 Gemeente Amsterdam
+import { ChevronDown } from '@amsterdam/asc-assets'
+import { themeColor, themeSpacing } from '@amsterdam/asc-ui'
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  margin: ${themeSpacing(2, 0)};
+`
+
+export const Wrapper = styled.div`
+  display: flex;
+  color: ${themeColor('primary')};
+  line-height: 1.5rem;
+  cursor: pointer;
+`
+
+export const Header = styled.header`
+  font-size: 1rem;
+  padding: ${themeSpacing(2, 2, 2, 0)};
+`
+
+export const Paragraph = styled.p`
+  margin: unset;
+`
+
+export const InvisibleButton = styled.button<{ toggle: boolean }>`
+  text-decoration: none;
+  background-color: unset;
+  color: inherit;
+  border: none;
+
+  > * {
+    transition: transform 0.25s;
+
+    ${({ toggle }) =>
+      toggle &&
+      css`
+        transform: rotate(180deg);
+      `}
+  }
+`
+
+export const StyledChevronDown = styled(ChevronDown)`
+  fill: ${themeColor('primary')};
+`
+
+export const Content = styled.div<{ visible: boolean }>`
+  display: none;
+
+  ${({ visible }) =>
+    visible &&
+    css`
+      display: block;
+    `}
+`