@icij/murmur-next 4.0.0

package/docs/main.js

@@ -0,0 +1,42 @@
+// BootstrapVue recommend using this
+import 'mutationobserver-shim'
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import Murmur from '@/main'
+
+import store from './store'
+import App from './components/App.vue'
+import ApiTable from './components/ApiTable.vue'
+import CollapsibleBlock from './components/CollapsibleBlock.vue'
+import OutboundLink from './components/OutboundLink.vue'
+import PalettePresenter from './components/PalettePresenter.vue'
+import RepositoryLink from './components/RepositoryLink.vue'
+import SampleCard from './components/SampleCard.vue'
+
+import routes from './routes'
+import './styles/app.scss'
+
+Vue.use(VueRouter)
+Vue.use(BootstrapVue)
+Vue.use(Murmur)
+
+Vue.config.productionTip = false
+
+Vue.component('ApiTable', ApiTable)
+Vue.component('CollapsibleBlock', CollapsibleBlock)
+Vue.component('OutboundLink', OutboundLink)
+Vue.component('PalettePresenter', PalettePresenter)
+Vue.component('RepositoryLink', RepositoryLink)
+Vue.component('SampleCard', SampleCard)
+
+Murmur.config.set('project.name', 'Demo Project')
+
+/* eslint-disable no-new */
+new Vue({
+  store,
+  render: h => h(App),
+  router: new VueRouter({ routes })
+}).$mount('#app')

package/docs/pages/components/accordion/doc.md

