✨ feat(radio): radio rich sans images & pictogram à la place d'img [D…

…S-1315] (#540) Les radios riches doivent utiliser des pictogrammes et non des images : - Retrait des images - Ajout de pictogramme Le snippet : ```html <div class="fr-radio-group fr-radio-rich"> <input value="1" type="radio" id="radio-rich-1" name="radio-rich"> <label class="fr-label" for="radio-rich-1"> Libellé bouton radio </label> <div class="fr-radio-rich__img"> <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" /> </div> </div> ``` DEVIENT : ```html <div class="fr-radio-group fr-radio-rich"> <input value="1" type="radio" id="radio-rich-1" name="radio-rich"> <label class="fr-label" for="radio-rich-1"> Libellé bouton radio </label> <div class="fr-radio-rich__pictogram"> <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px"> <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use> <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use> <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use> </svg> </div> </div> ``` Remplacer buildings/city-hall par la catégorie et le nom du pictogramme désiré BREAKING CHANGE : `fr-radio-rich__img` devient `fr-radio-rich__pictogram`
GouvernementFR · Jun 19, 2023 · 5d0def0 · 5d0def0
1 parent 7b81be2
commit 5d0def0
Show file tree

Hide file tree

Showing 17 changed files with 163 additions and 87 deletions.
diff --git a/module/color/variable/_box-shadows.scss b/module/color/variable/_box-shadows.scss
@@ -8,6 +8,7 @@ $values: (
   top-1-in: inset 0 1px 0 0 $COLOR,
   top-1-out: 0 -1px 0 0 $COLOR,
   right-1-in: inset -1px 0 0 0 $COLOR,
+  right-1-out: 1px 0 0 0 $COLOR,
   bottom-1-in: inset 0 -1px 0 0 $COLOR,
   bottom-1-out: 0 1px 0 0 $COLOR,
   left-1-in: inset 1px 0 0 0 $COLOR,

diff --git a/src/component/display/example/sample/body.ejs b/src/component/display/example/sample/body.ejs
@@ -7,7 +7,7 @@ const getRadioData = (label, pictogram, scheme, hint) => {
     data: {
       name: name,
       rich: true,
-      image: { name: pictogram, type: 'pictogram' },
+      pictogram: { name: pictogram },
       label: label,
       hint: hint,
       attributes: { value: scheme},

diff --git a/src/component/form/deprecated/style/_module.scss b/src/component/form/deprecated/style/_module.scss
@@ -43,25 +43,15 @@
       display: inline-flex;
 
       &:not(:last-child) {
-        input[type="radio"] + label {
-          @include margin-right(7v);
-        }
+        @include margin-right(7v);
       }
 
       &:first-child {
         @include margin-top(0);
-
-        input[type="radio"] + label {
-          @include margin-top(0);
-        }
       }
 
       &:last-child {
         @include margin-bottom(0);
-
-        input[type="radio"] + label {
-          @include margin-bottom(0);
-        }
       }
     }
   }
@@ -74,7 +64,7 @@
     #{ns-group(radio)},
     #{ns-group(checkbox)} {
       &:first-child {
-        @include margin-top(-4v);
+        @include margin-top(-3v);
       }
 
       label {

diff --git a/src/component/form/style/module/_fieldset.scss b/src/component/form/style/module/_fieldset.scss
@@ -49,6 +49,7 @@
 
   &__element {
     flex: 1 1 100%;
+    @include max-width(100%);
     @include padding-x(2v);
     @include margin-bottom(4v);
 

diff --git a/src/component/radio/deprecated/example/sample/radio-rich.ejs b/src/component/radio/deprecated/example/sample/radio-rich.ejs
@@ -4,7 +4,7 @@ let jsonData = JSON.parse(include('../../../../form/deprecated/example/sample/da
 let data = {...radio, ...jsonData};
 
 data.label = radio.label || 'Label radio';
-data.image = radio.image || imgData('img/placeholder.1x1.png', 'unknown');
+data.image = radio.image !== false ? radio.image || {type: 'pictogram', name: 'city-hall'} : radio.image;
 data.rich = true;
 %>
 

diff --git a/src/component/radio/deprecated/style/_module.scss b/src/component/radio/deprecated/style/_module.scss
@@ -19,21 +19,16 @@
     }
 
     #{ns(radio-rich)} {
-      &:first-child {
-        input[type="radio"] + label {
-          @include margin-top(3v);
-        }
-      }
+      @include margin-top(2v);
+      @include margin-bottom(4v);
 
-      input[type="radio"] + label {
-        @include margin-top(2v);
-        @include margin-bottom(4v);
-      }
 
       &:last-child {
-        input[type="radio"] + label {
-          @include margin-bottom(3v);
-        }
+        @include margin-bottom(3v);
+      }
+
+      &:first-child {
+        @include margin-top(0);
       }
     }
   }
@@ -42,25 +37,13 @@
     #{ns(fieldset__content)} {
       #{ns(radio-rich)} {
         &:not(:last-child) {
-          input[type="radio"] + label {
-            @include margin-right(3v);
-            @include margin-bottom(2v);
-          }
-
-          #{ns(radio-rich)}__img {
-            right: spacing.space(4v);
-          }
-        }
-
-        &:last-child {
-          margin-bottom: 0;
-
-          input[type="radio"] + label {
-            @include margin-bottom(3v);
-          }
+          @include margin-right(3v);
+          @include margin-bottom(2v);
         }
 
         &:first-child {
+          @include margin-top(3v);
+
           #{ns(radio-rich)}__img {
             top: spacing.space(4v);
           }
@@ -75,9 +58,44 @@
     #{ns(hint-text)} + #{ns(fieldset__content)} {
       #{ns(radio-rich)} {
         &:first-child {
-          input[type="radio"] + label {
-            @include margin-top(6v);
-          }
+          @include margin-top(6v);
+        }
+      }
+    }
+  }
+}
+
+// img devient pictogram
+#{ns(radio-rich)} {
+  &__img {
+    @include display-flex(row, center, center);
+    @include margin-left(-1px);
+    @include padding(1v);
+    @include size(22v);
+    @include min-width(22v);
+    align-self: stretch;
+    pointer-events: none;
+    background-size: 100% 1px, 100% 1px, 1px 100%, 1px calc(100% - 0.5rem);
+    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+    background-position: 0 0, 0 100%, 100% 0, 0 0.25rem;
+
+    img,
+    svg {
+      @include max-size(14v, 14v);
+    }
+  }
+
+  input[type="radio"] {
+    &:not(:disabled) ~ label {
+      &:hover {
+        + #{ns(radio-rich__img)} {
+          background-color: var(--hover);
+        }
+      }
+
+      &:active {
+        + #{ns(radio-rich__img)} {
+          background-color: var(--active);
         }
       }
     }

