Skip to content

Commit

Permalink
🔖 chore(*): DSFR v1.10.1
Browse files Browse the repository at this point in the history
  • Loading branch information
keryanS authored Sep 4, 2023
2 parents b9785f3 + fbb5a5f commit f159980
Show file tree
Hide file tree
Showing 20 changed files with 629 additions and 646 deletions.
995 changes: 473 additions & 522 deletions CHANGELOG.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gouvfr/dsfr",
"version": "1.10.0",
"version": "1.10.1",
"description": "Système de Design de l'Etat - DSFR",
"repository": "git@github.com:GouvernementFR/dsfr.git",
"author": "Service d'Information du Gouvernement <jean-charles.hourdeaux@pm.gouv.fr>",
Expand Down
16 changes: 9 additions & 7 deletions src/component/follow/style/_setting.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@
////

$follow-icons: (
facebook: facebook-circle-fill,
twitter: twitter-fill,
linkedin: linkedin-box-fill,
youtube: youtube-fill,
dailymotion: dailymotion-fill,
instagram: instagram-fill,
facebook: facebook-circle-fill,
github: github-fill,
tiktok: tiktok-fill,
instagram: instagram-fill,
linkedin: linkedin-box-fill,
mastodon: mastodon-fill,
snapchat: snapchat-fill,
telegram: telegram-fill,
threads: threads-fill,
tiktok: tiktok-fill,
twitch: twitch-fill,
twitter: twitter-fill,
twitter-x: twitter-x-fill,
vimeo: vimeo-fill,
mastodon: mastodon-fill
youtube: youtube-fill,
);
6 changes: 5 additions & 1 deletion src/component/follow/template/ejs/socials.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,12 @@ const mapSocialButton = (data) => {
href: data.url,
id: data.id || uniqueId('social-button'),
blank: true,
classes: [`${prefix}-btn--${data.type}`]
classes: []
}
if (data.classes) button.classes = data.classes;
if (data.type) button.classes.push(`${prefix}-btn--${data.type}`);
if (data.attributes) button.attributes = data.attributes;
return button;
};
Expand Down
3 changes: 2 additions & 1 deletion src/component/link/style/module/_download.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@
}

#{ns(link__detail)} {
@include absolute(calc(100% + 1v), null, null, 0);
@include absolute(null, null, null, 0);
@include text-style(xs);
@include font-weight(regular);
@include margin-top(7v);
white-space: nowrap;
pointer-events: none;
cursor: text;
Expand Down
8 changes: 4 additions & 4 deletions src/component/link/style/module/_group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
}
}

#{ns(link)} {
vertical-align: top;
}

&--sm {
@include nest-link(sm, null);

#{ns(link)}:not(#{ns(link--download)}) {
vertical-align: top;
}
}

