Story #XXXXX: Checkbox & radio buttons

RAF :
- styler les radio buttons
- remplacer tous les checkbox/radio natifs dans les apps

Author: marob

ui/ui-frontend/projects/design-system/src/app/app-routing.module.ts

@@ -65,6 +65,7 @@ import { UploadComponent } from './components/upload/upload.component';
 import { DialogComponent } from './components/organisms/dialog/dialog.component';
 import { SnackbarComponent } from './components/organisms/snackbar/snackbar.component';
 import { SlideToggleComponent } from './components/atoms/slide-toggle/slide-toggle.component';
+import { DesignSystemRadioComponent } from './components/molecules/inputs/radio/design-system-radio.component';
 
 export interface RouteData {
   // Alternative search terms
@@ -112,6 +113,7 @@ const routes: Routes = [
           { path: 'select', component: DesignSystemSelectComponent },
           { path: 'select-with-tree', component: DesignSystemSelectWithTreeComponent },
           { path: 'checkboxes', component: DesignSystemCheckboxComponent },
+          { path: 'radios', component: DesignSystemRadioComponent },
           { path: 'datepicker', component: DesignSystemDatepickerComponent },
           { path: 'search-with-type-selector', component: DesignSystemSearchWithTypeSelectorComponent },
           { path: 'old-input', component: DesignSystemOldInputsComponent },

ui/ui-frontend/projects/design-system/src/app/components/molecules/inputs/checkbox/design-system-checkbox.component.html

@@ -1,15 +1,30 @@
 <h2>Checkboxes</h2>
 
 <h3>mat-checkbox</h3>
-@for (disabled of [false, true]; track disabled) {
-  <div class="row">
-    @for (state of [{}, { checked: true }, { indeterminate: true }]; track state) {
-      <mat-checkbox class="col" [checked]="state.checked" [indeterminate]="state.indeterminate" [disabled]="disabled">
-        Text form option label
-      </mat-checkbox>
-    }
-  </div>
-}
+<div class="gap-4">
+  @for (
+    type of [
+      { disabled: false, hover: false },
+      { disabled: false, hover: true },
+      { disabled: true, hover: false },
+    ];
+    track type
+  ) {
+    <div class="row">
+      @for (state of [{}, { checked: true }, { indeterminate: true }]; track state) {
+        <mat-checkbox
+          class="col"
+          [checked]="state.checked"
+          [indeterminate]="state.indeterminate"
+          [disabled]="type.disabled"
+          [class.hover]="type.hover"
+        >
+          Text form option label
+        </mat-checkbox>
+      }
+    </div>
+  }
+</div>
 
 <h3>input type="checkbox"</h3>
 <div class="row m-0">

ui/ui-frontend/projects/design-system/src/app/components/molecules/inputs/checkbox/design-system-checkbox.component.scss

@@ -41,6 +41,5 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
   selector: 'design-system-checkbox',
   imports: [MatCheckboxModule],
   templateUrl: './design-system-checkbox.component.html',
-  styleUrl: './design-system-checkbox.component.scss',
 })
 export class DesignSystemCheckboxComponent {}

ui/ui-frontend/projects/design-system/src/app/components/molecules/inputs/checkbox/design-system-checkbox.component.ts

@@ -0,0 +1,23 @@
+<h2>Radio buttons</h2>
+
+<h3>mat-radio-button</h3>
+<div class="gap-4">
+  @for (
+    type of [
+      { disabled: false, hover: false },
+      { disabled: false, hover: true },
+      { disabled: true, hover: false },
+    ];
+    track type
+  ) {
+    <div class="row">
+      <mat-radio-group class="hgap-4">
+        @for (state of [{}, { checked: true }]; track state) {
+          <mat-radio-button class="col" [checked]="state.checked" [disabled]="type.disabled" [class.hover]="type.hover">
+            Text form option label
+          </mat-radio-button>
+        }
+      </mat-radio-group>
+    </div>
+  }
+</div>