diff --git a/src/component/radio/deprecated/style/_scheme.scss b/src/component/radio/deprecated/style/_scheme.scss
@@ -0,0 +1,40 @@
+////
+/// Radio Scheme : radio rich
+/// @group radio
+////
+
+@use 'module/color';
+@use 'module/disabled';
+@use 'module/selector';
+
+// img devient pictogram
+@mixin _radio-scheme-deprecated($legacy: false) {
+  #{ns(radio-rich)} {
+    &__img {
+      @include color.background-image((border default grey) (border default grey) (border default grey) (border default grey), (legacy: $legacy));
+      @include color.background((background default grey), (legacy: $legacy));
+    }
+
+    input[type="radio"] {
+      @include disabled.selector {
+        ~ #{selector.ns(radio-rich__img)} {
+          svg * {
+            @include color.fill(text disabled grey, (legacy: $legacy));
+          }
+        }
+      }
+
+      &:checked {
+        ~ #{ns(radio-rich__img)} {
+          @include color.background-image((action-high blue-france) (action-high blue-france) (action-high blue-france) (border default grey) , (legacy: $legacy));
+        }
+
+        @include disabled.selector {
+          ~ #{ns(radio-rich__img)} {
+            @include color.background-image((text disabled grey) (text disabled grey) (text disabled grey) (border default grey), (legacy: $legacy));
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/component/radio/example/index.ejs b/src/component/radio/example/index.ejs
@@ -32,6 +32,10 @@
 
 <%- sample('Ensemble de boutons radio riches, en ligne, simple', './sample/radios-rich.ejs', { radios: { id:'radio-rich-inline', inline:true } }, true); %>
 
+<%- sample('Ensemble de boutons radio riches sans pictogramme', './sample/radios-rich.ejs', { radios: { id:'radio-rich-no-img'}, radio: { pictogram: false }}, true); %>
+
+<%- sample('Ensemble de boutons radio riches sans pictogramme', './sample/radios-rich.ejs', { radios: { id:'radio-rich-no-pictogram-inline', inline: true }, radio: { pictogram: false }}, true); %>
+
 <%- sample('Ensemble de boutons radio riches avec textes d\'aide', './sample/radios-rich.ejs', { radios: { id:'radio-rich-hint', hint: true }, radio: { hint: 'Texte de description additionnel' }}, true); %>
 
 <%- sample('Ensemble de boutons radio riches avec textes d\'aide, en ligne', './sample/radios-rich.ejs', { radios: { id:'radio-rich-hint-inline', hint: true, inline:true }, radio: { hint: 'Texte de description additionnel' } }, true); %>

diff --git a/src/component/radio/example/sample/radios-rich.ejs b/src/component/radio/example/sample/radios-rich.ejs
@@ -2,7 +2,7 @@
   const radios = locals.radios || {}
   const radio = locals.radio || {};
   radio.rich = true;
-  radio.image = radio.image || imgData('img/placeholder.1x1.png', 'unknown');
+  radio.pictogram = radio.pictogram !== false ? radio.pictogram || {name: 'city-hall'} : radio.pictogram;
 %>
 
 <%- include('radios', { radios: radios, radio: radio }); %>
diff --git a/src/component/radio/legacy.scss b/src/component/radio/legacy.scss
@@ -10,7 +10,10 @@
 @include media-query.order;
 
 @import 'index';
-@import 'style/legacy';
 @import 'style/scheme';
 
 @include _radio-scheme(true);
+
+@import 'deprecated/style/scheme';
+
+@include _radio-scheme-deprecated(true);
diff --git a/src/component/radio/main.scss b/src/component/radio/main.scss
@@ -21,3 +21,6 @@
 
 // deprecated
 @import 'deprecated/style/module';
+@import 'deprecated/style/scheme';
+
+@include _radio-scheme-deprecated;
diff --git a/src/component/radio/style/module/_default.scss b/src/component/radio/style/module/_default.scss
@@ -8,6 +8,7 @@
 
 #{selector.ns-group(radio)} {
   @include relative;
+  @include max-width('max-content');
 
   input[type="radio"] {
     @include absolute;
@@ -16,9 +17,9 @@
     opacity: 0;
 
     + label {
-      @include relative;
+      // @include relative;
       -webkit-tap-highlight-color: transparent;
-      @include display-flex(row, center, flex-start, wrap);
+      @include display-flex(column, flex-start, flex-start);
       @include padding-left(8v);
       background-position: calc(#{spacing.space(-1v)} + 1px) calc(#{spacing.space(-1v)} + 1px), calc(#{spacing.space(-1v)} + 1px) calc(#{spacing.space(-1v)} + 1px);
       background-size: #{spacing.space(7.5v)} #{spacing.space(7.5v)}, #{spacing.space(7.5v)} #{spacing.space(7.5v)};

diff --git a/src/component/radio/style/module/_rich.scss b/src/component/radio/style/module/_rich.scss
@@ -8,6 +8,8 @@
 
 #{selector.ns(radio-rich)} {
   @include relative;
+  @include display-flex(row, center);
+  @include max-width(100%);
 
   input[type="radio"] {
     @include size(4v, 4v);
@@ -17,7 +19,8 @@
     + label {
       @include padding-left(14v);
       @include margin-left(0);
-      min-height: spacing.space(22v);
+      align-self: stretch;
+      min-height: spacing.space(20v);
       @include size(100%);
       @include padding-top(2v);
       @include padding-bottom(2v);
@@ -26,41 +29,51 @@
       background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%, #{space(4.5v)} #{space(4.5v)}, #{space(4.5v)} #{space(4.5v)};
       background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
       background-position: 0 0, 100% 0, 0 100%, 0 0, #{space(7v)} 50%, #{space(7v) 50%};
-      // retire le focus sur l'input
-      @include before(none);
 
-      #{selector.ns(hint-text)} {
+      @include before('', block) {
+        @include absolute(0, 0, 0, 0, 100%, 100%);
         @include margin-left(0);
+        border-radius: 0;
       }
-    }
 
-    &:disabled,
-    &[disabled] {
-      ~ #{selector.ns(radio-rich__img)} {
-        filter: grayscale(1);
+      #{selector.ns(hint-text)} {
+        @include margin-left(0);
       }
     }
 
     &:not(:disabled) ~ label {
       @include hover-tint;
       @include enable-tint;
-    }
 
-    @include hover-brighten('&:not(:disabled) ~ label', '~ #{selector.ns(radio-rich__img)}');
+      &:hover {
+        + #{ns(radio-rich__pictogram)} {
+          background-color: var(--hover);
+        }
+      }
+
+      &:active {
+        + #{ns(radio-rich__pictogram)} {
+          background-color: var(--active);
+        }
+      }
+    }
   }
 
-  &__img {
-    @include hover-brighten-filter;
-    @include padding-left(1v);
-    @include size(21v, 20v);
-    @include absolute(1v, 1v);
-    @include display-flex;
+  &__pictogram {
+    @include display-flex(row, center, center);
+    @include margin-left(-1px);
+    @include padding(1v);
+    @include size(22v);
+    @include min-width(22v);
+    align-self: stretch;
     pointer-events: none;
+    background-size: 100% 1px, 100% 1px, 1px 100%, 1px calc(100% - 0.5rem);
+    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+    background-position: 0 0, 0 100%, 100% 0, 0 0.25rem;
 
     img,
     svg {
-      max-width: spacing.space(20v);
-      object-fit: cover;
+      @include max-size(14v, 14v);
     }
   }
 }

diff --git a/src/component/radio/style/scheme/_rich.scss b/src/component/radio/style/scheme/_rich.scss
@@ -8,9 +8,10 @@
 @use 'module/selector';
 
 @mixin _radio-scheme-rich($legacy: false) {
-  #{ns(radio-rich)} {
-    &__img {
-      @include color.box-shadow(default grey, (legacy:$legacy), left-1-in);
+  #{selector.ns(radio-rich)} {
+    &__pictogram {
+      @include color.background-image((border default grey) (border default grey) (border default grey) (border default grey), (legacy: $legacy));
+      @include color.background((background default grey), (legacy: $legacy));
     }
 
     input[type="radio"] {
@@ -36,10 +37,18 @@
           @include color.background-image((action-high blue-france) (action-high blue-france) (action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}');
         }
 
+        ~ #{selector.ns(radio-rich__pictogram)} {
+          @include color.background-image((action-high blue-france) (action-high blue-france) (action-high blue-france) (border default grey), (legacy: $legacy));
+        }
+
         @include disabled.selector {
           + label {
             @include color.background-image((disabled grey) (disabled grey) (text disabled grey), (legacy: $legacy), '#{radio-rich-background-image(true)}');
           }
+
+          ~ #{selector.ns(radio-rich__pictogram)} {
+            @include color.background-image((disabled grey) (disabled grey) (disabled grey) (border default grey), (legacy: $legacy));
+          }
         }
       }
     }