@icij/murmur-next 4.8.2 → 4.8.4

package/dist/lib/stories/murmur/decorators.d.ts

@@ -7,7 +7,8 @@ export declare const modalDecorator: (buttonLabel: string | undefined, modalTitl
         BModal: any;
     };
     setup(): {
-        show: (id?: import('bootstrap-vue-next').ControllerKey) => void;
+        visible: any;
+        show: () => void;
         buttonLabel: string;
         modalTitle: string | null;
         size: keyof import('bootstrap-vue-next').BaseSize;

package/lib/components/App/AppHeader.vue

@@ -93,10 +93,11 @@
         <b-popover
           v-model="showFollowUsPopover"
           target="follow-us-toggler"
-          placement="bottom-start"
+          placement="bottom-end"
           click
         >
           <follow-us-popover
+            :compact="compactSignUp"
             @update:close="closeFollowUsPopover"
             @keydown.esc="closeFollowUsPopover"
           />
@@ -135,13 +136,18 @@ export interface AppHeaderProps {
    * Target link of the donate button.
    */
   donateUrl?: string
+  /**
+   * Compact layout for the sign-up form in the follow-us popover.
+   */
+  compactSignUp?: boolean
 }
 
 const props = withDefaults(defineProps<AppHeaderProps>(), {
   position: 'fixed',
   noHeadroom: false,
   homeUrl: () => config.get('app.home'),
-  donateUrl: () => config.get('app.donate-url')
+  donateUrl: () => config.get('app.donate-url'),
+  compactSignUp: false
 })
 
 const { t } = useI18n()

package/lib/components/EmbeddableFooter/EmbeddableFooter.vue

@@ -4,9 +4,10 @@
       :href="homeUrl"
       target="_blank"
       class="text-white embeddable-footer__brand"
+      :class="{ 'embeddable-footer__brand--no-divider': hideDivider }"
     >
       <brand
-        :size="40"
+        :size="logoHeight"
         no-border
         class="me-2"
         color="white"
@@ -82,6 +83,14 @@ export interface EmbeddableFooterProps {
    * Sharing option values to bind to the sharing-options component in the bottom-right corner.
    */
   sharingOptionsValues?: Record<string, unknown>
+  /**
+   * Hide the divider (right border) next to the brand.
+   */
+  hideDivider?: boolean
+  /**
+   * Height of the logo in pixels.
+   */
+  logoHeight?: number | string
 }
 
 withDefaults(defineProps<EmbeddableFooterProps>(), {
@@ -90,7 +99,9 @@ withDefaults(defineProps<EmbeddableFooterProps>(), {
   iframeMinHeight: 100,
   iframeMinWidth: 100,
   homeUrl: () => config.get('app.home'),
-  sharingOptionsValues: () => ({})
+  sharingOptionsValues: () => ({}),
+  hideDivider: false,
+  logoHeight: 40
 })
 
 // Reactive state
@@ -103,7 +114,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 @import '../../styles/mixins';
 
 @include keyframes(slideup) {
@@ -146,6 +156,10 @@ onMounted(() => {
     display: flex;
     justify-content: center;
     align-items: center;
+
+    &--no-divider {
+      border-right: none;
+    }
   }
   &__lead {
     flex-grow: 1;
@@ -176,7 +190,7 @@ onMounted(() => {
     right: 0;
     margin: $spacer * 0.25;
 
-    .sharing-options__link {
+    &:deep(.sharing-options__link) {
       opacity: 0;
       animation: slideup 200ms forwards;
       @include animation-delay-loop(0, 10, 50ms);

package/lib/components/FollowUsPopover/FollowUsPopover.vue

@@ -4,9 +4,14 @@
       class="btn btn-link text-secondary follow-us__close"
       @click="closeSignupPopover"
     >
-      <app-icon><i-ph-x /></app-icon>
+      <app-icon>
+        <i-ph-x-bold />
+      </app-icon>
     </button>
-    <sign-up-form class="p-3" />
+    <sign-up-form
+      class="p-3"
+      :compact="compact"
+    />
     <div class="px-3 pb-1 text-uppercase text-muted fw-bold">
       {{ t('follow-us-popover.heading') }}
     </div>
@@ -59,9 +64,17 @@ import { useI18n } from 'vue-i18n'
 import SignUpForm from '@/components/Form/FormSignUp.vue'
 import AppIcon from '@/components/App/AppIcon.vue'
 
-/**
- * FollowUsPopover
- */
+export interface FollowUsPopoverProps {
+  /**
+   * Compact layout for the sign-up form.
+   */
+  compact?: boolean
+}
+
+withDefaults(defineProps<FollowUsPopoverProps>(), {
+  compact: false
+})
+
 const emit = defineEmits(['update:close'])
 const { t } = useI18n()
 

package/lib/components/Form/FormAdvancedLink/FormAdvancedLink.vue

@@ -64,7 +64,7 @@ export interface FormAdvancedLinkProps {
 
 const props = withDefaults(defineProps<FormAdvancedLinkProps>(), {
   link: undefined,
-  title: null,
+  title: 'Link',
   forms: () => ['raw', 'markdown', 'rich', 'html'],
   card: false,
   pills: false,
@@ -137,7 +137,7 @@ function onUpdate(event: string | undefined): void {
       :title="tab.title"
     >
       <advanced-link-form-tab
-        :title="tab.title"
+        :title="title"
         :type="tab.type"
         :data-type="tab.type"
         :compact="small"

package/lib/components/Form/FormEmbed.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 
 import { useI18n } from 'vue-i18n'
+import { BFormCheckbox } from 'bootstrap-vue-next'
 import HapticCopy from '@/components/HapticCopy/HapticCopy.vue'
 import IframeResizer from '@/utils/iframe-resizer'
 
@@ -38,6 +39,10 @@ export interface FormEmbedProps {
    * URL of the iframe code
    */
   url?: string | null
+  /**
+   * Use a switch display for the responsive iframe checkbox
+   */
+  switchResponsive?: boolean
 }
 
 const props = withDefaults(defineProps<FormEmbedProps>(), {
@@ -47,7 +52,8 @@ const props = withDefaults(defineProps<FormEmbedProps>(), {
   height: () => window.innerHeight,
   minWidth: 0,
   minHeight: 0,
-  url: null
+  url: null,
+  switchResponsive: false
 })
 
 const { t } = useI18n()
@@ -107,20 +113,14 @@ function embedCode(withPym = responsiveCheck.value): string {
           />
 
           <div class="d-flex justify-content-between">
-            <div class="form-check align-self-end">
-              <input
-                id="responsiveOptin"
-                v-model="responsiveCheck"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label fw-bold"
-                for="responsiveOptin"
-              >
-                {{ t('embed-form.responsive-optin') }}
-              </label>
-            </div>
+            <b-form-checkbox
+              id="responsiveOptin"
+              v-model="responsiveCheck"
+              class="align-self-end fw-bold"
+              :switch="switchResponsive"
+            >
+              {{ t('embed-form.responsive-optin') }}
+            </b-form-checkbox>
 
             <haptic-copy
               class="btn-link btn-sm text-uppercase fw-bold"

package/lib/components/Form/FormSignUp.vue

@@ -1,13 +1,13 @@
 <template>
   <form
     class="sign-up-form"
-    :class="{ 'sign-up-form--horizontal': horizontal }"
+    :class="classList"
     @submit.prevent="subscribe"
   >
     <fieldset :disabled="frozen">
       <label
         v-if="!noLabel"
-        class="text-uppercase text-muted fw-bold"
+        class="sign-up-form__fieldset__label text-uppercase text-muted fw-bold"
         for="input-email"
       >
         {{ t('sign-up-form.label') }}
@@ -90,6 +90,10 @@ export interface FormSignUpProps {
    * Color variant of the sign-up button
    */
   variant?: ButtonVariant
+  /**
+   * Compact layout with no gap between the input and the submit button.
+   */
+  compact?: boolean
 }
 
 const props = withDefaults(defineProps<FormSignUpProps>(), {
@@ -100,7 +104,8 @@ const props = withDefaults(defineProps<FormSignUpProps>(), {
   horizontal: false,
   tracker: () => config.get('signup-form.tracker'),
   referrer: null,
-  variant: 'primary'
+  variant: 'primary',
+  compact: false
 })
 const emit = defineEmits(['error', 'success', 'subscribed'])
 const { t } = useI18n()
@@ -117,6 +122,11 @@ const { send } = useSendEmail(
   props.defaultGroups
 )
 
+const classList = computed(() => ({
+  'sign-up-form--horizontal': props.horizontal,
+  'sign-up-form--compact': props.compact,
+}))
+
 const variantColorClass = computed(() => {
   return `btn-${props.variant}`
 })
@@ -170,6 +180,32 @@ function unfreeze() {
 <style lang="scss">
 
 .sign-up-form {
+  .sign-up-form__fieldset {
+    &__label {
+      margin-bottom: $spacer-xs;
+    }
+
+    &__group {
+      display: flex;
+      flex-direction: column;
+      gap: $spacer-xs;
+    }
+  }
+
+  &--horizontal .sign-up-form__fieldset__group {
+    flex-direction: row;
+  }
+
+  &--compact {
+    .sign-up-form__fieldset__label {
+      margin-bottom: 0;
+    }
+
+    .sign-up-form__fieldset__group {
+      gap: 0;
+    }
+  }
+
   .sign-up-form__fieldset__group__addon.btn {
     font-size: 0.9em;
   }

package/lib/components/SharingOptions/SharingOptions.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import get from 'lodash/get'
 import reduce from 'lodash/reduce'
-import uniqueId from 'lodash/uniqueId'
 import {
   computed,
+  ref,
   type CSSProperties
 } from 'vue'
 
@@ -12,7 +12,7 @@ import AppIcon from '@/components/App/AppIcon.vue'
 import SharingOptionsLink from '@/components/SharingOptions/SharingOptionsLink.vue'
 import config from '@/config'
 import IframeResizer from '@/utils/iframe-resizer'
-import { BModal, useModal } from 'bootstrap-vue-next'
+import { BModal } from 'bootstrap-vue-next'
 
 interface MetaValuesMap {
   url: string
@@ -21,8 +21,6 @@ interface MetaValuesMap {
   facebook_title: string
   facebook_description: string
   facebook_media: string
-  twitter_media: string
-  twitter_user: string
 }
 
 export interface SharingOptionsProps {
@@ -77,8 +75,10 @@ const props = withDefaults(defineProps<SharingOptionsProps>(), {
   noMeta: false
 })
 
-const embedFormId = uniqueId('embed-form-')
-const { show } = useModal(embedFormId)
+const showEmbedForm = ref(false)
+const show = () => {
+  showEmbedForm.value = true
+}
 const style = computed((): CSSProperties => {
   return {
     'flex-direction': props.direction
@@ -105,14 +105,6 @@ const metaValues = computed((): MetaValuesMap => {
       'sharing-options.media',
       'meta[property="og:image"]'
     ),
-    twitter_media: defaultValueFor(
-      'sharing-options.media',
-      'meta[name="twitter:image"]'
-    ),
-    twitter_user: defaultValueFor(
-      'sharing-options.twitter-user',
-      'meta[name="twitter:site"]'
-    )
   }
 })
 
@@ -152,8 +144,8 @@ function defaultValueFor(key: string, metaSelector?: string): string {
     />
     <sharing-options-link
       class="sharing-options__link"
-      network="twitter"
-      v-bind="valuesFor('twitter')"
+      network="bluesky"
+      v-bind="valuesFor('bluesky')"
     />
     <sharing-options-link
       class="sharing-options__link"
@@ -170,13 +162,15 @@ function defaultValueFor(key: string, metaSelector?: string): string {
       class="sharing-options__link sharing-options__link--embed"
       @click="show"
     >
-      <app-icon><i-ph-code /></app-icon>
+      <app-icon>
+        <i-ph-code-bold />
+      </app-icon>
       <span class="visually-hidden">Embed</span>
     </a>
     <b-modal
-      :id="embedFormId"
+      v-model="showEmbedForm"
       class="text-dark"
-      hide-footer
+      no-footer
       title="Embed on your website"
     >
       <embed-form

package/lib/components/SharingOptions/SharingOptionsLink.vue

@@ -12,11 +12,16 @@ export const $popup: Popup = {
   parent: typeof window !== 'undefined' ? window : null
 }
 
+import type { Component } from 'vue'
 import { SharingPlatform } from '@/enums'
+import IPhEnvelope from '~icons/ph/envelope-bold'
+import IPhFacebookLogoFill from '~icons/ph/facebook-logo-fill'
+import IPhLinkedinLogoFill from '~icons/ph/linkedin-logo-fill'
+import IPhButterflyFill from '~icons/ph/butterfly-fill'
 
 interface SharingPlatformConfig {
   base: string
-  icon: string
+  icon: Component
   args: Record<string, string>
 }
 
@@ -27,7 +32,7 @@ type SharingPlatforms = Record<SharingPlatform, SharingPlatformConfig>
 export const networks: SharingPlatforms = {
   email: {
     base: 'mailto:?',
-    icon: 'envelope',
+    icon: IPhEnvelope,
     args: {
       subject: 'title',
       body: 'description'
@@ -35,7 +40,7 @@ export const networks: SharingPlatforms = {
   },
   facebook: {
     base: 'https://www.facebook.com/sharer.php?',
-    icon: 'facebook-logo',
+    icon: IPhFacebookLogoFill,
     args: {
       u: 'url',
       title: 'title',
@@ -45,31 +50,19 @@ export const networks: SharingPlatforms = {
   },
   linkedin: {
     base: 'https://www.linkedin.com/sharing/share-offsite/?',
-    icon: 'linkedin-logo',
+    icon: IPhLinkedinLogoFill,
     args: {
       url: 'url',
       title: 'title',
       summary: 'description'
     }
   },
-  twitter: {
-    base: 'https://x.com/intent/tweet?',
-    icon: 'x-logo',
-    args: {
-      url: 'url',
-      text: 'title',
-      via: 'user',
-      hashtags: 'hashtags'
-    }
-  },
-  x: {
-    base: 'https://x.com/intent/tweet?',
-    icon: 'x-logo',
+  bluesky: {
+    base: 'https://bsky.app/intent/compose?',
+    icon: IPhButterflyFill,
     args: {
-      url: 'url',
       text: 'title',
-      via: 'user',
-      hashtags: 'hashtags'
+      url: 'url'
     }
   }
 }
@@ -79,20 +72,9 @@ export const networks: SharingPlatforms = {
 import querystring from 'querystring-es3'
 import reduce from 'lodash/reduce'
 import get from 'lodash/get'
-import { computed, reactive, type Component } from 'vue'
+import { computed, reactive } from 'vue'
 
 import AppIcon from '@/components/App/AppIcon.vue'
-import IPhEnvelopeFill from '~icons/ph/envelope-fill'
-import IPhFacebookLogoFill from '~icons/ph/facebook-logo-fill'
-import IPhLinkedinLogoFill from '~icons/ph/linkedin-logo-fill'
-import IPhXLogoFill from '~icons/ph/x-logo-fill'
-
-const iconMap: Record<string, Component> = {
-  'envelope': IPhEnvelopeFill,
-  'facebook-logo': IPhFacebookLogoFill,
-  'linkedin-logo': IPhLinkedinLogoFill,
-  'x-logo': IPhXLogoFill
-}
 
 defineOptions({
   name: 'SharingOptionsLink'
@@ -128,7 +110,7 @@ export interface SharingOptionsLinkProps {
    */
   media?: string | null
   /**
-   * Twitter user
+   * Social media user handle
    */
   user?: string | null
   /**
@@ -176,12 +158,8 @@ const args = computed((): Record<string, string> => {
   return get(networks, [props.network, 'args'], {})
 })
 
-const iconName = computed((): string | null => {
-  return get(networks, [props.network, 'icon'], null)
-})
-
 const iconComponent = computed((): Component | null => {
-  return iconName.value ? iconMap[iconName.value] ?? null : null
+  return get(networks, [props.network, 'icon'], null)
 })
 
 const query = computed((): Record<string, string> => {
@@ -268,7 +246,10 @@ defineExpose({
     @click="handleClick"
   >
     <slot>
-      <app-icon v-if="!noIcon && iconComponent">
+      <app-icon
+        v-if="!noIcon && iconComponent"
+        size="1.2em"
+      >
         <component :is="iconComponent" />
       </app-icon>
       <span class="visually-hidden">{{ name }}</span>

package/lib/config.default.ts

@@ -26,7 +26,6 @@ export default {
   'sharing-options.title': 'Awesome App by ICIJ',
   'sharing-options.description': 'null',
   'sharing-options.media': null,
-  'sharing-options.twitter-user': 'ICIJorg',
   'signup-form.tracker': 'EXTERNAL',
   'signup-form.action':
     'https://icij.us15.list-manage.com/subscribe/post?u=0d48a33b1c24d257734cc2a79&id=992ecfdbb2',

package/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue

@@ -150,6 +150,7 @@ const emit = defineEmits<{
 
 const width = ref(0)
 const height = ref(0)
+const leftAxisRedrawCount = ref(0)
 const leftAxisHeight = ref(0)
 const highlightedKeys = ref(props.highlights)
 const highlightTimeout = ref<ReturnType<typeof setTimeout> | undefined>(undefined)
@@ -214,6 +215,8 @@ const leftAxis = computed(() => {
 })
 
 const leftAxisLabelsWidth = computed(() => {
+  // Track redraw counter to re-measure after axis text is created in the DOM
+  void leftAxisRedrawCount.value
   const selector = '.stacked-column-chart__left-axis__canvas .tick text'
   const defaultWidth = 0
   return (
@@ -477,6 +480,12 @@ watch(sortedData, async () => {
   // Update the left axis only if the bars exists
   if (element) {
     leftAxisHeight.value = element.offsetHeight
+    // First draw creates tick text in the DOM
+    leftAxisCanvas.value.call(leftAxis.value as any)
+    // Invalidate leftAxisLabelsWidth so it re-measures the new tick text
+    leftAxisRedrawCount.value++
+    await nextTick()
+    // Second draw uses the correct tickSize and margins
     leftAxisCanvas.value.call(leftAxis.value as any)
   }
   // Compute label overflow/pushed/hidden states after DOM layout
@@ -517,11 +526,11 @@ watch(sortedData, async () => {
         <span class="stacked-column-chart__legend__item__label">{{ groupName(key) }}</span>
       </li>
     </ul>
-    <div class="d-flex flex-grow-1 position-relative overflow-hidden">
+    <div class="stacked-column-chart__chart d-flex flex-column flex-grow-1 position-relative">
       <svg
         v-show="noDirectLabeling"
         :width="width + 'px'"
-        :height="height + 'px'"
+        :height="(leftAxisHeight + 20) + 'px'"
         class="stacked-column-chart__left-axis"
       >
         <g
@@ -530,7 +539,7 @@ watch(sortedData, async () => {
         />
       </svg>
       <div
-        class="stacked-column-chart__groups d-flex flex-grow-1"
+        class="stacked-column-chart__groups d-flex flex-grow-1 overflow-hidden"
         :style="paddedStyle"
       >
         <div
@@ -577,9 +586,18 @@ watch(sortedData, async () => {
               </teleport>
             </div>
           </div>
-          <div class="stacked-column-chart__groups__item__label small py-2">
-            {{ formatXDatum(datum[labelField]) }}
-          </div>
+        </div>
+      </div>
+      <div
+        class="stacked-column-chart__labels d-flex"
+        :style="paddedStyle"
+      >
+        <div
+          v-for="(datum, i) in sortedData"
+          :key="i"
+          class="stacked-column-chart__groups__item__label flex-grow-1 small py-2 text-center"
+        >
+          {{ formatXDatum(datum[labelField]) }}
         </div>
       </div>
     </div>

package/lib/enums.ts

@@ -80,8 +80,7 @@ export enum SharingPlatform {
   email = 'email',
   facebook = 'facebook',
   linkedin = 'linkedin',
-  twitter = 'twitter',
-  x = 'x'
+  bluesky = 'bluesky'
 }
 
 export enum DonatePeriod {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icij/murmur-next",
-  "version": "4.8.2",
+  "version": "4.8.4",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",