@guardian/commercial-core 4.3.0 → 4.6.0

package/dist/cjs/ad-sizes.d.ts

@@ -1,3 +1,4 @@
+import type { Breakpoint } from './lib/breakpoint';
 declare type AdSizeString = 'fluid' | `${number},${number}`;
 /**
  * Store ad sizes in a way that is compatible with google-tag but also accessible via
@@ -24,9 +25,8 @@ declare class AdSize extends Array<number> {
     get width(): number;
     get height(): number;
 }
-declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
-declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
-declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
+declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper' | 'cascade';
+declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky' | 'crossword-banner';
 declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
 declare type SlotSizeMappings = Record<SlotName, SizeMapping>;
 declare const createAdSize: (width: number, height: number) => AdSize;

package/dist/cjs/ad-sizes.js

@@ -62,6 +62,7 @@ const adSizesPartial = {
     outstreamDesktop: createAdSize(620, 350),
     outstreamGoogleDesktop: createAdSize(550, 310),
     outstreamMobile: createAdSize(300, 197),
+    cascade: createAdSize(940, 230),
 };
 const adSizes = {
     ...adSizesPartial,
@@ -243,6 +244,10 @@ const slotSizeMappings = {
     'mobile-sticky': {
         mobile: [adSizes.mobilesticky],
     },
+    'crossword-banner': {
+        tablet: [adSizes.outOfPage, adSizes.empty, adSizes.leaderboard],
+        phablet: [adSizes.outOfPage, adSizes.empty, adSizes.leaderboard],
+    },
 };
 exports.slotSizeMappings = slotSizeMappings;
 const getAdSize = (size) => adSizes[size];

package/dist/cjs/create-ad-slot.d.ts

@@ -1,9 +1,18 @@
-import type { AdSize } from './ad-sizes';
+import type { AdSize, SizeMapping } from './ad-sizes';
 declare type SlotName = 'im' | 'high-merch' | 'high-merch-lucky' | 'high-merch-paid' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
 declare type CreateSlotOptions = {
     classes?: string;
     name?: string;
     sizes?: Record<string, AdSize[]>;
 };
-export declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
-export {};
+/**
+ * Given default size mappings and additional size mappings from
+ * the createAdSlot options parameter.
+ *
+ * 1. Check that the options size mappings use known device names
+ * 2. If so concat the size mappings
+ *
+ */
+declare const concatSizeMappings: (defaultSizeMappings: SizeMapping, optionSizeMappings?: SizeMapping) => SizeMapping;
+declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
+export { createAdSlot, concatSizeMappings };

package/dist/cjs/create-ad-slot.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createAdSlot = void 0;
+exports.concatSizeMappings = exports.createAdSlot = void 0;
 const ad_sizes_1 = require("./ad-sizes");
