Merge pull request #2539 from exadel-inc/tech/site-banner-upd

refactor(site): update site contribution banner

site/src/banner/banner.less

@@ -1,88 +1,46 @@
 @import (reference) '../common/variables.less';
 
-.banner {
-  position: relative;
-  border: 2px solid @primary-green;
-  border-radius: 1rem;
-  box-shadow: 0 0 6px @primary-green;
-  background-color: #fff;
-
-  text-align: center;
-  font-weight: 500;
-  color: mix(@primary-green-dark, #fff, 75%);
-
-  padding: 1rem;
-  @media @sm-xl {
-    padding: 2rem;
-  }
-
-  .banner-title {
-    font-weight: 600;
-    color: @primary-green-dark;
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  a[href] {
-    text-decoration-color: @primary-green-dark;
-  }
-
-  .close {
-    position: absolute;
-    top: 0.75rem;
-    right: 1.1rem;
-    color: inherit;
-  }
-
-  &:focus,
-  &:focus-within {
-    outline: none;
-    box-shadow: 0 0 10px @primary-green;
-  }
-}
-
 esl-d-banner {
-  display: none;
-}
-.esl-d-banner {
-  display: block;
-  position: fixed;
-  z-index: 1000;
+  @animationTime: 0.5s;
 
-  right: 1.5rem;
-  bottom: 1.5rem;
-  width: 40rem;
-  max-width: calc(100% - 3rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 
-  @media @sm-xl {
-    right: 2.5rem;
-    bottom: 2.5rem;
-    max-width: calc(100% - 5rem);
-  }
+  margin-top: 2rem;
+  margin-bottom: 1.5rem;
 
   visibility: hidden;
-  transition:
-    visibility 1s,
-    transform 1s,
-    opacity 1s;
   opacity: 0;
-  transform: translate3d(4rem, 0, 0);
-  pointer-events: none;
-
-  &:not(.open) .banner {
-    display: none;
-  }
+  transition:
+    visibility 1s linear,
+    opacity 0.5s linear;
 
-  &.open {
+  &[open] {
     visibility: visible;
     opacity: 1;
-    transform: translate3d(0, 0, 0);
     transition:
-      visibility 0s,
-      transform 1s,
-      opacity 1s;
-    pointer-events: all;
+      visibility 0s linear,
+      opacity 0.5s linear;
+  }
+
+  .alert {
+    position: relative;
+    transition: opacity 0.2s linear;
+
+    &:not(:focus-within):not(:hover) {
+      opacity: 0.6;
+    }
+
+    a::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  .close-button {
+    position: relative;
+    z-index: 1;
   }
 }

site/src/banner/banner.ts

@@ -1,7 +1,8 @@
+import {attr, prop, listen} from '@exadel/esl/modules/esl-utils/decorators';
+import {ESLIntersectionTarget} from '@exadel/esl/modules/esl-event-listener/core';
 import {ESLToggleable} from '@exadel/esl/modules/esl-toggleable/core';
-import {attr, memoize, prop} from '@exadel/esl/modules/esl-utils/decorators';
-
-import type {ESLToggleableActionParams} from '@exadel/esl/modules/esl-toggleable/core/esl-toggleable';
+import type {ESLIntersectionEvent} from '@exadel/esl/modules/esl-event-listener/core';
+import type {ESLToggleableActionParams} from '@exadel/esl/modules/esl-toggleable/core';
 
 export class ESLDemoBanner extends ESLToggleable {
   public static override is = 'esl-d-banner';
@@ -11,46 +12,45 @@ export class ESLDemoBanner extends ESLToggleable {
   @attr({defaultValue: 14, parser: parseInt})
   public cookieTime: number;
 
-  @prop({initiator: 'initial', showDelay: 8000})
-  public override initialParams: ESLToggleableActionParams;
 
   @prop(true) public override closeOnEsc: boolean;
+  @prop('.close-button') public override closeTrigger: string;
 
-  protected _$focusBefore: HTMLElement | null = null;
+  public get $alert(): HTMLElement | null {
+    return this.querySelector('.alert')!;
+  }
 
-  /** Check if the coolie {@link cookieName} is active */
+  /** Check if the coolie is active */
   public get hasCookie(): boolean {
     const {cookieName} = this;
     return !!cookieName && document.cookie.indexOf(`${cookieName}=true`) !== -1;
   }
 
-  @memoize()
-  public get $focusable(): HTMLElement | undefined {
-    return this.querySelector('.banner') as HTMLElement | undefined;
-  }
-
   /** Store cookie {@link cookieName} for {@link cookieTime} period */
   public registerCookie(expireDays: number = this.cookieTime): void {
     const {cookieName} = this;
-    if (cookieName) {
-      const expires = new Date(Date.now() + expireDays * 864e5).toUTCString();
-      document.cookie = `${cookieName}=true; path=/; expires=${expires};`;
-    }
-  }
-
-  protected override setInitialState(): void {
-    this.toggle(!this.hasCookie, this.initialParams);
+    if (!cookieName) return;
+    const expires = new Date(Date.now() + expireDays * 864e5).toUTCString();
+    document.cookie = `${cookieName}=true; path=/; expires=${expires};`;
   }
 
   protected override onShow(params: ESLToggleableActionParams): void {
     super.onShow(params);
-    this._$focusBefore = document.activeElement as HTMLElement;
-    this.$focusable && this.$focusable.focus();
-    if (params.initiator !== 'initial') this.registerCookie(-1);
+    this.$alert?.classList.add('in');
+    this.$$off(this._onIntersect);
+  }
+
+  protected override onHide(param: ESLToggleableActionParams): void {
+    super.onHide(param);
+    if (param.initiator === 'close') this.registerCookie();
   }
-  protected override onHide(params: ESLToggleableActionParams): void {
-    super.onHide(params);
-    this._$focusBefore && this._$focusBefore.focus();
-    if (params.initiator !== 'initial') this.registerCookie();
+
+  @listen({
+    event: 'intersects',
+    target: ($this: ESLDemoBanner) => ESLIntersectionTarget.for($this, {threshold: 0.99}),
+    condition: ($this: ESLDemoBanner) => !$this.hasCookie
+  })
+  protected _onIntersect(e: ESLIntersectionEvent): void {
+    this.toggle(e.isIntersecting, {showDelay: 750});
   }
 }

site/src/common/alert.less

@@ -16,12 +16,10 @@
     }
   }
 
-  /* stylelint-disable */
-  .alert-color (~'success', @primary-green);
-  .alert-color (~'info', @primary-blue);
-  .alert-color (~'warning', @primary-orange);
-  .alert-color (~'danger', @primary-orange-dark);
-  /* stylelint-enable */
+  .alert-color(~'success', @primary-green);
+  .alert-color(~'info', @primary-blue);
+  .alert-color(~'warning', @primary-orange);
+  .alert-color(~'danger', @primary-orange-dark);
 }
 
 esl-alert.alert {

site/src/common/colors.less

@@ -64,6 +64,9 @@
   &-white {
     color: #fff !important;
   }
+  &-info {
+    color: @primary-green-dark !important;
+  }
 }
 
 // Borders

site/src/common/markdown.less

@@ -35,4 +35,10 @@
     font-weight: 500;
     letter-spacing: 1px;
   }
+
+  &.no-margin {
+    p:last-child {
+      margin-block-end: 0;
+    }
+  }
 }

site/src/navigation/footer/footer-compact.less

@@ -1,7 +1,3 @@
 .footer-compact {
   padding: 15px 0;
-
-  &-divider {
-    margin-top: 0;
-  }
 }

site/views/_data/banner.yml

@@ -1,5 +1,5 @@
 title: "Contribute to ESL documentation"
 cookie: contrib-doc-hide
 content: |
-  Found a typo? Have an interesting usage example to share? Want to help improve our documentation?
+  ⓘ Found a typo? Have an interesting usage example to share? Want to help improve our documentation?
   You are very welcome to contribute to ESL. Check out our [documentation contribution guide](/introduction/contribute/#contributing-to-esl-documentation).

site/views/_includes/navigation/banner.njk

@@ -1,15 +1,12 @@
 {% if banner.title and not banner.disabled %}
-<esl-d-banner close-on=".close-button"
-              cookie-name="{{banner.cookie or ''}}"
-              role="note"
-              aria-live="polite">
-  <div class="banner" tabindex="-1">
-    <h5 class="banner-title h4">{{ banner.title }}</h5>
-    <div class="markdown-container">{% markdown %} {{ banner.content }} {% endmarkdown %}</div>
+  <esl-d-banner class="footer-banner container" cookie-name="{{banner.cookie or ''}}">
+    <div class="alert alert-info esl-animate-slide up">
+      <button type="button" class="close close-button" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
 
-    <button type="button" class="close close-button" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-</esl-d-banner>
+      <h5>{{ banner.title }}</h5>
+      <div class="markdown-container no-margin small">{% markdown %} {{ banner.content }} {% endmarkdown %}</div>
+    </div>
+  </esl-d-banner>
 {% endif %}

site/views/_includes/navigation/footer-compact.njk

@@ -1,5 +1,4 @@
 <div class="container">
-  <hr class="footer-divider"/>
   <div class="text-center text-gray">
     <div>ESL v{{ env.version }} © {{ env.date.getFullYear() }} Exadel, Inc. <a href="/privacy-policy/" target="_blank">Privacy</a></div>
     <div>