Skip to content

Commit

Permalink
feat(featured-item): Fixing RTL display, fixing alignment - FRONT-4652 (
Browse files Browse the repository at this point in the history 
#3672)

* feat(featured-item): Fixing RTL display, fixing alignment - FRONT-4652

* feat(featured-item): Fixing alignment for simple in EU - FRONT-4652

* feat(featured-item): Feedback from designers, removing extra spacing in simple variant in EC - FRONT-4652

* feat(featured-item): Fixing regression on highlight variant in EC - FRONT-4652
  • Loading branch information
@planctus
planctus authored Oct 16, 2024
1 parent eb0d6d6 commit 415cc49
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 27 deletions.
129 changes: 119 additions & 10 deletions src/implementations/vanilla/components/featured-item/featured-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,26 +85,35 @@ $featured-item: null !default;
}

.ecl-featured-item__title {
margin: map.get($featured-item, 'title-spacing-desktop');
margin-block: map.get($featured-item, 'title-spacing-vertical-desktop');
margin-inline: map.get($featured-item, 'title-spacing-horizontal-desktop');
}

.ecl-featured-item__media_container {
padding: map.get($featured-item, 'media-padding-desktop');
}

.ecl-featured-item__link {
margin: map.get($featured-item, 'link-spacing-desktop');
margin-block: map.get($featured-item, 'link-spacing-vertical-desktop');
margin-inline: map.get($featured-item, 'link-spacing-horizontal-desktop');
}

.ecl-featured-item__description {
margin: map.get($featured-item, 'description-spacing-desktop');
margin-block: map.get(
$featured-item,
'description-spacing-vertical-desktop'
);
margin-inline: map.get(
$featured-item,
'description-spacing-horizontal-desktop'
);
}

.ecl-featured-item__container--right {
flex-direction: row;

.ecl-featured-item__title {
margin: map.get($featured-item, 'title-spacing-right');
margin: 0;
}

.ecl-featured-item__description {
Expand All @@ -116,6 +125,10 @@ $featured-item: null !default;
}

.ecl-featured-item__media_container {
margin-inline: map.get(
$featured-item,
'media-spacing-horizontal-right-desktop'
);
padding: map.get($featured-item, 'media-padding-right');
}
}
Expand Down Expand Up @@ -173,12 +186,44 @@ $featured-item: null !default;
padding: map.get($featured-item, 'simple', 'padding-desktop');
}

.ecl-featured-item__title,
.ecl-featured-item__description,
.ecl-featured-item__link {
margin-inline: map.get($featured-item, 'simple', 'text-spacing-desktop');
padding-inline: 0;
}

.ecl-featured-item__media_container {
padding: map.get($featured-item, 'simple', 'media-padding-desktop');
}

.ecl-featured-item__container--right .ecl-featured-item__media_container {
padding: map.get($featured-item, 'simple', 'media-padding-right');
.ecl-featured-item__container--right {
.ecl-featured-item__title,
.ecl-featured-item__description,
.ecl-featured-item__link {
margin-inline: map.get(
$featured-item,
'simple',
'text-spacing-right-desktop'
);
}

.ecl-featured-item__media_container {
margin: 0;
padding: map.get($featured-item, 'simple', 'media-padding-right');
}
}

.ecl-featured-item__item:only-child {
.ecl-featured-item__title,
.ecl-featured-item__description,
.ecl-featured-item__link {
margin-inline: map.get(
$featured-item,
'simple',
'text-spacing-only-child'
);
}
}
}
}
Expand Down Expand Up @@ -211,7 +256,6 @@ $featured-item: null !default;

.ecl-featured-item__title {
background-color: map.get($featured-item, 'highlight', 'title-background');
margin: 0;
padding: map.get($featured-item, 'highlight', 'title-spacing');
}

