fontdue-js 2.4.1 → 2.5.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2.5.0
+
+- Added support for new "Description" field on Licenses, which shows a short description below the license selection
+- Updated some Store Modal headings to use the "UI Font Style Bold" selection in the site settings
+- Improved font selection UX: added a "Select fonts" heading to the font selection page, and updated the language when no fonts are selected from "Please make a selection" to "Please select some fonts"
+
 ## 2.4.1
 
 - Fixes NewsletterSignup component not accepting props in some cases

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

@@ -1,11 +1,12 @@
 /**
- * @generated SignedSource<<763c405fdfe0923a5c762398d6c08948>>
+ * @generated SignedSource<<a40cbcfab954c3a91aa6db48a2173c06>>
  * @lightSyntaxTransform
  * @nogrep
  */
 import { ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type License_node$data = {
+    readonly description: string | null;
     readonly id: string;
     readonly multiplier: string | null;
     readonly name: string | null;

package/dist/__generated__/License_node.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<763c405fdfe0923a5c762398d6c08948>>
+ * @generated SignedSource<<a40cbcfab954c3a91aa6db48a2173c06>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -47,7 +47,17 @@ const node = function () {
       "kind": "ScalarField",
       "name": "url",
       "storageKey": null
-    }, v1 /*: any*/, v2 /*: any*/, {
+    }, v1 /*: any*/, {
+      "alias": null,
+      "args": [{
+        "kind": "Literal",
+        "name": "format",
+        "value": "HTML"
+      }],
+      "kind": "ScalarField",
+      "name": "description",
+      "storageKey": "description(format:\"HTML\")"
+    }, v2 /*: any*/, {
       "alias": "variables",
       "args": null,
       "concreteType": "LicenseVariable",
@@ -83,6 +93,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "215059eeecc274d540639b4247513ee2";
+node.hash = "1550b152731d8412ffc55716cb536407";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<d6a6b14950b4a7b5295adcae28814e4d>>
+ * @generated SignedSource<<5863f231bf5a9e85364cf3f665a16c6a>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/PrecartQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<d6a6b14950b4a7b5295adcae28814e4d>>
+ * @generated SignedSource<<5863f231bf5a9e85364cf3f665a16c6a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -242,7 +242,17 @@ const node = function () {
             "kind": "ScalarField",
             "name": "url",
             "storageKey": null
-          }, v10 /*: any*/, v13 /*: any*/, {
+          }, v10 /*: any*/, {
+            "alias": null,
+            "args": [{
+              "kind": "Literal",
+              "name": "format",
+              "value": "HTML"
+            }],
+            "kind": "ScalarField",
+            "name": "description",
+            "storageKey": "description(format:\"HTML\")"
+          }, v13 /*: any*/, {
             "alias": "variables",
             "args": null,
             "concreteType": "LicenseVariable",
@@ -296,12 +306,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "674621a783c04736a9f2fe16f2667575",
+      "cacheID": "9100aa9ac647943ff260798eae9601f0",
       "id": null,
       "metadata": {},
       "name": "PrecartQuery",
       "operationKind": "query",
-      "text": "query PrecartQuery(\n  $licenseOptionsSpecs: [LicenseOptionsSpec]!\n  $selectedSkuIds: [ID]!\n  $collectionId: ID!\n) {\n  viewer {\n    ...Precart_viewer_DvL55\n    id\n  }\n  collection: node(id: $collectionId) {\n    __typename\n    ...Precart_collection\n    id\n  }\n}\n\nfragment License_node on License {\n  id\n  url\n  name\n  multiplier\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    options: licenseOptions {\n      id\n      amount\n      multiplier\n    }\n  }\n}\n\nfragment Precart_collection on FontCollection {\n  name\n}\n\nfragment Precart_viewer_DvL55 on Viewer {\n  precart(skuIds: $selectedSkuIds, licenseOptions: $licenseOptionsSpecs) {\n    skus {\n      id\n      price(licenseOptions: $licenseOptionsSpecs) {\n        amount\n        ...Price_price\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          name\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptionsSpecs) {\n            amount\n          }\n        }\n        ... on Bundle {\n          name\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptionsSpecs) {\n            amount\n          }\n        }\n        ... on FontStyle {\n          name\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n    }\n    subtotal {\n      amount\n      currency\n      ...Price_price\n    }\n  }\n  licenses(licenseTypes: [RETAIL]) {\n    ...License_node\n    name\n    id\n    defaultSelected\n    variables: licenseVariables {\n      id\n      options: licenseOptions {\n        id\n      }\n    }\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n"
+      "text": "query PrecartQuery(\n  $licenseOptionsSpecs: [LicenseOptionsSpec]!\n  $selectedSkuIds: [ID]!\n  $collectionId: ID!\n) {\n  viewer {\n    ...Precart_viewer_DvL55\n    id\n  }\n  collection: node(id: $collectionId) {\n    __typename\n    ...Precart_collection\n    id\n  }\n}\n\nfragment License_node on License {\n  id\n  url\n  name\n  description(format: HTML)\n  multiplier\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    options: licenseOptions {\n      id\n      amount\n      multiplier\n    }\n  }\n}\n\nfragment Precart_collection on FontCollection {\n  name\n}\n\nfragment Precart_viewer_DvL55 on Viewer {\n  precart(skuIds: $selectedSkuIds, licenseOptions: $licenseOptionsSpecs) {\n    skus {\n      id\n      price(licenseOptions: $licenseOptionsSpecs) {\n        amount\n        ...Price_price\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          name\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptionsSpecs) {\n            amount\n          }\n        }\n        ... on Bundle {\n          name\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptionsSpecs) {\n            amount\n          }\n        }\n        ... on FontStyle {\n          name\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n    }\n    subtotal {\n      amount\n      currency\n      ...Price_price\n    }\n  }\n  licenses(licenseTypes: [RETAIL]) {\n    ...License_node\n    name\n    id\n    defaultSelected\n    variables: licenseVariables {\n      id\n      options: licenseOptions {\n        id\n      }\n    }\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<a5cfb56566c459856b3fca56dcc4a45c>>
+ * @generated SignedSource<<602548031710d0196136676f735a8272>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -13,8 +13,20 @@ export type StoreModalContainerQuery$data = {
             }> | null;
         } | null;
         readonly settings: {
-            readonly uiFontName: string | null;
-            readonly uiFontUrl: string | null;
+            readonly uiFontStyle: {
+                readonly cssFamily: string | null;
+                readonly family: {
+                    readonly cssUrl: string | null;
+                } | null;
+                readonly name: string;
+            } | null;
+            readonly uiFontStyleBold: {
+                readonly cssFamily: string | null;
+                readonly family: {
+                    readonly cssUrl: string | null;
+                } | null;
+                readonly name: string;
+            } | null;
         } | null;
     };
 };

package/dist/__generated__/StoreModalContainerQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<a5cfb56566c459856b3fca56dcc4a45c>>
+ * @generated SignedSource<<602548031710d0196136676f735a8272>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -36,25 +36,47 @@ const node = function () {
     v2 = {
       "alias": null,
       "args": null,
-      "concreteType": "Settings",
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssFamily",
+      "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssUrl",
+      "storageKey": null
+    },
+    v5 = [v2 /*: any*/, v3 /*: any*/, {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontCollection",
       "kind": "LinkedField",
-      "name": "settings",
+      "name": "family",
       "plural": false,
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "uiFontUrl",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "uiFontName",
-        "storageKey": null
-      }],
+      "selections": [v4 /*: any*/],
+
       "storageKey": null
-    };
+    }],
+    v6 = [v2 /*: any*/, v3 /*: any*/, {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontCollection",
+      "kind": "LinkedField",
+      "name": "family",
+      "plural": false,
+      "selections": [v4 /*: any*/, v0 /*: any*/],
+
+      "storageKey": null
+    }, v0 /*: any*/];
+
   return {
     "fragment": {
       "argumentDefinitions": [],
@@ -78,8 +100,34 @@ const node = function () {
           "selections": [v1 /*: any*/],
 
           "storageKey": null
-        }, v2 /*: any*/],
-
+        }, {
+          "alias": null,
+          "args": null,
+          "concreteType": "Settings",
+          "kind": "LinkedField",
+          "name": "settings",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontStyle",
+            "kind": "LinkedField",
+            "name": "uiFontStyle",
+            "plural": false,
+            "selections": v5 /*: any*/,
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "concreteType": "FontStyle",
+            "kind": "LinkedField",
+            "name": "uiFontStyleBold",
+            "plural": false,
+            "selections": v5 /*: any*/,
+            "storageKey": null
+          }],
+          "storageKey": null
+        }],
         "storageKey": null
       }],
       "type": "RootQueryType",
