search

wevisdemo / design-systems

WeVis monorepo for design system documentation and cross-framework UI components
https://wevisdemo.github.io/design-systems/
MIT License
16 stars 2 forks source link

Wrap checkbox with label #5

Closed rootEnginear closed 1 year ago

rootEnginear commented 1 year ago

From these below:

https://github.com/wevisdemo/design-systems/blob/e6992630b864167eb9fb651d421b682641387673/ui/src/components/cookie-consent/cookie-consent.lite.tsx#L164-L167

https://github.com/wevisdemo/design-systems/blob/e6992630b864167eb9fb651d421b682641387673/ui/src/components/cookie-consent/cookie-consent.lite.tsx#L172-L186

This can be refactor into:

<label>
  <input type="checkbox" checked disabled />
  Strictly Necessary Cookies
</label>
<label>
  <input
    type="checkbox"
    checked={state.selectedCookies[option]}
    onChange={(event) =>
      (state.selectedCookies = {
        ...state.selectedCookies,
        [option]: event.target.checked,
      })
    }
  />
  {option}
  {` `}Cookies
</label>

This will help with 2 problems:

  1. htmlFor problem.
  2. Redundant id.
rootEnginear commented 1 year ago

Fixed in 9487a953f6f35d71633b0fc95ce73a1f56031231