@icij/murmur-next 4.0.0

package/docs/pages/components/embeddable-footer/doc.md

@@ -0,0 +1,60 @@
+::: sample-card
+<template>
+  <div class="p-4">
+    <embeddable-footer class="position-relative card"></embeddable-footer>
+  </div>
+</template>
+:::
+
+Main slot is displayed as "lead" text:
+
+::: sample-card
+<div class="p-4">
+  <embeddable-footer class="position-relative card">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </embeddable-footer>
+</div>
+:::
+
+A title slot can also be provider:
+
+::: sample-card
+<div class="p-4">
+  <embeddable-footer class="position-relative card">
+    <template #title>
+      <span class="small">Demo<br />Project</span>
+    </template>
+  </embeddable-footer>
+</div>
+:::
+
+This can be used for more complex structures:
+
+::: sample-card
+<template>
+  <div class="p-4">
+    <embeddable-footer class="position-relative card">
+      <div class="d-flex align-items-center">
+        <div class="flew-grow-1 mr-2">
+          This is an helpful text.
+        </div>
+        <b-button variant="info" pill size="sm" class="ml-auto mr-2">
+          Help
+        </b-button>
+      </div>
+    </embeddable-footer>
+  </div>
+</template>
+:::
+
+::: api-table components/EmbeddableFooter.vue :::
+
+<script>
+  export default {
+    data () {
+      return {
+         url: 'https://www.reddit.com/submit?url=https%3A%2F%2Ficij.org'
+      }
+    }
+  }
+</script>

package/docs/pages/components/follow-us-popover/doc.md

@@ -0,0 +1,5 @@
+::: sample-card
+<follow-us-popover class="card card-xs my-4 mx-auto border border-primary"></follow-us-popover>
+:::
+
+::: api-table components/FollowUsPopover.vue :::

package/docs/pages/components/generic-footer/doc.md

@@ -0,0 +1,21 @@
+---
+title: Generic Footer
+---
+
+::: sample-card
+<div class="full-width">
+  <generic-footer class="card m-4"></generic-footer>
+</div>
+:::
+
+::: api-table components/GenericFooter.vue :::
+
+<style lang="scss" scoped>
+  .full-width {
+    overflow: auto;
+
+    .generic-footer {
+      width: 100vw;
+    }
+  }
+</style>

package/docs/pages/components/generic-header/doc.md

@@ -0,0 +1,24 @@
+---
+title: Generic Header
+---
+
+A component to create header with generic features.
+
+::: sample-card
+<div class="full-width card m-4">
+  <generic-header no-headroom position="relative" class=""></generic-header>
+</div>
+:::
+
+::: api-table components/GenericHeader.vue :::
+
+<style lang="scss">
+  .full-width {
+    overflow: auto;
+
+    .generic-header {
+      width: 100vw;
+      max-width: 1000px;
+    }
+  }
+</style>

package/docs/pages/components/haptic-copy/doc.md

@@ -0,0 +1,27 @@
+---
+title: Haptic Copy
+---
+
+A button to copy text with an haptic feedback:
+
+:::sample-card
+<div class="p-2 text-center">
+  <haptic-copy text="Lorem info sit amet" class="btn-info" />
+</div>
+:::
+
+:::sample-card
+<template>
+  <div class="p-2 text-center">
+    <haptic-copy
+      class="btn-secondary"
+      hide-label
+      tooltip-placement="right"
+      v-b-tooltip.hover.right
+      title="Click to copy"
+      text="Lorem secondary sit amet" />
+  </div>
+</template>
+:::
+
+::: api-table components/HapticCopy.vue :::

package/docs/pages/components/imddb-header/doc.md

@@ -0,0 +1,23 @@
+---
+title: IMDDB Header
+---
+
+A component to create header with generic features.
+
+:::sample-card
+<div class="full-width">
+  <imddb-header no-headroom position="relative" />
+</div>
+:::
+
+::: api-table components/ImddbHeader.vue :::
+
+<style lang="scss">
+  .full-width {
+    overflow: auto;
+
+    .imddb-header {
+      min-width: 990px;
+    }
+  }
+</style>

package/docs/pages/components/ordinal-legend/doc.md

