fontdue-js 3.6.0 → 3.8.0

package/dist/__tests__/storeModalPackButton.test.js

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+
+// The pack's row at the top of its product page: the name is shown exactly as
+// the admin entered it, the à-la-carte total is struck through with an <s>,
+// and a pack without a SKU is not clickable.
+
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  stateRef
+} = vi.hoisted(() => ({
+  stateRef: {
+    current: null
+  }
+}));
+
+// The fragment reader hands back the data it was given; the redux selector
+// runs against a default store's state.
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  fetchQuery: vi.fn(),
+  useFragment: (_fragment, key) => key
+}));
+vi.mock('react-redux', async importOriginal => ({
+  ...(await importOriginal()),
+  useSelector: selector => selector(stateRef.current)
+}));
+import StoreModalPackButton from '../components/StoreModal/StoreModalPackButton.js';
+import { createDefaultStore } from '../reducer.js';
+const money = amount => ({
+  amount,
+  currency: 'USD'
+});
+const pack = function () {
+  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    name: 'Pack of Basics',
+    sku: {
+      id: 'pack-sku',
+      price: money(15000)
+    },
+    featureStyle: null,
+    totalStyles: 3,
+    totalStylesPrice: money(30000),
+    ...overrides
+  };
+};
+const markup = packData => renderToStaticMarkup( /*#__PURE__*/React.createElement(StoreModalPackButton, {
+  pack: packData,
+  onSelectSku: () => {}
+}));
+const mount = async (packData, onSelectSku) => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render( /*#__PURE__*/React.createElement(StoreModalPackButton, {
+      pack: packData,
+      onSelectSku: onSelectSku
+    }));
+  });
+  return container.querySelector('button');
+};
+describe('StoreModalPackButton', () => {
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    stateRef.current = createDefaultStore(undefined).getState();
+    document.body.innerHTML = '';
+  });
+  it("shows the pack's name as entered, without adding a suffix", () => {
+    expect(markup(pack())).toContain('>Pack of Basics<');
+    expect(markup(pack())).not.toContain('Pack of Basics Pack');
+    expect(markup(pack({
+      name: 'Essentials'
+    }))).toContain('>Essentials<');
+  });
+  it('strikes through the à-la-carte total with an <s> when the pack is cheaper', () => {
+    expect(markup(pack())).toMatch(/<s class="store-modal__family-button__styles-price">/);
+    expect(markup(pack({
+      totalStylesPrice: money(15000)
+    }))).not.toContain('store-modal__family-button__styles-price');
+  });
+  it('selects the pack SKU on click', async () => {
+    const onSelectSku = vi.fn();
+    const button = await mount(pack(), onSelectSku);
+    expect(button.dataset.clickable).toBe('true');
+    await act(async () => button.click());
+    expect(onSelectSku).toHaveBeenCalledWith('pack-sku', true);
+  });
+  it('is not clickable without a SKU', async () => {
+    const onSelectSku = vi.fn();
+    const button = await mount(pack({
+      sku: null,
+      totalStylesPrice: null
+    }), onSelectSku);
+    expect(button.dataset.clickable).toBe('false');
+    await act(async () => button.click());
+    expect(onSelectSku).not.toHaveBeenCalled();
+  });
+});

package/dist/__tests__/storeModalPackUnlisted.test.js

