Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ feat(tile): Ajout icone fleche, état désactivé, icone lien externe, tuile de téléchargement [DS-3243] #602

Merged
merged 7 commits into from
Jun 15, 2023
Merged

✨ feat(tile): Ajout icone fleche, état désactivé, icone lien externe, tuile de téléchargement [DS-3243] #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dee1354
fix(tile): ajout icone arrow, external, download
keryanS May 10, 2023
a2b2703
fix(tile): ajout tile download, script assess, et exemples
keryanS May 11, 2023
ac458fd
fix(tile): tuile horizontale
keryanS May 23, 2023
0661eef
fix(tile): espacements tuiles
keryanS May 23, 2023
915ef27
fix(tile): download toujours horizontal
keryanS May 25, 2023
d3936a4
fix(tile): ajout des tuiles vertical@md et vertical@lg
keryanS May 26, 2023
55ba0a1
fix(card, tile): exemples deprecated et download en sous page
keryanS Jun 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/component/card/example/deprecated/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<%- deprecation(); %>

<%- include('../../deprecated/example/index') %>
4 changes: 0 additions & 4 deletions src/component/card/example/download/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,6 @@
title: 'Contenu',
path: 'sample-content'
},
{
title: 'Carte horizontale',
path: 'sample-horizontal'
},
];

const accordions = [];
Expand Down
8 changes: 4 additions & 4 deletions src/component/card/example/download/sample/sample-content.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<% const sample = getSample(include); %>

<%- sample('Carte de téléchargement, cas maximum', './card-download', { card : { content: { details: ['icon'], badges: true } } }, true, '../../sample/card-layout', {col: {sm: 6}}); %>
<%- sample('Carte de téléchargement, cas maximum', './card-download', { card : { content: { details: ['icon'], badges: true } } }, true, '../../sample/card-layout', {}); %>

<%- sample('Carte de téléchargement, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {col: {sm: 6}}); %>
<%- sample('Carte de téléchargement, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {}); %>

<%- sample('Carte de téléchargement, avec tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {col: {sm: 6}}); %>
<%- sample('Carte de téléchargement, avec tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {}); %>

<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true} }}, true, '../../sample/card-layout', {col: {sm: 6}, desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)'}); %>
<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true} }}, true, '../../sample/card-layout', {desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)'}); %>
4 changes: 0 additions & 4 deletions src/component/card/example/download/sample/sample-horizontal.ejs
View file
Open in desktop

This file was deleted.

10 changes: 3 additions & 7 deletions src/component/card/example/download/sample/sample-img.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<% const sample = getSample(include); %>

