From 44594c1864d39f15e642ba84fb44c8f0651ca0d5 Mon Sep 17 00:00:00 2001
From: Yuliya Adamska <yadamska@exadel.com>
Date: Thu, 18 Jan 2024 15:30:45 +0300
Subject: [PATCH 1/7] chore(site): ui-playground integration for image
 component

---
 site/views/examples/image.njk | 279 ++++++++--------------------------
 1 file changed, 60 insertions(+), 219 deletions(-)

diff --git a/site/views/examples/image.njk b/site/views/examples/image.njk
index cbe20edc7a..83b291b3b1 100644
--- a/site/views/examples/image.njk
+++ b/site/views/examples/image.njk
@@ -3,7 +3,7 @@ layout: content
 title: Image
 seoTitle: Lazy-loaded configurable images examples based on ESL web components
 name: Image
-tags: examples
+tags: [examples, playground]
 icon: examples/image.svg
 aside:
   components:
@@ -15,235 +15,76 @@ aside:
 
 <section class="row">
   <div class="col-12">
-    <div class="row mb-4">
-      <div class="col-xs-12 col-sm-6 d-flex align-items-center">
-        <div>
-          <h2>Mode: save-ratio</h2>
-          <p>ESL Image uses the entire available width and occupies the height according to the image aspect ratio.</p>
-          <p>No inner image, css background is used to render the image.</p>
-        </div>
-      </div>
-      <div class="col-xs-12 col-sm-6">
-        <esl-image mode="save-ratio" lazy
-                   data-alt="Alt Text Test"
-                   data-src="nature/forest+clouds.jpg"
-                   data-src-base="{{ imageSrcBase }}"></esl-image>
-      </div>
-    </div>
-    <hr/>
-    <div class="row mb-4">
-      <div class="col-xs-12 col-sm-6 d-flex align-items-center">
-        <div style="overflow: auto;">
-          <h2>Mode: cover</h2>
-          <p>No inner image, image is rendered by background image.</p>
-          <p>ESL Image has no own size. Can be used with img-container classes</p>
-          <p><i>Example:</i></p>
-          {% code 'html' %}
-            <div class="img-container img-container-4-3">
-              <esl-image ...></esl-image>
-            </div>
-          {% endcode %}
-        </div>
-      </div>
-      <div class="col-xs-12 col-sm-6 m-auto">
-        <div class="img-container img-container-4-3">
-          <esl-image mode="cover" lazy
-                     data-alt="Alt Text"
-                     data-src="nature/forest+clouds.jpg"
-                     data-src-base="{{ imageSrcBase }}"></esl-image>
-        </div>
-      </div>
-    </div>
-    <div class="row mb-4" id="sim-valign-test">
-      <div class="col-xs-12 col-sm-6 d-flex align-items-center">
-        <div>
-          <h2>Mode: cover (additional classes: vertical alignment)</h2>
-          <p>As background-image is used to render image in cover mode we can control image cropping options
-            through the css.</p>
-          <p>The following options are available to control image vertical position:</p>
-          <ul class="unstyled-list">
-            <li><input name="v-pos-test" type="radio" class="v-pos-toggle" value="bg-v-top"/> .bg-v-top</li>
-            <li>
-              <input name="v-pos-test" type="radio" class="v-pos-toggle" value="bg-v-center" checked/> .bg-v-center <b>(default)</b>
-            </li>
-            <li><input name="v-pos-test" type="radio" class="v-pos-toggle" value="bg-v-bottom"/> .bg-v-bottom</li>
-          </ul>
-          <p><b>Container: </b><span class="value">ratio: 2 x 1; gray border</span></p>
-        </div>
-      </div>
-      <div class="col-xs-12 col-sm-6 d-flex">
-        <div class="img-container m-auto" style="width: 100%; padding-top:50%; border: 1px solid gray;">
-          <esl-image mode="cover" lazy
-                     data-alt="Alt Text"
+    <uip-root>
+      <script type="text/html" uip-snippet label="Simple image">
+        <div class="col-xs-12 col-sm-6">
+          <esl-image class="simple-image"
+                     mode="save-ratio" lazy
+                     data-alt="Alt Text Test"
                      data-src="nature/forest+clouds.jpg"
                      data-src-base="{{ imageSrcBase }}"></esl-image>
         </div>
