fontdue-js 1.0.1 → 1.2.0

package/dist/components/StoreModal/StoreModalContainer.js

@@ -31,41 +31,32 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const getBackLink = (history, currentRoute) => {
-  if (currentRoute !== 'index' && history.length === 0) return {
-    text: 'Browse'
-  };
-  const previous = history[history.length - 1];
-  if (!previous) return null;
-
-  switch (previous.name) {
+const getPageTitle = name => {
+  switch (name) {
     case 'index':
-      return {
-        text: 'Browse'
-      };
+      return 'All collections';
 
     case 'product':
-      return {
-        text: 'Buying options'
-      };
+      return 'Buying options';
 
     case 'cart':
-      return {
-        text: 'Edit cart'
-      };
+      return 'Cart';
 
     case 'checkout':
-      return {
-        text: 'Checkout'
-      };
+      return 'Checkout';
 
     case 'review':
-      return {
-        text: 'Review'
-      };
+      return 'Review';
   }
 };
 
+const getBackLink = (history, currentRoute) => {
+  if (currentRoute !== 'index' && history.length === 0) return 'All collections';
+  const previous = history[history.length - 1];
+  if (!previous) return null;
+  return getPageTitle(previous.name);
+};
+
 const StoreModalContainer = _ref => {
   var _currentOrder$orderIt, _currentOrder, _currentOrder$orderIt2, _settings, _settings2;
 
@@ -124,7 +115,8 @@ const StoreModalContainer = _ref => {
     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
   }, {
-    backText: link === null || link === void 0 ? void 0 : link.text,
+    backText: link,
+    pageTitle: getPageTitle(currentRoute),
     body: /*#__PURE__*/_react.default.createElement(_react.Suspense, {
       fallback: /*#__PURE__*/_react.default.createElement(_StoreModalLoadingScreen.default, null)
     }, children)

package/dist/components/StoreModal/StoreModalReview.js

@@ -64,7 +64,7 @@ const StoreModalReview = _ref => {
     stripe
   } = _ref;
   const order = (0, _reactRelay.useFragment)(_StoreModalReview_order !== void 0 ? _StoreModalReview_order : (_StoreModalReview_order = require("../../__generated__/StoreModalReview_order.graphql"), _StoreModalReview_order.hash && _StoreModalReview_order.hash !== "c7fc7251b9f1cb7f33e0f7a436498492" && console.error("The definition of 'StoreModalReview_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalReview_order), orderKey);
-  const viewer = (0, _reactRelay.useFragment)(_StoreModalReview_viewer !== void 0 ? _StoreModalReview_viewer : (_StoreModalReview_viewer = require("../../__generated__/StoreModalReview_viewer.graphql"), _StoreModalReview_viewer.hash && _StoreModalReview_viewer.hash !== "425ef90a67fdbd4b8759c296a2440e13" && console.error("The definition of 'StoreModalReview_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalReview_viewer), viewerKey);
+  const viewer = (0, _reactRelay.useFragment)(_StoreModalReview_viewer !== void 0 ? _StoreModalReview_viewer : (_StoreModalReview_viewer = require("../../__generated__/StoreModalReview_viewer.graphql"), _StoreModalReview_viewer.hash && _StoreModalReview_viewer.hash !== "9136dd09437ff0102d8235b72b9b5c66" && console.error("The definition of 'StoreModalReview_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalReview_viewer), viewerKey);
   const dispatch = (0, _reactRedux.useDispatch)();
   const [completing, setCompleting] = (0, _react.useState)(false);
   const [error, setError] = (0, _react.useState)(null);

package/dist/components/StoreModalProductSummary/index.js

@@ -134,9 +134,7 @@ const StoreModalProductSummary = _ref => {
   const hasSelection = anySkusSelected && licenseOptions.length > 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__product-summary__container"
-  }, hasSelection ? viewer.precart.subtotal ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: "store-modal__product-summary__label"
-  }, "Your selection"), /*#__PURE__*/_react.default.createElement("div", {
+  }, hasSelection ? viewer.precart.subtotal ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__product-summary__selection-text"
   }, (0, _utils.pluralize)(countStyles(viewer), 'style'), ' for ', viewer.precart.subtotal.amount < stylesPrice && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "store-modal__product-summary__styles-price"

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

@@ -1,4 +1,4 @@
-import { TypeTesterFeatures_fontStyle } from '../../__generated__/TypeTesterFeatures_fontStyle.graphql';
+import { TypeTesterFeatures_fontStyle } from '__generated__/TypeTesterFeatures_fontStyle.graphql';
 interface TypeTesterFeatures_props {
     id: string;
     fontStyle: TypeTesterFeatures_fontStyle;

package/dist/components/TypeTester/TypeTesterFeatures.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactRelay = require("react-relay");
 
-var _features = _interopRequireDefault(require("./features"));
-
 var _TypeTesterBullet = _interopRequireDefault(require("../TypeTester/TypeTesterBullet"));
 
 var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
@@ -19,7 +17,9 @@ var _Checkbox = _interopRequireDefault(require("../Checkbox"));
 
 var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 
-var _TypeTesterFeatures_stylisticSetName, _TypeTesterFeatures_fontStyle;
+var _useFeaturesData = _interopRequireDefault(require("./useFeaturesData"));
+
+var _TypeTesterFeatures_fontStyle;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -63,57 +63,42 @@ function useHeightAnimation() {
   };
 }
 
-const shouldIncludeFeature = (supportedFeatures, feature) => supportedFeatures.indexOf(feature) >= 0;
-
-const getStylisticSetName = (feature, stylisticSetNames) => stylisticSetNames.find(_ref => {
-  let {
-    featureName
-  } = _ref;
-  return featureName === feature;
-});
-
-const getFeatureName = (feature, stylisticSetNames) => {
-  const stylisticSetName = getStylisticSetName(feature, stylisticSetNames);
-
-  if (stylisticSetName) {
-    return stylisticSetName.humanName;
-  }
-
-  if (_features.default.hasOwnProperty(feature)) {
-    return _features.default[feature];
-  }
-
-  return null;
+const shouldIncludeFeature = (supportedFeatures, feature) => {
+  if (!supportedFeatures) return false;
+  return supportedFeatures.indexOf(feature) >= 0;
 };
 
-_TypeTesterFeatures_stylisticSetName !== void 0 ? _TypeTesterFeatures_stylisticSetName : (_TypeTesterFeatures_stylisticSetName = require("../../__generated__/TypeTesterFeatures_stylisticSetName.graphql"), _TypeTesterFeatures_stylisticSetName.hash && _TypeTesterFeatures_stylisticSetName.hash !== "8420321d8ddf9b3846450d609586db21" && console.error("The definition of 'TypeTesterFeatures_stylisticSetName' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_stylisticSetName);
-
-const TypeTesterFeatures = _ref2 => {
+const TypeTesterFeatures = _ref => {
   var _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$openTypeFeatu4;
 
   let {
     id,
     fontStyle,
     features: showFeatures
-  } = _ref2;
+  } = _ref;
   const {
     typeTester: config
   } = (0, _react.useContext)(_ConfigContext.default);
   const {
-    features,
+    features: selectedFeatures,
     toggleFeature,
     featuresOpen
   } = (0, _TypeTesterState.default)({
     id
   });
   const selectionStyle = config.openTypeFeatures.selectionStyle;
+  const {
+    featureNames,
+    fontFeatures
+  } = (0, _useFeaturesData.default)({
+    fontStyle,
+    features: showFeatures
+  });
 
   const renderFeature = feature => {
-    var _fontStyle$fontFeatur;
-
     const featureCode = typeof feature === 'string' ? feature : feature.code;
-    const featureName = typeof feature === 'string' ? getFeatureName(feature, (_fontStyle$fontFeatur = fontStyle.fontFeatures) === null || _fontStyle$fontFeatur === void 0 ? void 0 : _fontStyle$fontFeatur.stylisticSetNames) : feature.name;
-    const checked = features.indexOf(featureCode) >= 0;
+    const featureName = typeof feature === 'string' ? featureNames[featureCode] : feature.name;
+    const checked = selectedFeatures.indexOf(featureCode) >= 0;
     return /*#__PURE__*/_react.default.createElement("button", {
       key: featureCode,
       className: "type-tester__features__button",
@@ -140,9 +125,9 @@ const TypeTesterFeatures = _ref2 => {
       style: {
         '--grid-range': columnConfig.range
       }
-    }, columnConfig.features.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, typeof feature === 'string' ? feature : feature.code)).map(renderFeature))));
+    }, columnConfig.features.filter(feature => shouldIncludeFeature(fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures, typeof feature === 'string' ? feature : feature.code)).map(renderFeature))));
   } else {
-    featuresColumns = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showFeatures.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, feature)).map(renderFeature));
+    featuresColumns = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showFeatures.filter(feature => shouldIncludeFeature(fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures, feature)).map(renderFeature));
   }
 
   const {
@@ -167,7 +152,7 @@ const TypeTesterFeatures = _ref2 => {
 };
 
 var _default = (0, _reactRelay.createFragmentContainer)(TypeTesterFeatures, {
-  fontStyle: _TypeTesterFeatures_fontStyle !== void 0 ? _TypeTesterFeatures_fontStyle : (_TypeTesterFeatures_fontStyle = require("../../__generated__/TypeTesterFeatures_fontStyle.graphql"), _TypeTesterFeatures_fontStyle.hash && _TypeTesterFeatures_fontStyle.hash !== "838ddab02dcbca47c8368b219c302934" && console.error("The definition of 'TypeTesterFeatures_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_fontStyle)
+  fontStyle: _TypeTesterFeatures_fontStyle !== void 0 ? _TypeTesterFeatures_fontStyle : (_TypeTesterFeatures_fontStyle = require("../../__generated__/TypeTesterFeatures_fontStyle.graphql"), _TypeTesterFeatures_fontStyle.hash && _TypeTesterFeatures_fontStyle.hash !== "25582c33916ebaadd2f674b1d0b6bf4b" && console.error("The definition of 'TypeTesterFeatures_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_fontStyle)
 });
 
 exports.default = _default;

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql';
 interface TypeTesterFeaturesButton_props {
-    featuresOpen: boolean;
-    features: string[];
-    toggleFeaturesOpen: () => void;
+    id: string;
+    fontStyle: useFeaturesData_fontStyle$key;
+    onNeedsRefocus?: () => void;
+    features: readonly string[] | null | undefined;
 }
 declare const TypeTesterFeaturesButton: React.FC<TypeTesterFeaturesButton_props>;
 export default TypeTesterFeaturesButton;

package/dist/components/TypeTester/TypeTesterFeaturesButton.js

@@ -5,31 +5,89 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 
 var _CarrotDown = _interopRequireDefault(require("../Icons/CarrotDown"));
 
 var _CarrotUp = _interopRequireDefault(require("../Icons/CarrotUp"));
 
+var _Select = _interopRequireDefault(require("../Select"));
+
+var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
+
+var _useFeaturesData = _interopRequireDefault(require("./useFeaturesData"));
+
 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; }
+
 const TypeTesterFeaturesButton = _ref => {
   let {
+    id,
+    fontStyle,
+    onNeedsRefocus,
+    features: showFeatures
+  } = _ref;
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const {
     featuresOpen,
+    toggleFeaturesOpen,
     features,
-    toggleFeaturesOpen
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "type-tester__features-button",
-    "data-features-open": featuresOpen,
-    "data-features-selected": features.length || 0
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "type-tester__features-button__button",
-    type: "button",
-    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)));
+    setFeatures
+  } = (0, _TypeTesterState.default)({
+    id
+  });
+  const selectedFeature = features[0];
+  const {
+    featureNames
+  } = (0, _useFeaturesData.default)({
+    fontStyle,
+    features
+  });
+
+  if (config.openTypeFeatures.interactionStyle === 'panel') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "type-tester__features-button",
+      "data-features-open": featuresOpen,
+      "data-features-selected": features.length || 0
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: "type-tester__features-button__button",
+      type: "button",
+      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)));
+  }
+
+  if (config.openTypeFeatures.interactionStyle === 'select') {
+    if (!showFeatures || showFeatures.length === 0) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "type-tester__features-select"
+    }, /*#__PURE__*/_react.default.createElement(_Select.default, {
+      value: selectedFeature !== null && selectedFeature !== void 0 ? selectedFeature : '',
+      options: [{
+        value: '',
+        text: 'OT Features'
+      }].concat(showFeatures.map(feature => ({
+        value: feature,
+        text: featureNames[feature]
+      }))),
+      onChange: e => {
+        setFeatures(e.target.value === '' ? [] : [e.target.value]);
+        onNeedsRefocus === null || onNeedsRefocus === void 0 ? void 0 : onNeedsRefocus();
+      },
+      onClick: e => e.stopPropagation(),
+      onMouseDown: e => e.stopPropagation()
+    }));
+  }
+
+  return null;
 };
 
 var _default = TypeTesterFeaturesButton;

