Skip to content

Commit

Permalink
🐛 fix(link, card, tile): enlarge button [DS-3798] (#943)
Browse files Browse the repository at this point in the history 
- ajout d'une classe utilitaire enlarge-button utilisée sur les cartes et les tuiles de téléchargement pour élargir la zone de clique à tout le composant quand l'element cliquable est un bouton
  • Loading branch information
@zellerbaptiste
zellerbaptiste authored Jun 4, 2024
1 parent 5e02b53 commit 9999c00
Show file tree
Hide file tree
Showing 27 changed files with 232 additions and 149 deletions.
8 changes: 4 additions & 4 deletions src/component/card/example/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
title: 'Variations',
path: 'sample-variations'
},
// {
// title: 'Markup button',
// path: 'sample-button'
// },
{
title: 'Markup button',
path: 'sample-button'
},
{
title: 'Sans image',
path: 'sample-no-img'
Expand Down
2 changes: 1 addition & 1 deletion src/component/card/example/sample/sample-disabled.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

<%- sample('Carte avec lien désactivé (a sans href)', './card-default', { card : { img: true, content: { disabled: true }}}, true, './card-layout', {col: {md:4}}); %>

<%- // sample('Carte avec bouton désactivé (disabled)', './card-default', { card : { img: true, title: 'Intitulé de la carte (sur lequel se trouve le bouton)', content: { disabled: true, actionMarkup: 'button' } }}, true, './card-layout', {col: {md:4}}); %>
<%- sample('Carte avec bouton désactivé (disabled)', './card-default', { card : { img: true, title: 'Intitulé de la carte (sur lequel se trouve le bouton)', content: { disabled: true, actionMarkup: 'button' } }}, true, './card-layout', {col: {md:4}}); %>
31 changes: 24 additions & 7 deletions src/component/card/style/_legacy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
}

&__title {
a {
a,
button {
@include icon-legacy(arrow-right-line, sm, after) {
background-color: transparent;
}
Expand Down Expand Up @@ -65,6 +66,16 @@
}
}

&#{ns(enlarge-button)} {
#{ns(card)}__title {
button {
@include icon-size-legacy(md, after) {
background-color: transparent;
}
}
}
}

@include respond-from(md) {
&--download,
&--horizontal,
Expand All @@ -78,32 +89,38 @@
}

#{ns(card--sm)} {
&#{ns(enlarge-link)} {
&#{ns(enlarge-link)},
&#{ns(enlarge-button)} {
#{ns(card)}__title {
a {
a,
button {
@include icon-size-legacy(sm, after);
}
}
}

#{ns(card)}__title {
a {
a,
button {
@include icon-size-legacy(sm, after);
}
}
}

#{ns(card--lg)} {
&#{ns(enlarge-link)} {
&#{ns(enlarge-link)},
&#{ns(enlarge-button)} {
#{ns(card)}__title {
a {
a,
button {
@include icon-size-legacy(lg, after);
}
}
}

#{ns(card)}__title {
a {
a,
button {
@include icon-size-legacy(md, after);
}
}
Expand Down
6 changes: 4 additions & 2 deletions src/component/card/style/module/_content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,16 @@
}
}

&#{ns(enlarge-link)}:not(&--no-icon) &__end {
&#{ns(enlarge-link)}:not(&--no-icon) &__end,
&#{ns(enlarge-button)}:not(&--no-icon) &__end {
@include margin-bottom(-12v); // 6v (icon) + 2v (padding end) + 4v (marge texte icon)
@include min-height(8v); // 6v (icon) + 2v (padding end)
@include padding-right(8v); // 6v (icon) + 2v (padding)
justify-content: flex-end;
}

&#{ns(enlarge-link)}:not(&--no-icon) &__content {
&#{ns(enlarge-link)}:not(&--no-icon) &__content,
&#{ns(enlarge-button)}:not(&--no-icon) &__content {
@include padding-bottom(20v); // 8v (padding card) + 6v (icon) + 2v (padding end) + 4v (marge texte icon)
}
}
13 changes: 11 additions & 2 deletions src/component/card/style/module/_default.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
@include display-flex(column);
@include relative();

&#{ns(enlarge-link)} {
&#{ns(enlarge-link)},
&#{ns(enlarge-button)} {
#{ns(card)}__title {
a,
button {
Expand All @@ -28,7 +29,15 @@
&--no-icon,
&:not(#{ns(enlarge-link)}):not(#{ns(card--download)}) {
#{ns(card__title)} {
a:not([target="_blank"]),
a:not([target="_blank"]) {
@include after(none);
}
}
}