-      </div>
-      <script>
-        (function () {
-          var area = document.querySelector('#sim-valign-test');
-          var cbx = area.querySelectorAll('.v-pos-toggle');
-          var sim = area.querySelector('esl-image');
-          Array.prototype.forEach.call(cbx, function (cb) {
-            cb.addEventListener('click', function () {
-              var cl = sim.classList;
-              cl.remove('bg-v-top');
-              cl.remove('bg-v-center');
-              cl.remove('bg-v-bottom');
-              cl.add(cb.value);
-            });
-          });
-        })();
       </script>
-    </div>
-    <div class="row mb-4" id="sim-halign-test">
-      <div class="col-xs-12 col-sm-6 d-flex align-items-center">
-        <div>
-          <h2>Mode: cover (additional classes: horizontal alignment)</h2>
-          <p>The following options available to control image horizontal position:</p>
-          <ul class="unstyled-list">
-            <li><input name="h-pos-test" type="radio" class="h-pos-toggle" value="bg-h-left"/> .bg-h-left</li>
-            <li>
-              <input name="h-pos-test" type="radio" class="h-pos-toggle" value="bg-h-center" checked/>
-              .bg-h-center <b>(default)</b>
-            </li>
-            <li><input name="h-pos-test" type="radio" class="h-pos-toggle" value="bg-h-right"/> .bg-h-right</li>
-          </ul>
-          <p><b>Container: </b><span class="value">ratio: 2 x 3; gray border</span></p>
+      <script type="text/html" uip-snippet label="Image cover mode">
+        <div class="col-xs-12 col-sm-6">
+          <div class="img-container m-auto" style="width: 350px; padding-top: 70%; border: 1px solid #ccc;">
+            <esl-image class="cover-mode-image bg-v-center bg-h-center"
+                       mode="cover" lazy
+                       data-alt="Alt Text"
+                       data-src="nature/forest+clouds.jpg"
+                       data-src-base="{{ imageSrcBase }}"></esl-image>
+          </div>
         </div>
-      </div>
-      <div class="col-xs-12 col-sm-6 d-flex">
-        <div class="img-container m-auto" style="width: 200px; height: 300px; border: 1px solid gray;">
-          <esl-image mode="cover" lazy
-                     data-alt="Alt Text"
-                     data-src="nature/forest+clouds.jpg"
-                     data-src-base="{{ imageSrcBase }}"></esl-image>
-        </div>
-      </div>
-      <script>
-        (function () {
-          var area = document.querySelector('#sim-halign-test');
-          var cbx = area.querySelectorAll('.h-pos-toggle');
-          var sim = area.querySelector('esl-image');
-          Array.prototype.forEach.call(cbx, function (cb) {
-            cb.addEventListener('click', function () {
-              var cl = sim.classList;
-              cl.remove('bg-h-left');
-              cl.remove('bg-h-center');
-              cl.remove('bg-h-right');
-              cl.add(cb.value);
-            });
-          });
-        })();
       </script>