@@ -0,0 +1,112 @@
+// @vitest-environment happy-dom
+
+// A pack page renders a block per member. An unlisted collection has no block
+// anywhere in the Store Modal (FD-1239), so the pack page leaves it out too –
+// the pack still grants it, and the pack button still sells it.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  stateRef
+} = vi.hoisted(() => ({
+  stateRef: {
+    current: null
+  }
+}));
+
+// The fragment reader hands back the data it was given; the redux selector
+// runs against a default store's state.
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  fetchQuery: vi.fn(),
+  useFragment: (_fragment, key) => key
+}));
+vi.mock('react-redux', async importOriginal => ({
+  ...(await importOriginal()),
+  useSelector: selector => selector(stateRef.current)
+}));
+import StoreModalPack from '../components/StoreModal/StoreModalPack.js';
+import { createDefaultStore } from '../reducer.js';
+const money = amount => ({
+  amount,
+  currency: 'USD'
+});
+const style = name => ({
+  id: `style:${name}`,
+  name: 'Regular',
+  supportedLanguages: ['en'],
+  variableInstances: [],
+  sku: {
+    id: `sku:style:${name}`,
+    price: money(4000)
+  },
+  cssFamily: name,
+  cssWeight: '400',
+  cssStretch: 'normal',
+  cssStyle: 'normal'
+});
+const family = function (name, visibility) {
+  let children = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return {
+    __typename: 'FontCollection',
+    id: `collection:${name}`,
+    name,
+    visibility,
+    collectionType: 'family',
+    isVariableFont: false,
+    sku: {
+      id: `sku:${name}`,
+      price: money(20000)
+    },
+    totalStyles: 1,
+    totalStylesPrice: money(4000),
+    featureStyle: null,
+    bundles: [],
+    fontStyles: [style(name)],
+    children
+  };
+};
+const styleMember = (familyName, visibility) => ({
+  __typename: 'FontStyle',
+  ...style(familyName),
+  family: {
+    id: `collection:${familyName}`,
+    name: familyName,
+    isVariableFont: false,
+    visibility
+  }
+});
+const pack = {
+  name: 'Anniversary pack',
+  sku: {
+    id: 'sku:pack',
+    price: money(30000)
+  },
+  featureStyle: null,
+  totalStyles: 6,
+  totalStylesPrice: money(60000),
+  members: [family('Alpha', 'VISIBLE', [family('Bravo', 'VISIBLE'), family('Charlie', 'UNLISTED')]), family('Delta', 'UNLISTED'), styleMember('Echo', 'VISIBLE'), styleMember('Foxtrot', 'UNLISTED')]
+};
+describe('StoreModalPack member blocks', () => {
+  beforeEach(() => {
+    stateRef.current = createDefaultStore(undefined).getState();
+  });
+  const markup = () => renderToStaticMarkup( /*#__PURE__*/React.createElement(StoreModalPack, {
+    pack: pack,
+    onSelect: () => {}
+  }));
+  it('renders a block for each visible member and child family', () => {
+    expect(markup()).toContain('Alpha');
+    expect(markup()).toContain('Bravo');
+    expect(markup()).toContain('Echo');
+  });
+  it('leaves out an unlisted member, an unlisted child and an unlisted style member', () => {
+    expect(markup()).not.toContain('Charlie');
+    expect(markup()).not.toContain('Delta');
+    expect(markup()).not.toContain('Foxtrot');
+  });
+  it('still sells the pack as a whole', () => {
+    expect(markup()).toContain('Anniversary pack');
+  });
+});

package/dist/__tests__/storeModalRoutes.test.js

