@icij/murmur-next 4.0.0 → 4.0.1

package/docs/components/CollapsibleBlock.vue

@@ -1,122 +0,0 @@
-<template>
-  <component :is="tag" class="collapsible-block card mb-5" :class="{ 'collapsible-block--visible': visible }">
-    <div class="d-flex">
-      <a class="py-3 px-4 d-block collapsible-block__caret" @click="toggle">
-        <fa icon="caret-right" :rotation="show ? 90 : null" />
-      </a>
-      <div class="flex-grow-1">
-        <slot name="label" v-bind:label="label">
-          <a v-if="label" class="py-3 pe-4 collapsible-block__label d-block" @click="toggle">
-            {{ label }}
-          </a>
-        </slot>
-      </div>
-    </div>
-    <b-collapse :visible="show" class="collapsible-block__body">
-      <slot v-if="useSlot" />
-      <pre v-else-if="json"><code class="hljs language-json" v-html="formattedJson"></code></pre>
-    </b-collapse>
-  </component>
-</template>
-
-<script>
-  import hljs from 'highlight.js'
-  import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight'
-
-  import { library, default as Fa } from '@/components/Fa'
-
-  export default {
-    name: 'CollapsibleBlock',
-    components: {
-      Fa
-    },
-    beforeMount () {
-      library.add(faCaretRight)
-    },
-    model: {
-      prop: 'visible',
-      event: 'input'
-    },
-    props: {
-      visible: {
-        type: Boolean,
-        default: false
-      },
-      tag: {
-        type: [String, Object],
-        default: 'div'
-      },
-      label: {
-        type: String,
-        default: null
-      },
-      json: {
-        default: null
-      }
-    },
-    data() {
-      return {
-        show: this.visible
-      }
-    },
-    watch: {
-      visible (value) {
-        if (value !== this.show) {
-          this.show = value
-        }
-      },
-      show (value, oldValue) {
-        if (value !== oldValue) {
-          this.$emit('input', this.show)
-        }
-      }
-    },
-    created() {
-      this.show = this.visible
-    },
-    mounted() {
-      this.show = this.visible
-    },
-    beforeDestroy() {
-      this.show = false
-    },
-    methods: {
-      toggle() {
-        this.show = !this.show
-      }
-    },
-    computed: {
-      useSlot() {
-        return !!this.$slots.default && !!this.$slots.default.length
-      },
-      stringifiedJson() {
-        return JSON.stringify(this.json, null, 2)
-      },
-      formattedJson() {
-        const language = 'json'
-        const { value } = hljs.highlight(this.stringifiedJson, { language })
-        return value
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  .collapsible-block {
-
-    &__caret, &__label {
-      cursor: pointer;
-    }
-
-    &__caret .svg-inline--fa{
-      transition: transform 300ms;
-    }
-
-    &__body {
-      // Exception for code block
-      & *[class^=language-] pre {
-        margin-bottom: 0;
-      }
-    }
-  }
-</style>

package/docs/components/DocsHeader.vue

@@ -1,68 +0,0 @@
-<template>
-  <div v-if="showHeader" class="docs-header">
-    <div class="docs-header__container">
-      <div v-if="showBreadcrumb" class="docs-header__container__breadcrumb">
-        <a v-for="(item, i) in breadcrumb" :key="i" class="docs-header__container__breadcrumb">
-          {{ item }}
-        </a>
-      </div>
-      <h1 class="docs-header__container__title">
-        {{ title }}
-      </h1>
-      <p class="lead m-0">
-        {{ description }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-import get from 'lodash/get'
-import startCase from 'lodash/startCase'
-
-export default {
-  name: 'DocsMenu',
-  computed: {
-    title() {
-      return get(this, '$route.meta.title', '')
-    },
-    section() {
-      return get(this, '$route.meta.section')
-    },
-    breadcrumb() {
-      return get(this, '$route.meta.breadcrumb', [this.section]).map(startCase)
-    },
-    description() {
-      return get(this, '$route.meta.description', '')
-    },
-    showHeader() {
-      return this.title !== ''
-    },
-    showBreadcrumb() {
-      return this.breadcrumb.length > 0
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../styles/variables.scss';
-
-.docs-header {
-  background: $docs-header-bg;
-  border-bottom: 1px solid $docs-header-border-color;
-
-  &__container {
-    max-width: $app-main-max-width;
-    margin: auto;
-    padding: $spacer * 1.5 $spacer;
-
-    &__title {
-      padding: 0;
-      text-transform: uppercase;
-      font-family: $jumbotron-font-family;
-      font-weight: $jumbotron-font-weight;
-    }
-  }
-}
-</style>

package/docs/components/DocsMenu.vue

@@ -1,201 +0,0 @@
-<template>
-  <div class="docs-menu d-flex flex-column justify-content-between">
-    <div>
-      <div class="docs-menu__brand d-none d-md-flex">
-        <textured-deck to="/" tag="router-link" value="rock" class="docs-menu__brand__logo">
-          <img src="@/assets/images/murmur-white.png" alt="" height="110px" />
-        </textured-deck>
-        <div class="docs-menu__brand__version">
-          <a class="small d-block text-white" href="https://www.npmjs.com/package/@icij/murmur" target="_blank">
-            <strong>Murmur</strong> {{ version }}
-          </a>
-        </div>
-      </div>
-      <docs-menu-section v-for="section in sections" :key="section.name" v-bind="section"></docs-menu-section>
-    </div>
-    <div class="docs-menu__footer d-flex align-items-center justify-content-between">
-      <a href="https://icij.org" target="_blank" class="d-flex align-items-center">
-        <brand-expansion dark mode="medium" size="26" class="docs-menu__footer__logo me-2" />
-        <span class="sr-only">A project by ICIJ</span>
-      </a>
-      <a :href="repository.url" target="_blank">
-        <fa :icon="['fab', 'github']" size="2x" />
-      </a>
-    </div>
-  </div>
-</template>
-
-<script>
-import { faPuzzlePiece } from '@fortawesome/free-solid-svg-icons/faPuzzlePiece'
-import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub'
-
-import { filterRoutes } from '../routes'
-import DocsMenuSection from './DocsMenuSection'
-
-import packageInfo from '$package'
-import { default as Fa, library } from '@/components/Fa'
-import BrandExpansion from '@/components/BrandExpansion.vue'
-import TexturedDeck from '@/components/TexturedDeck.vue'
-
-library.add(faPuzzlePiece, faGithub)
-
-export default {
-  name: 'DocsMenu',
-  components: {
-    DocsMenuSection,
-    Fa,
-    BrandExpansion,
-    TexturedDeck
-  },
-  props: {
-    sections: {
-      type: Array,
-      default() {
-        return [
-          {
-            name: 'Getting started',
-            routes: filterRoutes({ meta: { section: 'getting-started' } })
-          },
-          {
-            name: 'Visual guidelines',
-            routes: filterRoutes({ meta: { section: 'visual' } })
-          },
-          {
-            name: 'Components',
-            routes: filterRoutes({ meta: { section: 'components' } }),
-            icon: faPuzzlePiece
-          },
-          {
-            name: 'Data Visualisations',
-            routes: filterRoutes({ meta: { section: 'datavisualisation' } })
-          },
-          {
-            name: 'Maps',
-            routes: filterRoutes({ meta: { section: 'maps' } })
-          },
-          {
-            name: 'utilities',
-            routes: filterRoutes({ meta: { section: 'utilities' } })
-          }
-        ]
-      }
-    }
-  },
-  data() {
-    return {
-      version: packageInfo.version,
-      repository: packageInfo.repository
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import '../styles/variables.scss';
-
-.docs-menu {
-  padding: $spacer * 1.5 $spacer $spacer;
-  min-height: 100vh;
-  height: 100%;
-  color: $docs-menu-color;
-
-  &__brand {
-    display: flex;
-    margin-bottom: $spacer * 3;
-
-    &__logo {
-      display: block;
-      border: 1px solid $primary;
-
-      img {
-        width: 110px;
-        max-width: 100%;
-      }
-    }
-
-    &__version {
-      background: $primary;
-      width: 1em * $line-height-base;
-
-      & > * {
-        transform: rotate(90deg) translateY(-100%);
-        transform-origin: left top;
-        width: 110px;
-        text-align: center;
-      }
-    }
-  }
-
-  &__footer {
-    padding: $spacer;
-    background: mix($light, $docs-menu-bg, 10%);
-    box-shadow: 0 0 0 $spacer $docs-menu-bg;
-    border-radius: $border-radius-sm;
-    color: $light;
-    font-size: 0.9em;
-    position: sticky;
-    bottom: $spacer;
-
-    a {
-      color: inherit;
-
-      &:hover {
-        color: inherit;
-        opacity: 0.7;
-      }
-    }
-
-    &__logo {
-      height: 2em;
-    }
-  }
-
-  &__link {
-    color: $docs-menu-color;
-    position: relative;
-    padding: $spacer * 0.25 $spacer * 0.75;
-    display: inline-block;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-
-    &__icon {
-      color: $docs-menu-muted;
-
-      .router-link-exact-active & {
-        color: $primary;
-      }
-    }
-
-    &:hover {
-      color: $docs-menu-color;
-      text-decoration: none;
-
-      &:before {
-        background: rgba($docs-menu-muted, 0.1);
-      }
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      border-radius: 1em * $line-height-base;
-    }
-
-    &.router-link-exact-active:before {
-      border: 1px solid rgba(white, 0.5);
-      background: rgba($docs-menu-muted, 0.2);
-    }
-  }
-
-  &__badge {
-    border-radius: $border-radius;
-    opacity: 0.7;
-  }
-}
-</style>

package/docs/components/DocsMenuSection.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="docs-menu__section pb-2" :class="{ 'docs-menu__section--show-menu': showMenu }">
-    <h4 class="docs-menu__section__heading" @click="showMenu = !showMenu">
-      <fa :icon="headingIcon" class="float-end" />
-      {{ name }}
-    </h4>
-    <b-collapse :visible="active" tag="ul" class="list-unstyled mb-0 pb-0">
-      <li
-        v-for="route in routes"
-        :key="route.name"
-        class="docs-menu__section__item d-flex justify-content-between align-items-center mb-2"
-      >
-        <router-link :to="route.path" class="docs-menu__link">
-          <fa :icon="route.icon || icon" class="docs-menu__link__icon me-1" />
-          {{ routeTitle(route) }}
-        </router-link>
-        <span v-if="routeHasBadge(route)" class="badge badge-secondary docs-menu__badge">
-          {{ route.meta.badge }}
-        </span>
-      </li>
-    </b-collapse>
-  </div>
-</template>
-
-<script>
-import some from 'lodash/some'
-import startCase from 'lodash/startCase'
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown'
-import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp'
-import { faBook } from '@fortawesome/free-solid-svg-icons/faBook'
-
-import { default as Fa, library } from '@/components/Fa'
-
-library.add(faAngleDown)
-library.add(faAngleUp)
-library.add(faBook)
-
-export default {
-  name: 'DocsMenuSection',
-  components: {
-    Fa
-  },
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    routes: {
-      type: Array,
-      default: () => []
-    },
-    icon: {
-      type: Object,
-      default: () => faBook
-    }
-  },
-  data() {
-    return {
-      showMenu: this.hasActiveRoute
-    }
-  },
-  computed: {
-    active() {
-      return this.showMenu
-    },
-    hasActiveRoute() {
-      return some(this.routes, (r) => r.path === this.$route.path)
-    },
-    headingIcon() {
-      return this.showMenu ? faAngleUp : faAngleDown
-    }
-  },
-  watch: {
-    $route() {
-      this.showMenu = this.hasActiveRoute
-    }
-  },
-  methods: {
-    routeTitle(route) {
-      return route.meta.title || startCase(route.name)
-    },
-    routeHasBadge(route) {
-      return route.meta && route.meta.badge
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import '../styles/variables.scss';
-
-.docs-menu__section {
-  padding: 0 $spacer 0 $spacer;
-
-  &__heading {
-    font-size: 0.9rem;
-    font-weight: 400;
-    font-family: $font-family-sans-serif;
-    text-transform: uppercase;
-    margin-bottom: $spacer;
-    color: $text-muted;
-    cursor: pointer;
-
-    &:hover {
-      color: white;
-    }
-  }
-}
-</style>

package/docs/components/EditLink.vue

@@ -1,49 +0,0 @@
-<template>
-  <div v-if="path" class="edit-link mb-4 pt-4">
-    <fa :icon="faGithub" />
-    Want to help?
-    <repository-link :path="path">
-      Edit this page on GitHub!
-    </repository-link>
-  </div>
-</template>
-
-<script>
-  import get from 'lodash/get'
-  import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub'
-
-  export default {
-    props: {
-      route: {
-        type: Object,
-        default: null
-      }
-    },
-    data () {
-      return {
-        faGithub
-      }
-    },
-    computed: {
-      path () {
-        return get(this.route || this.$route, 'meta.resourcePath')
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  @import '../styles/variables.scss';
-
-  .edit-link {
-    max-width: $app-main-max-width;
-    padding: 0 $spacer;
-    margin: auto;
-    opacity: 0.5;
-    border-top: 1px solid $card-border-color;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-</style>

package/docs/components/OutboundLink.vue

@@ -1,13 +0,0 @@
-<template functional>
-  <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
-    <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
-    <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
-  </svg>
-</template>
-
-<style>
-  .icon.outbound {
-    color: #aaa;
-    display: inline-block;
-  }
-</style>

package/docs/components/PalettePresenter.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="palette-presenter">
-    <ul class="list-unstyled palette-presenter__list">
-      <li v-for="(value, name) in colors" :key="name" :style="bgStyle(name)" class="palette-presenter__list__item">
-        <span class="fw-bold palette-presenter__list__item__name">
-          {{ name }}
-        </span>
-        <span class="fw-bold palette-presenter__list__item__value d-flex align-items-center">
-          <span class="palette-presenter__list__item__value__hex">
-            {{ value }}
-          </span>
-          <haptic-copy class="btn-sm btn-link ms-2" hide-label :text="value.hex" />
-        </span>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import chroma from 'chroma-js'
-
-export default {
-  props: {
-    colors: {
-      type: Object
-    }
-  },
-  methods: {
-    bgStyle(name) {
-      return {
-        backgroundColor: this.colors[name],
-        color: this.textContrast(name)
-      }
-    },
-    textContrast(name) {
-      const hex = this.colors[name]
-      return chroma.contrast(hex, '#000') > 8 ? '#000' : '#fff'
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../styles/variables.scss';
-@import 'node_modules/bootstrap/scss/_mixins.scss';
-
-.palette-presenter {
-  &__list {
-    margin: 0 -1 * $spacer;
-    display: flex;
-    flex-wrap: wrap;
-
-    &__item {
-      padding: 0;
-      display: block;
-      position: relative;
-      flex: calc(50% - #{$spacer * 2}) 0;
-      margin: $spacer;
-      box-shadow: inset 0 0 0 1px rgba(#000, 0.1);
-
-      @include media-breakpoint-down(md) {
-        flex: 100% 0;
-      }
-
-      &:after {
-        content: '';
-        display: block;
-        width: 100%;
-        padding-top: 30%;
-        min-height: 4rem * $line-height-base;
-      }
-
-      &__name {
-        position: absolute;
-        top: $spacer;
-        left: $spacer;
-      }
-
-      &__value {
-        position: absolute;
-        right: $spacer;
-        bottom: $spacer;
-        padding: 0.25em;
-        padding-left: 0.5em;
-        background: rgba(#fff, 0.2);
-        box-shadow: 0 0 0 1px rgba(#000, 0.1);
-
-        button {
-          color: inherit;
-          background: rgba(#fff, 0.2);
-        }
-      }
-    }
-  }
-}
-</style>

package/docs/components/RepositoryLink.vue

@@ -1,28 +0,0 @@
-<template>
-  <a :href="href" target="_blank"><slot /></a>
-</template>
-
-<script>
-import join from 'url-join'
-
-import packageInfo from '$package'
-
-export default {
-  name: 'RepositoryLink',
-  props: {
-    path: {
-      type: String,
-      default: ''
-    },
-    branch: {
-      type: String,
-      default: 'master'
-    }
-  },
-  computed: {
-    href() {
-      return join(packageInfo.repository.url, 'tree', this.branch, this.path)
-    }
-  }
-}
-</script>