fontdue-js 3.8.0 → 3.9.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.9.0
+
+- `TestFontsForm` can let the visitor choose which families to download. With *Customer’s choice* set under *Settings → Test fonts* – or `testFonts: { familySelection: "choice" }` in the config, or the `familySelection` prop (`family-selection` on `<fontdue-test-fonts-form>`) – the form lists the families with a checkbox each plus *Select all*, and the download holds only the ticked ones. Ships new stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+- `TestFontsForm` takes `collectionSlug` or `collectionId` (`collection-slug` / `collection-id`, comma-separated for several) to offer just those families, with no checkboxes – for a form on a family’s own page. When preloading, pass the same value to `loadTestFontsFormQuery({ collectionSlug })`; the old options-only call still works.
+
 ## 3.8.0
 
 - Font packs. `StoreModal` lists a store’s packs at the top of its browse page and opens one as a product page, with the same price bar, license picker, cart line and checkout a collection gets. `BuyButton` takes `fontPackId` or `fontPackSlug` in place of `collectionId`/`collectionSlug` – `font-pack-id` or `font-pack-slug` on `<fontdue-buy-button>` – and `?store=product/<pack-slug>` opens a pack directly. Packs honour `indexExcludeTags` the way collections do.

package/README.md

@@ -842,10 +842,12 @@ import TestFontsForm, { loadTestFontsFormQuery } from "fontdue-js/TestFontsForm"
 
 | Prop | Description |
 | --- | --- |
-| `preloadedQuery` | (Optional, SSR) Result of `loadTestFontsFormQuery()`. Lazy if omitted. |
+| `preloadedQuery` | (Optional, SSR) Result of `loadTestFontsFormQuery({ collectionSlug, collectionId })` – pass the same collection props as the form. Lazy if omitted. |
 | `agreementLabel` | (Optional) `string` Label for the required agreement checkbox. Defaults to the "EULA agreement text" field in your Fontdue Labels settings. |
 | `downloadLabel` | (Optional) `string` Submit button label. Defaults to `"Download test fonts"`. |
 | `newsletterCheckboxChecked` | (Optional) `boolean` Pre-check the newsletter opt-in. |
+| `collectionSlug` / `collectionId` | (Optional) `string \| string[]` Limit the download to these font collections (a superfamily stands for its families). No family checkboxes are shown. |
+| `familySelection` | (Optional) `'all' \| 'choice'` Overrides `config.testFonts.familySelection` and the dashboard's *Families in each download* setting. `'choice'` lists the families as checkboxes. |
 
 ## `NewsletterSignup`
 

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

@@ -1,12 +1,20 @@
 /**
- * @generated SignedSource<<ee5a584fb3013fee58346747b616f67d>>
+ * @generated SignedSource<<47f718aeae16846330759690c693dce6>>
  * @lightSyntaxTransform
  * @nogrep
  */
 import { ConcreteRequest } from 'relay-runtime';
-export type TestFontsForm_Query$variables = Record<PropertyKey, never>;
+export type TestFontsForm_Query$variables = {
+    collectionIds?: ReadonlyArray<string> | null;
+    collectionSlugs?: ReadonlyArray<string> | null;
+};
 export type TestFontsForm_Query$data = {
     readonly viewer: {
+        readonly fontdueConfig: {
+            readonly testFonts: {
+                readonly familySelection: string;
+            };
+        } | null;
         readonly settings: {
             readonly eulaAgreementLabel: string | null;
             readonly newsletterOptInLabel: string | null;
@@ -15,6 +23,10 @@ export type TestFontsForm_Query$data = {
         } | null;
         readonly testFonts: {
             readonly archiveUrl: string | null;
+            readonly families: ReadonlyArray<{
+                readonly id: string;
+                readonly name: string;
+            }>;
         } | null;
     };
 };

package/dist/__generated__/TestFontsForm_Query.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<ee5a584fb3013fee58346747b616f67d>>
+ * @generated SignedSource<<47f718aeae16846330759690c693dce6>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -10,11 +10,20 @@
 
 const node = function () {
   var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "collectionIds"
+    }, {
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "collectionSlugs"
+    }],
+    v1 = [{
       "kind": "Literal",
       "name": "format",
       "value": "HTML"
     }],