@@ -0,0 +1,44 @@
+---
+badge: unstable
+---
+
+A quick way to create orginal legend:
+
+:::sample-card
+<div class="bg-light p-5">
+  <ordinal-legend :data="icijOffices" value="paris" />
+</div>
+:::
+
+Or horizontal:
+
+:::sample-card
+<div class="bg-light p-5">
+  <ordinal-legend :data="icijOffices" :highlight.sync="highlighthed" horizontal />
+</div>
+:::
+
+It also works with a custom marker path:
+
+:::sample-card
+<div class="bg-light p-5">
+  <ordinal-legend :data="icijOffices" marker-path="M384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192H384z" />
+</div>
+:::
+
+::: api-table components/OrdinalLegend.vue :::
+
+<script>
+  export default {
+    data () {
+      return {
+        highlighthed: 'dc',
+        icijOffices: [
+          { id: 'paris', color: '#6e40aa', label: 'Paris, France' },
+          { id: 'sydney', color: '#ff5e63', label: 'Sydney, Australia' },
+          { id: 'dc', color: '#aff05b', label: 'Washington DC, USA' }
+        ]
+      }
+    }
+  }
+</script>

package/docs/pages/components/range-picker/doc.md

@@ -0,0 +1,86 @@
+---
+title: Range Picker
+description: A component to wrap an HTML element with a range picker overlay.
+---
+
+:::sample-card
+<div class="bg-light p-5">
+  <range-picker v-model="range">
+    <div class="bg-white p-3 text-center text-uppercase">
+      <b-badge>{{ range[0] }}</b-badge> - <b-badge>{{ range[1] }}</b-badge>
+    </div>
+  </range-picker>
+</div>
+:::
+
+You can add offsets (in pixels), a snap fraction or a variant (using Bootstrap theme):
+
+:::sample-card
+<div class="bg-light p-5">
+  <range-picker v-model="range" :start-offset=30 :end-offset=30 :snap=.1 :precision=2 variant="info" hover rounded>
+    <div class="bg-white p-3 text-center text-uppercase">
+      <b-badge>{{ range[0] * 100 }}%</b-badge> - <b-badge>{{ range[1] * 100 }}%</b-badge>
+    </div>
+  </range-picker>
+</div>
+:::
+
+Or in combination with a column chart
+
+:::sample-card
+<div class="bg-light p-5">
+  <range-picker :snap="1 / dataPerYear.length" variant="dark" v-model="rangeYears" class="py-2" hover>
+    <column-chart :bar-padding=0 :bar-margin=20 :highlights="higlightedYears" :data="dataPerYear" :fixed-height="200" no-y-axis no-tooltips />
+  </range-picker>
+</div>
+:::
+
+::: api-table components/RangePicker.vue :::
+
+<script>
+import { range } from 'lodash'
+
+export default {
+  data() {
+    return {
+      range: [.2, .8],
+      rangeYears: [0, 1 / 5],
+      dataPerYear: [
+        { 
+          date: 2018,
+          value: 120
+        },
+        { 
+          date: 2019,
+          value: 100
+        },
+        { 
+          date: 2020,
+          value: 80
+        },
+        { 
+          date: 2021,
+          value: 110
+        },
+        { 
+          date: 2022,
+          value: 130
+        }
+      ]
+    }
+  },
+  computed: {
+    rangeStartYear() {
+      const start = this.rangeYears[0]
+      return this.dataPerYear[Math.ceil(start * (this.dataPerYear.length - 1))].date
+    },
+    rangeEndYear() {
+      const end = this.rangeYears[1]
+      return this.dataPerYear[Math.floor(end * (this.dataPerYear.length - 1))].date
+    },
+    higlightedYears() {
+      return range(this.rangeStartYear, this.rangeEndYear + 1)
+    }
+  }
+}
+</script>

package/docs/pages/components/responsive-iframe/doc.md

@@ -0,0 +1,13 @@
+---
+title: Responsive Iframe
+---
+
+A component to create responsive iframe with Pym.js:
+
+::: sample-card
+<div class="card m-4">
+  <responsive-iframe url="https://projects.icij.org/the-implant-files/graphics/#/adverse-events?no-embeddable-footer=1"></responsive-iframe>
+</div>
+:::
+
+::: api-table components/ResponsiveIframe.vue :::

package/docs/pages/components/scale-legend/doc.md

