fontdue-js 0.1.0-alpha21 → 0.1.0-alpha22

package/dist/__generated__/StoreModalReviewCompleteOrderMutation.graphql.js

@@ -50,6 +50,7 @@ fragment CartTotals_order on Order {
     ...Price_price
   }
   isVatTax
+  gstIncluded
 }
 
 fragment CouponText_coupon on Coupon {
@@ -356,6 +357,12 @@ const node = function () {
             "kind": "ScalarField",
             "name": "isVatTax",
             "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "gstIncluded",
+            "storageKey": null
           }, v3
           /*: any*/
           , {
@@ -522,12 +529,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "faffc54a8183346d4e3452feb7abbeee",
+      "cacheID": "a3417f9ea3502c999073d28076ed9df7",
       "id": null,
       "metadata": {},
       "name": "StoreModalReviewCompleteOrderMutation",
       "operationKind": "mutation",
-      "text": "mutation StoreModalReviewCompleteOrderMutation {\n  completeOrder {\n    order {\n      ...StoreModalReview_order\n      stripePaymentIntent {\n        clientSecret\n      }\n      id\n    }\n    requiresAction\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  isVatTax\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\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 StoreModalDownload_order on Order {\n  id\n  archiveUrl\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalReview_order on Order {\n  ...CartTotals_order\n  ...StoreModalDownload_order\n  customer {\n    email\n    name\n    id\n  }\n  billingIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brandFormatted\n    }\n  }\n  orderItems {\n    id\n    description\n    sku {\n      ...SKUPrice_sku\n      id\n    }\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n}\n"
+      "text": "mutation StoreModalReviewCompleteOrderMutation {\n  completeOrder {\n    order {\n      ...StoreModalReview_order\n      stripePaymentIntent {\n        clientSecret\n      }\n      id\n    }\n    requiresAction\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  isVatTax\n  gstIncluded\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\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 StoreModalDownload_order on Order {\n  id\n  archiveUrl\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalReview_order on Order {\n  ...CartTotals_order\n  ...StoreModalDownload_order\n  customer {\n    email\n    name\n    id\n  }\n  billingIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brandFormatted\n    }\n  }\n  orderItems {\n    id\n    description\n    sku {\n      ...SKUPrice_sku\n      id\n    }\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n}\n"
     }
   };
 }();

package/dist/__generated__/StoreModalReviewQuery.graphql.js

@@ -48,6 +48,7 @@ fragment CartTotals_order on Order {
     ...Price_price
   }
   isVatTax
+  gstIncluded
 }
 
 fragment CouponText_coupon on Coupon {
@@ -352,6 +353,12 @@ const node = function () {
             "kind": "ScalarField",
             "name": "isVatTax",
             "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "gstIncluded",
+            "storageKey": null
           }, v1
           /*: any*/
           , {
@@ -522,12 +529,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "3a58f45b04fd91f8d85d8627c902e2d8",
+      "cacheID": "01e8ec43bf6852ce003e9c43cf644521",
       "id": null,
       "metadata": {},
       "name": "StoreModalReviewQuery",
       "operationKind": "query",
-      "text": "query StoreModalReviewQuery {\n  viewer {\n    ...StoreModalReview_viewer\n    currentOrder {\n      ...StoreModalReview_order\n      id\n    }\n    id\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  isVatTax\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\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 StoreModalDownload_order on Order {\n  id\n  archiveUrl\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalReview_order on Order {\n  ...CartTotals_order\n  ...StoreModalDownload_order\n  customer {\n    email\n    name\n    id\n  }\n  billingIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brandFormatted\n    }\n  }\n  orderItems {\n    id\n    description\n    sku {\n      ...SKUPrice_sku\n      id\n    }\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n}\n\nfragment StoreModalReview_viewer on Viewer {\n  settings {\n    eulaAgreementLabel\n  }\n}\n"
+      "text": "query StoreModalReviewQuery {\n  viewer {\n    ...StoreModalReview_viewer\n    currentOrder {\n      ...StoreModalReview_order\n      id\n    }\n    id\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  isVatTax\n  gstIncluded\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\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 StoreModalDownload_order on Order {\n  id\n  archiveUrl\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalReview_order on Order {\n  ...CartTotals_order\n  ...StoreModalDownload_order\n  customer {\n    email\n    name\n    id\n  }\n  billingIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brandFormatted\n    }\n  }\n  orderItems {\n    id\n    description\n    sku {\n      ...SKUPrice_sku\n      id\n    }\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n}\n\nfragment StoreModalReview_viewer on Viewer {\n  settings {\n    eulaAgreementLabel\n  }\n}\n"
     }
   };
 }();

