Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Figure component #1795

Merged
merged 12 commits into from
Dec 20, 2024
Merged
Next Next commit
Initialize new Figure component
VincentSmedinga committed Dec 17, 2024
commit a51ad855ec3f6d7e29a870f566957ed78b201d99
3 changes: 3 additions & 0 deletions packages/css/src/components/figure/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- @license CC0-1.0 -->

# Figure
8 changes: 8 additions & 0 deletions packages/css/src/components/figure/figure.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/

.ams-figure {
/* Add styles here */
}
1 change: 1 addition & 0 deletions packages/css/src/components/index.scss
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@
*/

/* Append here */
@use "./figure/figure";
alimpens marked this conversation as resolved.
Show resolved Hide resolved
@use "file-list/file-list";
@use "action-group/action-group";
@use "breakout/breakout";
41 changes: 41 additions & 0 deletions packages/react/src/Figure/Figure.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { render, screen } from '@testing-library/react'
import { createRef } from 'react'
import { Figure } from './Figure'
import '@testing-library/jest-dom'

describe('Figure', () => {
it('renders', () => {
render(<Figure />)

const component = screen.getByRole('figure')

expect(component).toBeInTheDocument()
expect(component).toBeVisible()
})

it('renders a design system BEM class name', () => {
render(<Figure />)

const component = screen.getByRole('figure')

expect(component).toHaveClass('ams-figure')
})

it('renders an additional class name', () => {
render(<Figure className="extra" />)

const component = screen.getByRole('figure')

expect(component).toHaveClass('ams-figure extra')
})

it('supports ForwardRef in React', () => {
const ref = createRef<HTMLElement>()

render(<Figure ref={ref} />)

const component = screen.getByRole('figure')

expect(ref.current).toBe(component)
})
})
alimpens marked this conversation as resolved.
Show resolved Hide resolved
20 changes: 20 additions & 0 deletions packages/react/src/Figure/Figure.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/

import clsx from 'clsx'
import { forwardRef } from 'react'
import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'

export type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>

export const Figure = forwardRef(
({ children, className, ...restProps }: FigureProps, ref: ForwardedRef<HTMLElement>) => (
<figure {...restProps} ref={ref} className={clsx('ams-figure', className)}>
{children}
</figure>
),
)

Figure.displayName = 'Figure'
5 changes: 5 additions & 0 deletions packages/react/src/Figure/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<!-- @license CC0-1.0 -->

# React Figure component

[Figure documentation](../../../css/src/components/figure/README.md)
2 changes: 2 additions & 0 deletions packages/react/src/Figure/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { Figure } from './Figure'
export type { FigureProps } from './Figure'
1 change: 1 addition & 0 deletions packages/react/src/index.ts
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@
*/

/* Append here */
export * from './Figure'
export * from './FileList'
export * from './ActionGroup'
export * from './Breakout'
5 changes: 5 additions & 0 deletions proprietary/tokens/src/components/ams/figure.tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"ams": {
"figure": {}
}
}
13 changes: 13 additions & 0 deletions storybook/src/components/Figure/Figure.docs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{/* @license CC0-1.0 */}

import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
import * as FigureStories from "./Figure.stories.tsx";
import README from "../../../../packages/css/src/components/figure/README.md?raw";

<Meta of={FigureStories} />

<Markdown>{README}</Markdown>

<Primary />

<Controls />
21 changes: 21 additions & 0 deletions storybook/src/components/Figure/Figure.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/

import { Figure } from '@amsterdam/design-system-react/src'
import { Meta, StoryObj } from '@storybook/react'

const meta = {
title: 'Components/Media/Figure',
component: Figure,
args: {
children: 'Nieuw component',
},
} satisfies Meta<typeof Figure>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {}