feat(CFormCheck): add hitArea prop

Author: mrholek

src/components/form/CFormCheck.tsx

@@ -40,6 +40,10 @@ export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
    * A string of all className you want applied to the component. [docs]
    */
   className?: string
+  /**
+   * Sets hit area to the full area of the component. [docs]
+   */
+  hitArea?: 'full'
   /**
    * The id global attribute defines an identifier (ID) that must be unique in the whole document. [docs]
    */
@@ -70,7 +74,10 @@ export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
-  ({ className, button, id, inline, invalid, label, type = 'checkbox', valid, ...rest }, ref) => {
+  (
+    { className, button, hitArea, id, inline, invalid, label, type = 'checkbox', valid, ...rest },
+    ref,
+  ) => {
     const _className = classNames(
       'form-check',
       {
@@ -84,6 +91,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
     const inputClassName = classNames(button ? 'btn-check' : 'form-check-input', {
       'is-invalid': invalid,
       'is-valid': valid,
+      'me-2': hitArea,
     })
     const labelClassName = classNames(
       button
@@ -116,10 +124,17 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
         {label && formLabel()}
       </>
     ) : label ? (
-      <div className={_className}>
-        {formControl()}
-        {formLabel()}
-      </div>
+      hitArea ? (
+        <CFormLabel customClassName={className} {...(id && { htmlFor: id })}>
+          {formControl()}
+          {label}
+        </CFormLabel>
+      ) : (
+        <div className={_className}>
+          {formControl()}
+          {formLabel()}
+        </div>
+      )
     ) : (
       formControl()
     )
@@ -129,6 +144,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
 CFormCheck.propTypes = {
   button: PropTypes.object,
   className: PropTypes.string,
+  hitArea: PropTypes.oneOf(['full']),
   id: PropTypes.string,
   inline: PropTypes.bool,
   invalid: PropTypes.bool,