package/dist/__generated__/TestFontsFormUpdateCustomerMutation.graphql.js

@@ -167,6 +167,7 @@ fragment CartTotals_order on Order {
     ...Price_price
   }
   isVatTax
+  gstIncluded
 }
 
 fragment Checkout_order on Order {
@@ -696,6 +697,12 @@ const node = function () {
             "kind": "ScalarField",
             "name": "isVatTax",
             "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "gstIncluded",
+            "storageKey": null
           }, {
             "alias": null,
             "args": null,
@@ -994,12 +1001,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "4550f2fd44d6db74306435d535764ebd",
+      "cacheID": "2194c8f2b37ff41b84439ea6af9b0f3e",
       "id": null,
       "metadata": {},
       "name": "TestFontsFormUpdateCustomerMutation",
       "operationKind": "mutation",
-      "text": "mutation TestFontsFormUpdateCustomerMutation(\n  $input: UpdateCustomerInput!\n) {\n  updateCustomer(input: $input) {\n    order {\n      ...CartOrder_order\n      id\n    }\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      __typename\n      __isSkuProduct: __typename\n      ...CollectionAa_product\n      ...FontStyle_fontStyle\n      ... on FontStyle {\n        family {\n          name\n          cssUrl\n          id\n        }\n        name\n      }\n      ... on Bundle {\n        name\n      }\n      ... on FontCollection {\n        name\n        totalStyles\n        featureStyle {\n          family {\n            cssUrl\n            id\n          }\n          id\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    id\n    license {\n      id\n      name\n      multiplier\n    }\n    variable: licenseVariable {\n      id\n      variableType\n      ...VariableTableAmounts_variable\n    }\n    option: licenseOption {\n      id\n      amount\n      multiplier\n      name\n      ...VariableTableAmounts_option\n    }\n    variableText\n  }\n}\n\nfragment CartOrder_order on Order {\n  ...Checkout_order\n  ...Download_order\n  ...CouponCodeInput_order\n  ...CartTotals_order\n  orderItems {\n    ...CartItem_node\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n        variableType\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  discount {\n    id\n  }\n  customer {\n    email\n    name\n    anonymous\n    id\n  }\n  billingIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brand\n    }\n  }\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  isVatTax\n}\n\nfragment Checkout_order on Order {\n  canCompleteWithCoupon\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  billingIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIsBillingIdentity\n}\n\nfragment CollectionAa_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ... on FontCollection {\n    featureStyle {\n      ...FontStyle_fontStyle\n      id\n    }\n    families: children(collectionTypes: [FAMILY]) {\n      fontStyles {\n        ...FontStyle_fontStyle\n        id\n      }\n      id\n    }\n  }\n  ... on Bundle {\n    fontStyles {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n}\n\nfragment CouponCodeInput_order on Order {\n  id\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment Download_order on Order {\n  id\n  archiveUrl\n  customer {\n    email\n    id\n  }\n  completedWithCoupon\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment IdentityBox_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n"
+      "text": "mutation TestFontsFormUpdateCustomerMutation(\n  $input: UpdateCustomerInput!\n) {\n  updateCustomer(input: $input) {\n    order {\n      ...CartOrder_order\n      id\n    }\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      __typename\n      __isSkuProduct: __typename\n      ...CollectionAa_product\n      ...FontStyle_fontStyle\n      ... on FontStyle {\n        family {\n          name\n          cssUrl\n          id\n        }\n        name\n      }\n      ... on Bundle {\n        name\n      }\n      ... on FontCollection {\n        name\n        totalStyles\n        featureStyle {\n          family {\n            cssUrl\n            id\n          }\n          id\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    id\n    license {\n      id\n      name\n      multiplier\n    }\n    variable: licenseVariable {\n      id\n      variableType\n      ...VariableTableAmounts_variable\n    }\n    option: licenseOption {\n      id\n      amount\n      multiplier\n      name\n      ...VariableTableAmounts_option\n    }\n    variableText\n  }\n}\n\nfragment CartOrder_order on Order {\n  ...Checkout_order\n  ...Download_order\n  ...CouponCodeInput_order\n  ...CartTotals_order\n  orderItems {\n    ...CartItem_node\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n        variableType\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  discount {\n    id\n  }\n  customer {\n    email\n    name\n    anonymous\n    id\n  }\n  billingIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brand\n    }\n  }\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  isVatTax\n  gstIncluded\n}\n\nfragment Checkout_order on Order {\n  canCompleteWithCoupon\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  billingIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIsBillingIdentity\n}\n\nfragment CollectionAa_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ... on FontCollection {\n    featureStyle {\n      ...FontStyle_fontStyle\n      id\n    }\n    families: children(collectionTypes: [FAMILY]) {\n      fontStyles {\n        ...FontStyle_fontStyle\n        id\n      }\n      id\n    }\n  }\n  ... on Bundle {\n    fontStyles {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n}\n\nfragment CouponCodeInput_order on Order {\n  id\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment Download_order on Order {\n  id\n  archiveUrl\n  customer {\n    email\n    id\n  }\n  completedWithCoupon\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment IdentityBox_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n"
     }
   };
 }();

