Merge pull request #2350 from exadel-inc/tech/esl-carousel-area-rename

refactor(esl-carousel): rename `data-slides-area` container to mo obvious `esl-carousel-slides`

Author: ala-n

site/src/esl-carousel-demo/test-carousel.less

@@ -39,7 +39,7 @@
   }
 
   &.main-carousel {
-    div[data-slides-area] {
+    div[esl-carousel-slides] {
       min-height: 500px;
       gap: 0;
     }

site/src/landing/overview/overview.less

@@ -9,7 +9,7 @@
     position: relative;
     padding: 20px 40px;
 
-    &-scene[data-slides-area] {
+    &-scene[esl-carousel-slides] {
       width: 100%;
     }
 

site/views/_includes/landing/overview.njk

@@ -2,7 +2,7 @@
   <esl-carousel class="overview-carousel">
     <button class="overview-btn-prev-wrapper" data-slide-target="prev"></button>
 
-    <div data-slides-area class="overview-carousel-scene">
+    <div esl-carousel-slides class="overview-carousel-scene">
       <esl-carousel-slide active class="overview-carousel-item">
         <div class="overview-item">
           <div class="overview-illustration">

site/views/examples/carousel.marquee.njk

@@ -13,7 +13,7 @@ icon: examples/carousel.svg
                   type="default"
                   esl-carousel-touch
                   esl-carousel-relate-to="#nav-carousel">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for item in slides %}
         <esl-carousel-slide>
         <div class="img-container">
@@ -35,7 +35,7 @@ icon: examples/carousel.svg
                   esl-carousel-touch
                   type="default"
                   count="5">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for item in slides %}
         <esl-carousel-slide>
           <div class="img-container img-container-4-3"

site/views/examples/carousel.njk

@@ -19,7 +19,7 @@ icon: examples/carousel.svg
                   media="@XS|@SM|@MD|@LG|@XL"
                   loop="true"
                   count="1|2|3|4|5">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for item in cards %}
           <esl-carousel-slide {{ 'active' if loop.first }}>
             <div class="card">
@@ -59,7 +59,7 @@ icon: examples/carousel.svg
                   esl-carousel-touch
                   count="2"
                   loop="true">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for i in range(0, 6) -%}
           <esl-carousel-slide style="max-width: 50%">
             <div class="card">
@@ -91,7 +91,7 @@ icon: examples/carousel.svg
                    media="@XS|@SM|@MD|@LG|@XL"
                    count="2|3|4|5|6"
                    loop="true">
-        <div data-slides-area>
+        <div esl-carousel-slides>
         {% for item in items %}
            <esl-carousel-slide {{ 'active' if loop.first }}>
               <div class="card" style="justify-content: center; background: {{item.background}}">
@@ -121,7 +121,7 @@ icon: examples/carousel.svg
     <esl-carousel esl-carousel-touch="none | @XS => drag"
                   media="@XS|@SM|@MD|@LG|@XL"
                   count="2|3|4|5|6">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for item in items %}
           <esl-carousel-slide {{ 'active' if loop.first }}>
             <div class="card" style="justify-content: center; background: {{item.background}}">
@@ -149,7 +149,7 @@ icon: examples/carousel.svg
      </button>
 
      <esl-carousel esl-carousel-touch="@touch => swipe" loop="true">
-        <div data-slides-area>
+        <div esl-carousel-slides>
           {% for i in range(0, 4) -%}
            <esl-carousel-slide>
               <div class="card">

src/modules/esl-carousel/core/esl-carousel.less

@@ -12,7 +12,7 @@ esl-carousel {
   /* stylelint-disable-next-line */
   overflow: clip;
 
-  [data-slides-area] {
+  [esl-carousel-slides] {
     position: relative;
     width: 100%;
     display: flex;
@@ -21,19 +21,19 @@ esl-carousel {
     transform: translate3d(0px, 0px, 0px);
   }
 
-  &.esl-carousel-vertical [data-slides-area] {
+  &.esl-carousel-vertical [esl-carousel-slides] {
     flex-direction: column;
   }
-  &.esl-carousel-horizontal [data-slides-area] {
+  &.esl-carousel-horizontal [esl-carousel-slides] {
     flex-direction: row;
   }
 
   &[dragging] {
     cursor: grabbing;
   }
 
-  &[dragging] [data-slides-area],
-  &[animating] [data-slides-area] {
+  &[dragging] [esl-carousel-slides],
+  &[animating] [esl-carousel-slides] {
     user-select: none;
     touch-action: pan-y;
     pointer-events: none;

src/modules/esl-carousel/core/esl-carousel.ts

@@ -211,10 +211,10 @@ export class ESLCarousel extends ESLBaseElement {
   /** @returns carousel slides area */
   @memoize()
   public get $slidesArea(): HTMLElement {
-    const $provided = this.querySelector('[data-slides-area]');
+    const $provided = this.querySelector('[esl-carousel-slides]');
     if ($provided) return $provided as HTMLElement;
     const $container = document.createElement('div');
-    $container.setAttribute('data-slides-area', '');
+    $container.setAttribute('esl-carousel-slides', '');
     this.appendChild($container);
     return $container ;
   }

src/modules/esl-carousel/plugin/dots/README.md

@@ -9,7 +9,7 @@ Example:
 ```html
     <esl-carousel-slide esl-carousel-container>
       <esl-carousel count="1">
-        <div data-slides-area>
+        <div esl-carousel-slides>
           <esl-carousel-slide>Slide 1</esl-carousel-slide>
           <esl-carousel-slide>Slide 2</esl-carousel-slide>
           <esl-carousel-slide>Slide 3</esl-carousel-slide>

src/modules/esl-carousel/renderers/esl-carousel.default.renderer.less

@@ -1,13 +1,13 @@
 .esl-carousel-default-renderer {
-  [data-slides-area] {
+  [esl-carousel-slides] {
     display: flex;
     flex-wrap: nowrap;
     transition: none;
     max-width: 100%;
     max-height: 100%;
   }
 
-  &[animating] [data-slides-area] {
+  &[animating] [esl-carousel-slides] {
     transition: transform 0.25s linear;
   }