feat: chckbox label clickable

close #100
golemfactory · Feb 15, 2024 · c00d23d · c00d23d
1 parent f320377
commit c00d23d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -48,6 +48,7 @@
     "ts-results": "^3.3.0",
     "use-query-params": "^2.2.1",
     "usehooks-ts": "^2.9.1",
+    "uuid": "^9.0.1",
     "viem": "^2.7.9",
     "wagmi": "^2.5.7",
     "xstate": "^4.38.2"

diff --git a/frontend/src/components/atoms/checkbox/checkbox.tsx b/frontend/src/components/atoms/checkbox/checkbox.tsx
@@ -7,14 +7,15 @@ import {
 } from 'react'
 
 import style from './checkbox.module.css'
+import { v4 as uuidv4 } from 'uuid'
 
 export const Checkbox = forwardRef<
   HTMLInputElement,
   ComponentProps<'input'> & { label: ElementType; error?: boolean }
 >(function Checkbox({ label: Label, error, onChange, checked, ...rest }, ref) {
   const [isChecked, setIsChecked] = useState(checked)
   const [inputCssClass, setInputCssClass] = useState('')
-
+  const [id] = useState(uuidv4())
   useEffect(() => {
     if (isChecked) {
       setInputCssClass(style.checked)
@@ -30,6 +31,7 @@ export const Checkbox = forwardRef<
   return (
     <div className={style.checkboxWrapper}>
       <input
+        id={id}
         ref={ref}
         {...rest}
         type="checkbox"
@@ -39,7 +41,7 @@ export const Checkbox = forwardRef<
         }}
         className={`${style.checkbox} ${inputCssClass}`}
       />
-      <Label />
+      <Label htmlFor={id} />
     </div>
   )
 })
diff --git a/frontend/src/components/molecules/legal/Legal.tsx b/frontend/src/components/molecules/legal/Legal.tsx
@@ -50,15 +50,18 @@ export const Legal: FC<{
       key={'legal'}
     >
       <Checkbox
-        label={() => (
-          <div
-            className="text-body-extra-large"
-            onClick={() => {
-              setShowMore(!showMore)
-            }}
-          >
-            <Trans i18nKey="legal.thirdParty" ns="welcome.step" />
-          </div>
+        label={({ htmlFor }) => (
+          <label className="text-body-extra-large" htmlFor={htmlFor}>
+            <Trans
+              i18nKey="legal.thirdParty"
+              ns="welcome.step"
+              values={{
+                onClick: () => {
+                  setShowMore(!showMore)
+                },
+              }}
+            />
+          </label>
         )}
         error={showError && !checked.thirdParty}
         onChange={(e) => {
@@ -92,10 +95,10 @@ export const Legal: FC<{
       </AnimatePresence>
 
       <Checkbox
-        label={() => (
-          <div className="text-body-extra-large">
+        label={({ htmlFor }) => (
+          <label className="text-body-extra-large" htmlFor={htmlFor}>
             <Trans i18nKey="legal.termsAndConditions" ns="welcome.step" />
-          </div>
+          </label>
         )}
         error={showError && !checked.termsAndConditions}
         onChange={(e) => {

diff --git a/frontend/src/i18n/en/welcome.step.json b/frontend/src/i18n/en/welcome.step.json
@@ -27,9 +27,8 @@
   "machineDescription": "of full 48 threads usage for sample computer with AMD Ryzen Threadripper 3960X 24-Core Processor, 128 GB RAM, 600 GB Disk space",
   "for": "for",
   "disclaimer": "Option to revert your tokens back to traditional currency is always available to you via <RampIcon/> and <UniswapIcon/> solution. <breakLine /> Please keep in mind that, just like traditional currencies, the prices of tokens are estimates and can vary based on market values and the current usage of the blockchain network.",
-  "legal.thirdParty": "I acknowledge and agree that the Site contains links to third-party services <span className='font-medium cursor-pointer'> (More) </span> <red> * </red>",
+  "legal.thirdParty": "I acknowledge and agree that the Site contains links to third-party services <span className='font-medium cursor-pointer' onClick={{onClick}}> (More) </span> <red> * </red>",
   "legal.termsAndConditions": "I agree with <strong> <a href='https://docs.golem.network/docs/golem/terms' target='_blank'>Terms and Conditions</a> </strong> <red> * <red>",
   "legal.error": "To continue, you must accept the legal terms",
-
-  "legal.thirdParty.more" : "This Site may be integrated into or may contain links to other independent third-party services or web sites (\"Linked Sites\"). These Linked Sites are among others:<emptyLine />  <a href='https://walletconnect.com' target='_blank'><walletConnectIcon/> walletconnect.com</a><breakLine/><a href='https://ramp.network' target='_blank'> <RampIcon/>  ramp.network</a><breakLine/><a class='inline' href='https://uniswap.org' target='_blank'><UniswapIcon/> uniswap.org</a><emptyLine/>and are provided solely as a convenience to our visitors. Such Linked Sites are not under Golem’s control, and Golem is not responsible for and does not endorse the content of such Linked Sites, including any services, information or materials contained on such Linked Sites. You will need to make your own independent judgment regarding your interaction with these Linked Sites."
+  "legal.thirdParty.more": "This Site may be integrated into or may contain links to other independent third-party services or web sites (\"Linked Sites\"). These Linked Sites are among others:<emptyLine />  <a href='https://walletconnect.com' target='_blank'><walletConnectIcon/> walletconnect.com</a><breakLine/><a href='https://ramp.network' target='_blank'> <RampIcon/>  ramp.network</a><breakLine/><a class='inline' href='https://uniswap.org' target='_blank'><UniswapIcon/> uniswap.org</a><emptyLine/>and are provided solely as a convenience to our visitors. Such Linked Sites are not under Golem’s control, and Golem is not responsible for and does not endorse the content of such Linked Sites, including any services, information or materials contained on such Linked Sites. You will need to make your own independent judgment regarding your interaction with these Linked Sites."
 }