package/dist/components/Cart/CartTotals.js

@@ -51,7 +51,7 @@ const CartTotals = ({
   "data-has-discount": Boolean(order.discount),
   "data-hide-total": hideTotal
 }, /*#__PURE__*/_react.default.createElement(PriceBlock, {
-  label: "Pre-tax total:",
+  label: "Subtotal:",
   price: order.subtotal,
   "data-line": "subtotal"
 }), order.discount && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PriceBlock, {
@@ -79,13 +79,13 @@ const CartTotals = ({
   price: order.taxes,
   "data-line": "taxes"
 }), /*#__PURE__*/_react.default.createElement(PriceBlock, {
-  label: "Total:",
+  label: "Total".concat(order.gstIncluded ? ' including GST' : '', ":"),
   price: order.total,
   "data-line": "total"
 }));
 
 var _default = (0, _reactRelay.createFragmentContainer)(CartTotals, {
-  order: _CartTotals_order !== void 0 ? _CartTotals_order : (_CartTotals_order = require("../../__generated__/CartTotals_order.graphql"), _CartTotals_order.hash && _CartTotals_order.hash !== "e4a0587e58d04c9f6ab6753a7d767740" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order)
+  order: _CartTotals_order !== void 0 ? _CartTotals_order : (_CartTotals_order = require("../../__generated__/CartTotals_order.graphql"), _CartTotals_order.hash && _CartTotals_order.hash !== "b4e8ff4b5b5525af89e9f80a08a657e5" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order)
 });
 
 exports.default = _default;

package/dist/components/TypeTester/TypeTesterContent.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { UseTypeTesterStylerProps } from './useTypeTesterStyler';
 import { Content } from './types';
+export interface TypeTesterContentRef {
+    focus: () => void;
+}
 interface TypeTesterContentProps extends UseTypeTesterStylerProps {
     content: Content;
     setContent: (value: Content) => void;
@@ -9,5 +12,5 @@ interface TypeTesterContentProps extends UseTypeTesterStylerProps {
     direction: string | null;
     autofitOnChange: boolean;
 }
-declare const TypeTesterContent: React.FunctionComponent<TypeTesterContentProps>;
+declare const TypeTesterContent: React.ForwardRefExoticComponent<TypeTesterContentProps & React.RefAttributes<TypeTesterContentRef>>;
 export default TypeTesterContent;

package/dist/components/TypeTester/TypeTesterContent.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useTypeTesterStyler = _interopRequireDefault(require("./useTypeTesterStyler"));
 
@@ -13,21 +13,34 @@ var _draftJs = require("draft-js");
 
 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; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const TypeTesterContent = ({
+const TypeTesterContent = /*#__PURE__*/_react.default.forwardRef(({
   content,
   setContent,
   setFocused,
   direction,
   ...props
-}) => {
+}, ref) => {
+  const editorRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus: () => {
+      var _editorRef$current;
+
+      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.focus();
+    }
+  }));
   const style = (0, _useTypeTesterStyler.default)({ ...props,
     content
   });
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, style, {
     className: "type-tester__text__container"
   }), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+    ref: editorRef,
     editorState: content,
     onChange: value => setContent(value),
     onBlur: () => setFocused(false),
@@ -36,7 +49,7 @@ const TypeTesterContent = ({
     stripPastedStyles: true,
     textDirectionality: direction === 'rtl' ? 'RTL' : 'LTR'
   }));