&--no-icon,
&:not(#{ns(enlarge-button)}):not(#{ns(card--download)}) {
#{ns(card__title)} {
button {
@include after(none);
}
Expand Down
3 changes: 2 additions & 1 deletion src/component/card/style/module/_download.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
@include icon(download-line, null, after);
}

&#{ns(enlarge-link)} {
&#{ns(enlarge-link)},
&#{ns(enlarge-button)} {
@include hover-media-query {
&:hover {
#{ns(card__header)} {
Expand Down
1 change: 1 addition & 0 deletions src/component/card/style/module/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
}

@include hover-brighten(#{&}#{ns(enlarge-link)}, '#{&}__img, #{&}__vid');
@include hover-brighten(#{&}#{ns(enlarge-button)}, '#{&}__img, #{&}__vid');

&__img,
&__vid {
Expand Down
9 changes: 6 additions & 3 deletions src/component/card/style/module/_lg.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,20 @@
@include padding-top(2v);
}

&--lg#{ns(enlarge-link)}:not(&--no-icon) &__end {
&--lg#{ns(enlarge-link)}:not(&--no-icon) &__end,
&--lg#{ns(enlarge-button)}:not(&--no-icon) &__end {
@include margin-bottom(-16v); // 8v (icon) + 2v (padding end) + 6v (marge texte icon)
@include min-height(10v); // 8v (icon) + 2v (padding end)
@include padding-right(10v); // 8v (icon) + 2v (padding)
}

&--lg#{ns(enlarge-link)}:not(&--no-icon) &__content {
&--lg#{ns(enlarge-link)}:not(&--no-icon) &__content,
&--lg#{ns(enlarge-button)}:not(&--no-icon) &__content {
@include padding-bottom(26v); // 10v (padding card) + 8v (icon) + 2v (padding end) + 6v (marge texte icon)
}

&--lg#{ns(enlarge-link)}:not(&--no-icon) &__title {
&--lg#{ns(enlarge-link)}:not(&--no-icon) &__title,
&--lg#{ns(enlarge-button)}:not(&--no-icon) &__title {
a,
button {
@include icon-size(lg, after) {
Expand Down
9 changes: 6 additions & 3 deletions src/component/card/style/module/_sm.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,20 @@
@include padding-top(1v);
}

&--sm#{ns(enlarge-link)}:not(&--no-icon) &__end {
&--sm#{ns(enlarge-link)}:not(&--no-icon) &__end,
&--sm#{ns(enlarge-button)}:not(&--no-icon) &__end {
@include margin-bottom(-8v); // 4v (icon) + 1v (padding end) + 3v (marge texte icon)
@include min-height(5v); // 4v (icon) + 1v (padding end)
@include padding-right(6v); // 4v (icon) + 2v (padding)
}

&--sm#{ns(enlarge-link)}:not(&--no-icon) &__content {
&--sm#{ns(enlarge-link)}:not(&--no-icon) &__content,
&--sm#{ns(enlarge-button)}:not(&--no-icon) &__content {
@include padding-bottom(14v); // 6v (padding card) + 4v (icon) + 1v (padding end) + 3v (marge texte icon)
}