@@ -0,0 +1,65 @@
+---
+badge: unstable
+---
+
+A quick way to create scale legend:
+
+:::sample-card
+<div class="bg-light p-5 text-center">
+  <scale-legend :width="200" />
+</div>
+:::
+
+Or use different colors
+
+:::sample-card
+<div class="bg-light p-5 text-center">
+  <scale-legend :width="200" color-scale-start="#fafa6e" color-scale-end="teal" />
+</div>
+:::
+
+And a non-continuous scale
+
+:::sample-card
+<div class="bg-light p-5 text-center">
+  <scale-legend :width="200" :min="0" :max="6e4" :color-scale="thresholdScale" />
+</div>
+:::
+
+You can highlight a specific value:
+
+:::sample-card
+<div class="bg-light p-5 text-center">
+  <scale-legend :width="200" :cursor-value="46" />
+</div>
+:::
+
+The cursor can be customized with slot:
+
+:::sample-card
+<div class="bg-light p-5 text-center">
+  <scale-legend :width="200" :cursor-value="10">
+    <template #cursor="{ value }">
+      <div class="bg-dark text-light px-3 py-2">
+        <span v-html="`${value}€`"></span>
+      </div>
+    </template>
+  </scale-legend>
+</div>
+:::
+
+::: api-table components/ScaleLegend.vue :::
+
+<script>
+import * as d3 from 'd3'
+
+export default {
+  computed: {
+    thresholdScale () {
+      return d3.scaleThreshold()
+        .domain([1e4, 2e4, 3e4, 4e4, 5e4])
+        .range(["#D12229", "#F68A1E", "#FDE01A", "#007940", "#24408E", "#732982"])
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,12 @@
+---
+title: Secret Input
+description: A input form for secret value that must not be seen.
+---
+
+:::sample-card
+<div class="p-4">
+  <secret-input value="this is a secret passphrase 🕵️‍♀️" />
+</div>
+:::
+
+::: api-table components/SecretInput.vue :::

package/docs/pages/components/selectable-dropdown/doc.md

@@ -0,0 +1,156 @@
+---
+title: Selectable Dropdown
+---
+
+A component to create an interactive list.
+
+:::sample-card
+<template>
+  <div class="p-2 text-center">
+    <selectable-dropdown v-model="country" :items="allCountries" />
+    <button @click="country = 'Peru'" class="btn btn-outline-secondary mt-2 mx-2">Choose Peru</button>
+    <button @click="country = 'France'" class="btn btn-outline-secondary mt-2 mx-2">Choose France</button>
+  </div>
+</template>
+:::
+
+With a serializer:
+
+:::sample-card
+<template>
+  <div class="p-2 text-center">
+    <selectable-dropdown deactivate-keys :serializer="item => item.toUpperCase()" :items="allCountries"></selectable-dropdown>
+  </div>
+</template>
+:::
+
+With multiple values:
+
+:::sample-card
+<template>
+  <div class="p-2 text-center">
+    <selectable-dropdown deactivate-keys v-model="countries" multiple :items="allCountries"></selectable-dropdown>
+    <button class="btn btn-outline-secondary mt-2 mx-2" @click="countries = twoCountries">Choose two countries</button>
+  </div>
+</template>
+:::
+
+With a dynamic list:
+
+:::sample-card
+<template>
+  <div class="p-2 text-center">
+    <selectable-dropdown deactivate-keys v-model="countries" multiple  :items="filteredCountries"></selectable-dropdown>
+    <button class="btn btn-outline-secondary mt-2 mx-2" @click="filteredCountries = treeCountries">
+      Tree countries
+    </button>
+    <button class="btn btn-outline-secondary mt-2 mx-2" @click="filteredCountries = twoCountries">
+      Two countries
+    </button>
+  </div>
+</template>
+:::
+
+## Collection
+
+You can also use this component to build a list based from a collection of object:
+
+:::sample-card
+<template>
+  <div class="p-2 text-center">
+    <selectable-dropdown deactivate-keys multiple :serializer="item => item.label" :items="countryCollection"></selectable-dropdown>
+  </div>
+</template>
+:::
+
+Some lists are not trivial and comparisons are not easy. For instance a games with similar name:
+
+```js
+const streetFighters = [
+  { label: 'Street Fighter (I)',   uid: 'sf1' },
+  { label: 'Street Fighter (II)',  uid: 'sf2' },
+  { label: 'Street Fighter (III)', uid: 'sf3' },
+  { label: 'Street Fighter (IV)',  uid: 'sf4' },
+  { label: 'Street Fighter (V)',   uid: 'sf5' },
+]
+```
+
+You might want to display a list and prove uniqueness using the `uid`:
+
+:::sample-card
+<template>
+  <div class="p-2 text-center">
+    <selectable-dropdown 
+      :eq="(item, other) => item.uid === other.uid" 
+      :items="streetFighters" 
+      :serializer="item => item.label" 
+      deactivate-keys 
+      multiple 
+      v-model="selectedGames" 
+    />
+    Selected games: {{ selectedGames.join(', ') }}
+  </div>
+</template>
+:::
+
+When you want to display a very big list, like the 36,369 towns in France, the virtual scroller will help you deal with large amount of data:
+
+:::sample-card
+<template>
+  <div class="p-2 text-center">
+    <selectable-dropdown 
+      :items="frenchCities" 
+      deactivate-keys 
+      multiple 
+      scrollerHeight="500px"  
+      v-model="selectedFrenchCities" 
+    />
+    Selected cities: {{ selectedFrenchCities.join(', ') }}
+  </div>
+</template>
+:::
+
+::: api-table components/SelectableDropdown.vue :::
+
+<script>
+  export default {
+    data () {
+      return {
+        country: 'Peru',
+        countries: [],
+        filteredCountries: ['Spain', 'Peru', 'France'],
+        twoCountries: ['Spain', 'France'],
+        treeCountries: ['Spain', 'Peru', 'France'],
+        allCountries: ['France', 'United States of America', 'Spain', 'Peru'],
+        countryCollection: [
+          { label: 'Spain' },
+          { label: 'Peru' },
+          { label: 'France' }
+        ],
+        selectedGames: [],
+        streetFighters: [
+          { label: 'Street Fighter', episode: 'I',   uid: 'sf1' },
+          { label: 'Street Fighter', episode: 'II',  uid: 'sf2' },
+          { label: 'Street Fighter', episode: 'III', uid: 'sf3' },
+          { label: 'Street Fighter', episode: 'IV',  uid: 'sf4' },
+          { label: 'Street Fighter', episode: 'V',   uid: 'sf5' },
+        ],
+        frenchCities:[],
+        selectedFrenchCities:[]
+      }
+    },
+    watch: {
+      country () {
+        console.log('Selected country:', this.country)
+      },
+      countries () {
+        console.log('Selected countries:', this.countries.join(', '))
+      }
+    },
+    async created(){
+        const url = 'https://raw.githubusercontent.com/high54/Communes-France-JSON/master/france.json';
+        const cities = await fetch(url).then(data=> data.json());
+        this.frenchCities = [...new Set(cities.map(city=> city.Code_postal + ' - ' + city.Nom_commune).sort())];
+    }
+  }
+</script>

package/docs/pages/components/sharing-options/doc.md

@@ -0,0 +1,13 @@
+---
+title: Sharing Options
+---
+
+::: sample-card
+<div class="text-center">
+  <div class="card card-body d-inline-block my-4">
+    <sharing-options url="https://www.pirhoo.com/" class="justify-content-center"></sharing-options>
+  </div>
+</div>
+:::
+
+::: api-table components/SharingOptions.vue :::

package/docs/pages/components/sharing-options-link/doc.md

@@ -0,0 +1,36 @@
+---
+title: Sharing Options Link
+---
+
+A link to share a page on a given social network:
+
+:::sample-card
+<div class="p-2 text-center">
+  <sharing-options-link network="twitter" url="https://www.icij.org" class="btn btn-outline-primary mx-1" />
+  <sharing-options-link network="facebook" url="https://www.icij.org" class="btn btn-outline-primary mx-1" />
+  <sharing-options-link network="linkedin" url="https://www.icij.org" class="btn btn-outline-primary mx-1" />
+  <sharing-options-link network="email" url="https://www.icij.org" class="btn btn-outline-primary mx-1" />
+</div>
+:::
+
+Without icon and a custom slot:
+
+:::sample-card
+<div class="p-2 text-center">
+  <sharing-options-link network="twitter" url="https://www.icij.org" no-icon class="btn btn-info">
+    Share twitter
+  </sharing-options-link>
+</div>
+:::
+
+With a custom tag and a custom slot:
+
+:::sample-card
+<div class="p-2 text-center">
+  <sharing-options-link network="twitter" title="Murmur Design System" tag="button" class="btn btn-warning" no-icon>
+    Twitter Button
+  </sharing-options-link>
+</div>
+:::
+
+::: api-table components/SharingOptionsLink.vue :::

package/docs/pages/components/sign-up-form/doc.md

@@ -0,0 +1,13 @@
+:::sample-card
+<div class="m-4">
+  <sign-up-form />
+</div>
+:::
+
+:::sample-card
+<div class="m-4">
+  <sign-up-form variant="secondary" horizontal default-groups="group[9][1],group[9][131072]" />
+</div>
+:::
+
+::: api-table components/SignUpForm.vue :::

package/docs/pages/components/slide-up-down/doc.md

@@ -0,0 +1,28 @@
+A component to create a slide up/down animation (with CSS transitions).
+
+::: sample-card
+<div class="card card-xs mx-auto m-4">
+  <slide-up-down :active="show">
+    <div class="card-body">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+  </slide-up-down>
+  <div class="card-footer text-center">
+    <button @click="show = !show" type="button" class="btn btn-info">
+      Click to toggle
+    </button>
+  </div>
+</div>
+:::
+
+::: api-table components/SlideUpDown.vue ::: 
+
+<script>
+  export default {
+    data () {
+      return {
+        show: true
+      }
+    }
+  }
+</script>