From fc03a3b7f597e9e2ceeee47b19610f04b5898e8f Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Fri, 2 Jun 2023 09:55:28 +0200 Subject: [PATCH 1/6] feat(link): ajoute des exemples brut et reset --- src/component/link/example/raw/index.ejs | 7 +++++++ src/component/link/example/reset/index.ejs | 5 +++++ src/component/link/i18n/fr.yml | 7 +++++++ src/component/link/template/ejs/link.ejs | 4 ++-- 4 files changed, 21 insertions(+), 2 deletions(-) create mode 100755 src/component/link/example/raw/index.ejs create mode 100755 src/component/link/example/reset/index.ejs create mode 100644 src/component/link/i18n/fr.yml diff --git a/src/component/link/example/raw/index.ejs b/src/component/link/example/raw/index.ejs new file mode 100755 index 000000000..91bf6be54 --- /dev/null +++ b/src/component/link/example/raw/index.ejs @@ -0,0 +1,7 @@ +<% const sample = getSample(include); %> + +<%- sample('Lien brut', '../sample/link-default', {link: { classes: [`${prefix}-raw-link`] } }, true); %> + +<%- sample('Lien externe brut', '../sample/link-default', {link: { label: 'Lien externe', href:'https://www.systeme-de-design.gouv.fr/', classes: [`${prefix}-raw-link`], attributes: { target: '_blank'} } }, true); %> + +<%- sample('Groupe de liens bruts', '../sample/links-group', { linksGroup: { classes: [`${prefix}-raw-link`], links: [{ label: 'Lien externe', href:'https://www.systeme-de-design.gouv.fr/', attributes: { target: '_blank'} }, { label: 'Label lien', href:'../' }, { label: 'Label lien', href:'../' } ] } }, true); %> diff --git a/src/component/link/example/reset/index.ejs b/src/component/link/example/reset/index.ejs new file mode 100755 index 000000000..8bab06796 --- /dev/null +++ b/src/component/link/example/reset/index.ejs @@ -0,0 +1,5 @@ +<% const sample = getSample(include); %> + +<%- sample('Lien réinitialisé', '../sample/link-default', {link: { classes: [`${prefix}-reset-link`] } }, true); %> + +<%- sample('Groupe de liens réinitialisés', '../sample/links-group', { linksGroup: { groupCount: 4, classes: [`${prefix}-reset-link`] } }, true); %> diff --git a/src/component/link/i18n/fr.yml b/src/component/link/i18n/fr.yml new file mode 100644 index 000000000..94269bde0 --- /dev/null +++ b/src/component/link/i18n/fr.yml @@ -0,0 +1,7 @@ +title: Lien +description: Le lien permet la navigation entre une page et un autre contenu au sein de la même page, du même site ou externe. Pour les actions d’un autre type - comme la soumission d’un formulaire - il faut utiliser le composant bouton. +doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/lien +subdir: + title: Variantes + raw: Liens bruts + reset: Liens réinitialisés diff --git a/src/component/link/template/ejs/link.ejs b/src/component/link/template/ejs/link.ejs index fcb898e80..f68cc3b33 100644 --- a/src/component/link/template/ejs/link.ejs +++ b/src/component/link/template/ejs/link.ejs @@ -33,12 +33,12 @@ <% const link = locals.link || {}; let linkClasses = link.classes || []; +if (!linkClasses.includes(prefix + '-link')) linkClasses.push(prefix + '-link'); + let linkAttrs = link.attributes || {}; const markup = link.markup || 'a'; -linkClasses.push(prefix + '-link'); - linkAttrs.id = link.id || uniqueId('link'); switch (link.size) { From 166f01ded2880049fcf2a9fe16992314e90af4b4 Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Tue, 6 Jun 2023 17:52:12 +0200 Subject: [PATCH 2/6] feat(link): ajoute une page dedie aux liens dans le core example --- src/component/link/example/raw/index.ejs | 7 ------- src/component/link/example/reset/index.ejs | 5 ----- src/component/link/i18n/fr.yml | 7 ------- src/core/example/link/index.ejs | 23 ++++++++++++++++++++++ src/core/example/reset/index.ejs | 4 ---- src/core/i18n/fr.yml | 1 + src/core/style/action/module/_link.scss | 1 + src/core/style/action/tool/_link.scss | 4 ++++ 8 files changed, 29 insertions(+), 23 deletions(-) delete mode 100755 src/component/link/example/raw/index.ejs delete mode 100755 src/component/link/example/reset/index.ejs delete mode 100644 src/component/link/i18n/fr.yml create mode 100644 src/core/example/link/index.ejs diff --git a/src/component/link/example/raw/index.ejs b/src/component/link/example/raw/index.ejs deleted file mode 100755 index 91bf6be54..000000000 --- a/src/component/link/example/raw/index.ejs +++ /dev/null @@ -1,7 +0,0 @@ -<% const sample = getSample(include); %> - -<%- sample('Lien brut', '../sample/link-default', {link: { classes: [`${prefix}-raw-link`] } }, true); %> - -<%- sample('Lien externe brut', '../sample/link-default', {link: { label: 'Lien externe', href:'https://www.systeme-de-design.gouv.fr/', classes: [`${prefix}-raw-link`], attributes: { target: '_blank'} } }, true); %> - -<%- sample('Groupe de liens bruts', '../sample/links-group', { linksGroup: { classes: [`${prefix}-raw-link`], links: [{ label: 'Lien externe', href:'https://www.systeme-de-design.gouv.fr/', attributes: { target: '_blank'} }, { label: 'Label lien', href:'../' }, { label: 'Label lien', href:'../' } ] } }, true); %> diff --git a/src/component/link/example/reset/index.ejs b/src/component/link/example/reset/index.ejs deleted file mode 100755 index 8bab06796..000000000 --- a/src/component/link/example/reset/index.ejs +++ /dev/null @@ -1,5 +0,0 @@ -<% const sample = getSample(include); %> - -<%- sample('Lien réinitialisé', '../sample/link-default', {link: { classes: [`${prefix}-reset-link`] } }, true); %> - -<%- sample('Groupe de liens réinitialisés', '../sample/links-group', { linksGroup: { groupCount: 4, classes: [`${prefix}-reset-link`] } }, true); %> diff --git a/src/component/link/i18n/fr.yml b/src/component/link/i18n/fr.yml deleted file mode 100644 index 94269bde0..000000000 --- a/src/component/link/i18n/fr.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: Lien -description: Le lien permet la navigation entre une page et un autre contenu au sein de la même page, du même site ou externe. Pour les actions d’un autre type - comme la soumission d’un formulaire - il faut utiliser le composant bouton. -doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/lien -subdir: - title: Variantes - raw: Liens bruts - reset: Liens réinitialisés diff --git a/src/core/example/link/index.ejs b/src/core/example/link/index.ejs new file mode 100644 index 000000000..e35d763f3 --- /dev/null +++ b/src/core/example/link/index.ejs @@ -0,0 +1,23 @@ +<% const sample = getSample(include); %> + +
+ <%- section('Liens bruts', null, 0) %> +

+ Utilisation de la classe <%= `${prefix}-raw-link` %> pour afficher de manière brut les liens. +

+ + <%- sample('Lien brut', '../reset/sample/paragraph', { paragraph: {insert: `titre lien`} }, true); %> + + <%- sample('Lien externe brut', '../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> +
+ +
+ <%- section('Liens reinitialisés', null, 0) %> +

+ Utilisation de la classe <%= `${prefix}-reset-link` %> pour reinitialiser le style des liens. +

+ + <%- sample('Lien reinitialisé', '../reset/sample/paragraph', { paragraph: {insert: `titre lien`} }, true); %> + + <%- sample('Lien externe reinitialisé', '../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> +
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..570f1512f 100644 --- a/src/core/i18n/fr.yml +++ b/src/core/i18n/fr.yml @@ -11,3 +11,4 @@ subdir: spacing: Espacements typography: Typographie utility: Utilitaires + link: Liens natifs diff --git a/src/core/style/action/module/_link.scss b/src/core/style/action/module/_link.scss index 5cd784e83..7ae4193b8 100644 --- a/src/core/style/action/module/_link.scss +++ b/src/core/style/action/module/_link.scss @@ -34,6 +34,7 @@ form { #{ns(raw-link)} { @include disable-underline; + @include disable-external-link; } #{ns(reset-link)} { diff --git a/src/core/style/action/tool/_link.scss b/src/core/style/action/tool/_link.scss index 80cb2f097..e8ac07790 100644 --- a/src/core/style/action/tool/_link.scss +++ b/src/core/style/action/tool/_link.scss @@ -68,6 +68,10 @@ $underline-thickness: 0.0625em; } } +@mixin disable-external-link() { + --external-link-content: none; +} + @mixin enable-external() { --external-link-content: ''; } From ec7c6f2c7a50e214a4014825b1bc53c2b0f79657 Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Tue, 6 Jun 2023 18:03:45 +0200 Subject: [PATCH 3/6] feat(link): wip --- src/component/link/template/ejs/link.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/link/template/ejs/link.ejs b/src/component/link/template/ejs/link.ejs index f68cc3b33..ba36462bd 100644 --- a/src/component/link/template/ejs/link.ejs +++ b/src/component/link/template/ejs/link.ejs @@ -33,7 +33,7 @@ <% const link = locals.link || {}; let linkClasses = link.classes || []; -if (!linkClasses.includes(prefix + '-link')) linkClasses.push(prefix + '-link'); +linkClasses.push(prefix + '-link'); let linkAttrs = link.attributes || {}; From e08a29d34d9d9bd483e4c7a87ff1198f5e542025 Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Tue, 6 Jun 2023 18:06:37 +0200 Subject: [PATCH 4/6] feat(link): wip --- src/component/link/template/ejs/link.ejs | 3 ++- src/core/style/action/module/_link.scss | 2 +- src/core/style/action/tool/_link.scss | 4 ---- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/component/link/template/ejs/link.ejs b/src/component/link/template/ejs/link.ejs index ba36462bd..1d2d64afc 100644 --- a/src/component/link/template/ejs/link.ejs +++ b/src/component/link/template/ejs/link.ejs @@ -33,12 +33,13 @@ <% const link = locals.link || {}; let linkClasses = link.classes || []; -linkClasses.push(prefix + '-link'); let linkAttrs = link.attributes || {}; const markup = link.markup || 'a'; +linkClasses.push(prefix + '-link'); + linkAttrs.id = link.id || uniqueId('link'); switch (link.size) { diff --git a/src/core/style/action/module/_link.scss b/src/core/style/action/module/_link.scss index 7ae4193b8..264912e25 100644 --- a/src/core/style/action/module/_link.scss +++ b/src/core/style/action/module/_link.scss @@ -34,7 +34,7 @@ form { #{ns(raw-link)} { @include disable-underline; - @include disable-external-link; + @include disable-external; } #{ns(reset-link)} { diff --git a/src/core/style/action/tool/_link.scss b/src/core/style/action/tool/_link.scss index e8ac07790..80cb2f097 100644 --- a/src/core/style/action/tool/_link.scss +++ b/src/core/style/action/tool/_link.scss @@ -68,10 +68,6 @@ $underline-thickness: 0.0625em; } } -@mixin disable-external-link() { - --external-link-content: none; -} - @mixin enable-external() { --external-link-content: ''; } From 6596f5a355528ad4af5b7247da6d11cae15dff3d Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Tue, 6 Jun 2023 18:07:26 +0200 Subject: [PATCH 5/6] feat(link): wip --- src/component/link/template/ejs/link.ejs | 1 - 1 file changed, 1 deletion(-) diff --git a/src/component/link/template/ejs/link.ejs b/src/component/link/template/ejs/link.ejs index 1d2d64afc..fcb898e80 100644 --- a/src/component/link/template/ejs/link.ejs +++ b/src/component/link/template/ejs/link.ejs @@ -33,7 +33,6 @@ <% const link = locals.link || {}; let linkClasses = link.classes || []; - let linkAttrs = link.attributes || {}; const markup = link.markup || 'a'; From 303410181826757fe811a08a5c818b7b68e7a78d Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Fri, 9 Jun 2023 14:53:24 +0200 Subject: [PATCH 6/6] feat(link): ajoute un exemple avec la librairie leaflet.js --- src/core/.package.yml | 8 ++-- src/core/example/link/index.ejs | 23 ----------- src/core/example/link/link-raw/index.ejs | 15 +++++++ src/core/example/link/link-reset/index.ejs | 15 +++++++ src/core/example/link/sample/blocks.ejs | 10 +++++ src/core/example/link/sample/library.ejs | 48 ++++++++++++++++++++++ src/core/i18n/fr.yml | 2 + src/core/style/action/legacy/_link.scss | 15 ++++--- src/core/style/action/module/_link.scss | 20 ++++++--- src/core/style/action/tool/_link.scss | 2 +- 10 files changed, 120 insertions(+), 38 deletions(-) create mode 100644 src/core/example/link/link-raw/index.ejs create mode 100644 src/core/example/link/link-reset/index.ejs create mode 100644 src/core/example/link/sample/blocks.ejs create mode 100644 src/core/example/link/sample/library.ejs diff --git a/src/core/.package.yml b/src/core/.package.yml index 69ab455e8..ab6cfc42a 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 index e35d763f3..e69de29bb 100644 --- a/src/core/example/link/index.ejs +++ b/src/core/example/link/index.ejs @@ -1,23 +0,0 @@ -<% const sample = getSample(include); %> - -
- <%- section('Liens bruts', null, 0) %> -

- Utilisation de la classe <%= `${prefix}-raw-link` %> pour afficher de manière brut les liens. -

- - <%- sample('Lien brut', '../reset/sample/paragraph', { paragraph: {insert: `titre lien`} }, true); %> - - <%- sample('Lien externe brut', '../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> -
- -
- <%- section('Liens reinitialisés', null, 0) %> -

- Utilisation de la classe <%= `${prefix}-reset-link` %> pour reinitialiser le style des liens. -

- - <%- sample('Lien reinitialisé', '../reset/sample/paragraph', { paragraph: {insert: `titre lien`} }, true); %> - - <%- sample('Lien externe reinitialisé', '../reset/sample/paragraph', { paragraph: {insert: `lien externe - nouvelle fenêtre`} }, true); %> -
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/i18n/fr.yml b/src/core/i18n/fr.yml index 570f1512f..00f8cd907 100644 --- a/src/core/i18n/fr.yml +++ b/src/core/i18n/fr.yml @@ -12,3 +12,5 @@ subdir: 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 264912e25..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,12 +34,21 @@ form { } #{ns(raw-link)} { - @include disable-underline; - @include disable-external; + --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 80cb2f097..48adc900e 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; }