@@ -69,6 +69,15 @@ describe('storeModalUrlActions', () => {
   it('opens the modal on its default route for ?store=open', () => {
     expect(storeModalUrlActions('?store=open', config(['unlisted']))).toEqual([OPEN]);
   });
+  it('opens the modal on the browse page for ?store=index', () => {
+    expect(storeModalUrlActions('?store=index', config(['unlisted']))).toEqual([{
+      type: 'STORE_MODAL_REPLACE',
+      route: 'index',
+      variables: {
+        excludeTags: ['unlisted']
+      }
+    }, OPEN]);
+  });
   it('opens the modal on a product for ?store=product/<id>', () => {
     expect(storeModalUrlActions(`?store=product/${PRODUCT_ID}`, config())).toEqual([{
       type: 'STORE_MODAL_REPLACE',

package/dist/__tests__/storefrontEvents.test.js

@@ -0,0 +1,167 @@
+// @vitest-environment happy-dom
+// @vitest-environment-options { "url": "https://store.example.com/fonts/archivo" }
+
+// The browser-only storefront moments reach the server through
+// `trackStorefrontEvent`. A buyer clicks through licences in bursts and React
+// re-runs effects, so what matters here is what *doesn't* get reported: the
+// steps before a configuration settles, a configuration already reported, and
+// a second look at the same collection that is really one mount.
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const commitMutation = vi.fn();
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  commitMutation: function () {
+    return commitMutation(...arguments);
+  },
+  useRelayEnvironment: vi.fn()
+}));
+import { licenseSelectionsFromOptions, trackPaymentInfoEntered, trackProductCustomized, trackProductViewed } from '../components/Cart/storefrontEvents.js';
+const environment = {};
+function reportedInputs() {
+  return commitMutation.mock.calls.map(_ref => {
+    let [, config] = _ref;
+    return config.variables.input;
+  });
+}
+beforeEach(() => {
+  commitMutation.mockReset();
+  vi.useFakeTimers();
+});
+afterEach(() => {
+  vi.useRealTimers();
+});
+describe('licenseSelectionsFromOptions', () => {
+  it('takes the licence choices in the shape createOrderItems takes them, sorted', () => {
+    const options = [{
+      licenseId: 'web',
+      licenseOptions: {}
+    }, {
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'five',
+        seats: 'one'
+      }
+    }];
+    expect(licenseSelectionsFromOptions(options)).toEqual([{
+      licenseId: 'desktop',
+      licenseVariableId: 'seats',
+      licenseOptionId: 'one'
+    }, {
+      licenseId: 'desktop',
+      licenseVariableId: 'users',
+      licenseOptionId: 'five'
+    }, {
+      licenseId: 'web'
+    }]);
+  });
+});
+describe('trackProductCustomized', () => {
+  it('reports the configuration a burst of clicks settles on, once', () => {
+    let options = [{
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'one'
+      }
+    }];
+    const current = () => options;
+    trackProductCustomized(environment, 'collection-burst', current);
+    options = [{
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'five'
+      }
+    }];
+    trackProductCustomized(environment, 'collection-burst', current);
+    options = [{
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'ten'
+      }
+    }];
+    trackProductCustomized(environment, 'collection-burst', current);
+    expect(commitMutation).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1500);
+    expect(reportedInputs()).toEqual([expect.objectContaining({
+      event: 'PRODUCT_CUSTOMIZED',
+      collectionId: 'collection-burst',
+      licenseSelections: [{
+        licenseId: 'desktop',
+        licenseVariableId: 'users',
+        licenseOptionId: 'ten'
+      }],
+      tracking: expect.objectContaining({
+        url: 'https://store.example.com/fonts/archivo'
+      })
+    })]);
+  });
+  it('skips a configuration already reported for that collection', () => {
+    let options = [{
+      licenseId: 'desktop',
+      licenseOptions: {}
+    }];
+    const current = () => options;
+    trackProductCustomized(environment, 'collection-repeat', current);
+    vi.advanceTimersByTime(1500);
+
+    // Over to web and back again: the buyer ends where they were.
+    options = [{
+      licenseId: 'web',
+      licenseOptions: {}
+    }];
+    trackProductCustomized(environment, 'collection-repeat', current);
+    options = [{
+      licenseId: 'desktop',
+      licenseOptions: {}
+    }];
+    trackProductCustomized(environment, 'collection-repeat', current);
+    vi.advanceTimersByTime(1500);
+
+    // Then a real change.
+    options = [{
+      licenseId: 'web',
+      licenseOptions: {}
+    }];
+    trackProductCustomized(environment, 'collection-repeat', current);
+    vi.advanceTimersByTime(1500);
+    expect(reportedInputs().map(input => input.licenseSelections)).toEqual([[{
+      licenseId: 'desktop'
+    }], [{
+      licenseId: 'web'
+    }]]);
+  });
+  it('reports nothing when every licence is unticked', () => {
+    trackProductCustomized(environment, 'collection-empty', () => []);
+    vi.advanceTimersByTime(1500);
+    expect(commitMutation).not.toHaveBeenCalled();
+  });
+});
+describe('trackProductViewed', () => {
+  it('counts an effect run twice for one mount as one view', () => {
+    trackProductViewed(environment, 'collection-view');
+    trackProductViewed(environment, 'collection-view');
+    trackProductViewed(environment, 'collection-other');
+
+    // Coming back to the first collection later is a new look.
+    vi.advanceTimersByTime(2000);
+    trackProductViewed(environment, 'collection-view');
+    expect(reportedInputs().map(_ref2 => {
+      let {
+        event,
+        collectionId
+      } = _ref2;
+      return [event, collectionId];
+    })).toEqual([['PRODUCT_VIEWED', 'collection-view'], ['PRODUCT_VIEWED', 'collection-other'], ['PRODUCT_VIEWED', 'collection-view']]);
+  });
+});
+describe('trackPaymentInfoEntered', () => {
+  it('reports with the buyer’s tracking context', () => {
+    trackPaymentInfoEntered(environment);
+    expect(reportedInputs()).toEqual([expect.objectContaining({
+      event: 'PAYMENT_INFO_ENTERED',
+      tracking: expect.objectContaining({
+        analyticsConsent: false
+      })
+    })]);
+  });
+});

