Skip to content

Commit

Permalink
fix(tile): ajout des tuiles vertical@md et vertical@lg
Browse files Browse the repository at this point in the history
  • Loading branch information
@keryanS @lab9fr
keryanS authored and lab9fr committed Jun 14, 2023
1 parent 915ef27 commit d3936a4
Show file tree
Hide file tree
Showing 14 changed files with 162 additions and 84 deletions.
8 changes: 4 additions & 4 deletions src/component/tile/example/sample/sample-content.ejs
View file
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}}); %>
4 changes: 2 additions & 2 deletions src/component/tile/example/sample/sample-download.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

<%- sample('Tuile avec icone de téléchargement', './tile-default', { tile : { pictogram: true, download: true, content: { title: 'Télécharger le document XX', details: true} }}, true, './tile-layout', {col: {md:6}}); %>

<%- sample('Tuile avec lien téléchargeable', './tile-default', { tile : { pictogram: true, download: true, content: { title: 'Télécharger le document XX', downloadable: true, description: undefined, details: true} }}, true, './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. Y ajouter une valeur permet de renommer le fichier téléchargé.'}); %>
<%- sample('Tuile avec lien téléchargeable', './tile-default', { tile : { pictogram: true, download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: true} }}, true, './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. Y ajouter une valeur permet de renommer le fichier téléchargé.'}); %>

