fix(checkbox,radio): pass required prop to label #115 (#498)

* feat(form-label): update label prop type to ReactNode #486

* fix(checkbox,radio): pass required prop to label #115

Author: airikej

src/tedi/components/form/checkbox/checkbox.spec.tsx

@@ -210,4 +210,10 @@ describe('Checkbox component', () => {
 
     expect(label.click).toHaveBeenCalled();
   });
+
+  it('renders required indicator when required prop is true', () => {
+    render(<Checkbox id="checkbox-id" label="Checkbox Label" value="checkbox-value" name="checkbox-group" required />);
+
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
 });

src/tedi/components/form/checkbox/checkbox.stories.tsx

@@ -161,6 +161,14 @@ export const States = () => {
               />
             </Col>
           </Row>
+          <Row>
+            <Col md={3}>
+              <Text modifiers="bold">Required</Text>
+            </Col>
+            <Col>
+              <Checkbox id="check-required" label="Text" name="check-required" value="check" required />
+            </Col>
+          </Row>
         </VerticalSpacing>
       </Col>
     </Row>

src/tedi/components/form/checkbox/checkbox.tsx

@@ -34,6 +34,7 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => {
     tooltip,
     invalid,
     size = 'default',
+    required,
     ...rest
   } = props;
   const [innerChecked, setInnerChecked] = React.useState<boolean>(defaultChecked || false);
@@ -53,7 +54,7 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => {
   const helperId = helper ? helper.id ?? `${id}-helper` : undefined;
   const tooltipId = tooltip ? `${id}-tooltip` : undefined;
 
-  const LabelBEM = cn(styles['tedi-checkbox'], { [styles['tedi-checkbox--disabled']]: disabled });
+  const LabelBEM = cn(styles['tedi-checkbox__label'], { [styles['tedi-checkbox--disabled']]: disabled });
 
   return (
     <div data-name="check" {...rest}>
@@ -100,8 +101,8 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => {
             </div>
           </div>
         </Col>
-        <Col>
-          {label && typeof label === 'string' ? (
+        {label && (
+          <Col>
             <FormLabel
               ref={labelRef}
               className={LabelBEM}
@@ -110,13 +111,10 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => {
               hideLabel={hideLabel}
               label={label}
               tooltip={tooltip}
+              required={required}
             />
-          ) : (
-            <label ref={labelRef} htmlFor={id} className={LabelBEM} data-testid="checkbox-label">
-              {label}
-            </label>
-          )}
-        </Col>
+          </Col>
+        )}
       </Row>
       {helper && (
         <FeedbackText id={helperId} {...helper} className={cn(styles['tedi-checkbox__helper'], helper.className)} />

src/tedi/components/form/choice-input.types.ts

@@ -8,7 +8,7 @@ export interface ChoiceInputProps {
   /**
    * Label text
    */
-  label: string | React.ReactNode;
+  label: React.ReactNode;
   /**
    * Additional classes.
    */
@@ -61,4 +61,8 @@ export interface ChoiceInputProps {
    * Whether the input is marked as invalid.
    */
   invalid?: boolean;
+  /**
+   * Whether the input is marked as required.
+   */
+  required?: boolean;
 }

src/tedi/components/form/radio/radio.spec.tsx

@@ -222,4 +222,10 @@ describe('Radio component', () => {
 
     expect(label.click).toHaveBeenCalled();
   });
+
+  it('renders required indicator when required prop is true', () => {
+    render(<Radio id="radio-id" label="Radio Label" value="radio-value" name="radio-group" required />);
+
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
 });

src/tedi/components/form/radio/radio.stories.tsx

@@ -131,6 +131,14 @@ export const States = () => {
               />
             </Col>
           </Row>
+          <Row>
+            <Col md={3}>
+              <Text modifiers="bold">Required</Text>
+            </Col>
+            <Col>
+              <Radio id="radio-required" label="Text" name="radio-required" value="radio" required />
+            </Col>
+          </Row>
         </VerticalSpacing>
       </Col>
     </Row>

src/tedi/components/form/radio/radio.tsx

@@ -26,6 +26,7 @@ export const Radio = (props: RadioProps): JSX.Element => {
     tooltip,
     size = 'default',
     invalid,
+    required,
     ...rest
   } = props;
 
@@ -46,7 +47,7 @@ export const Radio = (props: RadioProps): JSX.Element => {
   const helperId = helper ? helper.id ?? `${id}-helper` : undefined;
   const tooltipId = tooltip ? `${id}-tooltip` : undefined;
 
-  const LabelBEM = cn(styles['tedi-radio'], { [styles['tedi-radio--disabled']]: disabled });
+  const LabelBEM = cn(styles['tedi-radio__label'], { [styles['tedi-radio--disabled']]: disabled });
 
   return (
     <div data-name="radio" {...rest}>
@@ -78,8 +79,8 @@ export const Radio = (props: RadioProps): JSX.Element => {
             />
           </div>
         </Col>
-        <Col>
-          {label && typeof label === 'string' ? (
+        {label && (
+          <Col>
             <FormLabel
               ref={labelRef}
               className={LabelBEM}
@@ -88,13 +89,10 @@ export const Radio = (props: RadioProps): JSX.Element => {
               hideLabel={hideLabel}
               label={label}
               tooltip={tooltip}
+              required={required}
             />
-          ) : (
-            <label ref={labelRef} htmlFor={id} className={LabelBEM} data-testid="radio-label">
-              {label}
-            </label>
-          )}
-        </Col>
+          </Col>
+        )}
       </Row>
 
       {helper && (