qc-trousse-sdg 1.4.0-develop.1 → 1.4.0

package/src/sdg/bases/grid/_grid.html

@@ -0,0 +1,118 @@
+<h2 id="grille">Grille horizontale</h2>
+<qc-doc-exemple caption="Présentation de la grille sur 12 colonnes"
+                code-target-id="exemple-grille"
+>
+  <div id="grid-samples">
+    <div id="background">
+      <div class="qc-row">
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+        <div class="qc-col-1">
+          <div></div>
+        </div>
+      </div>
+    </div>
+    <div id="exemple-grille">
+      <div class="qc-row">
+        <div class="qc-col-12">
+          <div>12</div>
+        </div>
+      </div>
+      <div class="qc-row">
+        <div class="  qc-col-md-6">
+          <div>6</div>
+        </div>
+        <div class="qc-col-md-6">
+          <div>6</div>
+        </div>
+      </div>
+      <div class="qc-row">
+        <div class=" qc-col-md-4">
+          <div>4</div>
+        </div>
+        <div class=" qc-col-md-4">
+          <div>4</div>
+        </div>
+        <div class=" qc-col-md-4">
+          <div>4</div>
+        </div>
+      </div>
+
+      <div class="qc-row">
+        <div class="qc-col-3">
+          <div>3</div>
+        </div>
+        <div class="qc-col-3">
+          <div>3</div>
+        </div>
+        <div class="qc-col-3">
+          <div>3</div>
+        </div>
+        <div class="qc-col-3">
+          <div>3</div>
+        </div>
+      </div>
+
+      <div class="qc-row">
+        <div class="qc-col-md-9 ">
+          <div>9</div>
+        </div>
+        <div class="qc-col-md-3 ">
+          <div>3</div>
+        </div>
+      </div>
+
+      <div class="qc-row">
+        <div class="qc-col-md-3 ">
+          <div>3</div>
+        </div>
+        <div class="qc-col-md-9 ">
+          <div>9</div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</qc-doc-exemple>
+<p>
+  <strong>Points de rupture</strong><br/>
+  <code>--qc-breakpoint-sm<br>
+    --qc-breakpoint-md<br>
+    --qc-breakpoint-lg
+  </code>
+</p>
+<p>
+  <strong>Gouttière</strong><br/>
+  <code>--qc-breakpoint-gutter</code>
+</p>

package/src/sdg/bases/headings/_headings.html

@@ -0,0 +1,18 @@
+<h2 id="titre">Niveaux de titres</h2>
+<qc-doc-exemple caption="Exemples de titres"
+                code-target-id="liste-titres"
+>
+  <div role="presentation"
+       id="liste-titres"
+  >
+    <h1 class="qc-h1">Titre de niveau 1</h1>
+    <h1 id="exemple-titre-h1"
+        class="qc-h1"><span class="qc-subhead ">Surtitre</span>Titre de niveau 1 avec surtitre
+    </h1>
+    <h2 class="qc-h2">Titre de niveau 2</h2>
+    <h3 class="qc-h3">Titre de niveau 3</h3>
+    <h4 class="qc-h4">Titre de niveau 4</h4>
+    <h5 class="qc-h5">Titre de niveau 5</h5>
+    <h6 class="qc-h6">Titre de niveau 6</h6>
+  </div>
+</qc-doc-exemple>

package/src/sdg/bases/headings/_headings.scss

@@ -0,0 +1,25 @@
+@use "qc-sdg-lib" as *;
+@for $i from 1 through 6 {
+  h#{$i}, .qc-h#{$i} {
+    @include heading($i);
+  }
+}
+
+h1, .qc-h1 {
+
+  .qc-subhead {
+    @include content-font(sm, $include-family: 1);
+    color : token-value(color, grey, medium);
+    display: block;
+    margin: 0;
+  }
+
+  &:after {
+    content: "";
+    display:block;
+    margin: 0;
+    width: rem(6 * $base-spacer);
+    padding-top: rem($base-spacer * .5);
+    border-bottom: 4px solid token-value(color, accent);
+  }
+}

