fontdue-js 3.8.0 → 3.10.0

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__/storeModalIndexUnlisted.test.js

@@ -0,0 +1,71 @@
+// @vitest-environment happy-dom
+
+// The index lists root collections. An unlisted one isn't offered on its own
+// (FD-1239): an unlisted family drops out, and an unlisted superfamily is
+// replaced by its listed families, each opening the superfamily's page so a
+// selection there still upgrades to it.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+
+// The fragment reader hands back the data it was given.
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  useFragment: (_fragment, key) => key
+}));
+
+// Each entry renders what it links to, so the markup shows the navigation.
+vi.mock('../components/StoreModal/StoreModalIndexEntry.js', () => ({
+  default: _ref => {
+    let {
+      productId,
+      name,
+      label
+    } = _ref;
+    return /*#__PURE__*/React.createElement("li", {
+      "data-product": productId
+    }, name, " (", label, ")");
+  }
+}));
+import StoreModalIndexItem from '../components/StoreModal/StoreModalIndexItem.js';
+const family = function (name, visibility) {
+  let totalStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 4;
+  let isVariableFont = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  return {
+    id: `collection:${name}`,
+    name,
+    visibility,
+    collectionType: 'FAMILY',
+    isVariableFont,
+    totalStyles,
+    featureStyle: null,
+    children: []
+  };
+};
+const superfamily = (visibility, children) => ({
+  id: 'collection:Super',
+  name: 'Super',
+  visibility,
+  collectionType: 'SUPERFAMILY',
+  isVariableFont: false,
+  totalStyles: 10,
+  featureStyle: null,
+  children
+});
+const markup = collection => renderToStaticMarkup( /*#__PURE__*/React.createElement(StoreModalIndexItem, {
+  collection: collection
+}));
+describe('StoreModalIndexItem visibility', () => {
+  it('lists a visible superfamily as one entry', () => {
+    const html = markup(superfamily('VISIBLE', [family('Sans', 'VISIBLE')]));
+    expect(html).toBe('<li data-product="collection:Super">Super (10 styles)</li>');
+  });
+  it('leaves out an unlisted root family', () => {
+    expect(markup(family('Sans', 'UNLISTED'))).toBe('');
+  });
+  it('replaces an unlisted superfamily with its listed families, each opening the superfamily', () => {
+    const html = markup(superfamily('UNLISTED', [family('Sans', 'VISIBLE'), family('Serif', 'VISIBLE', 6), family('Sans Variable', 'UNLISTED', 2, true), family('Mono Variable', 'VISIBLE', 1, true)]));
+    expect(html).toBe('<li data-product="collection:Super">Sans (4 styles)</li>' + '<li data-product="collection:Super">Serif (6 styles)</li>' + '<li data-product="collection:Super">Mono Variable (1 variable font)</li>');
+  });
+});

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/__tests__/typeTesterTruncate.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { normalizeTruncate, parseTruncateAttribute, shouldTruncate } from "../components/TypeTester/truncate.js";
+import { normalizeTruncate, parseTruncateAttribute, shouldTruncate, truncateColumnStyle } from "../components/TypeTester/truncate.js";
 import { mergeConfig } from "../components/ConfigContext.js";
 describe('normalizeTruncate', () => {
   it('is off when unset or false', () => {
@@ -215,4 +215,74 @@ describe('mergeConfig with the object truncate form', () => {
     });
     expect((_merged$typeTester2 = merged.typeTester) === null || _merged$typeTester2 === void 0 ? void 0 : _merged$typeTester2.truncate).toBe(20);
   });
+});
+
+// The stylesheet carries the column-width that WebKit before Safari 26.1 needs
+// to build a single column (FD-191); these pin what the inline style leaves
+// for it to reach, and what it must never touch.
+describe('truncateColumnStyle', () => {
+  it('is the bare single column with columns off', () => {
+    expect(truncateColumnStyle(false)).toEqual({
+      columnCount: 1
+    });
+  });
+  it('writes configured columns as they are', () => {
+    expect(truncateColumnStyle({
+      count: 3,
+      width: '20ch',
+      gap: '1em'
+    })).toEqual({
+      columnCount: 3,
+      columnWidth: '20ch',
+      columnGap: '1em'
+    });
+    expect(truncateColumnStyle({
+      count: 'auto',
+      width: '40ch',
+      gap: '1em'
+    })).toEqual({
+      columnCount: 'auto',
+      columnWidth: '40ch',
+      columnGap: '1em'
+    });
+  });
+  it('leaves the width off a configured single column with an auto width', () => {
+    expect(truncateColumnStyle({
+      count: 1,
+      width: 'auto',
+      gap: '1em'
+    })).toEqual({
+      columnCount: 1,
+      columnGap: '1em'
+    });
+  });
+
+  // A script-tag config is untyped JSON, so the count can arrive as a string
+  // and the width as an empty string.
+  it('reads a loosely typed single column the same way', () => {
+    const loose = {
+      count: '1',
+      width: '',
+      gap: '1em'
+    };
+    expect(truncateColumnStyle(loose)).toEqual({
+      columnCount: 1,
+      columnGap: '1em'
+    });
+  });
+
+  // With `column-count: auto` a 1px column-width would mean one column per
+  // pixel, so an auto count keeps its inline auto width, which the stylesheet
+  // cannot override.
+  it('keeps the auto width of an auto column count', () => {
+    expect(truncateColumnStyle({
+      count: 'auto',
+      width: 'auto',
+      gap: '1em'
+    })).toEqual({
+      columnCount: 'auto',
+      columnWidth: 'auto',
+      columnGap: '1em'
+    });
+  });
 });

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/StoreModal/StoreModalIndex.js

