Scaffold FileList component

packages/css/src/components/file-list/README.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# FileList

packages/css/src/components/file-list/file-list.scss

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-file-list {
+  /* Add styles here */
+}

packages/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./file-list/file-list";
 @import "./action-group/action-group";
 @import "./breakout/breakout";
 @import "./hint/hint";

packages/react/src/FileList/FileList.test.tsx

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { FileList } from './FileList'
+import '@testing-library/jest-dom'
+
+describe('FileList', () => {
+  it('renders', () => {
+    const { container } = render(<FileList />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<FileList />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-file-list')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<FileList className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-file-list extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLDivElement>()
+
+    const { container } = render(<FileList ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})

packages/react/src/FileList/FileList.tsx

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { FileListFile } from './FileListFile'
+
+export type FileListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+export const FileListRoot = forwardRef(
+  ({ children, className, ...restProps }: FileListProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('ams-file-list', className)}>
+      {children}
+    </div>
+  ),
+)
+
+FileListRoot.displayName = 'FileList'
+
+export const FileList = Object.assign(FileListRoot, { File: FileListFile })

packages/react/src/FileList/FileListFile.test.tsx

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { FileList } from './FileList'
+import '@testing-library/jest-dom'
+
+describe('FileList', () => {
+  it('renders', () => {
+    const { container } = render(<FileList />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<FileList />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-file-list')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<FileList className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-file-list extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLDivElement>()
+
+    const { container } = render(<FileList ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})

packages/react/src/FileList/FileListFile.tsx

@@ -0,0 +1,26 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { IconProps } from '../Icon'
+import { ImageProps } from '../Image'
+
+export type FileListFileProps = {
+  thumbnail?: ImageProps['src']
+  icon: IconProps['svg']
+  removable?: boolean
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+export const FileListFile = forwardRef(
+  ({ children, className, ...restProps }: FileListFileProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('ams-file-list', className)}>
+      {children}
+    </div>
+  ),
+)
+
+FileListFile.displayName = 'FileList.File'

packages/react/src/FileList/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React FileList component
+
+[FileList documentation](../../../css/src/components/file-list/README.md)

packages/react/src/FileList/index.ts

@@ -0,0 +1,2 @@
+export { FileList } from './FileList'
+export type { FileListProps } from './FileList'

packages/react/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './FileList'
 export * from './ActionGroup'
 export * from './Breakout'
 export * from './Hint'

proprietary/tokens/src/components/ams/file-list.tokens.json

@@ -0,0 +1,5 @@
+{
+  "ams": {
+    "file-list": {}
+  }
+}

storybook/src/components/FileList/FileList.docs.mdx

@@ -0,0 +1,13 @@
+{/* @license CC0-1.0 */}
+
+import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as FileListStories from "./FileList.stories.tsx";
+import README from "../../../../packages/css/src/components/file-list/README.md?raw";
+
+<Meta of={FileListStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />

storybook/src/components/FileList/FileList.stories.tsx

@@ -0,0 +1,21 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { FileList } from '@amsterdam/design-system-react/src'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'FileList',
+  component: FileList,
+  args: {
+    children: 'Nieuw component',
+  },
+} satisfies Meta<typeof FileList>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}