Address DSFR 1.10 changes

MTES-MCT · Sep 14, 2023 · 76ac27c · 76ac27c
1 parent e174675
commit 76ac27c
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 16 deletions.
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -111,7 +111,7 @@ label.required > .fr-x-label-content::after, legend.required > .fr-x-label-conte
 }
 
 .fr-x-background-alt--blue-france {
- background-color: var(--blue-france-975-75);
+ background-color: var(--background-alt-blue-france);
 }
 
 .fr-x-autocomplete-wrapper {
@@ -300,11 +300,9 @@ li.app-card + li.app-card {
 }
 
 .app-vehicle-image {
+ position: relative;
  display: grid !important;
  place-content: center;
- /* Without a 'height', DSFR default image separator would not span entire height. This is a problem especially on mobile. */
- /* We also account for the 2x0.25rem space that DSFR leaves between the image separator and the rich radio top and bottom borders. */
- height: calc(100% - 0.5rem) !important;
 }
 
 .app-vehicle-image__close {
@@ -314,9 +312,25 @@ li.app-card + li.app-card {
 }
 
 .app-someVehicles__radiogroup > input[type="radio"]:checked + label {
- box-shadow: none; // Drop the DSFR default, we'll place the borders ourselves.
- border: 1px solid var(--border-action-high-blue-france);
+ // DSFR uses a background-image trick to place borders AND the custom checkbox.
+ // Copy DSFR default and tweak it to use a grey bottom border.
+ background-image:
+ linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), // border-top
+ linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), // border-right
+ linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), // border-bottom -> We make it grey
+ linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), // border-left
+ radial-gradient(transparent 6px, var(--background-action-high-blue-france) 7px, transparent 8px), // Checkbox contour
+ radial-gradient(var(--background-action-high-blue-france) 3px, transparent 4px); // Checkbox dot
+}
+
+.app-someVehicles__radiogroup > input[type="radio"]:checked ~ .fr-radio-rich__pictogram {
+ // DSFR uses a background-image trick to place borders.
+ // We want to use grey left and bottom borders. Drop the default and place actual borders ourselves.
+ background-image: none;
+ border-top: 1px solid var(--border-action-high-blue-france);
+ border-right: 1px solid var(--border-action-high-blue-france);
  border-bottom: 1px solid var(--border-default-grey);
+ border-left: 1px solid var(--border-default-grey);
 }
 
 .app-someVehicles__form {

diff --git a/public/images/restriction/all_vehicles.no.svg b/public/images/restriction/all_vehicles.no.svg
diff --git a/public/images/restriction/all_vehicles.yes.svg b/public/images/restriction/all_vehicles.yes.svg
diff --git a/templates/common/form/dsfr_theme.html.twig b/templates/common/form/dsfr_theme.html.twig
@@ -97,7 +97,7 @@ https://github.com/symfony/symfony/blob/6.3/src/Symfony/Bridge/Twig/Resources/vi
 
 {% block form_errors %}
  {% if errors|length > 0 %}
- <div class="fr-messages-group" id="{{ id }}_error" aria-live="assertive">
+ <div class="fr-messages-group" id="{{ id }}_error" aria-live="polite">
  {%- for error in errors -%}
  <p class="fr-message fr-message--error">
  {{ error.message }}

diff --git a/templates/index.html.twig b/templates/index.html.twig
@@ -23,7 +23,7 @@
  </div>
  </div>
  </section>
- <section class="how-it-works fr-x-background-alt--blue-france" aria-labelledby="how-it-works">
+ <section class="how-it-works fr-x(background-alt--blue-france" aria-labelledby="how-it-works">
  <div class="fr-container fr-py-4w">
  <h2 id="how-it-works">{{ 'landing.for-who.title'|trans }}</h2>
  <div class="fr-grid-row fr-grid-row--gutters fr-grid-row">

diff --git a/templates/login.html.twig b/templates/login.html.twig
@@ -43,7 +43,7 @@
  </div>
  </div>
  </div>
- <div id="credentials-message" class="fr-messages-group" aria-live="assertive">
+ <div id="credentials-message" class="fr-messages-group" aria-live="polite">
  {% if error %}
  <p class="fr-message fr-message--error">
  {{ error.messageKey|trans(error.messageData, 'security') }}

diff --git a/templates/regulation/_vehicle_set_form.html.twig b/templates/regulation/_vehicle_set_form.html.twig
@@ -27,9 +27,11 @@
  },
  }) }}
  {{ form_label(option, null, { help: (option.vars.label ~ '.help')|trans }) }}
- <div class="fr-radio-rich__img app-vehicle-image">
- <img src="{{ asset('images/restriction/all_vehicles.' ~ option.vars.value ~ '.svg') }}" alt="" />
- <img class="app-vehicle-image__close" src="{{ asset('images/restriction/close.svg') }}" alt="" />
+ <div class="fr-radio-rich__pictogram app-vehicle-image">
+ <svg class="fr-artwork" aria-hidden="true" viewBox="0 0 26 26" width="26px" height="26px">
+ <use class="fr-artwork-major" xlink:href="{{ asset('images/restriction/all_vehicles.' ~ option.vars.value ~ '.svg') }}#artwork-major"></use>
+ </svg>
+ <img class="app-vehicle-image__close" aria-hidden="true" src="{{ asset('images/restriction/close.svg') }}" />
  </div>
  </div>
  </div>