qc-trousse-sdg 1.2.5 → 1.3.0-develop.0

package/src/sdg/scss/components/_notice.scss

@@ -1,6 +1,13 @@
-@use "../modules/tokens" as *;
-@use "../modules/utils" as *;
-@use "../modules/grid" as *;
+@use "qc-sdg-lib" as *;
+
+@mixin qc-notice-title() {
+  h1,h2,h3,h4,h5,h6,[role=heading] {
+    margin: 0;
+    padding: 0;
+    @include content-font(sm, bold);
+    font-family: token-value(font, family, content);
+  }
+}
 
 .qc-notice {
   max-inline-size: token-value(max-content-width);
@@ -26,58 +33,58 @@
     width: 100%;
   }
 
-  &.qc-information .icon-container {
-    background-color: token-value(color,blue,pale);    
-  }  
-  &.qc-warning .icon-container {
-    background-color: token-value(color,yellow,pale);
-  }
-  &.qc-success .icon-container {
-    background-color: token-value(color,green,pale);
-  }
+  @include qc-notice-title();
 
-  &.qc-error .icon-container {
-      background-color: token-value(color,pink,pale);
-  }
+  //TODO Quelle est la marge entre le titre et le texte? Rien de spécifié dans le SDG.
 
 
-  /*TODO Quelle est la marge entre le titre et le texte? Rien de spécifié dans le SDG. */
-  .title {
-    margin: 0;
-    padding: 0;
-    @include content-font(sm, bold);
-    font-family: token-value(font, family, content); 
-  }
-
   .content {
       margin:
-          token-value(spacer notice my)
-          token-value(spacer notice mx)
-          token-value(spacer notice my)
+          token-value(spacer md)
+          token-value(spacer md)
+          token-value(spacer md)
           token-value(spacer, sm);
+  }
 
-    .text {
-      ::slotted(ul) {
-        padding-left: token-value(spacer, sm) !important;
-        margin-top: token-value(spacer, sm) !important;
+  @each $type, $color in (
+      "information": "blue",
+      "warning": "yellow",
+      "neutral": "grey",
+      "error": "red",
+      "success": "green",
+  ) {
+    &.qc-#{$type} .icon-container {
+      background-color: token-value(color,$color,pale);
+      [role=img] {
+        background-color: token-value(color,$color,dark);
+
+        &[data-img-type=success], &[data-img-type=error] {
+          background-color: token-value(color,$color,regular);
+        }
       }
     }
   }
 }
 
