From b8b8100fb9555746bce0a243dd2fd17aac7f94d5 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Sat, 11 May 2024 17:28:37 +0200 Subject: [PATCH] feat: form field checkbox component for React --- .changeset/tricky-guests-impress.md | 5 + .../src/FormFieldCheckbox.test.tsx | 670 ++++++++++++++++++ .../src/FormFieldCheckbox.tsx | 120 ++++ .../src/css-module/FormFieldCheckbox.tsx | 12 + .../src/css-module/index.ts | 2 + packages/component-library-react/src/index.ts | 2 + .../src/stories/FormFieldCheckbox.stories.tsx | 114 ++- 7 files changed, 866 insertions(+), 59 deletions(-) create mode 100644 .changeset/tricky-guests-impress.md create mode 100644 packages/component-library-react/src/FormFieldCheckbox.test.tsx create mode 100644 packages/component-library-react/src/FormFieldCheckbox.tsx create mode 100644 packages/component-library-react/src/css-module/FormFieldCheckbox.tsx diff --git a/.changeset/tricky-guests-impress.md b/.changeset/tricky-guests-impress.md new file mode 100644 index 00000000000..c1a76a691b2 --- /dev/null +++ b/.changeset/tricky-guests-impress.md @@ -0,0 +1,5 @@ +--- +"@utrecht/component-library-react": minor +--- + +Add `` component. diff --git a/packages/component-library-react/src/FormFieldCheckbox.test.tsx b/packages/component-library-react/src/FormFieldCheckbox.test.tsx new file mode 100644 index 00000000000..c7c52414815 --- /dev/null +++ b/packages/component-library-react/src/FormFieldCheckbox.test.tsx @@ -0,0 +1,670 @@ +import { render, screen } from '@testing-library/react'; +import { createRef } from 'react'; +import { FormFieldCheckbox } from './FormFieldCheckbox'; +import '@testing-library/jest-dom'; + +describe('Form field with a checkbox', () => { + const defaultProps = { + name: 'check', + label: 'I agree', + }; + + it('renders an HTML div element', () => { + const { container } = render(); + + const field = container.querySelector('div'); + + expect(field).toBeInTheDocument(); + }); + + it('renders a design system BEM class name: utrecht-form-field', () => { + const { container } = render(); + + const field = container.querySelector('div'); + + expect(field).toHaveClass('utrecht-form-field'); + }); + + it('renders a design system BEM modifier class name: utrecht-form-field--checkbox', () => { + const { container } = render(); + + const field = container.querySelector('.utrecht-form-field'); + + expect(field).toHaveClass('utrecht-form-field--checkbox'); + }); + + it('displays as CSS block element (or equivalent)', () => { + const { container } = render(); + + const field = container.querySelector('div'); + + expect(field).toBeVisible(); + expect(field).not.toHaveStyle({ display: 'inline' }); + expect(field).not.toHaveStyle({ display: 'inline-block' }); + }); + + it('renders rich text content', () => { + const { container } = render( + +
+
, + ); + + const richText = container.querySelector('hr'); + + expect(richText).toBeInTheDocument(); + }); + + it('can be hidden', () => { + const { container } = render(