diff --git a/src/core/.package.yml b/src/core/.package.yml index 4f8666d3f..42e22e862 100644 --- a/src/core/.package.yml +++ b/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 diff --git a/src/core/example/link/index.ejs b/src/core/example/link/index.ejs new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/example/link/link-raw/index.ejs b/src/core/example/link/link-raw/index.ejs new file mode 100644 index 000000000..b04618cdb --- /dev/null +++ b/src/core/example/link/link-raw/index.ejs @@ -0,0 +1,15 @@ +<% const sample = getSample(include); %> +<% const rawSubtitle = `Utilisation de la classe ${prefix}-raw-link sur les balises de lien pour les afficher de manière brut.` %> +<% const rawWrapperSubtitle = `Utilisation de la classe ${prefix}-raw-link sur un wrapper pour afficher les liens de manière brut.` %> + +
+ <%- section('Liens bruts', null, 0) %> + + <%- sample({ title: 'Lien brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien interne`} }, true); %> + + <%- sample({ title: 'Lien externe brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> + + <%- sample( { title: 'Exemple sur plusieurs blocs de texte', subtitle: rawWrapperSubtitle}, '../sample/blocks', { classes: [`${prefix}-raw-link`], paragraphes: [ {insert: `lien interne`}, {insert: `lien externe - nouvelle fenêtre`}] }, true); %> + + <%- sample({ title: 'Exemple d\'utilisation avec une librairie externe', subtitle: rawWrapperSubtitle }, '../sample/library', { classes: [`${prefix}-raw-link`] }, true); %> +
diff --git a/src/core/example/link/link-reset/index.ejs b/src/core/example/link/link-reset/index.ejs new file mode 100644 index 000000000..10cc8613c --- /dev/null +++ b/src/core/example/link/link-reset/index.ejs @@ -0,0 +1,15 @@ +<% const sample = getSample(include); %> +<% const resetSubtitle = `Utilisation de la classe ${prefix}-reset-link sur les balises de lien pour réinitialiser le style des liens.` %> +<% const resetWrapperSubtitle = `Utilisation de la classe ${prefix}-reset-link sur un wrapper pour afficher les liens de manière brut.` %> + +
+ <%- section('Liens réinitialisés', `Utilisation de la classe ${prefix}-reset-link pour réinitialiser le style des liens.`, 0) %> + + <%- sample({ title: 'Lien réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien interne`} }, true); %> + + <%- sample({ title: 'Lien externe réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> + + <%- sample( { title: 'Exemple sur plusieurs blocs de texte', subtitle: `Utilisation de la classe ${prefix}-reset-link sur un wrapper pour réinitialiser le style des liens.`}, '../sample/blocks', { classes: [`${prefix}-reset-link`], paragraphes: [ {insert: `lien interne`}, {insert: `lien externe - nouvelle fenêtre`}] }, true); %> + + <%- sample({ title: 'Exemple d\'utilisation avec une librairie externe', subtitle: resetWrapperSubtitle }, '../sample/library', { classes: [`${prefix}-reset-link`] }, true); %> +
diff --git a/src/core/example/link/sample/blocks.ejs b/src/core/example/link/sample/blocks.ejs new file mode 100644 index 000000000..8afb969a2 --- /dev/null +++ b/src/core/example/link/sample/blocks.ejs @@ -0,0 +1,10 @@ +<% + let classes = locals.classes || []; + let paragraphes = locals.paragraphes || []; + %> + +
> + <% for (const paragraph of paragraphes) { %> + <%- include('../../../template/ejs/typography/paragraph', {paragraph: { ...paragraph, content: lorem(paragraph.insert) }}); %> + <% } %> +
diff --git a/src/core/example/link/sample/library.ejs b/src/core/example/link/sample/library.ejs new file mode 100644 index 000000000..09f5f58dd --- /dev/null +++ b/src/core/example/link/sample/library.ejs @@ -0,0 +1,48 @@ +<% const sample = getSample(include); %> + + + + + +<% + let classes = locals.classes || []; +%> + + +
> +
+ + <%- include('../../../../component/toggle/template/ejs/toggle.ejs', {toggle: {state: true, checked: true, label: `Interupteur de la classe ${classes[0]}sur le wrapper`, id: classes[0]}}); %> +
+ + + + diff --git a/src/core/example/reset/index.ejs b/src/core/example/reset/index.ejs index fe3a935a8..9e3b8c24e 100644 --- a/src/core/example/reset/index.ejs +++ b/src/core/example/reset/index.ejs @@ -26,10 +26,6 @@ let ol = { <%- sample('Test de paragraphe et de lien externe :', './sample/paragraph', { paragraph: {insert: 'lien externe - nouvelle fenêtre'} }, true); %> -<%- sample('Test de lien externe raw-link :', './sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> - -<%- sample('Test de lien externe reset-link :', './sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> - <%- sample('Test de liste non-ordonnée:', './sample/ul', {list:ul}, true); %> <%- sample('Test de liste ordonnée :', './sample/ol', {list:ol}, true); %> diff --git a/src/core/i18n/fr.yml b/src/core/i18n/fr.yml index 0dbf408b1..00f8cd907 100644 --- a/src/core/i18n/fr.yml +++ b/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 diff --git a/src/core/style/action/legacy/_link.scss b/src/core/style/action/legacy/_link.scss index 71d8a7241..c2ee8af91 100644 --- a/src/core/style/action/legacy/_link.scss +++ b/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"] { diff --git a/src/core/style/action/module/_link.scss b/src/core/style/action/module/_link.scss index 5cd784e83..438142f6b 100644 --- a/src/core/style/action/module/_link.scss +++ b/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 @@ -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; + } } diff --git a/src/core/style/action/tool/_link.scss b/src/core/style/action/tool/_link.scss index 7fc39c406..3a47a213a 100644 --- a/src/core/style/action/tool/_link.scss +++ b/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; }