@icij/murmur-next 4.0.0 → 4.0.3

package/lib/components/DonateForm.vue

@@ -5,14 +5,14 @@ import sortBy from 'lodash/sortBy'
 import forEach from 'lodash/forEach'
 
 import config from '../config'
-import {useI18n} from "vue-i18n";
-import {computed, ref, watch} from "vue";
+import { useI18n } from 'vue-i18n'
+import { computed, ref, watch } from 'vue'
 
 /**
  * A form to encourage donations. We usually put this form inside a modal
  */
 export default {
-name: 'DonateForm',
+  name: 'DonateForm',
   props: {
     /**
      * Title of the form.
@@ -21,8 +21,8 @@ name: 'DonateForm',
       type: Boolean
     }
   },
-  setup(){
-    const {t, locale, messages} = useI18n()
+  setup() {
+    const { t, locale, messages } = useI18n()
     const amount = ref(10)
     // True if the amount wasn't changed by the user yet
     const amountIsPristine = ref(true)
@@ -42,29 +42,31 @@ name: 'DonateForm',
       }
     })
 
-    const suggestedAmount = ref(messages.value[locale.value]['donate-form']["suggesteddonation"])
-    const listBenefits = ref(messages.value[locale.value]['donate-form']["benefits"]["list"])
-    const ranges = computed(()=> {
-      if(installmentPeriod.value==='onetime'){
+    const suggestedAmount = ref(
+      messages.value[locale.value]['donate-form']['suggesteddonation']
+    )
+    const listBenefits = ref(
+      messages.value[locale.value]['donate-form']['benefits']['list']
+    )
+    const ranges = computed(() => {
+      if (installmentPeriod.value === 'onetime') {
         return labelForChange.value['yearly']
       }
       return labelForChange.value[installmentPeriod.value]
     })
-    const firstRange = computed(()=> {
+    const firstRange = computed(() => {
       const key = keys(ranges.value)[0]
       return ranges.value[key]
     })
-    const changeThe = computed(()=> {
-          // Final label
-          let label = null
-          forEach(sortBy(map(keys(ranges.value), Number)), (amountV) => {
-            label = amount.value >= amountV ? ranges.value[amountV] : label
-          })
-          return label
-        }
-
-    )
-    watch(installmentPeriod,() => {
+    const changeThe = computed(() => {
+      // Final label
+      let label = null
+      forEach(sortBy(map(keys(ranges.value), Number)), (amountV) => {
+        label = amount.value >= amountV ? ranges.value[amountV] : label
+      })
+      return label
+    })
+    watch(installmentPeriod, () => {
       if (!amountIsPristine.value) {
         return
       }
@@ -72,12 +74,14 @@ name: 'DonateForm',
       // Set suggested amount
       amount.value = getSuggestedAmount()
     })
-    watch(()=>amount.value,(v) => {
-          level.value = changeThe.value
+    watch(
+      () => amount.value,
+      (v) => {
+        level.value = changeThe.value
 
-          // Set manual amount
-          return (amount.value = v)
-        }
+        // Set manual amount
+        return (amount.value = v)
+      }
     )
     function getSuggestedAmount() {
       if (!amountIsPristine.value) {
@@ -98,7 +102,7 @@ name: 'DonateForm',
       // Set suggested amount
       amount.value = getSuggestedAmount()
     }
-    function amountIsNotPristine(){
+    function amountIsNotPristine() {
       amountIsPristine.value = false
     }
 
@@ -114,84 +118,96 @@ name: 'DonateForm',
       selectLevel,
       amountIsNotPristine
     }
-
-  },
-
+  }
 }
 </script>
 
 <template>
   <div class="donate-form container-fluid py-2">
-    <h2 v-if="!noTitle" class="donate-form__title text-uppercase fw-bold text-primary h5">
+    <h2
+      v-if="!noTitle"
+      class="donate-form__title text-uppercase fw-bold text-primary h5"
+    >
       {{ t('donate-form.support') }}
     </h2>
     <!-- @slot Description of the form (bellow the title). -->
     <slot name="introduction">
       <!-- eslint-disable vue/no-v-html -->
-      <p class="donate-form__introduction" v-html="t('donate-form.introduction')" />
+      <p
+        class="donate-form__introduction"
+        v-html="t('donate-form.introduction')"
+      />
       <!-- eslint-enable -->
     </slot>
 
     <div class="donate-form__payment mb-4 text-center">
       <form
-          action="//checkout.fundjournalism.org/memberform"
-          method="get"
-          target="_blank"
-          class="donate-form__payment__form bg-light p-4"
+        action="//checkout.fundjournalism.org/memberform"
+        method="get"
+        target="_blank"
+        class="donate-form__payment__form bg-light p-4"
       >
         <div class="donate-form__payment__levels row">
           <div
-              class="col donate-form__payment__level"
-              :class="{ active: level === 'conversation' }"
-              @click="selectLevel('conversation')"
+            class="col donate-form__payment__level"
+            :class="{ active: level === 'conversation' }"
+            @click="selectLevel('conversation')"
           >
-            <h3 class="donate-form__payment__heading text-uppercase fw-bold text-primary h5">
+            <h3
+              class="donate-form__payment__heading text-uppercase fw-bold text-primary h5"
+            >
               {{ t('donate-form.benefits.impacts.conversation.heading') }}
             </h3>
             <div class="Article">
               <div>
                 <!-- eslint-disable vue/no-v-html -->
                 <p
-                    class="donate-form__payment__highlight text-icij fw-bold"
-                    v-html="t('donate-form.benefits.impacts.conversation.highlight')"
+                  class="donate-form__payment__highlight text-icij fw-bold"
+                  v-html="
+                    t('donate-form.benefits.impacts.conversation.highlight')
+                  "
                 />
                 <!-- eslint-enable -->
               </div>
             </div>
           </div>
           <div
-              class="col donate-form__payment__level"
-              :class="{ active: level === 'rules' }"
-              @click="selectLevel('rules')"
+            class="col donate-form__payment__level"
+            :class="{ active: level === 'rules' }"
+            @click="selectLevel('rules')"
           >
-            <h3 class="donate-form__payment__heading text-uppercase fw-bold text-primary h5">
+            <h3
+              class="donate-form__payment__heading text-uppercase fw-bold text-primary h5"
+            >
               {{ t('donate-form.benefits.impacts.rules.heading') }}
             </h3>
             <div class="Article">
               <div>
                 <!-- eslint-disable vue/no-v-html -->
                 <p
-                    class="donate-form__payment__highlight text-icij fw-bold"
-                    v-html="t('donate-form.benefits.impacts.rules.highlight')"
+                  class="donate-form__payment__highlight text-icij fw-bold"
+                  v-html="t('donate-form.benefits.impacts.rules.highlight')"
                 />
                 <!-- eslint-enable -->
               </div>
             </div>
           </div>
           <div
-              class="col donate-form__payment__level"
-              :class="{ active: level === 'world' }"
-              @click="selectLevel('world')"
+            class="col donate-form__payment__level"
+            :class="{ active: level === 'world' }"
+            @click="selectLevel('world')"
           >
-            <h3 class="donate-form__payment__heading text-uppercase fw-bold text-primary h5">
+            <h3
+              class="donate-form__payment__heading text-uppercase fw-bold text-primary h5"
+            >
               {{ t('donate-form.benefits.impacts.world.heading') }}
             </h3>
             <div class="Article">
               <div>
                 <!-- eslint-disable vue/no-v-html -->
                 <p
-                    class="donate-form__payment__highlight text-icij fw-bold"
-                    v-html="t('donate-form.benefits.impacts.world.highlight')"
+                  class="donate-form__payment__highlight text-icij fw-bold"
+                  v-html="t('donate-form.benefits.impacts.world.highlight')"
                 />
                 <!-- eslint-enable -->
               </div>
@@ -203,26 +219,26 @@ name: 'DonateForm',
           <div class="mt-5">
             <span class="donate-form__payment__buttons">
               <button
-                  type="button"
-                  class="btn btn-sm frequency-monthly"
-                  :class="{ 'btn-primary': installmentPeriod === 'monthly' }"
-                  @click="installmentPeriod = 'monthly'"
+                type="button"
+                class="btn btn-sm frequency-monthly"
+                :class="{ 'btn-primary': installmentPeriod === 'monthly' }"
+                @click="installmentPeriod = 'monthly'"
               >
                 {{ t('donate-form.frequency.monthly') }}
               </button>
               <button
-                  type="button"
-                  class="btn btn-sm frequency-yearly"
-                  :class="{ 'btn-primary': installmentPeriod === 'yearly' }"
-                  @click="installmentPeriod = 'yearly'"
+                type="button"
+                class="btn btn-sm frequency-yearly"
+                :class="{ 'btn-primary': installmentPeriod === 'yearly' }"
+                @click="installmentPeriod = 'yearly'"
               >
                 {{ t('donate-form.frequency.yearly') }}
               </button>
               <button
-                  type="button"
-                  class="btn btn-sm frequency-onetime"
-                  :class="{ 'btn-primary': installmentPeriod === null }"
-                  @click="installmentPeriod = 'onetime'"
+                type="button"
+                class="btn btn-sm frequency-onetime"
+                :class="{ 'btn-primary': installmentPeriod === null }"
+                @click="installmentPeriod = 'onetime'"
               >
                 {{ t('donate-form.frequency.onetime') }}
               </button>
@@ -230,28 +246,41 @@ name: 'DonateForm',
           </div>
           <div class="mt-4">
             <span>{{ t('donate-form.label') }}&nbsp;</span>
-            <label class="donate-form__payment__unit input-group input-group-sm d-inline-flex">
+            <label
+              class="donate-form__payment__unit input-group input-group-sm d-inline-flex"
+            >
               <span class="input-group-prepend">
                 <span class="input-group-text">$</span>
               </span>
               <input
-                  v-model="amount"
-                  class="donate-form__payment__input form-control"
-                  name="amount"
-                  type="number"
-                  min="0"
-                  @change="amountIsNotPristine"
+                v-model="amount"
+                class="donate-form__payment__input form-control"
+                name="amount"
+                type="number"
+                min="0"
+                @change="amountIsNotPristine"
               />
             </label>
           </div>
           <div class="mt-4">
             <input name="org_id" value="icij" type="hidden" />
             <input v-model="campaign" name="campaign" type="hidden" />
-            <input v-model="installmentPeriod" name="installmentPeriod" type="hidden" />
-            <button type="submit" class="btn btn-primary rounded-pill text-uppercase fw-bold">
+            <input
+              v-model="installmentPeriod"
+              name="installmentPeriod"
+              type="hidden"
+            />
+            <button
+              type="submit"
+              class="btn btn-primary rounded-pill text-uppercase fw-bold"
+            >
               {{ t('donate-form.submit') }}
             </button>
-            <a target="_blank" href="https://icij.org/donate" class="donate-form__payment__image" />
+            <a
+              target="_blank"
+              href="https://icij.org/donate"
+              class="donate-form__payment__image"
+            />
           </div>
         </div>
       </form>
@@ -267,10 +296,10 @@ name: 'DonateForm',
       <div>
         <ul class="donate-form__insider__list">
           <li
-              v-for="(benefit, index) in listBenefits"
-              :key="index"
-              class="donate-form__insider__list-item"
-              v-html="benefit"
+            v-for="(benefit, index) in listBenefits"
+            :key="index"
+            class="donate-form__insider__list-item"
+            v-html="benefit"
           />
         </ul>
       </div>
@@ -278,9 +307,9 @@ name: 'DonateForm',
         <hr class="donate-form__insider__separator" />
         <div class="donate-form__insider__more text-center">
           <a
-              target="_blank"
-              href="https://icij.org/donate"
-              class="btn btn-primary rounded-pill text-uppercase fw-bold py-2"
+            target="_blank"
+            href="https://icij.org/donate"
+            class="btn btn-primary rounded-pill text-uppercase fw-bold py-2"
           >
             {{ t('donate-form.benefits.more') }}
           </a>

package/lib/components/EmbedForm.vue

@@ -9,15 +9,26 @@
           <p>
             {{ t('embed-form.introduction') }}
           </p>
-          <textarea ref='embed-form__code' class="form-control embed-form__code mb-2" readonly :value="embedCode()" @click="selectCode" />
+          <textarea
+            ref="embed-form__code"
+            class="form-control embed-form__code mb-2"
+            readonly
+            :value="embedCode()"
+            @click="selectCode"
+          />
 
           <div class="d-flex justify-content-between">
-          <div class="form-check align-self-end">
-            <input type="checkbox" class="form-check-input" id="responsiveOptin" v-model="responsiveCheck" />
-            <label class="form-check-label fw-bold" for="responsiveOptin">
-              {{ t('embed-form.responsive-optin') }}
-            </label>
-          </div>
+            <div class="form-check align-self-end">
+              <input
+                type="checkbox"
+                class="form-check-input"
+                id="responsiveOptin"
+                v-model="responsiveCheck"
+              />
+              <label class="form-check-label fw-bold" for="responsiveOptin">
+                {{ t('embed-form.responsive-optin') }}
+              </label>
+            </div>
 
             <haptic-copy
               class="btn-link btn-sm text-uppercase fw-bold"
@@ -27,7 +38,10 @@
             />
           </div>
         </div>
-        <div v-if="!noPreview" class="col-7 d-none d-lg-block embed-form__preview">
+        <div
+          v-if="!noPreview"
+          class="col-7 d-none d-lg-block embed-form__preview"
+        >
           <!-- eslint-disable vue/no-v-html -->
           <span v-html="embedCode(false)" />
           <!-- eslint-enable -->
@@ -38,9 +52,9 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, ref} from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n'
 import HapticCopy from '@/components/HapticCopy.vue'
 import IframeResizer from '@/utils/iframe-resizer'
 
@@ -58,7 +72,7 @@ interface ComponentInterface {
  * Embed Form
  */
 export default defineComponent({
-name: 'EmbedForm',
+  name: 'EmbedForm',
   components: {
     HapticCopy
   },
@@ -111,18 +125,17 @@ name: 'EmbedForm',
       default: null
     }
   },
-  setup(props)
-  {
-    const {t} = useI18n()
+  setup(props) {
+    const { t } = useI18n()
 
     const responsiveCheck = ref(false)
-    const embedFormCode = ref<HTMLTextAreaElement|null>(null)
-    const currentUrl = computed(()=> {
+    const embedFormCode = ref<HTMLTextAreaElement | null>(null)
+    const currentUrl = computed(() => {
       return props.url || window.location.href
     })
     function iframeCodeFor(_url = currentUrl, width: string, height: string) {
       return `<iframe width="${width}" height="${height}" src="${IframeResizer.deletePymParams(
-          props.url
+        props.url
       )}" frameborder="0" allowfullscreen></iframe>`
     }
     function pymCodeFor(url = currentUrl): string {
@@ -132,9 +145,14 @@ name: 'EmbedForm',
       embedFormCode.value?.select()
     }
     function embedCode(withPym = responsiveCheck.value): string {
-      const width = typeof props.width === 'string' ? props.width : Math.max(props.width, props.minWidth).toString()
+      const width =
+        typeof props.width === 'string'
+          ? props.width
+          : Math.max(props.width, props.minWidth).toString()
       const height = Math.max(props.height, props.minHeight).toString()
-      return withPym ? pymCodeFor(currentUrl) : iframeCodeFor(currentUrl, width, height)
+      return withPym
+        ? pymCodeFor(currentUrl)
+        : iframeCodeFor(currentUrl, width, height)
     }
 
     return {
@@ -155,8 +173,6 @@ name: 'EmbedForm',
   font-size: 0.9rem;
   overflow: auto;
 
-
-
   &__heading {
     font-size: 1.1em;
     text-transform: uppercase;

package/lib/components/EmbeddableFooter.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="embeddable-footer p-2 text-nowrap">
-    <a :href="homeUrl" target="_blank" class="text-white embeddable-footer__brand">
+    <a
+      :href="homeUrl"
+      target="_blank"
+      class="text-white embeddable-footer__brand"
+    >
       <brand :size="40" no-border class="me-2" color="white" />
       <!-- @slot Slot to redefine title display -->
       <slot name="title">
@@ -16,20 +20,20 @@
     <!-- @slot Overide the sharing button -->
     <slot name="sharing-button" v-bind="{ sharingOptionsValues }">
       <button
-          class="btn btn-link text-white btn-sm py-0 embeddable-footer__share-btn"
-          :class="{ active: showShareOptions }"
-          @click="showShareOptions = !showShareOptions"
+        class="btn btn-link text-white btn-sm py-0 embeddable-footer__share-btn"
+        :class="{ active: showShareOptions }"
+        @click="showShareOptions = !showShareOptions"
       >
         <fa icon="share-alt" />
         <span class="sr-only">{{ $t('embeddable-footer.share') }}</span>
       </button>
     </slot>
     <sharing-options
-        v-if="showShareOptions"
-        :values="sharingOptionsValues"
-        direction="column-reverse"
-        :iframe-min-height="iframeMinHeight"
-        :iframe-min-width="iframeMinWidth"
+      v-if="showShareOptions"
+      :values="sharingOptionsValues"
+      direction="column-reverse"
+      :iframe-min-height="iframeMinHeight"
+      :iframe-min-width="iframeMinWidth"
     />
   </div>
 </template>
@@ -52,7 +56,7 @@ type EmbeddableFooterData = {
  * EmbeddableFooter
  */
 export default defineComponent({
-name: 'EmbeddableFooter',
+  name: 'EmbeddableFooter',
   components: {
     Fa,
     SharingOptions,

package/lib/components/FollowUsPopover.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="follow-us">
-    <button class="btn btn-link text-light follow-us__close" @click="closeSignupPopover">
+    <button
+      class="btn btn-link text-light follow-us__close"
+      @click="closeSignupPopover"
+    >
       <fa icon="times" />
     </button>
     <sign-up-form class="p-3" />
@@ -8,40 +11,40 @@
       {{ t('follow-us-popover.heading') }}
     </div>
     <div class="p-3 bg-light d-flex justify-content-between text-center">
-        <div class="col">
-          <a
-            href="https://twitter.com/ICIJorg"
-            target="_blank"
-            class="d-inline-block text-primary border border-primary rounded-circle bg-white follow-us__social-btn"
-            title="Twitter"
-          >
-            <fa :icon="['fab', 'twitter']" size="lg" />
-            <span class="sr-only">Twitter</span>
-          </a>
-        </div>
-        <div class="col">
-          <a
-            href="https://www.facebook.com/ICIJ.org"
-            target="_blank"
-            class="d-inline-block text-primary border border-primary rounded-circle bg-white follow-us__social-btn"
-            title="Facebook"
-          >
-            <fa :icon="['fab', 'facebook']" size="lg" />
-            <span class="sr-only">Facebook</span>
-          </a>
-        </div>
-        <div class="col">
-          <a
-            href="https://www.linkedin.com/company/1732242/"
-            target="_blank"
-            class="d-inline-block text-primary border border-primary rounded-circle bg-white follow-us__social-btn"
-            title="Linkedin"
-          >
-            <fa :icon="['fab', 'linkedin']" size="lg" />
-            <span class="sr-only">Linkedin</span>
-          </a>
-        </div>
+      <div class="col">
+        <a
+          href="https://twitter.com/ICIJorg"
+          target="_blank"
+          class="d-inline-block text-primary border border-primary rounded-circle bg-white follow-us__social-btn"
+          title="Twitter"
+        >
+          <fa :icon="['fab', 'twitter']" size="lg" />
+          <span class="sr-only">Twitter</span>
+        </a>
       </div>
+      <div class="col">
+        <a
+          href="https://www.facebook.com/ICIJ.org"
+          target="_blank"
+          class="d-inline-block text-primary border border-primary rounded-circle bg-white follow-us__social-btn"
+          title="Facebook"
+        >
+          <fa :icon="['fab', 'facebook']" size="lg" />
+          <span class="sr-only">Facebook</span>
+        </a>
+      </div>
+      <div class="col">
+        <a
+          href="https://www.linkedin.com/company/1732242/"
+          target="_blank"
+          class="d-inline-block text-primary border border-primary rounded-circle bg-white follow-us__social-btn"
+          title="Linkedin"
+        >
+          <fa :icon="['fab', 'linkedin']" size="lg" />
+          <span class="sr-only">Linkedin</span>
+        </a>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -55,7 +58,6 @@ import { useI18n } from 'vue-i18n'
 import SignUpForm from './SignUpForm.vue'
 import { library, default as Fa } from './Fa'
 
-
 /**
  * FollowUsPopover
  */
@@ -65,11 +67,11 @@ export default defineComponent({
     Fa,
     SignUpForm
   },
-  emits:["update:close"],
-  setup(_props,{emit}){
-    const {t} = useI18n()
-    onBeforeMount((): void=>{
-        library.add(faTimes, faTwitter, faFacebook, faLinkedin)
+  emits: ['update:close'],
+  setup(_props, { emit }) {
+    const { t } = useI18n()
+    onBeforeMount((): void => {
+      library.add(faTimes, faTwitter, faFacebook, faLinkedin)
     })
     function closeSignupPopover(): void {
       /**