-/* Links in a error notice (eg. error summary) */
-qc-notice[type="error"] ul li a {
-  color: token-value(color,red,regular);
-  &:hover, &:focus {
-    text-decoration: none;
-  }  
-}
-
-
-@include media-mobile(){
-  .qc-notice {
-    .content {
-      margin-right: token-value(spacer notice my);
+// Links in a error notice (eg. error summary)
+qc-notice {
+  display: block;
+  @include qc-notice-title();
+  ul {
+    padding-left: token-value(spacer, sm) !important;
+    //margin-top: token-value(spacer, sm) !important;
+  }
+  &[type="error"] ul li {
+     &::marker {
+       color:token-value(color text primary);
+     }
+     color: token-value(color, red, regular);
+     a {
+      color: inherit;
+      &:hover, &:focus {
+        text-decoration: none;
+      }
     }
   }
-}
+
+}

package/src/sdg/scss/components/_pivFooter.scss

@@ -1,21 +1,26 @@
-@use "../modules/tokens" as *;
-@use "../modules/utils" as *;
-@use "../modules/grid" as *;
-
-qc-piv-footer {
-  display: block;
-  margin-top: rem(40);
-  padding-bottom: rem(4 * $base-spacer);
-  @include content-font(sm);
+@use "qc-sdg-lib" as *;
+@use "sass:math";
 
+@mixin pivLinks() {
   a {
     text-decoration: none;
     &:hover {
       text-decoration: underline;
     }
   }
+}
+
+qc-piv-footer {
+  margin-top: rem(40);
+  padding-bottom: rem(40);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include content-font(sm);
 
   ul {
+    max-inline-size: none;
     margin: 0 0 token-value(spacer sm) 0;
     padding: 0;
     width: 100%;
@@ -28,26 +33,33 @@ qc-piv-footer {
       padding: 0 token-value(spacer sm) token-value(spacer xs);
       margin: 0;
       text-align: center;
-
-      &:hover {
-        text-decoration: underline;
-      }
     }
   }
 
+  @include pivLinks();
+
 }
 
 .qc-piv-footer {
-  a {
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
+  //margin-top: rem(40);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include pivLinks();
+
+  .logo {
+    display: block;
+    width: calc(var(--logo-width) * #{$rem-ratio}rem);
+    height: calc(var(--logo-height) * #{$rem-ratio}rem);
+    img {
+      width: 100%;
+      height: 100%;
     }
   }
-
-  .qc-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  .copyright {
+    margin-top: rem(8);
   }
-}
+
+}
+

package/src/sdg/scss/components/_pivHeader.scss

@@ -1,12 +1,33 @@
-@use "../modules/tokens" as *;
-@use "../modules/utils" as *;
-@use "../modules/grid" as *;
+@use "qc-sdg-lib" as *;
+@use "sass:map";
 
+$colors : map.get($themes-tokens, light, lg, color);
+
+%piv-links {
+  &, & ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+
+    li {
+      padding: 0;
+      margin: 0;
+      @include content-font(sm);
+    }
+
+    a {
+      font-size: rem(12.8);
+    }
+  }
+}
 
 qc-piv-header {
+  --qc-piv-header-bg: 1;
   display: block;
-  min-height: rem(72);
-  background-color: token-value(color, blue, piv);
+  // pas de token ici ; le PIV a toujours ce fond, indépendamment du thème
+  // on se base donc sur les valeurs scss
+  background-color: map.get($colors, blue, piv);
   width: 100%;
 
   [slot=links] {
@@ -15,66 +36,72 @@ qc-piv-header {
 }
 
 .qc-piv-header {
-  color: token-value(color white);
-
-  a {
-    color: token-value(color white);
-    text-decoration: none;
-
-    &:hover, &:focus {
-      color: token-value(color white);
-      text-decoration: underline;
-    }
+  color: map.get($colors, white);
+  .go-to-content {
+    position: relative;
   }
-
   .piv-top {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .logo {
-      margin-right: rem(64);
-      @include media-mobile() {
-        margin: 0;
+    flex-wrap: wrap;
+    //justify-content: space-between;
+    align-items: start;
+    > * {
+      min-height: rem(72);
+    }
+    .signature-group {
+      display: flex;
+      flex-grow: 1;
+      flex-wrap: wrap;
+      align-items: start;
+      margin-right: auto;
+      * {
+        min-height: rem(72);
       }
-
-      a {
-        display: block;
+      .logo {
+        display: flex;
+        flex-basis: rem(256);
+        //margin-right: rem(64);
+        [role=img] {
+          background-image: var(--logo-src);
+          background-repeat: no-repeat;
+          background-size: 100%;
+          background-position: center;
+          margin-right: 16px;
+          min-width: 150px;
+          //object-fit: fill;
+          width: 100%;
+          max-width: rem(200);
+          min-height: rem(72);
+        }
       }
-
-      img {
-        height: rem(72);
-        min-width: rem(200);
+      .title {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        @include content-font(100);
+        flex-basis: fit-content;
+        //margin-top: auto;
+        //margin-bottom: auto;
+        //margin-right: auto;
+        //padding-right: 40px;
+        > * {
+          //display: -webkit-box;
+          //-webkit-line-clamp: 2;
+          //-webkit-box-orient: vertical;
+          //overflow: hidden;
+          //max-height: rem(72);
+        }
       }
     }
 
-    .title {
-      width: 100%;
-      padding: token-value(spacer sm) 0;
-      min-height: rem(72);
-      align-items: center;
-      display: flex;
-      margin-right: rem(40);
-
-      a {
-        @include content-font(100);
-        font-family: token-value(font, family, header);
 
-        &:hover, &:focus {
-          text-decoration: underline;
-        }
 
-        .description {
-          font-size: token-value(font size sm);
-        }
-      }
-    }
 
     .right-section {
       min-width: fit-content;
       display: flex;
       align-items: center;
-
+      flex-basis: fit-content;
       .links ul {
         @extend %piv-links;
       }
@@ -85,8 +112,15 @@ qc-piv-header {
     }
 
     .qc-search {
+      background-image: getImageUrl(loupe-piv-droite);
+      background-repeat: no-repeat;
       min-width: rem(24);
       height: rem(24);
+      margin-right: token-value(spacer md);;
+      @include media-mobile() {
+        margin-right: token-value(spacer sm);
+      }
+
       span {
         @include sr-only();
       }
@@ -94,91 +128,32 @@ qc-piv-header {
   }
 
   .piv-bottom {
-    .title {
-      display: none;
-    }
     .search-zone {
       padding-bottom: token-value(spacer md);
-      form {
-        .input-group {
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-          align-items: stretch;
-          input {
-            width: 100%;
-            padding: rem(6) rem(12) ;
-            border: 1px solid token-value(color blue dark);
-            border-right: none;
-            &:focus {
-              outline: rem(2) solid token-value(color blue light);
-              border-right: 1px solid black;
-              z-index: 1;
-            }
-            &::placeholder {
-              font-size: token-value(font size sm);
-            }
-          }
-          button {
-            display: flex;
-            justify-content: center;
-            border: 1px solid token-value(color blue dark);
-            border-left: none;
-            background-color: white;
-            width: rem(2.6 * 16);
-            &:focus{
-              outline: rem(2) solid token-value(color blue light);
-              border-left: 1px solid black;
-            }
-            .qc-search-submit {
-              min-width: rem(24);
-              height: rem(24);
-              align-self: center;
-            }
-            .sr-description {
-              position: absolute;
-              width: 1px;
-              height: 1px;
-              clip: rect(0 0 0 0);
-            }
-          }
-
-        }
-      }
     }
-
   }
 }
 
+qc-piv-header,
+.qc-piv-header {
+  a {
+    --qc-color-link-focus-outline: white;
+    --qc-color-link-hover: white;
+    --qc-color-link-text: white;
+    --qc-color-link-visited: white;
+    --qc-color-link-active: white;
 
-%piv-links {
-  &, & ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    height: 100%;
-    margin-left: token-value(spacer md);
-    @include media-mobile() {
-      margin-left: token-value(spacer sm);
-    }
+    font-family: token-value(font family header);
+    text-decoration: none;
+    font-weight: token-value(font weight regular);
 
-    li {
-      padding: 0;
-      margin: 0;
-      @include content-font(sm);
+    &:hover {
+      text-decoration: underline;
     }
-
-    a {
-      font-family: token-value(font family header);
-      text-decoration: none;
-      font-size: rem(12);
-      color: token-value(color white);
-      font-weight: token-value(font weight regular);
-
-      &:focus, &:hover {
-        text-decoration: underline;
-        color: token-value(color white);
-      }
+  }
+  a:focus-visible, a:focus {
+    &:has(img) {
+      outline-offset: -2px;
     }
   }
 }
@@ -191,53 +166,55 @@ qc-piv-header {
     @include sr-only();
 
     &:focus {
+      top: 2px;
       width: inherit;
-      height: inherit;
+      height: 24px;
       overflow: inherit;
       clip: inherit;
       white-space: inherit;
-      color: token-value(color white);
-      background-color: token-value(color blue piv);
+      color: map.get($colors, white);
+      background-color: map.get($colors, blue, piv);
+      margin:0;
     }
   }
 }
 
-
-@include media-tablet() {
+@include media-mobile(){
   .qc-piv-header {
     .piv-top {
-      .logo img {
-        min-width: rem(175);
-        width: rem(175);
+      flex-wrap: wrap;
+      .logo {
+        flex-shrink: 1;
+        margin-right: auto;
+        min-width: 0;
+        img {
+          width: 100%;
+          margin-right: rem(16);
+        }
       }
 
       .title {
-        display: none;
+        min-width: 100%;
+        padding: 0;
+        //height: auto;
+        height: fit-content;
+        max-height: fit-content;
+        order: 2;
+        margin-left: 0;
+        margin-right: 0;
+        display: flex;
+        align-items: center;
       }
 
       .right-section {
-        min-width: rem(130);
-      }
-    }
-
-    .piv-bottom {
-      .title {
-        margin: 0;
-        display: flex;
-        padding-bottom: token-value(spacer sm);
+        min-width: 0;
+        margin-right: 0;
+        margin-left: 0;
       }
     }
   }
 }
 
-@include media-mobile() {
-  .qc-piv-header {
-    .piv-top {
-      height: rem(72);
 
-      .right-section {
-        min-width: fit-content;
-      }
-    }
-  }
-}
+
+

package/src/sdg/scss/components/_searchBar.scss

@@ -0,0 +1,75 @@
+@use "qc-sdg-lib" as *;
+@use "searchInput" as *;
+
+qc-search-bar {
+  position: relative;
+  display: block;
+  max-width: rem(640);
+}
+.qc-search-bar {
+  @extend %qc-search-wrapper;
+  width: 100%;
+  border: 0;
+  &:has(input:focus) {
+    [type=submit]::before {
+      inset: 2px 2px 2px 0;
+      border: 0;
+    }
+  }
+  .qc-search-input {
+    margin:0;
+    width: 100%;
+    outline: none!important;
+    &::before {
+      content:none!important;
+    }
+  }
+
+  [type=submit] {
+    z-index: 1;
+    background-color: transparent;
+    &::before {
+      z-index: -1;
+      background: token-value(color blue piv);
+      border: 1px solid token-value(color formfield border);
+      transition: background-color .15s;
+    }
+    &:hover {
+      &::before {
+        background-color: token-value(color blue regular);
+      }
+    }
+    &:active {
+      &::before {
+        background-color: token-value(color blue regular_light);
+      }
+    }
+  }
+}
+
+.qc-search-bar.piv-background {
+  --qc-color-formfield-focus-outline: #{token-value(color blue pale)};
+  [type=submit] {
+    &::before {
+      background: token-value(color background);
+      border-left-width: 0;
+    }
+    &:focus {
+      &::before {
+        border-left-width: 2px;
+        background-color: rgba(token-value(color grey light rgb), .24);
+      }
+    }
+    &:hover {
+      &::before {
+        background-color: rgba(token-value(color grey light rgb), .24);
+      }
+    }
+    &:active {
+      &::before {
+        background-color: rgba(token-value(color grey light rgb), .16);
+      }
+    }
+  }
+}
+

package/src/sdg/scss/components/_searchInput.scss

@@ -0,0 +1,64 @@
+@use "qc-sdg-lib" as *;
+
+qc-search-input {
+  display: block;
+  width: 100%;
+  // TODO mettre un token
+  max-width: rem(548);
+}
+
+%qc-search-wrapper {
+  @extend %qc-formcontrol-box;
+  display: flex;
+  align-items: stretch;
+  &::before {
+    border: 1px solid token-value(color formfield border);
+  }
+  button {
+    @extend %qc-formcontrol-box;
+    &::before {
+      background: transparent;
+    }
+    width: rem(40);
+    flex-shrink: 0;
+  }
+}
+
+.qc-search-input {
+  @extend %qc-search-wrapper;
+  input[type=search] {
+    display: block;
+    position: relative;
+    color: token-value(color text primary);
+    width: 100%;
+    background: transparent;
+    //height: auto;
+    margin-right: 0;
+    padding: rem(8) rem(0) rem(8) rem(8);
+    border: 0;
+    // clears the ‘X’ from Chrome
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+    &::placeholder {
+      color: token-value(color grey medium);
+      font-weight: normal;
+    }
+    &:focus,&:focus-visible {
+      outline: none;
+    }
+  }
+
+  button {
+    @extend %qc-formcontrol-box;
+    &::before {
+      background: transparent;
+    }
+    cursor: pointer;
+  }
+}
+
+