Skip to content

Commit

Permalink
feat(rtl): right-to-left batch 2 - FRONT-3566 (#2359)
Browse files Browse the repository at this point in the history 
* update components

* update test

* update size
  • Loading branch information
@emeryro
emeryro committed Mar 18, 2022
1 parent 8ca874b commit 1019c6b
Show file tree
Hide file tree
Showing 14 changed files with 139 additions and 72 deletions.
24 changes: 18 additions & 6 deletions src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,8 +266,12 @@ exports[`Carousel Default renders correctly 1`] = `
>
1
</span>
 of 3
of
<span
class="ecl-carousel__max"
>
3
</span>
</div>
<div
class="ecl-carousel__navigation"
Expand Down Expand Up @@ -574,8 +578,12 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
>
1
</span>
 of 3
of
<span
class="ecl-carousel__max"
>
3
</span>
</div>
<div
class="ecl-carousel__navigation"
Expand Down Expand Up @@ -880,8 +888,12 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
>
1
</span>
 of 3
of
<span
class="ecl-carousel__max"
>
3
</span>
</div>
<div
class="ecl-carousel__navigation"
Expand Down
4 changes: 3 additions & 1 deletion src/implementations/twig/components/carousel/carousel.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,9 @@
<span class="ecl-u-sr-only">{{ _sr_autoplay }}</span>
</button>
<div class="ecl-carousel__pagination">
<span class="ecl-carousel__current">1</span>&nbsp;{{ _counter_label }} {{_items|length}}
<span class="ecl-carousel__current">1</span>{{- ' ' -}}
{{- _counter_label }}{{- ' ' -}}
<span class="ecl-carousel__max">{{_items|length}}</span>
</div>
<div class="ecl-carousel__navigation">
{% for item in _items %}
Expand Down
25 changes: 15 additions & 10 deletions src/implementations/vanilla/components/carousel/_carousel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,17 +95,21 @@ $_outline-width: null !default;
left: 0;

&:focus {
margin-left: $_outline-width;
padding-left: calc(#{map.get(theme.$spacing, 's')} - #{$_outline-width});
margin-inline-start: $_outline-width;
padding-inline-start: calc(
#{map.get(theme.$spacing, 's')} - #{$_outline-width}
);
}
}

.ecl-carousel__next {
right: 0;

&:focus {
margin-right: $_outline-width;
padding-right: calc(#{map.get(theme.$spacing, 's')} - #{$_outline-width});
margin-inline-end: $_outline-width;
padding-inline-end: calc(
#{map.get(theme.$spacing, 's')} - #{$_outline-width}
);
}
}

Expand All @@ -116,7 +120,7 @@ $_outline-width: null !default;
border-radius: 50%;
cursor: pointer;
display: flex;
margin-right: map.get(theme.$spacing, 'l');
margin-inline-end: map.get(theme.$spacing, 'l');
padding: 0;

&:focus {
Expand All @@ -130,8 +134,9 @@ $_outline-width: null !default;
display: flex;
font: map.get(theme.$font, 'm');
font-weight: map.get(theme.$font-weight, 'bold');
margin-right: map.get(theme.$spacing, 'l');
margin-inline-end: map.get(theme.$spacing, 'l');
padding-top: 2px;
white-space: pre-wrap;
}

.ecl-carousel__navigation {
Expand All @@ -145,7 +150,7 @@ $_outline-width: null !default;
border-radius: 50%;
cursor: pointer;
height: 1rem;
margin-right: map.get(theme.$spacing, 'xs');
margin-inline-end: map.get(theme.$spacing, 'xs');
width: 1rem;

&:focus {
Expand All @@ -159,7 +164,7 @@ $_outline-width: null !default;

.ecl-carousel-container--padded .ecl-page-banner {
.ecl-container {
margin-left: 100px;
margin-inline-start: 100px;
transition: all 0.2s;
}
}
Expand All @@ -169,7 +174,7 @@ $_outline-width: null !default;
*/
.ecl-carousel--full-width {
left: 50%;
margin-left: -50vw;
margin-inline-start: -50vw;
width: 100vw;
}

Expand All @@ -179,7 +184,7 @@ $_outline-width: null !default;
.ecl-page-banner:not(.ecl-page-banner--full-width)
.ecl-container {
padding-left: map.get(theme.$spacing, 'm');
padding-right: map.get(theme.$spacing, 'm');
padding-inline-end: map.get(theme.$spacing, 'm');
}

/* stylelint-disable-next-line order/order */
Expand Down
21 changes: 11 additions & 10 deletions src/implementations/vanilla/components/featured-item/_featured-item-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,20 +70,21 @@ $_extended-padding-bottom: null !default;
.ecl-featured-item--extended {
.ecl-featured-item__container {
background-color: $_extended-background;
border-left: $_extended-mobile-border-size solid $_extended-border-color;
border-inline-start: $_extended-mobile-border-size solid
$_extended-border-color;
border-radius: $_extended-border-radius;
overflow: hidden;
padding-bottom: map.get(theme.$spacing, 'm');
padding-left: map.get(theme.$spacing, 'xs');
padding-right: map.get(theme.$spacing, 'm');
padding-inline-start: map.get(theme.$spacing, 'xs');
padding-inline-end: map.get(theme.$spacing, 'm');
padding-top: map.get(theme.$spacing, 'm');
}

.ecl-featured-item__heading {
padding-left: calc(
padding-inline-start: calc(
#{map.get(theme.$spacing, 'xs')} + #{$_extended-mobile-border-size}
);
padding-right: map.get(theme.$spacing, 'm');
padding-inline-end: map.get(theme.$spacing, 'm');
}
}

Expand All @@ -106,7 +107,7 @@ $_extended-padding-bottom: null !default;

&:first-child {
padding-bottom: 0;
padding-right: map.get(theme.$spacing, 'm');
padding-inline-end: map.get(theme.$spacing, 'm');
}
}

Expand All @@ -120,16 +121,16 @@ $_extended-padding-bottom: null !default;
.ecl-featured-item--extended {
.ecl-featured-item__container {
padding-bottom: $_extended-padding-bottom;
padding-left: $_extended-padding-left;
padding-right: map.get(theme.$spacing, 'm');
padding-inline-start: $_extended-padding-left;
padding-inline-end: map.get(theme.$spacing, 'm');
padding-top: $_extended-padding-top;
}

.ecl-featured-item__heading {
padding-left: calc(
padding-inline-start: calc(
#{$_extended-padding-left} + #{$_extended-border-size}
);
padding-right: map.get(theme.$spacing, 'm');
padding-inline-end: map.get(theme.$spacing, 'm');
}
}
}
21 changes: 11 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 @@ -71,20 +71,21 @@ $_extended-padding-bottom: null !default;
.ecl-featured-item--extended {
.ecl-featured-item__container {
background-color: $_extended-background;
border-left: $_extended-mobile-border-size solid $_extended-border-color;
border-inline-start: $_extended-mobile-border-size solid
$_extended-border-color;
border-radius: $_extended-border-radius;
overflow: hidden;
padding-bottom: map.get(theme.$spacing, 'm');
padding-left: map.get(theme.$spacing, 'xs');
padding-right: map.get(theme.$spacing, 'm');
padding-inline-start: map.get(theme.$spacing, 'xs');
padding-inline-end: map.get(theme.$spacing, 'm');
padding-top: map.get(theme.$spacing, 'm');
}

.ecl-featured-item__heading {
padding-left: calc(
padding-inline-start: calc(
#{map.get(theme.$spacing, 'xs')} + #{$_extended-mobile-border-size}
);
padding-right: map.get(theme.$spacing, 'm');
padding-inline-end: map.get(theme.$spacing, 'm');
}
}

Expand All @@ -107,7 +108,7 @@ $_extended-padding-bottom: null !default;

&:first-child {
padding-bottom: 0;
padding-right: map.get(theme.$spacing, 'm');
padding-inline-end: map.get(theme.$spacing, 'm');
}
}

Expand All @@ -121,16 +122,16 @@ $_extended-padding-bottom: null !default;
.ecl-featured-item--extended {
.ecl-featured-item__container {
padding-bottom: $_extended-padding-bottom;
padding-left: $_extended-padding-left;
padding-right: map.get(theme.$spacing, 'm');
padding-inline-start: $_extended-padding-left;
padding-inline-end: map.get(theme.$spacing, 'm');
padding-top: $_extended-padding-top;
}

.ecl-featured-item__heading {
padding-left: calc(
padding-inline-start: calc(
#{$_extended-padding-left} + #{$_extended-border-size}
);
padding-right: map.get(theme.$spacing, 'm');
padding-inline-end: map.get(theme.$spacing, 'm');
}
}
}
21 changes: 11 additions & 10 deletions src/implementations/vanilla/components/gallery/_gallery.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $_item-outline-offset: null !default;
list-style: none;
margin-bottom: 0;
margin-top: -#{map.get(theme.$spacing, 'xs')};
padding-left: 0;
padding-inline-start: 0;
}

.ecl-gallery__item {
Expand Down Expand Up @@ -111,7 +111,7 @@ $_item-outline-offset: null !default;

.ecl-gallery__info {
color: $_gallery-info-color;
float: right;
float: end;
font: $_gallery-info-font;
padding: map.get(theme.$spacing, 'm') map.get(theme.$spacing, 's');
}
Expand All @@ -131,13 +131,13 @@ $_item-outline-offset: null !default;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -#{map.get(theme.$spacing, 'xs')};
margin-inline-start: -#{map.get(theme.$spacing, 'xs')};
}

.ecl-gallery__item {
flex-grow: 1;
height: $_image-height;
margin-left: map.get(theme.$spacing, 'xs');
margin-inline-start: map.get(theme.$spacing, 'xs');
min-width: $_image-height;
position: relative;
}
Expand Down Expand Up @@ -304,7 +304,6 @@ $_overlay-links-hover-color: null !default;
flex-shrink: 0;
margin: $_arrow-margins;
position: absolute;
right: 0;

&:hover,
&:focus {
Expand All @@ -320,16 +319,18 @@ $_overlay-links-hover-color: null !default;
}

.ecl-gallery__detail-counter {
display: inline-flex;
font: map.get(theme.$font, 'm');
font-weight: map.get(theme.$font-weight, 'bold');
white-space: pre-wrap;
}

.ecl-gallery__detail-actions {
margin-top: $_actions-margin;
}

.ecl-gallery__share {
margin-left: map.get(theme.$spacing, 's');
margin-inline-start: map.get(theme.$spacing, 's');
}

.ecl-gallery__download,
Expand Down Expand Up @@ -385,8 +386,8 @@ $_overlay-links-hover-color: null !default;
.ecl-gallery__slider-previous {
align-self: initial;
margin-bottom: 0;
margin-left: $_arrow-margin;
margin-right: map.get(theme.$spacing, '2xs');
margin-inline-start: $_arrow-margin;
margin-inline-end: map.get(theme.$spacing, '2xs');
margin-top: 0;
order: -1;
}
Expand All @@ -395,8 +396,8 @@ $_overlay-links-hover-color: null !default;
align-self: initial;
bottom: auto;
margin-bottom: 0;
margin-left: map.get(theme.$spacing, '2xs');
margin-right: $_arrow-margin;
margin-inline-start: map.get(theme.$spacing, '2xs');
margin-inline-end: $_arrow-margin;
margin-top: 0;
position: relative;
right: auto;
Expand Down
14 changes: 7 additions & 7 deletions src/implementations/vanilla/components/hero-banner/_hero-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ $_font-weight: null !default;
flex-direction: column;
justify-content: center;
margin-bottom: 0;
margin-right: 0;
margin-inline-end: 0;
margin-top: 0;
overflow: hidden;
position: relative;
Expand All @@ -40,8 +40,8 @@ $_font-weight: null !default;
.ecl-container
.ecl-hero-banner:not(.ecl-hero-banner--full-width)
.ecl-container {
padding-left: map.get($_padding-horizontal, 's');
padding-right: map.get($_padding-horizontal, 's');
padding-inline-start: map.get($_padding-horizontal, 's');
padding-inline-end: map.get($_padding-horizontal, 's');
}

.ecl-hero-banner__container {
Expand Down Expand Up @@ -120,8 +120,8 @@ $_font-weight: null !default;
.ecl-container
.ecl-hero-banner:not(.ecl-hero-banner--full-width)
.ecl-container {
padding-left: map.get($_padding-horizontal, 'xl');
padding-right: map.get($_padding-horizontal, 'xl');
padding-inline-start: map.get($_padding-horizontal, 'xl');
padding-inline-end: map.get($_padding-horizontal, 'xl');
}

.ecl-hero-banner__title {
Expand All @@ -136,7 +136,7 @@ $_font-weight: null !default;
.ecl-hero-banner--full-width {
border-radius: 0;
left: 50%;
margin-left: -50vw;
margin-inline-start: -50vw;
width: 100vw;
}

Expand Down Expand Up @@ -241,7 +241,7 @@ $_font-weight: null !default;
.ecl-hero-banner__content {
background: map.get($_background, 'image-box');
border-bottom: map.get($_border-width, 'bottom') solid $_border-color;
border-left: map.get($_border-width, 'left') solid $_border-color;
border-inline-start: map.get($_border-width, 'left') solid $_border-color;
border-radius: map.get($_border-radius, 'content');
padding: $_padding-vertical map.get($_padding-horizontal, 's')
calc(#{$_padding-vertical} - #{map.get($_border-width, 'bottom')})
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/media-container/_media-container.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,6 @@ $_scrollbar-width: 16px; // average scrollbar width; used in full screen calculu
// We have to substract the scrollbar width, as it is not handled well by vw unit)
.ecl-media-container--full-width {
left: 50%;
margin-left: calc(-50vw + (#{$_scrollbar-width} / 2));
margin-inline-start: calc(-50vw + (#{$_scrollbar-width} / 2));
width: calc(100vw - #{$_scrollbar-width});
}
Loading

1 comment on commit 1019c6b

@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://v3--europa-component-library.netlify.app

Please sign in to comment.