fontdue-js 0.1.3 → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+## 1.1.0
+
+- Added `interactionStyle` config for type tester OT features with a new `select` option
+- Added `lineHeight` config to type tester
+- The size slider now has a "Size" label which can be customized or disabled
+- Fixed an issue where some component updates were causing excessive graphql requests
+- Fixed CharacterViewer component for fonts with no GSUB glyphs
+- Adjusted default type tester styles for better spacing and mobile defaults
+
+## 1.0.1
+
+- Fixed an issue with Select component spacing
+
+## 1.0.0
+
+- Initial release

package/CharacterViewer.d.ts

@@ -0,0 +1,3 @@
+import CharacterViewer from './dist/components/CharacterViewer';
+export * from './dist/components/CharacterViewer';
+export default CharacterViewer;

package/CharacterViewer.js

@@ -0,0 +1 @@
+module.exports = require('./dist/components/CharacterViewer');

package/README.md

@@ -5,7 +5,7 @@ This package exports [Fontdue.js](https://docs.fontdue.com/fontduejs) components
 ## Usage
 
 1. Wrap the root of your project with the [`FontdueProvider`](#fontdueprovider) component. For example in a Next.js app, add it to your `_app.tsx`. 
-2. Replace the `url` property with your Fontdue store URL.
+2. Include the `url` property with your Fontdue store URL.
 3. Render the [`StoreModal`](#storemodal) component so that is it available on every page.
 4. Import the `fontdue-js/fontdue.css` CSS file. (This example uses Next.js)
 
@@ -21,13 +21,11 @@ import 'fontdue-js/fontdue.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <React.Fragment>
-      <FontdueProvider url="https://example.fontdue.com" config={{}}>
-        <Component {...pageProps} />
+    <FontdueProvider url="https://example.fontdue.com" config={{}}>
+      <Component {...pageProps} />
 
-        <StoreModal />
-      </FontdueProvider>
-    </React.Fragment>
+      <StoreModal />
+    </FontdueProvider>
   );
 }
 
@@ -69,7 +67,9 @@ import StoreModal from 'fontdue-js/StoreModal';
 
 ## `BuyButton`
 
-Show a **Buy** button for a particular collection. When clicked, opens the StoreModal showing that collection.
+A button which when clicked opens the Cart to the relevant collection, and selects the collection.
+
+Renders a button with the text `Buy {collectionName}`
 
 ```tsx
 import BuyButton from 'fontdue-js/BuyButton';
@@ -78,11 +78,11 @@ import BuyButton from 'fontdue-js/BuyButton';
 | Prop | Description |
 | --- | --- |
 | `collectionId` or `collectionSlug` | (Required) `string` Collection identifier |
-| `collectionName` | (Optional) `string` Name to display as a suffix in the button: `Buy {collectionName}` |
+| `collectionName` | (Optional) `string` The name to render in the button: `Buy {collectionName}` |
 
 ## `CartButton`
 
-A cart button. When clicked, it opens the StoreModal. If a user has items in their cart, it will show the current cart. Otherwise, it shows the index "Browse" page of the StoreModal.
+A button to open the Store Modal. If the user has items in their cart, the button will navigate straight to the Cart screen. Otherwise it opens the fonts index.
 
 ```tsx
 import CartButton from 'fontdue-js/CartButton';
@@ -90,12 +90,24 @@ import CartButton from 'fontdue-js/CartButton';
 
 | Prop | Description |
 | --- | --- |
-| `buttonStyle` | (Optional) `'icon' \| 'inline'` Style of the button. Defaults to an unstyled button. |
-| `label` | (Optional) `string` Text label instead of "Cart" when `buttonStyle` is not `icon`. |
+| `buttonStyle` | (Optional) `'icon' \| 'inline'` Button style. If left blank, the button is unstyled. |
+| `label` | (Optional) `string` For non-icon style buttons, the text to render inside the button. Defaults to "Cart" |
+
+## `CharacterViewer`
+
+An interactive character/glyph explorer.
+
+```tsx
+import CharacterViewer from 'fontdue-js/CharacterViewer';
+```
+
+| Prop | Description |
+| --- | --- |
+| `collectionId` or `collectionSlug` | (Required) `string` Identifier for collection |
 
 ## `TypeTesters`
 
-Displays a list of type testers for a collection, by pulling data from the Fontdue CMS for that collection.
+A group of type tester components for a collection. You must first add content for the collection's type testers through the Fontdue dashboard.
 
 ```tsx
 import TypeTesters from 'fontdue-js/TypeTesters';
@@ -122,33 +134,33 @@ The props accepted for this compnenent will change and be documented thereafter.
 import TypeTester from 'fontdue-js/TypeTester';
 ```
 
-## `NewsletterSignup`
+## `TestFontsForm`
 
-A newsletter signup form. Customers entering their information here simply adds them as a Customer in the Fontdue CMS.
+Displays a form for users to enter their information and download test fonts. Make sure you have configured [Test Fonts](https://docs.fontdue.com/test-fonts) for this to work.
 
 ```tsx
-import NewsletterSignup from 'fontdue-js/NewsletterSignup';
+import TestFontsForm from 'fontdue-js/TestFontsForm';
 ```
 
 | Prop | Description |
 | --- | --- |
-| `optInLabel` | (Required) `string` Label that appears with the checkbox required to be checked. |
-| `buttonLabel` | (Optional) `string` Label for the button. Defaults to "Subscribe" |
-| `optInCheckboxChecked` | (Optional) `boolean` Set the checkbox checked by default. |
+| `agreementLabel` | (Optional) `string` Label for required checkbox. Defaults to the field "EULA agreement text" in your Fontdue Labels settings |
+| `downloadLabel` | (Optional) `string` Download button label. Defaults to "Download test fonts" |
+| `newsletterCheckboxChecked` | (Optional) `boolean` Set the newsletter opt-in checkbox checked by default |
 
-## `TestFontsForm`
+## `NewsletterSignup`
 
-Displays a form for users to enter their information in order to download test fonts. Make sure you have configured [Test Fonts](https://docs.fontdue.com/test-fonts) for this to work.
+A newsletter signup form. Customers entering their information here simply adds them as a Customer in the Fontdue CMS.
 
 ```tsx
-import TestFontsForm from 'fontdue-js/TestFontsForm';
+import NewsletterSignup from 'fontdue-js/NewsletterSignup';
 ```
 
 | Prop | Description |
 | --- | --- |
-| `agreementLabel` | (Optional) `string` Label for required checkbox. Defaults to the field "EULA agreement text" in your Fontdue Labels settings |
-| `downloadLabel` | (Optional) `string` Download button label. Defaults to "Download test fonts" |
-| `newsletterCheckboxChecked` | (Optional) `boolean` Set the newsletter opt-in checkbox checked by default |
+| `optInLabel` | (Required) `string` Label that appears with the checkbox required to be checked. |
+| `buttonLabel` | (Optional) `string` Label for the button. Defaults to "Subscribe" |
+| `optInCheckboxChecked` | (Optional) `boolean` Set the checkbox checked by default. |
 
 ## `useFontStyle`
 

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

@@ -0,0 +1,20 @@
+import { ConcreteRequest } from "relay-runtime";
+import { FragmentRefs } from "relay-runtime";
+export declare type CharacterViewer_SlugQueryVariables = {
+    collectionSlug: string;
+};
+export declare type CharacterViewer_SlugQueryResponse = {
+    readonly viewer: {
+        readonly slug: {
+            readonly fontCollection: {
+                readonly " $fragmentRefs": FragmentRefs<"CharacterViewer_collection">;
+            } | null;
+        } | null;
+    } | null;
+};
+export declare type CharacterViewer_SlugQuery = {
+    readonly response: CharacterViewer_SlugQueryResponse;
+    readonly variables: CharacterViewer_SlugQueryVariables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/CharacterViewer_SlugQuery.graphql.js

@@ -0,0 +1,289 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/* tslint:disable */
+
+/* eslint-disable */
+// @ts-nocheck
+
+/*
+query CharacterViewer_SlugQuery(
+  $collectionSlug: String!
+) {
+  viewer {
+    slug(name: $collectionSlug) {
+      fontCollection {
+        ...CharacterViewer_collection
+        id
+      }
+      id
+    }
+    id
+  }
+}
+
+fragment CharacterViewer_collection on FontCollection {
+  featureStyle {
+    id
+  }
+  id
+  name
+  fontStyles {
+    id
+    cssFamily
+    name
+    characterBlocks {
+      name
+      characters
+    }
+    featureCharacters {
+      feature
+      name
+      characters
+    }
+  }
+  children(collectionTypes: [FAMILY]) {
+    id
+    name
+    fontStyles {
+      id
+      cssFamily
+      name
+      characterBlocks {
+        name
+        characters
+      }
+      featureCharacters {
+        feature
+        name
+        characters
+      }
+    }
+  }
+}
+*/
+const node = function () {
+  var v0 = [{
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "collectionSlug"
+  }],
+      v1 = [{
+    "kind": "Variable",
+    "name": "name",
+    "variableName": "collectionSlug"
+  }],
+      v2 = {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "id",
+    "storageKey": null
+  },
+      v3 = {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "name",
+    "storageKey": null
+  },
+      v4 = {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "characters",
+    "storageKey": null
+  },
+      v5 = {
+    "alias": null,
+    "args": null,
+    "concreteType": "FontStyle",
+    "kind": "LinkedField",
+    "name": "fontStyles",
+    "plural": true,
+    "selections": [v2
+    /*: any*/
+    , {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssFamily",
+      "storageKey": null
+    }, v3
+    /*: any*/
+    , {
+      "alias": null,
+      "args": null,
+      "concreteType": "CharacterBlock",
+      "kind": "LinkedField",
+      "name": "characterBlocks",
+      "plural": true,
+      "selections": [v3
+      /*: any*/
+      , v4
+      /*: any*/
+      ],
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "concreteType": "FeatureCharacters",
+      "kind": "LinkedField",
+      "name": "featureCharacters",
+      "plural": true,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "feature",
+        "storageKey": null
+      }, v3
+      /*: any*/
+      , v4
+      /*: any*/
+      ],
+      "storageKey": null
+    }],
+    "storageKey": null
+  };
+  return {
+    "fragment": {
+      "argumentDefinitions": v0
+      /*: any*/
+      ,
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "CharacterViewer_SlugQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1
+          /*: any*/
+          ,
+          "concreteType": "Slug",
+          "kind": "LinkedField",
+          "name": "slug",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontCollection",
+            "kind": "LinkedField",
+            "name": "fontCollection",
+            "plural": false,
+            "selections": [{
+              "args": null,
+              "kind": "FragmentSpread",
+              "name": "CharacterViewer_collection"
+            }],
+            "storageKey": null
+          }],
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0
+      /*: any*/
+      ,
+      "kind": "Operation",
+      "name": "CharacterViewer_SlugQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1
+          /*: any*/
+          ,
+          "concreteType": "Slug",
+          "kind": "LinkedField",
+          "name": "slug",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontCollection",
+            "kind": "LinkedField",
+            "name": "fontCollection",
+            "plural": false,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "concreteType": "FontStyle",
+              "kind": "LinkedField",
+              "name": "featureStyle",
+              "plural": false,
+              "selections": [v2
+              /*: any*/
+              ],
+              "storageKey": null
+            }, v2
+            /*: any*/
+            , v3
+            /*: any*/
+            , v5
+            /*: any*/
+            , {
+              "alias": null,
+              "args": [{
+                "kind": "Literal",
+                "name": "collectionTypes",
+                "value": ["FAMILY"]
+              }],
+              "concreteType": "FontCollection",
+              "kind": "LinkedField",
+              "name": "children",
+              "plural": true,
+              "selections": [v2
+              /*: any*/
+              , v3
+              /*: any*/
+              , v5
+              /*: any*/
+              ],
+              "storageKey": "children(collectionTypes:[\"FAMILY\"])"
+            }],
+            "storageKey": null
+          }, v2
+          /*: any*/
+          ],
+          "storageKey": null
+        }, v2
+        /*: any*/
+        ],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "f69a908fd095e2408ba06adeeb8cd0f0",
+      "id": null,
+      "metadata": {},
+      "name": "CharacterViewer_SlugQuery",
+      "operationKind": "query",
+      "text": "query CharacterViewer_SlugQuery(\n  $collectionSlug: String!\n) {\n  viewer {\n    slug(name: $collectionSlug) {\n      fontCollection {\n        ...CharacterViewer_collection\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment CharacterViewer_collection on FontCollection {\n  featureStyle {\n    id\n  }\n  id\n  name\n  fontStyles {\n    id\n    cssFamily\n    name\n    characterBlocks {\n      name\n      characters\n    }\n    featureCharacters {\n      feature\n      name\n      characters\n    }\n  }\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    fontStyles {\n      id\n      cssFamily\n      name\n      characterBlocks {\n        name\n        characters\n      }\n      featureCharacters {\n        feature\n        name\n        characters\n      }\n    }\n  }\n}\n"
+    }
+  };
+}();
+
+node.hash = 'de903e7c2640562aee374a900e089c9c';
+var _default = node;
+exports.default = _default;

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

