diff --git a/CHANGELOG.md b/CHANGELOG.md index b739f5052..92c2e236e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,111 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi ## v1.10 -### [1.10.0-rc.2](https://github.com/GouvernementFR/dsfr/compare/v1.9.3...1.10.0-rc.2) - 11 Juillet 2023 +### [1.10.0](https://github.com/GouvernementFR/dsfr/compare/v1.9.3...1.10.0) - 19 Juillet 2023 + +#### 🐛 fix(form): correctif barre Ă©tat iOS [(#712)](https://github.com/GouvernementFR/dsfr/pull/712) +- Sur iOS, la barre d'Ă©tat d'erreur ou validation est discontinue +- corrige le problĂšme de maniĂšre gĂ©nĂ©rique + + +#### 🐛 fix(modal): retour de focus fermeture clavier [(#716)](https://github.com/GouvernementFR/dsfr/pull/716) +- Mise en place du retour du focus Ă  la fermeture en pressant la touche ESC + + +#### 🐛 fix(form): correctif focus des radios riches dĂ©prĂ©ciĂ©s [(#715)](https://github.com/GouvernementFR/dsfr/pull/715) +- corrige le dĂ©calage du focus sur les boutons radio en version dĂ©prĂ©ciĂ©e + + +#### 🐛 fix(follow): orthographe message de confirmation [(#714)](https://github.com/GouvernementFR/dsfr/pull/714) + + +#### ✹ feat(core, password): boutons spĂ©ciaux input Safari [(#711)](https://github.com/GouvernementFR/dsfr/pull/711) +- Dans les champs de type password, sur safari Mac, il y a une icĂŽne apportant des outils supplĂ©mentaire qui se superpose Ă  l’icĂŽne des signalant la hauteur de casse +- DĂ©placement des icĂŽnes natives pour qu'elles ne se superposent pas +- Retrait de l'icĂŽne capslock native, privilĂ©giant la nĂŽtre + + +#### 🐛 fix(core): stabilisation disclosure [(#713)](https://github.com/GouvernementFR/dsfr/pull/713) +- L'ouverture des paramĂštres d'affichage est par moment non rĂ©active +- L'Ă©lĂ©ment est fermĂ© avant mĂȘme d'ĂȘtre ouvert Ă  cause de boucle de dĂ©clenchement +- Ajout de condition permettant de limiter les boucles + + +#### 📝 doc(tooltip): retrait exemple texte [(#710)](https://github.com/GouvernementFR/dsfr/pull/710) +- l'utilisation d'un tooltip sur un texte pose des problĂšmes de restitution +- cet usage est dĂ©conseillĂ© +- retrait de l'exemple + + +#### 🐛 fix(tile): correctif espacements version dĂ©preciĂ©e [(#704)](https://github.com/GouvernementFR/dsfr/pull/704) +- L'icĂŽne et le contenu se retrouvent superposĂ©s dans la version dĂ©prĂ©ciĂ©e, ce correctif rĂ©tablit l'espacement nĂ©cessaire + + +#### 🐛 fix(tile, card): A11Y liens dĂ©sactivĂ©s [(#709)](https://github.com/GouvernementFR/dsfr/pull/709) +- Ajout des attributs `role="link"` et `aria-disabled=true` sur les version dĂ©sactivĂ©es + + +#### 🐛 fix(transcription, content): correctif title et label bouton Agrandir [(#708)](https://github.com/GouvernementFR/dsfr/pull/708) +- Retrait du title sur le bouton agrandir +- Ajout label agrandir dans les exemples de content + + +#### ✹ feat(*): Ajout d'un meta tag iOS [(#707)](https://github.com/GouvernementFR/dsfr/pull/707) +- Sur iOS, les numĂ©ros de tĂ©lĂ©phone sont automatiquement transformĂ©s en lien +- EntraĂźne un mauvais rendu dans le bloc fonctionnel de numĂ©ro de tĂ©lĂ©phone +- Correction par l'ajout gĂ©nĂ©ral du meta tag `` + + +#### 🐛 fix(card, tile): correctif IE 11 [(#705)](https://github.com/GouvernementFR/dsfr/pull/705) +- correctif sur les tuiles et card sur la version legacy pour Ă©viter les bugs de dĂ©passement de texte et placement des icĂŽnes + + +#### 🐛 fix(toggle): retrait tap-highlight-color iOS [(#703)](https://github.com/GouvernementFR/dsfr/pull/703) +- Au clic sur le toggle sur iOS, l'effet de highlight est prĂ©sent +- Retrait de cet effet avec la propriĂ©tĂ© [-webkit-tap-highlight-color](https://developer.mozilla.org/fr/docs/Web/CSS/-webkit-tap-highlight-color) + + +#### 🐛 fix(link): correctif tĂ©lĂ©chargement multiligne [(#702)](https://github.com/GouvernementFR/dsfr/pull/702) +- les liens de tĂ©lĂ©chargement Ă©taient limitĂ©s Ă  une seul ligne avec une ellipse sur le text dĂ©passant +- correctif prenant en compte le retour Ă  la ligne + + +#### 🐛 fix(download): graisse du titre des liens [(#701)](https://github.com/GouvernementFR/dsfr/pull/701) +- Passage des liens dĂ©prĂ©ciĂ©s en graisse regular + + +#### 🐛 fix(*): mise Ă  jour des liens du readme [(#700)](https://github.com/GouvernementFR/dsfr/pull/700) +- Mise Ă  jour des liens vers [https://www.systeme-de-design.gouv.fr](https://www.systeme-de-design.gouv.fr) dans le readme + + +#### 🐛 fix(modal): prĂ©viens dĂ©calage mobile [(#699)](https://github.com/GouvernementFR/dsfr/pull/699) +- l'ajout d'un padding Ă  l'ouverture permet de se substituer au dĂ©calage crĂ©Ă© potentiellement par la disparition de la scrollbar en desktop +- En mobile, la modale occupe 100% de la largeur, ce padding crĂ©Ă© un espacement incorrect +- ajout d'une media query sur le breakpoint MD pour corriger le problĂšme + + +#### 🐛 fix(header): correctif rĂ©gression scroll horizontal [(#697)](https://github.com/GouvernementFR/dsfr/pull/697) +- La navigation du header crĂ©Ă©e un scroll horizontal dans la page +- l'ajout d'un max-width prĂ©vient le problĂšme + + +#### 🐛 fix(password): correctif accessibilitĂ© des messages [(#694)](https://github.com/GouvernementFR/dsfr/pull/694) +- ajout sur les messages de validation et d'erreur de la composition du mot de passe d'un statut en after uniquement pour les lecteurs d'Ă©crans +- BREAKING CHANGE : il est nĂ©cessaire d'ajouter les attributs `data-fr-valid`et `data-fr-error` avec les textes correspondants Ă  l'Ă©tat (respectivement, en français, "validĂ©" et "en erreur" + + +#### 🐛 fix(sidemenu): correction de la couleur des liens du sidemenu [(#698)](https://github.com/GouvernementFR/dsfr/pull/698) +- Effet de bord du passage du bouton mobile en bleu, l'ensemble des boutons du sidemenu est passĂ© en bleu. +- Ce correctif amĂšne la spĂ©cificitĂ© nĂ©cessaire pour avoir les boutons et lien en `text default grey` + + +#### 🐛 fix(core): correctif sur KeyAction [(#696)](https://github.com/GouvernementFR/dsfr/pull/696) +- Corrige la rĂ©gression sur l'Ă©coute des interactions avec le clavier dĂ» Ă  l'Ă©volution de la structure de la constante KeyCodes, non rĂ©percutĂ©e dans KeyAction + + +#### ✹ feat(colors): ajout des utilitaires de couleur flat [(#693)](https://github.com/GouvernementFR/dsfr/pull/693) +- Ajout des classes utilitaires pour le token background flat avec les variations de couleur d'accent + #### 🐛 fix(tooltip,modal): interaction globale et focus iOS [(#691)](https://github.com/GouvernementFR/dsfr/pull/691) - Correctif Ă  la pression de la touche Escape sur la modale : si l'Ă©lĂ©ment actif (focus) est un Ă©lĂ©ment de formulaire ou un mĂ©dia, la modale n'est pas refermĂ©e pas pour permettre l'interaction native de l'Ă©lĂ©ment actif diff --git a/README.md b/README.md index 1194dd7d0..2d6d891bb 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ Le fichier `utilities.min.css` doit ĂȘtre placĂ© un niveau plus bas que le dossi Le point de dĂ©part de l’utilisation du DSFR est la crĂ©ation de fichiers HTML, afin de pouvoir utiliser les diffĂ©rents composants. Ces fichiers sont Ă  mettre Ă  la racine de votre projet. L’exemple ci dessous est le code minimal afin de pouvoir utiliser le DSFR. L’ajout de l’attribut **data-fr-scheme** sur la balise html permet d’activer la gestion des thĂšmes clair et sombre. Les valeurs possibles sont `system`, `light`, `dark`. La valeur “system” permet d’utiliser la configuration dĂ©finie sur le systĂšme d’exploitation de l’utilisateur. -Consulter la [documentation des paramĂštres d’affichage](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage) afin d’en savoir plus. +Consulter la [documentation des paramĂštres d’affichage](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametre-d-affichage) afin d’en savoir plus. ```html @@ -94,8 +94,7 @@ Consulter la [documentation des paramĂštres d’affichage](https://www.systeme-d - - + @@ -104,6 +103,9 @@ Consulter la [documentation des paramĂštres d’affichage](https://www.systeme-d + + + Titre de la page - Nom du site @@ -156,7 +158,7 @@ Il est **impĂ©ratif** d’appeler les **deux fichiers** javascript afin que le c ``` -> NB : Le package analytics est gĂ©rĂ© indĂ©pendament et doit ĂȘtre ajoutĂ© aprĂšs le js du dsfr. Voir [documention analytics](https://github.com/GouvernementFR/dsfr/blob/main/doc/Analytics-1.9.0.pdf) +> NB : Le package analytics est gĂ©rĂ© indĂ©pendament et doit ĂȘtre ajoutĂ© aprĂšs le js du dsfr. Voir [documention analytics](https://github.com/GouvernementFR/dsfr/blob/main/src/analytics/doc/analytics.md) De la mĂȘme façon que le CSS il est possible d’importer uniquement le JS des composants utilisĂ©s (et leurs dĂ©pendances). ### IcĂŽnes @@ -192,4 +194,4 @@ Le processus de contribution est dĂ©taillĂ© sur la [page CONTRIBUTING.md](CONTRI ## Documentation -[Documentation dĂ©veloppeurs](https://www.systeme-de-design.gouv.fr/comment-utiliser-le-dsfr/developpeurs) +[Documentation dĂ©veloppeurs](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/developpeurs/) diff --git a/module/color/variable/_decisions.scss b/module/color/variable/_decisions.scss index 381c9506c..89ebfdf0d 100644 --- a/module/color/variable/_decisions.scss +++ b/module/color/variable/_decisions.scss @@ -19,8 +19,8 @@ $values: ( ), flat: ( neutral: strongest, - /* primary: strong, - accent: strong,*/ + primary: strong, + accent: strong, system: strong, ), action-high: ( diff --git a/package.json b/package.json index 83d7dfd7e..bae45fee3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gouvfr/dsfr", - "version": "1.10.0-rc.2", + "version": "1.10.0", "description": "SystĂšme de Design de l'Etat - DSFR", "repository": "git@github.com:GouvernementFR/dsfr.git", "author": "Service d'Information du Gouvernement ", diff --git a/src/analytics/example/spa/agnostic/route.js.ejs b/src/analytics/example/spa/agnostic/route.js.ejs index 480910d56..6e00f8195 100644 --- a/src/analytics/example/spa/agnostic/route.js.ejs +++ b/src/analytics/example/spa/agnostic/route.js.ejs @@ -41,8 +41,6 @@ const urlLocationHandler = async () => { let location = window.location.href.replace(HREF, ''); // get the url route - console.log('route', location); - // get the route object from the urlRoutes object const route = urlRoutes[location] || urlRoutes['404']; // get the html from the template diff --git a/src/component/card/style/_legacy.scss b/src/component/card/style/_legacy.scss index 809904471..43e8c9a16 100644 --- a/src/component/card/style/_legacy.scss +++ b/src/component/card/style/_legacy.scss @@ -7,10 +7,8 @@ @include legacy.is(ie11) { #{ns(card)} { - @include icon-legacy(arrow-right-line, md, before); - &--no-icon { - @include before(none); + @include after(none); } &__title, @@ -19,8 +17,14 @@ } &__title { + a { + @include icon-legacy(arrow-right-line, sm, after) { + background-color: transparent; + } + } + @include target-blank { - @include icon-size-legacy(md, after); + @include icon-legacy(external-link-line, sm, after); } } @@ -28,8 +32,64 @@ @include icon-size-legacy(sm, before); } - &--horizontal &__body { - flex-basis: 100%; + &--download { + #{ns(tile__title a)} { + @include icon-legacy(download-line, null, after); + } + } + + &#{ns(enlarge-link)} { + #{ns(card)}__title { + a { + text-decoration: none; + @include icon-size-legacy(md, after) { + background-color: transparent; + } + } + } + } + + @include respond-from(md) { + &--download, + &--horizontal, + &--horizontal-half, + &--horizontal-tier { + #{ns(card__body)} { + flex-basis: 100%; + } + } + } + } + + #{ns(card--sm)} { + &#{ns(enlarge-link)} { + #{ns(card)}__title { + a { + @include icon-size-legacy(sm, after); + } + } + } + + #{ns(card)}__title { + a { + @include icon-size-legacy(sm, after); + } + } + } + + #{ns(card--lg)} { + &#{ns(enlarge-link)} { + #{ns(card)}__title { + a { + @include icon-size-legacy(lg, after); + } + } + } + + #{ns(card)}__title { + a { + @include icon-size-legacy(md, after); + } } } } diff --git a/src/component/card/template/ejs/content.ejs b/src/component/card/template/ejs/content.ejs index 9fd908ef7..fbc5a01da 100644 --- a/src/component/card/template/ejs/content.ejs +++ b/src/component/card/template/ejs/content.ejs @@ -43,7 +43,12 @@ if (content.assess === true) { } else if (typeof(content.assess) === 'string') { attributes[`data-${prefix}-assess-file`] = content.assess; } -if (content.disabled !== true) attributes.href = href; +if (content.disabled !== true) { + attributes.href = href; +} else { + attributes.role = 'link'; + attributes['aria-disabled'] = true; +} if (content.lang) attributes.hreflang = content.lang; if (content.downloadable === true) attributes.download = ''; if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable; diff --git a/src/component/content/example/sample/media-default.ejs b/src/component/content/example/sample/media-default.ejs index e9edeab98..f27a79204 100644 --- a/src/component/content/example/sample/media-default.ejs +++ b/src/component/content/example/sample/media-default.ejs @@ -5,7 +5,9 @@ content.id = content.id || uniqueId('media'); if (content.transcription === true) content.transcription = { id: uniqueId('transcription'), title: getText('modal.title', 'transcription'), - content: randomContent(['text', 'list']) + content: randomContent(['text', 'list']), + fullscreen: getText('button.fullscreen', 'transcription'), + fullscreenAriaLabel: getText('button.fullscreenAriaLabel', 'transcription'), }; %> diff --git a/src/component/download/deprecated/style/module/_download.scss b/src/component/download/deprecated/style/module/_download.scss index b9bc35cbb..f4631d6b9 100644 --- a/src/component/download/deprecated/style/module/_download.scss +++ b/src/component/download/deprecated/style/module/_download.scss @@ -12,7 +12,9 @@ @include padding-bottom(6v); @include margin(0 0 4v 0); - @include nest-download-link; + @include nest-download-link { + @include font-weight(regular); + } &__desc { @include text-style(sm); diff --git a/src/component/follow/example/data/newsletter-alert.json.ejs b/src/component/follow/example/data/newsletter-alert.json.ejs index 0010e0212..99f003deb 100644 --- a/src/component/follow/example/data/newsletter-alert.json.ejs +++ b/src/component/follow/example/data/newsletter-alert.json.ejs @@ -6,7 +6,7 @@ data.newsletter = { alert: { id: uniqueId("newsletter-alert"), type: "success", - text: "Votre inscription Ă  bien Ă©tĂ© prise en compte" + text: "Votre inscription a bien Ă©tĂ© prise en compte." } } %> diff --git a/src/component/form/deprecated/style/_module.scss b/src/component/form/deprecated/style/_module.scss index 1ec8b86b9..94b55ec4c 100644 --- a/src/component/form/deprecated/style/_module.scss +++ b/src/component/form/deprecated/style/_module.scss @@ -69,10 +69,13 @@ label { @include padding(3v 0); + } + } - &::before { - @include margin-top(3v); - } + #{ns-group(radio)}:not(#{ns(radio-rich)}) input[type="radio"] + label, + #{ns-group(checkbox)} input[type="checkbox"] + label { + &::before { + top: #{space(3v)}; } } @@ -81,6 +84,7 @@ & + #{ns(info-text)} { @include margin-top(0); @include margin-left(2v); + @include margin-bottom(4v); } } } diff --git a/src/component/form/style/module/_fieldset.scss b/src/component/form/style/module/_fieldset.scss index b1b35f92b..d559d62ce 100644 --- a/src/component/form/style/module/_fieldset.scss +++ b/src/component/form/style/module/_fieldset.scss @@ -8,7 +8,7 @@ border: 0; &__legend { - @include margin-bottom(4v); + @include padding-bottom(4v); @include padding-x(3v); @include margin-x(-1v); @include text-style(md); @@ -25,25 +25,19 @@ } } - &--valid, - &--valid &__legend, - &--error, - &--error &__legend, - &--info, - &--info &__legend { - background-repeat: no-repeat; - background-position: 0 0; - } - &--valid, &--error, &--info { - background-size: spacing.space(2px calc(100% - (4v))); + background-repeat: no-repeat; + background-position: 0 spacing.space(-9v); + background-size: spacing.space(2px calc(100% + (5v))); } &--valid &__legend, &--error &__legend, &--info &__legend { + background-repeat: no-repeat; + background-position: 0 0; background-size: 2px 100%; } diff --git a/src/component/form/style/module/_message.scss b/src/component/form/style/module/_message.scss index e6fe83579..22d7d502f 100644 --- a/src/component/form/style/module/_message.scss +++ b/src/component/form/style/module/_message.scss @@ -1,9 +1,16 @@ #{ns(message)} { + --comma: ", "; + --content: var(--comma); @include display-flex(row, flex-start); @include text-style(xs); @include margin(0 0 1v 0); + @include after(var(--content)) { + @include sr-only(); + } + &:last-child { + --comma: ". "; @include margin-bottom(0); } diff --git a/src/component/form/template/ejs/fieldset/fieldset.ejs b/src/component/form/template/ejs/fieldset/fieldset.ejs index 317d13083..74c014992 100644 --- a/src/component/form/template/ejs/fieldset/fieldset.ejs +++ b/src/component/form/template/ejs/fieldset/fieldset.ejs @@ -87,7 +87,7 @@ if (fieldset.valid) { } if (fieldset.messages) { - fieldset.messages.forEach(message => builder.add(message.type, message.text)); + fieldset.messages.forEach(message => builder.add(message.type, message.text, message.attributes)); } if (builder.isIncluded) labelledBy.push(...builder.ids); diff --git a/src/component/form/template/ejs/message/builder.js.ejs b/src/component/form/template/ejs/message/builder.js.ejs index 7fbe52aca..937b30872 100644 --- a/src/component/form/template/ejs/message/builder.js.ejs +++ b/src/component/form/template/ejs/message/builder.js.ejs @@ -34,7 +34,7 @@ class MessageBuilder { return this._ids; } - add (type, data) { + add (type, data, attributes) { this.appends[type]++; const append = this.appends[type] > 0 ? '-' + this.appends[type] : ''; const typedId = type ? `-${type}` : ''; @@ -42,7 +42,7 @@ class MessageBuilder { switch (typeof data) { case 'string': // this._ids.push(id); - this.messages.push({ type: type, id: id, text: data }); + this.messages.push({ type: type, id: id, text: data, attributes: attributes }); break; case 'object': diff --git a/src/component/header/style/module/_nav.scss b/src/component/header/style/module/_nav.scss index 4d3bc7f21..4cb6fd1fc 100644 --- a/src/component/header/style/module/_nav.scss +++ b/src/component/header/style/module/_nav.scss @@ -10,6 +10,7 @@ &__list { @include margin(0 -4v); + @include max-width(calc(100% + 4v)); } } } diff --git a/src/component/input/input-base/template/ejs/input.ejs b/src/component/input/input-base/template/ejs/input.ejs index e8540606c..a576f9586 100644 --- a/src/component/input/input-base/template/ejs/input.ejs +++ b/src/component/input/input-base/template/ejs/input.ejs @@ -76,7 +76,7 @@ if (input.error) { } if (input.messages) { - input.messages.forEach(message => builder.add(message.type, message.text)); + input.messages.forEach(message => builder.add(message.type, message.text, message.attributes)); } if (builder.isIncluded) describedby.push(...builder.ids); diff --git a/src/component/link/style/module/_download.scss b/src/component/link/style/module/_download.scss index 6908fe4d0..248fd2a0a 100644 --- a/src/component/link/style/module/_download.scss +++ b/src/component/link/style/module/_download.scss @@ -13,15 +13,12 @@ } #{ns(link__detail)} { - @include absolute(7v, null, null, 0); + @include absolute(calc(100% + 1v), null, null, 0); @include text-style(xs); @include font-weight(regular); - max-width: 100%; white-space: nowrap; pointer-events: none; cursor: text; - overflow: hidden; - text-overflow: ellipsis; abbr { text-decoration: none; diff --git a/src/component/modal/script/modal/modal.js b/src/component/modal/script/modal/modal.js index fe5f75fef..ef0e5cb2b 100644 --- a/src/component/modal/script/modal/modal.js +++ b/src/component/modal/script/modal/modal.js @@ -45,7 +45,10 @@ class Modal extends api.core.Disclosure { break; default: - this.conceal(); + if (this.isDisclosed) { + this.conceal(); + this.focus(); + } } } diff --git a/src/component/modal/style/_module.scss b/src/component/modal/style/_module.scss index 45251c8df..61af5aa9f 100644 --- a/src/component/modal/style/_module.scss +++ b/src/component/modal/style/_module.scss @@ -21,7 +21,7 @@ @include margin(0); @include display-flex(column, stretch, space-between); @include fixed(0, 0, 0, 0, 100%, 100%); - @include padding-right(var(--scrollbar-width)); + @include padding-right(var(--scrollbar-width), md); // transition in/out transition: opacity 0.3s, visibility 0.3s; diff --git a/src/component/password/example/sample/password-register.ejs b/src/component/password/example/sample/password-register.ejs index 5bb3ae63a..fe682c21e 100755 --- a/src/component/password/example/sample/password-register.ejs +++ b/src/component/password/example/sample/password-register.ejs @@ -1,7 +1,20 @@ <% -let password = locals.password || {}; +const password = locals.password || {}; -let data = { +const messages = password.messages || [ + { text: getText('format.label', 'password') }, + { text: getText('format.characters', 'password'), type: 'info' }, + { text: getText('format.special', 'password'), type: 'info' }, + { text: getText('format.digit', 'password'), type: 'info' } +]; + +const msgAttributes = {}; +msgAttributes[`data-${prefix}-valid`] = getText('format.valid', 'password'); +msgAttributes[`data-${prefix}-error`] = getText('format.error', 'password'); + +messages.filter(message => message.type !== undefined).forEach(message => { message.attributes = msgAttributes; }); + +const data = { id: uniqueId('password'), ...password, input: { @@ -11,12 +24,7 @@ let data = { }, checkbox: password.checkbox || {}, link: false, - messages: password.messages || [ - { text: getText('format.label', 'password') }, - { text: getText('format.characters', 'password'), type: 'info'}, - { text: getText('format.special', 'password'), type: 'info'}, - { text: getText('format.digit', 'password'), type: 'info'} - ], + messages: messages } %> diff --git a/src/component/password/i18n/fr.yml b/src/component/password/i18n/fr.yml index 503238879..910d278c9 100644 --- a/src/component/password/i18n/fr.yml +++ b/src/component/password/i18n/fr.yml @@ -17,6 +17,8 @@ format: digit: 1 chiffre minimum special: 1 caractĂšre spĂ©cial minimum characters: 12 caractĂšres minimum + valid: validĂ© + error: en erreur link: label: Mot de passe oubliĂ© ? - href: url de la page de rĂ©cupĂ©ration \ No newline at end of file + href: url de la page de rĂ©cupĂ©ration diff --git a/src/component/password/style/_module.scss b/src/component/password/style/_module.scss index 399097ef8..36f3af961 100644 --- a/src/component/password/style/_module.scss +++ b/src/component/password/style/_module.scss @@ -8,15 +8,13 @@ @include set-text-margin(0 0 2v 0); #{ns-attr(capslock)} { - @include before('', block) { - @include absolute(3v, 3v, null, null, 4v, 4v); - pointer-events: none; + #{ns(password__input)} { + @include padding-right(12v); } - } - :not(#{ns-attr(capslock)}) { - #{ns(password__input)} { - @include padding-right(4v); + @include before('', block) { + @include absolute(3v, 4v, null, null, 4v, 4v); + pointer-events: none; } } @@ -39,4 +37,18 @@ &__label { @include padding-right(24v); } + + #{ns(message)} { + &:first-child { + --comma: " "; + } + } + + #{ns(message--valid)}#{ns-attr(valid)} { + --content: "\00a0-\00a0" attr(#{ns-attr(valid, null, true)}) var(--comma); + } + + #{ns(message--error)}#{ns-attr(error)} { + --content: "\00a0-\00a0" attr(#{ns-attr(error, null, true)}) var(--comma); + } } diff --git a/src/component/password/style/_scheme.scss b/src/component/password/style/_scheme.scss index 668a92770..1f098a48b 100644 --- a/src/component/password/style/_scheme.scss +++ b/src/component/password/style/_scheme.scss @@ -14,7 +14,7 @@ #{selector.ns-attr(capslock)} { @include before { - @include color.data-uri-svg(default grey, (legacy: $legacy), $capslock-svg); + @include color.data-uri-svg(label grey, (legacy: $legacy), $capslock-svg); } } diff --git a/src/component/sidemenu/style/_scheme.scss b/src/component/sidemenu/style/_scheme.scss index 75c278b94..b6ead368e 100644 --- a/src/component/sidemenu/style/_scheme.scss +++ b/src/component/sidemenu/style/_scheme.scss @@ -28,6 +28,11 @@ } @include list-item { + #{ns(sidemenu__link)}, + #{ns(sidemenu__btn)} { + @include color.text(default grey, (legacy:$legacy)); + } + @include before { @include color.box-shadow(default grey, (legacy:$legacy), top-1-out bottom-1-in); } diff --git a/src/component/tile/deprecated/style/_module.scss b/src/component/tile/deprecated/style/_module.scss index d087a5a03..a72d6f499 100644 --- a/src/component/tile/deprecated/style/_module.scss +++ b/src/component/tile/deprecated/style/_module.scss @@ -14,6 +14,10 @@ } } + &__body > &__desc { + @include padding-bottom(10v); + } + &--horizontal { #{ns(tile__img)} { @include size(12v, 12v); diff --git a/src/component/tile/style/_legacy.scss b/src/component/tile/style/_legacy.scss index cd2e17df5..bb7d0cfd8 100644 --- a/src/component/tile/style/_legacy.scss +++ b/src/component/tile/style/_legacy.scss @@ -4,12 +4,36 @@ //// @use 'module/legacy'; +@use 'module/media-query'; @include legacy.is(ie11) { /** * Correctif de la largeur du texte dans la tuile */ #{ns(tile)} { + &--download, + &--horizontal { + #{ns(tile)}__body { + flex-basis: 100%; + } + + &#{ns(tile--vertical\@md)} { + @include media-query.respond-from(md) { + #{ns(tile)}__body { + flex-basis: auto; + } + } + } + + &#{ns(tile--vertical\@lg)} { + @include media-query.respond-from(lg) { + #{ns(tile)}__body { + flex-basis: auto; + } + } + } + } + &__body, &__body > * { max-width: 100%; @@ -17,10 +41,52 @@ &__title { @include margin(0 0 2v); + max-width: 100%; + + a { + @include icon-legacy(arrow-right-line, sm, after); + } + + @include target-blank { + @include icon-legacy(external-link-line, sm, after); + } } &__desc { @include margin(0); + max-width: 100%; + } + + &__start, + &__detail { + max-width: 100%; + } + + &--download { + #{ns(tile__title a)} { + @include icon-legacy(download-line, null, after); + } + } + + &#{ns(enlarge-link)} { + #{ns(tile)}__title { + a { + text-decoration: none; + @include icon-size-legacy(md, after) { + background-color: transparent; + } + } + } + } + } + + #{ns(tile--sm)} { + #{ns(tile)} { + &__title { + a { + @include icon-size-legacy(sm, after); + } + } } } } diff --git a/src/component/tile/style/module/_default.scss b/src/component/tile/style/module/_default.scss index 526cf87dd..8567b150e 100644 --- a/src/component/tile/style/module/_default.scss +++ b/src/component/tile/style/module/_default.scss @@ -53,11 +53,17 @@ &#{ns(enlarge-link)} { #{ns(tile)}__title { a { - @include icon-size(md, after) { + @include icon(arrow-right-line, md, after) { @include absolute(null, 8v, 9v); } } } + + &#{ns(tile--no-icon)} { + #{ns(tile__title a)} { + @include after(none); + } + } } @include title { @@ -75,8 +81,6 @@ } a { - @include icon(arrow-right-line, sm, after); - @include before { background-position: 0 100%; background-size: 100% spacing.space(1v); @@ -89,15 +93,6 @@ } } - &--no-icon, - &:not(#{ns(enlarge-link)}):not(#{ns(tile--download)}) { - #{ns(tile__title a)} { - &:not([target="_blank"]) { - @include after(none); - } - } - } - &__desc { @include text-style(md); flex: 1 1 auto; diff --git a/src/component/tile/style/module/_download.scss b/src/component/tile/style/module/_download.scss index 2a8475411..0afac3a41 100644 --- a/src/component/tile/style/module/_download.scss +++ b/src/component/tile/style/module/_download.scss @@ -3,7 +3,7 @@ /// @group tile //// -#{ns(tile--download)} { +#{ns(tile)}#{ns(tile--download)} { #{ns(tile__title a)} { @include icon(download-line, null, after); } diff --git a/src/component/tile/template/ejs/content.ejs b/src/component/tile/template/ejs/content.ejs index e03ab9e00..2681c8bbb 100644 --- a/src/component/tile/template/ejs/content.ejs +++ b/src/component/tile/template/ejs/content.ejs @@ -39,7 +39,12 @@ if (content.assess === true) { } else if (typeof(content.assess) === 'string') { attributes[`data-${prefix}-assess-file`] = content.assess; } -if (content.disabled !== true) attributes.href = href; +if (content.disabled !== true) { + attributes.href = href; +} else { + attributes.role = 'link'; + attributes['aria-disabled'] = true; +} if (content.lang) attributes.hreflang = content.lang; if (content.downloadable === true) attributes.download = ''; if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable; diff --git a/src/component/toggle/style/module/_default.scss b/src/component/toggle/style/module/_default.scss index d68150b61..4e6bd8262 100644 --- a/src/component/toggle/style/module/_default.scss +++ b/src/component/toggle/style/module/_default.scss @@ -17,6 +17,7 @@ @include size(10v, 6v); @include absolute; opacity: 0; + -webkit-tap-highlight-color: transparent; &:checked { ~ #{ns(toggle__label)} { @@ -38,6 +39,7 @@ width: spacing.space(calc(100% - 10v)); min-height: spacing.space(6v); @include text-style(md); + -webkit-tap-highlight-color: transparent; &#{ns-attr(unchecked-label)}#{ns-attr(checked-label)} { @include padding-left(0); diff --git a/src/component/tooltip/example/index.ejs b/src/component/tooltip/example/index.ejs index 22407897f..118519764 100755 --- a/src/component/tooltip/example/index.ejs +++ b/src/component/tooltip/example/index.ejs @@ -8,8 +8,6 @@ <%- sample(getText('sample.grid.right', 'tooltip'), './sample/tooltip-grid.ejs', {tooltip: {position: 'right'}}, true); %> -<%- sample(getText('sample.text', 'tooltip'), './sample/tooltip-text.ejs', {}, true); %> - <%- sample(getText('sample.list', 'tooltip'), './sample/tooltip-list.ejs', {}, true); %> <%- sample(getText('sample.table', 'tooltip'), './sample/tooltip-table.ejs', {}, true); %> diff --git a/src/component/tooltip/example/sample/tooltip-text.ejs b/src/component/tooltip/example/sample/tooltip-text.ejs deleted file mode 100644 index 6935f722f..000000000 --- a/src/component/tooltip/example/sample/tooltip-text.ejs +++ /dev/null @@ -1,16 +0,0 @@ -<% eval(include('../../../../core/index.ejs')); %> - -<% -let tooltip = locals.tooltip || {}; -let tooltipId = uniqueId('tooltip'); -let data = { - id: tooltipId, - content: lorem(), - ...tooltip -}; -let triggerText = tooltip.triggerText || getText('sample.example', 'tooltip'); -let tooltipTarget = `${triggerText}`; -let paragraphInsert = tooltipTarget + include('../sample/tooltip-default', {tooltip: data}); -%> - -<%- include('../../../../core/template/ejs/typography/paragraph', {paragraph: {content: lorem(paragraphInsert)} }); %> diff --git a/src/component/transcription/template/ejs/transcription.ejs b/src/component/transcription/template/ejs/transcription.ejs index 765cf9c36..38230110a 100644 --- a/src/component/transcription/template/ejs/transcription.ejs +++ b/src/component/transcription/template/ejs/transcription.ejs @@ -41,7 +41,7 @@ let collapseId = prefix + '-transcription-collapse-' + transcription.id;
<%- include('../../../modal/template/ejs/modal.ejs', {modal: { ...modal, id: modalId }}) %> diff --git a/src/core/script/api/modules/register/instance.js b/src/core/script/api/modules/register/instance.js index beeba6ba8..2c23a62fe 100644 --- a/src/core/script/api/modules/register/instance.js +++ b/src/core/script/api/modules/register/instance.js @@ -173,13 +173,13 @@ class Instance { for (const action of this._hashes) action.handle(hash, e); } - listenKey (code, closure, preventDefault = false, stopPropagation = false, type = 'down') { + listenKey (keyCode, closure, preventDefault = false, stopPropagation = false, type = 'down') { if (this._keyListenerTypes.indexOf(type) === -1) { this.listen(`key${type}`, this.handlingKey); this._keyListenerTypes.push(type); } - this._keys.push(new KeyAction(type, code, closure, preventDefault, stopPropagation)); + this._keys.push(new KeyAction(type, keyCode, closure, preventDefault, stopPropagation)); } unlistenKey (code, closure) { @@ -503,10 +503,10 @@ class Instance { } class KeyAction { - constructor (type, code, closure, preventDefault, stopPropagation) { + constructor (type, keyCode, closure, preventDefault, stopPropagation) { this.type = type; this.eventType = `key${type}`; - this.code = code; + this.keyCode = keyCode; this.closure = closure; this.preventDefault = preventDefault === true; this.stopPropagation = stopPropagation === true; @@ -514,7 +514,7 @@ class KeyAction { handle (e) { if (e.type !== this.eventType) return; - if (e.keyCode === this.code) { + if (e.keyCode === this.keyCode.value) { this.closure(e); if (this.preventDefault) { e.preventDefault(); diff --git a/src/core/script/disclosure/disclosures-group.js b/src/core/script/disclosure/disclosures-group.js index f86966b80..8282d532f 100644 --- a/src/core/script/disclosure/disclosures-group.js +++ b/src/core/script/disclosure/disclosures-group.js @@ -112,8 +112,9 @@ class DisclosuresGroup extends Instance { this._index = undefined; let index = defaultIndex; for (let i = 0; i < this.length; i++) { - if (index !== -1 && this.members[i].isDisclosed) { + if (this.members[i].isDisclosed) { index = i; + break; } } @@ -131,9 +132,9 @@ class DisclosuresGroup extends Instance { for (let i = 0; i < this.length; i++) { const member = this.members[i]; if (value === i) { - member.disclose(true); + if (!member.isDisclosed) member.disclose(true); } else { - member.conceal(true); + if (member.isDisclosed) member.conceal(true); } } this.apply(); diff --git a/src/core/style/action/module/_input.scss b/src/core/style/action/module/_input.scss index e52a76304..e52c4aefb 100644 --- a/src/core/style/action/module/_input.scss +++ b/src/core/style/action/module/_input.scss @@ -4,6 +4,7 @@ //// @use 'module/reset'; +@use 'module/spacing'; input, select, @@ -27,3 +28,11 @@ input[type="checkbox"], input[type="radio"] { @include reset.appearance; } + +input::-webkit-contacts-auto-fill-button, +input::-webkit-credentials-auto-fill-button { + @include margin-left(4v); + @include margin-right(-1px); + @include size(5v, 5v); + mask-size: #{spacing.space(5v 5v)}; +} diff --git a/tool/example/example.ejs b/tool/example/example.ejs index 1f7d3a4ab..8e443000c 100644 --- a/tool/example/example.ejs +++ b/tool/example/example.ejs @@ -4,7 +4,8 @@ - <%= title %> - Design System + + <%= title %> - SystĂšme de design <%- include('../../src/core/template/ejs/favicon/favicon.ejs', {favicon: {path: `${relativeRoot}dist/favicon/`}}); %>