Chore/create demo page

package.json

@@ -37,7 +37,9 @@
     "modules/lib.js",
     "src/modules/lib.ts",
     "modules/esl-media/providers/**/*.js",
+    "modules/esl-share/actions/**/*.js",
     "src/modules/esl-media/providers/**/*.ts",
+    "src/modules/esl-share/actions/**/*.ts",
     "modules/draft/esl-carousel/core/view/*.js",
     "src/modules/draft/esl-carousel/core/view/*.ts",
     "polyfills/**/*.js",

pages/.eleventy.js

@@ -18,6 +18,7 @@ module.exports = (config) => {
 
   // Add MD files from the library sources
   config.addWatchTarget('../**/*.md');
+  config.addWatchTarget('static/**/*.svg');
 
   // Setup simple copy operations
   config.addPassthroughCopy({

pages/src/banner/banner.less

@@ -1,6 +1,6 @@
 @import (reference) "../common/variables.less";
 
-.banner {
+.banner-popup {
   &-alert {
     width: 80%;
     right: 10%;

pages/src/banner/redesign.ts

@@ -9,9 +9,9 @@ onDocumentReady(() => {
   sessionStorage.setItem(KEY, '1');
 
   const detail: AlertActionParams = {
-    cls: 'alert alert-info banner-alert',
+    cls: 'alert alert-info banner-popup-alert',
     html: `
-        <div class="banner-text">
+        <div class="banner-popup-text">
           <p>Hey dear ESL site visitor, it is a preview version of our site redesign.</p>
           <p>We hope you like it. Feel free to create an issue on GitHub in case you are faced with a bug.</p>
           <p>Enjoy the new experience of ESL presentation!</p>

pages/src/common/banner.less

@@ -0,0 +1,28 @@
+.banner {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  position: relative;
+  padding: 40px;
+  min-height: 450px;
+
+  .bg-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    z-index: 1;
+  }
+
+  .banner-content {
+    z-index: 2;
+
+    &.contrast {
+      color: white;
+      text-shadow: 0 0 6px rgba(0, 0, 0, .9);
+    }
+  }
+}

pages/src/common/simple-grid.less

@@ -4,14 +4,13 @@
   justify-content: space-around;
 
   margin: 30px 0;
-  padding: 20px;
+  gap: 40px;
 
   & > &-cell {
     list-style-type: none;
     flex: 1 1 0px;
-    margin: 20px;
     min-width: 200px;
-    height: 200px;
+    min-height: 200px;
   }
 
   &-fw > &-cell {

pages/src/esl-media-demo/lazy-media-mixin.ts

@@ -0,0 +1,27 @@
+import {ESLMixinElement} from '../../../src/modules/esl-mixin-element/core';
+import {setAttr} from '../../../src/modules/esl-utils/dom/attr';
+import {memoize} from '../../../src/modules/esl-utils/decorators/memoize';
+
+export class ESLDemoLazyMedia extends ESLMixinElement {
+  static override is = 'esl-d-media-lazy';
+
+  @memoize()
+  static get io$$(): IntersectionObserver {
+    return new IntersectionObserver(function (entries: IntersectionObserverEntry[]) {
+      for (const entry of entries) {
+        if (entry.isIntersecting && entry.intersectionRatio > 0.01) {
+          setAttr(entry.target, 'disabled', false);
+          setAttr(entry.target, ESLDemoLazyMedia.is, false);
+        }
+      }
+    }, {threshold: [0.05]});
+  }
+
+  public override connectedCallback(): void {
+    ESLDemoLazyMedia.io$$.observe(this.$host);
+  }
+
+  public override disconnectedCallback(): void {
+    ESLDemoLazyMedia.io$$.unobserve(this.$host);
+  }
+}

pages/src/esl-media-demo/test-media.less

@@ -9,31 +9,3 @@ esl-d-media-controls {
     margin-right: 5px;
   }
 }
-
-.demo-marquee {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-
-  position: relative;
-  padding: 40px;
-  min-height: 340px;
-
-  .bg-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    z-index: 1;
-  }
-  .demo-content {
-    z-index: 2;
-
-    &.contrast {
-      color: white;
-      text-shadow: 0 0 6px rgba(0, 0, 0, .9);
-    }
-  }
-}

pages/src/esl-share/esl-share.less

@@ -0,0 +1,12 @@
+esl-share-list esl-share-button[unavailable] {
+  display: inline-block;
+  opacity: .3;
+  cursor: not-allowed;
+  filter: grayscale(1);
+}
+
+esl-share-button {
+  path, circle {
+    fill: #fff;
+  }
+}

pages/src/localdev.less

@@ -7,6 +7,7 @@
 @import "./common/accordion.less";
 @import "./common/alert.less";
 @import "./common/badge.less";
+@import "./common/banner.less";
 @import "./common/buttons.less";
 @import "./common/code.less";
 @import "./common/links.less";
@@ -28,11 +29,13 @@
 
 @import "./navigation/navigation.less";
 @import "./landing/landing.less";
+@import "./showcase/showcase.less";
 
 @import "./banner/banner.less";
 
 @import "./collection-grid/collection-grid.less";
 @import "./esl-media-demo/test-media.less";
+@import "./esl-share/esl-share.less";
 
 @import "../../src/modules/all.less";
 @import "../../src/modules/draft/all.less";

pages/src/localdev.ts

@@ -32,6 +32,7 @@ import {
   ESLFootnotes,
   ESLTooltip,
   ESLAnimate,
+  ESLShareList,
   ESLRelatedTarget
 } from '../../src/modules/all';
 
@@ -41,6 +42,12 @@ import '../../src/modules/esl-media/providers/html5/video-provider';
 import '../../src/modules/esl-media/providers/youtube-provider';
 import '../../src/modules/esl-media/providers/brightcove-provider';
 
+import '../../src/modules/esl-share/actions/copy-action';
+import '../../src/modules/esl-share/actions/external-action';
+import '../../src/modules/esl-share/actions/media-action';
+import '../../src/modules/esl-share/actions/native-action';
+import '../../src/modules/esl-share/actions/print-action';
+
 import {
   ESLCarousel,
   ESLCarouselPlugins
@@ -49,6 +56,7 @@ import {
 import './esl-media-demo/test-media';
 import './esl-media-demo/test-media-source';
 
+import {ESLDemoLazyMedia} from  './esl-media-demo/lazy-media-mixin';
 import {ESLDemoBackLink} from './back-link/back-link';
 import {ESLDemoMarquee} from './landing/landing';
 import {ESLDemoSearchBox} from './navigation/header/header-search';
@@ -65,6 +73,7 @@ ESLDemoSearchBox.register();
 ESLDemoSearchPageWrapper.register();
 ESLDemoAnchorLink.register();
 ESLDemoBackLink.register();
+ESLDemoLazyMedia.register();
 
 // Register ESL Components
 ESLImage.register();
@@ -106,5 +115,8 @@ ESLCarouselPlugins.Link.register();
 ESLCarouselPlugins.Touch.register();
 ESLCarouselPlugins.Autoplay.register();
 
+ESLShareList.config(() => fetch('/assets/share/config.json').then((response) => response.json()));
+ESLShareList.register();
+
 // Register ESL Mixins
 ESLRelatedTarget.register();

pages/src/navigation/footer/footer.less

@@ -159,8 +159,9 @@
 
   &-common-links-container {
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     justify-content: space-between;
+    gap: 10px;
     padding: 20px 10px;
 
     @media @md-xl {

pages/src/navigation/header/header.less

@@ -15,12 +15,6 @@
     height: @header-height-desktop;
   }
 
-  @media @md-xl {
-    .landing-layout & {
-      background-color: transparent;
-    }
-  }
-
   &-container {
     display: flex;
     align-items: center;
@@ -90,6 +84,17 @@
     }
   }
 
+  &-share-popup.esl-popup {
+    &, & > .esl-popup-arrow {
+      background: @landing-bg-color;
+      border-color: gray;
+    }
+    > .esl-share-list {
+      margin: .75rem;
+      gap: .25rem;
+    }
+  }
+
   &-utility {
     display: flex;
     align-items: center;

pages/src/navigation/sidebar/sidebar-primary-nav.less

@@ -13,6 +13,28 @@ esl-d-sidebar {
     margin-bottom: 5px;
   }
 
+  // Share item
+  .sidebar-nav-item-share {
+    margin-top: 20px;
+    @media @md-xl {
+      display: none;
+    }
+
+    .esl-share-list {
+      gap: 15px;
+    }
+    .esl-share-button {
+      width: 30px;
+      height: 30px;
+    }
+    .sidebar-nav-item-heading {
+      gap: 15px;
+      @media @sm {
+        flex-direction: column;
+      }
+    }
+  }
+
   // Primary Heading
   .sidebar-nav-item-heading {
     position: relative;

pages/src/navigation/sidebar/sidebar.less

@@ -65,7 +65,7 @@ esl-d-sidebar {
   }
 
   @media @md-xl {
-    .landing-layout & {
+    .hide-sidebar & {
       display: none;
     }
   }

pages/src/page/landing-layout.less

@@ -33,7 +33,6 @@
     100% { background-position: 100vw 0; opacity: 1; }
   }
 
-
   .main-scroll {
     position: absolute;
     z-index: 5;
@@ -50,4 +49,10 @@
       background: #2e2f35;
     }
   }
+
+  @media @md-xl {
+    .header {
+      background-color: transparent;
+    }
+  }
 }

pages/src/showcase/showcase-content-tabs.less

@@ -0,0 +1,23 @@
+@import (reference) "variables.less";
+
+.showcase-page .content-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+
+  @media @md-xl {
+    flex-direction: row;
+    align-items: flex-start;
+
+    .esl-d-tabs,
+    .content-column {
+      width: 50%;
+    }
+  }
+
+  @media @xs-sm {
+    .esl-d-tabs {
+      order: -1;
+    }
+  }
+}

pages/src/showcase/showcase-footnotes.less

@@ -0,0 +1,7 @@
+.showcase-page {
+  .footnotes-container {
+    display: flex;
+    flex-direction: column-reverse;
+    margin-bottom: -15px;
+  }
+}