package/src/sdg/{scss/base → bases/layout}/_layout.scss

@@ -1,4 +1,4 @@
-@use "qc-sdg-lib" as *;
+@use "../../scss/qc-sdg-lib" as *;
 
 :root {
   font-size: token-value(font size root-percent);
@@ -40,6 +40,3 @@ body {
   }
 }
 
-legend {
-  padding: 0;
-}

package/src/sdg/bases/links/_links.html

@@ -0,0 +1,104 @@
+<h2 id="liens">Liens</h2>
+<qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
+    <dl>
+        <dt>Lien interne</dt>
+        <dd><a href="javascript:;" class="not-visited">Lien interne</a></dd>
+        <dd>
+            <qc-external-link><a href="javascript:;" class="not-visited">Lien externe</a></qc-external-link>
+        </dd>
+
+        <dt>Lien au survol (pseudo-classe :hover)</dt>
+        <dd><a href="javascript:;" class="pseudo-hover">Lien interne</a></dd>
+        <dd>
+            <qc-external-link><a href="javascript:;" class="pseudo-hover">Lien externe</a>
+            </qc-external-link>
+        </dd>
+        <dt>Lien au focus (pseudo-classe :focus)</dt>
+        <dd><a href="javascript:;" class="pseudo-focus">Lien interne</a></dd>
+        <dd>
+            <qc-external-link><a href="javascript:;" class="pseudo-focus">Lien externe</a>
+            </qc-external-link>
+        </dd>
+        <dt>Lien au clic (pseudo-classe :active)</dt>
+        <dd><a href="javascript:;" class="pseudo-active">Lien interne</a></dd>
+        <dd>
+            <qc-external-link><a href="javascript:;" class="pseudo-active">Lien externe</a>
+            </qc-external-link>
+        </dd>
+        <dt>Lien visité (pseudo-classe :visited)</dt>
+        <dd><a href="javascript:;" class="pseudo-visited">Lien interne</a></dd>
+        <dd>
+            <qc-external-link><a href="javascript:;" class="pseudo-visited">Lien externe</a>
+            </qc-external-link>
+        </dd>
+    </dl>
+</qc-doc-exemple>
+
+
+<h3>Lien externe (qc-external-link)</h3>
+
+<p>Le composant <code>qc-external-link</code> ajoute une icône à la fin du lien, séparée du dernier mot par
+    une espace insécable.</p>
+<p>NB : le composant <code>qc-external-link</code> est ouvert, c-à-d. qu'il ne contient pas de DOM d’ombre (<i>shadow
+    DOM</i>).</p>
+
+<h4>Exemples</h4>
+
+<qc-doc-exemple
+        caption="Exemple de lien externe avec différentes tailles de police. Réduire la fenêtre pour constater que l’icône ne se sépare pas du lien au passage à la ligne.">
+    <p class="qc-font-size-xl">
+        Lorem ipsum
+        <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
+            adipiscing</a></qc-external-link>
+        elit
+    </p>
+    <p class="qc-font-size-lg">
+        Lorem ipsum
+        <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
+            adipiscing</a></qc-external-link>
+        elit
+    </p>
+    <p class="qc-font-size-md">
+        Lorem ipsum
+        <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
+            adipiscing</a></qc-external-link>
+        elit
+    </p>
+    <p class="qc-font-size-sm">
+        Lorem ipsum
+        <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
+            adipiscing</a></qc-external-link>
+        elit
+    </p>
+
+
+</qc-doc-exemple>
+
+<h4>Attributs</h4>
+<div class="table-overflow">
+    <table class="qc-table qc-striped component-attributes-description">
+        <thead>
+        <tr>
+            <th>Nom</th>
+            <th>Valeur attendue</th>
+            <th>Valeur par défaut</th>
+            <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>img-alt</td>
+            <td>Texte</td>
+            <td>
+                <dl>
+                    <dt>Français</dt>
+                    <dd>Ce lien dirige vers un autre site.</dd>
+                    <dt>Anglais</dt>
+                    <dd>This link directs to another site.</dd>
+                </dl>
+            </td>
+            <td>Texte alternatif de l’image du lien externe.</td>
+        </tr>
+        </tbody>
+    </table>
+</div>