-};
+});
 
 var _default = TypeTesterContent;
 exports.default = _default;

package/dist/components/TypeTester/TypeTesterFeatures.js

@@ -61,7 +61,9 @@ const TypeTesterFeatures = ({
   }, getFeatureName(feature, fontStyle.fontFeatures.stylisticSetNames)));
 
   if ((_config$openTypeFeatu = config.openTypeFeatures) !== null && _config$openTypeFeatu !== void 0 && (_config$openTypeFeatu2 = _config$openTypeFeatu.columns) !== null && _config$openTypeFeatu2 !== void 0 && _config$openTypeFeatu2.length) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, config.openTypeFeatures.columns.map(column => /*#__PURE__*/_react.default.createElement("div", null, column.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, feature)).map(renderFeature))));
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, config.openTypeFeatures.columns.map((column, i) => /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, column.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, feature)).map(renderFeature))));
   }
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showFeatures.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, feature)).map(renderFeature));

package/dist/components/TypeTester/TypeTesterFeaturesButton.js

@@ -23,7 +23,7 @@ const TypeTesterFeaturesButton = ({
 }, /*#__PURE__*/_react.default.createElement("button", {
   className: "type-tester__features-button__button",
   type: "button",
-  onClick: toggleFeaturesOpen
+  onClick: () => toggleFeaturesOpen()
 }, /*#__PURE__*/_react.default.createElement("span", {
   className: "type-tester__features-button__text"
 }, "OT Features"), ' ', featuresOpen ? /*#__PURE__*/_react.default.createElement(_CarrotUp.default, null) : /*#__PURE__*/_react.default.createElement(_CarrotDown.default, null)));

package/dist/components/TypeTester/TypeTesterStandalone.d.ts

@@ -8,6 +8,8 @@ interface TypeTesterStandalone {
     content?: string;
     direction?: string;
     autofit?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 declare const TypeTesterStandalone: React.FC<TypeTesterStandalone>;
 export default TypeTesterStandalone;

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -29,7 +29,9 @@ const TypeTesterStandalone = ({
   features,
   lineHeight,
   fontSize,
-  autofit
+  autofit,
+  onFocus,
+  onBlur
 }) => {
   const environment = (0, _reactRelay.useRelayEnvironment)();
   return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
@@ -58,7 +60,9 @@ const TypeTesterStandalone = ({
         config: {
           groupEdit: false,
           buyButton: false
-        }
+        },
+        onFocus: onFocus,
+        onBlur: onBlur
       })));
     }
   });