-    </div>
-    <div class="row mb-4">
-      <div class="col-xs-12 col-sm-6 d-flex align-items-center">
-        <div>
-          <h2>Mode: cover (additional classes: inscribe)</h2>
-          <p><em>bg-inscribe</em> can be used to declare inscribe image behaviour</p>
-          <p><b>Container: </b><span class="value">size: 300 x 150px; gray border</span></p>
-        </div>
-      </div>
-      <div class="col-xs-12 col-sm-6 d-flex">
-        <div class="img-container m-auto" style="width: 300px; height: 150px; border: 1px solid gray;">
-          <esl-image mode="cover" lazy
-                     class="bg-inscribe"
-                     data-alt="Alt Text"
-                     data-src="nature/volcano-md.jpg | @2x => nature/volcano.jpg"
-                     data-src-base="{{ imageSrcBase }}"></esl-image>
-        </div>
-      </div>
-    </div>
-    <hr/>
-
-    <div class="row mb-4">
-      <div class="col-xs-12 col-sm-6 d-flex align-items-center">
-        <div>
-          <h2>Mode: fit</h2>
-          <p>ESL Image uses inner <em>img</em> to render picture and is used as a wrapper that controls
-            image source and state.</p>
-        </div>
-      </div>
-      <div class="col-xs-12 col-sm-6">
-        <div class="img-container img-container-16-9">
-          <esl-image mode="fit" lazy
-                     data-alt="Alt Text Test"
-                     data-src="nature/volcano-md.jpg | @2x => nature/volcano.jpg"
-                     data-src-base="{{ imageSrcBase }}"></esl-image>
+      <script type="text/html" uip-snippet label="SVG Inline loading">
+        <div class="col-xs-12 col-sm-6">
+          <div class="img-container m-auto" style="width: 250px; height: 325px;">
+            <esl-image lazy
+                       mode="inner-svg"
+                       data-alt="Svg Text Test"
+                       data-src="{{ '/assets/svg/cat.svg' | url }}"></esl-image>
+          </div>
         </div>
-      </div>
-    </div>
-    <hr/>
-
-    <div class="row mb-4">
-      <div class="col-xs-12 col-sm-6 d-flex align-items-center">
-        <div>
-          <h2>Mode: origin</h2>
-          <p>Origin mode behaves similarly to the fit mode but sets esl-image size according to inner image
-            original size.</p>
-        </div>
-      </div>
-      <div class="col-xs-12 col-sm-6 d-flex">
-        <esl-image mode="origin"
-                   class="m-auto"
-                   data-alt="Alt Text Test"
-                   data-src="nature/volcano-xs.jpg"
-                   data-src-base="{{ imageSrcBase }}"></esl-image>
-      </div>
-    </div>
-  </div>
-</section>
-<hr/>
-
-<section class="row">
-  <div class="col-12">
-    <div class="row mb-4">
-      <div class="col-xs-12 col-sm-6 d-flex align-items-center">
-        <div>
-          <h2>SVG Inline loading</h2>
-          <h3>Mode: inner-svg, lazy mode</h3>
-          <p>ESL Image inner-svg mode that loads svg content inline.</p>
-          <p class="alert alert-info">NOTE: requesting svg endpoint should accept CORS policy restrictions</p>
-        </div>
-      </div>
-      <div class="col-xs-12 col-sm-6">
-        <div class="img-container m-auto" style="width: 250px; height: 325px;">
-          <esl-image lazy
-                    mode="inner-svg"
-                    data-alt="Svg Text Test"
-                    data-src="{{ '/assets/svg/cat.svg' | url }}"></esl-image>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<hr/>
-
-<section class="row mb-0">
-  <div class="col-12">
-    <div class="row mb-4">
-      <div class="col-xs-12 col-sm-6 d-flex align-items-center">
-        <div>
-          <h2>ESL Query Rules</h2>
-          <p>Change the image depending on the screen resolution</p>
-        </div>
-      </div>
-      <div class="col-xs-12 col-sm-6">
-        <div class="img-container img-container-16-9">
-          <esl-image lazy
-                    mode="cover"
-                    onload="console.log('SImage Load Track', event)"
-                    onready="console.log('SImage Ready Track', event)"
-                    data-alt="Alt Text Test"
-                    data-src="@XS => abstract/colors.jpg |
+      </script>
+      <script type="text/html" uip-snippet label="ESL Query Rules">
+        <div class="col-xs-12 col-sm-6">
+          <div class="img-container img-container-16-9">
+            <esl-image lazy
+                       mode="cover"
+                       onload="console.log('SImage Load Track', event)"
+                       onready="console.log('SImage Ready Track', event)"
+                       data-alt="Alt Text Test"
+                       data-src="@XS => abstract/colors.jpg |
                                       @SM => abstract/drops.jpg |
                                       @MD => abstract/unsplash.jpg |
                                       @LG => abstract/colors.jpg |
                                       @XL => abstract/drops.jpg"
