From c5eb642cae800e5522cd41504c06a9e210355629 Mon Sep 17 00:00:00 2001 From: Mees Work Date: Wed, 2 Oct 2024 15:28:58 +0200 Subject: [PATCH 01/12] WIP: first version of file-input --- packages/components-css/file-input/index.scss | 42 ++++++++ packages/components-css/index.scss | 1 + packages/components-react/src/FileInput.tsx | 70 ++++++++++++++ .../components-react/src/FileInputItem.tsx | 64 +++++++++++++ packages/components-react/src/index.ts | 1 + .../src/community/file-input.stories.tsx | 96 +++++++++++++++++++ .../design-tokens/figma/figma.tokens.json | 61 ++++++++++++ 7 files changed, 335 insertions(+) create mode 100644 packages/components-css/file-input/index.scss create mode 100644 packages/components-react/src/FileInput.tsx create mode 100644 packages/components-react/src/FileInputItem.tsx create mode 100644 packages/storybook/src/community/file-input.stories.tsx diff --git a/packages/components-css/file-input/index.scss b/packages/components-css/file-input/index.scss new file mode 100644 index 00000000..597feeb7 --- /dev/null +++ b/packages/components-css/file-input/index.scss @@ -0,0 +1,42 @@ +.rhc-file-input { + display: flex; + flex-direction: column; + gap: var(--rhc-file-input-column-gap); +} + +.rhc-file-input__item { + border-color: var(--rhc-file-input-item-border-color); + border-radius: var(--rhc-file-input-item-border-radius); + border-style: var(--rhc-file-input-item-border-style); + display: flex; + flex-direction: column; + padding-block-end: var(--rhc-file-input-item-padding-block-end); + padding-block-start: var(--rhc-file-input-item-padding-block-start); + padding-inline-end: var(--rhc-file-input-item-padding-inline-end); + padding-inline-start: var(--rhc-file-input-item-padding-inline-start); +} + +.rhc-file-input__item--error { + border-color: var(--rhc-file-input-item-error-border-color); +} + +.rhc-file-input__item--subtitle { + color: var(--rhc-file-input-item-subtitle-color); +} + +.rhc-file-input__items-container { + display: flex; + flex-direction: column; + gap: var(--rhc-file-input-item-column-gap); +} + +.rhc-file-input__inner-container { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.rhc-file-input__inner-container__sub { + display: flex; + flex-direction: column; +} diff --git a/packages/components-css/index.scss b/packages/components-css/index.scss index f1340fb1..aeb13ff5 100644 --- a/packages/components-css/index.scss +++ b/packages/components-css/index.scss @@ -11,6 +11,7 @@ @import "breadcrumb-nav/index"; @import "button/index"; @import "checkbox/index"; +@import "file-input/index"; @import "form/index"; @import "form-field/index"; @import "form-field-error-message/index"; diff --git a/packages/components-react/src/FileInput.tsx b/packages/components-react/src/FileInput.tsx new file mode 100644 index 00000000..2dfac988 --- /dev/null +++ b/packages/components-react/src/FileInput.tsx @@ -0,0 +1,70 @@ +import { ChangeEvent, ForwardedRef, forwardRef, PropsWithChildren, useRef, useState } from 'react'; +import { Button, ButtonProps } from './Button'; +import { FileInputItem } from './FileInputItem'; + +export interface FileInputProps extends Omit { + buttonText: string; + buttonAppearance?: ButtonProps['appearance']; + maxFileSizeInBytes: number; + allowedFileTypes: string; + fileSizeErrorMessage: string; + fileTypeErrorMessage: string; +} + +export const FileInput = forwardRef( + ( + { + children, + buttonText, + maxFileSizeInBytes, + allowedFileTypes, + buttonAppearance, + fileSizeErrorMessage, + fileTypeErrorMessage, + }: PropsWithChildren, + ref: ForwardedRef, + ) => { + const [files, setFiles] = useState([]); + const inputElement = useRef(null); + const onChange = (newFiles: FileList | null) => newFiles && setFiles([...files, ...Array.from(newFiles)]); + + return ( +
+ {children} + ) => { + onChange(event.target.files); + }} + /> + +
+ {files.map((item: File) => { + return ( + setFiles(files.filter((file) => file !== fileToRemove))} + /> + ); + })} +
+
+ ); + }, +); + +FileInput.displayName = 'File-input'; diff --git a/packages/components-react/src/FileInputItem.tsx b/packages/components-react/src/FileInputItem.tsx new file mode 100644 index 00000000..8abec6f4 --- /dev/null +++ b/packages/components-react/src/FileInputItem.tsx @@ -0,0 +1,64 @@ +import { Button } from '@utrecht/component-library-react'; +import clsx from 'clsx'; +import { Alert } from './Alert'; +import { Icon } from './icon/Icon'; + +interface FileInputItemProps { + file: File; + onDelete: any; + maxFileSizeInBytes: number; + allowedFileTypes: string; + fileSizeErrorMessage: string; + fileTypeErrorMessage: string; +} + +export const FileInputItem = ({ + file, + onDelete, + maxFileSizeInBytes, + allowedFileTypes, + fileSizeErrorMessage, + fileTypeErrorMessage, +}: FileInputItemProps) => { + const extractFileTypeShort = (fileType: string): string => fileType.split('/')[1]; + let error: boolean = false; + let errorMessage: string = ''; + + const checkFileSize = (file: File) => + file.size <= maxFileSizeInBytes || ((errorMessage = fileSizeErrorMessage), (error = true), false); + + const checkFileType = (file: File) => + allowedFileTypes.split(',').includes(`.${extractFileTypeShort(file.type)}`) || + ((errorMessage = fileTypeErrorMessage), (error = true), false); + + const formatBytes = (bytes: number): string => { + const kilobytes: number = bytes / 1024; + const megabytes: number = kilobytes / 1024; + + return megabytes >= 1 ? `${megabytes.toFixed(1)} MB` : `${kilobytes.toFixed(1)} KB`; + }; + + return ( +
+
+
+ {file.name} + + ({extractFileTypeShort(file.type)}, {formatBytes(file.size)}) + +
+ + + +
+ {error && } +
+ ); +}; diff --git a/packages/components-react/src/index.ts b/packages/components-react/src/index.ts index d2760a88..103536c9 100644 --- a/packages/components-react/src/index.ts +++ b/packages/components-react/src/index.ts @@ -36,6 +36,7 @@ export { } from './Button'; export { Checkbox, type CheckboxProps } from './Checkbox'; export { CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup'; +export { FileInput, type FileInputProps } from './FileInput'; export { Footer } from './Footer'; export { FormFieldCheckboxGroup, type FormFieldCheckboxGroupProps } from './FormFieldCheckboxGroup'; export { FormFieldCheckboxOption, type FormFieldCheckboxOptionProps } from './FormFieldCheckboxOption'; diff --git a/packages/storybook/src/community/file-input.stories.tsx b/packages/storybook/src/community/file-input.stories.tsx new file mode 100644 index 00000000..1afa3904 --- /dev/null +++ b/packages/storybook/src/community/file-input.stories.tsx @@ -0,0 +1,96 @@ +import { + AccordionProvider, + FileInput, + FormLabel, + Heading, + Paragraph, + UnorderedList, + UnorderedListItem, +} from '@rijkshuisstijl-community/components-react'; +import { Meta, StoryObj } from '@storybook/react/*'; + +const meta = { + title: 'Rijkshuisstijl/FileInput', + id: 'rhc-fileInput', + component: FileInput, + argTypes: { + buttonAppearance: { + control: { type: 'select' }, + options: ['primary-action-button', 'secondary-action-button', 'subtle-button'], + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: [], + buttonText: 'Bestanden kiezen', + maxFileSizeInBytes: 10_485_760, + allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', + fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', + fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', + }, +}; + +export const MetCustomElementenLijst: Story = { + args: { + children: [ +
+ Bestand toevoegen + + U kunt meerdere bestanden tegelijk toevoegen. + Een bestand mag maximaal 10MB groot zijn. + + Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bmp en gif. + + +
, + ], + buttonText: 'Bestanden kiezen', + maxFileSizeInBytes: 10_485_760, + allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', + fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', + fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', + }, +}; + +export const MetCustomElementenParagraafEnAccordion: Story = { + args: { + children: [ +
+ Bestanden uploaden + Hier kan je meerdere bestanden uploaden. Bestanden mogen niet groter dan 10 MB zijn. + + .doc + .docx + .xlsx + .pdf + .zip + .jpg + .png + .bmp + .gif + , + ], + }, + ]} + /> +
, + ], + buttonText: 'Bestanden kiezen', + maxFileSizeInBytes: 10_485_760, + allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', + fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', + fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', + }, +}; diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json index abf76114..fc45a052 100644 --- a/proprietary/design-tokens/figma/figma.tokens.json +++ b/proprietary/design-tokens/figma/figma.tokens.json @@ -2844,6 +2844,66 @@ } } }, + "components/file-input": { + "rhc": { + "file-input": { + "column-gap": { + "value": "{rhc.space.150}", + "type": "spacing" + }, + "item": { + "border-style": { + "value": "solid", + "type": "borderStyle" + }, + "border-color": { + "value": "{rhc.color.lintblauw.500}", + "type": "color" + }, + "border-width": { + "value": "{rhc.border-width.default}", + "type": "borderWidth" + }, + "border-radius": { + "value": "{rhc.border-radius.md}", + "type": "borderRadius" + }, + "padding-inline-start": { + "value": "{rhc.space.200}", + "type": "spacing" + }, + "padding-inline-end": { + "value": "{rhc.space.200}", + "type": "spacing" + }, + "padding-block-start": { + "value": "{rhc.space.150}", + "type": "spacing" + }, + "padding-block-end": { + "value": "{rhc.space.150}", + "type": "spacing" + }, + "column-gap": { + "value": "{rhc.space.50}", + "type": "spacing" + }, + "error": { + "border-color": { + "value": "{rhc.color.feedback.error.default}", + "type": "color" + } + }, + "subtitle": { + "color": { + "value": "{rhc.color.grijs.500}", + "type": "color" + } + } + } + } + } + }, "components/footer": { "utrecht": { "page": { @@ -5894,6 +5954,7 @@ "components/counter-badge", "components/drawer", "components/figure", + "components/file-input", "components/footer", "components/form-field", "components/form-field-checkbox-option", From 63d347bac52c4435d2ecb315c5a7fc490374ae89 Mon Sep 17 00:00:00 2001 From: Mees Work Date: Thu, 3 Oct 2024 09:24:36 +0200 Subject: [PATCH 02/12] feat: added parent callback --- packages/components-react/src/FileInput.tsx | 12 +++++++++++- .../src/community/file-input.stories.tsx | 19 +++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/components-react/src/FileInput.tsx b/packages/components-react/src/FileInput.tsx index 2dfac988..ca76a0ec 100644 --- a/packages/components-react/src/FileInput.tsx +++ b/packages/components-react/src/FileInput.tsx @@ -9,6 +9,7 @@ export interface FileInputProps extends Omit { allowedFileTypes: string; fileSizeErrorMessage: string; fileTypeErrorMessage: string; + onFilesChange?: (callbackFiles: File[]) => void; // eslint-disable-line no-unused-vars } export const FileInput = forwardRef( @@ -21,12 +22,21 @@ export const FileInput = forwardRef( buttonAppearance, fileSizeErrorMessage, fileTypeErrorMessage, + onFilesChange, }: PropsWithChildren, ref: ForwardedRef, ) => { const [files, setFiles] = useState([]); const inputElement = useRef(null); - const onChange = (newFiles: FileList | null) => newFiles && setFiles([...files, ...Array.from(newFiles)]); + const onChange = (newFiles: FileList | null) => { + if (newFiles) { + const updatedFiles = [...files, ...Array.from(newFiles)]; + setFiles(updatedFiles); + if (onFilesChange) { + onFilesChange(updatedFiles); + } + } + }; return (
diff --git a/packages/storybook/src/community/file-input.stories.tsx b/packages/storybook/src/community/file-input.stories.tsx index 1afa3904..b45d958e 100644 --- a/packages/storybook/src/community/file-input.stories.tsx +++ b/packages/storybook/src/community/file-input.stories.tsx @@ -94,3 +94,22 @@ export const MetCustomElementenParagraafEnAccordion: Story = { fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', }, }; + +export const MetCallback: Story = { + args: { + children: [ + + Dit component heeft een callbackfunctie genaamd 'onFilesChange'. Hiermee kan de parent component op de + hoogte worden gesteld zodra er een nieuw bestand is toegevoegd. Zie de console voor de waarden. + , + ], + buttonText: 'Bestanden kiezen', + maxFileSizeInBytes: 10_485_760, + allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', + fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', + fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', + onFilesChange: (files: File[]) => { + console.log('Callback bestanden: ', files); + }, + }, +}; From 8c8de28c42ea2dd018373bd9d797e5e85cb23bef Mon Sep 17 00:00:00 2001 From: Mees Work Date: Tue, 8 Oct 2024 10:04:19 +0200 Subject: [PATCH 03/12] feat: added tests --- .../components-react/src/FileInput.test.tsx | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 packages/components-react/src/FileInput.test.tsx diff --git a/packages/components-react/src/FileInput.test.tsx b/packages/components-react/src/FileInput.test.tsx new file mode 100644 index 00000000..e308c674 --- /dev/null +++ b/packages/components-react/src/FileInput.test.tsx @@ -0,0 +1,104 @@ +import '@testing-library/jest-dom'; + +import { fireEvent, render, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { FileInput, FileInputProps } from './FileInput'; + +describe('Form field with a textbox', () => { + const defaultProps: FileInputProps = { + buttonText: 'Bestanden kiezen', + maxFileSizeInBytes: 10_485_760, + allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', + fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', + fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', + }; + + it('renders the FileInput element', () => { + const { container } = render(); + + const field = container.querySelector('div'); + + expect(field).toBeInTheDocument(); + expect(field?.className).toEqual('rhc-file-input'); + }); + + it('should be able to upload one file', async () => { + const mockOnFileChange = jest.fn(); + + const propsTest: FileInputProps = { + buttonText: 'Bestanden kiezen', + maxFileSizeInBytes: 10_485_760, + allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', + fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', + fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', + onFilesChange: mockOnFileChange, + }; + + const { container } = render(); + + const file = new File(['dummy content'], 'example.png', { type: 'image/png' }); + const fileInput = container.querySelector('input'); + + await waitFor(() => + fireEvent.change(fileInput!, { + target: { files: [file] }, + }), + ); + + expect(mockOnFileChange).toHaveBeenCalledTimes(1); + expect(fileInput!.files![0].name).toBe(file.name); + }); + + it('should be able to upload multiple files in once', async () => { + const mockOnFileChange = jest.fn(); + + const propsTest: FileInputProps = { + buttonText: 'Bestanden kiezen', + maxFileSizeInBytes: 10_485_760, + allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', + fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', + fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', + onFilesChange: mockOnFileChange, + }; + + const { container } = render(); + + const fileOne = new File(['dummy content'], 'exampleOne.png', { type: 'image/png' }); + const fileTwo = new File(['dummy content'], 'exampleTwo.png', { type: 'image/png' }); + + const fileInput = container.querySelector('input'); + + await waitFor(() => + fireEvent.change(fileInput!, { + target: { files: [fileOne, fileTwo] }, + }), + ); + + expect(mockOnFileChange).toHaveBeenCalledTimes(1); + expect(fileInput!.files![0].name).toBe(fileOne.name); + expect(fileInput!.files![1].name).toBe(fileTwo.name); + }); + + it('should not accept files not in the list', async () => { + const mockOnFileChange = jest.fn(); + + const propsTest: FileInputProps = { + buttonText: 'Bestanden kiezen', + maxFileSizeInBytes: 10_485_760, + allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.bmp,.gif', // Removed .png from allow list + fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', + fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', + onFilesChange: mockOnFileChange, + }; + + const { container } = render(); + + const fileOne = new File(['dummy content'], 'exampleOne.png', { type: 'image/png' }); + + const fileInput = container.querySelector('input'); + + await waitFor(() => userEvent.upload(fileInput!, fileOne)); + + expect(mockOnFileChange).toHaveBeenCalledTimes(0); + }); +}); From 13bbab368b0eeca66c08f1a24ac5fd915eb66cc9 Mon Sep 17 00:00:00 2001 From: Mees Work Date: Tue, 8 Oct 2024 10:56:48 +0200 Subject: [PATCH 04/12] template: added fileInput to template --- apps/rhc-templates/src/app/form/page.tsx | 36 +++++++++++-------- .../src/community/file-input.stories.tsx | 2 +- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/apps/rhc-templates/src/app/form/page.tsx b/apps/rhc-templates/src/app/form/page.tsx index d78898ce..a27e2a1e 100644 --- a/apps/rhc-templates/src/app/form/page.tsx +++ b/apps/rhc-templates/src/app/form/page.tsx @@ -21,8 +21,12 @@ import { FormFieldRadioOption, FormFieldCheckboxOption, Icon, + FileInput, + UnorderedList, + UnorderedListItem, } from '@rijkshuisstijl-community/components-react'; -// import { DateInput, FileInput } from '@amsterdam/design-system-react'; +import { FormLabel } from '@utrecht/component-library-react'; +// import { DateInput } from '@amsterdam/design-system-react'; export default function Form() { return ( @@ -101,20 +105,22 @@ export default function Form() {
- {/* -
- - - U kunt meerdere bestanden tegelijk toevoegen. - U mag maximaal 10 Mb aan bestanden toevoegen. - - Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bpm en gif. - - - - -
- */} + + Bestand toevoegen + + U kunt meerdere bestanden tegelijk toevoegen. + Een bestand mag maximaal 10MB groot zijn. + + Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bmp en gif. + + + Informatie over de verwerking van uw persoonsgegevens Wij gebruiken gegevens die u heeft ingevuld om uw vraag te beantwoorden. Daarna worden ze volgens in de diff --git a/packages/storybook/src/community/file-input.stories.tsx b/packages/storybook/src/community/file-input.stories.tsx index b45d958e..b5252eff 100644 --- a/packages/storybook/src/community/file-input.stories.tsx +++ b/packages/storybook/src/community/file-input.stories.tsx @@ -1,13 +1,13 @@ import { AccordionProvider, FileInput, - FormLabel, Heading, Paragraph, UnorderedList, UnorderedListItem, } from '@rijkshuisstijl-community/components-react'; import { Meta, StoryObj } from '@storybook/react/*'; +import { FormLabel } from '@utrecht/component-library-react'; const meta = { title: 'Rijkshuisstijl/FileInput', From f47ae65acbb88d02e47a03e9fa40a2883211e169 Mon Sep 17 00:00:00 2001 From: Mees Work Date: Tue, 8 Oct 2024 11:06:02 +0200 Subject: [PATCH 05/12] fix: added rhc --- packages/components-react/src/FileInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components-react/src/FileInput.tsx b/packages/components-react/src/FileInput.tsx index ca76a0ec..1a54c476 100644 --- a/packages/components-react/src/FileInput.tsx +++ b/packages/components-react/src/FileInput.tsx @@ -57,7 +57,7 @@ export const FileInput = forwardRef( > {buttonText} -
+
{files.map((item: File) => { return ( Date: Tue, 8 Oct 2024 11:23:15 +0200 Subject: [PATCH 06/12] docs: added documentation --- packages/storybook/src/community/file-input.md | 7 +++++++ packages/storybook/src/community/file-input.stories.tsx | 8 ++++++++ 2 files changed, 15 insertions(+) create mode 100644 packages/storybook/src/community/file-input.md diff --git a/packages/storybook/src/community/file-input.md b/packages/storybook/src/community/file-input.md new file mode 100644 index 00000000..91a57633 --- /dev/null +++ b/packages/storybook/src/community/file-input.md @@ -0,0 +1,7 @@ +# Rijkshuisstijl Community File Input component + +Met het `fileInput` component kunnen gebruikers meerdere bestanden uploaden. + +Het component accepteert `children` en kan dus op verschillende manier worden gestyled. + +Dit component heeft een callbackfunctie genaamd `onFilesChange`. Hiermee kan de parent component op de hoogte worden gesteld zodra er een nieuw bestand is toegevoegd. diff --git a/packages/storybook/src/community/file-input.stories.tsx b/packages/storybook/src/community/file-input.stories.tsx index b5252eff..133ca558 100644 --- a/packages/storybook/src/community/file-input.stories.tsx +++ b/packages/storybook/src/community/file-input.stories.tsx @@ -8,6 +8,7 @@ import { } from '@rijkshuisstijl-community/components-react'; import { Meta, StoryObj } from '@storybook/react/*'; import { FormLabel } from '@utrecht/component-library-react'; +import readme from './file-input.md?raw'; const meta = { title: 'Rijkshuisstijl/FileInput', @@ -19,6 +20,13 @@ const meta = { options: ['primary-action-button', 'secondary-action-button', 'subtle-button'], }, }, + parameters: { + docs: { + description: { + component: readme, + }, + }, + }, } satisfies Meta; export default meta; From e56d9c745af7f82d38320b68cd1ea0c2a711a81d Mon Sep 17 00:00:00 2001 From: Mees Work Date: Tue, 8 Oct 2024 11:32:55 +0200 Subject: [PATCH 07/12] css: added ellipses to file name --- packages/components-css/file-input/index.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components-css/file-input/index.scss b/packages/components-css/file-input/index.scss index 597feeb7..fef5d8f5 100644 --- a/packages/components-css/file-input/index.scss +++ b/packages/components-css/file-input/index.scss @@ -40,3 +40,9 @@ display: flex; flex-direction: column; } + +.rhc-file-input__item--name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} From 75d67e81c40676be5d2471f208b5b8ff79f8d919 Mon Sep 17 00:00:00 2001 From: Mees Work Date: Mon, 14 Oct 2024 15:04:29 +0200 Subject: [PATCH 08/12] review: spacing en const toegevoegd --- apps/rhc-templates/src/app/form/page.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/rhc-templates/src/app/form/page.tsx b/apps/rhc-templates/src/app/form/page.tsx index a27e2a1e..ff55b325 100644 --- a/apps/rhc-templates/src/app/form/page.tsx +++ b/apps/rhc-templates/src/app/form/page.tsx @@ -29,6 +29,8 @@ import { FormLabel } from '@utrecht/component-library-react'; // import { DateInput } from '@amsterdam/design-system-react'; export default function Form() { + const SIZE_IN_BYTES_10_MB = 10485760; + return ( <>
@@ -106,11 +108,11 @@ export default function Form() {
Bestand toevoegen From 505369e4542684f6ba5249b2a817c91805f76f23 Mon Sep 17 00:00:00 2001 From: Mees Work Date: Mon, 14 Oct 2024 15:05:40 +0200 Subject: [PATCH 09/12] review: renamed test description --- packages/components-react/src/FileInput.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components-react/src/FileInput.test.tsx b/packages/components-react/src/FileInput.test.tsx index e308c674..e78d1c1d 100644 --- a/packages/components-react/src/FileInput.test.tsx +++ b/packages/components-react/src/FileInput.test.tsx @@ -4,7 +4,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { FileInput, FileInputProps } from './FileInput'; -describe('Form field with a textbox', () => { +describe('File Input tests', () => { const defaultProps: FileInputProps = { buttonText: 'Bestanden kiezen', maxFileSizeInBytes: 10_485_760, From bd7bb7d457d936e08495d971c6fa8d9f6de0d131 Mon Sep 17 00:00:00 2001 From: Mees Work Date: Mon, 14 Oct 2024 15:11:41 +0200 Subject: [PATCH 10/12] review: renamed calback function --- packages/components-react/src/FileInput.test.tsx | 6 +++--- packages/components-react/src/FileInput.tsx | 8 ++++---- packages/storybook/src/community/file-input.stories.tsx | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components-react/src/FileInput.test.tsx b/packages/components-react/src/FileInput.test.tsx index e78d1c1d..fbdab682 100644 --- a/packages/components-react/src/FileInput.test.tsx +++ b/packages/components-react/src/FileInput.test.tsx @@ -31,7 +31,7 @@ describe('File Input tests', () => { allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', - onFilesChange: mockOnFileChange, + onValueChange: mockOnFileChange, }; const { container } = render(); @@ -58,7 +58,7 @@ describe('File Input tests', () => { allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', - onFilesChange: mockOnFileChange, + onValueChange: mockOnFileChange, }; const { container } = render(); @@ -88,7 +88,7 @@ describe('File Input tests', () => { allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.bmp,.gif', // Removed .png from allow list fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', - onFilesChange: mockOnFileChange, + onValueChange: mockOnFileChange, }; const { container } = render(); diff --git a/packages/components-react/src/FileInput.tsx b/packages/components-react/src/FileInput.tsx index 1a54c476..3af2315b 100644 --- a/packages/components-react/src/FileInput.tsx +++ b/packages/components-react/src/FileInput.tsx @@ -9,7 +9,7 @@ export interface FileInputProps extends Omit { allowedFileTypes: string; fileSizeErrorMessage: string; fileTypeErrorMessage: string; - onFilesChange?: (callbackFiles: File[]) => void; // eslint-disable-line no-unused-vars + onValueChange?: (callbackFiles: File[]) => void; // eslint-disable-line no-unused-vars } export const FileInput = forwardRef( @@ -22,7 +22,7 @@ export const FileInput = forwardRef( buttonAppearance, fileSizeErrorMessage, fileTypeErrorMessage, - onFilesChange, + onValueChange, }: PropsWithChildren, ref: ForwardedRef, ) => { @@ -32,8 +32,8 @@ export const FileInput = forwardRef( if (newFiles) { const updatedFiles = [...files, ...Array.from(newFiles)]; setFiles(updatedFiles); - if (onFilesChange) { - onFilesChange(updatedFiles); + if (onValueChange) { + onValueChange(updatedFiles); } } }; diff --git a/packages/storybook/src/community/file-input.stories.tsx b/packages/storybook/src/community/file-input.stories.tsx index 133ca558..665d8d41 100644 --- a/packages/storybook/src/community/file-input.stories.tsx +++ b/packages/storybook/src/community/file-input.stories.tsx @@ -116,7 +116,7 @@ export const MetCallback: Story = { allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif', fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.', fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.', - onFilesChange: (files: File[]) => { + onValueChange: (files: File[]) => { console.log('Callback bestanden: ', files); }, }, From 7ab3aa0f07c73ade5d2fe842b0d8408f0ca638f0 Mon Sep 17 00:00:00 2001 From: Mees Work Date: Mon, 14 Oct 2024 15:14:25 +0200 Subject: [PATCH 11/12] review: fixed typo --- packages/storybook/src/community/file-input.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/storybook/src/community/file-input.md b/packages/storybook/src/community/file-input.md index 91a57633..8bce0d4f 100644 --- a/packages/storybook/src/community/file-input.md +++ b/packages/storybook/src/community/file-input.md @@ -1,7 +1,7 @@ # Rijkshuisstijl Community File Input component -Met het `fileInput` component kunnen gebruikers meerdere bestanden uploaden. +Met de `fileInput` component kunnen gebruikers meerdere bestanden uploaden. -Het component accepteert `children` en kan dus op verschillende manier worden gestyled. +De component accepteert `children` en kan dus op verschillende manier worden gestyled. Dit component heeft een callbackfunctie genaamd `onFilesChange`. Hiermee kan de parent component op de hoogte worden gesteld zodra er een nieuw bestand is toegevoegd. From 33688d3a8701ec0fcfcb2a6a6b3366a32beda8a7 Mon Sep 17 00:00:00 2001 From: Mees Work Date: Mon, 14 Oct 2024 15:28:10 +0200 Subject: [PATCH 12/12] css: fixed ellipsis --- packages/components-css/file-input/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components-css/file-input/index.scss b/packages/components-css/file-input/index.scss index fef5d8f5..d36bb2ff 100644 --- a/packages/components-css/file-input/index.scss +++ b/packages/components-css/file-input/index.scss @@ -39,6 +39,7 @@ .rhc-file-input__inner-container__sub { display: flex; flex-direction: column; + overflow: hidden; } .rhc-file-input__item--name {