CHANGED: README

ADDED: Labels for switch and radio component

src/primitive-components/checkbox-layout/checkbox-layout.types.ts

@@ -6,3 +6,7 @@ export interface CheckboxLayoutProps
     typeInput?: string;
     type?: string;
 }
+
+export interface LabelPlacement {
+    labelPlacement?: 'left' | 'right';
+}

src/primitive-components/radio/radio.tsx

@@ -5,14 +5,16 @@ import { RippleArea } from '../ripple/ripple-area';
 import { forwardRef, useRef, useState } from 'react';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
+import { bool, oneOf, string } from 'prop-types';
+import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
 
 /**
  * Radio component
  ** description
  */
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-    ({ centralRipple, ...props }, ref) => {
+export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
+    ({ centralRipple, children, labelPlacement = 'right', ...props }, ref) => {
         const [isActive, setIsActive] = useState<boolean>(false),
             ripplesRef = useRef(null),
             events = useRippleEffect(ripplesRef, setIsActive);
@@ -22,28 +24,41 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
 
         return (
             <div {...events} className={classes}>
-                <CheckBoxLayout {...props} ref={ref} type={'radio'} />
-                <span className={'m3 m3-radio-state-layer'} />
-                <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
-                    <circle
-                        className={'m3-radio-outline'}
-                        cx={'50%'}
-                        cy={'50%'}
+                {children && labelPlacement === 'left' && (
+                    <label htmlFor={props.id}>{children}</label>
+                )}
+                <span>
+                    <CheckBoxLayout {...props} ref={ref} type={'radio'} />
+                    <span className={'m3 m3-radio-state-layer'} />
+                    <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
+                        <circle
+                            className={'m3-radio-outline'}
+                            cx={'50%'}
+                            cy={'50%'}
+                        />
+                        <circle
+                            className={'m3-radio-state'}
+                            cx={'50%'}
+                            cy={'50%'}
+                        />
+                    </svg>
+                    <RippleArea
+                        callback={setIsActive}
+                        central={centralRipple}
+                        className={'m3-checkbox-ripple-layer'}
+                        ref={ripplesRef}
                     />
-                    <circle
-                        className={'m3-radio-state'}
-                        cx={'50%'}
-                        cy={'50%'}
-                    />
-                </svg>
-                <RippleArea
-                    callback={setIsActive}
-                    central={centralRipple}
-                    className={'m3-checkbox-ripple-layer'}
-                    ref={ripplesRef}
-                />
-                {props.children}
+                </span>
+                {children && labelPlacement === 'right' && (
+                    <label htmlFor={props.id}>{children}</label>
+                )}
             </div>
         );
     },
 );
+
+Radio.propTypes = {
+    children: string,
+    centralRipple: bool,
+    labelPlacement: oneOf(['left', 'right']),
+};

src/primitive-components/radio/radio.types.ts

@@ -3,5 +3,6 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';
 
 export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
     RipplePropsForComponents<HTMLInputElement> & {
+        children?: string;
         centralRipple?: boolean;
     };

src/primitive-components/switch/switch.tsx

@@ -3,35 +3,60 @@
 import React, { forwardRef } from 'react';
 import { SwitchMainProps } from './switch.types';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
+import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
 
 /**
  * Switch component
  ** description
  */
 
-export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
-    ({ icon, disabled, selected = false, ...props }, ref) => (
+export const Switch = forwardRef<
+    HTMLInputElement,
+    SwitchMainProps & LabelPlacement
+>(
+    (
+        {
+            icon,
+            disabled,
+            selected = false,
+            children,
+            labelPlacement = 'right',
+            ...props
+        },
+        ref,
+    ) => (
         <div className={'m3 m3-switch'}>
-            <CheckBoxLayout
-                {...props}
-                className={`m3 ${props.className ?? ''}`.trimEnd()}
-                disabled={disabled}
-                ref={ref}
-                type={'checkbox'}
-            />
-            <svg>
-                <rect className={'m3 m3-switch-track'} />
-                <circle className={'m3 m3-switch-handler'} />
-                <circle className={'m3 m3-switch-handler-state-layer'} />
-                <g>
-                    {icon && !selected && (
-                        <text className={'m3 m3-icon-unchecked'}>close</text>
-                    )}
-                    {icon && (
-                        <text className={'m3 m3-icon-checked'}>check</text>
-                    )}
-                </g>
-            </svg>
+            {children && labelPlacement === 'left' && (
+                <label htmlFor={props.id}>{children}</label>
+            )}
+            <span>
+                <CheckBoxLayout
+                    {...props}
+                    className={`m3 ${props.className ?? ''}`.trimEnd()}
+                    disabled={disabled}
+                    ref={ref}
+                    type={'checkbox'}
+                />
+                <svg>
+                    <rect className={'m3 m3-switch-track'} />
+                    <circle className={'m3 m3-switch-handler'} />
+                    <circle className={'m3 m3-switch-handler-state-layer'} />
+                    <g>
+                        {icon && !selected && (
+                            <text className={'m3 m3-icon-unchecked'}>
+                                close
+                            </text>
+                        )}
+                        {icon && (
+                            <text className={'m3 m3-icon-checked'}>check</text>
+                        )}
+                    </g>
+                </svg>
+            </span>
+
+            {children && labelPlacement === 'right' && (
+                <label htmlFor={props.id}>{children}</label>
+            )}
         </div>
     ),
 );