feat(esl-image-utils): create esl-img-container mixin to provide image container functionality

.commitlintrc.yml

@@ -38,6 +38,7 @@ rules:
       - esl-footnotes
       - esl-forms
       - esl-image
+      - esl-image-utils
       - esl-media
       - esl-media-query
       - esl-mixin-element

README.md

@@ -68,7 +68,8 @@ with excellent performance.
 - ##### [ESL Alert](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-alert/README.md)
 - ##### [ESL Animate](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-animate/README.md)
 - ##### [ESL Footnotes](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-footnotes/README.md) (beta)
-- ##### [ESL Image](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image/README.md)
+- ##### [ESL Image Utils](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image-utils/README.md)
+- ##### [ESL Image (Legacy)](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image/README.md)
 - ##### [ESL Media](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-media/README.md)
 - ##### [ESL Panel](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-panel/README.md)
 - ##### [ESL Panel Group](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-panel-group/README.md)

site/11ty/markdown.img.lib.js

@@ -14,8 +14,8 @@ const extractAttrs = (token) => {
 const renderImage = (attrs) => {
   const {src, alt, width, height} = attrs;
   const style = width * height ? `aspect-ratio: ${width} / ${height};` : '';
-  return `<div class="img-container" style="${style}">
-    <esl-image lazy container-class mode="fit" alt="${alt}" data-src="${src}"></esl-image>
+  return `<div class="img-container img-container-no-ratio" style="${style}" esl-image-container>
+    <img loading="lazy" class="img-fade ${style ? 'img-contain' : ''}" alt="${alt}" src="${src}"/>
   </div>`;
 };
 

site/site.yml

@@ -20,7 +20,14 @@ rewriteRules:
   "docs/INSTALLATION_GUIDE.md": "/introduction"
   "docs/BROWSER_SUPPORT.md": "/introduction/browser-support"
   "src/modules/esl-base-element/README.md": "/core/esl-base-element"
+  "src/modules/esl-mixin-element/README.md": "/core/esl-mixin-element"
   "src/modules/esl-media-query/README.md": "/core/esl-media-query"
   "src/modules/esl-traversing-query/README.md": "/core/esl-traversing-query"
   "src/modules/esl-trigger/README.md": "/components/esl-trigger"
   "src/modules/esl-toggleable/README.md": "/components/esl-toggleable"
+  "src/modules/esl-tab/README.md": "/components/esl-tab"
+  "src/modules/esl-panel/README.md": "/components/esl-panel"
+  "src/modules/esl-panel-group/README.md": "/components/esl-panel-group"
+  "src/modules/esl-image/README.md": "/components/esl-image"
+  "src/modules/esl-image-utils/README.md": "/components/esl-image-utils"
+  "src/modules/esl-carousel/README.md": "/components/esl-carousel"

site/src/common/badge.less

@@ -69,16 +69,26 @@
   &-img {
     width: 20px;
     height: 20px;
-  }
 
-  &-playground {
     &::after {
       position: absolute;
-      content: '';
       inset: 0;
+      background-size: contain;
+      background-repeat: no-repeat;
       background-position: center;
+    }
+  }
+
+  &-playground {
+    &::after {
+      content: '';
       background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.1 11.7' fill='white' xml:space='preserve'%3E%3Cpath d='M2.8 5.9 6.7 2a1 1 0 0 0 0-1.6C6.2-.1 5.5-.1 5 .4L.7 4.6l-.2.3-.2.2a1 1 0 0 0 0 1.6L5 11.4c.5.4 1.2.4 1.6 0a1 1 0 0 0 0-1.6L2.8 5.9zM14.4 1.3l2 1.2L12 9.9l-2-1.1zM11.9 10.2 9.9 9l-.2 2.6zM14.8.6c.3-.5 1-.7 1.6-.4.6.3.7 1 .4 1.6l-.3.5-2-1.1.3-.6zM25.7 6.7l-.2.2-.2.3-4.3 4.2c-.5.4-1.2.4-1.6 0a1 1 0 0 1 0-1.6L23.3 6l-3.9-4a1 1 0 0 1 0-1.6c.5-.4 1.2-.4 1.6 0l4.7 4.7c.5.4.5 1.1 0 1.6z'/%3E%3C/svg%3E");
-      background-repeat: no-repeat;
+    }
+  }
+  &-deprecated {
+    &::after {
+      content: '';
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3ccircle cx='50' cy='50' r='45' fill='none' stroke='%236c757d' stroke-width='6'/%3e%3cpath fill='%236c757d' d='M20 45h60v10H20z'/%3e%3c/svg%3e");
     }
   }
 

site/src/common/card.less

@@ -8,6 +8,9 @@
   background: #fff;
   box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.3);
 
+  img {
+    pointer-events: none;
+  }
   &-image {
     flex: 0 0 auto;
   }

site/src/common/markdown.less

@@ -36,7 +36,8 @@
     letter-spacing: 1px;
   }
 
-  &.no-margin {
+  &.no-margin,
+  .alert & {
     p:last-child {
       margin-block-end: 0;
     }

site/src/localdev.ts

@@ -10,7 +10,7 @@ import './common/breakpoints';
 
 import {
   ESLVSizeCSSProxy,
-  ESLImage,
+  ESLImageContainerMixin,
   ESLMedia,
   ESLToggleable,
   ESLPopup,
@@ -84,7 +84,7 @@ ESLDemoPopupGame.register();
 ESLRandomText.register('lorem-ipsum');
 
 // Register ESL Components
-ESLImage.register();
+ESLImageContainerMixin.register();
 ESLMedia.register();
 
 ESLToggleableDispatcher.init();

site/src/navigation/footer/footer.less

@@ -94,7 +94,7 @@
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
-        height: 330px; // 8 lines max (+2px)
+        max-height: 410px; // 10 lines max
         list-style-type: none;
       }
     }

site/src/playground/export/lib.ts

@@ -1 +1,2 @@
+import '@exadel/esl/modules/lib';
 export * from '@exadel/esl';

site/views/_includes/navigation/sidebar-item.njk

@@ -42,6 +42,7 @@
         {% set isDraft = [].concat(item.data.tags).includes('draft') %}
         {% set isNew = [].concat(item.data.tags).includes('new') %}
         {% set isBeta = [].concat(item.data.tags).includes('beta') %}
+        {% set isDeprecated = [].concat(item.data.tags).includes('deprecated') %}
         {% set isPlayground = [].concat(item.data.tags).includes('playground') %}
         <li class="sidebar-nav-secondary-item {{ 'active' if isActive }} {{ 'draft' if isDraft }}"
             {% if isActive %}aria-selected="true"{% endif %}>
@@ -57,6 +58,9 @@
             {% if isDraft %}
               <sup class="badge badge-sup badge-danger badge-sidebar" {% if isDraftCollection %}hidden{% endif %}>draft</sup>
             {% endif %}
+            {% if isDeprecated %}
+              <span class="badge badge-img badge-deprecated badge-sidebar" aria-label="Deprecated component" title="Deprecated component"></span>
+            {% endif %}
             {% if isPlayground %}
               <span class="badge badge-img badge-playground badge-sidebar" aria-label="Live code" title="Page with a live code example"></span>
             {% endif %}

site/views/_layouts/content.njk

@@ -21,6 +21,17 @@
       {% endif %}
       {% if aside %}
         <aside class="aside">
+          {% if 'deprecated' in [].concat(tags) and aside.deprecationSpec %}
+            <div class="alert alert-warning">
+              {% mdRender aside.deprecationSpec, 'deprecation', 'intro' %}
+            </div>
+          {% endif %}
+          {% if 'deprecated' in [].concat(tags) and aside.deprecationText %}
+            <div class="alert alert-warning">
+              {{ aside.deprecationText | safe }}
+            </div>
+          {% endif %}
+
           {% from 'navigation/related-links.njk' import related with context %}
           {% from 'navigation/source-link.njk' import ghLink with context %}
           {{ related(aside.components, 'components', 'Related Components') }}

site/views/components/esl-image-utils.njk

@@ -0,0 +1,13 @@
+---
+layout: content
+title: ESL Image Utils
+seoTitle: Common image ESL utilities
+name: ESL Image Utils
+tags: [components, new]
+aside:
+  source: src/modules/esl-image-utils
+  examples:
+    - image-utils
+---
+
+{% mdRender 'src/modules/esl-image-utils/README.md', 'intro' %}

site/views/components/esl-image.njk

@@ -3,11 +3,15 @@ layout: content
 title: ESL Image
 seoTitle: ESL Image - custom image element with lazy loading, renditions, and different modes of embedding
 name: ESL Image
-tags: components
+tags: [components, deprecated]
 aside:
   source: src/modules/esl-image
   examples:
     - image
+    - image-utils
+  components:
+    - esl-image-utils
+  deprecationSpec: src/modules/esl-image/README.md
 ---
 
 {% mdRender 'src/modules/esl-image/README.md', 'intro' %}

site/views/draft/carousel.njk

@@ -23,11 +23,11 @@ icon: examples/carousel.svg
         {% for item in cards | limit(10) %}
           <li esl-carousel-slide {{ 'active' if loop.first }}>
             <div class="card">
-              <div class="card-image img-container img-container-16-9">
-                <esl-image lazy
-                           mode="cover"
-                           data-alt="{{ 'Carousel slide ' + loop.index }}"
-                           data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+              <div class="card-image img-container img-container-16-9" esl-image-container>
+                <img class="img-fade img-cover"
+                     alt="{{ 'Carousel slide ' + loop.index }}"
+                     src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                     loading="lazy" />
               </div>
               <div class="card-content p-3">
                 <h5>{{ item.name }}<esl-note>{{ loop.index }}</esl-note></h5>
@@ -66,11 +66,11 @@ icon: examples/carousel.svg
         {% for item in cards | limit(4) %}
           <li esl-carousel-slide {{ 'active' if loop.first }}>
             <div class="card">
-              <div class="card-image img-container img-container-16-9">
-                <esl-image lazy
-                           mode="cover"
-                           data-alt="{{ 'Carousel slide ' + loop.index }}"
-                           data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+              <div class="card-image img-container img-container-16-9" esl-image-container>
+                <img class="img-fade img-cover"
+                     alt="{{ 'Carousel slide ' + loop.index }}"
+                     src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                     loading="lazy" />
               </div>
               <div class="card-content p-3">
                 <h5>{{ item.name }}</h5>
@@ -106,9 +106,10 @@ icon: examples/carousel.svg
         {% for i in range(0, 6) -%}
           <li esl-carousel-slide style="max-width: 50%">
             <div class="card">
-              <esl-image mode="cover" lazy
-                         data-alt="Alt Text Test"
-                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+              <img class="img-cover"
+                   alt="{{ 'Carousel slide ' + loop.index }}"
+                   src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                   loading="lazy" />
             </div>
           </li>
         {%- endfor %}
@@ -196,10 +197,11 @@ icon: examples/carousel.svg
           {% for i in range(0, 4) -%}
            <li esl-carousel-slide>
               <div class="card">
-                  <div class="img-container img-container-16-9">
-                      <esl-image mode="cover" lazy
-                                 data-alt="Alt Text Test"
-                                 data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+                  <div class="img-container img-container-16-9" esl-image-container>
+                    <img class="img-fade img-cover"
+                         alt="{{ 'Carousel slide ' + loop.index }}"
+                         src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                         loading="lazy" />
                   </div>
               </div>
            </li>

site/views/examples/carousel/centered-siblings.sample.njk

@@ -20,10 +20,11 @@ tags: carousel-sample
     <ul esl-carousel-slides>
       {% for i in range(0, 6) -%}
         <li esl-carousel-slide style="max-width: 400px">
-          <div class="card img-container">
-            <esl-image mode="cover" lazy
-                       data-alt="Alt Text Test"
-                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+          <div class="card img-container" esl-image-container>
+            <img class="img-fade img-cover"
+                 alt="Alt Text"
+                 src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                 loading="lazy" />
             <button type="button" class="close close-icon close-remove inverse"
                     title="Remove" aria-label="Remove"
                     onclick="this.closest('li').remove()"></button>

site/views/examples/carousel/default.sample.njk

@@ -21,11 +21,11 @@ tags: carousel-sample
       {% for item in range(0, 16) %}
         <li esl-carousel-slide {{ 'active' if loop.first }}>
           <div class="card">
-            <div class="card-image img-container img-container-16-9">
-              <esl-image lazy
-                         mode="cover"
-                         data-alt="{{ 'Carousel slide ' + loop.index }}"
-                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+            <div class="card-image img-container img-container-16-9" esl-image-container>
+              <img class="img-fade img-cover"
+                   alt="{{ 'Carousel slide ' + loop.index }}"
+                   src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                   loading="lazy" />
               <button type="button" class="close close-icon close-remove inverse"
                       title="Remove" aria-label="Remove"
                       onclick="this.closest('li').remove()"></button>

site/views/examples/carousel/multirow.sample.njk

@@ -20,11 +20,11 @@ tags: carousel-sample
       {% for item in range(0, 16) %}
         <li esl-carousel-slide {{ 'active' if loop.first }}>
           <div class="card">
-            <div class="card-image img-container img-container-16-9">
-              <esl-image lazy
-                         mode="cover"
-                         data-alt="{{ 'Carousel slide ' + loop.index }}"
-                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+            <div class="card-image img-container img-container-16-9" esl-image-container>
+              <img class="img-fade img-cover"
+                   alt="{{ 'Carousel slide ' + loop.index }}"
+                   src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                   loading="lazy" />
               <button type="button" class="close close-icon close-remove inverse"
                       title="Remove" aria-label="Remove"
                       onclick="this.closest('li').remove()"></button>

site/views/examples/carousel/nav-carousel.sample.njk

@@ -12,11 +12,11 @@ tags: carousel-sample
     <ul esl-carousel-slides>
       {% for item in range(0, 8) %}
         <li esl-carousel-slide>
-          <div class="img-container img-container-16-9">
-            <esl-image mode="cover"
-                       lazy
-                       data-alt="{{ 'Carousel slide ' + loop.index }}"
-                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+          <div class="img-container img-container-16-9" esl-image-container>
+            <img class="img-fade img-cover"
+                 alt="{{ 'Carousel slide ' + loop.index }}"
+                 src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                 loading="lazy" />
           </div>
         </li>
       {% endfor %}
@@ -33,11 +33,13 @@ tags: carousel-sample
       {% for item in range(0, 16) %}
         <li esl-carousel-slide>
           <div class="img-container img-container-4-3"
+               esl-image-container
                esl-carousel-nav="slide:{{ loop.index - 1 }}"
                esl-carousel-nav-target="#main-carousel">
-            <esl-image mode="cover" lazy
-                       data-alt="{{ 'Carousel slide ' + loop.index }}"
-                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg'  | url }}"></esl-image>
+            <img class="img-fade img-cover"
+                 alt="{{ 'Carousel slide ' + loop.index }}"
+                 src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                 loading="lazy" />
           </div>
         </li>
       {% endfor %}

site/views/examples/carousel/siblings.sample.njk

@@ -16,10 +16,11 @@ tags: carousel-sample
     <ul esl-carousel-slides>
       {% for i in range(0, 6) -%}
         <li esl-carousel-slide style="max-width: 50%">
-          <div class="card img-container">
-            <esl-image mode="cover" lazy
-                       data-alt="Alt Text Test"
-                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+          <div class="card img-container" esl-image-container>
+            <img class="img-fade img-cover"
+                 alt="{{ 'Carousel slide ' + loop.index }}"
+                 src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                 loading="lazy" />
             <button type="button" class="close close-icon close-remove inverse"
                     title="Remove" aria-label="Remove"
                     onclick="this.closest('li').remove()"></button>

site/views/examples/carousel/single.sample.njk

@@ -16,10 +16,11 @@ tags: carousel-sample
       {% for i in range(0, 4) -%}
         <li esl-carousel-slide>
           <div class="card">
-            <div class="img-container img-container-16-9">
-              <esl-image mode="cover" lazy
-                         data-alt="Alt Text Test"
-                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+            <div class="img-container img-container-16-9" esl-image-container>
+              <img class="img-fade img-cover"
+                   alt="{{ 'Carousel slide ' + loop.index }}"
+                   src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                   loading="lazy" />
               <div class="h1 text-slide text-white">Slide {{ loop.index }}</div>
             </div>
           </div>

site/views/examples/carousel/vertical.sample.njk

@@ -18,10 +18,11 @@ tags: carousel-sample
       {% for i in range(0, 4) -%}
         <li esl-carousel-slide>
           <div class="card">
-            <div class="img-container img-container-16-9">
-              <esl-image mode="cover" lazy
-                         data-alt="Alt Text Test"
-                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+            <div class="img-container img-container-16-9" esl-image-container>
+              <img class="img-fade img-cover"
+                   alt="{{ 'Carousel slide ' + loop.index }}"
+                   src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"
+                   loading="lazy" />
               <div class="h1 text-slide text-white">Slide {{ loop.index }}</div>
             </div>
           </div>