-    v1 = {
+    v2 = {
       "alias": null,
       "args": null,
       "concreteType": "Settings",
@@ -23,13 +32,13 @@ const node = function () {
       "plural": false,
       "selections": [{
         "alias": null,
-        "args": v0 /*: any*/,
+        "args": v1 /*: any*/,
         "kind": "ScalarField",
         "name": "eulaAgreementLabel",
         "storageKey": "eulaAgreementLabel(format:\"HTML\")"
       }, {
         "alias": null,
-        "args": v0 /*: any*/,
+        "args": v1 /*: any*/,
         "kind": "ScalarField",
         "name": "newsletterOptInLabel",
         "storageKey": "newsletterOptInLabel(format:\"HTML\")"
@@ -48,9 +57,49 @@ const node = function () {
       }],
       "storageKey": null
     },
-    v2 = {
+    v3 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontdueConfig",
+      "kind": "LinkedField",
+      "name": "fontdueConfig",
+      "plural": false,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "FontdueTestFontsConfig",
+        "kind": "LinkedField",
+        "name": "testFonts",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "familySelection",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "storageKey": null
+    },
+    v4 = {
       "alias": null,
       "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v5 = {
+      "alias": null,
+      "args": [{
+        "kind": "Variable",
+        "name": "collectionIds",
+        "variableName": "collectionIds"
+      }, {
+        "kind": "Variable",
+        "name": "collectionSlugs",
+        "variableName": "collectionSlugs"
+      }],
       "concreteType": "TestFonts",
       "kind": "LinkedField",
       "name": "testFonts",
@@ -61,12 +110,27 @@ const node = function () {
         "kind": "ScalarField",
         "name": "archiveUrl",
         "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "concreteType": "FontCollection",
+        "kind": "LinkedField",
+        "name": "families",
+        "plural": true,
+        "selections": [v4 /*: any*/, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        }],
+        "storageKey": null
       }],
       "storageKey": null
     };
   return {
     "fragment": {
-      "argumentDefinitions": [],
+      "argumentDefinitions": v0 /*: any*/,
       "kind": "Fragment",
       "metadata": null,
       "name": "TestFontsForm_Query",
@@ -77,7 +141,7 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v1 /*: any*/, v2 /*: any*/],
+        "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/],
         "storageKey": null
       }],
       "type": "RootQueryType",
