@icij/murmur-next 4.0.0 → 4.0.3

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>

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')