fontdue-js 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.1.0
+
+- Added support for variable fonts to the standalone TypeTester component
+
+## 2.0.1
+
+- Fixed issue with new relay environment headers, add request name to requests
+
 ## 2.0.0
 
 - __Breaking change__: This is a major upgrade to support React 18 concurrent mode, including changes to how we resolve data using Suspense via Relay. Upgrading meant we require some new features only available in React 18. But this change also means that Fontdue components can now fully resolve during server-side rendering (e.g. in Next.js), making for much smoother initial page loads. Usage on the server (e.g. Next.js) now requires the NEXT_PUBLIC_FONTDUE_URL to be set instead of passing the `url` prop to the FontdueProvider.

package/README.md

@@ -189,8 +189,13 @@ import TypeTester from 'fontdue-js/TypeTester';
 | `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. |
+| `direction` | (Optional) `'ltr' \| 'rtl'` Writing direction |
+| `alignment` | (Optional) `'left' \| 'center' \| 'right'` Text alignment |
 | `features` | (Optional) `string[]`  List of opentype feature codes to expose as options to users. (e.g. `['ss01', 'ss02']`) |
+| `axes` | (Optional) `string[]`  List of variable axes to expose. (e.g. `['wdth', 'ital']`). You must provide the relevant `variableSettings` for each axis |
 | `autofit` | (Optional) See `TypeTesters.autofit` above |
+| `featureSettings` | (Optional) `{ feature: string, value: string }[]` List of features already selected, the `value` should be `"1"` to mark the feature as selected. The shape of this data is consistent with the `TypeTester.featureSettings` field in the GraphQL API. e.g. `[{ feature: 'ss01', value: '1' }]` |
+| `variableSettings` | (Optional) `{ axis: string, value: number }[]` List of variable settings selected, consistent with the `TypeTester.variableSettings` field. e.g. `[{ axis: 'wdth', value: 600 }, { axis: 'ital', value: 0.5 }]` |
 
 ## `TestFontsForm`
 

package/dist/components/CharacterViewer/index.js

@@ -103,6 +103,20 @@ const StyleSelect = _ref => {
     onChange: handleChange
   });
 };
+function Character(props) {
+  const ref = (0, _react.useRef)(null);
+  const [size, setSize] = (0, _react.useState)(1);
+  (0, _resizeObserver.default)(ref, entry => {
+    if (entry.target.scrollWidth > entry.target.clientWidth) {
+      setSize(size + 1);
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    "data-size": size
+  }));
+}
 function CharacterViewerComponent(_ref3) {
   var _collection$children, _collection$fontStyle, _collection$children2, _collection$children3, _collection$children4, _fontStyle$characterB, _fontStyle$characterB2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$featureCha5, _fontStyle$characterB3, _fontStyle$featureCha6, _fontStyle$featureCha7, _fontStyle$featureCha8;
   let {
@@ -218,7 +232,7 @@ function CharacterViewerComponent(_ref3) {
       className: "character-viewer__block__characters",
       style: style,
       onMouseLeave: handleMouseLeave
-    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
+    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
       key: j,
       onClick: () => setSelectedCharacter(chars),
       onMouseEnter: () => setActiveCharacter(chars),
@@ -299,7 +313,7 @@ function CharacterViewerComponent(_ref3) {
         fontFeatureSettings: `'${feature}' 1`
       },
       onMouseLeave: handleFeatureCharacterMouseLeave
-    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
+    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
       key: j,
       onClick: () => setSelectedFeatureCharacter([chars, feature]),
       onMouseEnter: () => setActiveFeatureCharacter([chars, feature]),
@@ -321,7 +335,7 @@ function CharacterViewerComponent(_ref3) {
       feature,
       characters
     } = _ref8;
-    return characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
+    return characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
       key: `${i}${j}`,
       style: {
         fontFeatureSettings: `'${feature}' 1`

package/dist/components/Precart/index.js

@@ -197,7 +197,7 @@ function Precart(_ref3) {
       type: 'PRECART_SELECT_LICENSE',
       licenseOptionSpec: spec
     }));
-  }, [viewer]);
+  }, []);
   function renderConfirmingModal(subtotal) {
     var _viewer$precart3, _viewer$precart3$skus;
     if (!isConfirming) {

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

@@ -3,11 +3,20 @@ import { Alignment, Direction } from './types';
 import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
 import { TypeTesterStandaloneQuery } from '__generated__/TypeTesterStandaloneQuery.graphql';
 interface TypeTesterStandaloneComponent_props {
-    lineHeight?: number;
-    fontSize?: number;
-    features?: string[];
-    featuresSelected?: string[];
-    content?: string;
+    lineHeight?: number | null;
+    fontSize?: number | null;
+    axes?: string[] | null;
+    features?: string[] | null;
+    featuresSelected?: string[] | null;
+    featureSettings?: {
+        feature: string;
+        value: string;
+    }[] | null;
+    variableSettings?: {
+        axis: string;
+        value: number;
+    }[] | null;
+    content?: string | null;
     direction?: Direction;
     alignment?: Alignment;
     autofit?: boolean;

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -19,8 +19,11 @@ function TypeTesterStandaloneComponent(_ref) {
   let {
     content,
     direction,
+    axes,
     features,
     featuresSelected,
+    featureSettings = null,
+    variableSettings = null,
     lineHeight,
     alignment,
     fontSize,
@@ -37,14 +40,22 @@ function TypeTesterStandaloneComponent(_ref) {
         size: fontSize ?? 72,
         lineHeight: lineHeight ?? 1,
         alignment: alignment ?? 'left',
-        features: featuresSelected ?? null,
-        variableSettings: null
+        features: (featureSettings === null || featureSettings === void 0 ? void 0 : featureSettings.filter(setting => setting.value === '1').map(setting => setting.feature)) ?? featuresSelected ?? null,
+        variableSettings: (variableSettings === null || variableSettings === void 0 ? void 0 : variableSettings.reduce((acc, _ref2) => {
+          let {
+            axis,
+            value
+          } = _ref2;
+          acc[axis] = value;
+          return acc;
+        }, {})) ?? null
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_index.default, {
     id: "standalone",
     viewer: data.viewer,
     fontStyle: (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.fontStyle,
+    axes: axes,
     features: features,
     direction: direction,
     productId: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$fontSty = _data$viewer2.fontStyle) === null || _data$viewer2$fontSty === void 0 ? void 0 : (_data$viewer2$fontSty2 = _data$viewer2$fontSty.family) === null || _data$viewer2$fontSty2 === void 0 ? void 0 : (_data$viewer2$fontSty3 = _data$viewer2$fontSty2.parent) === null || _data$viewer2$fontSty3 === void 0 ? void 0 : _data$viewer2$fontSty3.id) ?? ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$fontSty = _data$viewer3.fontStyle) === null || _data$viewer3$fontSty === void 0 ? void 0 : (_data$viewer3$fontSty2 = _data$viewer3$fontSty.family) === null || _data$viewer3$fontSty2 === void 0 ? void 0 : _data$viewer3$fontSty2.id),
@@ -54,24 +65,24 @@ function TypeTesterStandaloneComponent(_ref) {
   }));
 }
 const query = _TypeTesterStandaloneQuery !== void 0 ? _TypeTesterStandaloneQuery : (_TypeTesterStandaloneQuery = require("../../__generated__/TypeTesterStandaloneQuery.graphql"), _TypeTesterStandaloneQuery.hash && _TypeTesterStandaloneQuery.hash !== "3ad5c4d856f5d46ddf8a47a2b6d2420a" && console.error("The definition of 'TypeTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneQuery);
-function TypeTesterStandalonePreloadedQueryRenderer(_ref2) {
+function TypeTesterStandalonePreloadedQueryRenderer(_ref3) {
   let {
     preloadedQuery,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
   const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
   return /*#__PURE__*/_react.default.createElement(TypeTesterStandaloneComponent, _extends({
     data: data
   }, rest));
 }
-function TypeTesterStandalone(_ref3) {
+function TypeTesterStandalone(_ref4) {
   var _data$viewer4;
   let {
     familyName,
     styleName,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const data = (0, _reactRelay.useLazyLoadQuery)(query, {
     familyName,
     styleName

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

@@ -5,7 +5,9 @@ interface TypeTesterElement_props {
     lineHeight?: string;
     fontSize?: string;
     features?: string;
+    axes?: string;
     featuresSelected?: string;
+    variableSettings?: string;
     content?: string;
     direction?: string;
     alignment?: string;

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TypeTesterStandaloneElement = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TypeTesterStandalone = _interopRequireDefault(require("./TypeTesterStandalone"));
+var _utils = require("../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 => {
@@ -15,12 +16,31 @@ const isDirection = str => {
   return str === 'ltr' || str === 'rtl';
 };
 const parseBool = input => input === 'true' ? true : false;
+
+// parse a string like "wdth 1000, ital 0.5" into
+// [{ axis: "wdth", value: 1000 }, { axis: "ital", value: 0.5 }]
+function parseVariableSettings(input) {
+  if (!input) return null;
+  return input.split(/\s*,\s*/).map(settingString => {
+    const m = settingString.match(/^([A-Za-z0-9]{4}) (\d+(?:\.\d+)?)$/);
+    if (m && m.length > 2) {
+      return {
+        axis: m[1],
+        value: parseFloat(m[2])
+      };
+    } else {
+      console.warn(`fontdue-type-tester failed to parse variable-settings value: "${settingString}", ignoring`);
+    }
+  }).filter(_utils.notEmpty);
+}
 const TypeTesterStandaloneElement = _ref => {
   let {
     lineHeight,
     fontSize,
+    axes,
     features,
     featuresSelected,
+    variableSettings,
     alignment,
     direction,
     autofit,
@@ -30,10 +50,15 @@ const TypeTesterStandaloneElement = _ref => {
     autofit: parseBool(autofit),
     lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
     fontSize: fontSize ? parseFloat(fontSize) : undefined,
+    axes: (axes === null || axes === void 0 ? void 0 : axes.split(',')) ?? [],
     features: (features === null || features === void 0 ? void 0 : features.split(',')) ?? [],
-    featuresSelected: (featuresSelected === null || featuresSelected === void 0 ? void 0 : featuresSelected.split(',')) ?? [],
+    featureSettings: featuresSelected === null || featuresSelected === void 0 ? void 0 : featuresSelected.split(',').map(feature => ({
+      feature,
+      value: '1'
+    })),
     alignment: isAlignment(alignment) ? alignment : undefined,
-    direction: isDirection(direction) ? direction : undefined
+    direction: isDirection(direction) ? direction : undefined,
+    variableSettings: parseVariableSettings(variableSettings)
   }, rest));
 };
 exports.TypeTesterStandaloneElement = TypeTesterStandaloneElement;

package/dist/components/TypeTester/TypeTesterVariableAxes.js

@@ -32,7 +32,8 @@ const TypeTesterVariableAxes = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__variable-axes"
-  }, axes.map(showAxis => {
+  }, axes.filter(showAxis => showAxis in variableSettings) // only show the slider if the value is set
+  .map(showAxis => {
     var _fontStyle$variableAx;
     return (_fontStyle$variableAx = fontStyle.variableAxes) === null || _fontStyle$variableAx === void 0 ? void 0 : _fontStyle$variableAx.find(_ref2 => {
       let {

package/dist/fontdue.css

@@ -935,23 +935,31 @@ div[data-component=TypeTesters] {
 
 .character-viewer__block__characters {
   display: grid;
-  grid-template-columns: repeat(calc(var(--width) / 60), 1fr);
+  grid-template-columns: repeat(calc(var(--width) / 60), minmax(0, 1fr));
   font-size: 30px;
   margin-left: 1px;
 }
 .character-viewer__block__characters > div {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-bottom: 1px solid;
-  border-right: 1px solid;
+  border: 1px solid;
   margin-left: -1px;
   margin-bottom: -1px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding: 12px 0;
   text-align: center;
   cursor: default;
   white-space: pre;
 }
+.character-viewer__block__characters > div[data-size="2"] {
+  grid-column: span 2;
+}
+.character-viewer__block__characters > div[data-size="3"] {
+  grid-column: span 3;
+}
+.character-viewer__block__characters > div[data-size="4"] {
+  grid-column: span 4;
+}
+.character-viewer__block__characters > div[data-size="5"] {
+  grid-column: span 5;
+}
 @media screen and (min-width: 600px) {
   .character-viewer__block__characters > div:hover, .character-viewer__block__characters > div[data-selected=true] {
     background: var(--primary_text_color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.0.1",
+  "version": "2.1.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",