@@ -1,13 +1,7 @@
 import { ReaderFragment } from "relay-runtime";
 import { FragmentRefs } from "relay-runtime";
 export declare type TypeTesterFeatures_fontStyle = {
-    readonly fontFeatures: {
-        readonly supportedFeatures: ReadonlyArray<string>;
-        readonly stylisticSetNames: ReadonlyArray<{
-            readonly featureName: string;
-            readonly humanName: string;
-        }>;
-    };
+    readonly " $fragmentRefs": FragmentRefs<"useFeaturesData_fontStyle">;
     readonly " $refType": "TypeTesterFeatures_fontStyle";
 };
 export declare type TypeTesterFeatures_fontStyle$data = TypeTesterFeatures_fontStyle;

package/dist/__generated__/TypeTesterFeatures_fontStyle.graphql.js

@@ -15,45 +15,13 @@ const node = {
   "metadata": null,
   "name": "TypeTesterFeatures_fontStyle",
   "selections": [{
-    "alias": null,
     "args": null,
-    "concreteType": "FontFeatures",
-    "kind": "LinkedField",
-    "name": "fontFeatures",
-    "plural": false,
-    "selections": [{
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "supportedFeatures",
-      "storageKey": null
-    }, {
-      "alias": null,
-      "args": null,
-      "concreteType": "StylisticSetName",
-      "kind": "LinkedField",
-      "name": "stylisticSetNames",
-      "plural": true,
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "featureName",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "humanName",
-        "storageKey": null
-      }],
-      "storageKey": null
-    }],
-    "storageKey": null
+    "kind": "FragmentSpread",
+    "name": "useFeaturesData_fontStyle"
   }],
   "type": "FontStyle",
   "abstractKey": null
 };