<%- sample('Carte de téléchargement, image 3x4', './card-download', {}, true, '../../sample/card-layout', {col: {sm:6, md: 4}}); %>
<%- sample('Carte de téléchargement, image 4x3', './card-download', { card : { img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {col: {sm:6, md: 4}}); %>
<%- sample('Carte de téléchargement, image 32x9', './card-download', { card : { img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {col: {sm:6, md: 4}}); %>

<%- sample('Carte de téléchargement horizontale, image 3x4', './card-download', { card : { horizontal: true }}, true, '../../sample/card-layout', {col: {md:6}}); %>
<%- sample('Carte de téléchargement horizontale, image 4x3', './card-download', { card : { horizontal: true, img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {col: {md:6}}); %>
<%- sample('Carte de téléchargement horizontale, image 32x9', './card-download', { card : { horizontal: true, img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {col: {sm:6, md: 4}}); %>
<%- sample('Carte de téléchargement, image 3x4', './card-download', {}, true, '../../sample/card-layout', {}); %>
<%- sample('Carte de téléchargement, image 4x3', './card-download', { card : { img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {}); %>
<%- sample('Carte de téléchargement, image 32x9', './card-download', { card : { img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {}); %>
4 changes: 2 additions & 2 deletions src/component/card/example/download/sample/sample-no-img.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<% const sample = getSample(include); %>

<%- sample('Carte de téléchargement, sans image', './card-download', {card: {img: false}}, true, '../../sample/card-layout', {col: {md:6}}); %>
<%- sample('Carte de téléchargement, sans image', './card-download', {card: {img: false}}, true, '../../sample/card-layout', {}); %>

<%- sample('Carte de téléchargement horizontale, sans image', './card-download', { card : { img: false, horizontal: true }}, true, '../../sample/card-layout', {col: {md:6}}); %>
<%- sample('Carte de téléchargement horizontale, sans image', './card-download', { card : { img: false, horizontal: true }}, true, '../../sample/card-layout', {}); %>
10 changes: 3 additions & 7 deletions src/component/card/example/download/sample/sample-sizes.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<% const sample = getSample(include); %>

<%- sample('Carte de téléchargement sm', './card-download', { card : { size: 'sm' }}, true, '../../sample/card-layout', {col: {sm: 6, md:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
<%- sample('Carte de téléchargement md', './card-download', { card : { size: 'md' }}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 6 à 8 colonnes en version desktop'}); %>
<%- sample('Carte de téléchargement lg', './card-download', { card : { size: 'lg' }}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 8 à 12 colonnes en version desktop'}); %>

<%- sample('Carte de téléchargement sm horizontal', './card-download', { card : { size: 'sm', horizontal: true}}, true, '../../sample/card-layout', {col: {sm:6}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
<%- sample('Carte de téléchargement md horizontal', './card-download', { card : { size: 'md', horizontal: true}}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 6 à 8 colonnes en version desktop'}); %>
<%- sample('Carte de téléchargement lg horizontal', './card-download', { card : { size: 'lg', horizontal: true}}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 8 à 12 colonnes en version desktop'}); %>
<%- sample('Carte de téléchargement sm', './card-download', { card : { size: 'sm' }}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
<%- sample('Carte de téléchargement md', './card-download', { card : { size: 'md' }}, true, '../../sample/card-layout', {col: {md:8}, desc: 'dans une grille sur 6 à 8 colonnes en version desktop'}); %>
<%- sample('Carte de téléchargement lg', './card-download', { card : { size: 'lg' }}, true, '../../sample/card-layout', {desc: 'dans une grille sur 8 à 12 colonnes en version desktop'}); %>
138 changes: 65 additions & 73 deletions src/component/card/example/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,74 @@
<% const sample = getSample(include); %>

<%
const elements = [
{
title: 'Tailles',
path: 'sample-sizes'
},
{
title: 'Lien non élargi',
path: 'sample-enlarge'
},
{
title: 'Icône',
path: 'sample-icon'
},
{
title: 'Variations',
path: 'sample-variations'
},
{
title: 'Sans image',
path: 'sample-no-img'
},
{
title: 'Image et ratio',
path: 'sample-img'
},
/*{
title: 'Vidéo et ratios',
path: 'sample-vid'
},*/
{
title: 'En-tête',
path: 'sample-header'
},
{
title: 'Contenu',
path: 'sample-content'
},
{
title: 'Desactivé',
path: 'sample-disabled'
},
{
title: 'Zone d\'action',
path: 'sample-footer'
},
{
title: 'Carte horizontale',
path: 'sample-horizontal'
},
{
title: 'Grille de cartes',
path: 'sample-grid'
},
{
title: 'Grille de cartes horizontales',
path: 'sample-grid-horizontal'
},
{
title: 'Deprecated',
path: '../../deprecated/example/index'
},
];
const elements = [
{
title: 'Tailles',
path: 'sample-sizes'
},
{
title: 'Lien non élargi',
path: 'sample-enlarge'
},
{
title: 'Icône',
path: 'sample-icon'
},
{
title: 'Variations',
path: 'sample-variations'
},
{
title: 'Sans image',
path: 'sample-no-img'
},
{
title: 'Image et ratio',
path: 'sample-img'
},
{
title: 'En-tête',
path: 'sample-header'
},
{
title: 'Contenu',
path: 'sample-content'
},
{
title: 'Desactivé',
path: 'sample-disabled'
},
{
title: 'Zone d\'action',
path: 'sample-footer'
},
{
title: 'Carte horizontale',
path: 'sample-horizontal'
},
{
title: 'Grille de cartes',
path: 'sample-grid'
},
{
title: 'Grille de cartes horizontales',
path: 'sample-grid-horizontal'
},
];

const accordions = [];
const accordions = [];

for (let element of elements) {
accordions.push({
label: element.title,
id: uniqueId('card'),
content: include(`./sample/${element.path}`)
})
}
for (let element of elements) {
accordions.push({
label: element.title,
id: uniqueId('card'),
content: include(`./sample/${element.path}`)
});
}

const data = {
accordions: accordions
}
const data = {
accordions: accordions
}
%>

<%- include('../../accordion/template/ejs/accordions-group', {accordionsGroup: data }); %>
3 changes: 2 additions & 1 deletion src/component/card/i18n/fr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte
subdir:
title: Carte de téléchargement de fichier
description: Ce composant permet aux utilisateurs de télécharger un fichier.
download: Carte de téléchargement
download: Carte de téléchargement
deprecated: Version dépréciée
1 change: 1 addition & 0 deletions src/component/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import './navigation/main.js';
import './tab/main.js';
import './table/main.js';
import './tag/main.js';
import './tile/main.js';
import './header/main.js';
import './display/main.js';
export default api;
8 changes: 6 additions & 2 deletions src/component/tile/.package.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,9 @@ style:
- core
- link
- button
- badge
- tag
script:
- core
example:
style:
- badge
- tag
2 changes: 2 additions & 0 deletions src/component/tile/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import api from '../api.js';
export default api;
7 changes: 7 additions & 0 deletions src/component/tile/example/download/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<% const sample = getSample(include); %>

<%- sample('Tuile de téléchargement', '../sample/tile-default', { tile : { pictogram: true, download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: true} }}, true, '../sample/tile-layout', {col: {md:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>

<%- sample('Tuile de téléchargement avec détail renseigné automatiquement', '../sample/tile-default', { tile : { pictogram: true, download: true, content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', assess: true, details: 'Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'} }}, true, '../sample/tile-layout', {col: {md:6}}); %>

<%- sample('Tuile de téléchargement vertical à partir de md', '../sample/tile-default', { tile : { pictogram: true, download: true, content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', vertical: 'md'} }}, true, '../sample/tile-layout', {col: {md:6}}); %>
4 changes: 4 additions & 0 deletions src/component/tile/example/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
title: 'Contenu',
path: 'sample-content'
},
{
title: 'Icône',
path: 'sample-icon'
},
{
title: 'Tuile horizontale',
path: 'sample-horizontal'
Expand Down
8 changes: 4 additions & 4 deletions src/component/tile/example/sample/sample-content.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<% const sample = getSample(include); %>

<%- sample('Tuile verticale avec badge dans le contenu', './tile-default', { tile : { pictogram: true, content: { badge: true } }}, true, './tile-layout', {col: {md:4}}); %>
<%- sample('Tuile verticale avec badge dans le contenu', './tile-default', { tile : { pictogram: true, content: { badge: true, description: true } }}, true, './tile-layout', {col: {md:4}}); %>

<%- sample('Tuile verticale avec tag dans le contenu', './tile-default', { tile : { pictogram: true, content: { tag: true } }}, true, './tile-layout', {col: {md:4}}); %>
<%- sample('Tuile verticale avec tag dans le contenu', './tile-default', { tile : { pictogram: true, content: { tag: true, description: true } }}, true, './tile-layout', {col: {md:4}}); %>

<%- sample('Tuile verticale avec détail', './tile-default', { tile : { pictogram: true, content: { details: true } }}, true, './tile-layout', {col: {md:4}}); %>

<%- sample('Tuile verticale sm avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', content: { badge: true, details: true } }}, true, './tile-layout', {col: {md:3}}); %>
<%- sample('Tuile verticale sm avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', content: { badge: true, details: true, description: true } }}, true, './tile-layout', {col: {md:3}}); %>

<%- sample('Tuile verticale sm avec détails et tag', './tile-default', { tile : { pictogram: true, size: 'sm', content: { tag: true, details: true } }}, true, './tile-layout', {col: {md:3}}); %>
<%- sample('Tuile verticale sm avec détails et tag', './tile-default', { tile : { pictogram: true, size: 'sm', content: { tag: true, details: true, description: true } }}, true, './tile-layout', {col: {md:3}}); %>
14 changes: 7 additions & 7 deletions src/component/tile/example/sample/sample-grid-horizontal.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@
const tileH = { pictogram: true, horizontal: true, col: {md:'6', lg:'4'}};
%>
<%- sample('Grilles de tuiles horizontales', './tiles-grid', { tiles : [
{ ...tileH, content: { tag: true }},
{ ...tileH, content: { badge: true }},
{ ...tileH, content: { details: true }},
{ ...tileH, content: { details: true, tag: true }},
{ ...tileH, content: { tag: true, description: true, details: true }},
{ ...tileH, content: { badge: true, description: true }},
{ ...tileH, content: { details: true}},
{ ...tileH, content: { }},
]}, true, './tiles-layout'); %>

<%
const tileHSm = { pictogram: true, horizontal: true, size:'sm', col: { sm:'6', md:'4', lg:'3'}};
%>
<%- sample('Grilles de tuiles horizontales sm', './tiles-grid', { tiles : [
{ ...tileHSm, content: { tag: true }},
{ ...tileHSm, content: { badge: true }},
{ ...tileHSm, content: { tag: true, description: true, details: true }},
{ ...tileHSm, content: { badge: true, description: true }},
{ ...tileHSm, content: { details: true }},
{ ...tileHSm, content: { details: true, tag: true }},
{ ...tileHSm, content: { }},
]}, true, './tiles-layout'); %>

12 changes: 6 additions & 6 deletions src/component/tile/example/sample/sample-grid.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@
const tile = { pictogram: true, col: {md:'6', lg:'4'}};
%>
<%- sample('Grilles de tuiles verticales', './tiles-grid', { tiles : [
{ ...tile, content: { tag: true }},
{ ...tile, content: { badge: true }},
{ ...tile, content: { tag: true, description: true, details: true }},
{ ...tile, content: { badge: true, description: true }},
{ ...tile, content: { details: true }},
{ ...tile, content: { details: true, tag: true }},
{ ...tile, content: { }},
]}, true, './tiles-layout'); %>

<%
const tileSm = { pictogram: true, size:'sm', col: {sm:'6', md:'4', lg:'3'}};
%>
<%- sample('Grilles de tuiles verticales sm', './tiles-grid', { tiles : [
{ ...tileSm, content: { tag: true }},
{ ...tileSm, content: { badge: true }},
{ ...tileSm, content: { tag: true, description: true, details: true }},
{ ...tileSm, content: { badge: true, description: true }},
{ ...tileSm, content: { details: true }},
{ ...tileSm, content: { details: true, tag: true }},
{ ...tileSm, content: { }},
]}, true, './tiles-layout'); %>
10 changes: 9 additions & 1 deletion src/component/tile/example/sample/sample-horizontal.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,12 @@

<%- sample('Tuile horizontale avec détails et tag', './tile-default', { tile : { pictogram: true, horizontal: true, content: { tag: true, details: true } }}, true, './tile-layout', {col: {md:'6', lg:'4'}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>

<%- sample('Tuile horizontale sm avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, content: { badge: true, details: true }}}, true, './tile-layout', {col: { sm:'6', md:'4', lg:'3'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
<%- sample('Tuile sm horizontale avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, content: { badge: true, details: true }}}, true, './tile-layout', {col: {md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>

<%- sample('Tuile horizontale puis vertical en md', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'md', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>

<%- sample('Tuile sm horizontale puis vertical en md', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'md', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>

<%- sample('Tuile horizontale puis vertical en lg', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>

<%- sample('Tuile sm horizontale puis vertical en lg', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
5 changes: 5 additions & 0 deletions src/component/tile/example/sample/sample-icon.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<% const sample = getSample(include); %>

<%- sample('Tuile sans icone', './tile-default', { tile : { pictogram: true, icon: false }}, true, './tile-layout', {col: {md:6}}); %>

<%- sample('Tuile avec icone lien externe', './tile-default', { tile : { pictogram: true, content: { blank: true } }}, true, './tile-layout', {col: {md:6}}); %>
Loading