ui/ui-frontend/projects/design-system/src/app/components/molecules/inputs/radio/design-system-radio.component.html

@@ -0,0 +1,46 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2022)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { Component } from '@angular/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
+
+@Component({
+  selector: 'design-system-radio',
+  imports: [MatCheckboxModule, MatRadioButton, MatRadioGroup],
+  templateUrl: './design-system-radio.component.html',
+})
+export class DesignSystemRadioComponent {}

ui/ui-frontend/projects/design-system/src/app/components/molecules/inputs/radio/design-system-radio.component.ts

@@ -34,6 +34,7 @@
         "select.TITLE": "Select",
         "select-with-tree.TITLE": "Select with tree",
         "checkboxes.TITLE": "Checkboxes",
+        "radios.TITLE": "Radio buttons",
         "datepicker.TITLE": "Datepicker",
         "old-input.TITLE": "OLD input",
         "input.TITLE": "Input",

ui/ui-frontend/projects/design-system/src/assets/i18n/en.json

@@ -34,6 +34,7 @@
         "select.TITLE": "Select",
         "select-with-tree.TITLE": "Select avec arborescence",
         "checkboxes.TITLE": "Checkboxes",
+        "radios.TITLE": "Radio buttons",
         "datepicker.TITLE": "Datepicker",
         "old-input.TITLE": "OLD input",
         "input.TITLE": "Input",

ui/ui-frontend/projects/design-system/src/assets/i18n/fr.json

@@ -10,12 +10,12 @@
     &.mat-primary {
       --mdc-checkbox-selected-checkmark-color: var(--vitamui-white);
 
-      --mdc-checkbox-unselected-hover-state-layer-opacity: 1;
-      --mdc-checkbox-unselected-hover-state-layer-color: transparent;
       --mdc-checkbox-unselected-icon-color: var(--vitamui-grey-700);
 
-      --mdc-checkbox-selected-hover-state-layer-opacity: 1;
-      --mdc-checkbox-selected-hover-state-layer-color: var(--vitamui-primary-50);
+      --mat-checkbox-label-text-color: var(--vitamui-grey-900);
+
+      --mat-checkbox-disabled-label-color: var(--vitamui-grey-700);
+      --mdc-checkbox-disabled-selected-checkmark-color: var(--vitamui-grey-700);
     }
   }
   .mat-mdc-checkbox-touch-target {
@@ -32,12 +32,48 @@
     width: $boxSize;
     height: $boxSize;
     border-width: 1px;
+    border-radius: 3px;
+
+    border-color: var(--vitamui-grey-700) !important;
   }
-  .mdc-checkbox__ripple {
-    border-radius: 2px;
+  input:checked:not(:disabled),
+  input:indeterminate:not(:disabled) {
+    ~ .mdc-checkbox__background {
+      border-color: var(--vitamui-primary) !important;
+    }
+  }
+  .mat-mdc-checkbox {
+    label {
+      padding-left: 10px;
+    }
+    .mdc-checkbox__ripple {
+      border-radius: 50%;
+      width: 30px;
+      height: 30px;
+      position: absolute;
+      top: calc(50% - 15px);
+      left: calc(50% - 15px);
+      background-color: var(--vitamui-primary-50) !important;
+      opacity: 0 !important;
+    }
+    &:hover,
+    &.hover {
+      .mdc-checkbox__ripple {
+        opacity: 1 !important;
+      }
+    }
   }
   .mdc-checkbox__checkmark {
-    padding: 1px;
+    padding: 2px;
+  }
+  .mdc-checkbox__checkmark-path {
+    stroke-width: 6px;
+  }
+  .mdc-checkbox__mixedmark {
+    width: 8px;
+  }
+  .mdc-checkbox--disabled .mdc-checkbox__background {
+    background-color: var(--vitamui-grey-200) !important;
   }
 }