@@ -85,7 +149,7 @@ const node = function () {
     },
     "kind": "Request",
     "operation": {
-      "argumentDefinitions": [],
+      "argumentDefinitions": v0 /*: any*/,
       "kind": "Operation",
       "name": "TestFontsForm_Query",
       "selections": [{
@@ -95,25 +159,19 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v1 /*: any*/, v2 /*: any*/, {
-          "alias": null,
-          "args": null,
-          "kind": "ScalarField",
-          "name": "id",
-          "storageKey": null
-        }],
+        "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/, v4 /*: any*/],
         "storageKey": null
       }]
     },
     "params": {
-      "cacheID": "328cab794a68cbe666374e901da4d26b",
+      "cacheID": "42a58842afe113b89a0bc969738246a8",
       "id": null,
       "metadata": {},
       "name": "TestFontsForm_Query",
       "operationKind": "query",
-      "text": "query TestFontsForm_Query {\n  viewer {\n    settings {\n      eulaAgreementLabel(format: HTML)\n      newsletterOptInLabel(format: HTML)\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    testFonts {\n      archiveUrl\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      }\n    }\n    testFonts(collectionIds: $collectionIds, collectionSlugs: $collectionSlugs) {\n      archiveUrl\n      families {\n        id\n        name\n      }\n    }\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "cd43f0cacc4dcf01cf94fb1ff97197ca";
+node.hash = "da75e312a602ac0ee2dfb79271299c77";
 export default node;

package/dist/__tests__/testFontsFamilyChoice.test.js

@@ -0,0 +1,150 @@
+// @vitest-environment happy-dom
+
+// The test fonts form's family choice (FD-28): the archive endpoint takes
+// `collection_ids[]` to narrow the ZIP, and the form fills it from checkboxes
+// (`familySelection: 'choice'`) or from its own `collectionId`/`collectionSlug`.
+
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  queryRef
+} = vi.hoisted(() => ({
+  queryRef: {
+    data: null,
+    variables: null
+  }
+}));
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  commitMutation: vi.fn(),
+  useRelayEnvironment: () => ({}),
+  usePreloadedQuery: () => queryRef.data,
+  useLazyLoadQuery: (_query, variables) => {
+    queryRef.variables = variables;
+    return queryRef.data;
+  }
+}));
+vi.mock('../components/FontdueContextProvider/index.js', () => ({
+  EnsureFontdueContext: _ref => {
+    let {
+      children
+    } = _ref;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  },
+  LazyQueryBoundary: _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+}));
+import TestFontsForm from '../components/TestFontsForm/index.js';
+import ConfigContext, { makeConfig } from '../components/ConfigContext.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const families = [{
+  id: 'RmFtaWx5OjE=',
+  name: 'Alpha'
+}, {
+  id: 'RmFtaWx5OjI=',
+  name: 'Beta'
+}];
+const viewer = function (familySelection) {
+  let list = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : families;
+  return {
+    viewer: {
+      settings: {
+        eulaAgreementLabel: 'I agree',
+        newsletterOptInLabel: null,
+        recaptchaEnabled: false,
+        recaptchaSiteKey: null
+      },
+      fontdueConfig: {
+        testFonts: {
+          familySelection
+        }
+      },
+      testFonts: {
+        archiveUrl: 'https://example.test/test-fonts/archive',
+        families: list
+      }
+    }
+  };
+};
+let container;
+let root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let config = arguments.length > 1 ? arguments[1] : undefined;
+  return act(() => root.render( /*#__PURE__*/React.createElement(ConfigContext.Provider, {
+    value: makeConfig(config)
+  }, /*#__PURE__*/React.createElement(TestFontsForm, props))));
+};
+const familyCheckboxes = () => [...container.querySelectorAll('.test-fonts__family input')];
+const hiddenIds = () => [...container.querySelectorAll('input[type="hidden"]')].filter(input => input.name === 'collection_ids[]').map(input => input.value);
+describe('TestFontsForm family choice', () => {
+  it('downloads everything without checkboxes by default', () => {
+    queryRef.data = viewer('all');
+    render();
+    expect(familyCheckboxes()).toHaveLength(0);
+    expect(hiddenIds()).toEqual([]);
+    expect(queryRef.variables).toEqual({
+      collectionIds: null,
+      collectionSlugs: null
+    });
+  });
+  it('lists the families when the dashboard says choice, and sends the ticked ones', () => {
+    queryRef.data = viewer('choice');
+    render();
+    expect(familyCheckboxes().map(box => box.value)).toEqual(families.map(f => f.id));
+    expect(container.textContent).toContain('Beta');
+    expect(hiddenIds()).toEqual([]);
+    act(() => familyCheckboxes()[1].click());
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjI=']);
+    act(() => container.querySelector('.test-fonts__families__all input').click());
+    expect(hiddenIds()).toEqual(families.map(f => f.id));
+  });
+  it('lets code config and the prop override the dashboard setting', () => {
+    queryRef.data = viewer('choice');
+    render({}, {
+      testFonts: {
+        familySelection: 'all'
+      }
+    });
+    expect(familyCheckboxes()).toHaveLength(0);
+    queryRef.data = viewer('all');
+    render({
+      familySelection: 'choice'
+    });
+    expect(familyCheckboxes()).toHaveLength(2);
+  });
+  it('downloads exactly the named collections without checkboxes', () => {
+    queryRef.data = viewer('choice', [families[0]]);
+    render({
+      collectionSlug: 'alpha, gamma'
+    });
+    expect(queryRef.variables).toEqual({
+      collectionIds: null,
+      collectionSlugs: ['alpha', 'gamma']
+    });
+    expect(familyCheckboxes()).toHaveLength(0);
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjE=']);
+  });
+  it('says so when the named collections have no test fonts', () => {
+    queryRef.data = viewer('all', []);
+    render({
+      collectionId: 'RmFtaWx5Ojk='
+    });
+    expect(container.querySelector('form')).toBeNull();
+    expect(container.textContent).toContain('Test fonts aren’t available for this family.');
+  });
+});

