fontdue-js 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.7.0
+
+- Updated `TypeTester` API for React and added documentation
+
 ## 1.6.0
 
 - Added `CustomerLoginForm` component

package/README.md

@@ -138,16 +138,24 @@ import TypeTesters from 'fontdue-js/TypeTesters';
 | `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/Root/index.js

@@ -60,7 +60,7 @@ 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-tester': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTester/TypeTesterStandaloneElement')))),
   'fontdue-type-testers': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTesters'))))
 };
 Object.keys(customElementMap).forEach(elementName => {

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/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/package.json

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