fontdue-js 3.10.1 → 3.12.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 3.12.0
+
+- `CustomerLoginForm` runs an invisible reCAPTCHA check when *Enable reCAPTCHA* is on under *Settings → Integration*, giving the sign-in form the same bot protection as `NewsletterSignup` and `TestFontsForm`.
+- Fixed a `TypeTester` with `shy` leaving its OpenType features panel open after the toolbar hides. The panel and the dropdown now close shortly after the toolbar does.
+
+## 3.11.0
+
+- `TestFontsForm` can group its family checkboxes by superfamily. With *Family list* set to *Grouped by superfamily* under *Settings → Test fonts* – or `testFonts: { familyGrouping: "superfamily" }` in the config, or the `familyGrouping` prop (`family-grouping` on `<fontdue-test-fonts-form>`) – each superfamily gets a checkbox that ticks all of its families, listed beneath it in `.test-fonts__family-group__families`.
+
 ## 3.10.1
 
 - Fixed the `TypeTester`, `FeatureTesters`, `CharacterViewer` and `StoreModal` never rendering a font in some Safari versions when its family or style name contains punctuation, such as an apostrophe, or starts with a digit.

package/dist/__generated__/CustomerLoginFormLoginMutation.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fd35a09343fd0b9af65f7c50420747b6>>
+ * @generated SignedSource<<e3f8ae800d45eb22248382f5c156624a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,6 +8,7 @@ export type LoginInput = {
     email?: string | null;
     name?: string | null;
     newsletterOptIn?: boolean | null;
+    recaptchaToken?: string | null;
     target?: string | null;
 };
 export type CustomerLoginFormLoginMutation$variables = {

package/dist/__generated__/CustomerLoginFormLoginMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fd35a09343fd0b9af65f7c50420747b6>>
+ * @generated SignedSource<<e3f8ae800d45eb22248382f5c156624a>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/CustomerLoginFormRecaptchaQuery.graphql.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @generated SignedSource<<ddf67cfa749ae9a10bfcec2bb2d6b15b>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export type CustomerLoginFormRecaptchaQuery$variables = Record<PropertyKey, never>;
+export type CustomerLoginFormRecaptchaQuery$data = {
+    readonly viewer: {
+        readonly settings: {
+            readonly recaptchaEnabled: boolean;
+            readonly recaptchaSiteKey: string | null;
+        } | null;
+    };
+};
+export type CustomerLoginFormRecaptchaQuery = {
+    response: CustomerLoginFormRecaptchaQuery$data;
+    variables: CustomerLoginFormRecaptchaQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/CustomerLoginFormRecaptchaQuery.graphql.js

@@ -0,0 +1,86 @@
+/**
+ * @generated SignedSource<<ddf67cfa749ae9a10bfcec2bb2d6b15b>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = {
+    "alias": null,
+    "args": null,
+    "concreteType": "Settings",
+    "kind": "LinkedField",
+    "name": "settings",
+    "plural": false,
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "recaptchaEnabled",
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "recaptchaSiteKey",
+      "storageKey": null
+    }],
+    "storageKey": null
+  };
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "CustomerLoginFormRecaptchaQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [v0 /*: any*/],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "CustomerLoginFormRecaptchaQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [v0 /*: any*/, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "id",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "a65b8ea63db01df3cbdf602ac7721787",
+      "id": null,
+      "metadata": {},
+      "name": "CustomerLoginFormRecaptchaQuery",
+      "operationKind": "query",
+      "text": "query CustomerLoginFormRecaptchaQuery {\n  viewer {\n    settings {\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    id\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "fe7289e19bcc08dbad62e72d67c48c97";
+export default node;

package/dist/__generated__/TestFontsForm_Query.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<47f718aeae16846330759690c693dce6>>
+ * @generated SignedSource<<0a0e4ebec2aeeb79d7f6e04437e7b7cc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -12,6 +12,7 @@ export type TestFontsForm_Query$data = {
     readonly viewer: {
         readonly fontdueConfig: {
             readonly testFonts: {
+                readonly familyGrouping: string;
                 readonly familySelection: string;
             };
         } | null;
@@ -26,6 +27,10 @@ export type TestFontsForm_Query$data = {
             readonly families: ReadonlyArray<{
                 readonly id: string;
                 readonly name: string;
+                readonly parent: {
+                    readonly id: string;
+                    readonly name: string;
+                } | null;
             }>;
         } | null;
     };

package/dist/__generated__/TestFontsForm_Query.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<47f718aeae16846330759690c693dce6>>
+ * @generated SignedSource<<0a0e4ebec2aeeb79d7f6e04437e7b7cc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -77,6 +77,12 @@ const node = function () {
           "kind": "ScalarField",
           "name": "familySelection",
           "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "familyGrouping",
+          "storageKey": null
         }],
         "storageKey": null
       }],
@@ -90,6 +96,13 @@ const node = function () {
       "storageKey": null
     },
     v5 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v6 = {
       "alias": null,
       "args": [{
         "kind": "Variable",
@@ -117,11 +130,14 @@ const node = function () {
         "kind": "LinkedField",
         "name": "families",
         "plural": true,
-        "selections": [v4 /*: any*/, {
+        "selections": [v4 /*: any*/, v5 /*: any*/, {
           "alias": null,
           "args": null,
-          "kind": "ScalarField",
-          "name": "name",
+          "concreteType": "FontCollection",
+          "kind": "LinkedField",
+          "name": "parent",
+          "plural": false,
+          "selections": [v4 /*: any*/, v5 /*: any*/],
           "storageKey": null
         }],
         "storageKey": null
@@ -141,7 +157,7 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/],
+        "selections": [v2 /*: any*/, v3 /*: any*/, v6 /*: any*/],
         "storageKey": null
       }],
       "type": "RootQueryType",
@@ -159,19 +175,19 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/, v4 /*: any*/],
+        "selections": [v2 /*: any*/, v3 /*: any*/, v6 /*: any*/, v4 /*: any*/],
         "storageKey": null
       }]
     },
     "params": {
-      "cacheID": "42a58842afe113b89a0bc969738246a8",
+      "cacheID": "f0d8dba45eec4868101fe71af251133a",
       "id": null,
       "metadata": {},
       "name": "TestFontsForm_Query",
       "operationKind": "query",
-      "text": "query TestFontsForm_Query(\n  $collectionIds: [ID!]\n  $collectionSlugs: [String!]\n) {\n  viewer {\n    settings {\n      eulaAgreementLabel(format: HTML)\n      newsletterOptInLabel(format: HTML)\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    fontdueConfig {\n      testFonts {\n        familySelection\n      }\n    }\n    testFonts(collectionIds: $collectionIds, collectionSlugs: $collectionSlugs) {\n      archiveUrl\n      families {\n        id\n        name\n      }\n    }\n    id\n  }\n}\n"
+      "text": "query TestFontsForm_Query(\n  $collectionIds: [ID!]\n  $collectionSlugs: [String!]\n) {\n  viewer {\n    settings {\n      eulaAgreementLabel(format: HTML)\n      newsletterOptInLabel(format: HTML)\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    fontdueConfig {\n      testFonts {\n        familySelection\n        familyGrouping\n      }\n    }\n    testFonts(collectionIds: $collectionIds, collectionSlugs: $collectionSlugs) {\n      archiveUrl\n      families {\n        id\n        name\n        parent {\n          id\n          name\n        }\n      }\n    }\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "da75e312a602ac0ee2dfb79271299c77";
+node.hash = "9ef2c42a7043469fec07a31649623766";
 export default node;

package/dist/__tests__/customerLoginRecaptcha.test.js

@@ -0,0 +1,113 @@
+// @vitest-environment happy-dom
+
+// The customer sign-in form solves the store's invisible reCAPTCHA before it
+// asks for a sign-in link, when the store has reCAPTCHA on: the form emails
+// whatever address is typed, which made it a tool for email-bombing strangers.
+
+import React, { act, forwardRef, useImperativeHandle, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  relay
+} = vi.hoisted(() => ({
+  relay: {
+    settings: null,
+    commits: []
+  }
+}));
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  useRelayEnvironment: () => ({}),
+  useLazyLoadQuery: () => ({
+    viewer: {
+      settings: relay.settings
+    }
+  }),
+  commitMutation: (_env, config) => {
+    relay.commits.push(config.variables);
+  }
+}));
+
+// Google's widget: `execute()` hands back a token a moment later, the way the
+// real callback arrives after the form has re-rendered – and, like
+// react-google-recaptcha, it calls whichever `onChange` it holds by then.
+vi.mock('../components/Recaptcha.js', () => ({
+  ReCAPTCHA: /*#__PURE__*/forwardRef(function FakeRecaptcha(props, ref) {
+    const latest = useRef(props);
+    latest.current = props;
+    useImperativeHandle(ref, () => ({
+      execute: () => setTimeout(() => latest.current.onChange('solved-token'), 0),
+      reset: () => {}
+    }));
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "recaptcha"
+    });
+  })
+}));
+import CustomerLoginForm from '../components/CustomerLoginForm/index.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+beforeEach(() => {
+  relay.commits = [];
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+const render = async () => {
+  await act(async () => root.render( /*#__PURE__*/React.createElement(CustomerLoginForm, null)));
+};
+const submit = async email => {
+  const input = container.querySelector('input[type="email"]');
+  await act(async () => {
+    const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
+    setValue.call(input, email);
+    input.dispatchEvent(new Event('input', {
+      bubbles: true
+    }));
+  });
+  await act(async () => {
+    container.querySelector('form').dispatchEvent(new Event('submit', {
+      bubbles: true,
+      cancelable: true
+    }));
+  });
+  // Let the widget's token callback land.
+  await act(async () => new Promise(resolve => setTimeout(resolve, 5)));
+};
+describe('CustomerLoginForm reCAPTCHA', () => {
+  it('asks for a link straight away on a store without reCAPTCHA', async () => {
+    relay.settings = {
+      recaptchaEnabled: false,
+      recaptchaSiteKey: null
+    };
+    await render();
+    expect(container.querySelector('[data-testid="recaptcha"]')).toBeNull();
+    await submit('reader@example.com');
+    expect(relay.commits).toEqual([{
+      input: {
+        email: 'reader@example.com',
+        recaptchaToken: undefined
+      }
+    }]);
+  });
+  it('solves the widget first, and sends its token with the request', async () => {
+    relay.settings = {
+      recaptchaEnabled: true,
+      recaptchaSiteKey: 'site-key'
+    };
+    await render();
+    expect(container.querySelector('[data-testid="recaptcha"]')).not.toBeNull();
+    await submit('reader@example.com');
+    expect(relay.commits).toEqual([{
+      input: {
+        email: 'reader@example.com',
+        recaptchaToken: 'solved-token'
+      }
+    }]);
+  });
+});

