@supersoniks/concorde 2.0.7 → 3.0.0

package/src/core/components/ui/modal/modal-title.ts

@@ -0,0 +1,22 @@
+import {html, LitElement, css} from "lit";
+import {customElement} from "lit/decorators.js";
+const tagName = "sonic-modal-title";
+
+@customElement(tagName)
+export class ModalTitle extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-weight: bold;
+        font-size: 1.5rem;
+        display: block;
+        line-height: var(--sc-headings-line-height);
+        font-family: var(--sc-headings-font-family);
+      }
+    `,
+  ];
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/core/components/ui/modal/modal.md

@@ -0,0 +1,123 @@
+## Modal
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('modalExample').show()">
+      Simple modal
+    </sonic-button>
+    <sonic-modal id="modalExample">
+      <sonic-modal-close></sonic-modal-close>
+      <sonic-modal-title
+        >Lorem ipsum dolor sit amet <sonic-badge type="danger" size="sm">+33</sonic-badge></sonic-modal-title
+      >
+      <sonic-modal-subtitle>Donec sed vestibulum augue.</sonic-modal-subtitle>
+      <sonic-modal-content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+      </sonic-modal-content>
+      <sonic-modal-actions formDataProvider="youpla">
+        <sonic-button FormCheckable hideModal="false" minWidth="8rem" value="true" name="click">
+          Click don't close
+        </sonic-button>
+        <sonic-button minWidth="8rem" type="success">Confirm</sonic-button>
+      </sonic-modal-actions>
+    </sonic-modal>
+  </template>
+</sonic-code>
+
+
+## Long text
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('modalText').show()"> Long text </sonic-button>
+    <sonic-modal align="left" id="modalText">
+      <sonic-modal-close></sonic-modal-close>
+      <sonic-modal-title>Infos et tarifs </sonic-modal-title>
+      <sonic-modal-content>
+        <div class="prose">
+          <p>
+            <strong>Horaires d’ouverture </strong><br />
+            Du mercredi au samedi de 13h30 à 19h et le dimanche de 13h30 à 18h<br />
+            + horaires spécifiques pour événements ou festivals&nbsp;
+          </p>
+          <p>
+            <strong> Billetterie&nbsp;<br /></strong>
+            La participation à certains événements et activités est soumise à un système de billetterie avec achats ou
+            réservations disponibles en ligne ou au guichet.&nbsp;&nbsp;<strong><br /></strong>
+          </p>
+          <p>
+            Les tarifs (Tarif plein / Tarif Réduit / Tarif Spécifique) sont indiqués pour chaque événement et peuvent
+            varier selon la nature de l’événement. Les tarifs sont identiques en ligne et au guichet. Il est néanmoins
+            conseillé de réserver les billets en avance pour s’assurer une place.
+          </p>
+          <p>
+            L’accès au Skatepark, Fablab et Halle C sont soumis à adhésions. Les adhésions sont gratuites et
+            nominatives. Elle donnent accès aux espaces dans la limite des places disponibles.
+          </p>
+          <p>
+            <strong>+ d’infos <br /></strong>billetterie@laconditionpublique.com <br />+33 (0)328334833&nbsp;
+          </p>
+          <br />
+          <p>
+            <strong>Accès <br /></strong>14, place Faidherbe <br />59100 Roubaix <br />Métro / Tram : Arrêt
+            Eurotéléport, Ligne 2 <br />Bus / V’Lille : Arrêt Condition Publique&nbsp;
+          </p>
+          <p>
+            Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
+            billetterie@laconditionpublique.com
+          </p>
+        </div>
+      </sonic-modal-content>
+    </sonic-modal>
+  </template>
+</sonic-code>
+
+## Force action
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('force').show()"> Action obligatoire </sonic-button>
+    <sonic-modal forceAction id="force">
+      <sonic-modal-title>Voulez-vous accepter les cookies ? </sonic-modal-title>
+      <sonic-modal-content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+      </sonic-modal-content>
+      <sonic-modal-actions formDataProvider="youpla">
+        <sonic-button> Nope </sonic-button>
+        <sonic-button minWidth="8rem" type="success">Carrément</sonic-button>
+      </sonic-modal-actions>
+    </sonic-modal>
+    </sonic-modal>
+  </template>
+</sonic-code>
+
+## Custom dimensions
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('CustomWidth').show()"> Custom width </sonic-button>
+    <sonic-modal maxHeight="50vh" maxWidth="90vw" width="100%" height="100%" id="CustomWidth">
+      <sonic-modal-close></sonic-modal-close>
+      <sonic-image
+        cover
+        objectPosition="center 20%"
+        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </sonic-modal>
+  </template>
+</sonic-code>
+
+## Fullscreen
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('Fullscreen').show()"> Fullscreen </sonic-button>
+    <sonic-modal fullscreen id="Fullscreen">
+      <sonic-modal-close></sonic-modal-close>
+      <sonic-image
+        cover
+        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </sonic-modal>
+  </template>
+</sonic-code>

package/src/core/components/ui/modal/modal.stories.ts

@@ -0,0 +1,140 @@
+import "./modal";
+import "./modal-actions";
+import "./modal-close";
+import "./modal-content";
+import "./modal-subtitle";
+import "./modal-title";
+import "../button/button";
+import { html } from "lit";
+
+// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
+export default {
+  component: "sonic-modal",
+  title: "core/components/ui/Modal",
+  argTypes: {
+    styles: { table: { category: "Internals or others" } },
+  },
+};
+
+const Template: any = ({}: any) => {
+  return html`
+    <sonic-button
+      onclick="
+       document.getElementById('modalExample').show()
+      "
+    >
+      Simple modal
+    </sonic-button>
+
+    <sonic-modal id="modalExample">
+      <sonic-modal-close></sonic-modal-close>
+      <sonic-modal-title
+        >Lorem ipsum dolor sit amet <sonic-badge type="danger" size="sm">+33</sonic-badge></sonic-modal-title
+      >
+      <sonic-modal-subtitle>Donec sed vestibulum augue.</sonic-modal-subtitle>
+      <sonic-modal-content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+      </sonic-modal-content>
+      <sonic-modal-actions formDataProvider="youpla">
+        <sonic-button FormCheckable hideModal="false" minWidth="8rem" value="true" name="click">
+          Click don't close
+        </sonic-button>
+        <sonic-button minWidth="8rem" type="success">Confirmer</sonic-button>
+      </sonic-modal-actions>
+    </sonic-modal>
+  `;
+};
+
+export const Example = Template.bind({});
+
+const modalLongSize: any = () => {
+  return html`
+    <sonic-button onclick="document.getElementById('modalText').show()"> Long text </sonic-button>
+    <sonic-modal align="left" id="modalText">
+      <sonic-modal-close></sonic-modal-close>
+      <sonic-modal-title>Infos et tarifs </sonic-modal-title>
+      <sonic-modal-content>
+        <div class="prose">
+          <p>
+            <strong>Horaires d’ouverture </strong><br />
+            Du mercredi au samedi de 13h30 à 19h et le dimanche de 13h30 à 18h<br />
+            + horaires spécifiques pour événements ou festivals&nbsp;
+          </p>
+          <p>
+            <strong> Billetterie&nbsp;<br /></strong>
+            La participation à certains événements et activités est soumise à un système de billetterie avec achats ou
+            réservations disponibles en ligne ou au guichet.&nbsp;&nbsp;<strong><br /></strong>
+          </p>
+          <p>
+            Les tarifs (Tarif plein / Tarif Réduit / Tarif Spécifique) sont indiqués pour chaque événement et peuvent
+            varier selon la nature de l’événement. Les tarifs sont identiques en ligne et au guichet. Il est néanmoins
+            conseillé de réserver les billets en avance pour s’assurer une place.
+          </p>
+          <p>
+            L’accès au Skatepark, Fablab et Halle C sont soumis à adhésions. Les adhésions sont gratuites et
+            nominatives. Elle donnent accès aux espaces dans la limite des places disponibles.
+          </p>
+          <p>
+            <strong>+ d’infos <br /></strong>billetterie@laconditionpublique.com <br />+33 (0)328334833&nbsp;
+          </p>
+          <br />
+          <p>
+            <strong>Accès <br /></strong>14, place Faidherbe <br />59100 Roubaix <br />Métro / Tram : Arrêt
+            Eurotéléport, Ligne 2 <br />Bus / V’Lille : Arrêt Condition Publique&nbsp;
+          </p>
+          <p>
+            Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
+            billetterie@laconditionpublique.com
+          </p>
+        </div>
+      </sonic-modal-content>
+    </sonic-modal>
+  `;
+};
+export const LongTextScrollable = modalLongSize.bind({});
+
+const modalForceAction: any = () => {
+  return html`
+    <sonic-button onclick="document.getElementById('force').show()"> Action obligatoire </sonic-button>
+    <sonic-modal .hideOnOverlayClick=${false} .hideOnEscape=${false} id="force">
+      <sonic-modal-title>Voulez-vous accepter les cookies ? </sonic-modal-title>
+      <sonic-modal-content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+      </sonic-modal-content>
+      <sonic-modal-actions formDataProvider="youpla">
+        <sonic-button> Nope </sonic-button>
+        <sonic-button minWidth="8rem" type="success">Carrément</sonic-button>
+      </sonic-modal-actions>
+    </sonic-modal>
+  `;
+};
+export const ForceAction = modalForceAction.bind({});
+
+const customWidthModal: any = () => {
+  return html`
+    <sonic-button onclick="document.getElementById('CustomWidth').show()"> Custom width </sonic-button>
+    <sonic-modal maxHeight="50vh" maxWidth="90vw" width="100%" height="100%" id="CustomWidth">
+      <sonic-modal-close></sonic-modal-close>
+      <sonic-image
+        cover
+        objectPosition="center 20%"
+        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </sonic-modal>
+  `;
+};
+export const customWidth = customWidthModal.bind({});
+
+const modalFullscreen: any = () => {
+  return html`
+    <sonic-button onclick="document.getElementById('Fullscreen').show()"> Fullscreen </sonic-button>
+    <sonic-modal fullscreen id="Fullscreen">
+      <sonic-modal-close></sonic-modal-close>
+      <sonic-image
+        cover
+        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </sonic-modal>
+  `;
+};
+export const Fullscreen = modalFullscreen.bind({});

package/src/core/components/ui/modal/modal.ts

@@ -0,0 +1,386 @@
+import {animate, fadeIn, fadeOut} from "@lit-labs/motion";
+import {customScroll} from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import {css, html, LitElement, nothing, PropertyValues} from "lit";
+import {customElement, property, query, queryAssignedElements} from "lit/decorators.js";
+import {styleMap} from "lit/directives/style-map.js";
+
+import "@supersoniks/concorde/core/components/ui/modal/modal-actions";
+import "@supersoniks/concorde/core/components/ui/modal/modal-close";
+import "@supersoniks/concorde/core/components/ui/modal/modal-content";
+import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
+import "@supersoniks/concorde/core/components/ui/modal/modal-title";
+import {PublisherManager} from "@supersoniks/concorde/utils";
+import {ConcordeWindow} from "@supersoniks/concorde/core/_types/types";
+import {Theme} from "@supersoniks/concorde/core/components/ui/theme/theme";
+import {PrimitiveType} from "@supersoniks/concorde/core/_types/types";
+import {DirectiveResult} from "lit/directive.js";
+
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+
+declare const window: ConcordeWindow;
+declare type ModalCreateOptions = {
+  title?: string | DirectiveResult;
+  subtitle?: string | DirectiveResult;
+  content?: string | DirectiveResult;
+  actions?: string | DirectiveResult;
+  zIndex?: string;
+  paddingX?: string;
+  paddingY?: string;
+  width?: string;
+  maxWidth?: string;
+  height?: string;
+  maxHeight?: string;
+  removeOnHide?: boolean;
+  forceAction?: boolean;
+  removeHashOnHide?: boolean;
+};
+const tagName = "sonic-modal";
+
+@customElement(tagName)
+export class Modal extends Subscriber(LitElement) {
+  static styles = [
+    customScroll,
+    css`
+      :host {
+        --sc-modal-py: 2.5rem;
+        --sc-modal-px: 1.5rem;
+        --sc-modal-max-w: min(100vw, 40rem);
+        --sc-modal-max-h: 85vh;
+        --sc-modal-rounded: var(--sc-rounded-lg);
+        --sc-modal-z-index: 990;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      .modal-wrapper {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        z-index: calc(var(--sc-modal-z-index) + 1);
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        display: flex;
+        pointer-events: none;
+      }
+
+      .modal-content {
+        display: flex;
+        flex-direction: column;
+        min-height: 10rem;
+        line-height: 1.25;
+      }
+
+      .modal {
+        background: var(--sc-base);
+        color: var(--sc-base-content);
+        width: 100%;
+        box-shadow: var(--sc-shadow-lg);
+        border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0;
+        pointer-events: auto;
+        /*overflow: hidden;*/
+        transform: translateZ(0);
+      }
+
+      .overlay {
+        background: var(--sc-modal-overlay-bg, var(--sc-base-200));
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: var(--sc-modal-z-index);
+        opacity: 0.8;
+        position: fixed;
+      }
+
+      ::slotted(sonic-modal-title) {
+        margin-bottom: 1.25rem;
+      }
+      :host([align="left"]) ::slotted(sonic-modal-title) {
+        padding-right: 1em;
+      }
+
+      ::slotted(sonic-modal-subtitle) {
+        margin-top: -0.9rem;
+        margin-bottom: 1.25rem;
+      }
+
+      @media (max-width: 767.5px) {
+        .modal-wrapper,
+        .modal {
+          max-width: none !important;
+          width: 100% !important;
+          border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0 !important;
+        }
+      }
+
+      @media (min-width: 768px) {
+        .modal-wrapper {
+          top: 50%;
+          left: 50%;
+          bottom: auto;
+          right: auto;
+          transform: translateX(-50%) translateY(-50%);
+        }
+
+        .modal {
+          top: 50%;
+          bottom: auto;
+          right: auto;
+          border-radius: var(--sc-modal-rounded);
+        }
+      }
+
+      :host([align="left"]) .modal-content {
+        text-align: left;
+        align-items: flex-start;
+      }
+
+      :host([align="center"]) .modal-content {
+        text-align: center;
+        align-items: center;
+      }
+
+      :host([align="right"]) .modal-content {
+        text-align: right;
+        align-items: flex-end;
+      }
+
+      /* Border radius */
+      :host([rounded="none"]) modal {
+        --sc-img-radius: 0 !important;
+      }
+    `,
+  ];
+  static modals: Array<Modal> = [];
+
+  @property({type: Boolean}) forceAction = false;
+  @property({type: Boolean}) removeOnHide = false;
+  @property({type: Boolean}) removeHashOnHide = false;
+  @property({type: String, reflect: true}) align: "center" | "right" | "left" = "left";
+
+  @property({type: String}) padding = "var(--sc-modal-py) var(--sc-modal-px)";
+  @property({type: String}) maxWidth = "var(--sc-modal-max-w) ";
+  @property({type: String}) maxHeight = "var(--sc-modal-max-h) ";
+  @property({type: String}) width = "100%";
+  @property({type: String}) height = "auto";
+  @property({type: String}) zIndex = "var(--sc-modal-z-index)";
+  @property({type: Object}) options?: ModalCreateOptions;
+  @property({type: Boolean, reflect: true}) fullScreen = false;
+  @property({type: Boolean, reflect: true}) visible = false;
+
+  @query(".modal-wrapper") modalWrapper!: HTMLDivElement;
+  @query(".modal") modalElement!: HTMLDivElement;
+
+  @queryAssignedElements({selector: "sonic-modal-close"})
+  closeBtn!: Array<HTMLElement>;
+  static create(options: ModalCreateOptions): Modal {
+    const modal = document.createElement(tagName) as Modal;
+    // modal styles
+    modal.options = options;
+
+    if (options.removeHashOnHide === true) modal.setAttribute("removeHashOnHide", "true");
+    if (options.removeOnHide === true) modal.setAttribute("removeOnHide", "true");
+
+    if (options.maxWidth) modal.maxWidth = options?.maxWidth;
+    if (options.width) modal.width = options?.width;
+    if (options.maxHeight) modal.maxHeight = options?.maxHeight;
+    if (options.height) modal.height = options?.height;
+    if (options.forceAction) modal.forceAction = true;
+
+    if (options.paddingX) modal.style.setProperty("--sc-modal-px", options?.paddingX);
+    if (options.paddingY) modal.style.setProperty("--sc-modal-py", options?.paddingY);
+    if (options.zIndex) modal.style.setProperty("--sc-modal-z-index", options?.zIndex);
+
+    const container = Theme.getPopContainer();
+    container.appendChild(modal);
+    modal.show();
+    return modal;
+  }
+
+  connectedCallback(): void {
+    Modal.modals.push(this);
+    super.connectedCallback();
+    this.handleFullsceen();
+  }
+  disconnectedCallback(): void {
+    Modal.modals.splice(Modal.modals.indexOf(this), 1);
+    super.disconnectedCallback();
+  }
+
+  updated(): void {
+    const currentModal = this as Modal;
+
+    document.addEventListener("keydown", this.handleEscape);
+
+    currentModal.closeBtn.forEach((closeBtn) => {
+      closeBtn.addEventListener(
+        "click",
+        function () {
+          currentModal.hide();
+        },
+        {once: true}
+      );
+    });
+  }
+
+  willUpdate(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has("fullScreen")) {
+      this.handleFullsceen();
+    }
+    super.willUpdate(_changedProperties);
+  }
+
+  render() {
+    if (this.visible == false) return nothing;
+
+    const modalStyles = {
+      padding: this.padding,
+      maxWidth: this.maxWidth,
+      maxHeight: this.maxHeight,
+      width: this.width,
+      height: this.height,
+      zIndex: this.zIndex,
+      borderRadius: this.fullScreen ? "0" : "var(--sc-modal-rounded)",
+    };
+
+    const modalWrapperStyles = {
+      maxWidth: this.maxWidth,
+      maxHeight: this.maxHeight,
+      width: this.width,
+      height: this.height,
+      borderRadius: this.fullScreen ? "0" : "var(--sc-modal-rounded)",
+    };
+
+    return html`<div
+        class="modal-wrapper"
+        style=${styleMap(modalWrapperStyles)}
+        ${animate({
+          out: fadeOut,
+        })}
+        tabindex="0"
+      >
+        <div
+          part="modal"
+          class="modal custom-scroll"
+          style=${styleMap(modalStyles)}
+          ${animate({
+            keyframeOptions: {
+              duration: 400,
+              easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
+            },
+            in: [{transform: "translateY(25%) scale(1)", boxShadow: "0 0 0 rgba(0,0,0,0)", opacity: 0}],
+            out: [{transform: "translateY(20%) scale(1)", boxShadow: "0 0 0 rgba(0,0,0,0)", opacity: 0}],
+          })}
+        >
+          <div class="modal-content">
+            ${!this.options?.forceAction ? html`<sonic-modal-close></sonic-modal-close>` : nothing} ${this.modalFragment("title")}
+            ${this.modalFragment("subtitle")} ${this.modalFragment("content")} ${this.modalFragment("actions")}
+
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <div
+        class="overlay"
+        @click="${!this.forceAction ? this.hide : null}"
+        ${animate({
+          keyframeOptions: {
+            duration: 500,
+          },
+          in: fadeIn,
+          out: [{opacity: 0, pointerEvents: "none"}],
+        })}
+      ></div>`;
+  }
+
+  modalFragment(optionKey: keyof ModalCreateOptions) {
+    const optionValue: Object | PrimitiveType = this.options?.[optionKey];
+    if (!optionValue) return nothing;
+    let output;
+
+    // si object c'est une template Result
+    //@todo, faire mieux...
+    if (optionValue instanceof Object) {
+      output = optionValue;
+    } else {
+      output = unsafeHTML(optionValue as string);
+    }
+
+    switch (optionKey) {
+      case "title":
+        return html`<sonic-modal-title>${output}</sonic-modal-title>`;
+      case "subtitle":
+        return html`<sonic-modal-subtitle>${output}</sonic-modal-subtitle>`;
+      case "content":
+        return html`<sonic-modal-content>${output}</sonic-modal-content>`;
+      case "actions":
+        return html`<sonic-modal-actions>${output}</sonic-modal-actions>`;
+      default:
+        return nothing;
+    }
+  }
+
+  show(): void {
+    this.visible = true;
+    this.modalElement?.setAttribute("tabindex", "0");
+    this.modalElement?.focus();
+    this.dispatchEvent(new CustomEvent("show"));
+  }
+
+  hide(): void {
+    this.visible = false;
+    this.modalElement?.setAttribute("tabindex", "-1");
+    this.dispatchEvent(new CustomEvent("hide"));
+    if (this.hasAttribute("resetDataProviderOnHide")) {
+      PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set({});
+    }
+    if (this.removeOnHide) {
+      this.remove();
+    }
+    setTimeout(() => {
+      this.dispatchEvent(new CustomEvent("hidden"));
+      if (this.removeHashOnHide) {
+        window.history.replaceState({}, "", window.location.pathname);
+      }
+    }, 480);
+  }
+
+  dispose() {
+    this.hide();
+    this.remove();
+  }
+  static disposeAll() {
+    Modal.modals.forEach((modal) => {
+      modal.dispose();
+    });
+  }
+
+  handleEscape(e: KeyboardEvent): void {
+    if (e.key === "Escape") {
+      Modal.modals.forEach((modal: Modal) => {
+        if (!modal.forceAction) {
+          modal.hide();
+        }
+      });
+    }
+  }
+
+  handleFullsceen(): void {
+    // set fullscreen
+    if (this.fullScreen) {
+      this.width = "100%";
+      this.height = "100%";
+      this.maxWidth = "none";
+      this.maxHeight = "none";
+    }
+  }
+}
+
+if (typeof window !== "undefined") {
+  window.SonicModal = Modal;
+}