@icij/murmur-next 4.0.0 → 4.0.3

package/lib/components/GenericFooter.vue

@@ -3,10 +3,18 @@
     <div class="container">
       <div class="row">
         <div class="col-12 col-lg-5">
-          <h5 class="text-uppercase text-white clearfix generic-footer__icij mb-3">
-            <a href="https://icij.org" target="_blank" class="generic-footer__icij__logo text-decoration-none">
+          <h5
+            class="text-uppercase text-white clearfix generic-footer__icij mb-3"
+          >
+            <a
+              href="https://icij.org"
+              target="_blank"
+              class="generic-footer__icij__logo text-decoration-none"
+            >
               <brand-expansion :mode="mode" dark />
-              <span class="sr-only">International Consortium of Investigative Journalists</span>
+              <span class="sr-only"
+                >International Consortium of Investigative Journalists</span
+              >
             </a>
           </h5>
           <p>
@@ -30,22 +38,46 @@
               <h5 class="text-uppercase mb-3">About Us</h5>
               <ul class="list-unstyled">
                 <li class="list-unstyled-item">
-                  <a href="https://www.icij.org/about/our-team/" target="_blank"> Our team </a>
+                  <a
+                    href="https://www.icij.org/about/our-team/"
+                    target="_blank"
+                  >
+                    Our team
+                  </a>
                 </li>
                 <li class="list-unstyled-item">
-                  <a href="https://www.icij.org/about/our-supporters/" target="_blank"> Our supporters </a>
+                  <a
+                    href="https://www.icij.org/about/our-supporters/"
+                    target="_blank"
+                  >
+                    Our supporters
+                  </a>
                 </li>
                 <li class="list-unstyled-item">
-                  <a href="https://www.icij.org/about/awards/" target="_blank"> ICIJ's Awards </a>
+                  <a href="https://www.icij.org/about/awards/" target="_blank">
+                    ICIJ's Awards
+                  </a>
                 </li>
                 <li class="list-unstyled-item">
-                  <a href="https://www.icij.org/about/corporate/" target="_blank"> Corportate </a>
+                  <a
+                    href="https://www.icij.org/about/corporate/"
+                    target="_blank"
+                  >
+                    Corportate
+                  </a>
                 </li>
                 <li class="list-unstyled-item">
-                  <a href="https://www.icij.org/about/work-with-us/" target="_blank"> Work with us </a>
+                  <a
+                    href="https://www.icij.org/about/work-with-us/"
+                    target="_blank"
+                  >
+                    Work with us
+                  </a>
                 </li>
                 <li class="list-unstyled-item">
-                  <a href="https://www.icij.org/journalists/" target="_blank"> Journalists </a>
+                  <a href="https://www.icij.org/journalists/" target="_blank">
+                    Journalists
+                  </a>
                 </li>
               </ul>
             </div>
@@ -58,22 +90,52 @@
               <slot name="investigations">
                 <ul class="list-unstyled">
                   <li class="list-unstyled-item">
-                    <a href="https://www.icij.org/investigations/uber-files/" target="_blank"> The Uber Files </a>
+                    <a
+                      href="https://www.icij.org/investigations/uber-files/"
+                      target="_blank"
+                    >
+                      The Uber Files
+                    </a>
                   </li>
                   <li class="list-unstyled-item">
-                    <a href="https://www.icij.org/investigations/russia-archive/" target="_blank"> Russia Archive </a>
+                    <a
+                      href="https://www.icij.org/investigations/russia-archive/"
+                      target="_blank"
+                    >
+                      Russia Archive
+                    </a>
                   </li>
                   <li class="list-unstyled-item">
-                    <a href="https://www.icij.org/investigations/ericsson-list/" target="_blank"> The Ericsson List </a>
+                    <a
+                      href="https://www.icij.org/investigations/ericsson-list/"
+                      target="_blank"
+                    >
+                      The Ericsson List
+                    </a>
                   </li>
                   <li class="list-unstyled-item">
-                    <a href="https://www.icij.org/investigations/pandora-papers/" target="_blank"> Pandora Papers </a>
+                    <a
+                      href="https://www.icij.org/investigations/pandora-papers/"
+                      target="_blank"
+                    >
+                      Pandora Papers
+                    </a>
                   </li>
                   <li class="list-unstyled-item">
-                    <a href="https://www.icij.org/investigations/fincen-files/" target="_blank"> FinCEN Files </a>
+                    <a
+                      href="https://www.icij.org/investigations/fincen-files/"
+                      target="_blank"
+                    >
+                      FinCEN Files
+                    </a>
                   </li>
                   <li class="list-unstyled-item">
