@icij/murmur-next 4.0.1 → 4.0.3

package/lib/styles/lib.scss

@@ -5,10 +5,8 @@
 @import './utilities';
 @import 'bootstrap/scss/_mixins';
 :root,
-[data-bs-theme="light"] {
-
+[data-bs-theme='light'] {
   --input-bg: #{$bs-input-bg};
-
 }
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
@@ -16,4 +14,4 @@
     --input-bg: #{$bs-input-bg-dark};
   }
 }
-$input-bg:var(--input-bg);
+$input-bg: var(--input-bg);

package/lib/styles/mixins.scss

@@ -14,17 +14,17 @@
 }
 
 @mixin animation($animation) {
-  -webkit-animation:$animation;
-  -moz-animation:$animation;
-  -o-animation:$animation;
-  animation:$animation;
+  -webkit-animation: $animation;
+  -moz-animation: $animation;
+  -o-animation: $animation;
+  animation: $animation;
 }
 
-@mixin animation-delay-loop($from:0, $to:10, $delay: 300ms) {
+@mixin animation-delay-loop($from: 0, $to: 10, $delay: 300ms) {
   @for $i from $from through $to {
-      &:nth-child(#{$i}) {
-        animation-delay: $i * $delay;
-      }
+    &:nth-child(#{$i}) {
+      animation-delay: $i * $delay;
+    }
   }
 }
 

package/lib/styles/utilities.scss

@@ -15,4 +15,4 @@
 .jumbotron > .h1 {
   font-family: $jumbotron-font-family;
   font-weight: $jumbotron-font-weight;
-}
+}

package/lib/styles/variables.scss

@@ -1,4 +1,4 @@
-$white:    #fff !default;
+$white: #fff !default;
 $gray-100: #f8f8f8 !default;
 $gray-200: #e9e9e9 !default;
 $gray-300: #dedede !default;
@@ -8,30 +8,30 @@ $gray-600: #696969 !default; // Brand color
 $gray-700: #494949 !default;
 $gray-800: #3c3c3c !default; // Brand color
 $gray-900: #212121 !default;
-$black:    #000 !default;
+$black: #000 !default;
 
-$primary: #ff0000 !default;  // Brand color
+$primary: #ff0000 !default; // Brand color
 $secondary: $gray-500 !default;
-$danger: #8B0707 !default; // Brand color
-$success: #46EC4E !default;
-$info: #0000FF !default;
-$warning: #FFBA00 !default;
+$danger: #8b0707 !default; // Brand color
+$success: #46ec4e !default;
+$info: #0000ff !default;
+$warning: #ffba00 !default;
 $light: $gray-200 !default;
 $dark: #000 !default;
 
 $brand-grays: () !default;
 $brand-grays: map-merge(
   (
-    "gray-lighter": $gray-400,
-    "gray-light":   $gray-500,
-    "gray-dark":    $gray-600,
-    "gray-darker":  $gray-800
+    'gray-lighter': $gray-400,
+    'gray-light': $gray-500,
+    'gray-dark': $gray-600,
+    'gray-darker': $gray-800
   ),
   $brand-grays
 );
 
-$body-bg: $white !default;   // Brand color
-$body-color: $black !default;  // Brand color
+$body-bg: $white !default; // Brand color
+$body-color: $black !default; // Brand color
 $text-muted: $gray-500 !default;
 
 $component-active-bg: $primary !default;
@@ -44,14 +44,22 @@ $enable-rounded: false !default;
 $enable-shadows: true !default;
 $enable-gradients: false !default;
 
-$font-family-sans-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
-$font-family-serif: "Merriweather", Georgia, "Times New Roman", Times, serif !default;
+$font-family-sans-serif:
+  'Poppins',
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  sans-serif !default;
+$font-family-serif: 'Merriweather', Georgia, 'Times New Roman', Times, serif !default;
 
 $headings-font-family: $font-family-sans-serif !default;
 $headings-font-weight: 700 !default;
 
 $jumbotron-bg: $gray-200 !default;