package/dist/__tests__/testFontsFamilyChoice.test.js

@@ -51,6 +51,7 @@ const families = [{
 }];
 const viewer = function (familySelection) {
   let list = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : families;
+  let familyGrouping = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'flat';
   return {
     viewer: {
       settings: {
@@ -61,7 +62,8 @@ const viewer = function (familySelection) {
       },
       fontdueConfig: {
         testFonts: {
-          familySelection
+          familySelection,
+          familyGrouping
         }
       },
       testFonts: {
@@ -147,4 +149,75 @@ describe('TestFontsForm family choice', () => {
     expect(container.querySelector('form')).toBeNull();
     expect(container.textContent).toContain('Test fonts aren’t available for this family.');
   });
+});
+describe('TestFontsForm family grouping', () => {
+  const sans = {
+    id: 'U3VwZXI6MQ==',
+    name: 'Example'
+  };
+  const grouped = [{
+    id: 'RmFtaWx5OjE=',
+    name: 'Example Sans',
+    parent: sans
+  }, {
+    id: 'RmFtaWx5OjI=',
+    name: 'Solo',
+    parent: null
+  }, {
+    id: 'RmFtaWx5OjM=',
+    name: 'Example Serif',
+    parent: sans
+  },
+  // The only family offered from its superfamily: listed on its own.
+  {
+    id: 'RmFtaWx5OjQ=',
+    name: 'Lonely',
+    parent: {
+      id: 'U3VwZXI6Mg==',
+      name: 'Lonely Super'
+    }
+  }];
+  const superfamilyBoxes = () => [...container.querySelectorAll('.test-fonts__superfamily input')];
+  it('lists the families flat by default', () => {
+    queryRef.data = viewer('choice', grouped);
+    render();
+    expect(superfamilyBoxes()).toHaveLength(0);
+    expect(familyCheckboxes().map(box => box.value)).toEqual(grouped.map(f => f.id));
+  });
+  it('groups families under their superfamily, which ticks them all', () => {
+    queryRef.data = viewer('choice', grouped, 'superfamily');
+    render();
+    expect(superfamilyBoxes()).toHaveLength(1);
+    const group = container.querySelector('.test-fonts__family-group');
+    expect(group.textContent).toContain('Example');
+    expect([...group.querySelectorAll('.test-fonts__family input')].map(b => b.value)).toEqual(['RmFtaWx5OjE=', 'RmFtaWx5OjM=']);
+    // The group sits where its first family fell; the rest keep their order.
+    expect(familyCheckboxes().map(box => box.value)).toEqual(['RmFtaWx5OjE=', 'RmFtaWx5OjM=', 'RmFtaWx5OjI=', 'RmFtaWx5OjQ=']);
+    expect(container.textContent).not.toContain('Lonely Super');
+    act(() => superfamilyBoxes()[0].click());
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjE=', 'RmFtaWx5OjM=']);
+    expect(superfamilyBoxes()[0].checked).toBe(true);
+
+    // Unticking one family leaves the superfamily unticked.
+    act(() => familyCheckboxes()[1].click());
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjE=']);
+    expect(superfamilyBoxes()[0].checked).toBe(false);
+    act(() => superfamilyBoxes()[0].click());
+    act(() => superfamilyBoxes()[0].click());
+    expect(hiddenIds()).toEqual([]);
+  });
+  it('lets the prop and code config override the dashboard grouping', () => {
+    queryRef.data = viewer('choice', grouped, 'superfamily');
+    render({}, {
+      testFonts: {
+        familyGrouping: 'flat'
+      }
+    });
+    expect(superfamilyBoxes()).toHaveLength(0);
+    queryRef.data = viewer('choice', grouped);
+    render({
+      familyGrouping: 'superfamily'
+    });
+    expect(superfamilyBoxes()).toHaveLength(1);
+  });
 });

package/dist/__tests__/typeTesterHeightAnimation.test.js

@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import useHeightAnimation from '../components/TypeTester/useHeightAnimation.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// happy-dom has no layout and no Web Animations, so both are stubbed: the
+// panel's content is CONTENT_HEIGHT tall, an explicit px height measures as
+// itself, and `midAnimation` stands in for the frame a running animation is on.
+const CONTENT_HEIGHT = 120;
+let midAnimation = null;
+let runs = [];
+function Panel(_ref) {
+  let {
+    open
+  } = _ref;
+  const {
+    ref,
+    style
+  } = useHeightAnimation(open, 300);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "panel",
+    ref: ref,
+    style: style
+  });
+}
+describe('useHeightAnimation', () => {
+  let root;
+  let container;
+  const panel = () => container.querySelector('.panel');
+  const render = open => act(() => root.render( /*#__PURE__*/React.createElement(Panel, {
+    open: open
+  })));
+  const heights = run => run.keyframes.map(k => k.height);
+  beforeEach(() => {
+    runs = [];
+    midAnimation = null;
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const {
+        height
+      } = this.style;
+      const value = midAnimation ?? (height === 'auto' || height === '' ? CONTENT_HEIGHT : parseFloat(height));
+      return {
+        height: value
+      };
+    });
+    Element.prototype.animate = function (keyframes) {
+      const run = {
+        keyframes,
+        cancel: vi.fn(),
+        onfinish: null
+      };
+      runs.push(run);
+      return run;
+    };
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    delete Element.prototype.animate;
+  });
+  it('starts closed without animating', async () => {
+    await render(false);
+    expect(panel().style.height).toBe('0px');
+    expect(panel().style.overflow).toBe('hidden');
+    expect(runs).toHaveLength(0);
+  });
+  it('opens from 0 to the content height, then settles to auto and visible', async () => {
+    await render(false);
+    await render(true);
+    expect(runs).toHaveLength(1);
+    expect(heights(runs[0])).toEqual(['0px', `${CONTENT_HEIGHT}px`]);
+    expect(panel().style.overflow).toBe('hidden');
+    act(() => {
+      var _runs$0$onfinish, _runs$;
+      return (_runs$0$onfinish = (_runs$ = runs[0]).onfinish) === null || _runs$0$onfinish === void 0 ? void 0 : _runs$0$onfinish.call(_runs$);
+    });
+    expect(panel().style.height).toBe('auto');
+    expect(panel().style.overflow).toBe('visible');
+  });
+  it('closes from the open height to 0, and stays clipped', async () => {
+    await render(true);
+    await render(false);
+    expect(heights(runs[0])).toEqual([`${CONTENT_HEIGHT}px`, '0px']);
+    act(() => {
+      var _runs$0$onfinish2, _runs$2;
+      return (_runs$0$onfinish2 = (_runs$2 = runs[0]).onfinish) === null || _runs$0$onfinish2 === void 0 ? void 0 : _runs$0$onfinish2.call(_runs$2);
+    });
+    expect(panel().style.height).toBe('0px');
+    expect(panel().style.overflow).toBe('hidden');
+  });
+  it('reverses an interrupted open from the height on screen', async () => {
+    await render(false);
+    await render(true);
+    const opening = runs[0];
+    midAnimation = 60;
+    await render(false);
+    expect(opening.cancel).toHaveBeenCalled();
+    expect(heights(runs[1])).toEqual(['60px', '0px']);
+
+    // A late finish from the cancelled open must not unclip the closed panel.
+    act(() => {
+      var _opening$onfinish;
+      return (_opening$onfinish = opening.onfinish) === null || _opening$onfinish === void 0 ? void 0 : _opening$onfinish.call(opening);
+    });
+    expect(panel().style.overflow).toBe('hidden');
+  });
+  it('skips the animation for reduced motion', async () => {
+    vi.stubGlobal('matchMedia', () => ({
+      matches: true
+    }));
+    await render(false);
+    await render(true);
+    expect(runs).toHaveLength(0);
+    expect(panel().style.height).toBe('auto');
+    expect(panel().style.overflow).toBe('visible');
+    vi.unstubAllGlobals();
+  });
+});