-                    data-src-base="{{ imageSrcBase }}"></esl-image>
+                       data-src-base="{{ imageSrcBase }}"></esl-image>
+          </div>
         </div>
-      </div>
-    </div>
+      </script>
+
+      <uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
+      <uip-preview></uip-preview>
+      <uip-settings label="Settings" resizable vertical="@+sm">
+        <uip-select-setting target=".simple-image" label="Image mode:" attribute="mode" mode="append">
+          <option value="save-ratio">save-ratio</option>
+          <option value="fit">fit</option>
+          <option value="origin">origin</option>
+        </uip-select-setting>
+        <uip-select-setting target=".cover-mode-image" label="Image vertical alignment:" attribute="class" mode="append">
+          <option value="bg-v-top">bg-v-top</option>
+          <option value="bg-v-center">bg-v-center</option>
+          <option value="bg-v-bottom">bg-v-bottom</option>
+        </uip-select-setting>
+        <uip-select-setting target=".cover-mode-image" label="Image horizontal alignment:" attribute="class" mode="append">
+          <option value="bg-h-left">bg-h-left</option>
+          <option value="bg-h-center">bg-h-center</option>
+          <option value="bg-h-right">bg-h-right</option>
+        </uip-select-setting>
+        <uip-bool-setting label="Inscribe" target=".cover-mode-image" mode="append" attribute="class" value="bg-inscribe"></uip-bool-setting>
+      </uip-settings>
+      <uip-editor label="Source code" collapsible copy></uip-editor>
+    </uip-root>
   </div>
 </section>

From 0a6fd575522c0dd4aa010480da99ff4c90f6976a Mon Sep 17 00:00:00 2001
From: Yuliya Adamska <yadamska@exadel.com>
Date: Fri, 26 Jan 2024 16:04:15 +0300
Subject: [PATCH 2/7] chore(site): add image ratio select setting and split
 examples

---
 site/src/image/image.less     |   8 +++
 site/src/localdev.less        |   2 +
 site/views/examples/image.njk | 131 +++++++++++++++++++++++++---------
 3 files changed, 108 insertions(+), 33 deletions(-)
 create mode 100644 site/src/image/image.less

diff --git a/site/src/image/image.less b/site/src/image/image.less
new file mode 100644
index 0000000000..5890d3a83f
--- /dev/null
+++ b/site/src/image/image.less
@@ -0,0 +1,8 @@
+.img-container.img-container-2-1 {
+  padding-top: 50%;
+}
+
+.img-container.img-container-2-3 {
+  padding-top: 100%;
+  width: 66.66%;
+}
diff --git a/site/src/localdev.less b/site/src/localdev.less
index 5e1b622b18..aca9de3e4f 100644
--- a/site/src/localdev.less
+++ b/site/src/localdev.less
@@ -40,5 +40,7 @@
 
 @import './back-link/back-link';
 
+@import './image/image.less';
+
 // TODO: load separately async
 @import './ui-playground/ui-playground.less';
diff --git a/site/views/examples/image.njk b/site/views/examples/image.njk
index 83b291b3b1..2dda2d1b70 100644
--- a/site/views/examples/image.njk
+++ b/site/views/examples/image.njk
@@ -16,50 +16,112 @@ aside:
 <section class="row">
   <div class="col-12">
     <uip-root>
