Skip to content

Commit

Permalink
refactor(link): rel noopener & title target blank + fix tile blank icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@keryanS
keryanS committed Aug 22, 2023
1 parent b9785f3 commit d7a1932
Show file tree
Hide file tree
Showing 23 changed files with 70 additions and 61 deletions.
2 changes: 1 addition & 1 deletion src/analytics/example/attribute/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div>
<h4>lien externe</h4>
<div class="<%= prefix %>-mb-6v">
<a href="https://systeme-de-design.gouv.fr" data-<%= prefix %>-analytics-click="libellé envoyé à l'analytics" id="attr-external" target="_blank" >libellé du lien</a>
<a href="https://systeme-de-design.gouv.fr" data-<%= prefix %>-analytics-click="libellé envoyé à l'analytics" id="attr-external" <%- includeAttrs(targetBlankData()) %>>libellé du lien</a>
</div>
</div>
<div>
Expand Down
2 changes: 1 addition & 1 deletion src/analytics/example/component/quote/index.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<% const sample = getSample(include); %>

<div class="<%= prefix %>-container">
<%- sample('Exemple de citation', '../../../../component/quote/example/sample/quote-default', {quote: {id: uniqueId('quote'), sources: ['<cite>Ouvrage</cite>', 'Détail 1', 'Détail 2', 'Détail 3', '<a target="_blank" href="https://www.systeme-de-design.gouv.fr/">Détail 4</a>']}}); %>
<%- sample('Exemple de citation', '../../../../component/quote/example/sample/quote-default', {quote: {id: uniqueId('quote'), sources: ['<cite>Ouvrage</cite>', 'Détail 1', 'Détail 2', 'Détail 3', `<a ${includeAttrs(targetBlankData())} href="https://www.systeme-de-design.gouv.fr/">Détail 4</a>`]}}); %>
</div>
2 changes: 1 addition & 1 deletion src/component/button/template/ejs/button.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ if (button.disabled === true) {
btnAttrs.href = button.href || '#[url - à modifier]';
switch (true) {
case button.blank:
btnAttrs.target = '_blank';
btnAttrs = {...targetBlankData(), ...btnAttrs};
break;
case button.self:
Expand Down
5 changes: 1 addition & 4 deletions src/component/card/example/sample/card-default.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,7 @@ if (card.content) {
data.content.attributes = card.content.attributes ?? {};
if (card.content.assess) data.content.assess = card.content.assess;
if (card.content.disabled) data.content.disabled = card.content.disabled;
if (card.content.blank === true) {
data.content.blank = card.content.blank;
data.content.attributes.title = card.content.attributes?.title ? card.content.attributes.title : `${contentPlaceholder('Intitulé')} - ${getText('blank')}`;
}
if (card.content.blank === true) data.content.blank = card.content.blank;
if (card.content.lang) data.content.lang = card.content.lang;
if (card.content.description !== false) data.content.description = card.content.description || lorem('', 160);
Expand Down
4 changes: 2 additions & 2 deletions src/component/card/template/ejs/content.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const startDetails = content.details ? content.details.filter(detail => !detail.
const markup = content.markup || 'h3';
const hasLink = !content.noLink;
const href = content.href || '#';
const attributes = content.attributes || {};
let attributes = content.attributes || {};
if (content.assess === true) {
attributes[`data-${prefix}-assess-file`] = '';
} else if (typeof(content.assess) === 'string') {
Expand All @@ -52,7 +52,7 @@ if (content.disabled !== true) {
if (content.lang) attributes.hreflang = content.lang;
if (content.downloadable === true) attributes.download = '';
if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable;
if (content.blank === true) attributes.target = '_blank';
if (content.blank === true) attributes = { ...targetBlankData(), ...attributes};
switch (true) {
case content.badgesGroup !== undefined :
Expand Down
2 changes: 1 addition & 1 deletion src/component/display/deprecated/example/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ let dataFooter = {
}
}
],
copyright: 'Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>'
copyright: `Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" ${includeAttrs(targetBlankData())}>licence etalab-2.0</a>`
}
}
%>
Expand Down
2 changes: 1 addition & 1 deletion src/component/display/example/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ let dataFooter = {
attributes: attrModal
}
],
copyright: 'Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>'
copyright: `Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" ${includeAttrs(targetBlankData())}>licence etalab-2.0</a>`
}
}
%>
Expand Down
2 changes: 1 addition & 1 deletion src/component/footer/example/sample/footer.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ if (footer.bottom === true) data.bottom = {
{label: 'Données personnelles', url: footer.href},
{label: 'Gestion des cookies', url: footer.href}
],
copyright: 'Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>'
copyright: `Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" ${includeAttrs(targetBlankData())}>licence etalab-2.0</a>`
};
%>

