fix: checkbox

dataesr · May 13, 2022 · ced82e5 · ced82e5
1 parent ff0477d
commit ced82e5
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 9 deletions.
diff --git a/example/src/components/Checkbox/Checkbox.jsx b/example/src/components/Checkbox/Checkbox.jsx
@@ -8,6 +8,7 @@ const CheckboxExample = () => {
   return (
     <Col>
       <CheckboxGroup
+        isInline
         ariaLabel="This is the aria label"
         legend="This is the legend"
       >
@@ -19,7 +20,7 @@ const CheckboxExample = () => {
         />
         <Checkbox
           disabled
-          label="Label checkbox 2"
+          label="Label checkbox disabled"
           onChange={() => {
           }}
           value="value-2"
@@ -30,16 +31,18 @@ const CheckboxExample = () => {
         ariaLabel="With colors"
         legend="With colors"
         message="test"
+        hint="This is the hint"
         messageType="valid"
       >
         <Checkbox
           checked={isChecked}
           label="Label checkbox 2"
           onChange={() => setIsChecked(!isChecked)}
           value="value-2"
+          hint="Careful"
         />
         <Checkbox
-          label="Label checkbox 2"
+          label="Label checkbox 3"
           value="value-3"
         />
       </CheckboxGroup>

diff --git a/src/components/interface/Checkbox/Checkbox.js b/src/components/interface/Checkbox/Checkbox.js
@@ -44,13 +44,13 @@ const Checkbox = forwardRef((props, ref) => {
         {...dataAttributes.filterAll(remainingProps)}
         type="checkbox"
         id={checkboxId.current}
-        name="checkbox"
+        name={checkboxId.current}
         disabled={disabled}
         ref={ref}
       />
       <label className="fr-label" htmlFor={checkboxId.current}>
         {label}
-        {hint && <p className="fr-hint-text">{hint}</p>}
+        {hint && <span className="fr-hint-text">{hint}</span>}
       </label>
       {(message && messageType) && <p className={`fr-${messageType}-text`}>{message}</p>}
     </div>

diff --git a/src/components/interface/Checkbox/CheckboxGroup.js b/src/components/interface/Checkbox/CheckboxGroup.js
@@ -47,18 +47,19 @@ const CheckboxGroup = ({
   }, [color, theme, colorCheckbox]);
 
   return (
+
     <div
       className={_className}
       {...dataAttributes.getAll(remainingProps)}
     >
       <fieldset className="fr-fieldset" aria-label={ariaLabel || legend}>
         {legend && (
-        <legend className="fr-fieldset__legend">
+        <legend className="fr-fieldset__legend fr-text--regular">
           {legend}
+          <span className="fr-hint-text">{hint}</span>
           {required && <span className="error"> *</span>}
         </legend>
         )}
-        {hint && <p className="fr-hint-text">{hint}</p>}
         <div className="fr-fieldset__content">
           {children}
         </div>

diff --git a/src/components/interface/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/src/components/interface/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -7,7 +7,7 @@ exports[`<Checkbox /> renders correctly 1`] = `
 >
   <input
     id="xxxxxxx"
-    name="checkbox"
+    name="xxxxxxx"
     type="checkbox"
     value="value"
   />

diff --git a/src/components/interface/Download/DownloadGroup.js b/src/components/interface/Download/DownloadGroup.js
@@ -1,6 +1,7 @@
-import React, { Children } from 'react';
+import React, { Children, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { v4 as uuidv4 } from 'uuid';
 import dataAttributes from '../../../utils/data-attributes';
 
 /**
@@ -13,6 +14,7 @@ const DownloadGroup = ({
   title,
   ...remainingProps
 }) => {
+  const id = useRef(uuidv4());
   const _className = classNames(
     'fr-downloads-group fr-downloads-group--bordered',
     className,
@@ -22,7 +24,7 @@ const DownloadGroup = ({
     <div {...dataAttributes.getAll(remainingProps)} className={_className}>
       <h4 className="fr-downloads-group__title">{title}</h4>
       <ul>
-        {Children.toArray(children).map((child) => <li key={child.props.name}>{child}</li>)}
+        {Children.toArray(children).map((child) => <li key={`${child.props.label}${id.current}`}>{child}</li>)}
       </ul>
     </div>
   );