-                    <a href="https://www.icij.org/investigations/" target="_blank"> More investigations </a>
+                    <a
+                      href="https://www.icij.org/investigations/"
+                      target="_blank"
+                    >
+                      More investigations
+                    </a>
                   </li>
                 </ul>
               </slot>
@@ -84,19 +146,32 @@
               </h5>
               <ul class="list-unstyled">
                 <li class="list-unstyled-item">
-                  <a href="https://www.facebook.com/ICIJ.org" target="_blank"> Facebook </a>
+                  <a href="https://www.facebook.com/ICIJ.org" target="_blank">
+                    Facebook
+                  </a>
                 </li>
                 <li class="list-unstyled-item">
-                  <a href="https://www.linkedin.com/company/1732242/" target="_blank"> LinkedIn </a>
+                  <a
+                    href="https://www.linkedin.com/company/1732242/"
+                    target="_blank"
+                  >
+                    LinkedIn
+                  </a>
                 </li>
                 <li class="list-unstyled-item">
-                  <a href="https://twitter.com/ICIJorg" target="_blank"> Twitter </a>
+                  <a href="https://twitter.com/ICIJorg" target="_blank">
+                    Twitter
+                  </a>
                 </li>
                 <li class="list-unstyled-item">
-                  <a href="https://instagram.com/icijorg" target="_blank"> Instagram </a>
+                  <a href="https://instagram.com/icijorg" target="_blank">
+                    Instagram
+                  </a>
                 </li>
                 <li class="list-unstyled-item">
-                  <a href="https://www.icij.org/signup/" target="_blank"> Sign-up </a>
+                  <a href="https://www.icij.org/signup/" target="_blank">
+                    Sign-up
+                  </a>
                 </li>
               </ul>
             </div>
@@ -105,8 +180,8 @@
       </div>
       <p class="text-white text-md-right small mt-5">
         <strong>
-          © <span class="generic-footer__year">{{ year }}</span> — The International Consortium of Investigative
-          Journalists.
+          © <span class="generic-footer__year">{{ year }}</span> — The
+          International Consortium of Investigative Journalists.
         </strong>
         {{ $t('generic-footer.all-rights') }}
         <br />