package/dist/components/TypeTester/TypeTesterStyleSelect.js

@@ -35,7 +35,8 @@ const TypeTesterStyleSelect = ({
   }, /*#__PURE__*/_react.default.createElement(_DownArrow.default, null), NBSP, selectedFamily.name), /*#__PURE__*/_react.default.createElement("select", {
     value: selectedFamily.id,
     onChange: e => onSelectFamilyId(e.target.value),
-    className: "type-tester-select__select"
+    className: "type-tester-select__select",
+    onClick: e => e.stopPropagation()
   }, families.map(({
     id,
     name
@@ -49,7 +50,8 @@ const TypeTesterStyleSelect = ({
   }, /*#__PURE__*/_react.default.createElement(_DownArrow.default, null), " ", selectedFontStyle.name), /*#__PURE__*/_react.default.createElement("select", {
     value: selectedFontStyleId,
     onChange: e => onSelectFontStyleId(e.target.value),
-    className: "type-tester-select__select"
+    className: "type-tester-select__select",
+    onClick: e => e.stopPropagation()
   }, selectedFamily.fontStyles.map(({
     id,
     name

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

@@ -9,6 +9,7 @@ export interface TypeTesterConfig {
     initialMode?: 'group' | 'local';
     groupEdit?: boolean;
     shy?: false | true | 'hover' | 'focus';
+    toolsPosition?: 'inline' | 'floating';
     selectButtonStyle?: 'inline' | 'outlined';
     selectButtonLabel?: string;
     truncate?: boolean;
@@ -29,6 +30,8 @@ export interface TypeTesterBaseProps {
     features: ReadonlyArray<string> | null;
     autofit: boolean;
     config?: TypeTesterConfig;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 export interface TypeTesterWrapperProps extends Omit<TypeTesterBaseProps, 'onSelectFontStyleId'> {
     fontStyleId: string | null;

package/dist/components/TypeTester/index.js

@@ -51,6 +51,33 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function useHeightAnimation(isOpen = false, duration = 350) {
+  const contentRef = (0, _react.useRef)(null); // Inner wrapper that keeps the height if the outer animated is closed
+
+  const [height, setHeight] = (0, _react.useState)(isOpen ? 'auto' : 0);
+  (0, _react.useEffect)(() => {
+    var _contentRef$current;
+
+    const contentRect = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.getBoundingClientRect();
+    if (!contentRect) return;
+    setHeight("".concat(contentRect.height, "px"));
+    const first = setTimeout(() => setHeight(isOpen ? "".concat(contentRect.height, "px") : 0));
+    const second = setTimeout(() => {
+      if (isOpen) {
+        setHeight('auto');
+      }
+    }, duration);
+    return () => {
+      clearTimeout(first);
+      clearTimeout(second);
+    };
+  }, [isOpen]);
+  return {
+    height,
+    contentRef
+  };
+}
+
 // if there's no SKU associated to the font style, it's likely
 // part of a collection which has a SKU. let's find the cheapest
 // collection to use
@@ -84,10 +111,13 @@ const TypeTesterComponent = ({
   onSelectFontStyleId,
   features,
   autofit,
+  onFocus,
+  onBlur,
   config: propsConfig
 }) => {
-  var _config$shy, _config$selectButtonS, _config$priceText, _config$min, _config$max, _config$min2, _config$max2, _config$openTypeFeatu, _config$openTypeFeatu2;
+  var _config$shy, _config$toolsPosition, _config$min, _config$max, _config$min2, _config$max2, _config$openTypeFeatu, _config$openTypeFeatu2, _config$selectButtonS, _config$priceText;
 
+  const contentRef = (0, _react.useRef)(null);
   const ref = (0, _react.useRef)(null);
   const [buyButtonIsHovered, setBuyButtonIsHovered] = (0, _react.useState)(false);
   const contextConfig = (0, _react.useContext)(_ConfigContext.default);
@@ -100,6 +130,10 @@ const TypeTesterComponent = ({
     initialSize: size,
     initialLineHeight: lineHeight
   });
+  (0, _react.useEffect)(() => {
+    if (onFocus && props.focused) onFocus();
+    if (onBlur && !props.focused) onBlur();
+  }, [props.focused]);
   const selected = (0, _reactRedux.useSelector)(fontStyle && fontStyle.sku ? (0, _utils.isSelected)(fontStyle.sku.id) : () => false);
   const precartOpen = (0, _reactRedux.useSelector)(state => state.precartOpen);
   const sku = getSku(fontStyle);
@@ -110,6 +144,52 @@ const TypeTesterComponent = ({
     shy = 'hover';
   }
 
+  let toolsPosition = (_config$toolsPosition = config === null || config === void 0 ? void 0 : config.toolsPosition) !== null && _config$toolsPosition !== void 0 ? _config$toolsPosition : 'inline';
+  if (shy !== 'focus') toolsPosition = 'inline';
+
+  const toolsJSX = /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__toolbar__tools",
+    onMouseDown: e => e.preventDefault()
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__slider"
+  }, config.textInput && /*#__PURE__*/_react.default.createElement(_TypeTesterInput.default, {
+    min: (_config$min = config.min) !== null && _config$min !== void 0 ? _config$min : 10,
+    max: (_config$max = config.max) !== null && _config$max !== void 0 ? _config$max : 200,
+    value: props.size,
+    onChange: props.setSize
+  }), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+    min: (_config$min2 = config.min) !== null && _config$min2 !== void 0 ? _config$min2 : 10,
+    max: (_config$max2 = config.max) !== null && _config$max2 !== void 0 ? _config$max2 : 200,
+    value: props.size,
+    onChange: props.setSize
+  })), Boolean(features === null || features === void 0 ? void 0 : features.length) && /*#__PURE__*/_react.default.createElement(_TypeTesterFeaturesButton.default, props), config.groupEdit && /*#__PURE__*/_react.default.createElement(_TypeTesterEditAll.default, _extends({}, props, {
+    config: config
+  })));
+
+  const {
+    height: featuresHeight,
+    contentRef: featuresContentRef
+  } = useHeightAnimation(props.featuresOpen, 300);
+
+  const featuresJSX = features && Boolean(features === null || features === void 0 ? void 0 : features.length) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__features-container",
+    onMouseDown: e => e.preventDefault(),
+    "data-open": props.featuresOpen,
+    style: {
+      height: featuresHeight,
+      overflow: featuresHeight === 'auto' ? 'visible' : 'hidden',
+      transition: "height 300ms ease-out"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: featuresContentRef,
+    className: "type-tester__features",
+    "data-columns": (_config$openTypeFeatu = config.openTypeFeatures) !== null && _config$openTypeFeatu !== void 0 && (_config$openTypeFeatu2 = _config$openTypeFeatu.columns) !== null && _config$openTypeFeatu2 !== void 0 && _config$openTypeFeatu2.length ? 'set' : 'auto'
+  }, /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, _extends({}, props, {
+    fontStyle: fontStyle,
+    showFeatures: features,
+    config: config
+  }))));
+
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fontStyle.family && fontStyle.family.cssUrl && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
     href: fontStyle.family.cssUrl
   }), /*#__PURE__*/_react.default.createElement("div", {
@@ -124,35 +204,25 @@ const TypeTesterComponent = ({
     "data-shy": shy,
     "data-select-button-style": (_config$selectButtonS = config.selectButtonStyle) !== null && _config$selectButtonS !== void 0 ? _config$selectButtonS : 'inline'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "type-tester__toolbar",
-    onMouseDown: e => e.preventDefault()
+    className: "type-tester__toolbar"
   }, /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelectData.default, {
     fontStyle: fontStyle,
     viewer: viewer,
-    onSelectFontStyleId: onSelectFontStyleId,
+    onSelectFontStyleId: value => {
+      var _contentRef$current2;
+
+      onSelectFontStyleId(value);
+      (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.focus();
+    },
     config: config
   }), ((_config$priceText = config.priceText) !== null && _config$priceText !== void 0 ? _config$priceText : false) && fontStyle.sku && /*#__PURE__*/_react.default.createElement("div", {
-    className: "type-tester__toolbar__price-text"
+    className: "type-tester__toolbar__price-text",
+    onMouseDown: e => e.preventDefault()
   }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
     sku: fontStyle.sku
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "type-tester__toolbar__tools"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "type-tester__slider"
-  }, config.textInput && /*#__PURE__*/_react.default.createElement(_TypeTesterInput.default, {
-    min: (_config$min = config.min) !== null && _config$min !== void 0 ? _config$min : 10,
-    max: (_config$max = config.max) !== null && _config$max !== void 0 ? _config$max : 200,
-    value: props.size,
-    onChange: props.setSize
-  }), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
-    min: (_config$min2 = config.min) !== null && _config$min2 !== void 0 ? _config$min2 : 10,
-    max: (_config$max2 = config.max) !== null && _config$max2 !== void 0 ? _config$max2 : 200,
-    value: props.size,
-    onChange: props.setSize
-  })), Boolean(features === null || features === void 0 ? void 0 : features.length) && /*#__PURE__*/_react.default.createElement(_TypeTesterFeaturesButton.default, props), config.groupEdit && /*#__PURE__*/_react.default.createElement(_TypeTesterEditAll.default, _extends({}, props, {
-    config: config
-  }))), config.buyButton && sku && /*#__PURE__*/_react.default.createElement("div", {
-    className: "type-tester__select-button-wrapper"
+  })), toolsPosition === 'inline' && toolsJSX, config.buyButton && sku && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__select-button-wrapper",
+    onMouseDown: e => e.preventDefault()
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__select-button"
   }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_SelectButton.default, {
@@ -165,15 +235,10 @@ const TypeTesterComponent = ({
     className: "type-tester__price"
   }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
     sku: sku
-  })))))), features && Boolean(features === null || features === void 0 ? void 0 : features.length) && props.featuresOpen && /*#__PURE__*/_react.default.createElement("div", {
-    className: "type-tester__features",
-    onMouseDown: e => e.preventDefault(),
-    "data-columns": (_config$openTypeFeatu = config.openTypeFeatures) !== null && _config$openTypeFeatu !== void 0 && (_config$openTypeFeatu2 = _config$openTypeFeatu.columns) !== null && _config$openTypeFeatu2 !== void 0 && _config$openTypeFeatu2.length ? 'set' : 'auto'
-  }, /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, _extends({}, props, {
-    fontStyle: fontStyle,
-    showFeatures: features,
-    config: config
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  })))))), toolsPosition === 'inline' && featuresJSX, toolsPosition === 'floating' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__floating-toolbar",
+    onMouseDown: e => e.preventDefault()
+  }, toolsJSX, featuresJSX), /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__text"
   }, /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
     fontStyle: fontStyle,