package/dist/components/ConfigContext.d.ts

@@ -28,8 +28,13 @@ interface PreviewConfig {
     revalidateEndpoint?: string;
     clientSide?: boolean;
 }
+export type TestFontsFamilySelection = 'all' | 'choice';
+interface TestFontsConfig {
+    familySelection?: TestFontsFamilySelection;
+}
 export interface Config {
     form?: FormConfig;
+    testFonts?: TestFontsConfig;
     storeModal?: StoreModalConfig;
     typeTester?: TypeTesterConfig;
     stripe?: StripeConfig;
@@ -94,6 +99,9 @@ export declare const makeConfig: (config?: Config) => {
     form: {
         checkboxStyle: "check" | "cross";
     };
+    testFonts: {
+        familySelection: TestFontsFamilySelection | undefined;
+    };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";
         indexExcludeTags: string[] | undefined;
@@ -172,6 +180,9 @@ declare const _default: React.Context<{
     form: {
         checkboxStyle: "check" | "cross";
     };
+    testFonts: {
+        familySelection: TestFontsFamilySelection | undefined;
+    };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";
         indexExcludeTags: string[] | undefined;

package/dist/components/ConfigContext.js

@@ -88,12 +88,18 @@ export const mergeConfig = (base, override) => {
   return deepMerge(base, override);
 };
 export const makeConfig = config => {
-  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
+  var _config$form, _config$testFonts, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
       checkboxStyle: (config === null || config === void 0 ? void 0 : (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.checkboxStyle) ?? 'check'
     },
+    testFonts: {
+      // Deliberately no default: the form falls back to the dashboard setting
+      // it reads in its own query (the npm path never merges server config
+      // into `children`'s context – see ServerConfigProvider).
+      familySelection: config === null || config === void 0 ? void 0 : (_config$testFonts = config.testFonts) === null || _config$testFonts === void 0 ? void 0 : _config$testFonts.familySelection
+    },
     storeModal: {
       indexLayout: (config === null || config === void 0 ? void 0 : (_config$storeModal = config.storeModal) === null || _config$storeModal === void 0 ? void 0 : _config$storeModal.indexLayout) ?? 'styled-aa',
       indexExcludeTags: config === null || config === void 0 ? void 0 : (_config$storeModal2 = config.storeModal) === null || _config$storeModal2 === void 0 ? void 0 : _config$storeModal2.indexExcludeTags,

package/dist/components/TestFontsForm/TestFontsFormElement.d.ts

@@ -3,6 +3,9 @@ interface TestFontsFormElement_props {
     agreementLabel?: string;
     downloadLabel?: string;
     newsletterCheckboxChecked?: string;
+    collectionId?: string;
+    collectionSlug?: string;
+    familySelection?: string;
 }
-declare const TestFontsFormElement: (props: TestFontsFormElement_props) => React.JSX.Element;
+declare const TestFontsFormElement: ({ familySelection, ...props }: TestFontsFormElement_props) => React.JSX.Element;
 export default TestFontsFormElement;

package/dist/components/TestFontsForm/TestFontsFormElement.js

@@ -1,7 +1,15 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import TestFontsFormFetcher from './index.js';
-const TestFontsFormElement = props => /*#__PURE__*/React.createElement(TestFontsFormFetcher, _extends({}, props, {
-  newsletterCheckboxChecked: props.newsletterCheckboxChecked === 'true' ? true : false
-}));
+const FAMILY_SELECTIONS = ['all', 'choice'];
+const TestFontsFormElement = _ref => {
+  let {
+    familySelection,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(TestFontsFormFetcher, _extends({}, props, {
+    familySelection: familySelection && FAMILY_SELECTIONS.includes(familySelection) ? familySelection : undefined,
+    newsletterCheckboxChecked: props.newsletterCheckboxChecked === 'true' ? true : false
+  }));
+};
 export default TestFontsFormElement;

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

@@ -1,14 +1,17 @@
 import React from 'react';
 import { TestFontsForm_Query } from '../../__generated__/TestFontsForm_Query.graphql.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
-import { Config } from '../ConfigContext.js';
-export interface TestFontsForm_props {
+import { Config, TestFontsFamilySelection } from '../ConfigContext.js';
+import { TestFontsFormCollectionProps } from './variables.js';
+export interface TestFontsForm_props extends TestFontsFormCollectionProps {
     agreementLabel?: string;
     downloadLabel?: string;
     newsletterCheckboxChecked?: boolean;
+    familySelection?: TestFontsFamilySelection;
 }
 export type TestFontsFormPreloadedQuery = SerializablePreloadedQuery<TestFontsForm_Query>;
-export declare function loadTestFontsFormQuery(options?: LoadQueryOptions): Promise<TestFontsFormPreloadedQuery>;
+export type LoadTestFontsFormQueryVariables = TestFontsFormCollectionProps;
+export declare function loadTestFontsFormQuery(variables?: LoadTestFontsFormQueryVariables | LoadQueryOptions, options?: LoadQueryOptions): Promise<TestFontsFormPreloadedQuery>;
 export declare function TestFontsFormPreloadedQueryRenderer({ preloadedQuery, ...rest }: TestFontsForm_props & {
     preloadedQuery: TestFontsFormPreloadedQuery;
 }): React.JSX.Element;

package/dist/components/TestFontsForm/index.js

@@ -3,7 +3,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import _TestFontsForm_Query from "../../__generated__/TestFontsForm_Query.graphql.js";
 import _TestFontsFormUpdateCustomerMutation from "../../__generated__/TestFontsFormUpdateCustomerMutation.graphql.js";
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useContext, useId } from 'react';
 import { commitMutation, graphql, useRelayEnvironment, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
 // The script-injecting reCAPTCHA wrapper (loads Google's api.js). Importing the
 // package's barebone named export instead was the FD-917 root cause; see
@@ -16,8 +16,18 @@ import Checkbox from '../Checkbox/index.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
+import ConfigContext from '../ConfigContext.js';
+import { testFontsFormQueryVariables } from './variables.js';
 import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation.hash && _TestFontsFormUpdateCustomerMutation.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation);
+// The archive endpoint's family filter: `collection_ids[]` narrows the ZIP to
+// those families; none means every family.
+const COLLECTION_IDS_PARAM = 'collection_ids[]';
+const withCollectionIds = (archiveUrl, collectionIds) => {
+  if (collectionIds.length === 0) return archiveUrl;
+  const query = new URLSearchParams(collectionIds.map(id => [COLLECTION_IDS_PARAM, id]));
+  return `${archiveUrl}${archiveUrl.includes('?') ? '&' : '?'}${query}`;
+};
 const TestFontsDownloading = _ref => {
   let {
     archiveUrl
@@ -31,12 +41,15 @@ const TestFontsDownloading = _ref => {
   }, "here"), ".")));
 };
 const TestFontsFormComponent = _ref2 => {
-  var _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont;
+  var _data$viewer$testFont, _data$viewer$fontdueC, _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont2;
   let {
     data,
     agreementLabel,
     downloadLabel = 'Download test fonts',
-    newsletterCheckboxChecked = false
+    newsletterCheckboxChecked = false,
+    collectionId,
+    collectionSlug,
+    familySelection: familySelectionProp
   } = _ref2;
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
@@ -52,7 +65,28 @@ const TestFontsFormComponent = _ref2 => {
   const recaptchaRef = useRef(null);
   const recaptchaTimeout = useRecaptchaTimeout();
   const environment = useRelayEnvironment();
+  const config = useContext(ConfigContext);
+  const idPrefix = useId();
+  const [chosenIds, setChosenIds] = useState([]);
   if (!data.viewer) return null;
+  const families = ((_data$viewer$testFont = data.viewer.testFonts) === null || _data$viewer$testFont === void 0 ? void 0 : _data$viewer$testFont.families) ?? [];
+  const {
+    collectionIds,
+    collectionSlugs
+  } = testFontsFormQueryVariables({
+    collectionId,
+    collectionSlug
+  });
+  // A form for particular collections downloads exactly those families.
+  const limited = collectionIds != null || collectionSlugs != null;
+  // This form's prop, then code config (which, on the script-tag path, already
+  // has the dashboard setting merged beneath it), then the dashboard setting.
+  const familySelection = familySelectionProp ?? config.testFonts.familySelection ?? ((_data$viewer$fontdueC = data.viewer.fontdueConfig) === null || _data$viewer$fontdueC === void 0 ? void 0 : _data$viewer$fontdueC.testFonts.familySelection) ?? 'all';
+  // One family leaves nothing to choose.
+  const choosing = !limited && familySelection === 'choice' && families.length > 1;
+  const downloadIds = limited ? families.map(family => family.id) : choosing ? families.map(family => family.id).filter(id => chosenIds.includes(id)) : [];
+  const toggleFamily = (id, checked) => setChosenIds(ids => checked ? [...ids, id] : ids.filter(other => other !== id));
+  const allChosen = families.every(family => chosenIds.includes(family.id));
   const recaptchaEnabled = ((_data$viewer$settings = data.viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_data$viewer$settings2 = data.viewer.settings) === null || _data$viewer$settings2 === void 0 ? void 0 : _data$viewer$settings2.recaptchaSiteKey;
   const submitForm = useCallback(token => {
@@ -151,23 +185,48 @@ const TestFontsFormComponent = _ref2 => {
     }
     submitForm(recaptchaToken);
   };
-
-  // Button is disabled only while actively submitting or waiting for reCAPTCHA
-  const disabled = !eulaAgreed || !email || !name;
+  const disabled = !eulaAgreed || !email || !name || choosing && downloadIds.length === 0;
   const settings = data.viewer.settings;
   const newsletterOptInLabel = settings === null || settings === void 0 ? void 0 : settings.newsletterOptInLabel;
   const eulaAgreementLabel = settings === null || settings === void 0 ? void 0 : settings.eulaAgreementLabel;
-  const archiveUrl = (_data$viewer$testFont = data.viewer.testFonts) === null || _data$viewer$testFont === void 0 ? void 0 : _data$viewer$testFont.archiveUrl;
+  const archiveUrl = (_data$viewer$testFont2 = data.viewer.testFonts) === null || _data$viewer$testFont2 === void 0 ? void 0 : _data$viewer$testFont2.archiveUrl;
+  if (limited && families.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts test-fonts--unavailable"
+    }, /*#__PURE__*/React.createElement("p", null, "Test fonts aren\u2019t available for this family."));
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "test-fonts"
   }, error && /*#__PURE__*/React.createElement("div", {
     className: "test-fonts__errors"
   }, error), submitted ? /*#__PURE__*/React.createElement(TestFontsDownloading, {
-    archiveUrl: archiveUrl
+    archiveUrl: withCollectionIds(archiveUrl, downloadIds)
   }) : /*#__PURE__*/React.createElement("form", {
     className: "test-fonts__form",
     onSubmit: handleSubmit
+  }, choosing && /*#__PURE__*/React.createElement("div", {
+    className: "test-fonts__section test-fonts__families",
+    role: "group",
+    "aria-label": "Families"
   }, /*#__PURE__*/React.createElement("div", {
+    className: "test-fonts__checkbox-field test-fonts__families__all"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: `${idPrefix}-families-all`,
+    checked: allChosen,
+    onChange: event => setChosenIds(event.target.checked ? families.map(family => family.id) : [])
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: `${idPrefix}-families-all`
+  }, "Select all")), families.map((family, index) => /*#__PURE__*/React.createElement("div", {
+    className: "test-fonts__checkbox-field test-fonts__family",
+    key: family.id
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: `${idPrefix}-family-${index}`,
+    value: family.id,
+    checked: chosenIds.includes(family.id),
+    onChange: event => toggleFamily(family.id, event.target.checked)
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: `${idPrefix}-family-${index}`
+  }, family.name)))), /*#__PURE__*/React.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/React.createElement(TextField, {
     label: "Name *",
@@ -223,11 +282,21 @@ const TestFontsFormComponent = _ref2 => {
   }, " \u2192")))), /*#__PURE__*/React.createElement("form", {
     action: archiveUrl ?? undefined,
     ref: downloadForm
-  }));
+  }, downloadIds.map(id => /*#__PURE__*/React.createElement("input", {
+    key: id,
+    type: "hidden",
+    name: COLLECTION_IDS_PARAM,
+    value: id
+  }))));
 };
