fontdue-js 3.6.0 → 3.8.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 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.
+- `NodePasswordForm` takes `fontPackId` or `fontPackSlug`, so a password-protected pack is unlocked the same way a collection is.
+- Selecting styles on a product page now only prices up into groupings that page shows. A family or pack the visitor had opened earlier could previously take over a pick on another product’s page, putting something they never opened in the cart; on a pack’s page it could also swallow the partial block of a family’s styles the pack includes.
+
+## 3.7.0
+
+- Fixed bundle discounts in the `StoreModal` depending on the order styles are picked in – with overlapping bundles, the same styles could cost more in one order than another. Every pick now prices the whole selection as the cheapest combination of styles and bundles that covers it, and the added price shown beside each style follows the same reckoning.
+- Collections and style bundles carry a `visibility` of `VISIBLE`, `UNLISTED` or `HIDDEN`; `Bundle.hidden` still works but is deprecated. An unlisted collection or bundle stays on sale and a selection can still upgrade into it, but it renders no block of its own in the `StoreModal`, no row in `<fontdue-font-families>` and no section in the `TypeTesters` price bar – so a superfamily can be sold only through its families.
+- The `StoreModal`’s browse page loads 25 collections at a time and fetches the next 25 as the visitor scrolls, instead of every collection at once, so a large catalog opens without first loading every family’s font. A “Load more” button sits at the end of the loaded rows for keyboard use; if you style the modal yourself, it is `.store-modal__index__load-more`.
+- The `StoreModal` reports opening a collection, changing a license choice and completing payment details, so Fontdue records “Product Viewed”, “Product Customized” and “Payment Info Entered” alongside the add to cart and purchase it already recorded. They carry the buyer’s consent and identifiers, so they reach your analytics destinations tied to the same visitor.
+- Fixed a type tester set to `autofit` sizing its text without the OpenType features it has switched on: stylistic sets and small caps overflowed and wrapped, and ligatures under-filled. `useAutofit` takes a `fontFeatureSettings` string for the same reason, measuring in the DOM when one is set.
+
 ## 3.6.0
 
 - A `store` parameter on any URL now opens the Store Modal, so a foundry can link to its store rather than only open it from an element on the page. `?store=open` opens the store wherever it normally opens, `?store=product/<slug>` opens a product page, and `?store=cart` opens the cart. Any other `store` value is ignored, so a parameter a site already uses of its own won’t open the modal.

package/README.md

@@ -727,7 +727,7 @@ import StoreModal from "fontdue-js/StoreModal";
 
 ## `BuyButton`
 
