Update RadioButton component with new prop

This commit introduces several updates to the RadioButton component. New optional props `error` and `disabled` have been added, and the `RadioButtonOptionType` has been updated with additional fields: `errorMessage`, `errorIcon`, `errorIconAltText`, `errorAriaLiveType`, `error`, and `disabled`. The existing `state` prop will be deprecated, and the new `checked`, `disabled`, and `error` props will be used to control the state of the RadioButton internally. These changes enhance the flexibility and usability of the RadioButton component.

Author: Hector Arce De Las Heras

src/components/radioButtonGroup/__tests__/aria.utils.test.ts

@@ -0,0 +1,34 @@
+import { buildAriaLabelledBy } from '../utils';
+
+const descriptionId = 'descriptionId';
+const screenReaderId = 'screenReaderId';
+const errorMessage = 'error';
+const errorMessageId = '1234';
+const error = false;
+
+describe('Utils aria', () => {
+  it('If descriptionId no exits', () => {
+    const descriptionId = undefined;
+    expect(
+      buildAriaLabelledBy({
+        descriptionId,
+        screenReaderId,
+        errorMessage,
+        errorMessageId,
+        error,
+      })
+    ).toBe('screenReaderId');
+  });
+  it('If descriptionId and error', () => {
+    const error = true;
+    expect(
+      buildAriaLabelledBy({
+        descriptionId,
+        screenReaderId,
+        errorMessage,
+        errorMessageId,
+        error,
+      })
+    ).toBe('descriptionId screenReaderId 1234');
+  });
+});

src/components/radioButtonGroup/__tests__/radioButtonGroup.test.tsx