@@ -29,7 +29,7 @@ const StoreModalIndex = _ref => {
   let {
     prepared
   } = _ref;
-  const queryData = usePreloadedQuery((_StoreModalIndexQuery.hash && _StoreModalIndexQuery.hash !== "cea53722e4ce3c40a68997218f7e979f" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery), prepared.indexQuery);
+  const queryData = usePreloadedQuery((_StoreModalIndexQuery.hash && _StoreModalIndexQuery.hash !== "13fce0376ef1b098e7f1f34dfdc7dad4" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery), prepared.indexQuery);
 
   // The query type only carries the fragment spread, not its data type, so
   // both sides are named explicitly for `data` to be typed.
@@ -53,7 +53,13 @@ const StoreModalIndex = _ref => {
     rootRef: scrollContainer,
     rootMargin: LOAD_MORE_MARGIN
   });
-  const packEdges = ((_queryData$viewer = queryData.viewer) === null || _queryData$viewer === void 0 ? void 0 : (_queryData$viewer$fon = _queryData$viewer.fontPacks) === null || _queryData$viewer$fon === void 0 ? void 0 : _queryData$viewer$fon.edges) ?? [];
+
+  // An unlisted pack is sold through its own Buy Button or page, not offered
+  // in the index; the API returns it so a site can build that page.
+  const packEdges = (((_queryData$viewer = queryData.viewer) === null || _queryData$viewer === void 0 ? void 0 : (_queryData$viewer$fon = _queryData$viewer.fontPacks) === null || _queryData$viewer$fon === void 0 ? void 0 : _queryData$viewer$fon.edges) ?? []).filter(edge => {
+    var _edge$node;
+    return (edge === null || edge === void 0 ? void 0 : (_edge$node = edge.node) === null || _edge$node === void 0 ? void 0 : _edge$node.visibility) !== 'UNLISTED';
+  });
   const edges = (data === null || data === void 0 ? void 0 : (_data$rootCollections = data.rootCollections) === null || _data$rootCollections === void 0 ? void 0 : _data$rootCollections.edges) ?? [];
   return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
     body: /*#__PURE__*/React.createElement(React.Fragment, null, packEdges.map(edge => /*#__PURE__*/React.createElement(StoreModalIndexPackItem, {

package/dist/components/StoreModal/StoreModalIndexItem.d.ts

@@ -3,5 +3,5 @@ import { StoreModalIndexItem_fontCollection$key } from '__generated__/StoreModal
 interface StoreModalIndexItem_props {
     collection: StoreModalIndexItem_fontCollection$key;
 }
-declare const StoreModalIndexItem: ({ collection }: StoreModalIndexItem_props) => React.JSX.Element;
+declare const StoreModalIndexItem: ({ collection }: StoreModalIndexItem_props) => React.JSX.Element | null;
 export default StoreModalIndexItem;

package/dist/components/StoreModal/StoreModalIndexItem.js

@@ -4,29 +4,47 @@ import { graphql, useFragment } from 'react-relay';
 import StoreModalIndexEntry from './StoreModalIndexEntry.js';
 import useTotalStyles from '../useTotalStyles.js';
 import { pluralize } from '../../utils.js';
+const styleLabel = (totalStyles, variableFonts) => {
+  const label = [];
+  if (totalStyles > 0) label.push(pluralize(totalStyles, 'style'));
+  if (variableFonts > 0) label.push(pluralize(variableFonts, 'variable font'));
+  return label.join(', ');
+};
+
+// One root collection on the index page. An unlisted collection isn't offered
+// on its own (FD-1239), so it has no entry of its own here either: an unlisted
+// family drops out, and an unlisted superfamily is replaced by its listed
+// families. Those still open the superfamily's page, where selecting them
+// upgrades to the superfamily.
 const StoreModalIndexItem = _ref => {
   let {
     collection
   } = _ref;
-  const data = useFragment((_StoreModalIndexItem_fontCollection.hash && _StoreModalIndexItem_fontCollection.hash !== "8a990fad8dc50c9f00b391902e9bc482" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection), collection);
+  const data = useFragment((_StoreModalIndexItem_fontCollection.hash && _StoreModalIndexItem_fontCollection.hash !== "46573dcfb540ddfba2e28144704bd554" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection), collection);
   const {
     totalStyles,
     variableFonts
   } = useTotalStyles({
     fontCollection: data
   });
-  let label = [];
-  if (totalStyles > 0) {
-    label.push(pluralize(totalStyles, 'style'));
-  }
-  if (variableFonts > 0) {
-    label.push(pluralize(variableFonts, 'variable font'));
+  if (data.visibility === 'UNLISTED') {
+    if (data.collectionType === 'FAMILY') return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, (data.children ?? []).filter(family => family.visibility !== 'UNLISTED').map(family => {
+      const styles = family.totalStyles ?? 0;
+      return /*#__PURE__*/React.createElement(StoreModalIndexEntry, {
+        key: family.id,
+        productId: data.id,
+        name: family.name,
+        featureStyle: family.featureStyle,
+        label: family.isVariableFont ? styleLabel(0, styles) : styleLabel(styles, 0)
+      });
+    }));
   }
   return /*#__PURE__*/React.createElement(StoreModalIndexEntry, {
     productId: data.id,
     name: data.name,
     featureStyle: data.featureStyle,
-    label: label.join(', ')
+    label: styleLabel(totalStyles, variableFonts)
   });
 };
 export default StoreModalIndexItem;

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;