@@ -107,21 +155,48 @@ const node = function () {
           "selections": [v1 /*: any*/, v0 /*: any*/],
 
           "storageKey": null
-        }, v2 /*: any*/, v0 /*: any*/],
+        }, {
+          "alias": null,
+          "args": null,
+          "concreteType": "Settings",
+          "kind": "LinkedField",
+          "name": "settings",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontStyle",
+            "kind": "LinkedField",
+            "name": "uiFontStyle",
+            "plural": false,
+            "selections": v6 /*: any*/,
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "concreteType": "FontStyle",
+            "kind": "LinkedField",
+            "name": "uiFontStyleBold",
+            "plural": false,
+            "selections": v6 /*: any*/,
+            "storageKey": null
+          }],
+          "storageKey": null
+        }, v0 /*: any*/],
 
         "storageKey": null
       }]
     },
     "params": {
-      "cacheID": "9f5bb3fef45f2132fe47d71cdcc09394",
+      "cacheID": "8b53d0e391aeeeeefd259a13251aca86",
       "id": null,
       "metadata": {},
       "name": "StoreModalContainerQuery",
       "operationKind": "query",
-      "text": "query StoreModalContainerQuery {\n  viewer {\n    currentOrder {\n      orderItems {\n        id\n      }\n      id\n    }\n    settings {\n      uiFontUrl\n      uiFontName\n    }\n    id\n  }\n}\n"
+      "text": "query StoreModalContainerQuery {\n  viewer {\n    currentOrder {\n      orderItems {\n        id\n      }\n      id\n    }\n    settings {\n      uiFontStyle {\n        name\n        cssFamily\n        family {\n          cssUrl\n          id\n        }\n        id\n      }\n      uiFontStyleBold {\n        name\n        cssFamily\n        family {\n          cssUrl\n          id\n        }\n        id\n      }\n    }\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "67cf3b7a14c2b8ff47a8138e0f234624";
+node.hash = "dd4757b9238f5ae8689c7191b4abe64c";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<7dc96b3e1c1cea74e1df39a055507b58>>
+ * @generated SignedSource<<12d307fcc2ca71585e67af5328841e38>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -7,6 +7,7 @@ import { ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type StoreModalProductLicense_license$data = {
     readonly defaultSelected: boolean | null;
+    readonly description: string | null;
     readonly id: string;
     readonly name: string | null;
     readonly url: string | null;

package/dist/__generated__/StoreModalProductLicense_license.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<7dc96b3e1c1cea74e1df39a055507b58>>
+ * @generated SignedSource<<12d307fcc2ca71585e67af5328841e38>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -41,6 +41,16 @@ const node = function () {
       "name": "url",
       "storageKey": null
     }, v1 /*: any*/, {
+      "alias": null,
+      "args": [{
+        "kind": "Literal",
+        "name": "format",
+        "value": "HTML"
+      }],
+      "kind": "ScalarField",
+      "name": "description",
+      "storageKey": "description(format:\"HTML\")"
+    }, {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
@@ -89,6 +99,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "22e24165f79ce30a9190ace765d3d1ce";
+node.hash = "5729815aeedac2b8ea39eaab0a986b48";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<b4b764624fbe00d3d774d30ba0b40b3d>>
+ * @generated SignedSource<<c70b3a4167e830f3a526f236819eeb80>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalProductQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<b4b764624fbe00d3d774d30ba0b40b3d>>
+ * @generated SignedSource<<c70b3a4167e830f3a526f236819eeb80>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -377,6 +377,16 @@ const node = function () {
             "name": "url",
             "storageKey": null
           }, v10 /*: any*/, {
+            "alias": null,
+            "args": [{
+              "kind": "Literal",
+              "name": "format",
+              "value": "HTML"
+            }],
+            "kind": "ScalarField",
+            "name": "description",
+            "storageKey": "description(format:\"HTML\")"
+          }, {
             "alias": null,
             "args": null,
             "kind": "ScalarField",
@@ -491,12 +501,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "505ecb8862c17c0dab95c6ae0415862e",
+      "cacheID": "4432f6cf13a130d083e8ae9a7116da48",
       "id": null,
       "metadata": {},
       "name": "StoreModalProductQuery",
       "operationKind": "query",
-      "text": "query StoreModalProductQuery(\n  $productId: ID!\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalFamily_collection\n    ... on FontCollection {\n      children(collectionTypes: [FAMILY]) {\n        id\n        ...StoreModalFamily_collection\n      }\n    }\n  }\n  viewer {\n    ...StoreModalProductLicenseSelection_viewer\n    ...StoreModalProductSummary_viewer\n    endpoint\n    stripeAccountId\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle on Bundle {\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection on FontCollection {\n  ...StoreModalFamilyButton_collection\n  cssUrl\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle\n    }\n    ...StoreModalBundleButton_bundle\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    ...StoreModalStyleButton_fontStyle\n  }\n}\n\nfragment StoreModalProductLicenseSelection_viewer on Viewer {\n  licenses(licenseTypes: [RETAIL]) {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  defaultSelected\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalProductSummary_viewer on Viewer {\n  precart(skuIds: [], licenseOptions: []) {\n    skus {\n      price(licenseOptions: []) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n    subtotal {\n      ...Price_price\n      amount\n      currency\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  id\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  variableAxes {\n    name\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
+      "text": "query StoreModalProductQuery(\n  $productId: ID!\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalFamily_collection\n    ... on FontCollection {\n      children(collectionTypes: [FAMILY]) {\n        id\n        ...StoreModalFamily_collection\n      }\n    }\n  }\n  viewer {\n    ...StoreModalProductLicenseSelection_viewer\n    ...StoreModalProductSummary_viewer\n    endpoint\n    stripeAccountId\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle on Bundle {\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection on FontCollection {\n  ...StoreModalFamilyButton_collection\n  cssUrl\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle\n    }\n    ...StoreModalBundleButton_bundle\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    ...StoreModalStyleButton_fontStyle\n  }\n}\n\nfragment StoreModalProductLicenseSelection_viewer on Viewer {\n  licenses(licenseTypes: [RETAIL]) {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  description(format: HTML)\n  defaultSelected\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalProductSummary_viewer on Viewer {\n  precart(skuIds: [], licenseOptions: []) {\n    skus {\n      price(licenseOptions: []) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n    subtotal {\n      ...Price_price\n      amount\n      currency\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  id\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  variableAxes {\n    name\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
     }
   };
 }();

package/dist/components/Precart/License.js

@@ -17,11 +17,13 @@ const License = _ref => {
     onSelectLicense,
     onSelectLicenseOption
   } = _ref;
-  const node = (0, _reactRelay.useFragment)(_License_node !== void 0 ? _License_node : (_License_node = require("../../__generated__/License_node.graphql"), _License_node.hash && _License_node.hash !== "215059eeecc274d540639b4247513ee2" && console.error("The definition of 'License_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _License_node), nodeKey);
+  const node = (0, _reactRelay.useFragment)(_License_node !== void 0 ? _License_node : (_License_node = require("../../__generated__/License_node.graphql"), _License_node.hash && _License_node.hash !== "1550b152731d8412ffc55716cb536407" && console.error("The definition of 'License_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _License_node), nodeKey);
   if (!node) return null;
   const selectedLicenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
   const selectedOptions = selectedLicenseOptions.find(spec => spec.licenseId === node.id);
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pre-cart__license-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "pre-cart__license",
     "data-selected": selected
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -59,7 +61,12 @@ const License = _ref => {
       key: option.id,
       value: option.id
     }, option.amount)))));
-  })));
+  }))), node.description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "pre-cart__license__description",
+    dangerouslySetInnerHTML: {
+      __html: node.description
+    }
+  }));
 };
 var _default = License;
 exports.default = _default;