@@ -26,7 +26,7 @@ const mockProps: IRadioButtonGroupUncontrolled = {
     {
       label: 'Secret Fruit',
       value: '?',
-      state: RadioButtonStateType.DISABLED,
+      disabled: true,
     },
     {
       label: 'Kiwis',
@@ -42,6 +42,8 @@ const mockProps: IRadioButtonGroupUncontrolled = {
       label: 'Apple',
       value: 'A',
       description: 'An apple a day keeps the doctor await',
+      errorMessage: 'Error text',
+      error: true,
       screenReader: true,
     },
   ],

src/components/radioButtonGroup/__tests__/state.utils.test.ts

@@ -0,0 +1,76 @@
+import { RadioButtonStateType } from '../types';
+import { getState, radioButtonState } from '../utils';
+
+const checked = undefined;
+const disabled = undefined;
+const error = undefined;
+const state = undefined;
+
+describe('Utils state', () => {
+  it('If disabled, it should return DISABLED state', () => {
+    const disabled = true;
+    expect(getState(checked, disabled, error, state)).toBe(RadioButtonStateType.DISABLED);
+  });
+  it('If disabled with checked, it should return DISABLED_SELECTED state', () => {
+    const checked = true;
+    const disabled = true;
+    expect(getState(checked, disabled, error, state)).toBe(RadioButtonStateType.DISABLED_SELECTED);
+  });
+  it('If error, it should return ERROR state', () => {
+    const error = true;
+    expect(getState(checked, disabled, error, state)).toBe(RadioButtonStateType.ERROR);
+  });
+  it('If error with checked, it should return ERROR_SELECTED state', () => {
+    const checked = true;
+    const error = true;
+    expect(getState(checked, disabled, error, state)).toBe(RadioButtonStateType.ERROR_SELECTED);
+  });
+  it('If checked, it should return SELECTED state', () => {
+    const checked = true;
+    expect(getState(checked, disabled, error, state)).toBe(RadioButtonStateType.SELECTED);
+  });
+  it('If not checked, it should return DEFAULT state', () => {
+    expect(getState(checked, disabled, error, state)).toBe(RadioButtonStateType.DEFAULT);
+  });
+
+  it('If checked, it should return isChecked true', () => {
+    const { isChecked, isDisabled, hasError } = radioButtonState(RadioButtonStateType.SELECTED);
+    expect(isChecked).toBeTruthy();
+    expect(isDisabled).toBeFalsy();
+    expect(hasError).toBeFalsy();
+  });
+  it('If SELECTED, it should return isChecked true, isDisabled false and hasError false', () => {
+    const { isChecked, isDisabled, hasError } = radioButtonState(RadioButtonStateType.SELECTED);
+    expect(isChecked).toBeTruthy();
+    expect(isDisabled).toBeFalsy();
+    expect(hasError).toBeFalsy();
+  });
+  it('If DISABLED_SELECTED, it should return isChecked true, isDisabled true and hasError false', () => {
+    const { isChecked, isDisabled, hasError } = radioButtonState(
+      RadioButtonStateType.DISABLED_SELECTED
+    );
+    expect(isChecked).toBeTruthy();
+    expect(isDisabled).toBeTruthy();
+    expect(hasError).toBeFalsy();
+  });
+  it('If DISABLED, it should return isChecked false, isDisabled true and hasError false', () => {
+    const { isChecked, isDisabled, hasError } = radioButtonState(RadioButtonStateType.DISABLED);
+    expect(isChecked).toBeFalsy();
+    expect(isDisabled).toBeTruthy();
+    expect(hasError).toBeFalsy();
+  });
+  it('If ERROR_SELECTED, it should return isChecked true, isDisabled false and hasError true', () => {
+    const { isChecked, isDisabled, hasError } = radioButtonState(
+      RadioButtonStateType.ERROR_SELECTED
+    );
+    expect(isChecked).toBeTruthy();
+    expect(isDisabled).toBeFalsy();
+    expect(hasError).toBeTruthy();
+  });
+  it('If ERROR, it should return isChecked false, isDisabled false and hasError true', () => {
+    const { isChecked, isDisabled, hasError } = radioButtonState(RadioButtonStateType.ERROR);
+    expect(isChecked).toBeFalsy();
+    expect(isDisabled).toBeFalsy();
+    expect(hasError).toBeTruthy();
+  });
+});

src/components/radioButtonGroup/components/radioButton/radioButton.styled.ts

@@ -17,47 +17,35 @@ interface IRadioButtonContentStyled {
   hasLabel?: boolean;
 }
 
+interface IRadioButtonErrorStyled {
+  styles?: RadioButtonBaseStyles;
+}
+
 const getDynamicStyles = (styles?: RadioButtonBaseStyles) => css`
   ${getStyles(styles?.radioButton)}
 
   &:before {
+    content: '';
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
     ${getStyles(styles?.icon)}
   }
 `;
 
 export const RadioButtonContainerInput = styled.div<IRadioButtonStyled>`
   ${props => getStyles(props.styles[RadioButtonStateType.DEFAULT]?.radioButtonContainer)}
 `;
+
 export const RadioButtonInputStyled = styled.input<IRadioButtonStyled>`
   appearance: none;
   cursor: pointer;
   display: inline-block;
   vertical-align: bottom;
   position: relative;
 
-  ${({ styles }) => getDynamicStyles(styles[RadioButtonStateType.DEFAULT])}
-
-  // Check - Centering & sizing
-  &:before {
-    content: '';
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &:checked:not(:disabled) {
-    ${({ styles }) => getDynamicStyles(styles[RadioButtonStateType.SELECTED])}
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    ${({ styles }) => getDynamicStyles(styles[RadioButtonStateType.DISABLED])}
-
-    :checked {
-      ${({ styles }) => getDynamicStyles(styles[RadioButtonStateType.DISABLED_SELECTED])}
-    }
-  }
+  ${({ styles, state }) => state && getDynamicStyles(styles?.[state])}
 
   &:focus-visible {
     border-radius: 100%;
@@ -82,3 +70,14 @@ export const RadioButtonLabelStyled = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export const RadioButtonErrorStyled = styled.div<IRadioButtonErrorStyled>`
+  ${({ styles }) => getStyles(styles?.errorMessageContainer)};
+  p {
+    display: flex;
+  }
+`;
+
+export const ErrorIconWrapperStyled = styled.span<IRadioButtonErrorStyled>`
+  ${({ styles }) => getStyles(styles?.errorMessageIconContainer)};
+`;

src/components/radioButtonGroup/components/radioButton/radioButton.tsx

@@ -6,19 +6,35 @@ import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { VariantStyles } from '@/types/variantStyles';
 
 import { RadioButtonGroupStylesType } from '../../types';
+import { getState, radioButtonState } from '../../utils';
 import { RadioButtonStandAlone } from './radioButtonStandAlone';
 import { IRadioButton, IRadioButtonStandAlone } from './types';
 
 const STYLES_NAME = 'RADIO_BUTTON_GROUP_STYLES';
 
 const RadioButtonComponent = ({
   checked = false,
+  error = false,
+  disabled = false,
   styles: propsStyles,
+  state: propsState,
   ...props
 }: IRadioButton): JSX.Element => {
   const styles = useStyles<VariantStyles<RadioButtonGroupStylesType>>(STYLES_NAME, props.variant);
+  const state = getState(checked, disabled, error, propsState);
+  // deprecated - use only `error`, `disabled` and `checked` props when `state` prop is removed from `RadioButton`
+  const { isChecked, isDisabled, hasError } = radioButtonState(state);
 
-  return <RadioButtonStandAlone checked={checked} styles={propsStyles ?? styles} {...props} />;
+  return (
+    <RadioButtonStandAlone
+      checked={isChecked}
+      disabled={isDisabled}
+      error={hasError}
+      state={state}
+      styles={propsStyles ?? styles}
+      {...props}
+    />
+  );
 };
 
 export const RadioButton = (props: IRadioButton): JSX.Element => (