<%- sample('Tuile téléchargeable avec détail renseigné automatiquement', './tile-default', { tile : { pictogram: true, download: true, content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', assess: true, description: undefined, details: 'Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'} }}, true, './tile-layout', {col: {md:6}}); %>
<%- sample('Tuile téléchargeable avec détail renseigné automatiquement', './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, './tile-layout', {col: {md:6}}); %>
12 changes: 6 additions & 6 deletions src/component/tile/example/sample/sample-grid-horizontal.ejs
View file
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, description: undefined }},
{ ...tileH, content: { tag: true, description: true, details: true }},
{ ...tileH, content: { badge: true, description: true }},
{ ...tileH, content: { details: true}},
{ ...tileH, content: { details: true, tag: 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, description: undefined }},
{ ...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
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
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'}); %>
8 changes: 4 additions & 4 deletions src/component/tile/example/sample/sample-no-img.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<% const sample = getSample(include); %>

<%- sample('Tuile sans image', './tile-default', {tile: {content: {details: true}}}, true, './tile-layout', {col: {md:4}}); %>
<%- sample('Tuile sans image', './tile-default', {}, true, './tile-layout', {col: {md:4}}); %>

<%- sample('Tuile titre et description', './tile-default', {}, true, './tile-layout', {col: {md:4}}); %>
<%- sample('Tuile titre et description', './tile-default', {content: {description: true}}, true, './tile-layout', {col: {md:4}}); %>

<%- sample('Tuile titre et détails', './tile-default', {tile: {content: { description: undefined, details: true}}}, true, './tile-layout', {col: {md:4}}); %>
<%- sample('Tuile titre et détails', './tile-default', {tile: {content: {details: true}}}, true, './tile-layout', {col: {md:4}}); %>

<%- sample('Tuile titre seul', './tile-default', {tile: {content: { description: undefined}}}, true, './tile-layout', {col: {md:4}}); %>
<%- sample('Tuile sans image full contenu', './tile-default', {tile: {content: {description:true, badge: true, details: true}}}, true, './tile-layout', {col: {md:4}}); %>
4 changes: 2 additions & 2 deletions src/component/tile/example/sample/sample-sizes.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<% const sample = getSample(include); %>

<%- sample('tuile verticale md, taille par défaut', './tile-default', { tile : { pictogram: true }}, true, './tile-layout', {col: {start: 9, md:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
<%- sample('tuile verticale md, taille par défaut', './tile-default', { tile : { pictogram: true, content: {details: true, description: true} }}, true, './tile-layout', {col: {start: 9, md:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>

<%- sample('tuile taille sm', './tile-default', { tile: { pictogram: true, size: 'sm' }}, true, './tile-layout', {col: {start: 6, md:3}, desc: 'dans une grille sur 3 à 4 colonnes en version desktop'}); %>
<%- sample('tuile taille sm', './tile-default', { tile: { pictogram: true, size: 'sm', content: {details: true, description: true} }}, true, './tile-layout', {col: {start: 6, md:3}, desc: 'dans une grille sur 3 à 4 colonnes en version desktop'}); %>
9 changes: 6 additions & 3 deletions src/component/tile/example/sample/tile-default.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ const tile = locals.tile || {};
const content = tile.content || {};
const data = {
content: {
title: content.title || 'Intitulé de la tuile',
description: content.description !== false ? content.description || lorem('', 60) : undefined,
...content,
title: content.title || 'Intitulé de la tuile',
...(content.description && {description: content.description === true ? lorem('', 60) : content.description})
},
size: tile.size,
enlarge: tile.enlarge !== false && tile.footer === undefined,
Expand All @@ -17,6 +17,10 @@ if (tile.horizontal) {
data.horizontal = tile.horizontal;
}
if (tile.vertical) {
data.vertical = tile.vertical;
}
if (tile.pictogram === true) {
data.header = {};
data.header.pictogram = {name: 'city-hall'};
Expand All @@ -34,7 +38,6 @@ if (tile.content) {
if (tile.content.tag) {
data.content.tag = { size: 'sm', label: 'label tag'};
}
}
%>
Expand Down
1 change: 1 addition & 0 deletions src/component/tile/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@
////

@import '../../core/index';
@import 'style/tool';
84 changes: 84 additions & 0 deletions src/component/tile/style/_tool.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
////
/// Tag Tool
/// @group tag
////

@use 'module/color';
@use 'module/spacing';

@mixin build-tile-horizontal() {
flex-direction: row;
align-items: flex-start;
text-align: left;

#{ns(tile__header)} {
@include margin-right(8v);
@include margin-bottom(0);
}

#{ns(tile__pictogram)} {
@include size(16v, 16v);
}

#{ns(tile__content)} {
align-items: flex-start;
}

&:not(#{ns(tile--no-icon)}) {
#{ns(tile__detail)} {
@include padding-right(8v);
@include margin-bottom(-10v);
@include margin-top(5v);
}

#{ns(tile__content)} {
@include padding-bottom(10v);
}

&#{ns(tile--sm)} {
#{ns(tile__detail)} {
@include padding-right(8v);
@include margin-bottom(-8v);
@include margin-top(3v);
}

#{ns(tile__content)} {
@include padding-bottom(8v);
}
}
}
}

@mixin build-tile-vertical() {
flex-direction: column;
text-align: center;
align-items: center;

#{ns(tile__header)} {
@include margin-bottom(4v);
@include margin-right(0 !important);
}

#{ns(tile__pictogram)} {
@include size(20v, 20v);
}

#{ns(tile__content)} {
align-items: center;
}

#{ns(tile__detail)} {
@include margin-top(3v);
}

&#{ns(enlarge-link)}:not(#{ns(tile--no-icon)}) {
#{ns(tile__content)} {
@include padding-bottom(10v);
}

#{ns(tile__detail)} {
@include margin-bottom(0);
@include padding-right(0);
}
}
}
8 changes: 3 additions & 5 deletions src/component/tile/style/module/_default.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@
background-size: 100% 1px, 1px 100%, 1px 100%, 100% 1px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: 0 100%, 0 0, 100% 0, 100% 0;
@include padding(6v 6v 7v);
@include padding(8v 8v 9v, md);
@include padding(8v 8v 9v);
text-align: center;

#{ns(grid-row)} & {
Expand Down Expand Up @@ -93,7 +92,7 @@

&__start {
order: 1;
@include margin-bottom(4v);
@include margin-bottom(3v);

#{ns(badges-group)},
#{ns(tags-group)} {
Expand All @@ -115,8 +114,7 @@
}
}