-node.hash = '838ddab02dcbca47c8368b219c302934';
+node.hash = '25582c33916ebaadd2f674b1d0b6bf4b';
 var _default = node;
 exports.default = _default;

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

@@ -3,7 +3,7 @@ import { FragmentRefs } from "relay-runtime";
 export declare type TypeTesterFloatingToolbar_testers = ReadonlyArray<{
     readonly id: string;
     readonly fontStyle: {
-        readonly " $fragmentRefs": FragmentRefs<"TypeTesterFeatures_fontStyle">;
+        readonly " $fragmentRefs": FragmentRefs<"useFeaturesData_fontStyle" | "TypeTesterFeatures_fontStyle">;
     } | null;
     readonly " $refType": "TypeTesterFloatingToolbar_testers";
 }>;

package/dist/__generated__/TypeTesterFloatingToolbar_testers.graphql.js

@@ -30,6 +30,10 @@ const node = {
     "name": "fontStyle",
     "plural": false,
     "selections": [{
+      "args": null,
+      "kind": "FragmentSpread",
+      "name": "useFeaturesData_fontStyle"
+    }, {
       "args": null,
       "kind": "FragmentSpread",
       "name": "TypeTesterFeatures_fontStyle"
@@ -39,6 +43,6 @@ const node = {
   "type": "TypeTester",
   "abstractKey": null
 };
-node.hash = '5554933cac70854b361575a5ed0af8ac';
+node.hash = '3b87269ef35fe6c6cfabcc7a2e330a3c';
 var _default = node;
 exports.default = _default;

package/dist/__generated__/TypeTester_StyleQuery.graphql.js

@@ -57,13 +57,7 @@ fragment SelectButton_sku on Sku {
 }
 
 fragment TypeTesterFeatures_fontStyle on FontStyle {
-  fontFeatures {
-    supportedFeatures
-    stylisticSetNames {
-      featureName
-      humanName
-    }
-  }
+  ...useFeaturesData_fontStyle
 }
 
 fragment TypeTesterStyleSelectData_fontStyle on FontStyle {
@@ -100,6 +94,7 @@ fragment TypeTester_fontStyle on FontStyle {
   ...TypeTesterFeatures_fontStyle
   ...TypeTesterStyleSelectData_fontStyle
   ...FontStyle_fontStyle
+  ...useFeaturesData_fontStyle
   family {
     cssUrl
     id
@@ -128,6 +123,16 @@ fragment TypeTester_fontStyle on FontStyle {
 fragment TypeTester_viewer on Viewer {
   ...TypeTesterStyleSelectData_viewer
 }
+
+fragment useFeaturesData_fontStyle on FontStyle {
+  fontFeatures {
+    supportedFeatures
+    stylisticSetNames {
+      featureName
+      humanName
+    }
+  }
+}
 */
 const node = function () {
   var v0 = [{
@@ -455,12 +460,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "80bf60fbcc8c99ccaff09a562f3d53ee",
+      "cacheID": "d729e19f7123d0dd27c4d856eff7b41c",
       "id": null,
       "metadata": {},
       "name": "TypeTester_StyleQuery",
       "operationKind": "query",
-      "text": "query TypeTester_StyleQuery(\n  $id: ID!\n) {\n  fontStyle: node(id: $id) {\n    __typename\n    ...TypeTester_fontStyle\n    id\n  }\n  viewer {\n    ...TypeTester_viewer\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 SKUPrice_sku_2AMk59 on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku on Sku {\n  id\n  ...SKUPrice_sku_2AMk59\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  cssWeight\n  cssStyle\n  cssStretch\n  family {\n    name\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_viewer on Viewer {\n  families: fontCollections(collectionTypes: [FAMILY], first: 999) {\n    edges {\n      node {\n        id\n        name\n        fontStyles {\n          id\n          name\n          cssWeight\n          cssStyle\n          cssStretch\n        }\n      }\n    }\n  }\n}\n\nfragment TypeTester_fontStyle on FontStyle {\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku\n    ...SKUPrice_sku\n    id\n    basePrice: price {\n      amount\n    }\n  }\n  fontCollections {\n    sku {\n      ...SelectButton_sku\n      ...SKUPrice_sku\n      id\n      basePrice: price {\n        amount\n      }\n    }\n    id\n  }\n}\n\nfragment TypeTester_viewer on Viewer {\n  ...TypeTesterStyleSelectData_viewer\n}\n"
+      "text": "query TypeTester_StyleQuery(\n  $id: ID!\n) {\n  fontStyle: node(id: $id) {\n    __typename\n    ...TypeTester_fontStyle\n    id\n  }\n  viewer {\n    ...TypeTester_viewer\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 SKUPrice_sku_2AMk59 on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku on Sku {\n  id\n  ...SKUPrice_sku_2AMk59\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  cssWeight\n  cssStyle\n  cssStretch\n  family {\n    name\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_viewer on Viewer {\n  families: fontCollections(collectionTypes: [FAMILY], first: 999) {\n    edges {\n      node {\n        id\n        name\n        fontStyles {\n          id\n          name\n          cssWeight\n          cssStyle\n          cssStretch\n        }\n      }\n    }\n  }\n}\n\nfragment TypeTester_fontStyle on FontStyle {\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku\n    ...SKUPrice_sku\n    id\n    basePrice: price {\n      amount\n    }\n  }\n  fontCollections {\n    sku {\n      ...SelectButton_sku\n      ...SKUPrice_sku\n      id\n      basePrice: price {\n        amount\n      }\n    }\n    id\n  }\n}\n\nfragment TypeTester_viewer on Viewer {\n  ...TypeTesterStyleSelectData_viewer\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
     }
   };
 }();

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

@@ -20,7 +20,7 @@ export declare type TypeTester_fontStyle = {
             readonly " $fragmentRefs": FragmentRefs<"SelectButton_sku" | "SKUPrice_sku">;
         } | null;
     } | null> | null;
-    readonly " $fragmentRefs": FragmentRefs<"TypeTesterFeatures_fontStyle" | "TypeTesterStyleSelectData_fontStyle" | "FontStyle_fontStyle">;
+    readonly " $fragmentRefs": FragmentRefs<"TypeTesterFeatures_fontStyle" | "TypeTesterStyleSelectData_fontStyle" | "FontStyle_fontStyle" | "useFeaturesData_fontStyle">;
     readonly " $refType": "TypeTester_fontStyle";
 };
 export declare type TypeTester_fontStyle$data = TypeTester_fontStyle;

package/dist/__generated__/TypeTester_fontStyle.graphql.js

@@ -94,12 +94,16 @@ const node = function () {
       "args": null,
       "kind": "FragmentSpread",
       "name": "FontStyle_fontStyle"
+    }, {
+      "args": null,
+      "kind": "FragmentSpread",
+      "name": "useFeaturesData_fontStyle"
     }],
     "type": "FontStyle",
     "abstractKey": null
   };
 }();
 
-node.hash = '0d5783f65fd4bf6f0840996214179fca';
+node.hash = 'e570d7809bdb60196f3190d2cf27ee0f';
 var _default = node;
 exports.default = _default;