-      <script type="text/html" uip-snippet label="Simple image">
-        <div class="col-xs-12 col-sm-6">
-          <esl-image class="simple-image"
-                     mode="save-ratio" lazy
-                     data-alt="Alt Text Test"
-                     data-src="nature/forest+clouds.jpg"
-                     data-src-base="{{ imageSrcBase }}"></esl-image>
+      <script type="text/html" uip-snippet label="Save ratio mode">
+        <div class="d-flex">
+          <div class="col-sm-6">
+            <esl-image mode="save-ratio" lazy
+                       data-alt="Alt Text Test"
+                       data-src="nature/forest+clouds.jpg"
+                       data-src-base="{{ imageSrcBase }}"></esl-image>
+          </div>
+          <div class="col-sm-6">
+            <h3>Mode: save-ratio</h3>
+            <p>ESL Image uses the entire available width and occupies the height according to the image aspect ratio.</p>
+            <p>No inner image, css background is used to render the image.</p>
+          </div>
         </div>
       </script>
-      <script type="text/html" uip-snippet label="Image cover mode">
-        <div class="col-xs-12 col-sm-6">
-          <div class="img-container m-auto" style="width: 350px; padding-top: 70%; border: 1px solid #ccc;">
-            <esl-image class="cover-mode-image bg-v-center bg-h-center"
-                       mode="cover" lazy
-                       data-alt="Alt Text"
-                       data-src="nature/forest+clouds.jpg"
+      <script type="text/html" uip-snippet label="Fit mode">
+        <div class="d-flex">
+          <div class="col-sm-6">
+            <div class="img-container m-auto img-container-16-9">
+              <esl-image class="simple-image"
+                         mode="fit" lazy
+                         data-alt="Alt Text Test"
+                         data-src="nature/forest+clouds.jpg"
+                         data-src-base="{{ imageSrcBase }}"></esl-image>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <h3>Mode: fit</h3>
+            <p>ESL Image uses inner <em>img</em> to render picture and is used as a wrapper that controls
+              image source and state.</p>
+          </div>
+        </div>
+      </script>
+      <script type="text/html" uip-snippet label="Origin mode">
+        <div class="d-flex">
+          <div class="d-flex col-sm-6">
+            <esl-image mode="origin"
+                       class="m-auto"
+                       data-alt="Alt Text Test"
+                       data-src="nature/volcano-xs.jpg"
                        data-src-base="{{ imageSrcBase }}"></esl-image>
           </div>
+          <div class="col-sm-6">
+            <h3>Mode: origin</h3>
+            <p>Origin mode behaves similarly to the fit mode but sets esl-image size according to inner image
+              original size.</p>
+          </div>
+        </div>
+      </script>
+      <script type="text/html" uip-snippet label="Cover mode">
+        <div class="d-flex">
+          <div class="col-sm-6">
+            <div class="img-container m-auto img-container-4-3">
+              <esl-image class="cover-mode-image bg-v-center bg-h-center"
+                         mode="cover" lazy
+                         data-alt="Alt Text"
+                         data-src="nature/forest+clouds.jpg"
+                         data-src-base="{{ imageSrcBase }}"></esl-image>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <h3>Mode: cover</h3>
+            <p>No inner image, image is rendered by background image.</p>
+            <p>ESL Image has no own size. Can be used with img-container classes</p>
+            <p><b>Inscribe</b> can be used to declare inscribe image behaviour</p>
+          </div>
         </div>
       </script>
       <script type="text/html" uip-snippet label="SVG Inline loading">