package/dist/__tests__/typeTesterAutofitFeatures.test.js

@@ -0,0 +1,138 @@
+import "../global-shim.js";
+// @vitest-environment happy-dom
+import React, { act, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ContentState, EditorState } from 'draft-js';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import TypeTesterFitter from '../components/TypeTester/TypeTesterFitter.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// happy-dom has no text layout, so the two measuring primitives are stubbed
+// with a toy font: every glyph is 0.5em wide, and the `ss01` alternates are
+// 0.6em. Canvas only ever sees the default glyphs – that is true of real
+// browsers too (`ctx.font` has no feature settings), and is why autofit sized
+// a tester for the default glyphs and then rendered it with the alternates.
+const DEFAULT_ADVANCE = 0.5;
+const SS01_ADVANCE = 0.6;
+const TEXT = 'UNICASED CIRCUMSTANCES';
+const CONTAINER_WIDTH = 1010;
+// useTypeTesterStyler keeps 10px of slack when autofit is on.
+const AVAILABLE_WIDTH = CONTAINER_WIDTH - 10;
+const renderedWidth = (size, features) => TEXT.length * size * (features.includes('ss01') ? SS01_ADVANCE : DEFAULT_ADVANCE);
+let domMeasure;
+beforeEach(() => {
+  vi.stubGlobal('ResizeObserver', class {
+    constructor(callback) {
+      this.callback = callback;
+    }
+    observe() {
+      this.callback([{
+        contentRect: {
+          width: CONTAINER_WIDTH
+        }
+      }], this);
+    }
+    disconnect() {}
+  });
+  Object.defineProperty(document, 'fonts', {
+    configurable: true,
+    value: {
+      load: () => Promise.resolve([])
+    }
+  });
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+    font: '',
+    letterSpacing: '',
+    measureText: text => ({
+      width: text.length * 100 * DEFAULT_ADVANCE
+    })
+  });
+  domMeasure = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function () {
+    const {
+      fontSize,
+      fontFeatureSettings
+    } = this.style;
+    const advance = fontFeatureSettings.includes('ss01') ? SS01_ADVANCE : DEFAULT_ADVANCE;
+    return {
+      width: (this.textContent ?? '').length * parseFloat(fontSize) * advance
+    };
+  });
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+let currentSize = 0;
+function Tester(_ref) {
+  let {
+    features
+  } = _ref;
+  const [size, setSize] = useState(72);
+  const [content] = useState(() => EditorState.createWithContent(ContentState.createFromText(TEXT)));
+  currentSize = size;
+  return /*#__PURE__*/React.createElement(TypeTesterFitter, {
+    autofit: true,
+    autofitOnChange: false,
+    min: 10,
+    max: 200,
+    size: size,
+    setSize: setSize,
+    lineHeight: 1.2,
+    letterSpacing: 0,
+    features: features,
+    focused: false,
+    truncate: false,
+    fontStyles: {
+      fontFamily: 'Toy Sans',
+      fontWeight: 200,
+      fontStyle: 'italic'
+    },
+    content: content,
+    contentEdited: false,
+    alignment: "left",
+    variableSettings: null,
+    columns: false
+  }, TEXT);
+}
+describe('type tester autofit with OpenType features', () => {
+  let root;
+  let container;
+  const render = features => act(async () => {
+    root.render( /*#__PURE__*/React.createElement(Tester, {
+      features: features
+    }));
+  });
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+  it('fits text on one line when an enabled feature widens it', async () => {
+    await render([]);
+    const plainSize = currentSize;
+    expect(renderedWidth(plainSize, [])).toBeLessThanOrEqual(AVAILABLE_WIDTH);
+    await act(async () => root.unmount());
+    root = createRoot(container);
+    await render(['ss01']);
+    expect(currentSize).toBeLessThan(plainSize);
+    expect(renderedWidth(currentSize, ['ss01'])).toBeLessThanOrEqual(AVAILABLE_WIDTH);
+  });
+  it('refits when a feature is toggled', async () => {
+    await render([]);
+    const plainSize = currentSize;
+    await render(['ss01']);
+    const featureSize = currentSize;
+    expect(featureSize).toBeLessThan(plainSize);
+    expect(renderedWidth(featureSize, ['ss01'])).toBeLessThanOrEqual(AVAILABLE_WIDTH);
+    await render([]);
+    expect(currentSize).toBe(plainSize);
+  });
+  it('keeps the canvas fast path when no feature is on', async () => {
+    await render([]);
+    expect(domMeasure).not.toHaveBeenCalled();
+  });
+});

