From e44f5696e8006bceb030520e8a6630d5dba847bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Thu, 13 Jul 2023 15:08:53 +0200
Subject: [PATCH] BREAKING CHANGE(web-react): Rename CheckboxField component to
 `Checkbox` #DS-522
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 ## Migration Guide

Rename and use `Checkbox` component instead of `CheckboxField`.

- `<CheckboxField …>` → `<Checkbox …>`

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.
---
 packages/web-react/scripts/entryPoints.js     |  2 +-
 .../components/Checkbox/Checkbox.stories.ts   | 22 +++++++
 .../Checkbox.tsx}                             | 14 ++---
 .../{CheckboxField => Checkbox}/README.md     | 20 +++----
 .../__tests__/Checkbox.test.tsx}              | 40 ++++++-------
 .../__tests__/useCheckboxStyleProps.test.ts   | 48 +++++++++++++++
 .../src/components/Checkbox/index.ts          |  3 +
 .../components/Checkbox/stories/Checkbox.tsx  |  8 +++
 .../stories/CheckboxHelperText.tsx}           |  6 +-
 .../stories/CheckboxItem.tsx}                 |  6 +-
 .../Checkbox/stories/CheckboxProps.tsx        |  7 +++
 .../stories/CheckboxValidationState.tsx}      | 14 ++---
 .../stories/argTypes.ts                       |  0
 .../Checkbox/useCheckboxStyleProps.ts         | 59 +++++++++++++++++++
 .../CheckboxField/CheckboxField.stories.ts    | 22 -------
 .../useCheckboxFieldStyleProps.test.ts        | 48 ---------------
 .../src/components/CheckboxField/index.ts     |  3 -
 .../CheckboxField/stories/CheckboxField.tsx   |  8 ---
 .../stories/CheckboxFieldProps.tsx            |  7 ---
 .../useCheckboxFieldStyleProps.ts             | 59 -------------------
 .../web-react/src/components/Field/README.md  |  2 +-
 .../web-react/src/components/Item/README.md   |  2 +-
 packages/web-react/src/components/index.ts    |  2 +-
 .../types/{checkboxField.ts => checkbox.ts}   |  4 +-
 packages/web-react/src/types/index.ts         |  2 +-
 25 files changed, 204 insertions(+), 204 deletions(-)
 create mode 100644 packages/web-react/src/components/Checkbox/Checkbox.stories.ts
 rename packages/web-react/src/components/{CheckboxField/CheckboxField.tsx => Checkbox/Checkbox.tsx} (71%)
 rename packages/web-react/src/components/{CheckboxField => Checkbox}/README.md (79%)
 rename packages/web-react/src/components/{CheckboxField/__tests__/CheckboxField.test.tsx => Checkbox/__tests__/Checkbox.test.tsx} (53%)
 create mode 100644 packages/web-react/src/components/Checkbox/__tests__/useCheckboxStyleProps.test.ts
 create mode 100644 packages/web-react/src/components/Checkbox/index.ts
 create mode 100644 packages/web-react/src/components/Checkbox/stories/Checkbox.tsx
 rename packages/web-react/src/components/{CheckboxField/stories/CheckboxFieldHelperText.tsx => Checkbox/stories/CheckboxHelperText.tsx} (57%)
 rename packages/web-react/src/components/{CheckboxField/stories/CheckboxFieldItem.tsx => Checkbox/stories/CheckboxItem.tsx} (54%)
 create mode 100644 packages/web-react/src/components/Checkbox/stories/CheckboxProps.tsx
 rename packages/web-react/src/components/{CheckboxField/stories/CheckboxFieldValidationState.tsx => Checkbox/stories/CheckboxValidationState.tsx} (76%)
 rename packages/web-react/src/components/{CheckboxField => Checkbox}/stories/argTypes.ts (100%)
 create mode 100644 packages/web-react/src/components/Checkbox/useCheckboxStyleProps.ts
 delete mode 100644 packages/web-react/src/components/CheckboxField/CheckboxField.stories.ts
 delete mode 100644 packages/web-react/src/components/CheckboxField/__tests__/useCheckboxFieldStyleProps.test.ts
 delete mode 100644 packages/web-react/src/components/CheckboxField/index.ts
 delete mode 100644 packages/web-react/src/components/CheckboxField/stories/CheckboxField.tsx
 delete mode 100644 packages/web-react/src/components/CheckboxField/stories/CheckboxFieldProps.tsx
 delete mode 100644 packages/web-react/src/components/CheckboxField/useCheckboxFieldStyleProps.ts
 rename packages/web-react/src/types/{checkboxField.ts => checkbox.ts} (85%)

diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js
index 55b3435207..6ddd94cc97 100644
--- a/packages/web-react/scripts/entryPoints.js
+++ b/packages/web-react/scripts/entryPoints.js
@@ -7,7 +7,7 @@ const entryPoints = [
   { dirs: ['components', 'Alert'] },
   { dirs: ['components', 'Breadcrumbs'] },
   { dirs: ['components', 'Button'] },
-  { dirs: ['components', 'CheckboxField'] },
+  { dirs: ['components', 'Checkbox'] },
   { dirs: ['components', 'Collapse'] },
   { dirs: ['components', 'Container'] },
   { dirs: ['components', 'Dialog'] },
diff --git a/packages/web-react/src/components/Checkbox/Checkbox.stories.ts b/packages/web-react/src/components/Checkbox/Checkbox.stories.ts
new file mode 100644
index 0000000000..11d92d8676
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/Checkbox.stories.ts
@@ -0,0 +1,22 @@
+import { ComponentMeta } from '@storybook/react';
+import argTypes from './stories/argTypes';
+import Checkbox from './Checkbox';
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Use Checkbox when you have a group of choices and any selection from the group is allowed.',
+      },
+    },
+  },
+  argTypes,
+} as ComponentMeta<typeof Checkbox>;
+
+export { default as Checkbox } from './stories/Checkbox';
+export { default as CheckboxValidationState } from './stories/CheckboxValidationState';
+export { default as CheckboxHelperText } from './stories/CheckboxHelperText';
+export { default as CheckboxItem } from './stories/CheckboxItem';
+export { default as Props } from './stories/CheckboxProps';
diff --git a/packages/web-react/src/components/CheckboxField/CheckboxField.tsx b/packages/web-react/src/components/Checkbox/Checkbox.tsx
similarity index 71%
rename from packages/web-react/src/components/CheckboxField/CheckboxField.tsx
rename to packages/web-react/src/components/Checkbox/Checkbox.tsx
index 5935a4a4c3..6cda80b448 100644
--- a/packages/web-react/src/components/CheckboxField/CheckboxField.tsx
+++ b/packages/web-react/src/components/Checkbox/Checkbox.tsx
@@ -1,14 +1,14 @@
 import React, { forwardRef, ForwardedRef } from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
-import { SpiritCheckboxFieldProps } from '../../types';
+import { SpiritCheckboxProps } from '../../types';
 import { useValidationText } from '../Field';
-import { useCheckboxFieldStyleProps } from './useCheckboxFieldStyleProps';
+import { useCheckboxStyleProps } from './useCheckboxStyleProps';
 
 /* We need an exception for components exported with forwardRef */