-        <div class="col-xs-12 col-sm-6">
-          <div class="img-container m-auto" style="width: 250px; height: 325px;">
-            <esl-image lazy
-                       mode="inner-svg"
-                       data-alt="Svg Text Test"
-                       data-src="{{ '/assets/svg/cat.svg' | url }}"></esl-image>
+        <div class="d-flex">
+          <div class="col-sm-6">
+            <div class="img-container m-auto img-container-2-3">
+              <esl-image lazy
+                         mode="inner-svg"
+                         data-alt="Svg Text Test"
+                         data-src="{{ '/assets/svg/cat.svg' | url }}"></esl-image>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <h3>Mode: inner-svg, lazy mode</h3>
+            <p>ESL Image inner-svg mode that loads svg content inline.</p>
+            <p class="alert alert-info">NOTE: requesting svg endpoint should accept CORS policy restrictions</p>
+          </div>
           </div>
         </div>
       </script>
       <script type="text/html" uip-snippet label="ESL Query Rules">
-        <div class="col-xs-12 col-sm-6">
-          <div class="img-container img-container-16-9">
-            <esl-image lazy
-                       mode="cover"
-                       onload="console.log('SImage Load Track', event)"
-                       onready="console.log('SImage Ready Track', event)"
-                       data-alt="Alt Text Test"
-                       data-src="@XS => abstract/colors.jpg |
+        <div class="d-flex">
+          <div class="col-sm-6">
+            <div class="img-container img-container-16-9">
+              <esl-image lazy
+                         mode="cover"
+                         onload="console.log('SImage Load Track', event)"
+                         onready="console.log('SImage Ready Track', event)"
+                         data-alt="Alt Text Test"
+                         data-src="@XS => abstract/colors.jpg |
                                       @SM => abstract/drops.jpg |
                                       @MD => abstract/unsplash.jpg |
                                       @LG => abstract/colors.jpg |
                                       @XL => abstract/drops.jpg"
-                       data-src-base="{{ imageSrcBase }}"></esl-image>
+                         data-src-base="{{ imageSrcBase }}"></esl-image>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <h3>ESL Query Rules</h3>
+            <p>Change the image depending on the screen resolution</p>
           </div>
         </div>
       </script>
@@ -67,10 +129,12 @@ aside:
       <uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
       <uip-preview></uip-preview>
       <uip-settings label="Settings" resizable vertical="@+sm">
-        <uip-select-setting target=".simple-image" label="Image mode:" attribute="mode" mode="append">
-          <option value="save-ratio">save-ratio</option>
-          <option value="fit">fit</option>
-          <option value="origin">origin</option>
+        <uip-select-setting target=".img-container" label="Image ratio:" attribute="class" mode="append">
+          <option value="img-container-16-9">16 x 9</option>
+          <option value="img-container-4-3">4 x 3</option>
+          <option value="img-container-2-1">2 x 1</option>
+          <option value="img-container-2-3">2 x 3</option>
+          <option value="img-container-1-1">1 x 1</option>
         </uip-select-setting>
         <uip-select-setting target=".cover-mode-image" label="Image vertical alignment:" attribute="class" mode="append">
           <option value="bg-v-top">bg-v-top</option>
@@ -82,6 +146,7 @@ aside:
           <option value="bg-h-center">bg-h-center</option>
           <option value="bg-h-right">bg-h-right</option>
         </uip-select-setting>
+        <uip-bool-setting label="Border" target=".img-container" mode="append" attribute="class" value="border"></uip-bool-setting>
         <uip-bool-setting label="Inscribe" target=".cover-mode-image" mode="append" attribute="class" value="bg-inscribe"></uip-bool-setting>
       </uip-settings>
       <uip-editor label="Source code" collapsible copy></uip-editor>

From bfa45898d86d300001996747ad0fb95c5902b266 Mon Sep 17 00:00:00 2001
From: Yuliya Adamska <yadamska@exadel.com>
Date: Mon, 29 Jan 2024 13:34:01 +0300
Subject: [PATCH 3/7] chore(site): add custom image ratio styles to uip editor

---
 site/src/image/image.less     |  8 -------
 site/views/examples/image.njk | 42 ++++++++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 9 deletions(-)
 delete mode 100644 site/src/image/image.less