@@ -186,6 +251,7 @@ const TypeTesterComponent = ({
       var _config$truncate, _config$min3, _config$max3, _config$autofitOnChan;
 
       return /*#__PURE__*/_react.default.createElement(_TypeTesterContent.default, _extends({}, props, {
+        ref: contentRef,
         fontStyles: style,
         truncate: (_config$truncate = config.truncate) !== null && _config$truncate !== void 0 ? _config$truncate : false,
         direction: direction,

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

@@ -7,6 +7,8 @@ interface TypeTestersQueryRendererProps {
     precartOpen?: boolean;
     tags?: string[];
     excludeTags?: string[];
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 declare const TypeTestersQueryRenderer: React.FC<TypeTestersQueryRendererProps>;
 export default TypeTestersQueryRenderer;

package/dist/components/TypeTesters/index.js

@@ -67,6 +67,8 @@ const TypeTestersBase = ({
   includePriceBar,
   defaultMode,
   autofit,
+  onFocus,
+  onBlur,
   ...rest
 }) => {
   if (!collection) return null;
@@ -87,7 +89,9 @@ const TypeTestersBase = ({
       typeTester: node,
       productId: collection.id,
       features: collection.typeTesterFeatures,
-      autofit: autofit
+      autofit: autofit,
+      onFocus: onFocus,
+      onBlur: onBlur
     }))));
   }));
 };