-const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "cd43f0cacc4dcf01cf94fb1ff97197ca" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
-export async function loadTestFontsFormQuery(options) {
-  return loadSerializableQuery(TestFontsFormQueryNode, {}, options);
+const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "da75e312a602ac0ee2dfb79271299c77" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
+// Pass the same `collectionId` / `collectionSlug` as the form's props.
+export async function loadTestFontsFormQuery(variables, options) {
+  // Before the collection variables existed this took `options` alone.
+  if (variables && ('url' in variables || 'headers' in variables)) {
+    return loadTestFontsFormQuery({}, variables);
+  }
+  return loadSerializableQuery(TestFontsFormQueryNode, testFontsFormQueryVariables(variables ?? {}), options);
 }
 export function TestFontsFormPreloadedQueryRenderer(_ref4) {
   let {
@@ -244,7 +313,7 @@ export function TestFontsFormPreloadedQueryRenderer(_ref4) {
   }, rest));
 }
 function TestFontsFormLazyQueryRenderer(props) {
-  const data = useLazyLoadQuery(query, {});
+  const data = useLazyLoadQuery(query, testFontsFormQueryVariables(props));
   return /*#__PURE__*/React.createElement(TestFontsFormComponent, _extends({
     data: data
   }, props));

package/dist/components/TestFontsForm/index.server.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import { TestFontsFormPreloadedQueryRenderer } from './index.js';
+import { testFontsFormQueryVariables } from './variables.js';
 import TestFontsFormQueryNode from '../../__generated__/TestFontsForm_Query.graphql.js';
 // Stub for the RSC export condition. See FontdueProvider/index.server.tsx
 // for the rationale.
@@ -14,7 +15,7 @@ export function loadTestFontsFormQuery() {
 // `<TestFontsForm />` in an RSC without manually invoking
 // `loadTestFontsFormQuery` + threading `preloadedQuery` through props.
 export default async function TestFontsForm(props) {
-  const preloadedQuery = await loadSerializableQuery(TestFontsFormQueryNode, {});
+  const preloadedQuery = await loadSerializableQuery(TestFontsFormQueryNode, testFontsFormQueryVariables(props));
   return /*#__PURE__*/React.createElement(TestFontsFormPreloadedQueryRenderer, _extends({
     preloadedQuery: preloadedQuery
   }, props));

package/dist/components/TestFontsForm/variables.d.ts

@@ -0,0 +1,8 @@
+export interface TestFontsFormCollectionProps {
+    collectionId?: string | readonly string[];
+    collectionSlug?: string | readonly string[];
+}
+export declare const testFontsFormQueryVariables: ({ collectionId, collectionSlug, }: TestFontsFormCollectionProps) => {
+    collectionIds: string[] | null;
+    collectionSlugs: string[] | null;
+};

package/dist/components/TestFontsForm/variables.js

@@ -0,0 +1,22 @@
+// Shared by the client component and the RSC entry (index.server.tsx), so it
+// lives outside the 'use client' module: a server component can't call a
+// function imported from one.
+
+const toList = value => {
+  if (value == null) return null;
+  const list = (typeof value === 'string' ? value.split(',') : [...value]).map(item => item.trim()).filter(Boolean);
+  return list.length > 0 ? list : null;
+};
+
+// The query's variables for a form's collection props: null (no narrowing)
+// unless the form is limited to particular collections.
+export const testFontsFormQueryVariables = _ref => {
+  let {
+    collectionId,
+    collectionSlug
+  } = _ref;
+  return {
+    collectionIds: toList(collectionId),
+    collectionSlugs: toList(collectionSlug)
+  };
+};

package/dist/fontdue.css

@@ -182,6 +182,13 @@
 .test-fonts__checkbox-field label p {
   margin: 0;
 }
+.test-fonts__families {
+  --checkbox-size: 20px;
+  --checkbox-margin: 10px;
+}
+.test-fonts__families .test-fonts__checkbox-field {
+  margin-bottom: 10px;
+}
 .test-fonts__agreement[data-highlighted=true] {
   color: red;
 }

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.8.0";
+export const version = "3.9.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",