Expand Down
2 changes: 1 addition & 1 deletion src/component/footer/template/ejs/content.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
attributes.id = uniqueId('footer__content-link');
%>
<li class="<%= prefix %>-footer__content-item">
<a <%- includeAttrs(attributes) %> class="<%= prefix %>-footer__content-link" target="_blank" href="https://<%= links[i].label %>"><%= links[i].label %></a>
<a <%- includeAttrs({...targetBlankData(), ...attributes}) %> class="<%= prefix %>-footer__content-link" href="https://<%= links[i].label %>"><%= links[i].label %></a>
</li>
<% } %>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/component/link/deprecated/template/ejs/link.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ if (link.disabled === true) {
linkAttrs.href = link.href || '[url - à modifier]';
switch (true) {
case link.blank:
linkAttrs.target = '_blank';
linkAttrs = {...targetBlankData(), ...linkAttrs};
break;
case link.self:
Expand Down
2 changes: 1 addition & 1 deletion src/component/link/template/ejs/link.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ if (link.disabled === true) {
break;
case link.blank:
linkAttrs.target = '_blank';
linkAttrs = {...targetBlankData(), ...linkAttrs};
break;
case link.self:
Expand Down
16 changes: 9 additions & 7 deletions src/component/navigation/template/ejs/link.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
<%#
# paramètres navigation menu link
* menu.label (string, required) : label du lien
* link.label (string, required) : label du lien
* menu.href (string, required) : url du lien
* link.id (string, required) : id du lien
* menu.target (string, optional) [default: '_self'] : tableau d'éléments de navigation ('_blank' ou '_self')
* link.href (string, required) : url du lien
* menu.active (boolean, optional) : si true l'élément est actif
* link.blank (boolean, optional) [default: false] : si true, target '_blank'
* menu.isPage (boolean, optional) : si true aria-current: 'page', sinon aria-current: 'true'
* link.active (boolean, optional) : si true l'élément est actif
* link.isPage (boolean, optional) : si true aria-current: 'page', sinon aria-current: 'true'
%>
<%
let link = locals.link || {};
const attrs = {
let attrs = {
href: link.href,
target: link.target || '_self',
id: link.id
}
if (link.blank) attrs = {...targetBlankData(), ...attrs};
if (link.active) attrs['aria-current'] = link.isPage ? 'page' : 'true';
Expand Down
4 changes: 2 additions & 2 deletions src/component/notice/example/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ const sample = getSample(include);

<%- sample('Bandeau d\'information importante avec bouton fermer', './sample/notice-dismissable', {notice: {type: "info", title: "Titre du bandeau"}}, true, './layout.ejs'); %>

<%- sample('Bandeau d\'information importante avec lien', './sample/notice-dismissable', {notice: {type: "info", title: "Titre du bandeau, <a href='#' rel='noopener' target='_blank'>lien au fil du texte</a>"}}, true, './layout.ejs'); %>
<%- sample('Bandeau d\'information importante avec lien', './sample/notice-dismissable', {notice: {type: "info", title: `Titre du bandeau, <a href='#' ${includeAttrs(targetBlankData())}>lien au fil du texte</a>`}}, true, './layout.ejs'); %>

<%- sample('Bandeau d\'information importante avec titre long', './sample/notice-dismissable', {notice: {type: "info", title: "Titre de bandeau très long, pour tester le comportement du composant avec un texte très long, et un <a href='#' rel='noopener' target='_blank'>lien au fil du texte</a> lorem ipsum dolor sit lorem ipsum dolor sit."}}, true, './layout.ejs'); %>
<%- sample('Bandeau d\'information importante avec titre long', './sample/notice-dismissable', {notice: {type: "info", title: `Titre de bandeau très long, pour tester le comportement du composant avec un texte très long, et un <a href='#' ${includeAttrs(targetBlankData())}>lien au fil du texte</a> lorem ipsum dolor sit lorem ipsum dolor sit.`}}, true, './layout.ejs'); %>
2 changes: 1 addition & 1 deletion src/component/quote/example/sample/quote-default.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ let data = {
size: quote.size || undefined,
author: quote.author || 'Auteur',
href: quote.href || contentPlaceholder('https://lien-vers-la-source.fr'),
sources: quote.sources || ['<cite>Ouvrage</cite>', 'Détail 1', 'Détail 2', 'Détail 3', '<a target="_blank" href="' + contentPlaceholder('Lien vers la sources ou des infos complémentaires') + '">Détail 4</a>'],
sources: quote.sources || ['<cite>Ouvrage</cite>', 'Détail 1', 'Détail 2', 'Détail 3', `<a ${includeAttrs(targetBlankData())} href="${contentPlaceholder('Lien vers la sources ou des infos complémentaires')}">Détail 4</a>`],
};
%>

Expand Down
42 changes: 21 additions & 21 deletions src/component/tag/template/ejs/tag.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,33 +46,33 @@ if (tag.accent !== undefined) tagClasses.push(prefix + '-tag--' + tag.accent);
switch(tag.size) {
case 'sm':
tagClasses.push(prefix + '-tag--sm');
tagClasses.push(prefix + '-tag--sm');
break;
}
switch(tag.type) {
case 'clickable':
if (tag.markup === undefined) tag.markup = 'a';
if (tag.disabled !== true) {
tagAttrs.href = tag.href || contentPlaceholder('url');
switch (true) {
case tag.blank:
tagAttrs.target = '_blank';
break;
case tag.self:
tagAttrs.target = '_self';
break;
}
if (tag.markup === undefined) tag.markup = 'a';
if (tag.disabled !== true) {
tagAttrs.href = tag.href || contentPlaceholder('url');
switch (true) {
case tag.blank:
tagAttrs = {...targetBlankData(), ...tagAttrs};
break;
case tag.self:
tagAttrs.target = '_self';
break;
}
}
break;
case 'pressable':
if (tag.markup === undefined) tag.markup = 'button';
tagAttrs["aria-pressed"] = tag.pressed === true ? 'true' : 'false';
if (tag.markup === undefined) tag.markup = 'button';
tagAttrs["aria-pressed"] = tag.pressed === true ? 'true' : 'false';
break;
case 'dismissible':
if (tag.markup === undefined) tag.markup = 'button';
tagClasses.push(prefix + '-tag--dismiss');
tagAttrs["aria-label"] = 'Retirer ' + contentPlaceholder('le filtre ' + tag.label);
if (tag.markup === undefined) tag.markup = 'button';
tagClasses.push(prefix + '-tag--dismiss');
tagAttrs["aria-label"] = 'Retirer ' + contentPlaceholder('le filtre ' + tag.label);
break;
default:
if (tag.markup === undefined) tag.markup = 'p';
Expand All @@ -83,12 +83,12 @@ if (tag.icon !== undefined) tagClasses.push(prefix + '-icon-' + tag.icon);
if (tag.iconPlace !== undefined) switch(tag.iconPlace) {
case 'left':
tagClasses.push(prefix + '-tag--icon-left');
break;
tagClasses.push(prefix + '-tag--icon-left');
break;
case 'right':
tagClasses.push(prefix + '-tag--icon-right');
break;
tagClasses.push(prefix + '-tag--icon-right');
break;
}
if (tag.disabled === true) {
Expand Down
5 changes: 1 addition & 4 deletions src/component/tile/example/sample/tile-default.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,7 @@ if (tile.content) {
data.content.attributes = tile.content.attributes ?? {};
if (tile.content.assess) data.content.assess = tile.content.assess;
if (tile.content.lang) data.content.lang = tile.content.lang;
if (tile.content.blank === true) {
data.content.blank = tile.content.blank;
data.content.attributes.title = tile.content.attributes?.title ? tile.content.attributes.title : `${contentPlaceholder('Intitulé')} - ${getText('blank')}`;
}
if (tile.content.blank === true) data.content.blank = tile.content.blank;
if (tile.content.disabled) data.content.disabled = tile.content.disabled;
Expand Down
6 changes: 4 additions & 2 deletions src/component/tile/style/module/_default.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
&#{ns(enlarge-link)} {
#{ns(tile)}__title {
a {
@include icon(arrow-right-line, md, after) {
@include icon-size(md) {
@include absolute(null, 8v, 9v);
}
}
Expand Down Expand Up @@ -86,10 +86,12 @@
background-size: 100% spacing.space(1v);
background-repeat: no-repeat;
}

@include icon(arrow-right-line, md, after);
}

@include target-blank {
@include icon(external-link-line, sm, after);
@include icon(external-link-line, null, after);
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/component/tile/template/ejs/content.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ let start = {};
const markup = content.markup || 'h3';
const href = content.href || '#';
const attributes = content.attributes || {};
let attributes = content.attributes || {};
const hasLink = !content.noLink;
if (content.assess === true) {
attributes[`data-${prefix}-assess-file`] = '';
Expand All @@ -48,7 +48,7 @@ if (content.disabled !== true) {
if (content.lang) attributes.hreflang = content.lang;
if (content.downloadable === true) attributes.download = '';
if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable;
if (content.blank === true) attributes.target = '_blank';
if (content.blank === true) attributes = {...targetBlankData(), ...attributes};
if (content.badgesGroup) start.badgesGroup = content.badgesGroup;
if (content.tagsGroup) start.tagsGroup = content.tagsGroup;
Expand Down
4 changes: 2 additions & 2 deletions src/core/example/link/link-raw/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@

<%- 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: 'Lien externe brut', subtitle: rawSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-raw-link" href="https://www.systeme-de-design.gouv.fr/" ${includeAttrs(targetBlankData())}>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 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 href="https://www.systeme-de-design.gouv.fr/" ${includeAttrs(targetBlankData())}>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>
4 changes: 2 additions & 2 deletions src/core/example/link/link-reset/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@

<%- 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: 'Lien externe réinitialisé', subtitle: resetSubtitle }, '../../reset/sample/paragraph', { paragraph: {insert: `<a class="${prefix}-reset-link" href="https://www.systeme-de-design.gouv.fr/" ${includeAttrs(targetBlankData())}>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 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 href="https://www.systeme-de-design.gouv.fr/" ${includeAttrs(targetBlankData())}>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>
2 changes: 1 addition & 1 deletion src/core/example/reset/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ let ol = {

<%- sample('Test de paragraphe et de lien interne :', './sample/paragraph', { paragraph: {insert: '<a title="titre lien interne" href="#" target="_self">lien interne</a>'} }, true); %>

<%- 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 paragraphe et de lien externe :', './sample/paragraph', { paragraph: {insert: `<a href="#" ${includeAttrs(targetBlankData())}>lien externe - nouvelle fenêtre</a>`} }, true); %>

<%- sample('Test de liste non-ordonnée:', './sample/ul', {list:ul}, true); %>

Expand Down
11 changes: 11 additions & 0 deletions tool/example/decorator.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,17 @@ const errorData = (error) => {
locals.errorData = errorData;
const targetBlankData = () => {
const attr = {};
attr.target = '_blank';
attr.rel = 'noopener';
attr.title = `${contentPlaceholder('Intitulé')} - ${getText('blank')}`;
return attr;
}
locals.targetBlankData = targetBlankData;
const randomContent = (types = ['title', 'img', 'text', 'list'], id) => {
let content = '<!-- données de test -->';
if (sampling) return content;
Expand Down
4 changes: 2 additions & 2 deletions tool/example/heading.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<%
for (const d of doc) {
%>
<li><a href="<%= d.url %>" target="_blank"><%= d.title %></a></li>
<li><a href="<%= d.url %>" target="_blank" rel="noopener"><%= d.title %></a></li>
<%
}
%>
Expand All @@ -27,7 +27,7 @@
case typeof doc === 'string':
%>
<a href="<%= doc %>" target="_blank">Documentation</a>
<a href="<%= doc %>" target="_blank" rel="noopener">Documentation</a>
<%
break;
}
Expand Down

0 comments on commit d7a1932

Please sign in to comment.