fontdue-js 2.4.0 → 2.5.0

package/dist/components/TypeTester/TypeTesterStyleSelectData.js

@@ -36,7 +36,7 @@ const computeSimilarity = (left, right) => {
   return weightSimilarity * styleSimilarity * stretchSimilarity;
 };
 function TypeTesterStyleSelectData(_ref) {
-  var _viewer$families, _viewer$families$edge;
+  var _viewer$families, _viewer$families$edge, _fontStyle$variableIn;
   let {
     fontStyle: fontStyleKey,
     viewer: viewerKey,
@@ -83,6 +83,7 @@ function TypeTesterStyleSelectData(_ref) {
       variableSettings
     });
   }, [familyData, fontStyle]);
+  const instance = variableSettings ? (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.find(instance => (0, _utils.compareVariableSettings)(instance, variableSettings)) : null;
   return config.selectable && familyData ? /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelect.default, {
     families: familyData,
     selectedFontStyleId: fontStyle.id,
@@ -97,5 +98,5 @@ function TypeTesterStyleSelectData(_ref) {
     className: "type-tester__name__family"
   }, fontStyle.family.name), ' ', /*#__PURE__*/_react.default.createElement("span", {
     className: "type-tester__name__style"
-  }, fontStyle.name.replace(/ /g, '\xa0')));
+  }, variableSettings ? (instance === null || instance === void 0 ? void 0 : instance.name) ?? 'Custom' : fontStyle.name.replace(/ /g, '\xa0')));
 }

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

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

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

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

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

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

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

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

package/dist/fontdue.css

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

package/package.json

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