@icij/murmur-next 4.0.0

package/lib/components/EmbeddableFooter.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="embeddable-footer p-2 text-nowrap">
+    <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">
+        <span v-html="title"></span>
+      </slot>
+    </a>
+    <div class="embeddable-footer__lead small text-truncate">
+      <!-- @slot Main slot to redefine lead text display -->
+      <slot :lead="lead">
+        <span v-html="lead"></span>
+      </slot>
+    </div>
+    <!-- @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"
+      >
+        <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"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { faShareAlt } from '@fortawesome/free-solid-svg-icons/faShareAlt'
+import { defineComponent } from 'vue'
+
+import { library, default as Fa } from './Fa'
+
+import IframeResizer from '@/utils/iframe-resizer'
+import Brand from '@/components/Brand.vue'
+import SharingOptions from '@/components/SharingOptions.vue'
+import config from '@/config'
+
+type EmbeddableFooterData = {
+  showShareOptions: boolean
+}
+/**
+ * EmbeddableFooter
+ */
+export default defineComponent({
+name: 'EmbeddableFooter',
+  components: {
+    Fa,
+    SharingOptions,
+    Brand
+  },
+  props: {
+    /**
+     * Title to display next to ICIJ logo.
+     */
+    title: {
+      type: String,
+      default: () => config.get('project.name')
+    },
+    /**
+     * Lead sentence to display next to the title.
+     */
+    lead: {
+      type: String,
+      default: ''
+    },
+    /**
+     * Minimum height for the iframe generated in the embed form.
+     */
+    iframeMinHeight: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * Minimum width for the iframe generated in the embed form.
+     */
+    iframeMinWidth: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * Target of the ICIJ logo and title links.
+     */
+    homeUrl: {
+      type: String,
+      default: () => config.get('app.home')
+    },
+    /**
+     * Sharing option values to bind to the sharing-options component in the bottom-right corner.
+     */
+    sharingOptionsValues: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data(): EmbeddableFooterData {
+    return {
+      showShareOptions: false
+    }
+  },
+  beforeMount(): void {
+    library.add(faShareAlt)
+  },
+  mounted(): void {
+    IframeResizer.create()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+@import '../styles/mixins';
+
+@include keyframes(slideup) {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+.embeddable-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  z-index: $zindex-sticky;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: black;
+  color: white;
+  // Magic technique to have a minimum font-size (10px-ish)
+  font-size: calc(10px + 1.5vh);
+
+  @media screen and (min-height: 800px) {
+    font-size: 1rem;
+  }
+
+  &__brand {
+    padding-right: $spacer;
+    margin-right: $spacer;
+    border-right: 2px solid white;
+    font-family: $jumbotron-font-family;
+    font-size: 1.1em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  &__lead {
+    flex-grow: 1;
+    min-width: 0;
+    font-size: 0.9em;
+  }
+
+  &__share-btn {
+    border: 1px solid transparent;
+    height: 2.5em;
+    line-height: 2.5em;
+    width: 2.5em;
+    font-size: 80%;
+    text-align: center;
+    border-radius: 50%;
+
+    &.active {
+      border-color: white;
+    }
+
+    &:hover {
+      background: rgba(white, 0.1);
+    }
+  }
+
+  .sharing-options {
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    margin: $spacer * 0.25;
+
+    .sharing-options__link {
+      opacity: 0;
+      animation: slideup 200ms forwards;
+      @include animation-delay-loop(0, 10, 50ms);
+    }
+  }
+}
+</style>

package/lib/components/Fa.js

@@ -0,0 +1,3 @@
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+export { library } from '@fortawesome/fontawesome-svg-core'
+export default FontAwesomeIcon

package/lib/components/FollowUsPopover.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="follow-us">
+    <button class="btn btn-link text-light follow-us__close" @click="closeSignupPopover">
+      <fa icon="times" />
+    </button>
+    <sign-up-form class="p-3" />
+    <div class="px-3 pb-1 text-uppercase text-muted fw-bold">
+      {{ 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>
+  </div>
+</template>
+
+<script lang="ts">
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter'
+import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook'
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin'
+import { defineComponent, onBeforeMount } from 'vue'
+import { useI18n } from 'vue-i18n'
+import SignUpForm from './SignUpForm.vue'
+import { library, default as Fa } from './Fa'
+
+
+/**
+ * FollowUsPopover
+ */
+export default defineComponent({
+  name: 'FollowUsPopover',
+  components: {
+    Fa,
+    SignUpForm
+  },
+  emits:["update:close"],
+  setup(_props,{emit}){
+    const {t} = useI18n()
+    onBeforeMount((): void=>{
+        library.add(faTimes, faTwitter, faFacebook, faLinkedin)
+    })
+    function closeSignupPopover(): void {
+      /**
+       * Fired when user click on the `close` button
+       *
+       * @event update:close
+       * @type {boolean}
+       */
+      emit('update:close', false)
+    }
+
+    return {
+      t,
+      closeSignupPopover
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+
+.follow-us {
+  position: relative;
+  width: 100%;
+  min-width: 298px;
+
+  &__social-btn {
+    height: 46px;
+    width: 46px;
+    line-height: 46px;
+
+    i.fab {
+      line-height: inherit;
+      font-size: 1.5em;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    right: $spacer * 0.5;
+    top: $spacer * 0.5;
+  }
+}
+</style>

package/lib/components/GenericFooter.vue

@@ -0,0 +1,218 @@
+<template>
+  <footer class="generic-footer">
+    <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">
+              <brand-expansion :mode="mode" dark />
+              <span class="sr-only">International Consortium of Investigative Journalists</span>
+            </a>
+          </h5>
+          <p>
+            <!-- @slot Override office's address  -->
+            <slot name="address">
+              1800 M Street NW, Front 1 #33019<br />
+              Washington, D.C. 20033 USA
+            </slot>
+          </p>
+          <p>
+            <strong>
+              <a :href="contactEmailMailto" class="">{{ contactEmail }}</a>
+            </strong>
+          </p>
+          <!-- @slot Additional content on the left side of the footer -->
+          <slot name="left" />
+        </div>
+        <div class="col-12 col-lg-7">
+          <div class="row justify-content-end">
+            <div v-if="showAboutUs" class="col-6 col-lg-4">
+              <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>
+                </li>
+                <li class="list-unstyled-item">
+                  <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>
+                </li>
+                <li class="list-unstyled-item">
+                  <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>
+                </li>
+                <li class="list-unstyled-item">
+                  <a href="https://www.icij.org/journalists/" target="_blank"> Journalists </a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-6 col-lg-4">
+              <h5 class="text-uppercase mb-3">
+                {{ $t('generic-footer.investigations') }}
+              </h5>
+
+              <!-- @slot List of investigations -->
+              <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>
+                  </li>
+                  <li class="list-unstyled-item">
+                    <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>
+                  </li>
+                  <li class="list-unstyled-item">
+                    <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>
+                  </li>
+                  <li class="list-unstyled-item">
+                    <a href="https://www.icij.org/investigations/" target="_blank"> More investigations </a>
+                  </li>
+                </ul>
+              </slot>
+            </div>
+            <div class="col-6 col-lg-4">
+              <h5 class="text-uppercase mb-3">
+                {{ $t('generic-footer.follow-us') }}
+              </h5>
+              <ul class="list-unstyled">
+                <li class="list-unstyled-item">
+                  <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>
+                </li>
+                <li class="list-unstyled-item">
+                  <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>
+                </li>
+                <li class="list-unstyled-item">
+                  <a href="https://www.icij.org/signup/" target="_blank"> Sign-up </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </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.
+        </strong>
+        {{ $t('generic-footer.all-rights') }}
+        <br />
+        <span v-if="version" class="text-muted generic-footer__version">
+          {{ $t('generic-footer.version', { version }) }}
+        </span>
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import config from '../config'
+import BrandExpansion from './BrandExpansion.vue'
+
+import { BrandMode } from '@/enums'
+
+/**
+ * GenericFooter
+ */
+export default defineComponent({
+name: 'GenericFooter',
+  components: { BrandExpansion },
+  props: {
+    /**
+     * Version of the app to display in the bottom-right corner of the footer
+     */
+    version: {
+      type: String,
+      default: null
+    },
+    /**
+     * Whether to show the About Us column or not
+     */
+    showAboutUs: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return { mode: BrandMode.Long }
+  },
+  computed: {
+    year(): number {
+      return new Date().getFullYear()
+    },
+    contactEmail(): string {
+      return config.get('contact-email')
+    },
+    contactEmailMailto(): string {
+      return `mailto:${this.contactEmail}`
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+
+.generic-footer {
+  background: $black;
+  color: $white;
+  padding: $spacer * 4 0;
+
+  @include media-breakpoint-down(md) {
+    padding: $spacer;
+  }
+
+  a {
+    color: inherit;
+    border-bottom: 0 !important;
+  }
+
+  h5 {
+    font-family: $font-family-sans-serif;
+    font-size: 1.1rem;
+    color: $gray-600;
+  }
+
+  .list-unstyled .list-unstyled-item {
+    line-height: 1.5em;
+    margin: 5px 0;
+  }
+
+  &__icij {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    @include media-breakpoint-down(xs) {
+      display: block;
+    }
+
+    &__logo {
+      display: block;
+
+      img {
+        height: 54px;
+      }
+
+      @include media-breakpoint-down(xs) {
+        margin-bottom: $spacer;
+      }
+    }
+  }
+}
+</style>