package/dist/components/StoreModal/StoreModalContainer.js

@@ -37,12 +37,24 @@ const getBackLink = (history, currentRoute) => {
   if (!previous) return null;
   return getPageTitle(previous.name);
 };
+function getFontData(fontStyle) {
+  if (!fontStyle) return null;
+  const {
+    name,
+    cssFamily,
+    family
+  } = fontStyle;
+  return {
+    name: `${cssFamily} ${name}`,
+    cssUrl: (family === null || family === void 0 ? void 0 : family.cssUrl) ?? null
+  };
+}
 const StoreModalContainer = _ref => {
   var _currentOrder, _currentOrder$orderIt, _settings, _settings2;
   let {
     children
   } = _ref;
-  const data = (0, _reactRelay.useLazyLoadQuery)(_StoreModalContainerQuery !== void 0 ? _StoreModalContainerQuery : (_StoreModalContainerQuery = require("../../__generated__/StoreModalContainerQuery.graphql"), _StoreModalContainerQuery.hash && _StoreModalContainerQuery.hash !== "67cf3b7a14c2b8ff47a8138e0f234624" && console.error("The definition of 'StoreModalContainerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalContainerQuery), {});
+  const data = (0, _reactRelay.useLazyLoadQuery)(_StoreModalContainerQuery !== void 0 ? _StoreModalContainerQuery : (_StoreModalContainerQuery = require("../../__generated__/StoreModalContainerQuery.graphql"), _StoreModalContainerQuery.hash && _StoreModalContainerQuery.hash !== "dd4757b9238f5ae8689c7191b4abe64c" && console.error("The definition of 'StoreModalContainerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalContainerQuery), {});
   const dispatch = (0, _reactRedux.useDispatch)();
   const orderItemCount = ((_currentOrder = data.viewer.currentOrder) === null || _currentOrder === void 0 ? void 0 : (_currentOrder$orderIt = _currentOrder.orderItems) === null || _currentOrder$orderIt === void 0 ? void 0 : _currentOrder$orderIt.length) ?? 0;
   const showCartButton = orderItemCount > 0;
@@ -92,8 +104,10 @@ const StoreModalContainer = _ref => {
     onClickCart: handleCart,
     showCartButton: showCartButton,
     orderItemCount: orderItemCount,
-    uiFontUrl: (_settings = data.viewer.settings) === null || _settings === void 0 ? void 0 : _settings.uiFontUrl,
-    uiFontName: (_settings2 = data.viewer.settings) === null || _settings2 === void 0 ? void 0 : _settings2.uiFontName
+    fonts: {
+      regular: getFontData((_settings = data.viewer.settings) === null || _settings === void 0 ? void 0 : _settings.uiFontStyle),
+      bold: getFontData((_settings2 = data.viewer.settings) === null || _settings2 === void 0 ? void 0 : _settings2.uiFontStyleBold)
+    }
   }, {
     backText: link,
     pageTitle: getPageTitle(currentRoute),

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

@@ -3,6 +3,7 @@ import { StoreModalFamily_collection$key } from '../../__generated__/StoreModalF
 interface StoreModalFamilyProps {
     collection: StoreModalFamily_collection$key;
     onSelect: (skuId: string, selected: boolean) => void;
+    title?: React.ReactNode;
 }
-export default function StoreModalFamily({ collection: collectionKey, onSelect, }: StoreModalFamilyProps): React.JSX.Element | null;
+export default function StoreModalFamily({ collection: collectionKey, onSelect, title, }: StoreModalFamilyProps): React.JSX.Element | null;
 export {};

package/dist/components/StoreModal/StoreModalFamily.js

@@ -34,7 +34,8 @@ function StoreModalFamily(_ref) {
   var _collection$bundles;
   let {
     collection: collectionKey,
-    onSelect
+    onSelect,
+    title
   } = _ref;
   const collection = (0, _reactRelay.useFragment)(_StoreModalFamily_collection !== void 0 ? _StoreModalFamily_collection : (_StoreModalFamily_collection = require("../../__generated__/StoreModalFamily_collection.graphql"), _StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "f0e4764ace2386cb64ef3f8d85128268" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection), collectionKey);
   const fontStyles = (0, _react.useMemo)(() => stylesGrouped(collection), [collection]);
@@ -43,6 +44,7 @@ function StoreModalFamily(_ref) {
     stylesheet: collection.cssUrl && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
       href: collection.cssUrl
     }) || null,
+    title,
     familyButton: /*#__PURE__*/_react.default.createElement(_StoreModalFamilyButton.default, {
       collection: collection,
       onSelectSku: onSelect

package/dist/components/StoreModal/StoreModalProduct.js

@@ -56,6 +56,7 @@ const StoreModalProduct = _ref => {
     body: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, licensesPosition === 'top' && /*#__PURE__*/_react.default.createElement(_StoreModalProductLicenseSelection.default, {
       viewer: viewer
     }), collection && /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, {
+      title: "Select fonts",
       collection: collection,
       onSelect: handleSelectProduct
     }), collection === null || collection === void 0 ? void 0 : (_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.map(child => /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, {

package/dist/components/StoreModalProductLicenseSelection/LicenseElement.d.ts

@@ -3,6 +3,7 @@ interface LicenseElementProps {
     onClick: () => void;
     isSelected: boolean;
     children: {
+        description: string | null;
         name: React.ReactNode;
         variables: React.ReactNode;
     };

package/dist/components/StoreModalProductLicenseSelection/LicenseElement.js

@@ -16,6 +16,7 @@ const LicenseElement = _ref => {
     onClick,
     isSelected,
     children: {
+      description,
       name,
       variables
     }
@@ -23,7 +24,9 @@ const LicenseElement = _ref => {
   const {
     form: config
   } = (0, _react.useContext)(_ConfigContext.default);
-  return /*#__PURE__*/_react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__license-selection__license"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: onClick,
     className: "store-modal__license-selection__license-button",
     "data-selected": isSelected
@@ -33,7 +36,12 @@ const LicenseElement = _ref => {
     className: "store-modal__license-selection__icon-pair"
   }, isSelected ? config.checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.CheckboxChecked, null) : /*#__PURE__*/_react.default.createElement(_Icons.CheckboxCrossed, null) : /*#__PURE__*/_react.default.createElement(_Icons.Checkbox, null), name)), /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__license-selection__variables"
-  }, variables));
+  }, variables)), description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__license-selection__description",
+    dangerouslySetInnerHTML: {
+      __html: description
+    }
+  }));
 };
 var _default = LicenseElement;
 exports.default = _default;

package/dist/components/StoreModalProductLicenseSelection/StoreModalProductLicense.js

@@ -41,7 +41,7 @@ function StoreModalProduceLicense(_ref) {
   let {
     license: licenseKey
   } = _ref;
-  const license = (0, _reactRelay.useFragment)(_StoreModalProductLicense_license !== void 0 ? _StoreModalProductLicense_license : (_StoreModalProductLicense_license = require("../../__generated__/StoreModalProductLicense_license.graphql"), _StoreModalProductLicense_license.hash && _StoreModalProductLicense_license.hash !== "22e24165f79ce30a9190ace765d3d1ce" && console.error("The definition of 'StoreModalProductLicense_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicense_license), licenseKey);
+  const license = (0, _reactRelay.useFragment)(_StoreModalProductLicense_license !== void 0 ? _StoreModalProductLicense_license : (_StoreModalProductLicense_license = require("../../__generated__/StoreModalProductLicense_license.graphql"), _StoreModalProductLicense_license.hash && _StoreModalProductLicense_license.hash !== "5729815aeedac2b8ea39eaab0a986b48" && console.error("The definition of 'StoreModalProductLicense_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicense_license), licenseKey);
   const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
   const selectedOptions = licenseOptions.find(_ref2 => {
     let {
@@ -90,6 +90,7 @@ function StoreModalProduceLicense(_ref) {
     isSelected: isSelected
   }, {
     name: license.name,
+    description: license.description,
     variables: license.variables && license.variables.map(variable => {
       if (variable.variableType === 'text') return null;
       if (!variable.options) return null;

package/dist/components/StoreModalProductSummary/index.js

@@ -129,7 +129,7 @@ const StoreModalProductSummary = _ref => {
     className: "store-modal__product-summary__nothing-selected"
   }, "Calculating price...") : /*#__PURE__*/_react.default.createElement("span", {
     className: "store-modal__product-summary__nothing-selected"
-  }, anySkusSelected ? 'Please select a license' : 'Please make a selection'), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, anySkusSelected ? 'Please select a license' : 'Please select some fonts'), /*#__PURE__*/_react.default.createElement(_Button.default, {
     className: "store-modal__product-summary__add-to-cart-button",
     onClick: handleAddToCart,
     disabled: submitting || !hasSelection

package/dist/components/elements/StoreModalContainer/index.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+interface FontData {
+    name: string;
+    cssUrl: string | null;
+}
 interface StoreModalContainerProps {
     onClickBackground?: () => void;
     onClickClose?: () => void;
@@ -6,8 +10,10 @@ interface StoreModalContainerProps {
     onClickCart?: () => void;
     showCartButton?: boolean;
     orderItemCount: number;
-    uiFontUrl: string | null | undefined;
-    uiFontName: string | null | undefined;
+    fonts: {
+        regular: FontData | null;
+        bold: FontData | null;
+    };
     children: {
         backText?: React.ReactNode;
         pageTitle: React.ReactNode;

package/dist/components/elements/StoreModalContainer/index.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Icons = require("../../Icons");
 var _StoreModalContainerContext = _interopRequireDefault(require("./StoreModalContainerContext"));
 var _Stylesheet = _interopRequireDefault(require("../../Stylesheet"));
+var _utils = require("../../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -19,8 +20,7 @@ const StoreModalContainer = _ref => {
     onClickCart,
     showCartButton,
     orderItemCount,
-    uiFontUrl,
-    uiFontName,
+    fonts,
     children: {
       backText,
       pageTitle,
@@ -41,16 +41,19 @@ const StoreModalContainer = _ref => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__container__overlay"
-  }, uiFontUrl && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-    href: uiFontUrl
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, [fonts.regular, fonts.bold].filter(_utils.notEmpty).map(font => /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
+    key: font.name,
+    href: font.cssUrl
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__container__background",
     onClick: onClickBackground
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__container__container",
     ref: container,
     style: {
-      fontFamily: uiFontName ? `"${uiFontName}"` : ''
+      '--font-family': fonts.regular ? `"${fonts.regular.name}"` : undefined,
+      '--font-family__bold': fonts.bold ? `"${fonts.bold.name}"` : undefined,
+      fontFamily: 'var(--font-family, inherit)'
     }
   }, /*#__PURE__*/_react.default.createElement("nav", {
     className: "store-modal__container__nav",

package/dist/components/elements/StoreModalFamily/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface StoreModalFamilyProps {
     children: {
         stylesheet: React.ReactElement | null;
+        title: React.ReactNode;
         familyButton: React.ReactElement;
         bundles?: React.ReactElement[] | null;
         styleGroups?: React.ReactElement[][] | null;

package/dist/components/elements/StoreModalFamily/index.js

@@ -12,12 +12,15 @@ const StoreModalFamily = _ref => {
       stylesheet,
       bundles,
       familyButton,
-      styleGroups
+      styleGroups,
+      title
     }
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__family__container"
-  }, stylesheet, /*#__PURE__*/_react.default.cloneElement(familyButton, {
+  }, stylesheet, title && /*#__PURE__*/_react.default.createElement("h3", {
+    className: "store-modal__family__title"
+  }, title), /*#__PURE__*/_react.default.cloneElement(familyButton, {
     className: 'store-modal__family__family-button'
   }), bundles === null || bundles === void 0 ? void 0 : bundles.map(bundle => /*#__PURE__*/_react.default.cloneElement(bundle, {
     className: 'store-modal__family__bundle-button'

package/dist/fontdue.css

@@ -1205,6 +1205,10 @@ body[data-fontdue-store-modal=open] {
   text-align: center;
 }
 
+.store-modal__container__title {
+  font-family: var(--font-family__bold, inherit);
+}
+
 .store-modal__container__buttons {
   text-align: right;
 }
@@ -1330,6 +1334,11 @@ body[data-fontdue-store-modal=open] {
   margin-bottom: 40px;
 }
 
+.store-modal__family__title {
+  font-family: var(--font-family__bold, inherit);
+  margin-bottom: 20px;
+}
+
 .store-modal__family__group {
   display: grid;
   grid-template-columns: 1fr;
@@ -1510,6 +1519,11 @@ body[data-fontdue-store-modal=open] {
 }
 
 .store-modal__license-selection__title {
+  font-family: var(--font-family__bold, inherit);
+  margin-bottom: 20px;
+}
+
+.store-modal__license-selection__license {
   margin-bottom: 20px;
 }
 
@@ -1532,7 +1546,6 @@ body[data-fontdue-store-modal=open] {
   box-sizing: border-box;
   display: block;
   width: 100%;
-  margin-bottom: 20px;
   display: flex;
   align-items: stretch;
 }
@@ -1566,6 +1579,10 @@ body[data-fontdue-store-modal=open] {
   margin-right: 8px;
 }
 
+.store-modal__license-selection__license-button + .store-modal__license-selection__description {
+  margin-top: 10px;
+}
+
 .store-modal__license-selection__license-button-label {
   flex: 2 0 40%;
   align-items: flex-start;
@@ -2387,8 +2404,8 @@ body[data-fontdue-store-modal=open] {
   padding-bottom: 50px;
 }
 .checkout-modal__customer-info-message {
-  font-size: 32px;
-  margin-bottom: 30px;
+  font-family: var(--font-family__bold, inherit);
+  margin-bottom: 20px;
 }
 .checkout-modal__customer-info-message .icon {
   display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts-declarations",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",