-A button that opens `StoreModal` to the relevant collection.
+A button that opens `StoreModal` to the relevant collection or font pack.
 
 ```tsx
 import BuyButton, { loadBuyButtonQuery } from "fontdue-js/BuyButton";
@@ -735,9 +735,10 @@ import BuyButton, { loadBuyButtonQuery } from "fontdue-js/BuyButton";
 
 | Prop | Description |
 | --- | --- |
-| `collectionId` or `collectionSlug` | (Required, lazy) `string` Collection identifier. Omit if passing `preloadedQuery`. |
-| `preloadedQuery` | (Required, SSR) Result of `loadBuyButtonQuery({ collectionId })` or `loadBuyButtonQuery({ collectionSlug })`. |
-| `collectionName` | (Optional) `string` Name to render in the default label: `Buy {collectionName}`. |
+| `collectionId` or `collectionSlug` | (Required, lazy) `string` Collection identifier. Omit if passing `preloadedQuery` or pointing at a font pack. |
+| `fontPackId` or `fontPackSlug` | (Required, lazy) `string` Font pack identifier, for a button that sells a pack instead of a collection. |
+| `preloadedQuery` | (Required, SSR) Result of `loadBuyButtonQuery({ collectionId })`, `loadBuyButtonQuery({ collectionSlug })`, `loadBuyButtonQuery({ fontPackId })` or `loadBuyButtonQuery({ fontPackSlug })`. |
+| `collectionName` | (Optional) `string` Name to render in the default label: `Buy {collectionName}`. A font pack's default label is `Buy {pack name}` without it. |
 | `label` | (Optional) `string` Override the button label entirely. |
 
 ## `CartButton`

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<582a1e599d12a3858b5b672483e764d0>>
+ * @generated SignedSource<<4a3971dcb639ece0da0abcb0ee728f8f>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/AddToCartBannerQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<582a1e599d12a3858b5b672483e764d0>>
+ * @generated SignedSource<<4a3971dcb639ece0da0abcb0ee728f8f>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -23,15 +23,16 @@ const node = function () {
       "name": "name",
       "storageKey": null
     },
-    v2 = [v1 /*: any*/, v0 /*: any*/],
-    v3 = [v1 /*: any*/, {
+    v2 = [v1 /*: any*/],
+    v3 = [v1 /*: any*/, v0 /*: any*/],
+    v4 = [v1 /*: any*/, {
       "alias": null,
       "args": null,
       "concreteType": "FontCollection",
       "kind": "LinkedField",
       "name": "fontCollection",
       "plural": false,
-      "selections": v2 /*: any*/,
+      "selections": v3 /*: any*/,
       "storageKey": null
     }];
   return {
@@ -129,7 +130,7 @@ const node = function () {
                   "storageKey": null
                 }, {
                   "kind": "InlineFragment",
-                  "selections": [v1 /*: any*/],
+                  "selections": v2 /*: any*/,
                   "type": "FontCollection",
                   "abstractKey": null
                 }, {
@@ -141,21 +142,26 @@ const node = function () {
                     "kind": "LinkedField",
                     "name": "family",
                     "plural": false,
-                    "selections": v2 /*: any*/,
+                    "selections": v3 /*: any*/,
                     "storageKey": null
                   }],
                   "type": "FontStyle",
                   "abstractKey": null
                 }, {
                   "kind": "InlineFragment",
-                  "selections": v3 /*: any*/,
+                  "selections": v4 /*: any*/,
                   "type": "Bundle",
                   "abstractKey": null
                 }, {
                   "kind": "InlineFragment",
-                  "selections": v3 /*: any*/,
+                  "selections": v4 /*: any*/,
                   "type": "CollectionBundle",
                   "abstractKey": null
+                }, {
+                  "kind": "InlineFragment",
+                  "selections": v2 /*: any*/,
+                  "type": "FontPack",
+                  "abstractKey": null
                 }, {
                   "kind": "InlineFragment",
                   "selections": [v0 /*: any*/],
@@ -174,12 +180,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "4e7fade413da4c2b17527d3297d2f358",
+      "cacheID": "acdc77d071862e8a152af2c007147f16",
       "id": null,
       "metadata": {},
       "name": "AddToCartBannerQuery",
       "operationKind": "query",
-      "text": "query AddToCartBannerQuery {\n  viewer {\n    currentOrder {\n      ...AddToCartBanner_order\n      id\n    }\n    id\n  }\n}\n\nfragment AddToCartBanner_order on Order {\n  stripeCharge {\n    paid\n  }\n  orderItems {\n    id\n    sku {\n      product {\n        __typename\n        ... on FontCollection {\n          name\n        }\n        ... on FontStyle {\n          name\n          family {\n            name\n            id\n          }\n        }\n        ... on Bundle {\n          name\n          fontCollection {\n            name\n            id\n          }\n        }\n        ... on CollectionBundle {\n          name\n          fontCollection {\n            name\n            id\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n  }\n}\n"
+      "text": "query AddToCartBannerQuery {\n  viewer {\n    currentOrder {\n      ...AddToCartBanner_order\n      id\n    }\n    id\n  }\n}\n\nfragment AddToCartBanner_order on Order {\n  stripeCharge {\n    paid\n  }\n  orderItems {\n    id\n    sku {\n      product {\n        __typename\n        ... on FontCollection {\n          name\n        }\n        ... on FontStyle {\n          name\n          family {\n            name\n            id\n          }\n        }\n        ... on Bundle {\n          name\n          fontCollection {\n            name\n            id\n          }\n        }\n        ... on CollectionBundle {\n          name\n          fontCollection {\n            name\n            id\n          }\n        }\n        ... on FontPack {\n          name\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<3c933445c06d4a8d4652e8b758ea5f73>>
+ * @generated SignedSource<<19ed83c28fce87340b4e824e81fc55cc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -23,6 +23,9 @@ export type AddToCartBanner_item$data = {
         } | {
             readonly __typename: "FontCollection";
             readonly name: string;
+        } | {
+            readonly __typename: "FontPack";
+            readonly name: string;
         } | {
             readonly __typename: "FontStyle";
             readonly family: {

package/dist/__generated__/AddToCartBanner_item.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<3c933445c06d4a8d4652e8b758ea5f73>>
+ * @generated SignedSource<<19ed83c28fce87340b4e824e81fc55cc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -87,6 +87,11 @@ const node = function () {
           "selections": v2 /*: any*/,
           "type": "CollectionBundle",
           "abstractKey": null
+        }, {
+          "kind": "InlineFragment",
+          "selections": v1 /*: any*/,
+          "type": "FontPack",
+          "abstractKey": null
         }],
         "storageKey": null
       }],
@@ -96,5 +101,5 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "93905c08206c30255368dbb06f59ccec";
+node.hash = "5b6c677fd518073e74b1651f3b872e8a";
 export default node;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<71d537ea806e036df9d89dd79de6a6a3>>
+ * @generated SignedSource<<2140fe507f18726c8061a0310c392869>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -24,6 +24,9 @@ export type AddToCartBanner_order$data = {
             } | {
                 readonly __typename: "FontCollection";
                 readonly name: string;
+            } | {
+                readonly __typename: "FontPack";
+                readonly name: string;
             } | {
                 readonly __typename: "FontStyle";
                 readonly family: {

package/dist/__generated__/AddToCartBanner_order.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<71d537ea806e036df9d89dd79de6a6a3>>
+ * @generated SignedSource<<2140fe507f18726c8061a0310c392869>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -109,6 +109,11 @@ const node = function () {
             "selections": v2 /*: any*/,
             "type": "CollectionBundle",
             "abstractKey": null
+          }, {
+            "kind": "InlineFragment",
+            "selections": v1 /*: any*/,
+            "type": "FontPack",
+            "abstractKey": null
           }],
           "storageKey": null
         }],

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<61dc08dad7c99f5255c0692da167e97b>>
+ * @generated SignedSource<<9c6fd5f3c780d383237c58aeb2a3adbb>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,8 +9,8 @@ export type BuyButtonIDQuery$variables = {
     collectionId: string;
 };
 export type BuyButtonIDQuery$data = {
-    readonly collection: {
-        readonly " $fragmentSpreads": FragmentRefs<"BuyButton_collection">;
+    readonly product: {
+        readonly " $fragmentSpreads": FragmentRefs<"BuyButton_product">;
     };
 };
 export type BuyButtonIDQuery = {

package/dist/__generated__/BuyButtonIDQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<61dc08dad7c99f5255c0692da167e97b>>
+ * @generated SignedSource<<9c6fd5f3c780d383237c58aeb2a3adbb>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -35,6 +35,16 @@ const node = function () {
       "plural": false,
       "selections": [v2 /*: any*/],
       "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "fontStyles",
+      "plural": true,
+      "selections": [v3 /*: any*/, v2 /*: any*/],
+      "storageKey": null
     };
   return {
     "fragment": {
@@ -45,7 +55,7 @@ const node = function () {
       "selections": [{
         "kind": "RequiredField",
         "field": {
-          "alias": "collection",
+          "alias": "product",
           "args": v1 /*: any*/,
           "concreteType": null,
           "kind": "LinkedField",
@@ -54,12 +64,12 @@ const node = function () {
           "selections": [{
             "args": null,
             "kind": "FragmentSpread",
-            "name": "BuyButton_collection"
+            "name": "BuyButton_product"
           }],
           "storageKey": null
         },
         "action": "THROW",
-        "path": "collection"
+        "path": "product"
       }],
       "type": "RootQueryType",
       "abstractKey": null
@@ -70,7 +80,7 @@ const node = function () {
       "kind": "Operation",
       "name": "BuyButtonIDQuery",
       "selections": [{
-        "alias": "collection",
+        "alias": "product",
         "args": v1 /*: any*/,
         "concreteType": null,
         "kind": "LinkedField",
@@ -82,33 +92,38 @@ const node = function () {
           "kind": "ScalarField",
           "name": "__typename",
           "storageKey": null
+        }, {
+          "kind": "TypeDiscriminator",
+          "abstractKey": "__isNode"
         }, v2 /*: any*/, {
           "kind": "InlineFragment",
-          "selections": [v3 /*: any*/, {
+          "selections": [v3 /*: any*/, v4 /*: any*/],
+          "type": "FontCollection",
+          "abstractKey": null
+        }, {
+          "kind": "InlineFragment",
+          "selections": [{
             "alias": null,
             "args": null,
-            "concreteType": "FontStyle",
-            "kind": "LinkedField",
-            "name": "fontStyles",
-            "plural": true,
-            "selections": [v3 /*: any*/, v2 /*: any*/],
+            "kind": "ScalarField",
+            "name": "name",
             "storageKey": null
-          }],
-          "type": "FontCollection",
+          }, v3 /*: any*/, v4 /*: any*/],
+          "type": "FontPack",
           "abstractKey": null
         }],
         "storageKey": null
       }]
     },
     "params": {
-      "cacheID": "fce9f583257b6bc49f50e90a44a8bea9",
+      "cacheID": "8b4301caff4f8e734cdc4b629bf854fb",
       "id": null,
       "metadata": {},
       "name": "BuyButtonIDQuery",
       "operationKind": "query",
-      "text": "query BuyButtonIDQuery(\n  $collectionId: ID!\n) {\n  collection: node(id: $collectionId) {\n    __typename\n    ...BuyButton_collection\n    id\n  }\n}\n\nfragment BuyButton_collection on FontCollection {\n  id\n  sku {\n    id\n  }\n  fontStyles {\n    sku {\n      id\n    }\n    id\n  }\n}\n"
+      "text": "query BuyButtonIDQuery(\n  $collectionId: ID!\n) {\n  product: node(id: $collectionId) {\n    __typename\n    ...BuyButton_product\n    id\n  }\n}\n\nfragment BuyButton_product on Node {\n  __isNode: __typename\n  __typename\n  id\n  ... on FontCollection {\n    sku {\n      id\n    }\n    fontStyles {\n      sku {\n        id\n      }\n      id\n    }\n  }\n  ... on FontPack {\n    name\n    sku {\n      id\n    }\n    fontStyles {\n      sku {\n        id\n      }\n      id\n    }\n  }\n}\n"
     }
   };
 }();
-node.hash = "4fbf1dbf9e6c530a5d38c697b174d8b0";
+node.hash = "602547ee927b734b5fa2d6d1f2c93765";
 export default node;

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

@@ -0,0 +1,21 @@
+/**
+ * @generated SignedSource<<e4d85c4d41a48694b1732a400c6509e5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type BuyButtonPackIDQuery$variables = {
+    fontPackId: string;
+};
+export type BuyButtonPackIDQuery$data = {
+    readonly product: {
+        readonly " $fragmentSpreads": FragmentRefs<"BuyButton_product">;
+    };
+};
+export type BuyButtonPackIDQuery = {
+    response: BuyButtonPackIDQuery$data;
+    variables: BuyButtonPackIDQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/BuyButtonPackIDQuery.graphql.js

@@ -0,0 +1,129 @@
+/**
+ * @generated SignedSource<<e4d85c4d41a48694b1732a400c6509e5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "fontPackId"
+    }],
+    v1 = [{
+      "kind": "Variable",
+      "name": "id",
+      "variableName": "fontPackId"
+    }],
+    v2 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "Sku",
+      "kind": "LinkedField",
+      "name": "sku",
+      "plural": false,
+      "selections": [v2 /*: any*/],
+      "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "fontStyles",
+      "plural": true,
+      "selections": [v3 /*: any*/, v2 /*: any*/],
+      "storageKey": null
+    };
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "BuyButtonPackIDQuery",
+      "selections": [{
+        "kind": "RequiredField",
+        "field": {
+          "alias": "product",
+          "args": v1 /*: any*/,
+          "concreteType": null,
+          "kind": "LinkedField",
+          "name": "node",
+          "plural": false,
+          "selections": [{
+            "args": null,
+            "kind": "FragmentSpread",
+            "name": "BuyButton_product"
+          }],
+          "storageKey": null
+        },
+        "action": "THROW",
+        "path": "product"
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "BuyButtonPackIDQuery",
+      "selections": [{
+        "alias": "product",
+        "args": v1 /*: any*/,
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "__typename",
+          "storageKey": null
+        }, {
+          "kind": "TypeDiscriminator",
+          "abstractKey": "__isNode"
+        }, v2 /*: any*/, {
+          "kind": "InlineFragment",
+          "selections": [v3 /*: any*/, v4 /*: any*/],
+          "type": "FontCollection",
+          "abstractKey": null
+        }, {
+          "kind": "InlineFragment",
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "name",
+            "storageKey": null
+          }, v3 /*: any*/, v4 /*: any*/],
+          "type": "FontPack",
+          "abstractKey": null
+        }],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "1dd6009828a7671524e6009b49c4a514",
+      "id": null,
+      "metadata": {},
+      "name": "BuyButtonPackIDQuery",
+      "operationKind": "query",
+      "text": "query BuyButtonPackIDQuery(\n  $fontPackId: ID!\n) {\n  product: node(id: $fontPackId) {\n    __typename\n    ...BuyButton_product\n    id\n  }\n}\n\nfragment BuyButton_product on Node {\n  __isNode: __typename\n  __typename\n  id\n  ... on FontCollection {\n    sku {\n      id\n    }\n    fontStyles {\n      sku {\n        id\n      }\n      id\n    }\n  }\n  ... on FontPack {\n    name\n    sku {\n      id\n    }\n    fontStyles {\n      sku {\n        id\n      }\n      id\n    }\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "7c9a7e75de7c428c5a3aec1235d0516e";
+export default node;

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

@@ -0,0 +1,25 @@
+/**
+ * @generated SignedSource<<e7992c96f7ad1c833eda61d490e09988>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type BuyButtonPackSlugQuery$variables = {
+    fontPackSlug: string;
+};
+export type BuyButtonPackSlugQuery$data = {
+    readonly viewer: {
+        readonly slug: {
+            readonly product: {
+                readonly " $fragmentSpreads": FragmentRefs<"BuyButton_product">;
+            };
+        } | null;
+    };
+};
+export type BuyButtonPackSlugQuery = {
+    response: BuyButtonPackSlugQuery$data;
+    variables: BuyButtonPackSlugQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;