package/src/sdg/bases/links/_links.scss

@@ -0,0 +1,51 @@
+@use "qc-sdg-lib" as *;
+@use "sass:math";
+@use "../Icon/icons" as *;
+
+a {
+  color: token-value(color, link, text);
+  &:visited {
+    color: token-value(color, link, visited);
+  }
+  &:hover {
+    @include hover-link();
+  }
+  &:focus, &:focus-visible {
+    @include focus-link();
+  }
+  &:active {
+    @include active-link();
+  }
+  .img-wrap {
+    white-space: nowrap;
+  }
+
+}
+span.qc-ext-link-img {
+
+  @extend .icon-external-link;
+  $ratio : math.div(11,16) * 1em;
+  height: $ratio;
+  width: $ratio;
+  display: inline-block;
+  background: token-value(color link text);
+  mask-size: $ratio;
+  margin-left: 4px;
+  a:visited  & {
+    background: token-value(color link visited);
+  }
+  a:focus  & {
+    background: token-value(color link hover);
+  }
+  a:hover  & {
+    background: token-value(color link hover);
+  }
+  a:active  & {
+    background: token-value(color link active);
+  }
+
+
+  .img-wrap + & {
+    display: none;
+  }
+}

package/src/sdg/bases/lists/_lists.html

@@ -0,0 +1,27 @@
+<h2 id="liste">Liste</h2>
+<qc-doc-exemple caption="Exemple de listes">
+
+  <ul>
+    <li>Élément de liste 1</li>
+    <li>Élément de liste 2</li>
+    <li>Élément de liste 3
+      <ul>
+        <li>Élément de liste 3.1</li>
+        <li>Élément de liste 3.2</li>
+      </ul>
+    </li>
+    <li>Élément de liste 4</li>
+  </ul>
+  <ol>
+    <li>Élément de liste 1</li>
+    <li>Élément de liste 2</li>
+    <li>Élément de liste 3
+      <ol>
+        <li>Élément de liste 3.1</li>
+        <li>Élément de liste 3.2</li>
+      </ol>
+    </li>
+    <li>Élément de liste 4</li>
+  </ol>
+  <p>Lorem ipsum dolor sit amet</p>
+</qc-doc-exemple>

package/src/sdg/bases/separator/_separator.html

@@ -0,0 +1,7 @@
+<h2 id="separator">Séparateur</h2>
+
+<qc-doc-exemple caption="Exemple de séparateur">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+    <hr/>
+    <p>A autem consequuntur cum cupiditate dignissimos, dolore doloribus,</p>
+</qc-doc-exemple>

package/src/sdg/bases/separator/_separator.scss

@@ -0,0 +1,5 @@
+@use "../../scss/qc-sdg-lib" as *;
+
+hr {
+  @include ruler();
+}

package/src/sdg/bases/shadings/_shadings.html

@@ -0,0 +1,14 @@
+<h2 id="ombrages">Ombrages</h2>
+<p>Pour appliquer un ombrage sur un élément, il suffit de lui appliquer la classe <code>qc-shading-X</code>,
+    X étant le niveau d’élévation. </p>
+<qc-doc-exemple
+        caption="Exemple des différents niveaux d’élévation."
+        code-target-id="liste-elevation">
+    <div id="liste-elevation">
+        <div class="qc-shading-0">Élévation 0</div>
+        <div class="qc-shading-1">Élévation 1</div>
+        <div class="qc-shading-2">Élévation 2</div>
+        <div class="qc-shading-3">Élévation 3</div>
+        <div class="qc-shading-4">Élévation 4</div>
+    </div>
+</qc-doc-exemple>

package/src/sdg/{scss/base → bases/shadings}/_shadings.scss