@@ -0,0 +1,96 @@
+---
+title: Accordion
+description: Display a step by step accordion
+---
+
+Accordion and accordion steps. 
+
+
+Accordion "provides" functions and current step to accordion steps. Therefore, each accordion steps has the accordion methods and attributes "injected". 
+
+The AccordionWrapper provides the step numbering and animation. It will also provide the current steps to all children.
+The AccordionStep component can be used independently of the AccordionWrapper component and the AccordionWrapper component can use other children components than the AccordionStep component we provide.
+
+## AccordionWrapper 
+
+:::sample-card
+<div class="p-4">
+  <accordion-wrapper :steps="steps" v-model="step" class="p-2">
+    <accordion-step
+      :step="$options.stepsEnum.MAILVELOPE"
+      class="accordion-step__mailvelope"
+      title="Install Mailvelope"
+      content="Install Mailvelope and create your key"
+    />
+    <accordion-step
+      :step="$options.stepsEnum.EXPORT_PUBLIC_KEY"
+      title="Export your public key"
+    >
+      <template #content>
+        <p>
+          Export your public PGP key as a .asc file and download on your
+          computer
+        </p>
+      </template>
+    </accordion-step>
+    <accordion-step
+      :active="active"
+      :step="$options.stepsEnum.UPLOAD_PUBLIC_KEY"
+    >
+      <template #title>
+        Upload your publickey
+      </template>
+      <template #nextStepButton>
+        <b-button variant="info">The end!</b-button>
+      </template>
+    </accordion-step>
+</accordion-wrapper>
+</div>
+:::
+
+<api-table path="components/AccordionWrapper.vue"></api-table>
+<br/>
+
+## AccordionStep
+
+A single AccordionStep component with the possibility to collapse/expand the content
+
+
+:::sample-card
+<div class="p-4">
+  <accordion-step :active="active"
+        :step="$options.stepsEnum.MAILVELOPE"
+        content="Install Mailvelope and create your key"
+      ><template #title>
+      <b-button @click="active = !active">{{active?'Expanded':'Collapsed'}}</b-button> Install Mailvelope 
+      </template>
+      </accordion-step>
+
+</div>
+:::
+
+<api-table path="components/AccordionStep.vue"></api-table>
+
+<style>
+  .bg-striped {
+    background: repeating-linear-gradient(45deg, #dfdddd, #dfdddd 10px, #cfcccc 10px, #cfcccc 20px)    
+  }
+</style>
+
+<script>
+
+  export default {
+    data () {
+      return {
+        step: this.$options.stepsEnum.MAILVELOPE,
+        steps: Object.values(this.$options.stepsEnum),
+        active: false
+      }
+    },
+    stepsEnum:Object.freeze({
+      MAILVELOPE: Symbol("MAILVELOPE"),
+      EXPORT_PUBLIC_KEY: Symbol("EXPORT_PUBLIC_KEY"),
+      UPLOAD_PUBLIC_KEY: Symbol("UPLOAD_PGP"),
+    })
+  }
+</script>

package/docs/pages/components/active-text-truncate/doc.md

@@ -0,0 +1,44 @@
+---
+title: Active Text Truncate
+description: Truncate text with an active display of the extended value
+---
+
+The end of the text will be truncated with an elegant gradient mask.
+
+:::sample-card
+<div class="p-4">
+  <active-text-truncate class="p-2 bg-striped">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </active-text-truncate>
+</div>
+:::
+
+This can be combined, for instance, with the haptic copy button for a subtle effect:
+
+:::sample-card
+<div class="p-4">
+    <haptic-copy class="btn btn-link w-100 border" text="https://www.icij.org/investigations/luanda-leaks/banking-documents-reveal-consulting-giants-cash-windfall-under-angolan-billionaire-isabel-dos-santos/">
+      <active-text-truncate>
+        https://www.icij.org/investigations/luanda-leaks/banking-documents-reveal-consulting-giants-cash-windfall-under-angolan-billionaire-isabel-dos-santos/
+      </active-text-truncate>
+    </haptic-copy>
+</div>
+:::
+
+Finally, this component can be used to truncate string from the start:
+
+:::sample-card
+<div class="p-4">
+  <active-text-truncate class="p-2 bg-white text-monospace" direction="rtl">
+    /secret-location/encrypted-disk/icij-investigations/leaks/luxleaks/v1/2001 and before/H4201030M.pdf
+  </active-text-truncate>
+</div>
+:::
+
+::: api-table components/ActiveTextTruncate.vue :::
+
+<style>
+  .bg-striped {
+    background: repeating-linear-gradient(45deg, #dfdddd, #dfdddd 10px, #cfcccc 10px, #cfcccc 20px)    
+  }
+</style>

package/docs/pages/components/advanced-link-form/doc.md

@@ -0,0 +1,105 @@
+---
+title: Advanced Link Form
+description: A form with tabs to offer several copy formats to users.
+---
+
+Inside a card:
+
+:::sample-card
+<div class="text-center p-4">
+  <b-card no-body>
+    <advanced-link-form
+      card
+      title="Medtronic spends millions each year on lobbying in the US"
+      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
+  </b-card>
+</div>
+:::
+
+Inside a modal (the modal's body is set to have no body):
+
+:::sample-card
+<div>
+  <div class="p-4 text-center">
+    <button class="btn btn-info fw-bold" @click="$refs.formModal.show()">
+      Click to see the form
+    </button>
+  </div>
+  <b-modal hide-footer hide-header body-class="p-0" ref="formModal" size="md" no-headings>
+    <advanced-link-form
+      card
+      title="Medtronic spends millions each year on lobbying in the US"
+      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
+  </b-modal>
+</div>
+:::
+
+This component can be use inside a popover. Here is a example with only `raw`
+and `markdown` forms, using no fading animation, and using a `small` layout:
+
+:::sample-card
+<template>
+  <div>
+    <div class="p-4 text-center">
+      <button class="btn btn-info fw-bold" id="popover-button-sample">
+        Click to see the form
+      </button>
+    </div>
+    <b-popover ref="formPopover" target="popover-button-sample" placement="right" triggers="focus">
+      <advanced-link-form
+        card
+        small
+        no-fade
+        :forms="['raw', 'markdown']"
+        title="Medtronic spends millions each year on lobbying in the US"
+        link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
+    </b-popover>
+  </div>
+</template>
+:::
+
+With tabs as pills:
+
+:::sample-card
+<div class="text-center p-4">
+  <b-card no-body>
+    <advanced-link-form
+      card
+      pills
+      title="Medtronic spends millions each year on lobbying in the US"
+      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
+  </b-card>
+</div>
+:::
+
+With tabs as pills and a different active class:
+
+:::sample-card
+<div class="text-center p-4">
+  <b-card no-body>
+    <advanced-link-form
+      card
+      pills
+      active-nav-item-class="bg-primary fw-bold"
+      title="Medtronic spends millions each year on lobbying in the US"
+      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
+  </b-card>
+</div>
+:::
+
+With vertical tabs:
+
+:::sample-card
+<div class="text-center p-4">
+  <b-card no-body>
+    <advanced-link-form
+      card
+      vertical
+      pills
+      title="Medtronic spends millions each year on lobbying in the US"
+      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
+  </b-card>
+</div>
+:::
+
+::: api-table components/AdvancedLinkForm.vue :::

package/docs/pages/components/brand/doc.md

@@ -0,0 +1,30 @@
+---
+title: Brand
+description: A component to create variations of ICIJ logo.
+---
+
+:::sample-card
+<div class="text-center position-relative">
+  <div class="position-absolute p-3">
+    <b-form-checkbox v-model="animated" name="check-button" size="sm" switch>
+      Animated
+    </b-form-checkbox>
+  </div>
+  <brand class="p-1 m-3" square :animated="animated" />
+  <brand class="p-1 m-3" square background="#000" color="#FFFF" :animated="animated" />
+  <brand class="p-1 m-3" square background="#FFF" color="#000" :animated="animated" />
+</div>
+:::
+
+::: api-table components/Brand.vue :::
+
+
+<script>
+  export default {
+    data () {
+      return {
+        animated: false
+      }
+    }
+  }
+</script>

package/docs/pages/components/brand-expansion/doc.md

@@ -0,0 +1,70 @@
+---
+title: Brand Expansion
+description: A component to create variations of ICIJ logo with text
+---
+
+### Short
+
+A variation of the logo with only the acronym "ICIJ":
+
+:::sample-card
+<div class="text-center position-relative">
+  <div class="position-absolute p-3">
+    <b-form-checkbox v-model="animated" name="check-button" size="sm" switch>
+      Animated
+    </b-form-checkbox>
+  </div>
+  <brand-expansion class="p-4 d-block" :animated="animated" />
+  <brand-expansion class="p-4 d-block" background="#000" dark />
+  <brand-expansion class="p-4 d-block" background="#000" color="#FFFF" />
+  <brand-expansion class="p-4 d-block" background="#FFF" color="#000" />
+</div>
+:::
+
+### Medium
+
+A variation of the logo with the definition of the acronym "ICIJ":
+
+:::sample-card
+<div class="text-center position-relative">
+  <div class="position-absolute p-3">
+    <b-form-checkbox v-model="animated" name="check-button" size="sm" switch>
+      Animated
+    </b-form-checkbox>
+  </div>
+  <brand-expansion class="p-4 d-block" mode="medium" :animated="animated" />
+  <brand-expansion class="p-4 d-block" mode="medium" background="#000" dark />
+  <brand-expansion class="p-4 d-block" mode="medium" background="#000" color="#FFFF" />
+  <brand-expansion class="p-4 d-block" mode="medium" background="#FFF" color="#000" />
+</div>
+:::
+
+### Long
+
+A variation of the logo with ICIJ's punchline:
+
+:::sample-card
+<div class="text-center position-relative">
+  <div class="position-absolute p-3">
+    <b-form-checkbox v-model="animated" name="check-button" size="sm" switch>
+      Animated
+    </b-form-checkbox>
+  </div>
+  <brand-expansion class="p-4 d-block" mode="long" :animated="animated" />
+  <brand-expansion class="p-4 d-block" mode="long" background="#000" dark />
+  <brand-expansion class="p-4 d-block" mode="long" background="#000" color="#FFFF" />
+  <brand-expansion class="p-4 d-block" mode="long" background="#FFF" color="#000" />
+</div>
+:::
+
+::: api-table components/BrandExpansion.vue :::
+
+<script>
+  export default {
+    data () {
+      return {
+        animated: false
+      }
+    }
+  }
+</script>

package/docs/pages/components/confirm-button/doc.md

@@ -0,0 +1,91 @@
+---
+title: Confirm Button
+---
+
+A component to create button with a confirmation tooltip
+
+:::sample-card
+<div class="p-2 text-center">
+  <confirm-button class="btn btn-info" :confirmed="confirmed" no-close-button>
+    Click to confirm
+  </confirm-button>
+</div>
+:::
+
+You can also add a description:
+
+:::sample-card
+<div class="p-2 text-center">
+  <confirm-button class="btn btn-info" description="Do, or do not. There is no try.">
+    Click to confirm
+  </confirm-button>
+</div>
+:::
+
+Or use different texts for the buttons:
+
+:::sample-card
+<div class="p-2 text-center">
+  <confirm-button class="btn btn-info" label="Will you bilge Matey?" yes="Aye" no="Abandon ship!">
+    Click to confirm
+  </confirm-button>
+</div>
+:::
+
+Finally, you can change the default placement of the tooltip:
+
+:::sample-card
+<div class="p-2 text-center">
+  <confirm-button class="btn btn-outline-dark m-2" placement="top">
+    On <code>top</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="bottom">
+    On <code>bottom</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="left">
+    On <code>left</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="right">
+    On <code>right</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="auto">
+    On <code>auto</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="topleft">
+    On <code>topleft</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="topright">
+    On <code>topright</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="bottomleft">
+    On <code>bottomleft</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="bottomright">
+    On <code>bottomright</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="lefttop">
+    On <code>lefttop</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="leftbottom">
+    On <code>leftbottom</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="righttop">
+    On <code>righttop</code>
+  </confirm-button>
+  <confirm-button class="btn btn-outline-dark m-2" placement="rightbottom">
+    On <code>rightbottom</code>
+  </confirm-button>
+</div>
+:::
+
+::: api-table components/ConfirmButton.vue :::
+
+<script>
+export default {
+  methods: {
+    confirmed() {
+      alert('Confirmed !')
+    }
+  }
+}
+</script>

package/docs/pages/components/content-placeholder/doc.md

@@ -0,0 +1,16 @@
+---
+title: Content Placeholder
+---
+
+A component to fill empty spaces with animated placeholders until content is loaded.
+
+:::sample-card
+<div class="card card-xs py-2 px-3 mx-auto m-4">
+  <content-placeholder class="my-1" />
+  <content-placeholder class="my-1" />
+  <content-placeholder class="my-1" />
+  <content-placeholder class="my-1"/>
+</div>
+:::
+
+::: api-table components/ContentPlaceholder.vue :::

package/docs/pages/components/custom-pagination/doc.md

@@ -0,0 +1,61 @@
+---
+title: Custom Pagination
+description: A custom pagination component with the option to jump ahead to a specific page using a form input.
+---
+
+Default styling:
+
+:::sample-card
+<div class="p-2 text-center">
+  <custom-pagination v-model="currentPage" :per-page="10" :total-rows="200" />
+</div>
+:::
+
+Default styling for the pagination element, while using a `small` layout:
+
+:::sample-card
+<div class="p-2 text-center">
+  <custom-pagination v-model="currentPage" :per-page="10" :total-rows="200" small />
+</div>
+:::
+
+With pills:
+
+:::sample-card
+<div class="p-2 text-center">
+  <custom-pagination v-model="currentPage" :pages="3" pills :total-rows="200" />
+</div>
+:::
+
+With pills, using a `sm` layout:
+
+:::sample-card
+<div class="p-2 text-center">
+  <custom-pagination v-model="currentPage" :per-page="10" pills :total-rows="200" size="sm" />
+</div>
+:::
+
+Or a `compact` layout:
+
+:::sample-card
+<div class="p-2 text-center">
+  <custom-pagination v-model="currentPage" :per-page="50" :pages="3" compact />
+</div>
+:::
+
+::: api-table components/CustomPagination.vue :::
+
+<script>
+  export default {
+    data () {
+      return {
+        currentPage: 1
+      }
+    },
+    watch: {
+      currentPage (page) {
+        this.$router.push({ query: { page } })
+      }
+    }
+  }
+</script>

package/docs/pages/components/digits-input/doc.md

@@ -0,0 +1,28 @@
+---
+title: Digits Input
+description: An multiple-digits input to
+---
+
+## 6 digits
+
+By default, this components displays 6 digits and has no value.
+
+:::sample-card
+<div class="p-5">
+  <digits-input />
+</div>
+:::
+
+## 4 digits with initial value
+
+You can use any number of digits you like, and specify a `value` or a `v-model`. 
+The value of the component is always converted to string to allow user to specify 
+number starting with "0".
+
+:::sample-card
+<div class="p-5">
+  <digits-input :length="4" value="2017" />
+</div>
+:::
+
+::: api-table components/DigitsInput.vue :::

package/docs/pages/components/donate-form/doc.md

@@ -0,0 +1,20 @@
+---
+title: Donate Form
+description: A form to encourage donations.
+tags: depracted
+---
+
+We usualy put this form inside a modal.
+
+::: sample-card
+<div class="p-4 text-center">
+  <button class="btn btn-info fw-bold" @click="$refs.formModal.show()">
+    Click to see the form
+  </button>
+</div>
+<b-modal hide-footer lazy title="Support ICIJ" ref="formModal" size="lg" no-headings>
+  <donate-form no-title></donate-form>
+</b-modal>
+:::
+
+::: api-table components/DonateForm.vue :::

package/docs/pages/components/embed-form/doc.md

@@ -0,0 +1,22 @@
+---
+title: Embed Form
+---
+
+::: sample-card
+<embed-form url="https://projects.icij.org/the-implant-files/graphics/#/device-related-incidents-in-europe" :height="330" no-preview class="card card-sm mx-auto my-4 pt-2"></embed-form>
+:::
+
+We usualy put this form inside a modal (here, with Boostrap Vue).
+
+::: sample-card
+<div class="p-4 text-center">
+  <button class="btn btn-info fw-bold" @click="$refs.formModal.show()">
+    Click to see the form with preview
+  </button>
+</div>
+<b-modal hide-footer lazy title="Embed form with a preview" ref="formModal" size="lg">
+  <embed-form no-title url="https://projects.icij.org/the-implant-files/graphics/#/device-related-incidents-in-europe?no-embeddable-footer=1" :height="550"></embed-form>
+</b-modal>
+:::
+
+::: api-table components/EmbedForm.vue :::