package/dist/components/AddToCartBanner/index.js

@@ -21,7 +21,7 @@ const getOrderItemName = item => {
   if ('name' in product) return product.name;
   return null;
 };
-_AddToCartBanner_item.hash && _AddToCartBanner_item.hash !== "93905c08206c30255368dbb06f59ccec" && console.error("The definition of 'AddToCartBanner_item' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_item;
+_AddToCartBanner_item.hash && _AddToCartBanner_item.hash !== "5b6c677fd518073e74b1651f3b872e8a" && console.error("The definition of 'AddToCartBanner_item' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_item;
 function AddToCartBanner(_ref) {
   var _order$orderItems, _order$orderItems2;
   let {

package/dist/components/BuyButton/index.d.ts

@@ -1,19 +1,35 @@
 import React from 'react';
 import { BuyButtonIDQuery } from '../../__generated__/BuyButtonIDQuery.graphql.js';
 import { BuyButtonSlugQuery } from '../../__generated__/BuyButtonSlugQuery.graphql.js';
+import { BuyButtonPackIDQuery } from '../../__generated__/BuyButtonPackIDQuery.graphql.js';
+import { BuyButtonPackSlugQuery } from '../../__generated__/BuyButtonPackSlugQuery.graphql.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 import { Config } from '../ConfigContext.js';
 export interface BuyButton_props {
     collectionName?: string;
     label?: string;
 }
-export type BuyButtonPreloadedQuery = SerializablePreloadedQuery<BuyButtonIDQuery> | SerializablePreloadedQuery<BuyButtonSlugQuery>;
+export type BuyButtonPreloadedQuery = SerializablePreloadedQuery<BuyButtonIDQuery> | SerializablePreloadedQuery<BuyButtonSlugQuery> | SerializablePreloadedQuery<BuyButtonPackIDQuery> | SerializablePreloadedQuery<BuyButtonPackSlugQuery>;
 export type LoadBuyButtonQueryVariables = {
     collectionId: string;
     collectionSlug?: never;
+    fontPackId?: never;
+    fontPackSlug?: never;
 } | {
     collectionId?: never;
     collectionSlug: string;
+    fontPackId?: never;
+    fontPackSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug?: never;
+    fontPackId: string;
+    fontPackSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug?: never;
+    fontPackId?: never;
+    fontPackSlug: string;
 };
 export declare function loadBuyButtonQuery(variables: LoadBuyButtonQueryVariables, options?: LoadQueryOptions): Promise<BuyButtonPreloadedQuery>;
 export declare function BuyButtonPreloadedIDQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
@@ -22,19 +38,23 @@ export declare function BuyButtonPreloadedIDQueryRenderer({ preloadedQuery, ...r
 export declare function BuyButtonPreloadedSlugQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
     preloadedQuery: SerializablePreloadedQuery<BuyButtonSlugQuery>;
 }): React.JSX.Element;
+export declare function BuyButtonPreloadedPackIDQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
+    preloadedQuery: SerializablePreloadedQuery<BuyButtonPackIDQuery>;
+}): React.JSX.Element;
+export declare function BuyButtonPreloadedPackSlugQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
+    preloadedQuery: SerializablePreloadedQuery<BuyButtonPackSlugQuery>;
+}): React.JSX.Element;
+type BuyButton_lazyProps = LoadBuyButtonQueryVariables;
 export type BuyButton_unifiedProps = BuyButton_props & {
     config?: Config;
 } & ({
     preloadedQuery: BuyButtonPreloadedQuery;
     collectionId?: never;
     collectionSlug?: never;
-} | {
+    fontPackId?: never;
+    fontPackSlug?: never;
+} | ({
     preloadedQuery?: never;
-    collectionId: string;
-    collectionSlug?: never;
-} | {
-    preloadedQuery?: never;
-    collectionId?: never;
-    collectionSlug: string;
-});
+} & BuyButton_lazyProps));
 export default function BuyButton(props: BuyButton_unifiedProps): React.JSX.Element;
+export {};