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; + +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): JSX.Element => { - const { classProps, props: modifiedProps } = useCheckboxFieldStyleProps(props); +/* eslint no-underscore-dangle: ['error', { allow: ['_Checkbox'] }] */ +const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef): JSX.Element => { + const { classProps, props: modifiedProps } = useCheckboxStyleProps(props); const { id, label, @@ -52,6 +52,6 @@ const _CheckboxField = (props: SpiritCheckboxFieldProps, ref: ForwardedRef(_CheckboxField); +export const Checkbox = forwardRef(_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 - + ``` Advanced example usage: ```jsx - { - const { classProps, props: modifiedProps } = useCheckboxFieldStyleProps(props); +const CustomCheckbox = (props: SpiritCheckboxProps): JSX.Element => { + const { classProps, props: modifiedProps } = useCheckboxStyleProps(props); return (