+const breakpoint_1 = require("./lib/breakpoint");
 const adSlotIdPrefix = 'dfp-ad--';
 const adSlotConfigs = {
     im: {
@@ -102,24 +103,15 @@ const createClasses = (slotName, classes) => [...(classes?.split(' ') ?? []), sl
  * 2. If so concat the size mappings
  *
  */
-const concatSizeMappings = (defaultSizeMappings, optionSizeMappings) => {
-    if (!optionSizeMappings)
-        return defaultSizeMappings;
-    const concatenatedSizeMappings = { ...defaultSizeMappings };
-    const optionDevices = Object.keys(optionSizeMappings); // ['mobile', 'desktop']
-    for (let i = 0; i < optionDevices.length; i++) {
-        const device = optionDevices[i];
-        if (optionSizeMappings[device] && defaultSizeMappings[device]) {
-            const optionSizeMappingsForDevice = optionSizeMappings[device];
-            const defaultSizeMappingsForDevice = defaultSizeMappings[device];
-            if (defaultSizeMappingsForDevice && optionSizeMappingsForDevice) {
-                // TODO can we do concatenatedSizeMappings[device]?.concat ?
-                concatenatedSizeMappings[device] = (concatenatedSizeMappings[device] ?? []).concat(optionSizeMappingsForDevice);
-            }
-        }
+const concatSizeMappings = (defaultSizeMappings, optionSizeMappings = {}) => Object.entries(optionSizeMappings).reduce((sizeMappings, [breakpoint, optionSizes]) => {
+    // Only perform concatenation if breakpoint is of the correct type
+    if ((0, breakpoint_1.isBreakpoint)(breakpoint)) {
+        // Concatenate the option sizes onto any existing sizes present for a given breakpoint
+        sizeMappings[breakpoint] = (sizeMappings[breakpoint] ?? []).concat(optionSizes);
     }
-    return concatenatedSizeMappings;
-};
+    return sizeMappings;
+}, { ...defaultSizeMappings });
+exports.concatSizeMappings = concatSizeMappings;
 /**
  * Convert size mappings to a string that will be added to the ad slot
  * data attributes.

package/dist/cjs/index.d.ts

@@ -8,13 +8,15 @@ export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export type { ThirdPartyTag } from './types';
 export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
+export { isBreakpoint } from './lib/breakpoint';
+export type { Breakpoint } from './lib/breakpoint';
 export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, SlotName, } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
-export { createAdSlot } from './create-ad-slot';
+export { createAdSlot, concatSizeMappings } from './create-ad-slot';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';
 export type { ContentTargeting } from './targeting/content';

package/dist/cjs/index.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.createAdSlot = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
+exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.concatSizeMappings = exports.createAdSlot = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.isBreakpoint = exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
 var ias_1 = require("./third-party-tags/ias");
 Object.defineProperty(exports, "ias", { enumerable: true, get: function () { return ias_1.ias; } });
 var permutive_1 = require("./third-party-tags/permutive");
@@ -47,6 +47,8 @@ Object.defineProperty(exports, "adSizes", { enumerable: true, get: function () {
 Object.defineProperty(exports, "getAdSize", { enumerable: true, get: function () { return ad_sizes_1.getAdSize; } });
 Object.defineProperty(exports, "slotSizeMappings", { enumerable: true, get: function () { return ad_sizes_1.slotSizeMappings; } });
 Object.defineProperty(exports, "createAdSize", { enumerable: true, get: function () { return ad_sizes_1.createAdSize; } });
+var breakpoint_1 = require("./lib/breakpoint");
+Object.defineProperty(exports, "isBreakpoint", { enumerable: true, get: function () { return breakpoint_1.isBreakpoint; } });
 var detect_ad_blocker_1 = require("./detect-ad-blocker");
 Object.defineProperty(exports, "isAdBlockInUse", { enumerable: true, get: function () { return detect_ad_blocker_1.isAdBlockInUse; } });
 var permutive_2 = require("./permutive");
@@ -62,6 +64,7 @@ Object.defineProperty(exports, "buildAdsConfigWithConsent", { enumerable: true,
 Object.defineProperty(exports, "disabledAds", { enumerable: true, get: function () { return ad_targeting_youtube_1.disabledAds; } });
 var create_ad_slot_1 = require("./create-ad-slot");
 Object.defineProperty(exports, "createAdSlot", { enumerable: true, get: function () { return create_ad_slot_1.createAdSlot; } });
+Object.defineProperty(exports, "concatSizeMappings", { enumerable: true, get: function () { return create_ad_slot_1.concatSizeMappings; } });
 exports.constants = __importStar(require("./constants"));
 var content_1 = require("./targeting/content");
 Object.defineProperty(exports, "getContentTargeting", { enumerable: true, get: function () { return content_1.getContentTargeting; } });

package/dist/cjs/lib/breakpoint.d.ts

@@ -0,0 +1,4 @@
+declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
+declare const isBreakpoint: (s: string) => s is Breakpoint;
+export type { Breakpoint };
+export { isBreakpoint };

package/dist/cjs/lib/breakpoint.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBreakpoint = void 0;
+const isBreakpoint = (s) => s === 'mobile' || s === 'phablet' || s === 'tablet' || s === 'desktop';
+exports.isBreakpoint = isBreakpoint;

package/dist/esm/ad-sizes.d.ts

@@ -1,3 +1,4 @@
+import type { Breakpoint } from './lib/breakpoint';
 declare type AdSizeString = 'fluid' | `${number},${number}`;
 /**
  * Store ad sizes in a way that is compatible with google-tag but also accessible via
@@ -24,9 +25,8 @@ declare class AdSize extends Array<number> {
     get width(): number;
     get height(): number;
 }
-declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
-declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
-declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
+declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper' | 'cascade';
+declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky' | 'crossword-banner';
 declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
 declare type SlotSizeMappings = Record<SlotName, SizeMapping>;
 declare const createAdSize: (width: number, height: number) => AdSize;

package/dist/esm/ad-sizes.js

@@ -58,6 +58,7 @@ const adSizesPartial = {
     outstreamDesktop: createAdSize(620, 350),
     outstreamGoogleDesktop: createAdSize(550, 310),
     outstreamMobile: createAdSize(300, 197),
+    cascade: createAdSize(940, 230),
 };
 const adSizes = {
     ...adSizesPartial,
@@ -238,6 +239,10 @@ const slotSizeMappings = {
     'mobile-sticky': {
         mobile: [adSizes.mobilesticky],
     },
+    'crossword-banner': {
+        tablet: [adSizes.outOfPage, adSizes.empty, adSizes.leaderboard],
+        phablet: [adSizes.outOfPage, adSizes.empty, adSizes.leaderboard],
+    },
 };
 const getAdSize = (size) => adSizes[size];
 // Export for testing

package/dist/esm/create-ad-slot.d.ts

@@ -1,9 +1,18 @@
-import type { AdSize } from './ad-sizes';
+import type { AdSize, SizeMapping } from './ad-sizes';
 declare type SlotName = 'im' | 'high-merch' | 'high-merch-lucky' | 'high-merch-paid' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
 declare type CreateSlotOptions = {
     classes?: string;
     name?: string;
     sizes?: Record<string, AdSize[]>;
 };
-export declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
-export {};
+/**
+ * Given default size mappings and additional size mappings from
+ * the createAdSlot options parameter.
+ *
+ * 1. Check that the options size mappings use known device names
+ * 2. If so concat the size mappings
+ *
+ */
+declare const concatSizeMappings: (defaultSizeMappings: SizeMapping, optionSizeMappings?: SizeMapping) => SizeMapping;
+declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
+export { createAdSlot, concatSizeMappings };

package/dist/esm/create-ad-slot.js

@@ -1,4 +1,5 @@
 import { slotSizeMappings } from './ad-sizes';
+import { isBreakpoint } from './lib/breakpoint';
 const adSlotIdPrefix = 'dfp-ad--';
 const adSlotConfigs = {
     im: {
@@ -99,24 +100,14 @@ const createClasses = (slotName, classes) => [...(classes?.split(' ') ?? []), sl
  * 2. If so concat the size mappings
  *
  */
-const concatSizeMappings = (defaultSizeMappings, optionSizeMappings) => {
-    if (!optionSizeMappings)
-        return defaultSizeMappings;
-    const concatenatedSizeMappings = { ...defaultSizeMappings };
-    const optionDevices = Object.keys(optionSizeMappings); // ['mobile', 'desktop']
-    for (let i = 0; i < optionDevices.length; i++) {
-        const device = optionDevices[i];
-        if (optionSizeMappings[device] && defaultSizeMappings[device]) {
-            const optionSizeMappingsForDevice = optionSizeMappings[device];
-            const defaultSizeMappingsForDevice = defaultSizeMappings[device];
-            if (defaultSizeMappingsForDevice && optionSizeMappingsForDevice) {
-                // TODO can we do concatenatedSizeMappings[device]?.concat ?
-                concatenatedSizeMappings[device] = (concatenatedSizeMappings[device] ?? []).concat(optionSizeMappingsForDevice);
-            }
-        }
+const concatSizeMappings = (defaultSizeMappings, optionSizeMappings = {}) => Object.entries(optionSizeMappings).reduce((sizeMappings, [breakpoint, optionSizes]) => {
+    // Only perform concatenation if breakpoint is of the correct type
+    if (isBreakpoint(breakpoint)) {
+        // Concatenate the option sizes onto any existing sizes present for a given breakpoint
+        sizeMappings[breakpoint] = (sizeMappings[breakpoint] ?? []).concat(optionSizes);
     }
-    return concatenatedSizeMappings;
-};
+    return sizeMappings;
+}, { ...defaultSizeMappings });
 /**
  * Convert size mappings to a string that will be added to the ad slot
  * data attributes.
@@ -135,7 +126,7 @@ const createDataAttributes = (attrs) => Object.entries(attrs).reduce((result, [k
     result[`data-${key}`] = value;
     return result;
 }, {});
-export const createAdSlot = (name, options = {}) => {
+const createAdSlot = (name, options = {}) => {
     const adSlotConfig = adSlotConfigs[name];
     const slotName = options.name ?? adSlotConfig.name ?? name;
     const sizeMappings = concatSizeMappings(adSlotConfig.sizeMappings, options.sizes);
@@ -148,3 +139,4 @@ export const createAdSlot = (name, options = {}) => {
     }
     return createAdSlotElement(slotName, createDataAttributes(attributes), createClasses(slotName, options.classes));
 };
+export { createAdSlot, concatSizeMappings };

package/dist/esm/index.d.ts

@@ -8,13 +8,15 @@ export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export type { ThirdPartyTag } from './types';
 export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
+export { isBreakpoint } from './lib/breakpoint';
+export type { Breakpoint } from './lib/breakpoint';
 export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, SlotName, } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
-export { createAdSlot } from './create-ad-slot';
+export { createAdSlot, concatSizeMappings } from './create-ad-slot';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';
 export type { ContentTargeting } from './targeting/content';

package/dist/esm/index.js

@@ -8,12 +8,13 @@ export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
+export { isBreakpoint } from './lib/breakpoint';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
-export { createAdSlot } from './create-ad-slot';
+export { createAdSlot, concatSizeMappings } from './create-ad-slot';
 import * as constants_1 from './constants';
 export { constants_1 as constants };
 export { getContentTargeting } from './targeting/content';

package/dist/esm/lib/breakpoint.d.ts

@@ -0,0 +1,4 @@
+declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
+declare const isBreakpoint: (s: string) => s is Breakpoint;
+export type { Breakpoint };
+export { isBreakpoint };

package/dist/esm/lib/breakpoint.js

@@ -0,0 +1,2 @@
+const isBreakpoint = (s) => s === 'mobile' || s === 'phablet' || s === 'tablet' || s === 'desktop';
+export { isBreakpoint };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "4.3.0",
+  "version": "4.6.0",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {
@@ -42,7 +42,7 @@
   },
   "prettier": "@guardian/prettier",
   "devDependencies": {
-    "@commitlint/cli": "^16.1.0",
+    "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.0",
     "@guardian/ab-core": "^2.0.0",
     "@guardian/consent-management-platform": "^10.6.0",
@@ -67,7 +67,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^8.0.1",
     "jest": "^27.4.1",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^13.0.3",
     "mockdate": "^3.0.5",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.0",