-$jumbotron-font-family: "Anton", $font-family-sans-serif !default;
+$jumbotron-font-family: 'Anton', $font-family-sans-serif !default;
 $jumbotron-font-weight: 400 !default;
 
 $fade-bg: $gray-400 !default;
@@ -60,9 +68,7 @@ $list-group-bg: transparent !default;
 $input-focus-border-color: $secondary !default;
 $bs-input-bg: $gray-100 !default;
 $input-focus-bg: $white !default;
-$input-box-shadow: none !default;
 
-$btn-box-shadow: none !default;
 $btn-font-family: $font-family-sans-serif;
 
 $form-check-input-gutter: 1.5rem !default;

package/lib/types.ts

@@ -1,11 +1,10 @@
 import type { StyleValue } from 'vue'
 
-import {AccordionKey, ParentKey} from '@/keys'
+import { AccordionKey, ParentKey } from '@/keys'
 import { ComputedRef } from 'vue'
 import type { GeoProjection } from 'd3-geo'
 import { Ref } from 'vue'
 
-
 export type Step = symbol | string
 
 export type Accordion = {
@@ -30,16 +29,33 @@ export type BrandStyle = StyleValue & {
   width: string
 }
 
-export type BrandExpansionStyle = Pick<BrandStyle, '--monochrome-color' | 'background'>
-
-export type Variant = 'primary' | 'secondary' | 'danger' | 'info' | 'warning' | 'success' | 'dark' | 'light'
-
-export type MapTransform = { k: number, x: number, y: number, rotateX: number, rotateY : number }
+export type BrandExpansionStyle = Pick<
+  BrandStyle,
+  '--monochrome-color' | 'background'
+>
+
+export type Variant =
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'info'
+  | 'warning'
+  | 'success'
+  | 'dark'
+  | 'light'
+
+export type MapTransform = {
+  k: number
+  x: number
+  y: number
+  rotateX: number
+  rotateY: number
+}
 
 export type ParentMap = {
-  mapRect:Ref<DOMRect>,
-  mapTransform:Ref<MapTransform>,
-  rotatingMapProjection:ComputedRef<GeoProjection|Function>
+  mapRect: Ref<DOMRect>
+  mapTransform: Ref<MapTransform>
+  rotatingMapProjection: ComputedRef<GeoProjection | Function>
 }
 export type ParentMapProvide = {
   [ParentKey]: ParentMap

package/lib/utils/animation.ts

@@ -2,20 +2,20 @@ export class RequestAnimationFrameWrapper {
   live: boolean
   callback: () => void
 
-  constructor () {
+  constructor() {
     this.live = false
     this.callback = () => null
   }
-  start (callback: () => void) {
+  start(callback: () => void) {
     this.live = true
     this.callback = callback
     this.schedule()
   }
-  stop () {
+  stop() {
     this.live = false
     this.callback = () => null
   }
-  schedule () {
+  schedule() {
     this.callback()
     if (this.live) {
       window.requestAnimationFrame(this.schedule.bind(this))

package/lib/utils/assets.ts

@@ -1,45 +1,48 @@
 import { memoize, flatten } from 'lodash'
 
-var assetUniqueIdCounter: number = 0;
+var assetUniqueIdCounter: number = 0
 
-export const injectAsset = memoize(function(file: string, id: string = `dynamic-asset-${assetUniqueIdCounter++}`): Promise<unknown> {
-  
+export const injectAsset = memoize(function (
+  file: string,
+  id: string = `dynamic-asset-${assetUniqueIdCounter++}`
+): Promise<unknown> {
   return new Promise((resolve: (value?: unknown) => void) => {
-    const parent: HTMLElement = document.querySelector("body") || document.querySelector("head")!
-    const parts = file.split(".");
-    const ext = parts[parts.length-1].toLowerCase();
-    switch(ext) {
-      case "js":
-        var script = document.createElement('script');
-        script.setAttribute("type", "text/javascript");
+    const parent: HTMLElement =
+      document.querySelector('body') || document.querySelector('head')!
+    const parts = file.split('.')
+    const ext = parts[parts.length - 1].toLowerCase()
+    switch (ext) {
+      case 'js':
+        var script = document.createElement('script')
+        script.setAttribute('type', 'text/javascript')
         script.onload = resolve
-        parent.appendChild(script);
-        script.setAttribute("src", file);
-        script.setAttribute("id", id);
-      break;
-      case "css":
-        var css = document.createElement('link');
-        css.setAttribute("rel", "stylesheet");
-        css.setAttribute("type", "text/css");
+        parent.appendChild(script)
+        script.setAttribute('src', file)
+        script.setAttribute('id', id)
+        break
+      case 'css':
+        var css = document.createElement('link')
+        css.setAttribute('rel', 'stylesheet')
+        css.setAttribute('type', 'text/css')
         css.onload = resolve
-        parent.appendChild(css);
-        css.setAttribute("href", file);
-        css.setAttribute("id", id);
-      break;
+        parent.appendChild(css)
+        css.setAttribute('href', file)
+        css.setAttribute('id', id)
+        break
     }
   })
 })
 
-export const injectAssets = function(...args: string[]): Promise<void> {
+export const injectAssets = function (...args: string[]): Promise<void> {
   const files = flatten(args)
   return new Promise((resolve: () => void) => {
-    var filesLoaded = 0;
-    var allFilesLoaded = function() {
-      if(++filesLoaded == files.length) {
-        resolve();
+    var filesLoaded = 0
+    var allFilesLoaded = function () {
+      if (++filesLoaded == files.length) {
+        resolve()
       }
     }
-    for(var i=0; i < files.length ; i++) {
+    for (var i = 0; i < files.length; i++) {
       injectAsset(files[i]).then(allFilesLoaded)
     }
   })

package/lib/utils/clipboard.ts

@@ -1,19 +1,25 @@
 import Clipboard from 'clipboard'
 
-export function copyText (text: string, container: Element): Promise<void> {
-  return new Promise(function (resolve: (value?:undefined) => void, reject: (value?: Clipboard.Event) => void) {
+export function copyText(text: string, container: Element): Promise<void> {
+  return new Promise(function (
+    resolve: (value?: undefined) => void,
+    reject: (value?: Clipboard.Event) => void
+  ) {
     const fakeElement = document.createElement('button')
     // Use the document body as container is no valid object is provided
     container = typeof container === 'object' ? container : document.body
 
-    const clipboard: Clipboard = new Clipboard(fakeElement, { text: () => text, container })
+    const clipboard: Clipboard = new Clipboard(fakeElement, {
+      text: () => text,
+      container
+    })
 
     clipboard.on('success', () => {
       clipboard.destroy()
       resolve()
     })
 
-    clipboard.on('error', error => {
+    clipboard.on('error', (error) => {
       clipboard.destroy()
       reject(error)
     })
@@ -22,7 +28,7 @@ export function copyText (text: string, container: Element): Promise<void> {
   })
 }
 
-export function copyHtml (html: string, plain: string) {
+export function copyHtml(html: string, plain: string) {
   interface ClipboardEvent extends Event {
     clipboardData: {
       setData: (attribute: string, value: string) => void
@@ -30,12 +36,12 @@ export function copyHtml (html: string, plain: string) {
   }
 
   function listener(event: ClipboardEvent) {
-    event.clipboardData.setData("text/html", html)
-    event.clipboardData.setData("text/plain", plain)
+    event.clipboardData.setData('text/html', html)
+    event.clipboardData.setData('text/plain', plain)
     event.preventDefault()
   }
 
-  document.addEventListener("copy", listener as EventListener)
-  document.execCommand("copy")
-  document.removeEventListener("copy", listener as EventListener)
+  document.addEventListener('copy', listener as EventListener)
+  document.execCommand('copy')
+  document.removeEventListener('copy', listener as EventListener)
 }

package/lib/utils/iframe-resizer.ts

@@ -12,29 +12,34 @@ const initialHref = window.location.href
 export default class IframeResizer {
   initializer: Promise<PymChild>
 
-  constructor () {
-    this.initializer = injectAssets('//pym.nprapps.org/pym.v1.min.js').then(() => {
-      pymChild = pymChild || new window.pym.Child({ polling: 300 })
-      return pymChild
-    })
+  constructor() {
+    this.initializer = injectAssets('//pym.nprapps.org/pym.v1.min.js').then(
+      () => {
+        pymChild = pymChild || new window.pym.Child({ polling: 300 })
+        return pymChild
+      }
+    )
   }
-  sendHeight (): Promise<void> {
-    return this.initializer.then(pymChild => pymChild.sendHeight())
+  sendHeight(): Promise<void> {
+    return this.initializer.then((pymChild) => pymChild.sendHeight())
   }
-  static create (): IframeResizer {
+  static create(): IframeResizer {
     return new IframeResizer()
   }
-  static template(url: string, id: string = 'icij-' + Date.now().toString(32)): string {
+  static template(
+    url: string,
+    id: string = 'icij-' + Date.now().toString(32)
+  ): string {
     return [
       `<script type="text/javascript" src="https://pym.nprapps.org/pym.v1.min.js"></script>`,
       `<div id="${id}"></div>`,
       `<script>`,
       `const icijIframe = new pym.Parent("${id}", "${IframeResizer.deletePymParams(url)}", {})`,
-      `</script>`,
+      `</script>`
     ].join('\n')
   }
   static deletePymParams(href: string = initialHref): string {
-    const url = new URL(href);
+    const url = new URL(href)
     // Remove all unwanted param
     for (const param of pymParams) {
       url.searchParams.delete(param)
@@ -42,8 +47,8 @@ export default class IframeResizer {
     // Rebuild the URL
     return url.href
   }
-  static isEmbedded (href: string = initialHref): boolean {
+  static isEmbedded(href: string = initialHref): boolean {
     const url = new URL(href)
-    return every(pymParams, param => url.searchParams.has(param))
+    return every(pymParams, (param) => url.searchParams.has(param))
   }
 }

package/lib/utils/placeholder.ts

@@ -1,4 +1,11 @@
-import { BoxStyle, ContentPlaceholderStyledRow, ContentPlaceholderRow, ContentPlaceholderRowBoxes, ContentPlaceholderStyledRows, ContentPlaceholderRows } from "@/utils/placeholderTypes"
+import {
+  BoxStyle,
+  ContentPlaceholderStyledRow,
+  ContentPlaceholderRow,
+  ContentPlaceholderRowBoxes,
+  ContentPlaceholderStyledRows,
+  ContentPlaceholderRows
+} from '@/utils/placeholderTypes'
 
 export function isFlexBasis(value: string | number): boolean {
   return Number(value).toString() === value.toString()
@@ -8,24 +15,37 @@ export function isWidth(value: string | number): boolean {
   const valueAsStr = String(value)
   const cssSuffix = ['px', '%', 'em', 'rem']
   let checkState = false
-  cssSuffix.forEach(suffix => {
-    if (Number(valueAsStr.split(suffix)[0]) &&
+  cssSuffix.forEach((suffix) => {
+    if (
+      Number(valueAsStr.split(suffix)[0]) &&
       valueAsStr.split(suffix)[1] === '' &&
-      valueAsStr.split(suffix).length === 2) {
+      valueAsStr.split(suffix).length === 2
+    ) {
       checkState = true
     }
   })
   return checkState
 }
 
-export function getBoxStyle(left: number, width: number, isLast: boolean, subClass: string = 'box'): BoxStyle[] {
+export function getBoxStyle(
+  left: number,
+  width: number,
+  isLast: boolean,
+  subClass: string = 'box'
+): BoxStyle[] {
   const arr: BoxStyle[] = []
 
   if (left !== 0) {
     if (isFlexBasis(left)) {
-      arr.push({ style: `flex-grow: ${left}; flex-shrink: 0; flex-basis: 0;`, subClass })
+      arr.push({
+        style: `flex-grow: ${left}; flex-shrink: 0; flex-basis: 0;`,
+        subClass
+      })
     } else if (isWidth(left)) {
-      arr.push({ style: `flex-grow: 0; flex-shrink: 0; flex-basis: ${left};`, subClass })
+      arr.push({
+        style: `flex-grow: 0; flex-shrink: 0; flex-basis: ${left};`,
+        subClass
+      })
     }
   }
   if (isFlexBasis(width)) {
@@ -34,26 +54,37 @@ export function getBoxStyle(left: number, width: number, isLast: boolean, subCla
     arr.push({ style: `flex-grow: 0; flex-shrink: 0; flex-basis: ${width};` })
   }
   if (isLast) {
-    arr.push({ style: 'flex-grow: 1; flex-shrink: 0; flex-basis: 0;', subClass })
+    arr.push({
+      style: 'flex-grow: 1; flex-shrink: 0; flex-basis: 0;',
+      subClass
+    })
   }
   return arr
 }
 
-export function formatRows(rows: ContentPlaceholderRows, subClass: string = 'box'): ContentPlaceholderStyledRows {
-  const rowArr: ContentPlaceholderStyledRows = rows.map((row: ContentPlaceholderRow) => {
-    // Will contain all boxes in 
-    const rowBoxes: Array<BoxStyle> = []
-    // Create placeholder row with initial height
-    const rowObj: ContentPlaceholderStyledRow = { height: row.height, boxes: [] }
-    // Add style
-    row.boxes.forEach((box: Array<any>, index: number) => {
-      const isLast: boolean = index === row.boxes.length - 1
-      // Merge the box styles
-      rowBoxes.push(...getBoxStyle(box[0], box[1], isLast, subClass))
-    })
-    rowObj.boxes = rowBoxes
-    return rowObj
-  })
+export function formatRows(
+  rows: ContentPlaceholderRows,
+  subClass: string = 'box'
+): ContentPlaceholderStyledRows {
+  const rowArr: ContentPlaceholderStyledRows = rows.map(
+    (row: ContentPlaceholderRow) => {
+      // Will contain all boxes in
+      const rowBoxes: Array<BoxStyle> = []
+      // Create placeholder row with initial height
+      const rowObj: ContentPlaceholderStyledRow = {
+        height: row.height,
+        boxes: []
+      }
+      // Add style
+      row.boxes.forEach((box: Array<any>, index: number) => {
+        const isLast: boolean = index === row.boxes.length - 1
+        // Merge the box styles
+        rowBoxes.push(...getBoxStyle(box[0], box[1], isLast, subClass))
+      })
+      rowObj.boxes = rowBoxes
+      return rowObj
+    }
+  )
 
   return rowArr
 }

package/lib/utils/placeholderTypes.ts

@@ -1,19 +1,19 @@
 import type { StyleValue } from 'vue'
 
 export interface BoxStyle {
-  style: StyleValue,
+  style: StyleValue
   subClass?: string
 }
 
 export type ContentPlaceholderRowBoxes = Array<Array<number | string>>
 
 export interface ContentPlaceholderRow {
-  height: number | string,
+  height: number | string
   boxes: ContentPlaceholderRowBoxes
 }
 
 export interface ContentPlaceholderStyledRow {
-  height: number | string,
+  height: number | string
   boxes: Array<BoxStyle>
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icij/murmur-next",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",
@@ -17,7 +17,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
-    "format": "prettier --write lib/",
+    "format": "prettier --write lib/ stories/ .storybook/ tests/",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest",
@@ -104,6 +104,11 @@
   "peerDependencies": {
     "vue": "^3.4.19"
   },
+  "prettier": {
+    "singleQuote": true,
+    "semi": false,
+    "trailingComma": "none"
+  },
   "resolutions": {
     "jackspeak": "2.1.1"
   }