&--lg {
Expand Down
2 changes: 1 addition & 1 deletion src/component/link/style/tool/_build.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@

@if map_get($settings, blank) {
@include target-blank(true) {
@include _build-link-icon($size-settings, right, $size);
@include _build-link-icon($size-settings, right, $size, false);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/component/radio/style/scheme/_sm.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

@include disabled.selector {
+ label {
@include color.background-image((disabled grey), (legacy:$legacy), radio-background-image(true, sm));
@include color.background-image((disabled grey) (disabled grey), (legacy:$legacy), radio-background-image(true, sm));
}
}
}
Expand Down
56 changes: 56 additions & 0 deletions src/component/share/example/data/meta.json.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<%
const metaTag = [
{
// Format de la card twitter de partage (large ou résumé)
name: 'twitter:card',
content: 'summary_large_image' // ou 'summary' si non défini
},
{
// Nom du compte twitter lié à la page partagée ('@username')
name: 'twitter:site',
content: contentPlaceholder('@usernameTwitter')
},
{
// titre de la page partagée
property: 'og:title',
content: contentPlaceholder('Système de Design de l\'État')
},
{
// Description du contenu de la page / de l'article
property: 'og:description',
content: contentPlaceholder('Développer vos sites et applications en utilisant des composants prêts à l\'emploi, accessibles et ergonomiques')
},
{
// url d'une image pour illustrer le contenu de la page
property: 'og:image',
content: contentPlaceholder('https://systeme-de-design.gouv.fr/src/img/systeme-de-design.gouv.fr.jpg')
},
{
// Type de contenu (généralement 'website', éventuellement 'article')
property: 'og:type',
content: 'website'
},
{
// Adresse url du site
property: 'og:url',
content: contentPlaceholder('https://systeme-de-design.gouv.fr/')
},
{
// Nom complet du site
property: 'og:site_name',
content: contentPlaceholder('Site officiel du Système de Design de l\'État')
},
{
// texte alternatif de l'image
property: 'og:image:alt',
content: contentPlaceholder('République Française - Système de Design de l\'État')
},
{
// texte alternatif de l'image pour twitter
name: 'twitter:image:alt',
content: contentPlaceholder('République Française - Système de Design de l\'État')
}
];
%>

<%- JSON.stringify(metaTag); %>
51 changes: 51 additions & 0 deletions src/component/share/example/data/share.json.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<%
let share = locals.share || {};
let data = {};
data.share = {
id: uniqueId('share'),
title: 'Partager la page',
text: 'Veuillez <a href=' + contentPlaceholder("url page autorisation cookies") + '>autoriser le dépôt de cookies</a> pour partager sur Facebook, Twitter et LinkedIn.',
disabled: share.disabled === true,
buttons: [
{
id: uniqueId('share'),
type: 'facebook',
label: 'Partager sur Facebook',
url: `https://www.facebook.com/sharer.php?u=${contentPlaceholder('url de la page')}`,
width: 600,
height: 450
},
{
id: uniqueId('share'),
type: 'twitter',
label: 'Partager sur Twitter',
url: `https://twitter.com/intent/tweet?url=${contentPlaceholder('url de la page')}&text=${contentPlaceholder('titre ou texte descriptif de la page')}&via=${contentPlaceholder('via')}&hashtags=${contentPlaceholder('hashtags')}`,
width: 600,
height: 420,
comments: !share.disabled ? 'Les paramètres de la reqûete doivent être URI-encodés (ex: encodeURIComponent() en js)': undefined
},
{
id: uniqueId('share'),
type: 'linkedin',
label: 'Partager sur LinkedIn',
url: `https://www.linkedin.com/shareArticle?url=${contentPlaceholder('url de la page')}&title=${contentPlaceholder('titre ou texte descriptif de la page')}`,
width: 550,
height: 550
},
{
id: uniqueId('share'),
type: 'mail',
label: 'Partager par email',
url: `mailto:?subject=${contentPlaceholder('objet du mail')}&body=${contentPlaceholder('titre ou texte descriptif de la page')} ${contentPlaceholder('url de la page')}`
},
{
id: uniqueId('share'),
type: 'copy',
label: 'Copier dans le presse-papier',
onclick: `navigator.clipboard.writeText(window.location).then(function() {alert('Adresse copiée dans le presse papier.')});` // @TODO: ajouter un polyfill pour IE11
}
]
} %>

<%- JSON.stringify(data); %>
6 changes: 3 additions & 3 deletions src/component/share/example/index.ejs
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<% const sample = getSample(include); %>

<%- sample('Méta données', './sample/meta-share', {}, true); %>
<%- section('Méta données', 'Données à insérer dans la partie <code>< head ></code> de la page, pour fournir un aperçu de la page aux applications tierces lors du partage.', 0); %>

<%- sample('', './sample/meta-share', {}, true); %>

<%- section('Boutons de partage par défaut', 'Les icones réseaux sociaux disponibles pour ce composant sont définies dans :', 0); %>

Expand All @@ -14,8 +16,6 @@ const accordion = {
<div class="<%= prefix %>-mb-4v" >
<%- include(root + 'src/component/accordion/template/ejs/accordion', {accordion: accordion}); %>
</div>


<%- section(null, 'Il est aussi possible d\'appliquer une classe utilitaire sur un bouton pour utiliser une icone du dsfr (ex: "fr-icon-rss-line")', 0); %>

<%- sample('', './sample/share-default', {}, true); %>
Expand Down
54 changes: 2 additions & 52 deletions src/component/share/example/sample/meta-share.ejs
Original file line number Diff line number Diff line change
@@ -1,56 +1,6 @@
<%
const metaTag = [
{
// Format de la card twitter de partage (large ou résumé)
name: 'twitter:card',
content: 'summary_large_image' // ou 'summary' si non défini
},
{
// Nom du compte twitter lié à la page partagée ('@username')
name: 'twitter:site',
content: contentPlaceholder('@usernameTwitter')
},
{
// titre de la page partagée
property: 'og:title',
content: contentPlaceholder('Système de Design de l\'État')
},
{
// Description du contenu de la page / de l'article
property: 'og:description',
content: contentPlaceholder('Développer vos sites et applications en utilisant des composants prêts à l\'emploi, accessibles et ergonomiques')
},
{
// url d'une image pour illustrer le contenu de la page
property: 'og:image',
content: contentPlaceholder('https://systeme-de-design.gouv.fr/src/img/systeme-de-design.gouv.fr.jpg')
},
{
// Type de contenu (généralement 'website', éventuellement 'article')
property: 'og:type',
content: 'website'
},
{
// Adresse url du site
property: 'og:url',
content: contentPlaceholder('https://systeme-de-design.gouv.fr/')
},
{
// Nom complet du site
property: 'og:site_name',
content: contentPlaceholder('Site officiel du Système de Design de l\'État')
},
{
// texte alternatif de l'image
property: 'og:image:alt',
content: contentPlaceholder('République Française - Système de Design de l\'État')
},
{
// texte alternatif de l'image pour twitter
name: 'twitter:image:alt',
content: contentPlaceholder('République Française - Système de Design de l\'État')
}
];
let metaTag = [];
metaTag = JSON.parse(include('../data/meta.json.ejs'));
%>

<%- include('../../template/ejs/share-meta', { meta: metaTag }); %>
52 changes: 4 additions & 48 deletions src/component/share/example/sample/share-default.ejs
Original file line number Diff line number Diff line change
@@ -1,53 +1,9 @@

<%
let share = locals.share || {};
let data = {};

data.share = {
id: uniqueId('share'),
title: 'Partager la page',
text: 'Veuillez <a href=' + contentPlaceholder("url page autorisation cookies") + '>autoriser le dépôt de cookies</a> pour partager sur Facebook, Twitter et LinkedIn.',
disabled: share.disabled === true,
buttons: [
{
id: uniqueId('share'),
type: 'facebook',
label: 'Partager sur Facebook',
url: `https://www.facebook.com/sharer.php?u=${contentPlaceholder('url de la page')}`,
width: 600,
height: 450
},
{
id: uniqueId('share'),
type: 'twitter',
label: 'Partager sur Twitter',
url: `https://twitter.com/intent/tweet?url=${contentPlaceholder('url de la page')}&text=${contentPlaceholder('titre ou texte descriptif de la page')}&via=${contentPlaceholder('via')}&hashtags=${contentPlaceholder('hashtags')}`,
width: 600,
height: 420,
comments: !share.disabled ? 'Les paramètres de la reqûete doivent être URI-encodés (ex: encodeURIComponent() en js)': undefined
},
{
id: uniqueId('share'),
type: 'linkedin',
label: 'Partager sur LinkedIn',
url: `https://www.linkedin.com/shareArticle?url=${contentPlaceholder('url de la page')}&title=${contentPlaceholder('titre ou texte descriptif de la page')}`,
width: 550,
height: 550
},
{
id: uniqueId('share'),
type: 'mail',
label: 'Partager par email',
url: `mailto:?subject=${contentPlaceholder('objet du mail')}&body=${contentPlaceholder('titre ou texte descriptif de la page')} ${contentPlaceholder('url de la page')}`
},
{
id: uniqueId('share'),
type: 'copy',
label: 'Copier dans le presse-papier',
onclick: `navigator.clipboard.writeText(window.location).then(function() {alert('Adresse copiée dans le presse papier.')});` // @TODO: ajouter un polyfill pour IE11
}
]
} %>

<%
let data = {};
data = JSON.parse(include('../data/share.json.ejs'));
%>

<%- include('../../template/ejs/share', data); %>
6 changes: 4 additions & 2 deletions src/component/share/style/_setting.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@

$share-icons: (
facebook: facebook-circle-line,
twitter: twitter-line,
linkedin: linkedin-box-line,
mastodon: mastodon-line
mastodon: mastodon-line,
threads: threads-line,
twitter: twitter-line,
twitter-x: twitter-x-line
);
6 changes: 5 additions & 1 deletion src/component/share/template/ejs/share.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,14 @@ if (share.id) shareAttrs.id = share.id;
const mapShareButton = (data) => {
const button = {
classes: [`${prefix}-btn--${data.type}`],
label: data.label,
title: data.title,
attributes: data.attributes,
tooltip: data.tooltip,
classes: [],
}
if (data.classes) button.classes = data.classes;
if (data.type) button.classes.push(`${prefix}-btn--${data.type}`);
if (data.comments) button.comments = data.comments;
if (data.onclick) button.onclick = data.onclick;
Expand All @@ -36,6 +38,8 @@ const mapShareButton = (data) => {
switch (data.type) {
case 'facebook':
case 'twitter':
case 'twitter-x':
case 'threads':
case 'linkedin':
button.disabled = share.disabled;
button.markup = 'a';
Expand Down
Loading

0 comments on commit f159980

Please sign in to comment.