doc: added migration guide for Checkbox

Author: MaxLardenois

scss/forms/_checkbox.scss

@@ -19,7 +19,7 @@
   border-bottom: 1px solid $ouds-color-border-default; // TODO: Introduce design token once created
 }
 
-%control-item-reverse {
+%control-item-inverse {
   flex-direction: row-reverse;
 }
 
@@ -120,8 +120,8 @@
   @extend %control-item-border;
 }
 
-.checkbox-item-reverse {
-  @extend %control-item-reverse;
+.checkbox-item-inverse {
+  @extend %control-item-inverse;
 }
 
 .checkbox-item-divider {
@@ -259,6 +259,6 @@
   }
 
   .form-check-reverse {
-    @extend .checkbox-item-reverse;
+    @extend .checkbox-item-inverse;
   }
 }

site/assets/js/tac.js

@@ -48,7 +48,7 @@
       })
       const allowConsentButton = document.querySelector('#tarteaucitronAllAllowed')
       const denyConsentButton = document.querySelector('#tarteaucitronAllDenied')
-      const checkboxes = document.querySelectorAll('.form-check-input')
+      const checkboxes = document.querySelectorAll('.checkbox-indicator')
 
       allowConsentButton.addEventListener('click', () => {
         for (let i = 0; i < checkboxes.length; i++) {
@@ -86,7 +86,7 @@
         'tarteaucitron.userInterface.respond(document.getElementById(\'googletagmanagerAllowed\'),document.getElementById(\'googletagmanagerAllowed\').checked);'
       const toggle = document
         .createRange()
-        .createContextualFragment(
+        .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' : '')}>
             <span class="visually-hidden">Google Tag Manager</span>

site/content/docs/0.2/forms/checkbox.md

@@ -145,17 +145,17 @@ You can display an helper text by adding a `.checkbox-helper` as a sibling of a
 </div>
 {{< /example >}}
 
-### Reverse
+### Inverse
 
-You can reverse the component by adding `.checkbox-item-reverse` to a `.checkbox-item`.
+You can reverse the component by adding `.checkbox-item-inverse` to a `.checkbox-item`.
 
 {{< example >}}
-<div class="checkbox-item checkbox-item-reverse">
+<div class="checkbox-item checkbox-item-inverse">
   <div class="checkbox-item-indicator-container">
-    <input class="checkbox-indicator" type="checkbox" value="" id="checkboxReverse">
+    <input class="checkbox-indicator" type="checkbox" value="" id="checkboxInverse">
   </div>
   <div class="checkbox-item-text">
-    <label class="checkbox-label" for="checkboxReverse">Label</label>
+    <label class="checkbox-label" for="checkboxInverse">Label</label>
   </div>
 </div>
 {{< /example >}}

site/content/docs/0.2/migration-from-boosted.md

@@ -132,10 +132,46 @@ You will have to make some extra Javascript to change the styles and update the
 
 ### Checks & radios
 
-- <span class="badge text-bg-status-warning-emphasized">Warning</span> `.form-check`, `.form-check-input` and `.form-check-label` have been changed. Please make sure that the rendering is still fine.
+- <span class="badge text-bg-status-negative-emphasized">Breaking</span> Switch and radio buttons and the corresponding class `.form-switch` have been removed.
 
 - <span class="badge text-bg-status-warning-emphasized">Warning</span> `form-star-rating()` mixin has been removed as it was deprecated in Boosted v5.3.2.
 
+
+#### Checkbox
+
+- <span class="badge text-bg-status-positive-emphasized">New</span> `.checkbox-item`, `.checkbox-item-icon-container`, `.checkbox-item-indicator-container`, `.checkbox-item-text`, `.checkbox-label`, `.checkbox-indicator`, `.checkbox-helper`, `.checkbox-item-divider`, `.checkbox-item-inverse` have been added.
+
+- <span class="badge text-bg-status-negative-emphasized">Breaking</span> Checkbox is a new component compared to Boosted's Check, the DOM is therefore very different. 
+<div class="ps-taller">
+For example, if you used to write:
+
+```html
+<div class="form-check">
+  <input class="form-check-input" type="checkbox" value="" id="checkboxDefault">
+  <label class="form-check-label" for="checkboxDefault">
+    Default checkbox
+  </label>
+</div>
+```
+Now you should write:
+
+```html
+<div class="checkbox-item">
+  <div class="checkbox-item-indicator-container">
+    <input class="checkbox-indicator" type="checkbox" value="" id="checkboxDefault">
+  </div>
+  <div class="checkbox-item-text">
+    <label class="checkbox-label" for="checkboxDefault">Default checkbox</label>
+  </div>
+</div>
+```
+See [our new Checkbox page]({{< docsref "/forms/checkbox" >}}) for more information.
+</div>
+
+- <span class="badge text-bg-status-negative-emphasized">Breaking</span> `.form-check`, `.form-check-input`, `.form-check-label`, `.form-check-inline`, `.form-check-reverse` have been removed.
+
+- <span class="badge text-bg-status-warning-emphasized">Warning</span> Links in Checkboxes labels are now forbidden (they won't be interactive anyway).
+
 ## Helpers
 
 ### Color background
@@ -651,19 +687,6 @@ You will have to make some extra Javascript to change the styles and update the
       <li><code>$ouds-button-space-padding-inline-icon-none</code></li>
       <li><code>$ouds-button-space-padding-inline-icon-start</code></li>
       <li><code>$ouds-button-space-padding-inline-start-icon-end</code></li>
-      <li><code>$ouds-checkbox-border-radius</code></li>
-      <li><code>$ouds-checkbox-border-width-selected-focus</code></li>
-      <li><code>$ouds-checkbox-border-width-selected-hover</code></li>
-      <li><code>$ouds-checkbox-border-width-selected-pressed</code></li>
-      <li><code>$ouds-checkbox-border-width-selected</code></li>
-      <li><code>$ouds-checkbox-border-width-unselected-focus</code></li>
-      <li><code>$ouds-checkbox-border-width-unselected-hover</code></li>
-      <li><code>$ouds-checkbox-border-width-unselected-pressed</code></li>
-      <li><code>$ouds-checkbox-border-width-unselected</code></li>
-      <li><code>$ouds-checkbox-size-indicator</code></li>
-      <li><code>$ouds-checkbox-size-max-height</code></li>
-      <li><code>$ouds-checkbox-size-min-height</code></li>
-      <li><code>$ouds-checkbox-size-min-width</code></li>
       <li><code>$ouds-color-action-disabled-dark</code></li>
       <li><code>$ouds-color-action-disabled-light</code></li>
       <li><code>$ouds-color-action-enabled-dark</code></li>