fontdue-js 1.6.0 → 1.8.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.8.1
+
+- Fixed BuyButton label rendering
+
+## 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
+
 ## 1.6.0
 
 - Added `CustomerLoginForm` component

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,22 +133,30 @@ 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 |
 
-## `TypeTester`
+## `TypeTester` (standalone)
 
 Standalone version of the type tester, which does not query the Fontdue CMS for content. You supply the content instead. Does not support the "Affect all styles" feature of the TypeTesters component.
 
-The props accepted for this compnenent will change and be documented thereafter.
-
 ```tsx
 import TypeTester from 'fontdue-js/TypeTester';
 ```
 
+| Prop | Description |
+| --- | --- |
+| `familyName` | (Required) `string` Font family name (must have been already uploaded to your Fontdue admin) |
+| `styleName` | (Required) `string` The name of the style from the family to display. |
+| `fontSize` | (Optional) `number` Initial font size in pixels. |
+| `lineHeight` | (Optional) `number` Line-height as a proportional value where `1 == fontSize`. |
+| `content` | (Optional) `string` The initial content to display. |
+| `features` | (Optional) `string[]`  List of opentype feature codes to expose as options to users. (e.g. `['ss01', 'ss02']`) |
+| `autofit` | (Optional) See `TypeTesters.autofit` above |
+
 ## `TestFontsForm`
 
 Displays a form for users to enter their information and download test fonts. Make sure you have configured [Test Fonts](https://docs.fontdue.com/test-fonts) for this to work.

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 !== null && collectionName !== void 0 ? collectionName : ''}`);
 };
 
 const BuyButton = (0, _reactRelay.createFragmentContainer)(BuyButtonBase, {

package/dist/components/Root/index.js

@@ -60,8 +60,8 @@ const customElementMap = {
   'fontdue-sticky-nav': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StickyNav')))),
   '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/TypeTesterStandalone')))),
-  'fontdue-type-testers': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTesters'))))
+  'fontdue-type-tester': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTester/TypeTesterStandaloneElement')))),
+  '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/TypeTesterStandalone.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Alignment } from './types';
+import { Alignment, Direction } from './types';
 interface TypeTesterStandalone {
     familyName: string;
     styleName: string;
-    lineHeight?: string;
-    fontSize?: string;
-    features?: string;
+    lineHeight?: number;
+    fontSize?: number;
+    features?: string[];
     content?: string;
-    direction?: string;
+    direction?: Direction;
     alignment?: Alignment;
-    autofit?: string;
+    autofit?: boolean;
     onFocus?: () => void;
     onBlur?: () => void;
 }

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -19,8 +19,6 @@ var _TypeTesterStandalone_StyleQuery;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const parseBool = input => input === 'true' ? true : false;
-
 const TypeTesterStandalone = _ref => {
   let {
     familyName,
@@ -44,7 +42,7 @@ const TypeTesterStandalone = _ref => {
     },
     environment: environment,
     render: _ref2 => {
-      var _props$viewer$fontSty, _props$viewer, _props$viewer$fontSty2, _features$split, _props$viewer$fontSty3, _props$viewer2, _props$viewer2$fontSt, _props$viewer2$fontSt2, _props$viewer2$fontSt3, _props$viewer3, _props$viewer3$fontSt, _props$viewer3$fontSt2;
+      var _props$viewer$fontSty, _props$viewer, _props$viewer$fontSty2, _props$viewer$fontSty3, _props$viewer2, _props$viewer2$fontSt, _props$viewer2$fontSt2, _props$viewer2$fontSt3, _props$viewer3, _props$viewer3$fontSt, _props$viewer3$fontSt2;
 
       let {
         props
@@ -55,17 +53,17 @@ const TypeTesterStandalone = _ref => {
         testers: {
           standalone: {
             content: content !== null && content !== void 0 ? content : 'The quick brown fox...',
-            autofit: parseBool(autofit),
-            size: fontSize ? parseFloat(fontSize) : 72,
-            lineHeight: lineHeight ? parseFloat(lineHeight) : 1,
+            autofit: autofit !== null && autofit !== void 0 ? autofit : false,
+            size: fontSize !== null && fontSize !== void 0 ? fontSize : 72,
+            lineHeight: lineHeight !== null && lineHeight !== void 0 ? lineHeight : 1,
             alignment: alignment !== null && alignment !== void 0 ? alignment : 'left'
           }
         }
       }, /*#__PURE__*/_react.default.createElement(_index.default, {
         id: "standalone",
         fontStyleId: (_props$viewer$fontSty = (_props$viewer = props.viewer) === null || _props$viewer === void 0 ? void 0 : (_props$viewer$fontSty2 = _props$viewer.fontStyle) === null || _props$viewer$fontSty2 === void 0 ? void 0 : _props$viewer$fontSty2.id) !== null && _props$viewer$fontSty !== void 0 ? _props$viewer$fontSty : null,
-        features: (_features$split = features === null || features === void 0 ? void 0 : features.split(',')) !== null && _features$split !== void 0 ? _features$split : [],
-        direction: direction === 'rtl' ? 'rtl' : 'ltr',
+        features: features,
+        direction: direction,
         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,
         groupEdit: false,
         onFocus: onFocus,

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface TypeTesterElement_props {
+    familyName: string;
+    styleName: string;
+    lineHeight?: string;
+    fontSize?: string;
+    features?: string;
+    content?: string;
+    direction?: string;
+    alignment?: string;
+    autofit?: string;
+}
+export declare const TypeTesterStandaloneElement: React.FC<TypeTesterElement_props>;
+export default TypeTesterStandaloneElement;

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TypeTesterStandaloneElement = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TypeTesterStandalone = _interopRequireDefault(require("./TypeTesterStandalone"));
+
+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 isAlignment = str => {
+  return str === 'left' || str === 'center' || str === 'right';
+};
+
+const isDirection = str => {
+  return str === 'ltr' || str === 'rtl';
+};
+
+const parseBool = input => input === 'true' ? true : false;
+
+const TypeTesterStandaloneElement = _ref => {
+  var _features$split;
+
+  let {
+    lineHeight,
+    fontSize,
+    features,
+    alignment,
+    direction,
+    autofit,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_TypeTesterStandalone.default, _extends({
+    autofit: parseBool(autofit),
+    lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
+    fontSize: fontSize ? parseFloat(fontSize) : undefined,
+    features: (_features$split = features === null || features === void 0 ? void 0 : features.split(',')) !== null && _features$split !== void 0 ? _features$split : [],
+    alignment: isAlignment(alignment) ? alignment : undefined,
+    direction: isDirection(direction) ? direction : undefined
+  }, rest));
+};
+
+exports.TypeTesterStandaloneElement = TypeTesterStandaloneElement;
+var _default = TypeTesterStandaloneElement;
+exports.default = _default;

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/TypeTester/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alignment } from './types';
+import { Alignment, Direction } from './types';
 export interface TypeTesterConfig {
     min?: number;
     max?: number;
@@ -45,7 +45,7 @@ export interface TypeTesterConfig {
 export interface TypeTesterBaseProps {
     id: string;
     productId?: string;
-    direction: 'ltr' | 'rtl';
+    direction: Direction | undefined;
     onSelectFontStyleId: (value: string) => void;
     features?: readonly string[] | null;
     groupEdit?: boolean;

package/dist/components/TypeTester/index.js

@@ -71,7 +71,7 @@ const TypeTesterComponent = _ref => {
   let {
     id,
     productId,
-    direction,
+    direction = 'ltr',
     fontStyle,
     viewer,
     onSelectFontStyleId,

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

@@ -4,4 +4,5 @@ export declare type Size = number;
 export declare type LineHeight = number;
 export declare type Features = string[];
 export declare type Alignment = 'left' | 'center' | 'right';
+export declare type Direction = 'ltr' | 'rtl';
 export declare type TypeTesterMode = 'local' | 'group';

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.6.0",
+  "version": "1.8.1",
   "main": "index.js",
   "scripts": {
     "build": "run-p build-js build-css build-ts-declarations",