Expand All @@ -228,15 +272,80 @@ $featured-item: null !default;
@include breakpoints.up('s') {
.ecl-featured-item--highlight {
.ecl-featured-item__container {
padding: map.get($featured-item, 'highlight', 'padding-desktop');
padding-block: map.get(
$featured-item,
'highlight',
'padding-vertical-desktop'
);
padding-inline: map.get(
$featured-item,
'highlight',
'padding-horizontal-desktop'
);
}

.ecl-featured-item__title {
// To check in EU
margin-inline: map.get(
$featured-item,
'highlight',
'title-spacing-desktop'
);
}

.ecl-featured-item__description,
.ecl-featured-item__link {
margin-inline-start: map.get(
$featured-item,
'highlight',
'text-spacing-desktop'
);
}

.ecl-featured-item__media_container {
margin-block: map.get(
$featured-item,
'highlight',
'media-spacing-vertical-desktop'
);
margin-inline: map.get(
$featured-item,
'highlight',
'media-spacing-horizontal-desktop'
);
padding: map.get($featured-item, 'highlight', 'media-padding-desktop');
}

.ecl-featured-item__container--right .ecl-featured-item__media_container {
padding: map.get($featured-item, 'highlight', 'media-padding-right');
.ecl-featured-item__container--right {
.ecl-featured-item__media_container {
padding-block: map.get(
$featured-item,
'highlight',
'media-padding-vertical-right'
);
margin-inline: map.get(
$featured-item,
'highlight',
'media-padding-horizontal-right'
);
}

.ecl-featured-item__title {
margin-inline: map.get(
$featured-item,
'highlight',
'title-spacing-right-desktop'
);
}

.ecl-featured-item__description,
.ecl-featured-item__link {
margin-inline: map.get(
$featured-item,
'highlight',
'text-spacing-right-desktop'
);
}
}
}
}
Expand Down
28 changes: 21 additions & 7 deletions src/themes/ec/variables/_featured-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,59 @@ $featured-item: (
media-padding-mobile: 0 0 var(--s-xl),
media-padding-desktop: 0 0 var(--s-xl),
media-padding-right: 0 0 var(--s-xl) 0,
media-spacing-horizontal-right-desktop: var(--s-xl) 0,
title-color: var(--c-d),
title-font: var(--f-l),
title-font-weight: map.get($font-weight, 'regular'),
title-spacing-mobile: 0,
title-spacing-desktop: 0 0 0 var(--s-xl),
title-spacing-right: 0 var(--s-xl) 0 0,
title-spacing-vertical-desktop: 0,
title-spacing-horizontal-desktop: var(--s-xl) 0,
description-color: var(--c-d),
description-font: var(--f-m),
description-spacing-mobile: var(--s-s) 0 0 0,
description-spacing-desktop: var(--s-s) 0 0 var(--s-xl),
description-spacing-right: var(--s-m) var(--s-xl) 0 0,
description-spacing-horizontal-desktop: var(--s-xl) 0,
description-spacing-vertical-desktop: var(--s-s) 0,
description-spacing-right: var(--s-m) 0 0,
link-spacing-mobile: var(--s-m) 0 0,
link-spacing-desktop: var(--s-m) 0 0 var(--s-xl),
link-spacing-right: var(--s-m) var(--s-xl) 0 0,
link-spacing-vertical-desktop: var(--s-m) 0,
link-spacing-horizontal-desktop: var(--s-xl) 0,
link-spacing-right: var(--s-m) 0 0,
simple: (
container-background: map.get($color, 'white'),
media-padding-mobile: var(--s-xl),
media-padding-desktop: var(--s-xl),
media-padding-right: var(--s-xl),
link-spacing: var(--s-m) 0 0 var(--s-xl),
padding-mobile: 0,
padding-desktop: 0,
border-size: 1px,
border-color: var(--c-st),
title-spacing: var(--s-xl) var(--s-xl) var(--s-s),
description-spacing: 0 var(--s-xl),
text-spacing-desktop: 0 var(--s-xl),
text-spacing-only-child: var(--s-xl),
text-spacing-right-desktop: var(--s-xl) 0,
),
highlight: (
container-background: map.get($color, 'white'),
title-background: var(--c-n-60),
item-background: var(--c-n-40),
media-padding-mobile: var(--s-xl),
media-padding-desktop: var(--s-xl),
media-padding-right: var(--s-xl),
media-spacing-vertical-desktop: 0,
media-spacing-horizontal-desktop: 0,
media-padding-horizontal-right: 0,
media-padding-vertical-right: var(--s-xl),
link-spacing: var(--s-m) 0 0 var(--s-xl),
padding-mobile: 0,
padding-desktop: 0,
border-size: 1px,
border-color: var(--c-st),
title-spacing: var(--s-xl),
text-spacing-desktop: var(--s-xl),
text-spacing-right-desktop: var(--s-xl),
title-spacing-desktop: 0,
title-spacing-right-desktop: 0,
description-spacing: var(--s-xl) var(--s-xl) 0 var(--s-xl),
),
);
Expand Down
36 changes: 26 additions & 10 deletions src/themes/eu/variables/_featured-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,39 @@ $featured-item: (
border-radius: map.get($border-radius, 'm'),
shadow: none,
media-padding-mobile: 0 0 var(--s-m) 0,
media-padding-desktop: 0 var(--s-m) var(--s-m) 0,
media-padding-right: 0 0 var(--s-m) var(--s-m),
media-padding-desktop: 0 0 var(--s-m),
media-padding-right: 0 0 var(--s-m),
title-color: var(--c-d-140),
title-font: var(--f-p-l),
title-font-weight: map.get($font-weight, 'bold'),
title-spacing-mobile: 0,
title-spacing-desktop: 0,
title-spacing-right: 0 var(--s-xl) 0 0,
title-spacing-vertical-desktop: 0,
title-spacing-horizontal-desktop: var(--s-m) 0,
media-spacing-vertical-right-desktop: 0,
media-spacing-horizontal-right-desktop: var(--s-m) 0,
description-color: var(--c-d-80),
description-font: var(--f-p-m),
description-spacing-mobile: var(--s-s) 0 0 0,
description-spacing-desktop: var(--s-s) 0 0 0,
description-spacing-vertical-desktop: var(--s-s) 0,
description-spacing-horizontal-desktop: var(--s-m) 0,
description-spacing-right: var(--s-s) 0 0 0,
link-spacing-mobile: var(--s-m) 0,
link-spacing-desktop: var(--s-m) 0,
link-spacing-vertical-desktop: var(--s-m) 0,
link-spacing-horizontal-desktop: var(--s-m) 0,
link-spacing-right: var(--s-m) 0,
simple: (
container-background: map.get($color, 'white'),
media-padding-mobile: 0 0 var(--s-m),
media-padding-desktop: 0 var(--s-m) var(--s-m) 0,
media-padding-desktop: 0,
media-padding-right: 0,
padding-mobile: 0,
padding-desktop: 0,
border-size: 0,
border-color: var(--c-p),
link-spacing: var(--s-m) 0,
text-spacing-desktop: var(--s-m) 0,
text-spacing-only-child: 0,
text-spacing-right-desktop: 0 var(--s-m),
title-spacing: 0,
description-spacing: var(--s-s) 0 0 0,
),
Expand All @@ -41,13 +49,21 @@ $featured-item: (
item-background: transparent,
link-spacing: var(--s-m) 0 0 0,
media-padding-mobile: 0 0 var(--s-m),
media-padding-desktop: 0 var(--s-m) 0 0,
media-padding-right: 0 0 0 var(--s-m),
media-padding-desktop: 0,
media-spacing-vertical-desktop: 0,
media-spacing-horizontal-desktop: 0 var(--s-xs),
media-padding-horizontal-right: calc(-1 * var(--s-xs)) 0,
media-padding-vertical-right: 0,
padding-mobile: var(--s-m) var(--s-m) var(--s-m) var(--s-xs),
padding-desktop: var(--s-m) var(--s-m) var(--s-m) var(--s-l),
padding-horizontal-desktop: var(--s-l) var(--s-m),
padding-vertical-desktop: var(--s-m),
border-size: 8px,
border-color: var(--c-p),
text-spacing-desktop: var(--s-xs),
text-spacing-right-desktop: 0 var(--s-l),
title-spacing: 0,
title-spacing-desktop: var(--s-xs) 0,
title-spacing-right-desktop: 0 var(--s-xs),
description-spacing: var(--s-s) 0 0 0,
),
);
Expand Down

1 comment on commit 415cc49

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.