package/dist/components/TypeTester/TypeTesterFloatingToolbar.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactRelay = require("react-relay");
 
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-
 var _TypeTesterContext = require("./TypeTesterContext");
 
 var _TypeTesterFeatures = _interopRequireDefault(require("./TypeTesterFeatures"));
@@ -33,7 +31,6 @@ const TypeTesterFloatingToolbar = _ref => {
     features,
     onToolbarOpenClose
   } = _ref;
-  const config = (0, _react.useContext)(_ConfigContext.default);
   const {
     testers
   } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
@@ -75,10 +72,11 @@ const TypeTesterFloatingToolbar = _ref => {
     className: "type-tester__floating-toolbar",
     onMouseDown: e => e.preventDefault(),
     "data-open": activeId && open
-  }, activeId && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TypeTesterToolbar.default, {
+  }, activeId && fontStyle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TypeTesterToolbar.default, {
     id: activeId,
-    features: features
-  }), features && fontStyle && /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, {
+    features: features,
+    fontStyle: fontStyle
+  }), features && /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, {
     id: activeId,
     features: features,
     fontStyle: fontStyle
@@ -86,7 +84,7 @@ const TypeTesterFloatingToolbar = _ref => {
 };
 
 var _default = (0, _reactRelay.createFragmentContainer)(TypeTesterFloatingToolbar, {
-  testers: _TypeTesterFloatingToolbar_testers !== void 0 ? _TypeTesterFloatingToolbar_testers : (_TypeTesterFloatingToolbar_testers = require("../../__generated__/TypeTesterFloatingToolbar_testers.graphql"), _TypeTesterFloatingToolbar_testers.hash && _TypeTesterFloatingToolbar_testers.hash !== "5554933cac70854b361575a5ed0af8ac" && console.error("The definition of 'TypeTesterFloatingToolbar_testers' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFloatingToolbar_testers)
+  testers: _TypeTesterFloatingToolbar_testers !== void 0 ? _TypeTesterFloatingToolbar_testers : (_TypeTesterFloatingToolbar_testers = require("../../__generated__/TypeTesterFloatingToolbar_testers.graphql"), _TypeTesterFloatingToolbar_testers.hash && _TypeTesterFloatingToolbar_testers.hash !== "3b87269ef35fe6c6cfabcc7a2e330a3c" && console.error("The definition of 'TypeTesterFloatingToolbar_testers' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFloatingToolbar_testers)
 });
 
 exports.default = _default;

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

@@ -2,6 +2,7 @@ import React from 'react';
 interface TypeTesterSliderProps {
     min: number;
     max: number;
+    stepSize: number;
     value: number;
     onChange: (value: number) => void;
 }

package/dist/components/TypeTester/TypeTesterSlider.js

@@ -49,6 +49,7 @@ const TypeTesterSlider = _ref => {
   let {
     min,
     max,
+    stepSize,
     value,
     onChange
   } = _ref;
@@ -59,7 +60,7 @@ const TypeTesterSlider = _ref => {
   } = (0, _reactRanger.useRanger)({
     min,
     max,
-    stepSize: 1,
+    stepSize,
     values: [value],
     onChange: handleChange,
     onDrag: handleChange,

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -67,10 +67,7 @@ const TypeTesterStandalone = _ref => {
         features: (_features$split = features === null || features === void 0 ? void 0 : features.split(',')) !== null && _features$split !== void 0 ? _features$split : [],
         direction: direction === 'rtl' ? 'rtl' : 'ltr',
         productId: (_props$viewer$fontSty3 = (_props$viewer2 = props.viewer) === null || _props$viewer2 === void 0 ? void 0 : (_props$viewer2$fontSt = _props$viewer2.fontStyle) === null || _props$viewer2$fontSt === void 0 ? void 0 : (_props$viewer2$fontSt2 = _props$viewer2$fontSt.family) === null || _props$viewer2$fontSt2 === void 0 ? void 0 : (_props$viewer2$fontSt3 = _props$viewer2$fontSt2.parent) === null || _props$viewer2$fontSt3 === void 0 ? void 0 : _props$viewer2$fontSt3.id) !== null && _props$viewer$fontSty3 !== void 0 ? _props$viewer$fontSty3 : (_props$viewer3 = props.viewer) === null || _props$viewer3 === void 0 ? void 0 : (_props$viewer3$fontSt = _props$viewer3.fontStyle) === null || _props$viewer3$fontSt === void 0 ? void 0 : (_props$viewer3$fontSt2 = _props$viewer3$fontSt.family) === null || _props$viewer3$fontSt2 === void 0 ? void 0 : _props$viewer3$fontSt2.id,
-        config: {
-          groupEdit: false,
-          buyButton: false
-        },
+        groupEdit: false,
         onFocus: onFocus,
         onBlur: onBlur
       })));

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

@@ -16,6 +16,7 @@ interface TypeTesterState {
     focused: boolean;
     setFocused: (value: boolean) => void;
     features: string[];
+    setFeatures: (value: string[]) => void;
     toggleFeature: (value: string) => void;
     featuresOpen: boolean;
     toggleFeaturesOpen: (value?: boolean) => void;

package/dist/components/TypeTester/TypeTesterState.js

@@ -75,6 +75,13 @@ const useTypeTesterState = _ref => {
       });
     },
     features,
+    setFeatures: value => {
+      dispatch({
+        type: 'SET_FEATURES',
+        value,
+        id
+      });
+    },
     toggleFeature: feature => {
       let value;
 

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

@@ -1,7 +1,10 @@
 import React from 'react';
+import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql';
 interface TypeTesterToolbar_props {
     id: string;
     features: readonly string[] | null | undefined;
+    fontStyle: useFeaturesData_fontStyle$key;
+    onNeedsRefocus?: () => void;
 }
 declare const TypeTesterToolbar: React.FC<TypeTesterToolbar_props>;
 export default TypeTesterToolbar;

package/dist/components/TypeTester/TypeTesterToolbar.js

@@ -30,7 +30,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const TypeTesterToolbar = _ref => {
   let {
     id,
-    features
+    features,
+    fontStyle,
+    onNeedsRefocus
   } = _ref;
   const {
     typeTester: config
@@ -43,17 +45,35 @@ const TypeTesterToolbar = _ref => {
     onMouseDown: e => e.preventDefault()
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__slider"
-  }, config.textInput && /*#__PURE__*/_react.default.createElement(_TypeTesterInput.default, {
-    min: config.min,
-    max: config.max,
+  }, config.size.label && /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__slider__size-label"
+  }, config.size.label), config.textInput && /*#__PURE__*/_react.default.createElement(_TypeTesterInput.default, {
+    min: config.size.min,
+    max: config.size.max,
     value: props.size,
     onChange: props.setSize
   }), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
-    min: config.min,
-    max: config.max,
+    min: config.size.min,
+    max: config.size.max,
     value: props.size,
-    onChange: props.setSize
-  })), Boolean(features === null || features === void 0 ? void 0 : features.length) && /*#__PURE__*/_react.default.createElement(_TypeTesterFeaturesButton.default, props), config.alignmentButtons && /*#__PURE__*/_react.default.createElement(_TypeTesterAlignButtons.default, props), config.groupEdit && /*#__PURE__*/_react.default.createElement(_TypeTesterEditAll.default, props));
+    onChange: props.setSize,
+    stepSize: 1
+  }), config.lineHeight && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__slider__line-height"
+  }, config.lineHeight.label && /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__slider__line-height-label"
+  }, config.lineHeight.label), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+    min: config.lineHeight.min,
+    max: config.lineHeight.max,
+    value: props.lineHeight,
+    onChange: props.setLineHeight,
+    stepSize: 0.01
+  }))), Boolean(features === null || features === void 0 ? void 0 : features.length) && /*#__PURE__*/_react.default.createElement(_TypeTesterFeaturesButton.default, {
+    id: id,
+    fontStyle: fontStyle,
+    onNeedsRefocus: onNeedsRefocus,
+    features: features
+  }), config.alignmentButtons && /*#__PURE__*/_react.default.createElement(_TypeTesterAlignButtons.default, props), config.groupEdit && /*#__PURE__*/_react.default.createElement(_TypeTesterEditAll.default, props));
 };
 
 var _default = TypeTesterToolbar;

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