&--sm#{ns(enlarge-link)}:not(&--no-icon) &__title {
&--sm#{ns(enlarge-link)}:not(&--no-icon) &__title,
&--sm#{ns(enlarge-button)}:not(&--no-icon) &__title {
a,
button {
@include icon-size(sm, after) {
Expand Down
9 changes: 8 additions & 1 deletion src/component/card/template/ejs/card.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,14 @@ const content = card.content || {};
if (card.id) attributes.id = card.id;
if (card.enlarge) classes.push(`${prefix}-enlarge-link`);
if (card.enlarge) switch (card.content.actionMarkup) {
case 'button':
classes.push(`${prefix}-enlarge-button`);
break;
default:
classes.push(`${prefix}-enlarge-link`);
}
switch (card.size) {
case 'sm':
Expand Down
42 changes: 23 additions & 19 deletions src/component/card/template/ejs/content.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,25 +41,31 @@ const actionMarkup = content.actionMarkup || 'a';
const hasLink = !content.noLink;
const href = content.href || '#';
let attributes = content.attributes || {};
if (content.assess === true) {
attributes[`data-${prefix}-assess-file`] = '';
} else if (typeof(content.assess) === 'string') {
attributes[`data-${prefix}-assess-file`] = content.assess;
let action;
switch (actionMarkup) {
case 'a':
action = 'link';
break;
default:
action = actionMarkup;
break;
}
if (actionMarkup === 'a') {
if (content.disabled !== true) {
attributes.href = href;
} else {
attributes.role = 'link';
attributes['aria-disabled'] = true;
switch (action) {
case 'link':
if (content.rel) attributes.rel = content.rel;
if (content.lang) attributes.hreflang = content.lang;
if (content.assess === true) {
attributes[`data-${prefix}-assess-file`] = ''
} else if (typeof(content.assess) === 'string') {
attributes[`data-${prefix}-assess-file`] = content.assess
}
} else {
attributes.disabled = content.disabled ? null : undefined;
break;
}
if (content.lang) attributes.hreflang = content.lang;
if (content.downloadable === true && actionMarkup === 'a') attributes.download = '';
if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable;
if (content.blank === true) attributes = { ...targetBlankData(), ...attributes};
switch (true) {
case content.badgesGroup !== undefined :
Expand All @@ -85,11 +91,9 @@ switch (true) {
<div class="<%= prefix %>-card__content">
<<%= markup %> class="<%= prefix %>-card__title">
<% if (hasLink) { %>
<<%= actionMarkup %> <%- includeAttrs(attributes) %>>
<% } %>
<%- content.title %>
<% if (hasLink) { %>
</<%= actionMarkup %>>
<%- include('../../../../core/template/ejs/action/action', {action: {...content, attributes, kind: action, label: content.title, disabled: content.disabled}}) %>
<% } else { %>
<%- content.title %>
<% } %>
</<%= markup %>>

Expand Down
13 changes: 7 additions & 6 deletions src/component/link/template/ejs/link.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,10 @@ switch (action) {
case 'link':
if (link.rel) linkAttrs.rel = link.rel;
if (link.hreflang) linkAttrs.hreflang = link.hreflang;
if (link.download) {
linkAttrs.download = link.download;
linkClasses.push(prefix + '-link--download');
}
if (link.assess === true) {
linkAttrs[`data-${prefix}-assess-file`] = ''
linkAttrs[`data-${prefix}-assess-file`] = ''
} else if (typeof(link.assess) === 'string') {
linkAttrs[`data-${prefix}-assess-file`] = link.assess
linkAttrs[`data-${prefix}-assess-file`] = link.assess
}
break;
}
Expand All @@ -83,6 +79,11 @@ switch (link.size) {
break;
}
if (link.download) {
linkAttrs.download = link.download;
linkClasses.push(prefix + '-link--download');
}
if (link.icon !== undefined) linkClasses.push(`${prefix}-icon-${link.icon}`);
if (link.iconPlace !== undefined) {
Expand Down
8 changes: 4 additions & 4 deletions src/component/tile/example/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@
title: 'Variantes',
path: 'sample-variations'
},
// {
// title: 'Markup button',
// path: 'sample-button'
// },
{
title: 'Markup button',
path: 'sample-button'
},
{
title: 'Sans lien',
path: 'sample-no-link'
Expand Down
2 changes: 1 addition & 1 deletion src/component/tile/example/sample/sample-disabled.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

<%- sample('Tuile avec lien désactivé (a sans href)', './tile-default', {tile: {pictogram: true, content: {disabled: true} }}, true, './tile-layout', {col: {md:4}}); %>

<%- // sample('Tuile avec bouton désactivé (disabled)', './tile-default', {tile: {pictogram: true, content: {disabled: true, actionMarkup: 'button'} }}, true, './tile-layout', {col: {md:4}}); %>
<%- sample('Tuile avec bouton désactivé (disabled)', './tile-default', {tile: {pictogram: true, content: {disabled: true, actionMarkup: 'button'} }}, true, './tile-layout', {col: {md:4}}); %>
23 changes: 19 additions & 4 deletions src/component/tile/style/_legacy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
@include margin(0 0 2v);
max-width: 100%;

a {
a,
button {
@include icon-legacy(arrow-right-line, sm, after);
}

Expand All @@ -63,8 +64,11 @@
}

&--download {
#{ns(tile__title a)} {
@include icon-legacy(download-line, null, after);
#{ns(tile__title)} {
a,
button {
@include icon-legacy(download-line, null, after);
}
}
}

Expand All @@ -78,12 +82,23 @@
}
}
}

&#{ns(enlarge-button)} {
#{ns(tile)}__title {
button {
@include icon-size-legacy(md, after) {
background-color: transparent;
}
}
}
}
}

#{ns(tile--sm)} {
#{ns(tile)} {
&__title {
a {
a,
button {
@include icon-size-legacy(sm, after);
}
}
Expand Down
Loading

0 comments on commit 9999c00

Please sign in to comment.