fontdue-js 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.8.0
+
+- Added `label` property to BuyButton
+- Updated markup for Type Tester name
+- Corrected description of API for TypeTesters `tags` and `excludeTags` properties
+
 ## 1.7.0
 
 - Updated `TypeTester` API for React and added documentation

package/README.md

@@ -79,6 +79,7 @@ import BuyButton from 'fontdue-js/BuyButton';
 | --- | --- |
 | `collectionId` or `collectionSlug` | (Required) `string` Collection identifier |
 | `collectionName` | (Optional) `string` The name to render in the button: `Buy {collectionName}` |
+| `label` | (Optional) `string` Label for the button (defaults to `Buy {collectionName}`) |
 
 ## `CartButton`
 
@@ -132,8 +133,8 @@ import TypeTesters from 'fontdue-js/TypeTesters';
 | `collectionId` or `collectionSlug` | (Required) `string` Identifier for collection |
 | `defaultMode` | (Optional) `'local' \| 'global'` The mode refers to the toggle in the UI: Affect all styles. `local` mode has this toggle turned off by default, `global` turns it on |
 | `autofit` | (Optional) `boolean` Set to `true` to make the sentences fit on one line. It will adjust to the width of the tester as the user changes their browser window. If the user changes the font size or edits content, autofitting is turned off for that tester |
-| `tags` | (Optional) `string[]` Will render only type testers that include one of the tags |
-| `excludeTags` | (Optional) `string[]` Will exclude type testers that include one of the tags |
+| `tags` | (Optional) `string[]` Will render only type testers that include these tags |
+| `excludeTags` | (Optional) `string[]` Will exclude type testers that include these tags |
 | `onFocus` | (Optional) `() => void` when any type tester is focused |
 | `onBlur` | (Optional) `() => void` when any type tester is blurred |
 | `onToolbarOpenClose` | (Optional) `(open: boolean) => void` Callback when toolbar is opened/closed |

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

@@ -3,6 +3,7 @@ interface BuyButtonQueryRenderer_props {
     collectionId?: string | null;
     collectionSlug?: string | null;
     collectionName?: string;
+    label?: string;
 }
 declare const BuyButtonQueryRenderer: React.FC<BuyButtonQueryRenderer_props>;
 export default BuyButtonQueryRenderer;

package/dist/components/BuyButton/index.js

@@ -28,6 +28,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const BuyButtonBase = _ref => {
   let {
     collection,
+    label,
     collectionName
   } = _ref;
   const store = (0, _reactRedux.useStore)();
@@ -67,7 +68,7 @@ const BuyButtonBase = _ref => {
     className: "buy-button",
     onClick: handleClick,
     type: "button"
-  }, "Buy ", collectionName);
+  }, label ? label : `Buy ${collectionName}`);
 };
 
 const BuyButton = (0, _reactRelay.createFragmentContainer)(BuyButtonBase, {

package/dist/components/Root/index.js

@@ -61,7 +61,7 @@ const customElementMap = {
   'fontdue-store-modal': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StoreModal')))),
   'fontdue-test-fonts-form': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TestFontsForm')))),
   'fontdue-type-tester': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTester/TypeTesterStandaloneElement')))),
-  'fontdue-type-testers': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTesters'))))
+  'fontdue-type-testers': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTesters/TypeTestersElement'))))
 };
 Object.keys(customElementMap).forEach(elementName => {
   // this might be more sophisticated in the future with a shadow DOM, etc,

package/dist/components/TypeTester/TypeTesterStyleSelectData.js

@@ -76,7 +76,11 @@ const TypeTesterStyleSelectData = _ref => {
     onSelectFamilyId: handleSelectFamilyId
   }) : fontStyle.family && /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__name"
-  }, fontStyle.family.name, " ", fontStyle.name.replace(/ /g, '\xa0'));
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__name__family"
+  }, fontStyle.family.name), ' ', /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__name__style"
+  }, fontStyle.name.replace(/ /g, '\xa0')));
 };
 
 var _default = (0, _reactRelay.createFragmentContainer)(TypeTesterStyleSelectData, {

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface TypeTestersElementProps {
+    collectionId?: string;
+    collectionSlug?: string;
+    defaultMode?: string;
+    autofit?: string;
+    tags?: string;
+    excludeTags?: string;
+}
+declare const TypeTestersElement: React.FC<TypeTestersElementProps>;
+export default TypeTestersElement;

package/dist/components/TypeTesters/TypeTestersElement.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
+
+const TypeTestersElement = _ref => {
+  let {
+    autofit,
+    tags,
+    excludeTags,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({
+    tags: tags === null || tags === void 0 ? void 0 : tags.split(','),
+    excludeTags: excludeTags === null || excludeTags === void 0 ? void 0 : excludeTags.split(','),
+    autofit: autofit === 'true'
+  }, rest));
+};
+
+var _default = TypeTestersElement;
+exports.default = _default;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 interface TypeTestersQueryRendererProps {
-    collectionId?: string | null;
-    collectionSlug?: string | null;
+    collectionId?: string;
+    collectionSlug?: string;
     defaultMode?: string;
-    autofit?: string | null;
+    autofit?: boolean;
     precartOpen?: boolean;
     tags?: string[];
     excludeTags?: string[];

package/dist/components/TypeTesters/index.js

@@ -138,7 +138,7 @@ const TypeTesters = (0, _reactRelay.createFragmentContainer)(TypeTestersBase, {
 });
 
 const getDefaultMode = (stringValue, autofit) => {
-  if (autofit === 'true') return 'local';
+  if (autofit) return 'local';
   if (stringValue === 'group') return 'group';
   return 'local';
 };
@@ -183,7 +183,7 @@ const TypeTestersQueryRenderer = _ref2 => {
             defaultMode: getDefaultMode(defaultMode, autofit),
             precartOpen: precartOpen,
             includePriceBar: includePriceBar,
-            autofit: autofit === 'true',
+            autofit: autofit !== null && autofit !== void 0 ? autofit : false,
             onFocus: onFocus,
             onBlur: onBlur,
             onToolbarOpenClose: onToolbarOpenClose
@@ -218,7 +218,7 @@ const TypeTestersQueryRenderer = _ref2 => {
             defaultMode: getDefaultMode(defaultMode, autofit),
             precartOpen: precartOpen,
             includePriceBar: includePriceBar,
-            autofit: autofit === 'true',
+            autofit: autofit !== null && autofit !== void 0 ? autofit : false,
             onFocus: onFocus,
             onBlur: onBlur,
             onToolbarOpenClose: onToolbarOpenClose

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "main": "index.js",
   "scripts": {
     "build": "run-p build-js build-css build-ts-declarations",