-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE(web-react): Rename CheckboxField component to `Checkb…
…ox` #DS-522 ## 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.
- Loading branch information
Showing
25 changed files
with
204 additions
and
204 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
packages/web-react/src/components/Checkbox/Checkbox.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
packages/web-react/src/components/Checkbox/__tests__/useCheckboxStyleProps.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}`); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export * from './Checkbox'; | ||
| export * from './useCheckboxStyleProps'; | ||
| export { default as Checkbox } from './Checkbox'; |
8 changes: 8 additions & 0 deletions
8
packages/web-react/src/components/Checkbox/stories/Checkbox.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
6 changes: 3 additions & 3 deletions
6
...Field/stories/CheckboxFieldHelperText.tsx → ...s/Checkbox/stories/CheckboxHelperText.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
...eckboxField/stories/CheckboxFieldItem.tsx → ...ponents/Checkbox/stories/CheckboxItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
packages/web-react/src/components/Checkbox/stories/CheckboxProps.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
14 changes: 7 additions & 7 deletions
14
.../stories/CheckboxFieldValidationState.tsx → ...ckbox/stories/CheckboxValidationState.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
59 changes: 59 additions & 0 deletions
59
packages/web-react/src/components/Checkbox/useCheckboxStyleProps.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| }, | ||
| }; | ||
| } |
Oops, something went wrong.