diff --git a/site/src/image/image.less b/site/src/image/image.less
deleted file mode 100644
index 5890d3a83f..0000000000
--- a/site/src/image/image.less
+++ /dev/null
@@ -1,8 +0,0 @@
-.img-container.img-container-2-1 {
-  padding-top: 50%;
-}
-
-.img-container.img-container-2-3 {
-  padding-top: 100%;
-  width: 66.66%;
-}
diff --git a/site/views/examples/image.njk b/site/views/examples/image.njk
index 2dda2d1b70..f74e8a1a28 100644
--- a/site/views/examples/image.njk
+++ b/site/views/examples/image.njk
@@ -34,6 +34,16 @@ aside:
       <script type="text/html" uip-snippet label="Fit mode">
         <div class="d-flex">
           <div class="col-sm-6">
+            <style>
+              .img-container.img-container-2-1 {
+                padding-top: 50%;
+              }
+
+              .img-container.img-container-2-3 {
+                padding-top: 100%;
+                width: 66.66%;
+              }
+            </style>
             <div class="img-container m-auto img-container-16-9">
               <esl-image class="simple-image"
                          mode="fit" lazy
@@ -68,6 +78,16 @@ aside:
       <script type="text/html" uip-snippet label="Cover mode">
         <div class="d-flex">
           <div class="col-sm-6">
+            <style>
+              .img-container.img-container-2-1 {
+                padding-top: 50%;
+              }
+
+              .img-container.img-container-2-3 {
+                padding-top: 100%;
+                width: 66.66%;
+              }
+            </style>
             <div class="img-container m-auto img-container-4-3">
               <esl-image class="cover-mode-image bg-v-center bg-h-center"
                          mode="cover" lazy
@@ -87,6 +107,16 @@ aside:
       <script type="text/html" uip-snippet label="SVG Inline loading">
         <div class="d-flex">
           <div class="col-sm-6">
+            <style>
+              .img-container.img-container-2-1 {
+                padding-top: 50%;
+              }
+
+              .img-container.img-container-2-3 {
+                padding-top: 100%;
+                width: 66.66%;
+              }
+            </style>
             <div class="img-container m-auto img-container-2-3">
               <esl-image lazy
                          mode="inner-svg"
@@ -105,7 +135,17 @@ aside:
       <script type="text/html" uip-snippet label="ESL Query Rules">
         <div class="d-flex">
           <div class="col-sm-6">
-            <div class="img-container img-container-16-9">
+            <style>
+              .img-container.img-container-2-1 {
+                padding-top: 50%;
+              }
+
+              .img-container.img-container-2-3 {
+                padding-top: 100%;
+                width: 66.66%;
+              }
+            </style>
+            <div class="img-container m-auto img-container-16-9">
               <esl-image lazy
                          mode="cover"
                          onload="console.log('SImage Load Track', event)"

From a2d76d116b1c4865cfbfed00c70407f181168357 Mon Sep 17 00:00:00 2001
From: Yuliya Adamska <yadamska@exadel.com>
Date: Thu, 1 Feb 2024 16:02:34 +0300
Subject: [PATCH 4/7] chore(site): remove redundant image styles import

---
 site/src/localdev.less | 2 --
 1 file changed, 2 deletions(-)

diff --git a/site/src/localdev.less b/site/src/localdev.less
index 414262075b..eb66104220 100644
--- a/site/src/localdev.less
+++ b/site/src/localdev.less
@@ -40,7 +40,5 @@
 
 @import './back-link/back-link';
 
-@import './image/image.less';
-
 // TODO: load separately async
 @import './playground/ui-playground.less';

From 348318f35c542ba1a4b99a6fbe44d03aabcc64dc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 2 Feb 2024 11:20:20 +0000
Subject: [PATCH 5/7] chore(deps-dev): bump the jest group with 1 update

Bumps the jest group with 1 update: [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest).


Updates `@types/jest` from 29.5.11 to 29.5.12
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest)

