@icij/murmur-next 4.0.0

package/docs/components/DocsHeader.vue

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

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

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

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

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

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

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

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