@@ -130,7 +205,7 @@ import { BrandMode } from '@/enums'
  * GenericFooter
  */
 export default defineComponent({
-name: 'GenericFooter',
+  name: 'GenericFooter',
   components: { BrandExpansion },
   props: {
     /**

package/lib/components/GenericHeader.vue

@@ -8,53 +8,90 @@
       :offset="100"
       :z-index="1020"
       :on-unpin="closeFollowUsPopover"
-      :class="{ 'headroom--frozen': !collapseNavbar, 'generic-header--collapsed': collapseNavbar }"
+      :class="{
+        'headroom--frozen': !collapseNavbar,
+        'generic-header--collapsed': collapseNavbar
+      }"
       :style="{ position: position }"
     >
       <!-- @slot Redefines brand -->
       <slot name="brand">
         <a :href="homeUrl" class="navbar-brand generic-header__brand">
-          <brand-expansion :size="45" :mode="shortMode" class="d-inline-block d-sm-none" />
-          <brand-expansion :size="45" :mode="longMode" class="d-none d-sm-inline-block" />
-          <span class="sr-only">International Consortium of Investigative Journalists</span>
+          <brand-expansion
+            :size="45"
+            :mode="shortMode"
+            class="d-inline-block d-sm-none"
+          />
+          <brand-expansion
+            :size="45"
+            :mode="longMode"
+            class="d-none d-sm-inline-block"
+          />
+          <span class="sr-only"
+            >International Consortium of Investigative Journalists</span
+          >
         </a>
       </slot>
-      <button class="navbar-toggler border-0" type="button" aria-label="Toggle navigation" @click="toggleNavbar">
+      <button
+        class="navbar-toggler border-0"
+        type="button"
+        aria-label="Toggle navigation"
+        @click="toggleNavbar"
+      >
         <fa icon="bars" size="xl" class="text-primary" />
       </button>
       <div class="navbar-collapse" :class="{ collapse: collapseNavbar }">
         <ul class="navbar-nav ms-auto">
           <li class="nav-item">
-            <a href="https://www.icij.org/investigations/" target="_blank" class="nav-link text-uppercase">
+            <a
+              href="https://www.icij.org/investigations/"
+              target="_blank"
+              class="nav-link text-uppercase"
+            >
               {{ t('generic-header.navbar.investigations') }}
             </a>
           </li>
           <li class="nav-item">
-            <a href="https://www.icij.org/leak/" target="_blank" class="nav-link text-uppercase">
+            <a
+              href="https://www.icij.org/leak/"
+              target="_blank"
+              class="nav-link text-uppercase"
+            >
               {{ t('generic-header.navbar.leak') }}
             </a>
           </li>
           <li class="nav-item">
-            <a id="follow-us-toggler" class="nav-link text-uppercase" @mouseenter="showFollowUsPopover=true">
+            <a
+              id="follow-us-toggler"
+              class="nav-link text-uppercase"
+              @mouseenter="showFollowUsPopover = true"
+            >
               {{ t('generic-header.navbar.follow') }}
             </a>
           </li>
           <li class="nav-item me-lg-3">
             <slot name="donate-link">
-              <a class="text-uppercase btn btn-primary fw-bold" target="_blank" :href="donateUrl">
+              <a
+                class="text-uppercase btn btn-primary fw-bold"
+                target="_blank"
+                :href="donateUrl"
+              >
                 {{ t('generic-header.navbar.support') }}
               </a>
             </slot>
           </li>
         </ul>
         <b-popover
-            v-model="showFollowUsPopover"
-            target="follow-us-toggler"
-            placement="bottom-start"
-            ref="followUsPopover"
-            click
+          v-model="showFollowUsPopover"
+          target="follow-us-toggler"
+          placement="bottom-start"
+          ref="followUsPopover"
+          click
         >
-          <follow-us-popover @update:close="closeFollowUsPopover" @keydown.esc="closeFollowUsPopover" />
+          <follow-us-popover
+            @update:close="closeFollowUsPopover"
+            @keydown.esc="closeFollowUsPopover"
+          />
         </b-popover>
       </div>
     </component>
@@ -63,7 +100,7 @@
 
 <script lang="ts">
 import { faBars } from '@fortawesome/free-solid-svg-icons/faBars'
-import headroom  from 'vue-headroom/src/headroom.vue';
+import headroom from 'vue-headroom/src/headroom.vue'
 import {
   computed,
   defineComponent,
@@ -78,9 +115,9 @@ import config from '@/config'
 import Fa, { library } from '@/components/Fa'
 import BrandExpansion from '@/components/BrandExpansion.vue'
 import FollowUsPopover from '@/components/FollowUsPopover.vue'
-import {BrandMode} from '@/enums'
-import {useI18n} from "vue-i18n";
-import {BPopover} from "bootstrap-vue-next";
+import { BrandMode } from '@/enums'
+import { useI18n } from 'vue-i18n'
+import { BPopover } from 'bootstrap-vue-next'
 
 type BrandOptions = {
   noBorder: boolean
@@ -114,7 +151,7 @@ export default defineComponent({
      */
     noHeadroom: {
       type: Boolean,
-      default:false
+      default: false
     },
     /**
      * Target link of the ICIJ logo and project name.
@@ -139,13 +176,14 @@ export default defineComponent({
     }
   },
   setup(props) {
-
-    onBeforeMount((): void =>{
+    onBeforeMount((): void => {
       library.add(faBars)
     })
 
-    const {t}= useI18n()
-    const followUsPopover = ref<ComponentPublicInstance<typeof BPopover>|null>(null)
+    const { t } = useI18n()
+    const followUsPopover = ref<ComponentPublicInstance<
+      typeof BPopover
+    > | null>(null)
     const closable = ref(false)
     const showFollowUsPopover = ref<boolean>(false)
     const collapseNavbar = ref(true)
@@ -155,9 +193,9 @@ export default defineComponent({
       return props.noHeadroom ? 'div' : 'headroom'
     })
     const appliedBrandOptions = computed((): BrandOptions => {
-      return {...defaultBrandOptions.value,... props.brandOptions}
+      return { ...defaultBrandOptions.value, ...props.brandOptions }
     })
-    const  defaultBrandOptions = computed((): BrandOptions => {
+    const defaultBrandOptions = computed((): BrandOptions => {
       return {
         noBorder: true,
         size: 50,
@@ -166,10 +204,10 @@ export default defineComponent({
       }
     })
     function closeFollowUsPopover() {
-      if(followUsPopover.value?.hide){
+      if (followUsPopover.value?.hide) {
         followUsPopover.value?.hide(new Event('forceHide'))
       }
-      showFollowUsPopover.value=false
+      showFollowUsPopover.value = false
     }
     function toggleNavbar(): void {
       collapseNavbar.value = !collapseNavbar.value
@@ -203,7 +241,6 @@ export default defineComponent({
   width: 100%;
   z-index: $zindex-sticky;
 
-
   .popover {
     width: 100%;
   }

package/lib/components/HapticCopy.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
-import {FontAwesomeLayers} from '@fortawesome/vue-fontawesome'
-import {faClipboard} from '@fortawesome/free-solid-svg-icons/faClipboard'
-import {faClipboardCheck} from '@fortawesome/free-solid-svg-icons/faClipboardCheck'
-import {BTooltip, PopoverPlacement} from 'bootstrap-vue-next'
+import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { faClipboard } from '@fortawesome/free-solid-svg-icons/faClipboard'
+import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons/faClipboardCheck'
+import { BTooltip, PopoverPlacement } from 'bootstrap-vue-next'
 
 import noop from 'lodash/noop'
 import {
@@ -15,11 +15,11 @@ import {
   PropType,
   ref
 } from 'vue'
-import {TranslateResult, useI18n} from 'vue-i18n'
+import { TranslateResult, useI18n } from 'vue-i18n'
 
-import {default as Fa, library} from './Fa'
+import { default as Fa, library } from './Fa'
 
-import {copyHtml, copyText} from '@/utils/clipboard'
+import { copyHtml, copyText } from '@/utils/clipboard'
 
 type HapticCopyData = {
   mounted: boolean
@@ -92,8 +92,8 @@ export default defineComponent({
     }
   },
   emits: ['attempt', 'success', 'error', 'hideClipboardTooltip'],
-  setup(props, {emit, expose}) {
-    const {t, te} = useI18n()
+  setup(props, { emit, expose }) {
+    const { t, te } = useI18n()
     const tooltip = ref<ComponentPublicInstance | null>(null)
     const el = ref<ComponentPublicInstance<HTMLElement> | null>(null)
     const tooltipContent = ref<string>('')
@@ -108,7 +108,7 @@ export default defineComponent({
       // id (if any) because BootstrapVue doesn't like HTMLElement for some
       // reasons.
 
-      return el.value?.id.length ? `#${el.value.id}` : null;
+      return el.value?.id.length ? `#${el.value.id}` : null
     })
 
     function copyTextToClipboard(): Promise<void> {
@@ -167,7 +167,6 @@ export default defineComponent({
       showClipboardTooltip.value = false
       tooltipTimeout.value = undefined
       emit('hideClipboardTooltip')
-
     }
 
     function nextTimeout(fn = noop, delay = 0) {
@@ -175,15 +174,15 @@ export default defineComponent({
       return new Promise((resolve) => {
         tooltipTimeout.value = setTimeout(resolve, delay)
       })
-          .finally(nextTick)
-          .then(fn)
+        .finally(nextTick)
+        .then(fn)
     }
 
     onUnmounted(() => {
       closeTooltip()
     })
     expose({
-      hide: closeTooltip,
+      hide: closeTooltip
     })
     return {
       t,
@@ -196,41 +195,54 @@ export default defineComponent({
       copy,
       closeTooltip,
       openTooltip,
-      nextTimeout,
+      nextTimeout
     }
-  },
+  }
 })
 </script>
 
 <template>
-  <button id="hapticCopy" ref="el" class="btn haptic-copy" @mouseleave="closeTooltip" @click.stop="copy">
+  <button
+    id="hapticCopy"
+    ref="el"
+    class="btn haptic-copy"
+    @mouseleave="closeTooltip"
+    @click.stop="copy"
+  >
     <!-- @slot Main content of the button (including the icon) -->
     <slot>
       <font-awesome-layers>
         <transition name="spin">
-          <fa v-if="!tooltipTimeout" class="haptic-copy__icon" icon="clipboard"/>
+          <fa
+            v-if="!tooltipTimeout"
+            class="haptic-copy__icon"
+            icon="clipboard"
+          />
         </transition>
         <transition name="spin">
-          <fa v-if="tooltipTimeout" class="haptic-copy__icon" icon="clipboard-check"/>
+          <fa
+            v-if="tooltipTimeout"
+            class="haptic-copy__icon"
+            icon="clipboard-check"
+          />
         </transition>
       </font-awesome-layers>
       <span :class="{ 'sr-only': hideLabel }" class="ms-1 haptic-copy__label">
-          {{ label || t('haptic-copy.label') }}
-        </span>
+        {{ label || t('haptic-copy.label') }}
+      </span>
     </slot>
     <b-tooltip
-        v-if="!noTooltip"
-        ref="tooltip"
-        :model-value="showClipboardTooltip"
-        :placement="tooltipPlacement"
-        manual
-        noninteractive
-        target="hapticCopy"
+      v-if="!noTooltip"
+      ref="tooltip"
+      :model-value="showClipboardTooltip"
+      :placement="tooltipPlacement"
+      manual
+      noninteractive
+      target="hapticCopy"
     >
       {{ tooltipContent }}
     </b-tooltip>
   </button>
-
 </template>
 <style lang="scss">
 .haptic-copy {