@icij/murmur-next 4.0.0 → 4.0.1

package/docs/components/SampleCard.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="sample-card mb-5">
-    <h4 v-if="title" class="sample-card__title">
-      {{ title }}
-    </h4>
-    <p v-if="description" class="sample-card__description text-muted">
-      {{ description }}
-    </p>
-    <div class="sample-card__body card">
-      <slide-up-down :active="collapseCode" class="sample-card__body__render bg-light">
-        <slot v-if="useSlot"></slot>
-        <template v-else-if="component">
-          <component :is="component" />
-        </template>
-      </slide-up-down>
-      <div class="sample-card__body__actions border-top row no-gutters">
-        <button class="btn btn-sm fw-bold btn col" :class="{ active: !collapseCode }" @click="toggleCode()">
-          <fa icon="code" class="me-1" />
-          <span v-if="collapseCode">Show code</span>
-          <span v-if="!collapseCode">Hide code</span>
-        </button>
-        <haptic-copy v-if="extractedCode" class="btn-sm fw-bold btn col" :text="extractedCode" />
-      </div>
-      <slide-up-down :active="!collapseCode" class="sample-card__body__code bg-dark">
-        <slot name="code">
-          <pre><code :class="lang" v-html="code"></code></pre>
-        </slot>
-      </slide-up-down>
-    </div>
-  </div>
-</template>
-
-<script>
-import { faCode } from '@fortawesome/free-solid-svg-icons/faCode'
-
-import { default as Fa, library } from '@/components/Fa'
-import SlideUpDown from '@/components/SlideUpDown.vue'
-import HapticCopy from '@/components/HapticCopy.vue'
-
-export default {
-  name: 'SampleCard',
-  components: {
-    HapticCopy,
-    SlideUpDown,
-    Fa
-  },
-  props: {
-    title: {
-      type: String
-    },
-    description: {
-      type: String
-    },
-    component: {
-      type: [Object, Function],
-      default: () => null
-    },
-    code: {
-      type: String,
-      default: null
-    },
-    lang: {
-      type: String,
-      default: 'html'
-    }
-  },
-  data() {
-    return {
-      collapseCode: true,
-      extractedCode: null
-    }
-  },
-  computed: {
-    useSlot() {
-      return !!this.$slots.default && !!this.$slots.default.length
-    }
-  },
-  beforeMount() {
-    library.add(faCode)
-  },
-  async mounted() {
-    await this.$nextTick()
-    const codeElement = this.$el.querySelector('.sample-card__body__code code')
-    this.extractedCode = this.code || codeElement?.textContent?.replace(/\\/, '')
-  },
-  methods: {
-    toggleCode(toggle = !this.collapseCode) {
-      this.collapseCode = toggle
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import '../styles/variables.scss';
-
-.sample-card {
-  &__body {
-    &__render {
-      overflow: visible;
-      max-width: 100%;
-    }
-
-    &__actions .btn {
-      background: darken($light, 5%);
-      &:not(:last-of-type) {
-        border-right: $border-width solid $border-color;
-      }
-    }
-
-    &__code {
-      pre {
-        padding: $spacer * 0.5;
-        margin: 0;
-      }
-    }
-  }
-}
-</style>

package/docs/main.js

@@ -1,42 +0,0 @@
-// 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

@@ -1,96 +0,0 @@
----
-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

@@ -1,44 +0,0 @@
----
-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

@@ -1,105 +0,0 @@
----
-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

@@ -1,30 +0,0 @@
----
-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

@@ -1,70 +0,0 @@
----
-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

@@ -1,91 +0,0 @@
----
-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

@@ -1,16 +0,0 @@
----
-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

@@ -1,61 +0,0 @@
----
-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>