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

🐛 fix(link, card, tile): enlarge button [DS-3798] #943

Merged
merged 2 commits into from
Jun 4, 2024
Merged

🐛 fix(link, card, tile): enlarge button [DS-3798] #943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1fe2ed8
fix(link, card, tile): ajoute une classe utilitaire enlarge-button
zellerbaptiste Jun 3, 2024
3b7221f
fix(link, card, tile): ajoute une classe utilitaire enlarge-button
zellerbaptiste Jun 3, 2024
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
8 changes: 4 additions & 4 deletions src/component/card/example/index.ejs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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`);
zellerbaptiste marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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