@@ -108,7 +112,9 @@ const TypeTestersQueryRenderer = ({
   defaultMode,
   autofit,
   tags,
-  excludeTags
+  excludeTags,
+  onFocus,
+  onBlur
 }) => {
   const environment = (0, _reactRelay.useRelayEnvironment)();
   const precartOpen = (0, _reactRedux.useSelector)(state => state.precartOpen);
@@ -139,7 +145,9 @@ const TypeTestersQueryRenderer = ({
             defaultMode: getDefaultMode(defaultMode, autofit),
             precartOpen: precartOpen,
             includePriceBar: includePriceBar,
-            autofit: autofit === 'true'
+            autofit: autofit === 'true',
+            onFocus: onFocus,
+            onBlur: onBlur
           })));
         }
       });
@@ -170,7 +178,9 @@ const TypeTestersQueryRenderer = ({
             defaultMode: getDefaultMode(defaultMode, autofit),
             precartOpen: precartOpen,
             includePriceBar: includePriceBar,
-            autofit: autofit === 'true'
+            autofit: autofit === 'true',
+            onFocus: onFocus,
+            onBlur: onBlur
           }));
         }
       });

package/fontdue.css

@@ -491,7 +491,6 @@ div[data-component=TypeTesters] {
   justify-content: space-between;
   flex: 1;
   margin-right: 20px;
-  margin-left: 20px;
 }
 .type-tester[data-shy=hover] .type-tester__toolbar__tools, .type-tester[data-shy=focus] .type-tester__toolbar__tools {
   opacity: 0;
@@ -530,7 +529,6 @@ div[data-component=TypeTesters] {
 .type-tester__slider {
   display: flex;
   align-items: center;
-  margin-right: 20px;
   flex: 1;
   max-width: 400px;
 }
@@ -542,7 +540,6 @@ div[data-component=TypeTesters] {
 .type-tester__slider__track {
   width: 100%;
   min-width: 100px;
-  margin: 0 20px;
   background-color: currentcolor;
   height: 1px;
   position: relative;
@@ -613,7 +610,7 @@ div[data-component=TypeTesters] {
 .type-tester__features {
   position: relative;
   z-index: 1;
-  margin-bottom: 10px;
+  padding-bottom: 10px;
 }
 .type-tester__features[data-columns=auto] {
   columns: 4;
@@ -643,6 +640,31 @@ div[data-component=TypeTesters] {
 .type-tester__features__button:not(:disabled) {
   cursor: pointer;
 }
+.type-tester__floating-toolbar {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: var(--primary_background_color);
+  color: var(--primary_text_color);
+  padding: 30px;
+  border-top: 1px solid var(--horizontal_rule_color);
+  transform: translateY(100%);
+  transition: transform 300ms ease-out;
+}
+@media (max-width: 899px) {
+  .type-tester__floating-toolbar {
+    display: none;
+  }
+}
+.type-tester[data-focused=true] .type-tester__floating-toolbar {
+  transform: translateY(0);
+  z-index: 3;
+}
+.type-tester__floating-toolbar .type-tester__features {
+  padding-top: 20px;
+}
 .type-tester__text {
   position: relative;
   z-index: 0;