@@ -1,4 +1,4 @@
-@use "qc-sdg-lib" as *;
+@use "../../scss/qc-sdg-lib" as *;
 @use "sass:map";
 
 @each $index,$settings in map.get($lg-tokens, box_shadow) {

package/src/sdg/bases/typography/_font.html

@@ -0,0 +1,45 @@
+<h2 id="polices">Polices de caractères</h2>
+<div class="font-titles">
+  <h3><strong>Roboto</strong></h3>
+  <qc-doc-exemple id="font-roboto"
+                  caption="Exemple de texte en Roboto, avec différentes graisses."
+  >
+    <div style="font-family: var(--qc-font-family-header);">
+      <p style="font-weight:var(--qc-font-weight-header-regular);">
+        ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
+        <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
+      </p>
+      <p style="font-weight:var(--qc-font-weight-header-medium);">
+        ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
+        <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
+      </p>
+      <p style="font-weight:var(--qc-font-weight-header-bold);">
+        ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
+        <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
+      </p>
+    </div>
+  </qc-doc-exemple>
+  <!--                <qc-code target-id="font-roboto"></qc-code>-->
+</div>
+<div>
+  <h3><strong>Open Sans</strong></h3>
+  <qc-doc-exemple id="font-open-sans"
+                  caption="Exemple de texte en Open Sans, avec différentes graisses."
+  >
+    <div style="font-family: var(--qc-font-family-content);">
+      <p style="font-weight:var(--qc-font-weight-content-regular);">
+        ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
+        <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
+      </p>
+      <p style="font-weight:var(--qc-font-weight-content-medium);">
+        ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
+        <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
+      </p>
+      <p style="font-weight:var(--qc-font-weight-content-bold);">
+        ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
+        <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
+      </p>
+    </div>
+  </qc-doc-exemple>
+  <!--                <qc-code target-id="font-open-sans"></qc-code>-->
+</div>

package/src/sdg/bases/typography/_fonts.scss

@@ -0,0 +1,162 @@
+@use "sass:meta";
+@use "qc-sdg-lib" as *;
+@use "sass:map";
+@use "sass:list";
+
+@if $google-api-font {
+  // ci dessous on construit l'url pour importer les fonts google
+  // en se basant sur la déclaration des tokens (les font-weights)
+  $font-weights : map.values(map.get($lg-tokens, font, weight));
+  $url : 'https://fonts.googleapis.com/css2';
+  $param-separator : '?';
+  @each $name, $fonts in $google-fonts {
+    $google-font : list.nth($fonts,1); // le premier est le nom de la font google
+    $request : 'family=#{$google-font}:ital,wght';
+    $separator : '@';
+    @each $i in (0,1) {
+      @each $scale in $font-weights {
+        @if meta.type-of($scale) != 'map' {
+          $request : '#{$request}#{$separator}#{$i},#{$scale}';
+          $separator : ';';
+        }
+      }
+    }
+    $url : #{$url}#{$param-separator}#{$request};
+    $param-separator : '&';
+  }
+  @import url('#{$url}');
+}
+@else {
+  /* open-sans-regular - latin */
+  @font-face {
+    font-display: swap;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url('#{$google-font-path}/open-sans-v43-latin-regular.woff2') format('woff2'); 
+  }
+  /* open-sans-italic - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Open Sans';
+    font-style: italic;
+    font-weight: 400;
+    src: url('#{$google-font-path}/open-sans-v43-latin-italic.woff2') format('woff2'); 
+  }
+  /* open-sans-500 - latin */
+  @font-face {
+    font-display: swap;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url('#{$google-font-path}/open-sans-v43-latin-500.woff2') format('woff2'); 
+  }
+  /* open-sans-500italic - latin */
+  @font-face {
+    font-display: swap;
+    font-family: 'Open Sans';
+    font-style: italic;
+    font-weight: 500;
+    src: url('#{$google-font-path}/open-sans-v43-latin-500italic.woff2') format('woff2');
+  }
+  /* open-sans-600 - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url('#{$google-font-path}/open-sans-v43-latin-600.woff2') format('woff2'); 
+  }
+  /* open-sans-600italic - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Open Sans';
+    font-style: italic;
+    font-weight: 600;
+    src: url('#{$google-font-path}/open-sans-v43-latin-600italic.woff2') format('woff2'); 
+  }
+  /* open-sans-700 - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url('#{$google-font-path}/open-sans-v43-latin-700.woff2') format('woff2'); 
+  }
+  /* open-sans-700italic - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Open Sans';
+    font-style: italic;
+    font-weight: 700;
+    src: url('#{$google-font-path}/open-sans-v43-latin-700italic.woff2') format('woff2'); 
+  }
+
+
+  /* roboto-regular - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url('#{$google-font-path}/roboto-v48-latin-regular.woff2') format('woff2'); 
+  }
+  /* roboto-italic - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    src: url('#{$google-font-path}/roboto-v48-latin-italic.woff2') format('woff2'); 
+  }
+  /* roboto-500 - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url('#{$google-font-path}/roboto-v48-latin-500.woff2') format('woff2'); 
+  }
+  /* roboto-500italic - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    src: url('#{$google-font-path}/roboto-v48-latin-500italic.woff2') format('woff2'); 
+  }
+  /* roboto-600 - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 600;
+    src: url('#{$google-font-path}/roboto-v48-latin-600.woff2') format('woff2'); 
+  }
+  /* roboto-600italic - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 600;
+    src: url('#{$google-font-path}/roboto-v48-latin-600italic.woff2') format('woff2'); 
+  }
+  /* roboto-700 - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url('#{$google-font-path}/roboto-v48-latin-700.woff2') format('woff2'); 
+  }
+  /* roboto-700italic - latin */
+  @font-face {
+    font-display: swap; 
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    src: url('#{$google-font-path}/roboto-v48-latin-700italic.woff2') format('woff2'); 
+  }
+}
+
+

package/src/sdg/bases/typography/_paragraph.html

@@ -0,0 +1,17 @@
+<h2 id="paragraphes">Paragraphes</h2>
+<qc-doc-exemple caption="Exemple de paragraphes">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien vitae tempor porttitor.
+        Morbi tincidunt lorem et neque commodo varius. Suspendisse pretium risus sit amet nisi tempus, ut
+        euismod ex euismod. Nulla eget ullamcorper justo. Quisque cursus eget ex eget cursus. Suspendisse
+        potenti. Donec a risus viverra dolor sodales elementum. In lobortis ligula vitae libero pretium,
+        vitae fermentum nulla varius. Sed felis libero, facilisis vitae turpis in, ullamcorper bibendum
+        erat.</p>
+    <p>Aliquam rutrum sollicitudin lorem, vitae elementum tellus cursus ut. Vivamus in sodales risus.
+        Maecenas neque ante, faucibus non lobortis et, auctor non sem. Integer nec hendrerit dolor. Mauris
+        odio elit, viverra quis dolor sit amet, finibus auctor ex. Aliquam dapibus vestibulum metus a
+        blandit. Etiam vitae augue id dui interdum viverra. In at metus nec augue accumsan iaculis.
+        Suspendisse interdum, orci quis posuere ultrices, neque orci gravida diam, eu gravida nulla justo ac
+        nisi. Nullam vitae sapien id augue imperdiet vehicula id et risus. Cras egestas aliquam magna eu
+        aliquam. Sed aliquam semper est in imperdiet. Pellentesque non ultrices nibh. Nullam hendrerit
+        dictum gravida. Aliquam vel arcu in odio dapibus malesuada.</p>
+</qc-doc-exemple>

package/src/sdg/bases/typography/_paragraph.scss

@@ -0,0 +1,33 @@
+@use "qc-sdg-lib" as *;
+
+p {
+  margin-top: 0;
+  margin-bottom: token-value(spacer,md);
+  max-inline-size: token-value(max-content-width);
+}
+
+code, .qc-code {
+  font-family: token-value(font, family, code);
+}
+
+// pour les très petites résolutions, on ajoute des tirets aux mots.
+@media (max-width: 320px) {
+  body {
+    overflow-wrap: break-word;
+    hyphens: auto;
+  }
+}
+
+.qc-font-size-sm {
+  @include content-font("sm");
+}
+
+.qc-font-size-lg {
+  @include content-font("lg");
+}
+.qc-font-size-xl {
+  @include content-font("xl");
+}
+.qc-font-size-md {
+  @include content-font("md");
+}