📝 doc(core): ajoute des exemples liens bruts et resets [DS-2825]

src/core/.package.yml

@@ -39,11 +39,13 @@ script:
   - legacy
 example:
   style:
-    - core
+    - accordion
     - button
+    - core
     - table
-    - accordion
+    - toggle
   script:
-    - core
     - accordion
+    - core
     - table
+    - toggle

src/core/example/link/link-raw/index.ejs

@@ -0,0 +1,15 @@
+<% const sample = getSample(include); %>
+<% const rawSubtitle = `Utilisation de la classe <code>${prefix}-raw-link</code> sur les balises de lien pour les afficher de manière brut.` %>
+<% const rawWrapperSubtitle = `Utilisation de la classe <code>${prefix}-raw-link</code> sur un wrapper pour afficher les liens de manière brut.` %>
+
+<div class="<%= prefix %>-container" >
+  <%- section('Liens bruts', null, 0) %>
+
+  <%- sample({ title: 'Lien brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-raw-link" title="titre lien" href="../">lien interne</a>`} }, true); %>
+
+  <%- sample({ title: 'Lien externe brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-raw-link" title="titre lien externe - nouvelle fenêtre" href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`} }, true); %>
+
+  <%- sample( { title: 'Exemple sur plusieurs blocs de texte', subtitle: rawWrapperSubtitle}, '../sample/blocks', { classes: [`${prefix}-raw-link`], paragraphes: [ {insert: `<a title="titre lien" href="../">lien interne</a>`}, {insert: `<a title="titre lien externe - nouvelle fenêtre" href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`}] }, true); %>
+
+  <%- sample({ title: 'Exemple d\'utilisation avec une librairie externe', subtitle: rawWrapperSubtitle }, '../sample/library', { classes: [`${prefix}-raw-link`] }, true); %>
+</div>

src/core/example/link/link-reset/index.ejs

@@ -0,0 +1,15 @@
+<% const sample = getSample(include); %>
+<% const resetSubtitle = `Utilisation de la classe <code>${prefix}-reset-link</code> sur les balises de lien pour réinitialiser le style des liens.` %>
+<% const resetWrapperSubtitle = `Utilisation de la classe <code>${prefix}-reset-link</code> sur un wrapper pour afficher les liens de manière brut.` %>
+
+<div class="<%= prefix %>-container" >
+  <%- section('Liens réinitialisés', `Utilisation de la classe <code>${prefix}-reset-link</code> pour réinitialiser le style des liens.`, 0) %>
+
+  <%- sample({ title: 'Lien réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-reset-link" title="titre lien" href="../">lien interne</a>`} }, true); %>
+
+  <%- sample({ title: 'Lien externe réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-reset-link" title="titre lien externe - nouvelle fenêtre" href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`} }, true); %>
+
+  <%- sample( { title: 'Exemple sur plusieurs blocs de texte', subtitle: `Utilisation de la classe <code>${prefix}-reset-link</code> sur un wrapper pour réinitialiser le style des liens.`}, '../sample/blocks', { classes: [`${prefix}-reset-link`], paragraphes: [ {insert: `<a title="titre lien" href="../">lien interne</a>`}, {insert: `<a title="titre lien externe - nouvelle fenêtre" href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`}] }, true); %>
+
+  <%- sample({ title: 'Exemple d\'utilisation avec une librairie externe', subtitle: resetWrapperSubtitle }, '../sample/library', { classes: [`${prefix}-reset-link`] }, true); %>
+</div>

src/core/example/link/sample/blocks.ejs

@@ -0,0 +1,10 @@
+<%
+ let classes = locals.classes || [];
+ let paragraphes = locals.paragraphes || [];
+ %>
+
+<div <%- includeClasses(classes); %>>
+  <% for (const paragraph of paragraphes) { %>
+    <%- include('../../../template/ejs/typography/paragraph', {paragraph: { ...paragraph, content: lorem(paragraph.insert) }}); %>
+  <% } %>
+</div>

src/core/example/link/sample/library.ejs

@@ -0,0 +1,48 @@
+<% const sample = getSample(include); %>
+
+<!-- Based on Leaflet Quick Start Guide [https://leafletjs.com/examples/quick-start/]  -->
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
+<%
+ let classes = locals.classes || [];
+%>
+
+
+<div <%- includeClasses(classes); %>>
+  <div id="map" class="map"></div>
+
+  <%- include('../../../../component/toggle/template/ejs/toggle.ejs', {toggle: {state: true, checked: true, label: `Interupteur de la classe <code class="${prefix}-px-1w">${classes[0]}</code>sur le wrapper`, id: classes[0]}}); %>
+</div>
+
+<style>
+  .map { height: 400px; }
+</style>
+
+<script>
+  const map = L.map('map', {
+    center: [48.8588897, 2.320041],
+    zoom: 13
+  });
+  const linkClass = '<%- classes[0] %>';
+
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>'
+  }).addTo(map);
+
+  L.marker([48.8588897, 2.320041]).addTo(map)
+    .bindPopup('20 avenue de Ségur 75007 Paris')
+    .openPopup();
+
+  const toggle = document.getElementById(linkClass);
+  const wrapper = document.getElementById('map').parentNode;
+
+  toggle.addEventListener('change', function() {
+    if (this.checked) {
+      wrapper.classList.add(linkClass);
+    } else {
+      wrapper.classList.remove(linkClass);
+    }
+  });
+</script>

src/core/example/reset/index.ejs

@@ -26,10 +26,6 @@ let ol = {
 
 <%- sample('Test de paragraphe et de lien externe :', './sample/paragraph', { paragraph: {insert: '<a title="titre lien externe - nouvelle fenêtre" href="#" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>'} }, true); %>
 
-<%- sample('Test de lien externe raw-link :', './sample/paragraph', { paragraph: {insert: `<a class="${prefix}-raw-link" title="titre lien externe - nouvelle fenêtre" href="#" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`} }, true); %>
-
-<%- sample('Test de lien externe reset-link :', './sample/paragraph', { paragraph: {insert: `<a class="${prefix}-reset-link" title="titre lien externe - nouvelle fenêtre" href="#" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a>`} }, true); %>
-
 <%- sample('Test de liste non-ordonnée:', './sample/ul', {list:ul}, true); %>
 
 <%- sample('Test de liste ordonnée :', './sample/ol', {list:ol}, true); %>

src/core/i18n/fr.yml

@@ -11,3 +11,6 @@ subdir:
   spacing: Espacements
   typography: Typographie
   utility: Utilitaires
+  link: Liens natifs
+  link-raw: Liens bruts
+  link-reset: Liens réinitialisés

src/core/style/action/legacy/_link.scss

@@ -8,15 +8,18 @@
 @include legacy.is(ie11) {
   [href],
   #{ns(reset-link)} {
-    text-decoration: underline;
+    &[href],
+    [href] {
+      text-decoration: underline;
+    }
   }
 
   #{ns(raw-link)} {
-    text-decoration: none;
-  }
-
-  #{ns(reset-link)} {
-    @include after(none);
+    &[href],
+    [href] {
+      text-decoration: none;
+      @include after(none);
+    }
   }
 
   [target="_blank"] {

src/core/style/action/module/_link.scss

@@ -11,6 +11,7 @@ a {
   @include init-underline;
   @include enable-underline;
   @include enable-external;
+  --text-decoration: none;
 }
 
 // TODO: à checker avec <area href="" >
@@ -33,11 +34,21 @@ form {
 }
 
 #{ns(raw-link)} {
-  @include disable-underline;
+  --text-decoration: none;
+
+  &[href],
+  [href] {
+    @include disable-underline;
+    @include disable-external;
+  }
 }
 
 #{ns(reset-link)} {
-  @include disable-underline;
-  text-decoration: underline;
-  text-underline-offset: 2px;
+  --text-decoration: underline;
+
+  &[href],
+  [href] {
+    @include disable-underline;
+    text-underline-offset: 2px;
+  }
 }

src/core/style/action/tool/_link.scss

@@ -6,7 +6,7 @@
 $underline-thickness: 0.0625em;
 
 @mixin a-reset ($minimal: false) {
-  text-decoration: none;
+  text-decoration: var(--text-decoration);
   @if not $minimal {
     color: inherit;
   }