fontdue-js 1.3.0 → 1.5.0

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

@@ -10,6 +10,7 @@ export declare type productState_collection = {
         };
     } | null;
     readonly fontStyles: ReadonlyArray<{
+        readonly id: string;
         readonly sku: {
             readonly id: string;
             readonly price: {
@@ -27,6 +28,7 @@ export declare type productState_collection = {
             };
         } | null;
         readonly fontStyles: ReadonlyArray<{
+            readonly id: string;
             readonly sku: {
                 readonly id: string;
                 readonly price: {

package/dist/__generated__/productState_collection.graphql.js

@@ -58,7 +58,9 @@ const node = function () {
     "kind": "LinkedField",
     "name": "fontStyles",
     "plural": true,
-    "selections": [v2
+    "selections": [v0
+    /*: any*/
+    , v2
     /*: any*/
     ],
     "storageKey": null
@@ -101,6 +103,6 @@ const node = function () {
   };
 }();
 
-node.hash = '988a02689d43b4d1419317bea02aeaa0';
+node.hash = '90e56933f956c6773c0958284de81884';
 var _default = node;
 exports.default = _default;

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

@@ -10,6 +10,7 @@ export declare type productState_node = {
         };
     } | null;
     readonly fontStyles: ReadonlyArray<{
+        readonly id: string;
         readonly sku: {
             readonly id: string;
             readonly price: {
@@ -27,6 +28,7 @@ export declare type productState_node = {
             };
         } | null;
         readonly fontStyles: ReadonlyArray<{
+            readonly id: string;
             readonly sku: {
                 readonly id: string;
                 readonly price: {
@@ -45,6 +47,7 @@ export declare type productState_node = {
             };
         } | null;
         readonly fontStyles: ReadonlyArray<{
+            readonly id: string;
             readonly sku: {
                 readonly id: string;
                 readonly price: {
@@ -62,6 +65,7 @@ export declare type productState_node = {
                 };
             } | null;
             readonly fontStyles: ReadonlyArray<{
+                readonly id: string;
                 readonly sku: {
                     readonly id: string;
                     readonly price: {

package/dist/__generated__/productState_node.graphql.js

@@ -58,7 +58,9 @@ const node = function () {
     "kind": "LinkedField",
     "name": "fontStyles",
     "plural": true,
-    "selections": [v2
+    "selections": [v0
+    /*: any*/
+    , v2
     /*: any*/
     ],
     "storageKey": null

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

@@ -1,10 +1,11 @@
 import React from 'react';
-interface NewsletterSignup_props {
+interface NewsletterSignup_baseProps {
     optInLabel?: string;
+    successLabel?: string;
     buttonLabel?: string;
     optInCheckboxChecked?: boolean;
     title?: string;
     intro?: string;
 }
-declare const NewsletterSignup: React.FC<NewsletterSignup_props>;
-export default NewsletterSignup;
+declare const NewsletterSignupFetcher: React.FC<NewsletterSignup_baseProps>;
+export default NewsletterSignupFetcher;

package/dist/components/NewsletterSignup/index.js

@@ -13,7 +13,7 @@ var _TextField = _interopRequireDefault(require("../TextField"));
 
 var _Check = _interopRequireDefault(require("../Icons/Check"));
 
-var _NewsletterSignupUpdateCustomerMutation;
+var _NewsletterSignupUpdateCustomerMutation, _NewsletterSignup_viewer, _NewsletterSignup_Query;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,16 +21,23 @@ 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; }
 
+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 updateCustomerMutation = _NewsletterSignupUpdateCustomerMutation !== void 0 ? _NewsletterSignupUpdateCustomerMutation : (_NewsletterSignupUpdateCustomerMutation = require("../../__generated__/NewsletterSignupUpdateCustomerMutation.graphql"), _NewsletterSignupUpdateCustomerMutation.hash && _NewsletterSignupUpdateCustomerMutation.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation);
 
 const NewsletterSignup = _ref => {
+  var _data$settings, _ref3, _data$settings2;
+
   let {
-    optInLabel,
+    optInLabel: optInLabelProp,
+    successLabel: successLabelProp,
     buttonLabel = 'Subscribe',
     optInCheckboxChecked = false,
     title,
-    intro
+    intro,
+    viewer
   } = _ref;
+  const data = (0, _reactRelay.useFragment)(_NewsletterSignup_viewer !== void 0 ? _NewsletterSignup_viewer : (_NewsletterSignup_viewer = require("../../__generated__/NewsletterSignup_viewer.graphql"), _NewsletterSignup_viewer.hash && _NewsletterSignup_viewer.hash !== "05823550a311988e999fd9b95cc39dac" && console.error("The definition of 'NewsletterSignup_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignup_viewer), viewer);
   const [name, setName] = (0, _react.useState)('');
   const [email, setEmail] = (0, _react.useState)('');
   const [newsletterOptIn, setNewsletterOptIn] = (0, _react.useState)(optInCheckboxChecked);
@@ -76,10 +83,19 @@ const NewsletterSignup = _ref => {
     });
   };
 
+  const disabled = submitting || !newsletterOptIn || !email || !name;
+  const optInLabel = optInLabelProp || (data === null || data === void 0 ? void 0 : (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : _data$settings.newsletterOptInLabel);
+  const successLabel = (_ref3 = successLabelProp || (data === null || data === void 0 ? void 0 : (_data$settings2 = data.settings) === null || _data$settings2 === void 0 ? void 0 : _data$settings2.newsletterSuccessLabel)) !== null && _ref3 !== void 0 ? _ref3 : 'Success!';
+
   if (submitted) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "newsletter-signup"
-    }, "Success!");
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "newsletter-signup__success",
+      dangerouslySetInnerHTML: {
+        __html: successLabel
+      }
+    }));
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -121,16 +137,46 @@ const NewsletterSignup = _ref => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "checkbox__icon"
   }, /*#__PURE__*/_react.default.createElement(_Check.default, null))), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "customer-newsletter-opt-in"
-  }, optInLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    htmlFor: "customer-newsletter-opt-in",
+    dangerouslySetInnerHTML: {
+      __html: optInLabel !== null && optInLabel !== void 0 ? optInLabel : ''
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "newsletter-signup__section"
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "submit-button",
-    disabled: submitting || !newsletterOptIn
+    disabled: disabled
   }, submitting ? 'Submitting...' : buttonLabel, /*#__PURE__*/_react.default.createElement("span", {
     className: "submit-button__arrow"
   }, ' →')))));
 };
 
-var _default = NewsletterSignup;
+const NewsletterSignupFetcher = params => {
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
+    environment: environment,
+    query: _NewsletterSignup_Query !== void 0 ? _NewsletterSignup_Query : (_NewsletterSignup_Query = require("../../__generated__/NewsletterSignup_Query.graphql"), _NewsletterSignup_Query.hash && _NewsletterSignup_Query.hash !== "ede23ce8fe999201dacb066fcef009af" && console.error("The definition of 'NewsletterSignup_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignup_Query),
+    variables: {},
+    render: _ref4 => {
+      let {
+        props,
+        error
+      } = _ref4;
+
+      if (error) {
+        console.error(error); // TODO: centralize error component, report to sentry
+
+        return null;
+      }
+
+      if (props) {
+        return /*#__PURE__*/_react.default.createElement(NewsletterSignup, _extends({}, params, props));
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
+    }
+  });
+};
+
+var _default = NewsletterSignupFetcher;
 exports.default = _default;

package/dist/components/Root/productState.d.ts

@@ -4,6 +4,7 @@ import { FontdueState, FontdueAction } from '../../reducer';
 export declare const populateProductState: (store: Store<FontdueState, FontdueAction>, environment: Environment, id: string) => import("relay-runtime").Subscription | undefined;
 export interface CollectionStyleSkus {
     fontStyleSkuIds: string[];
+    fontStyleIds: string[];
     childrenSkuIds: string[];
     name: string;
 }

package/dist/components/Root/productState.js

@@ -12,8 +12,8 @@ var _utils = require("../../utils");
 var _productState_sku, _productState_collection, _productState_bundle, _productState_node, _productState_Query;
 
 _productState_sku !== void 0 ? _productState_sku : (_productState_sku = require("../../__generated__/productState_sku.graphql"), _productState_sku.hash && _productState_sku.hash !== "2cee6ddddc85699f0c90e2607c0634ef" && console.error("The definition of 'productState_sku' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_sku);
-_productState_collection !== void 0 ? _productState_collection : (_productState_collection = require("../../__generated__/productState_collection.graphql"), _productState_collection.hash && _productState_collection.hash !== "988a02689d43b4d1419317bea02aeaa0" && console.error("The definition of 'productState_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collection);
-_productState_bundle !== void 0 ? _productState_bundle : (_productState_bundle = require("../../__generated__/productState_bundle.graphql"), _productState_bundle.hash && _productState_bundle.hash !== "8137d9a4dac9894f58f99bc56752cae0" && console.error("The definition of 'productState_bundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_bundle);
+_productState_collection !== void 0 ? _productState_collection : (_productState_collection = require("../../__generated__/productState_collection.graphql"), _productState_collection.hash && _productState_collection.hash !== "90e56933f956c6773c0958284de81884" && console.error("The definition of 'productState_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collection);
+_productState_bundle !== void 0 ? _productState_bundle : (_productState_bundle = require("../../__generated__/productState_bundle.graphql"), _productState_bundle.hash && _productState_bundle.hash !== "fa38bbc9f2062a727da4f5062b362054" && console.error("The definition of 'productState_bundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_bundle);
 _productState_node !== void 0 ? _productState_node : (_productState_node = require("../../__generated__/productState_node.graphql"), _productState_node.hash && _productState_node.hash !== "aab1ef07e0192a0d22a4c300084d9d05" && console.error("The definition of 'productState_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_node);
 const query = _productState_Query !== void 0 ? _productState_Query : (_productState_Query = require("../../__generated__/productState_Query.graphql"), _productState_Query.hash && _productState_Query.hash !== "ac3292bae9a274139d5a525fd0162711" && console.error("The definition of 'productState_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_Query);
 
@@ -76,8 +76,15 @@ const flattenSkuData = collection => {
   let collectionData = {};
 
   if (collection.sku) {
+    var _collection$fontStyle3, _collection$fontStyle4, _collection$children$2, _collection$children2;
+
     collectionData = {
       [collection.sku.id]: {
+        fontStyleIds: ((_collection$fontStyle3 = (_collection$fontStyle4 = collection.fontStyles) === null || _collection$fontStyle4 === void 0 ? void 0 : _collection$fontStyle4.map(style => style.id)) !== null && _collection$fontStyle3 !== void 0 ? _collection$fontStyle3 : []).concat('children' in collection ? (_collection$children$2 = (_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : _collection$children2.flatMap(child => {
+          var _child$fontStyles$map, _child$fontStyles;
+
+          return (_child$fontStyles$map = (_child$fontStyles = child.fontStyles) === null || _child$fontStyles === void 0 ? void 0 : _child$fontStyles.map(style => style.id)) !== null && _child$fontStyles$map !== void 0 ? _child$fontStyles$map : [];
+        })) !== null && _collection$children$2 !== void 0 ? _collection$children$2 : [] : []),
         fontStyleSkuIds: allSkus(collection, false, true).map(sku => sku.id),
         childrenSkuIds: allSkus(collection, true, false).map(sku => sku.id).filter(skuId => {
           var _collection$sku;

package/dist/components/StoreModal/StoreModalFamily.js

@@ -30,7 +30,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // chunk items if they match condition, but only chunk if they match in
 // consecutive order. this prevents the list from being reordered
 function chunkConsecutiveBy(collection, compare) {
-  return collection.reduce((acc, item, i) => {
+  return collection.reduce((acc, item) => {
     const last = acc[acc.length - 1];
 
     if (last && compare(last[0], item)) {
@@ -42,7 +42,7 @@ function chunkConsecutiveBy(collection, compare) {
 }
 
 const stylesGrouped = collection => {
-  if (!collection.fontStyles) return null;
+  if (!collection.fontStyles) return [];
   return chunkConsecutiveBy(collection.fontStyles, (left, right) => left.cssFamily === right.cssFamily && left.cssWeight === right.cssWeight && left.cssStretch === right.cssStretch);
 };
 
@@ -54,6 +54,7 @@ const StoreModalFamily = _ref => {
     onSelect
   } = _ref;
   const fontStyles = (0, _react.useMemo)(() => stylesGrouped(collection), [collection]);
+  if ((fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku) return null;
   return /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, null, {
     stylesheet: collection.cssUrl && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
       href: collection.cssUrl
@@ -67,7 +68,7 @@ const StoreModalFamily = _ref => {
       bundle: bundle,
       onSelectSku: onSelect
     })),
-    styleGroups: fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.map(group => group.map(fontStyle => /*#__PURE__*/_react.default.createElement(_StoreModalStyleButton.default, {
+    styleGroups: fontStyles.map(group => group.map(fontStyle => /*#__PURE__*/_react.default.createElement(_StoreModalStyleButton.default, {
       key: fontStyle.id,
       fontStyle: fontStyle,
       onSelectSku: onSelect
@@ -76,7 +77,7 @@ const StoreModalFamily = _ref => {
 };
 
 var _default = (0, _reactRelay.createFragmentContainer)(StoreModalFamily, {
-  collection: _StoreModalFamily_collection !== void 0 ? _StoreModalFamily_collection : (_StoreModalFamily_collection = require("../../__generated__/StoreModalFamily_collection.graphql"), _StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "0164fb7c07ce4174350e6a463723910e" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection)
+  collection: _StoreModalFamily_collection !== void 0 ? _StoreModalFamily_collection : (_StoreModalFamily_collection = require("../../__generated__/StoreModalFamily_collection.graphql"), _StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "ba6def0c7ad16af4a476e64ef4e1dcca" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection)
 });
 
 exports.default = _default;

package/dist/components/StoreModal/StoreModalFamilyButton.js

@@ -55,7 +55,7 @@ const FamilyButton = _ref => {
 
   return /*#__PURE__*/_react.default.createElement(_StoreModalFamilyButton.default, _extends({
     selected: selected,
-    onClick: handleClick
+    onClick: collection.sku ? handleClick : undefined
   }, rest), {
     name: collection.featureStyle && /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
       Component: "span",

package/dist/components/StoreModal/StoreModalStyleButton.js

@@ -34,8 +34,7 @@ const StoreModalStyleButton = _ref => {
     relay,
     ...rest
   } = _ref;
-  if (!fontStyle.sku) return null;
-  const selected = (0, _reactRedux.useSelector)((0, _reducer.isSelected)(fontStyle.sku.id));
+  const selected = (0, _reactRedux.useSelector)((0, _reducer.isSelected)(fontStyle.sku ? fontStyle.sku.id : fontStyle.id));
 
   const handleSelect = () => {
     if (!fontStyle.sku) return;
@@ -43,7 +42,7 @@ const StoreModalStyleButton = _ref => {
   };
 
   return /*#__PURE__*/_react.default.createElement(_StoreModalStyleButton.default, _extends({}, rest, {
-    onClick: handleSelect,
+    onClick: fontStyle.sku ? handleSelect : undefined,
     selected: selected
   }), {
     aa: /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
@@ -51,16 +50,16 @@ const StoreModalStyleButton = _ref => {
       Component: "span"
     }, "Aa"),
     name: fontStyle.name,
-    price: /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+    price: fontStyle.sku ? /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
       sku: fontStyle.sku,
       format: _Price.PriceFormat.Truncated,
       showCollectionSavings: !selected
-    })
+    }) : null
   });
 };
 
 var _default = (0, _reactRelay.createFragmentContainer)(StoreModalStyleButton, {
-  fontStyle: _StoreModalStyleButton_fontStyle !== void 0 ? _StoreModalStyleButton_fontStyle : (_StoreModalStyleButton_fontStyle = require("../../__generated__/StoreModalStyleButton_fontStyle.graphql"), _StoreModalStyleButton_fontStyle.hash && _StoreModalStyleButton_fontStyle.hash !== "d09b160f8a911647b91d0a0885d84347" && console.error("The definition of 'StoreModalStyleButton_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalStyleButton_fontStyle)
+  fontStyle: _StoreModalStyleButton_fontStyle !== void 0 ? _StoreModalStyleButton_fontStyle : (_StoreModalStyleButton_fontStyle = require("../../__generated__/StoreModalStyleButton_fontStyle.graphql"), _StoreModalStyleButton_fontStyle.hash && _StoreModalStyleButton_fontStyle.hash !== "89e85cab35cfb1e88e83fcb01ba235ac" && console.error("The definition of 'StoreModalStyleButton_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalStyleButton_fontStyle)
 });
 
 exports.default = _default;

package/dist/components/TestFontsForm/index.js

@@ -118,7 +118,7 @@ const TestFontsFormBase = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Name*",
+    label: "Name *",
     value: name,
     onChange: value => setName(value),
     autocomplete: "name",
@@ -126,7 +126,8 @@ const TestFontsFormBase = _ref2 => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Email*",
+    label: "Email *",
+    type: "email",
     value: email,
     onChange: value => setEmail(value),
     autocomplete: "email",

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

@@ -27,14 +27,12 @@ const StoreModalFamilyButton = _ref => {
     },
     ...rest
   } = _ref;
-  if (!price) return /*#__PURE__*/_react.default.createElement("div", {
-    className: "store-modal__family-button__no-price"
-  });
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
     onClick: onClick,
     className: (0, _classnames.default)('store-modal__family-button__button', className)
   }, rest, {
-    "data-selected": selected
+    "data-selected": selected,
+    "data-clickable": Boolean(onClick)
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__family-button__container"
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps } from '../../elements/Button';
+import { ButtonProps } from '../Button';
 declare type StoreModalStyleButtonProps = ButtonProps & {
     selected: boolean;
     children: {

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Button = _interopRequireDefault(require("../../elements/Button"));
+var _Button = _interopRequireDefault(require("../Button"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,9 +23,9 @@ const StoreModalStyleButton = _ref => {
     },
     ...rest
   } = _ref;
-  if (!price) return null;
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, rest, {
-    "data-selected": selected
+    "data-selected": selected,
+    "data-clickable": Boolean(rest.onClick)
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "store-modal__style-button__button"
   }, /*#__PURE__*/_react.default.createElement("span", {

package/dist/utils.d.ts

@@ -3,10 +3,10 @@ import type { FontdueState } from './reducer';
 export declare const pluralize: (count: number, singular: string, plural?: string | undefined) => string;
 export declare function notEmpty<TValue>(value: TValue | null | undefined): value is TValue;
 export declare function kebabToCamel(str: string): string;
-export declare const collContainsSkuId: (coll: CollectionStyleSkus | undefined, skuId: string) => boolean;
+export declare const collContainsSkuId: (coll: CollectionStyleSkus | undefined, skuIdOrStyleId: string) => boolean;
 interface CollectionSkuIdsDifferences {
     [collectionSkuId: string]: number;
 }
-export declare const isSelected: (skuId: string) => (state: FontdueState) => boolean;
+export declare const isSelected: (skuIdOrStyleId: string) => (state: FontdueState) => boolean;
 export declare const collectionSkuIdsDifferences: (state: FontdueState, skuId: string) => CollectionSkuIdsDifferences;
 export {};

package/dist/utils.js

@@ -27,17 +27,17 @@ function kebabToCamel(str) {
 } // where coll is a member of `collectionStyleSkus`;
 
 
-const collContainsSkuId = (coll, skuId) => {
+const collContainsSkuId = (coll, skuIdOrStyleId) => {
   if (!coll) return false;
-  return coll.childrenSkuIds.indexOf(skuId) >= 0 || coll.fontStyleSkuIds.indexOf(skuId) >= 0;
+  return coll.childrenSkuIds.indexOf(skuIdOrStyleId) >= 0 || coll.fontStyleSkuIds.indexOf(skuIdOrStyleId) >= 0 || coll.fontStyleIds.indexOf(skuIdOrStyleId) >= 0;
 };
 
 exports.collContainsSkuId = collContainsSkuId;
 
-const isSelected = skuId => state => {
+const isSelected = skuIdOrStyleId => state => {
   // get the collections that contain this skuId as a fontStyle
-  const collectionSkuIds = Object.keys(state.collectionStyleSkus).filter(collSkuId => collContainsSkuId(state.collectionStyleSkus[collSkuId], skuId));
-  return state.selectedSkuIds[skuId] === true || collectionSkuIds.some(collSkuId => state.selectedSkuIds[collSkuId] === true);
+  const collectionSkuIds = Object.keys(state.collectionStyleSkus).filter(collSkuId => collContainsSkuId(state.collectionStyleSkus[collSkuId], skuIdOrStyleId));
+  return state.selectedSkuIds[skuIdOrStyleId] === true || collectionSkuIds.some(collSkuId => state.selectedSkuIds[collSkuId] === true);
 };
 
 exports.isSelected = isSelected;

package/fontdue.css

@@ -820,6 +820,7 @@ div[data-component=TypeTesters] {
   text-align: center;
   border: 1px solid;
   margin-bottom: 16px;
+  white-space: pre;
 }
 
 .character-viewer__monitor__details {
@@ -1308,24 +1309,18 @@ body[data-fontdue-store-modal=open] {
 .store-modal__family__bundle-button:not(:disabled) {
   cursor: pointer;
 }
-.store-modal__family__style-button:hover:not(:disabled),
-.store-modal__family__family-button:hover:not(:disabled),
-.store-modal__family__bundle-button:hover:not(:disabled) {
-  border-color: var(--button_hover_border-color);
-  background: var(--button_hover_background_color);
-  color: var(--button_hover_text_color);
-}
 .store-modal__family__style-button:disabled,
 .store-modal__family__family-button:disabled,
 .store-modal__family__bundle-button:disabled {
   opacity: 0.5;
 }
-.store-modal__family__style-button:hover:not(:disabled),
-.store-modal__family__family-button:hover:not(:disabled),
-.store-modal__family__bundle-button:hover:not(:disabled) {
+.store-modal__family__style-button[data-clickable=true]:hover:not(:disabled),
+.store-modal__family__family-button[data-clickable=true]:hover:not(:disabled),
+.store-modal__family__bundle-button[data-clickable=true]:hover:not(:disabled) {
+  border-color: var(--button_hover_border-color);
   background: var(--button_hover_background_color);
   color: var(--button_hover_text_color);
-  box-shadow: 0 0 0 1px var(--button_hover_border_color);
+  background: var(--button_hover_background_color);
   z-index: 1;
 }
 .store-modal__family__style-button[data-selected=true]:not(:disabled),
@@ -1336,16 +1331,33 @@ body[data-fontdue-store-modal=open] {
   color: var(--button_selected_text_color);
   z-index: 1;
 }
+.store-modal__family__style-button[data-selected=true]:not(:disabled):hover,
+.store-modal__family__family-button[data-selected=true]:not(:disabled):hover,
+.store-modal__family__bundle-button[data-selected=true]:not(:disabled):hover {
+  background: var(--button_selected_background_color);
+}
+.store-modal__family__style-button[data-clickable=false],
+.store-modal__family__family-button[data-clickable=false],
+.store-modal__family__bundle-button[data-clickable=false] {
+  cursor: auto;
+}
+
+.store-modal__family__family-button[data-clickable=false] {
+  padding-left: 0;
+  padding-right: 0;
+  box-shadow: none;
+}
 
 .store-modal__family-button__container {
   display: grid;
   align-items: baseline;
   grid-template-columns: max-content auto max-content;
   grid-column-gap: 10px;
+  grid-row-gap: 10px;
 }
 @media (max-width: 899px) {
   .store-modal__family-button__container {
-    grid-template-columns: auto max-content;
+    grid-template-columns: auto auto;
   }
 }
 
@@ -1363,6 +1375,12 @@ body[data-fontdue-store-modal=open] {
 
 .store-modal__family-button__name {
   font-size: 32px;
+  line-height: normal;
+}
+@media (max-width: 899px) {
+  .store-modal__family-button__name {
+    grid-column: 1/span 2;
+  }
 }
 
 .store-modal__family-button__no-sku {
@@ -1688,16 +1706,20 @@ body[data-fontdue-store-modal=open] {
   display: grid;
   grid-template-columns: 1fr max-content;
   grid-gap: 40px;
-  padding: 30px;
-  border-bottom: 1px solid color(grey);
   margin-right: calc(-1 * var(--StoreModalPageContainer-padding));
   margin-left: calc(-1 * var(--StoreModalPageContainer-padding));
   padding-left: var(--StoreModalPageContainer-padding);
   padding-right: var(--StoreModalPageContainer-padding);
 }
+.store-modal__review-item__container:not(:first-child) {
+  padding-top: 30px;
+  border-bottom: 1px solid color(grey);
+}
+.store-modal__review-item__container:not(:last-child) {
+  padding-bottom: 30px;
+}
 .store-modal__review-item__container:last-child {
   border: none;
-  padding-bottom: 0;
 }
 
 .store-modal__review__container {
@@ -1732,13 +1754,18 @@ body[data-fontdue-store-modal=open] {
   padding-bottom: 30px;
   border-bottom: 1px solid var(--horizontal_rule_color);
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 2fr;
   grid-column-gap: 20px;
   margin-right: calc(-1 * var(--StoreModalPageContainer-side-padding));
   margin-left: calc(-1 * var(--StoreModalPageContainer-side-padding));
   padding-left: var(--StoreModalPageContainer-side-padding);
   padding-right: var(--StoreModalPageContainer-side-padding);
 }
+@media (min-width: 900px) {
+  .store-modal__review__section {
+    grid-template-columns: 1fr 1fr;
+  }
+}
 .store-modal__review__section:not(:first-child) {
   padding-top: 30px;
 }
@@ -1749,17 +1776,17 @@ body[data-fontdue-store-modal=open] {
 
 .store-modal__review__totals {
   display: grid;
-  justify-content: flex-end;
+  grid-template-columns: 1fr 2fr;
+  grid-column-gap: 20px;
 }
 @media (min-width: 900px) {
   .store-modal__review__totals {
     grid-template-columns: 1fr 1fr;
-    grid-column-gap: 20px;
-  }
-  .store-modal__review__totals .cart__price-blocks {
-    grid-column: 2;
   }
 }
+.store-modal__review__totals .cart__price-blocks {
+  grid-column: 2;
+}
 
 .store-modal__review__confirm {
   margin-right: calc(-1 * var(--StoreModalPageContainer-side-padding));