&#{ns(enlarge-link)}:not(&--no-icon):not(&--horizontal) &__content {
&#{ns(enlarge-link)}:not(&--no-icon) &__content {
@include padding-bottom(10v);
@include padding-bottom(12v, md);
}
}
17 changes: 4 additions & 13 deletions src/component/tile/style/module/_sm.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
////

#{ns(tile--sm)} {
@include padding(6v 6v 7v, md);
@include padding(6v 6v 7v);

#{ns(tile)} {
&__title {
Expand All @@ -22,12 +22,8 @@
@include text-style(sm);
}

&__detail {
@include margin-top(3v);
}

&__start {
@include margin-bottom(3v);
@include margin-bottom(2v);
}

&__pictogram {
Expand All @@ -41,18 +37,13 @@
@include margin-right(6v);
}

&__detail {
@include margin-top(3v);
}

&__pictogram {
@include size(10v, 10v);
}
}
}

&#{ns(enlarge-link)}:not(#{ns(tile--no-icon)}):not(#{ns(tile--horizontal)}) #{ns(tile__content)} {
@include padding-bottom(7v);
@include padding-bottom(8v, md);
&#{ns(enlarge-link)}:not(#{ns(tile--no-icon)}) #{ns(tile__content)} {
@include padding-bottom(8v);
}
}
37 changes: 10 additions & 27 deletions src/component/tile/style/module/_variations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,23 @@
////

@use 'module/spacing';
@use 'module/media-query';

#{ns(tile)} {
&--horizontal,
&--download {
flex-direction: row;
align-items: flex-start;
text-align: left;

#{ns(tile__header)} {
@include margin-right(8v);
@include margin-bottom(0);
}

#{ns(tile__pictogram)} {
@include size(16v, 16v);
}

#{ns(tile__content)} {
align-items: flex-start;
}
@include build-tile-horizontal();
}

#{ns(tile__detail)} {
@include margin-top(4v);
&--vertical\@md {
@include media-query.respond-from(md) {
@include build-tile-vertical();
}
}

&:not(#{ns(tile--no-icon)}) {
#{ns(tile__detail)} {
@include padding-right(8v);
@include margin-bottom(-8v);
}

#{ns(tile__content)} {
@include padding-bottom(8v);
}
&--vertical\@lg {
@include media-query.respond-from(lg) {
@include build-tile-vertical();
}
}
}
32 changes: 21 additions & 11 deletions src/component/tile/template/ejs/tile.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,21 +45,31 @@ switch (tile.size) {
case 'sm':
classes.push(`${prefix}-tile--sm`);
break;
}
if (tile.download) classes.push(`${prefix}-tile--download`);
if (tile.icon === false) classes.push(`${prefix}-tile--no-icon`);
if (tile.enlarge) classes.push(`${prefix}-enlarge-link`);
if (tile.horizontal !== undefined) {
classes.push(`${prefix}-tile--horizontal`);
}
if (tile.horizontalMd !== undefined) {
classes.push(`${prefix}-tile--horizontal-md`);
switch (tile.horizontal) {
case true:
classes.push(`${prefix}-tile--horizontal`);
break;
}
if (tile.verticalMd !== undefined) {
classes.push(`${prefix}-tile--vertical-md`);
switch (tile.vertical) {
case true:
classes.push(`${prefix}-tile--vertical`);
break;
case 'md':
classes.push(`${prefix}-tile--vertical@md`);
break;
case 'lg':
classes.push(`${prefix}-tile--vertical@lg`);
break;
}
if (tile.download) classes.push(`${prefix}-tile--download`);
if (tile.icon === false) classes.push(`${prefix}-tile--no-icon`);
if (tile.enlarge) classes.push(`${prefix}-enlarge-link`);
if (tile.accent !== undefined) classes.push(`${prefix}-tile--${tile.accent}`);
%>

Expand Down

0 comments on commit d3936a4

Please sign in to comment.