@@ -19,6 +19,7 @@ export interface TypeTesterConfig {
     priceText?: boolean;
     autofitOnChange?: boolean;
     openTypeFeatures?: {
+        interactionStyle: 'panel' | 'select';
         columns?: {
             features: ({
                 code: string;
@@ -30,6 +31,16 @@ export interface TypeTesterConfig {
     };
     alignmentButtons?: boolean;
     initialAlignment?: Alignment;
+    size?: {
+        label?: string | false;
+        min?: number;
+        max?: number;
+    };
+    lineHeight?: {
+        label?: string | false;
+        min?: number;
+        max?: number;
+    };
 }
 export interface TypeTesterBaseProps {
     id: string;
@@ -37,7 +48,7 @@ export interface TypeTesterBaseProps {
     direction: 'ltr' | 'rtl';
     onSelectFontStyleId: (value: string) => void;
     features?: readonly string[] | null;
-    config?: TypeTesterConfig;
+    groupEdit?: boolean;
     onFocus?: () => void;
     onBlur?: () => void;
 }

package/dist/components/TypeTester/index.js

@@ -78,18 +78,24 @@ const TypeTesterComponent = _ref => {
     onFocus,
     onBlur,
     features,
-    config: propsConfig
+    groupEdit
   } = _ref;
   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);
-  const config = { ...contextConfig.typeTester,
-    ...propsConfig
-  };
+  let {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
   const props = (0, _TypeTesterState.default)({
     id
   });
+
+  if (groupEdit) {
+    config = { ...config,
+      groupEdit
+    };
+  }
+
   (0, _react.useEffect)(() => {
     if (onFocus && props.focused) onFocus();
     if (onBlur && !props.focused) onBlur();
@@ -97,6 +103,13 @@ const TypeTesterComponent = _ref => {
   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);
+
+  const onNeedsRefocus = () => {
+    var _contentRef$current;
+
+    (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.focus();
+  };
+
   if (!fontStyle) return null;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fontStyle.family && fontStyle.family.cssUrl && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
     href: fontStyle.family.cssUrl
@@ -119,10 +132,9 @@ const TypeTesterComponent = _ref => {
     fontStyle: fontStyle,
     viewer: viewer,
     onSelectFontStyleId: value => {
-      var _contentRef$current;
-
       onSelectFontStyleId(value);
-      (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.focus();
+      props.setFeatures([]);
+      onNeedsRefocus();
     },
     config: config
   }), config.priceText && fontStyle.sku && /*#__PURE__*/_react.default.createElement("div", {
@@ -132,7 +144,9 @@ const TypeTesterComponent = _ref => {
     sku: fontStyle.sku
   })), config.toolsPosition === 'inline' && /*#__PURE__*/_react.default.createElement(_TypeTesterToolbar.default, {
     id: id,
-    features: features
+    features: features,
+    fontStyle: fontStyle,
+    onNeedsRefocus: onNeedsRefocus
   }), config.selectButton && sku && productId && /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__select-button-wrapper",
     onMouseDown: e => e.preventDefault()
@@ -169,8 +183,8 @@ const TypeTesterComponent = _ref => {
         fontStyles: style,
         truncate: config.truncate,
         direction: direction,
-        min: config.min,
-        max: config.max,
+        min: config.size.min,
+        max: config.size.max,
         autofitOnChange: config.autofitOnChange
       }));
     }
@@ -187,7 +201,7 @@ const TypeTesterComponent = _ref => {
 
 _TypeTester_sku !== void 0 ? _TypeTester_sku : (_TypeTester_sku = require("../../__generated__/TypeTester_sku.graphql"), _TypeTester_sku.hash && _TypeTester_sku.hash !== "1538559015ee3064ae577b7a5e90f34e" && console.error("The definition of 'TypeTester_sku' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_sku);
 const TypeTester = (0, _reactRelay.createFragmentContainer)(TypeTesterComponent, {
-  fontStyle: _TypeTester_fontStyle !== void 0 ? _TypeTester_fontStyle : (_TypeTester_fontStyle = require("../../__generated__/TypeTester_fontStyle.graphql"), _TypeTester_fontStyle.hash && _TypeTester_fontStyle.hash !== "0d5783f65fd4bf6f0840996214179fca" && console.error("The definition of 'TypeTester_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_fontStyle),
+  fontStyle: _TypeTester_fontStyle !== void 0 ? _TypeTester_fontStyle : (_TypeTester_fontStyle = require("../../__generated__/TypeTester_fontStyle.graphql"), _TypeTester_fontStyle.hash && _TypeTester_fontStyle.hash !== "e570d7809bdb60196f3190d2cf27ee0f" && console.error("The definition of 'TypeTester_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_fontStyle),
   viewer: _TypeTester_viewer !== void 0 ? _TypeTester_viewer : (_TypeTester_viewer = require("../../__generated__/TypeTester_viewer.graphql"), _TypeTester_viewer.hash && _TypeTester_viewer.hash !== "a12af7126d512a50ab0b7e5e14a7d8eb" && console.error("The definition of 'TypeTester_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_viewer)
 });
 

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

@@ -0,0 +1,19 @@
+import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql';
+interface useFeatures_props {
+    features: Readonly<string[]>;
+    fontStyle: useFeaturesData_fontStyle$key;
+}
+declare const useFeaturesData: ({ fontStyle }: useFeatures_props) => {
+    featureNames: {
+        [feature: string]: string;
+    };
+    fontFeatures: {
+        readonly supportedFeatures: readonly string[];
+        readonly stylisticSetNames: readonly {
+            readonly featureName: string;
+            readonly humanName: string;
+        }[];
+    };
+    " $refType": "useFeaturesData_fontStyle";
+};
+export default useFeaturesData;