Merge pull request #2935 from Orange-OpenSource/ouds/main-2934-ouds-checkbox-enhancement-after-merge

fix(component): Checkbox, use divider token, fix doc and tac

Author: MaxLardenois

Diff for: scss/forms/_control-item.scss

@@ -238,7 +238,7 @@
 
 .control-item-divider {
   padding-bottom: subtract($ouds-control-item-space-inset, 1px);
-  border-bottom: 1px solid $ouds-color-border-default; // TODO: Introduce design token once created
+  border-bottom: $ouds-divider-border-width solid $ouds-color-border-default;
 }
 
 .control-item-reverse {

Diff for: site/assets/js/tac.js

@@ -48,7 +48,7 @@
       })
       const allowConsentButton = document.querySelector('#tarteaucitronAllAllowed')
       const denyConsentButton = document.querySelector('#tarteaucitronAllDenied')
-      const checkboxes = document.querySelectorAll('.checkbox-indicator')
+      const checkboxes = document.querySelectorAll('.control-item-indicator')
 
       allowConsentButton.addEventListener('click', () => {
         for (let i = 0; i < checkboxes.length; i++) {
@@ -88,7 +88,7 @@
         .createRange()
         .createContextualFragment( // TODO replace with a form-switch
           `<label class="checkbox-standalone ">
-            <input class="checkbox-indicator" type="checkbox" value="" id="googletagmanagerAllowed" aria-labelledby="googletagmanagerLine" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}>
+            <input class="control-item-indicator" type="checkbox" value="" id="googletagmanagerAllowed" aria-labelledby="googletagmanagerLine" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}>
             <span class="visually-hidden">Google Tag Manager</span>
             <input id="googletagmanagerDenied" class="d-none">
           </label>`

Diff for: site/content/docs/0.3/migration-from-boosted.md

@@ -164,7 +164,7 @@ Now you should write:
 
 ```html
 <div class="checkbox-item">
-  <div class="control-item-indicator-container">
+  <div class="control-item-assets-container">
     <input class="control-item-indicator" type="checkbox" value="" id="checkboxDefault">
   </div>
   <div class="control-item-text-container">