---
updated-dependencies:
- dependency-name: "@types/jest"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: jest
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fa4ec3b4d1..3cf68c510d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "@semantic-release/github": "^9.2.6",
         "@semantic-release/npm": "^11.0.2",
         "@semantic-release/release-notes-generator": "^12.1.0",
-        "@types/jest": "^29.5.11",
+        "@types/jest": "^29.5.12",
         "@typescript-eslint/eslint-plugin": "^6.20.0",
         "@typescript-eslint/parser": "^6.20.0",
         "chokidar-cli": "^3.0.0",
@@ -3038,9 +3038,9 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "29.5.11",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.11.tgz",
-      "integrity": "sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==",
+      "version": "29.5.12",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz",
+      "integrity": "sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==",
       "dev": true,
       "dependencies": {
         "expect": "^29.0.0",
diff --git a/package.json b/package.json
index 592dbdd058..43a3e86122 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
     "@semantic-release/github": "^9.2.6",
     "@semantic-release/npm": "^11.0.2",
     "@semantic-release/release-notes-generator": "^12.1.0",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.12",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "chokidar-cli": "^3.0.0",

From 9d45c9330cda60479b15b5fca58bd647f1ab5b0a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 2 Feb 2024 11:21:03 +0000
Subject: [PATCH 6/7] chore(deps-dev): bump stylelint from 16.2.0 to 16.2.1

Bumps [stylelint](https://github.com/stylelint/stylelint) from 16.2.0 to 16.2.1.
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/stylelint/stylelint/compare/16.2.0...16.2.1)

---
updated-dependencies:
- dependency-name: stylelint
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fa4ec3b4d1..ddb1da5a94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,7 @@
         "rimraf": "^5.0.5",
         "semantic-release": "^23.0.0",
         "smoothscroll-polyfill": "^0.4.4",
-        "stylelint": "^16.2.0",
+        "stylelint": "^16.2.1",
         "stylelint-prettier": "^5.0.0",
         "ts-jest": "^29.1.2",
         "typescript": "5.3.3"
@@ -17182,9 +17182,9 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.2.0.tgz",
-      "integrity": "sha512-gwqU5AkIb52wrAzzn+359S3NIJDMl02TXLUaV2tzA/L6jUdpTwNt+MCxHlc8+Hb2bUHlYVo92YeSIryF2gJthA==",
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.2.1.tgz",
+      "integrity": "sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==",
       "dev": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^2.5.0",
diff --git a/package.json b/package.json
index 592dbdd058..857c69c44d 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^23.0.0",
     "smoothscroll-polyfill": "^0.4.4",
-    "stylelint": "^16.2.0",
+    "stylelint": "^16.2.1",
     "stylelint-prettier": "^5.0.0",
     "ts-jest": "^29.1.2",
     "typescript": "5.3.3"

From c6850390286ed01e22f820aeb379ba1346b20b3b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Feb 2024 10:17:31 +0000
Subject: [PATCH 7/7] chore(deps-dev): bump prettier from 3.2.4 to 3.2.5

Bumps [prettier](https://github.com/prettier/prettier) from 3.2.4 to 3.2.5.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/3.2.4...3.2.5)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0ad701563c..1c040ded28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,7 @@
         "lint-staged": "^15.2.1",
         "postcss": "^8.4.33",
         "postcss-less": "^6.0.0",
-        "prettier": "^3.2.4",
+        "prettier": "^3.2.5",
         "rimraf": "^5.0.5",
         "semantic-release": "^23.0.0",
         "smoothscroll-polyfill": "^0.4.4",
@@ -15274,9 +15274,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
-      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
diff --git a/package.json b/package.json
index b127e61143..4255bcd497 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
     "lint-staged": "^15.2.1",
     "postcss": "^8.4.33",
     "postcss-less": "^6.0.0",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "semantic-release": "^23.0.0",
     "smoothscroll-polyfill": "^0.4.4",