-/* eslint no-underscore-dangle: ['error', { allow: ['_CheckboxField'] }] */
-const _CheckboxField = (props: SpiritCheckboxFieldProps, ref: ForwardedRef<HTMLInputElement>): JSX.Element => {
-  const { classProps, props: modifiedProps } = useCheckboxFieldStyleProps(props);
+/* eslint no-underscore-dangle: ['error', { allow: ['_Checkbox'] }] */
+const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElement>): JSX.Element => {
+  const { classProps, props: modifiedProps } = useCheckboxStyleProps(props);
   const {
     id,
     label,
@@ -52,6 +52,6 @@ const _CheckboxField = (props: SpiritCheckboxFieldProps, ref: ForwardedRef<HTMLI
   );
 };
 
-export const CheckboxField = forwardRef<HTMLInputElement, SpiritCheckboxFieldProps>(_CheckboxField);
+export const Checkbox = forwardRef<HTMLInputElement, SpiritCheckboxProps>(_Checkbox);
 
-export default CheckboxField;
+export default Checkbox;
diff --git a/packages/web-react/src/components/CheckboxField/README.md b/packages/web-react/src/components/Checkbox/README.md
similarity index 79%
rename from packages/web-react/src/components/CheckboxField/README.md
rename to packages/web-react/src/components/Checkbox/README.md
index 998b3e16cb..ab06a8cec9 100644
--- a/packages/web-react/src/components/CheckboxField/README.md
+++ b/packages/web-react/src/components/Checkbox/README.md
@@ -1,6 +1,6 @@
-# CheckboxField
+# Checkbox
 
-CheckboxField enables the user to check/uncheck choice.
+Checkbox enables the user to check/uncheck choice.
 It has input, a label, and an optional helperText.
 It could be disabled or have a validation state.
 The label could be hidden and show if the input is required.
@@ -8,17 +8,17 @@ The label could be hidden and show if the input is required.
 Basic example usage:
 
 ```jsx
-<CheckboxField id="checkboxfieldDefault" label="Label" name="checkboxfieldDefault" />
+<Checkbox id="checkboxDefault" label="Label" name="checkboxDefault" />
 ```
 
 Advanced example usage:
 
 ```jsx
-<CheckboxField
-  id="checkboxfieldAdvanced"
+<Checkbox
+  id="checkboxAdvanced"
   isChecked
   isRequired
-  name="checkboxfieldAdvanced"
+  name="checkboxAdvanced"
   validationText="validation text"
   validationState="danger"
   helperText="Helper text"
@@ -44,11 +44,11 @@ Advanced example usage:
 
 ## Custom component
 
-Text field classes are fabricated using `useCheckboxFieldStyleProps` hook. You can use it to create your own custom CheckboxField component.
+Text field classes are fabricated using `useCheckboxStyleProps` hook. You can use it to create your own custom Checkbox component.
 
 ```jsx
-const CustomCheckboxField = (props: SpiritCheckboxFieldProps): JSX.Element => {
-  const { classProps, props: modifiedProps } = useCheckboxFieldStyleProps(props);
+const CustomCheckbox = (props: SpiritCheckboxProps): JSX.Element => {
+  const { classProps, props: modifiedProps } = useCheckboxStyleProps(props);
 
   return (
     <label htmlFor={props.id} className={classProps.root}>
@@ -63,7 +63,7 @@ const CustomCheckboxField = (props: SpiritCheckboxFieldProps): JSX.Element => {
 };
 ```
 
-For detailed information see [CheckboxField](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/CheckboxField/README.md) component
+For detailed information see [Checkbox](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Checkbox/README.md) component
 
 [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Item/README.md
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
diff --git a/packages/web-react/src/components/CheckboxField/__tests__/CheckboxField.test.tsx b/packages/web-react/src/components/Checkbox/__tests__/Checkbox.test.tsx
similarity index 53%
rename from packages/web-react/src/components/CheckboxField/__tests__/CheckboxField.test.tsx
rename to packages/web-react/src/components/Checkbox/__tests__/Checkbox.test.tsx
index f1909584ee..347fe63ca5 100644
--- a/packages/web-react/src/components/CheckboxField/__tests__/CheckboxField.test.tsx
+++ b/packages/web-react/src/components/Checkbox/__tests__/Checkbox.test.tsx
@@ -7,60 +7,60 @@ import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { validationStatePropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
 import { validationTextPropsTest } from '../../../../tests/providerTests/validationTextPropsTest';
-import CheckboxField from '../CheckboxField';
+import Checkbox from '../Checkbox';
 
-describe('CheckboxField', () => {
-  classNamePrefixProviderTest(CheckboxField, 'CheckboxField');
+describe('Checkbox', () => {
+  classNamePrefixProviderTest(Checkbox, 'Checkbox');
 
-  itemPropsTest(CheckboxField);
+  itemPropsTest(Checkbox);
 
-  stylePropsTest(CheckboxField);
+  stylePropsTest(Checkbox);
 
-  restPropsTest(CheckboxField, 'input');
+  restPropsTest(Checkbox, 'input');
 
-  validationStatePropsTest(CheckboxField, 'CheckboxField--');
+  validationStatePropsTest(Checkbox, 'Checkbox--');
 
-  validationTextPropsTest(CheckboxField, '.CheckboxField__validationText');
+  validationTextPropsTest(Checkbox, '.Checkbox__validationText');
 
   it('should have text classname', () => {
-    const dom = render(<CheckboxField id="checkbox" label="Label" />);
+    const dom = render(<Checkbox id="checkbox" label="Label" />);
 
     const element = dom.container.querySelector('label > span') as HTMLElement;
-    expect(element).toHaveClass('CheckboxField__text');
+    expect(element).toHaveClass('Checkbox__text');
   });
 
   it('should have label classname', () => {
-    const dom = render(<CheckboxField id="checkbox" label="Label" isLabelHidden />);
+    const dom = render(<Checkbox id="checkbox" label="Label" isLabelHidden />);
 
     const element = dom.container.querySelector('label > span > span:first-child') as HTMLElement;
-    expect(element).toHaveClass('CheckboxField__label');
+    expect(element).toHaveClass('Checkbox__label');
   });
 
   it('should have hidden classname', () => {
-    const dom = render(<CheckboxField id="checkbox" label="Label" isLabelHidden />);
+    const dom = render(<Checkbox id="checkbox" label="Label" isLabelHidden />);
 
     const element = dom.container.querySelector('label > span > span:first-child') as HTMLElement;
-    expect(element).toHaveClass('CheckboxField__label--hidden');
+    expect(element).toHaveClass('Checkbox__label--hidden');
   });
 
   it('should have required classname', () => {
-    const dom = render(<CheckboxField id="checkbox" label="Label" isRequired />);
+    const dom = render(<Checkbox id="checkbox" label="Label" isRequired />);
 
     const element = dom.container.querySelector('label > span > span:first-child') as HTMLElement;
-    expect(element).toHaveClass('CheckboxField__label--required');
+    expect(element).toHaveClass('Checkbox__label--required');
   });
 
   it('should have input classname', () => {
-    const dom = render(<CheckboxField id="checkbox" label="Label" />);
+    const dom = render(<Checkbox id="checkbox" label="Label" />);
 
     const element = dom.container.querySelector('input') as HTMLElement;
-    expect(element).toHaveClass('CheckboxField__input');
+    expect(element).toHaveClass('Checkbox__input');
   });
 
   it('should have helper text', () => {
-    const dom = render(<CheckboxField id="checkbox" label="Label" helperText="text" />);
+    const dom = render(<Checkbox id="checkbox" label="Label" helperText="text" />);
 
-    const element = dom.container.querySelector('.CheckboxField__helperText') as HTMLElement;
+    const element = dom.container.querySelector('.Checkbox__helperText') as HTMLElement;
     expect(element.textContent).toBe('text');
   });
 });
diff --git a/packages/web-react/src/components/Checkbox/__tests__/useCheckboxStyleProps.test.ts b/packages/web-react/src/components/Checkbox/__tests__/useCheckboxStyleProps.test.ts
new file mode 100644
index 0000000000..a1f285bc84
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/__tests__/useCheckboxStyleProps.test.ts
@@ -0,0 +1,48 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { SpiritCheckboxProps } from '../../../types';
+import { ValidationStates } from '../../../constants';
+import { useCheckboxStyleProps } from '../useCheckboxStyleProps';
+
+describe('useCheckboxStyleProps', () => {
+  it('should return defaults', () => {
+    const props = { id: 'checkbox', label: 'Label' };
+    const { result } = renderHook(() => useCheckboxStyleProps(props));
+
+    expect(result.current.classProps).toEqual({
+      root: 'Checkbox',
+      text: 'Checkbox__text',
+      input: 'Checkbox__input',
+      label: 'Checkbox__label',
+      validationText: 'Checkbox__validationText',
+      helperText: 'Checkbox__helperText',
+    });
+  });
+
+  it('should return required input', () => {
+    const props = { isRequired: true } as SpiritCheckboxProps;
+    const { result } = renderHook(() => useCheckboxStyleProps(props));
+
+    expect(result.current.classProps.label).toBe('Checkbox__label Checkbox__label--required');
+  });
+
+  it('should return hidden label', () => {
+    const props = { isLabelHidden: true } as SpiritCheckboxProps;
+    const { result } = renderHook(() => useCheckboxStyleProps(props));
+
+    expect(result.current.classProps.label).toBe('Checkbox__label Checkbox__label--hidden');
+  });
+
+  it('should return field as an Item', () => {
+    const props = { isItem: true } as SpiritCheckboxProps;
+    const { result } = renderHook(() => useCheckboxStyleProps(props));
+
+    expect(result.current.classProps.root).toBe('Checkbox Checkbox--item');
+  });
+
+  it.each([Object.values(ValidationStates)])('should return field with %s', (state) => {
+    const props = { validationState: state } as SpiritCheckboxProps;
+    const { result } = renderHook(() => useCheckboxStyleProps(props));
+
+    expect(result.current.classProps.root).toBe(`Checkbox Checkbox--${state}`);
+  });
+});
diff --git a/packages/web-react/src/components/Checkbox/index.ts b/packages/web-react/src/components/Checkbox/index.ts
new file mode 100644
index 0000000000..01df9aa336
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/index.ts
@@ -0,0 +1,3 @@
+export * from './Checkbox';
+export * from './useCheckboxStyleProps';
+export { default as Checkbox } from './Checkbox';
diff --git a/packages/web-react/src/components/Checkbox/stories/Checkbox.tsx b/packages/web-react/src/components/Checkbox/stories/Checkbox.tsx
new file mode 100644
index 0000000000..3f416d280c
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/stories/Checkbox.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentStory } from '@storybook/react';
+import Checkbox from '../Checkbox';
+import { SpiritCheckboxProps } from '../../../types';
+
+const Story: ComponentStory<typeof Checkbox> = (args: SpiritCheckboxProps) => <Checkbox {...args} />;
+
+export default Story;
diff --git a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldHelperText.tsx b/packages/web-react/src/components/Checkbox/stories/CheckboxHelperText.tsx
similarity index 57%
rename from packages/web-react/src/components/CheckboxField/stories/CheckboxFieldHelperText.tsx
rename to packages/web-react/src/components/Checkbox/stories/CheckboxHelperText.tsx
index cfe1a583d4..784929b964 100644
--- a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldHelperText.tsx
+++ b/packages/web-react/src/components/Checkbox/stories/CheckboxHelperText.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
-import CheckboxField from '../CheckboxField';
-import { SpiritCheckboxFieldProps } from '../../../types';
+import Checkbox from '../Checkbox';
+import { SpiritCheckboxProps } from '../../../types';
 
-const Story: ComponentStory<typeof CheckboxField> = (args: SpiritCheckboxFieldProps) => <CheckboxField {...args} />;
+const Story: ComponentStory<typeof Checkbox> = (args: SpiritCheckboxProps) => <Checkbox {...args} />;
 
 Story.args = {
   id: 'example',
diff --git a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldItem.tsx b/packages/web-react/src/components/Checkbox/stories/CheckboxItem.tsx
similarity index 54%
rename from packages/web-react/src/components/CheckboxField/stories/CheckboxFieldItem.tsx
rename to packages/web-react/src/components/Checkbox/stories/CheckboxItem.tsx
index af24f08d54..476c98483e 100644
--- a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldItem.tsx
+++ b/packages/web-react/src/components/Checkbox/stories/CheckboxItem.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
-import CheckboxField from '../CheckboxField';
-import { SpiritCheckboxFieldProps } from '../../../types';
+import Checkbox from '../Checkbox';
+import { SpiritCheckboxProps } from '../../../types';
 
-const Story: ComponentStory<typeof CheckboxField> = (args: SpiritCheckboxFieldProps) => <CheckboxField {...args} />;
+const Story: ComponentStory<typeof Checkbox> = (args: SpiritCheckboxProps) => <Checkbox {...args} />;
 
 Story.args = {
   isChecked: false,
diff --git a/packages/web-react/src/components/Checkbox/stories/CheckboxProps.tsx b/packages/web-react/src/components/Checkbox/stories/CheckboxProps.tsx
new file mode 100644
index 0000000000..40a767a46b
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/stories/CheckboxProps.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { Checkbox } from '../Checkbox';
+import Props from '../../../../docs/stories/Props';
+
+const Story = () => <Props component={Checkbox} />;
+
+export default Story;
diff --git a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldValidationState.tsx b/packages/web-react/src/components/Checkbox/stories/CheckboxValidationState.tsx
similarity index 76%
rename from packages/web-react/src/components/CheckboxField/stories/CheckboxFieldValidationState.tsx
rename to packages/web-react/src/components/Checkbox/stories/CheckboxValidationState.tsx
index 14831cd3bb..48474be8ed 100644
--- a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldValidationState.tsx
+++ b/packages/web-react/src/components/Checkbox/stories/CheckboxValidationState.tsx
@@ -1,24 +1,24 @@
 import React from 'react';
-import CheckboxField from '../CheckboxField';
+import Checkbox from '../Checkbox';
 
 const Story = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <CheckboxField
-      id="checkboxfield0"
+    <Checkbox
+      id="checkbox0"
       label="Checkbox success"
       name="example"
       validationState="success"
       validationText="Success validation text"
     />
-    <CheckboxField
-      id="checkboxfield1"
+    <Checkbox
+      id="checkbox1"
       label="Checkbox warning"
       name="example"
       validationState="warning"
       validationText="Warning validation text"
     />
-    <CheckboxField
-      id="checkboxfield2"
+    <Checkbox
+      id="checkbox2"
       label="Checkbox danger"
       name="example"
       validationState="danger"
diff --git a/packages/web-react/src/components/CheckboxField/stories/argTypes.ts b/packages/web-react/src/components/Checkbox/stories/argTypes.ts
similarity index 100%
rename from packages/web-react/src/components/CheckboxField/stories/argTypes.ts
rename to packages/web-react/src/components/Checkbox/stories/argTypes.ts
diff --git a/packages/web-react/src/components/Checkbox/useCheckboxStyleProps.ts b/packages/web-react/src/components/Checkbox/useCheckboxStyleProps.ts
new file mode 100644
index 0000000000..b17033e37c
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/useCheckboxStyleProps.ts
@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import { useClassNamePrefix } from '../../hooks';
+import { SpiritCheckboxProps, CheckboxProps } from '../../types';
+
+export interface CheckboxStyles {
+  /** className props */
+  classProps: {
+    root: string;
+    text: string;
+    label: string;
+    input: string;
+    helperText: string;
+    validationText: string;
+  };
+  /** props to be passed to the input element */
+  props: CheckboxProps;
+}
+
+export function useCheckboxStyleProps(props: SpiritCheckboxProps): CheckboxStyles {
+  const { validationState, isItem, isLabelHidden, ...restProps } = props;
+  const { isDisabled, isRequired } = restProps;
+
+  const checkboxClass = useClassNamePrefix('Checkbox');
+  const checkboxDisabledClass = `${checkboxClass}--disabled`;
+  const checkboxItemClass = `${checkboxClass}--item`;
+  const checkboxInputClass = `${checkboxClass}__input`;
+  const checkboxTextClass = `${checkboxClass}__text`;
+  const checkboxLabelClass = `${checkboxClass}__label`;
+  const checkboxLabelRequiredClass = `${checkboxClass}__label--required`;
+  const checkboxLabelHiddenClass = `${checkboxClass}__label--hidden`;
+  const checkboxHelperTextClass = `${checkboxClass}__helperText`;
+  const checkboxValidationTextClass = `${checkboxClass}__validationText`;
+  const checkboxValidationClass = `${checkboxClass}--${validationState}`;
+
+  const rootStyles = classNames(checkboxClass, {
+    [checkboxDisabledClass]: isDisabled,
+    [checkboxItemClass]: isItem,
+    [checkboxValidationClass]: validationState,
+  });
+  const labelStyles = classNames(checkboxLabelClass, {
+    [checkboxLabelRequiredClass]: isRequired,
+    [checkboxLabelHiddenClass]: isLabelHidden,
+  });
+
+  return {
+    classProps: {
+      root: rootStyles,
+      text: checkboxTextClass,
+      label: labelStyles,
+      input: checkboxInputClass,
+      helperText: checkboxHelperTextClass,
+      validationText: checkboxValidationTextClass,
+    },
+    props: {
+      ...restProps,
+      validationState,
+    },
+  };
+}
diff --git a/packages/web-react/src/components/CheckboxField/CheckboxField.stories.ts b/packages/web-react/src/components/CheckboxField/CheckboxField.stories.ts
deleted file mode 100644
index 1d84f1640e..0000000000
--- a/packages/web-react/src/components/CheckboxField/CheckboxField.stories.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './stories/argTypes';
-import CheckboxField from './CheckboxField';
-
-export default {
-  title: 'Components/CheckboxField',
-  component: CheckboxField,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Use CheckboxField when you have a group of choices and any selection from the group is allowed.',
-      },
-    },
-  },
-  argTypes,
-} as ComponentMeta<typeof CheckboxField>;
-
-export { default as CheckboxField } from './stories/CheckboxField';
-export { default as CheckboxFieldValidationState } from './stories/CheckboxFieldValidationState';
-export { default as CheckboxFieldHelperText } from './stories/CheckboxFieldHelperText';
-export { default as CheckboxFieldItem } from './stories/CheckboxFieldItem';
-export { default as Props } from './stories/CheckboxFieldProps';
diff --git a/packages/web-react/src/components/CheckboxField/__tests__/useCheckboxFieldStyleProps.test.ts b/packages/web-react/src/components/CheckboxField/__tests__/useCheckboxFieldStyleProps.test.ts
deleted file mode 100644
index be1daa9488..0000000000
--- a/packages/web-react/src/components/CheckboxField/__tests__/useCheckboxFieldStyleProps.test.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { SpiritCheckboxFieldProps } from '../../../types';
-import { ValidationStates } from '../../../constants';
-import { useCheckboxFieldStyleProps } from '../useCheckboxFieldStyleProps';
-
-describe('useCheckboxFieldStyleProps', () => {
-  it('should return defaults', () => {
-    const props = { id: 'checkbox', label: 'Label' };
-    const { result } = renderHook(() => useCheckboxFieldStyleProps(props));
-
-    expect(result.current.classProps).toEqual({
-      root: 'CheckboxField',
-      text: 'CheckboxField__text',
-      input: 'CheckboxField__input',
-      label: 'CheckboxField__label',
-      validationText: 'CheckboxField__validationText',
-      helperText: 'CheckboxField__helperText',
-    });
-  });
-
-  it('should return required input', () => {
-    const props = { isRequired: true } as SpiritCheckboxFieldProps;
-    const { result } = renderHook(() => useCheckboxFieldStyleProps(props));
-
-    expect(result.current.classProps.label).toBe('CheckboxField__label CheckboxField__label--required');
-  });
-
-  it('should return hidden label', () => {
-    const props = { isLabelHidden: true } as SpiritCheckboxFieldProps;
-    const { result } = renderHook(() => useCheckboxFieldStyleProps(props));
-
-    expect(result.current.classProps.label).toBe('CheckboxField__label CheckboxField__label--hidden');
-  });
-
-  it('should return field as an Item', () => {
-    const props = { isItem: true } as SpiritCheckboxFieldProps;
-    const { result } = renderHook(() => useCheckboxFieldStyleProps(props));
-
-    expect(result.current.classProps.root).toBe('CheckboxField CheckboxField--item');
-  });
-
-  it.each([Object.values(ValidationStates)])('should return field with %s', (state) => {
-    const props = { validationState: state } as SpiritCheckboxFieldProps;
-    const { result } = renderHook(() => useCheckboxFieldStyleProps(props));
-
-    expect(result.current.classProps.root).toBe(`CheckboxField CheckboxField--${state}`);
-  });
-});
diff --git a/packages/web-react/src/components/CheckboxField/index.ts b/packages/web-react/src/components/CheckboxField/index.ts
deleted file mode 100644
index ff79207a6b..0000000000
--- a/packages/web-react/src/components/CheckboxField/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './CheckboxField';
-export * from './useCheckboxFieldStyleProps';
-export { default as CheckboxField } from './CheckboxField';
diff --git a/packages/web-react/src/components/CheckboxField/stories/CheckboxField.tsx b/packages/web-react/src/components/CheckboxField/stories/CheckboxField.tsx
deleted file mode 100644
index 939097ef7f..0000000000
--- a/packages/web-react/src/components/CheckboxField/stories/CheckboxField.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
-import CheckboxField from '../CheckboxField';
-import { SpiritCheckboxFieldProps } from '../../../types';
-
-const Story: ComponentStory<typeof CheckboxField> = (args: SpiritCheckboxFieldProps) => <CheckboxField {...args} />;
-
-export default Story;
diff --git a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldProps.tsx b/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldProps.tsx
deleted file mode 100644
index ac19d483f0..0000000000
--- a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldProps.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import { CheckboxField } from '../CheckboxField';
-import Props from '../../../../docs/stories/Props';
-
-const Story = () => <Props component={CheckboxField} />;
-
-export default Story;
diff --git a/packages/web-react/src/components/CheckboxField/useCheckboxFieldStyleProps.ts b/packages/web-react/src/components/CheckboxField/useCheckboxFieldStyleProps.ts
deleted file mode 100644
index 46d90286e9..0000000000
--- a/packages/web-react/src/components/CheckboxField/useCheckboxFieldStyleProps.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import classNames from 'classnames';
-import { useClassNamePrefix } from '../../hooks';
-import { SpiritCheckboxFieldProps, CheckboxFieldProps } from '../../types';
-
-export interface CheckboxFieldStyles {
-  /** className props */
-  classProps: {
-    root: string;
-    text: string;
-    label: string;
-    input: string;
-    helperText: string;
-    validationText: string;
-  };
-  /** props to be passed to the input element */
-  props: CheckboxFieldProps;
-}
-
-export function useCheckboxFieldStyleProps(props: SpiritCheckboxFieldProps): CheckboxFieldStyles {
-  const { validationState, isItem, isLabelHidden, ...restProps } = props;
-  const { isDisabled, isRequired } = restProps;
-
-  const checkboxFieldClass = useClassNamePrefix('CheckboxField');
-  const checkboxFieldDisabledClass = `${checkboxFieldClass}--disabled`;
-  const checkboxFieldItemClass = `${checkboxFieldClass}--item`;
-  const checkboxFieldInputClass = `${checkboxFieldClass}__input`;
-  const checkboxFieldTextClass = `${checkboxFieldClass}__text`;
-  const checkboxFieldLabelClass = `${checkboxFieldClass}__label`;
-  const checkboxFieldLabelRequiredClass = `${checkboxFieldClass}__label--required`;
-  const checkboxFieldLabelHiddenClass = `${checkboxFieldClass}__label--hidden`;
-  const checkboxFieldHelperTextClass = `${checkboxFieldClass}__helperText`;
-  const checkboxFieldValidationTextClass = `${checkboxFieldClass}__validationText`;
-  const checkboxFieldValidationClass = `${checkboxFieldClass}--${validationState}`;
-
-  const rootStyles = classNames(checkboxFieldClass, {
-    [checkboxFieldDisabledClass]: isDisabled,
-    [checkboxFieldItemClass]: isItem,
-    [checkboxFieldValidationClass]: validationState,
-  });
-  const labelStyles = classNames(checkboxFieldLabelClass, {
-    [checkboxFieldLabelRequiredClass]: isRequired,
-    [checkboxFieldLabelHiddenClass]: isLabelHidden,
-  });
-
-  return {
-    classProps: {
-      root: rootStyles,
-      text: checkboxFieldTextClass,
-      label: labelStyles,
-      input: checkboxFieldInputClass,
-      helperText: checkboxFieldHelperTextClass,
-      validationText: checkboxFieldValidationTextClass,
-    },
-    props: {
-      ...restProps,
-      validationState,
-    },
-  };
-}
diff --git a/packages/web-react/src/components/Field/README.md b/packages/web-react/src/components/Field/README.md
index c3f163af18..387d5d39d9 100644
--- a/packages/web-react/src/components/Field/README.md
+++ b/packages/web-react/src/components/Field/README.md
@@ -2,7 +2,7 @@
 
 ## ValidationText
 
-The ValidationText subcomponent displays validation texts for Field components like TextField, TextArea, CheckboxField, FileUploader, etc.
+The ValidationText subcomponent displays validation texts for Field components like TextField, TextArea, Checkbox, FileUploader, etc.
 
 ```jsx
 import { ValidationText } from '@lmc-eu/spirit-web-react/components';
diff --git a/packages/web-react/src/components/Item/README.md b/packages/web-react/src/components/Item/README.md
index dd9d1a8927..989d282aa6 100644
--- a/packages/web-react/src/components/Item/README.md
+++ b/packages/web-react/src/components/Item/README.md
@@ -1,6 +1,6 @@
 # Item
 
-To implement Item component with content of `RadioField` or `CheckboxField`,
+To implement Item component with content of `RadioField` or `Checkbox`,
 you need to use directly these components with prop `isItem`.
 
 See `web` package [Item documentation][item-documentation] for more info.
diff --git a/packages/web-react/src/components/index.ts b/packages/web-react/src/components/index.ts
index c77601dca2..8b1a1c1a95 100644
--- a/packages/web-react/src/components/index.ts
+++ b/packages/web-react/src/components/index.ts
@@ -2,7 +2,7 @@ export * from './Accordion';
 export * from './Alert';
 export * from './Breadcrumbs';
 export * from './Button';
-export * from './CheckboxField';
+export * from './Checkbox';
 export * from './Collapse';
 export * from './Container';
 export * from './Dialog';
diff --git a/packages/web-react/src/types/checkboxField.ts b/packages/web-react/src/types/checkbox.ts
similarity index 85%
rename from packages/web-react/src/types/checkboxField.ts
rename to packages/web-react/src/types/checkbox.ts
index 2e7b9e33e3..275ebb2d34 100644
--- a/packages/web-react/src/types/checkboxField.ts
+++ b/packages/web-react/src/types/checkbox.ts
@@ -11,7 +11,7 @@ import { LabelProps } from './label';
 
 export type CheckboxElementBaseProps = SpiritInputElementPropsWithRef;
 
-export interface CheckboxFieldProps
+export interface CheckboxProps
   extends CheckboxElementBaseProps,
     ChildrenProps,
     LabelProps,
@@ -28,4 +28,4 @@ export interface CheckboxFieldProps
   label: string;
 }
 
-export interface SpiritCheckboxFieldProps extends CheckboxFieldProps {}
+export interface SpiritCheckboxProps extends CheckboxProps {}
diff --git a/packages/web-react/src/types/index.ts b/packages/web-react/src/types/index.ts
index 22fb1faa44..5803b86def 100644
--- a/packages/web-react/src/types/index.ts
+++ b/packages/web-react/src/types/index.ts
@@ -2,7 +2,7 @@ export * from './accordion';
 export * from './alert';
 export * from './breadcrumbs';
 export * from './button';
-export * from './checkboxField';
+export * from './checkbox';
 export * from './collapse';
 export * from './dropdown';
 export * from './fileUploader';