@everymatrix/player-account-gaming-limits-popup 0.0.365 → 0.0.367

package/src/PlayerAccountGamingLimitsPopup.svelte

@@ -1,196 +1,196 @@
-<svelte:options tag={null} />
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { PlayerGamingLimitsPopupTranslations } from './translations';
-
-  export let showpopup:any = '';
-  export let iteminfoamount:string = '';
-  export let lang:string = 'en';
-  export let playercurrency:string = 'USD';
-
-  Object.keys(PlayerGamingLimitsPopupTranslations).forEach((item) => {
-    addNewMessages(item, PlayerGamingLimitsPopupTranslations[item]);
-  });
-
-  let showPopup:boolean = false;
-
-  let userAgent:String = window.navigator.userAgent;
-  let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
-
-  const closeInfoPopup = () => {
-    showPopup = false;
-    window.postMessage({ type: 'ClosePlayerAccountGamingLimitsPopup' }, window.location.href);
-  }
-
-  const messageHandler = (e:any) => {
-    if (e.data && e.data.type == 'ClosePlayerAccountGamingLimitsPopup') {
-      showPopup = false;
-    }
-  }
-
-  const initialLoad = () => {
-    setLocale(lang);
-
-    if(iteminfoamount < 0) {
-      iteminfoamount = '0';
-    }
-    showPopup = showpopup;
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: showpopup && lang && initialLoad();
-</script>
-
-{#if showPopup}
-  <section class="{isMobile ? 'InfoCardPopupMobileModal' : ''}" part="{isMobile ? 'InfoCardPopupMobileModal' : ''}">
-    <div class="InfoCardPopupWrapper {isMobile ? 'InfoCardPopupMobileWrapper' : ''} {iteminfoamount ? 'InfoCardPopupLimitChanged' : ''}" part="InfoCardPopupWrapper {isMobile ? 'InfoCardPopupMobileWrapper' : ''} {iteminfoamount ? 'InfoCardPopupLimitChanged' : ''}">
-      <div class="InfoCardPopupHeader" part="InfoCardPopupHeader">
-        <div class="InfoCardPopupIcon" part="InfoCardPopupIcon">i</div>
-        <div class="InfoCardPopupTitle" part="InfoCardPopupTitle">{$_('popupText.name')}</div>
-        <div class="InfoCardPopupCloseButton" part="InfoCardPopupCloseButton" on:click|preventDefault={closeInfoPopup}>
-          <svg class="w-6 h-6" part="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-        </div>
-      </div>
-      <div class="InfoCardPopupContentArea" part="InfoCardPopupContentArea">
-        {#if iteminfoamount}
-          <p class="InfoCardPopupContent" part="InfoCardPopupContent">{$_('popupText.amountChanged', { values: { amount: iteminfoamount, currency: playercurrency}})}</p>
-        {:else}
-          <p class="InfoCardPopupContent" part="InfoCardPopupContent">{$_('popupText.defaultText')}</p>
-        {/if}
-      </div>
-    </div>
-  </section>
-{/if}
-
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .InfoCardPopupMobileModal {
-    &:after {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      z-index: 101;
-      content: '';
-    }
-  }
-  .InfoCardPopupLimitChanged {
-    background: var(--emfe-w-color-gray-50, #F9F8F8);
-  }
-  .InfoCardPopupWrapper {
-    width: 200px;
-    padding: 20px;
-    color: var(--emfe-w-color-black, #000000);
-    background: var(--emfe-w-color-white, #FFFFFF);
-    box-shadow: 0 4px 12px var(--emfe-w-color-gray-100, #E6E6E6);
-    border-radius: 5px;
-    display: block;
-    position: absolute;
-    top: 32px;
-    left: -84px;
-    z-index: 9;
-    &:before {
-      content: "";
-      position: absolute;
-      top: -7px;
-      left: 104px;
-      border-style: solid;
-      border-width: 0 7px 7px;
-      border-color: var(--emfe-w-color-white, #FFFFFF) transparent;
-      display: block;
-      width: 0;
-      z-index: 1;
-    }
-    &.InfoCardPopupMobileWrapper {
-      width: 70%;
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: 102;
-      .InfoCardPopupTitle {
-        font-size: 18px;
-      }
-      .InfoCardPopupCloseButton {
-        width: 30px;
-      }
-      .InfoCardPopupContent {
-        font-size: 16px;
-      }
-      &:before {
-        content: none;
-      }
-    }
-  }
-  .InfoCardPopupHeader {
-    display: inline-flex;
-    .InfoCardPopupTitle {
-      line-height: 24px;
-      font-size: 16px;
-      font-weight: 400;
-      padding-left: 10px;
-    }
-  }
-  .InfoCardPopupIcon {
-    display: flex;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    background: transparent;
-    border: 1px solid var(--emfe-w-color-black, #000000);
-    align-items: center;
-    justify-content: center;
-    border-radius: 30px;
-  }
-  .InfoCardPopupContent {
-    font-size: 14px;
-    font-weight: 300;
-  }
-  .InfoCardPopupCloseButton {
-    width: 20px;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    cursor: pointer;
-    transition-duration: 0.3s;
-    &:hover {
-      color: var(--emfe-w-color-secondary, #FD2839);
-      fill: var(--emfe-w-color-secondary, #FD2839);
-    }
-  }
-  .ModalCloseBtn {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 32px;
-    right: 32px;
-    padding: 16px;
-    border-radius: 50%;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    cursor: pointer;
-    transition: all 150ms ease-in-out;
-
-    svg {
-      width: 32px;
-      height: 32px;
-      fill: var(--emfe-w-color-black, #000000);
-    }
-  }
-</style>
+<svelte:options tag={null} />
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerGamingLimitsPopupTranslations } from './translations';
+
+  export let showpopup:any = '';
+  export let iteminfoamount:string = '';
+  export let lang:string = 'en';
+  export let playercurrency:string = 'USD';
+
+  Object.keys(PlayerGamingLimitsPopupTranslations).forEach((item) => {
+    addNewMessages(item, PlayerGamingLimitsPopupTranslations[item]);
+  });
+
+  let showPopup:boolean = false;
+
+  let userAgent:String = window.navigator.userAgent;
+  let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
+
+  const closeInfoPopup = () => {
+    showPopup = false;
+    window.postMessage({ type: 'ClosePlayerAccountGamingLimitsPopup' }, window.location.href);
+  }
+
+  const messageHandler = (e:any) => {
+    if (e.data && e.data.type == 'ClosePlayerAccountGamingLimitsPopup') {
+      showPopup = false;
+    }
+  }
+
+  const initialLoad = () => {
+    setLocale(lang);
+
+    if(iteminfoamount < 0) {
+      iteminfoamount = '0';
+    }
+    showPopup = showpopup;
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: showpopup && lang && initialLoad();
+</script>
+
+{#if showPopup}
+  <section class="{isMobile ? 'InfoCardPopupMobileModal' : ''}" part="{isMobile ? 'InfoCardPopupMobileModal' : ''}">
+    <div class="InfoCardPopupWrapper {isMobile ? 'InfoCardPopupMobileWrapper' : ''} {iteminfoamount ? 'InfoCardPopupLimitChanged' : ''}" part="InfoCardPopupWrapper {isMobile ? 'InfoCardPopupMobileWrapper' : ''} {iteminfoamount ? 'InfoCardPopupLimitChanged' : ''}">
+      <div class="InfoCardPopupHeader" part="InfoCardPopupHeader">
+        <div class="InfoCardPopupIcon" part="InfoCardPopupIcon">i</div>
+        <div class="InfoCardPopupTitle" part="InfoCardPopupTitle">{$_('popupText.name')}</div>
+        <div class="InfoCardPopupCloseButton" part="InfoCardPopupCloseButton" on:click|preventDefault={closeInfoPopup}>
+          <svg class="w-6 h-6" part="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+        </div>
+      </div>
+      <div class="InfoCardPopupContentArea" part="InfoCardPopupContentArea">
+        {#if iteminfoamount}
+          <p class="InfoCardPopupContent" part="InfoCardPopupContent">{$_('popupText.amountChanged', { values: { amount: iteminfoamount, currency: playercurrency}})}</p>
+        {:else}
+          <p class="InfoCardPopupContent" part="InfoCardPopupContent">{$_('popupText.defaultText')}</p>
+        {/if}
+      </div>
+    </div>
+  </section>
+{/if}
+
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .InfoCardPopupMobileModal {
+    &:after {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 101;
+      content: '';
+    }
+  }
+  .InfoCardPopupLimitChanged {
+    background: var(--emfe-w-color-gray-50, #F9F8F8);
+  }
+  .InfoCardPopupWrapper {
+    width: 200px;
+    padding: 20px;
+    color: var(--emfe-w-color-black, #000000);
+    background: var(--emfe-w-color-white, #FFFFFF);
+    box-shadow: 0 4px 12px var(--emfe-w-color-gray-100, #E6E6E6);
+    border-radius: 5px;
+    display: block;
+    position: absolute;
+    top: 32px;
+    left: -84px;
+    z-index: 9;
+    &:before {
+      content: "";
+      position: absolute;
+      top: -7px;
+      left: 104px;
+      border-style: solid;
+      border-width: 0 7px 7px;
+      border-color: var(--emfe-w-color-white, #FFFFFF) transparent;
+      display: block;
+      width: 0;
+      z-index: 1;
+    }
+    &.InfoCardPopupMobileWrapper {
+      width: 70%;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 102;
+      .InfoCardPopupTitle {
+        font-size: 18px;
+      }
+      .InfoCardPopupCloseButton {
+        width: 30px;
+      }
+      .InfoCardPopupContent {
+        font-size: 16px;
+      }
+      &:before {
+        content: none;
+      }
+    }
+  }
+  .InfoCardPopupHeader {
+    display: inline-flex;
+    .InfoCardPopupTitle {
+      line-height: 24px;
+      font-size: 16px;
+      font-weight: 400;
+      padding-left: 10px;
+    }
+  }
+  .InfoCardPopupIcon {
+    display: flex;
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border: 1px solid var(--emfe-w-color-black, #000000);
+    align-items: center;
+    justify-content: center;
+    border-radius: 30px;
+  }
+  .InfoCardPopupContent {
+    font-size: 14px;
+    font-weight: 300;
+  }
+  .InfoCardPopupCloseButton {
+    width: 20px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+    transition-duration: 0.3s;
+    &:hover {
+      color: var(--emfe-w-color-secondary, #FD2839);
+      fill: var(--emfe-w-color-secondary, #FD2839);
+    }
+  }
+  .ModalCloseBtn {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 32px;
+    right: 32px;
+    padding: 16px;
+    border-radius: 50%;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    cursor: pointer;
+    transition: all 150ms ease-in-out;
+
+    svg {
+      width: 32px;
+      height: 32px;
+      fill: var(--emfe-w-color-black, #000000);
+    }
+  }
+</style>

package/src/i18n.js

@@ -1,27 +1,27 @@
-import {
-  dictionary,
-  locale,
-  addMessages,
-  _
-} from 'svelte-i18n';
-
-function setupI18n({ withLocale: _locale, translations }) {
-  locale.subscribe((data) => {
-    if (data == null) {
-      dictionary.set(translations);
-      locale.set(_locale);
-    }
-  }); // maybe we will need this to make sure that the i18n is set up only once
-  /*dictionary.set(translations);
-  locale.set(_locale);*/
-}
-
-function addNewMessages(lang, dict) {
-  addMessages(lang, dict);
-}
-
-function setLocale(_locale) {
-  locale.set(_locale);
-}
-
-export { _, setupI18n, addNewMessages, setLocale };
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts

@@ -1,4 +1,4 @@
-import PlayerAccountGamingLimitsPopup from './PlayerAccountGamingLimitsPopup.svelte';
-
-!customElements.get('player-account-gaming-limits-popup') && customElements.define('player-account-gaming-limits-popup', PlayerAccountGamingLimitsPopup);
-export default PlayerAccountGamingLimitsPopup;
+import PlayerAccountGamingLimitsPopup from './PlayerAccountGamingLimitsPopup.svelte';
+
+!customElements.get('player-account-gaming-limits-popup') && customElements.define('player-account-gaming-limits-popup', PlayerAccountGamingLimitsPopup);
+export default PlayerAccountGamingLimitsPopup;

package/src/translations.js

@@ -1,44 +1,44 @@
-export const PlayerGamingLimitsPopupTranslations = {
-  en: {
-    popupText: {
-      name: `Info`,
-      amountChanged: `Your limit has been changed or increased: {amount} {currency}. You will have to wait for the expiration date for your new limit to take effect:`,
-      defaultText: `When you set a game limit, it takes effect from the moment you activate it and lasts until the end of the selected period. Therefore, if you set a daily limit at 14.00, the 24-hour period that counts is from its activation until 00:00 GMT. The limit is then valid for 24 days. you can lower a limit at any time with immediate effect. however, increasing or removing a limit will not apply until the current limit expires.`
-    }
-  },
-  zh: {
-    popupText: {
-      name: `信息`,
-      amountChanged: `您的限額已更改或增加：{amount} {currency}。 您必須等待到期日期才能使新限制生效：`,
-      defaultText: `當您設置遊戲限制時，它從您激活它的那一刻起生效，並持續到所選時間段結束。 因此，如果您將每日限制設置為 14.00，則計算的 24 小時周期是從其激活到格林威治標準時間 00:00。 然後限制每 24 小時有效。 您可以隨時降低限制並立即生效。 但是，提高或取消限制將僅在當前限製到期時適用。`
-    }
-  },
-  fr: {
-    popupText: {
-      name: `Info`,
-      amountChanged: `Votre limit a été modifiée ou augmentée: {amount} {currency}. Vous devez attendre la date d'expiration pour que votre nouvelle limite prenne effet:`,
-      defaultText: `"Lorsque vous définissez une limite de jeu, elle prend effet à partir du moment ou vous l'activez et dure jusqu'à la fin de la période séléctionnée. Par conséquent, si vous fixez une limite quotidienne à 14.00, la période de 24 heures qui compte est celle allant de son activation jusqu'à 00:00 GMT.la limite est alors valable 24 jours. vous pouvez abaisser une limite à tout moment avec un effet immédiat.  cependant, l'augmentation ou la suppression d'une limite ne s'appliquera que lorsque la limite actuelle expira.`
-    }
-  },
-  ro: {
-    popupText: {
-      name: `Informații`,
-      amountChanged: `Limita ta a fost schimbată sau a crescut: {amount} {currency}. Trebuie să aștepți până la data de expirare pentru ca noua ta limită să intre în vigoare.`,
-      defaultText: `Când stabilești o limită de joc, efectele se produc începând din momentul în care o activezi și durează până la finalul perioadei selectate. Așadar, dacă stabilești o limită zilnică la 14:00, perioada de 24 de ore este de la activare până la 00:00 GMT. Ulterior, limita va fi valabilă la fiecare 24 de ore. Poți micșora limita oricând, cu efect imediat. Totuși, majorarea sau eliminarea unei limite va fi aplicată în momentul în care limita curentă expiră. `
-    }
-  },
-  es: {
-    popupText: {
-      name: `Información`,
-      amountChanged: `Su límite ha cambiado o aumentado: {cantidad} {moneda}. Tendrás que esperar a la fecha de vencimiento para que tu nuevo límite entre en vigencia:`,
-      defaultText: `Cuando establece un límite de juego, entra en vigencia desde el momento en que lo activa y dura hasta el final del período seleccionado. Por tanto, si estableces un límite diario a las 14:00, el periodo de 24 horas que cuenta es desde su activación hasta las 00:00 GMT. Entonces el límite es válido cada 24 horas. Puede reducir un límite en cualquier momento con efecto inmediato. Sin embargo, el aumento o la eliminación de un límite solo se aplicará cuando expire el límite actual.`
-    }
-  },
-  pt: {
-    popupText: {
-      name: `Informação`,
-      amountChanged: `Seu limite foi alterado ou aumentado: {amount} {currency}. Você terá que aguardar a data de expiração para que seu novo limite entre em vigor:`,
-      defaultText: `Quando você define um limite de jogo, ele entra em vigor a partir do momento em que você o ativa e dura até o final do período selecionado. Portanto, se você definir um limite diário às 14h00, o período de 24 horas que conta é desde sua ativação até às 00h00 GMT. Então o limite é válido a cada 24 horas. Você pode diminuir um limite a qualquer momento com efeito imediato. No entanto, aumentar ou remover um limite será aplicado somente quando o limite atual expirar.`
-    }
-  },
-};
+export const PlayerGamingLimitsPopupTranslations = {
+  en: {
+    popupText: {
+      name: `Info`,
+      amountChanged: `Your limit has been changed or increased: {amount} {currency}. You will have to wait for the expiration date for your new limit to take effect:`,
+      defaultText: `When you set a game limit, it takes effect from the moment you activate it and lasts until the end of the selected period. Therefore, if you set a daily limit at 14.00, the 24-hour period that counts is from its activation until 00:00 GMT. The limit is then valid for 24 days. you can lower a limit at any time with immediate effect. however, increasing or removing a limit will not apply until the current limit expires.`
+    }
+  },
+  zh: {
+    popupText: {
+      name: `信息`,
+      amountChanged: `您的限額已更改或增加：{amount} {currency}。 您必須等待到期日期才能使新限制生效：`,
+      defaultText: `當您設置遊戲限制時，它從您激活它的那一刻起生效，並持續到所選時間段結束。 因此，如果您將每日限制設置為 14.00，則計算的 24 小時周期是從其激活到格林威治標準時間 00:00。 然後限制每 24 小時有效。 您可以隨時降低限制並立即生效。 但是，提高或取消限制將僅在當前限製到期時適用。`
+    }
+  },
+  fr: {
+    popupText: {
+      name: `Info`,
+      amountChanged: `Votre limit a été modifiée ou augmentée: {amount} {currency}. Vous devez attendre la date d'expiration pour que votre nouvelle limite prenne effet:`,
+      defaultText: `"Lorsque vous définissez une limite de jeu, elle prend effet à partir du moment ou vous l'activez et dure jusqu'à la fin de la période séléctionnée. Par conséquent, si vous fixez une limite quotidienne à 14.00, la période de 24 heures qui compte est celle allant de son activation jusqu'à 00:00 GMT.la limite est alors valable 24 jours. vous pouvez abaisser une limite à tout moment avec un effet immédiat.  cependant, l'augmentation ou la suppression d'une limite ne s'appliquera que lorsque la limite actuelle expira.`
+    }
+  },
+  ro: {
+    popupText: {
+      name: `Informații`,
+      amountChanged: `Limita ta a fost schimbată sau a crescut: {amount} {currency}. Trebuie să aștepți până la data de expirare pentru ca noua ta limită să intre în vigoare.`,
+      defaultText: `Când stabilești o limită de joc, efectele se produc începând din momentul în care o activezi și durează până la finalul perioadei selectate. Așadar, dacă stabilești o limită zilnică la 14:00, perioada de 24 de ore este de la activare până la 00:00 GMT. Ulterior, limita va fi valabilă la fiecare 24 de ore. Poți micșora limita oricând, cu efect imediat. Totuși, majorarea sau eliminarea unei limite va fi aplicată în momentul în care limita curentă expiră. `
+    }
+  },
+  es: {
+    popupText: {
+      name: `Información`,
+      amountChanged: `Su límite ha cambiado o aumentado: {cantidad} {moneda}. Tendrás que esperar a la fecha de vencimiento para que tu nuevo límite entre en vigencia:`,
+      defaultText: `Cuando establece un límite de juego, entra en vigencia desde el momento en que lo activa y dura hasta el final del período seleccionado. Por tanto, si estableces un límite diario a las 14:00, el periodo de 24 horas que cuenta es desde su activación hasta las 00:00 GMT. Entonces el límite es válido cada 24 horas. Puede reducir un límite en cualquier momento con efecto inmediato. Sin embargo, el aumento o la eliminación de un límite solo se aplicará cuando expire el límite actual.`
+    }
+  },
+  pt: {
+    popupText: {
+      name: `Informação`,
+      amountChanged: `Seu limite foi alterado ou aumentado: {amount} {currency}. Você terá que aguardar a data de expiração para que seu novo limite entre em vigor:`,
+      defaultText: `Quando você define um limite de jogo, ele entra em vigor a partir do momento em que você o ativa e dura até o final do período selecionado. Portanto, se você definir um limite diário às 14h00, o período de 24 horas que conta é desde sua ativação até às 00h00 GMT. Então o limite é válido a cada 24 horas. Você pode diminuir um limite a qualquer momento com efeito imediato. No entanto, aumentar ou remover um limite será aplicado somente quando o limite atual expirar.`
+    }
+  },
+};

package/stories/PlayerAccountGamingLimitsPopup.stories.js

@@ -1,13 +1,13 @@
-import { html } from 'lit-element';
-
-import PlayerAccountGamingLimitsPopup from '../src/PlayerAccountGamingLimitsPopup';
-
-// This default export determines where your story goes in the story list
-export default {
-  title: 'PlayerAccountGamingLimitsPopup',
-};
-
-// 👇 We create a “template” of how args map to rendering
-const PlayerAccountGamingLimitsPopup = ({ aProperty }) => html`<player-account-gaming-limits-popup></player-account-gaming-limits-popup>`;
-
-export const FirstStory = PlayerAccountGamingLimitsPopup.bind({});
+import { html } from 'lit-element';
+
+import PlayerAccountGamingLimitsPopup from '../src/PlayerAccountGamingLimitsPopup';
+
+// This default export determines where your story goes in the story list
+export default {
+  title: 'PlayerAccountGamingLimitsPopup',
+};
+
+// 👇 We create a “template” of how args map to rendering
+const PlayerAccountGamingLimitsPopup = ({ aProperty }) => html`<player-account-gaming-limits-popup></player-account-gaming-limits-popup>`;
+
+export const FirstStory = PlayerAccountGamingLimitsPopup.bind({});

package/tsconfig.json

@@ -1,6 +1,6 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}