fontdue-js 0.1.0-alpha21 → 0.1.0-alpha24

package/dist/components/Cart/CartTotals.js

@@ -51,7 +51,7 @@ const CartTotals = ({
   "data-has-discount": Boolean(order.discount),
   "data-hide-total": hideTotal
 }, /*#__PURE__*/_react.default.createElement(PriceBlock, {
-  label: "Pre-tax total:",
+  label: "Subtotal:",
   price: order.subtotal,
   "data-line": "subtotal"
 }), order.discount && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PriceBlock, {
@@ -79,13 +79,13 @@ const CartTotals = ({
   price: order.taxes,
   "data-line": "taxes"
 }), /*#__PURE__*/_react.default.createElement(PriceBlock, {
-  label: "Total:",
+  label: "Total".concat(order.gstIncluded ? ' including GST' : '', ":"),
   price: order.total,
   "data-line": "total"
 }));
 
 var _default = (0, _reactRelay.createFragmentContainer)(CartTotals, {
-  order: _CartTotals_order !== void 0 ? _CartTotals_order : (_CartTotals_order = require("../../__generated__/CartTotals_order.graphql"), _CartTotals_order.hash && _CartTotals_order.hash !== "e4a0587e58d04c9f6ab6753a7d767740" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order)
+  order: _CartTotals_order !== void 0 ? _CartTotals_order : (_CartTotals_order = require("../../__generated__/CartTotals_order.graphql"), _CartTotals_order.hash && _CartTotals_order.hash !== "b4e8ff4b5b5525af89e9f80a08a657e5" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order)
 });
 
 exports.default = _default;

package/dist/components/Icons/Align.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function AlignCenter(): JSX.Element;
+export declare function AlignLeft(): JSX.Element;
+export declare function AlignRight(): JSX.Element;

package/dist/components/Icons/Align.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlignCenter = AlignCenter;
+exports.AlignLeft = AlignLeft;
+exports.AlignRight = AlignRight;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function AlignCenter() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon",
+    "data-label": "AlignCenter"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "13",
+    fill: "none",
+    viewBox: "0 0 18 13"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M0 4h18v1H0V4zM2 0h14.078v1H2V0zM2.067 8H16v1H2.067V8zM3 12h12.079v1H3v-1z",
+    clipRule: "evenodd"
+  })));
+}
+
+function AlignLeft() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon",
+    "data-label": "AlignLeft"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "19",
+    height: "13",
+    fill: "none",
+    viewBox: "0 0 19 13"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M0 0h14.079v1H0V0zM0 4h18.078v1H0V4zM0 8h16.078v1H0V8zM0 12h14.079v1H0v-1z",
+    clipRule: "evenodd"
+  })));
+}
+
+function AlignRight() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon",
+    "data-label": "AlignRight"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "19",
+    height: "13",
+    fill: "none",
+    viewBox: "0 0 19 13"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M3 0h15v1H3V0zM3.47 12H18v1H3.47v-1zM.067 4H18v1H.067V4zM2.067 8H18v1H2.067V8z",
+    clipRule: "evenodd"
+  })));
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Alignment } from './types';
+interface TypeTesterAlignButtons_props {
+    alignment: Alignment;
+    setAlignment: (value: Alignment) => void;
+}
+declare const TypeTesterAlignButtons: React.FC<TypeTesterAlignButtons_props>;
+export default TypeTesterAlignButtons;

package/dist/components/TypeTester/TypeTesterAlignButtons.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Align = require("../Icons/Align");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const TypeTesterAlignButtons = ({
+  alignment,
+  setAlignment
+}) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__align-buttons"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "type-tester__align-buttons__button",
+    "data-active": alignment === 'left',
+    onClick: () => setAlignment('left')
+  }, /*#__PURE__*/_react.default.createElement(_Align.AlignLeft, null)), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "type-tester__align-buttons__button",
+    "data-active": alignment === 'center',
+    onClick: () => setAlignment('center')
+  }, /*#__PURE__*/_react.default.createElement(_Align.AlignCenter, null)), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "type-tester__align-buttons__button",
+    "data-active": alignment === 'right',
+    onClick: () => setAlignment('right')
+  }, /*#__PURE__*/_react.default.createElement(_Align.AlignRight, null)));
+};
+
+var _default = TypeTesterAlignButtons;
+exports.default = _default;

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { UseTypeTesterStylerProps } from './useTypeTesterStyler';
-import { Content } from './types';
+import { Alignment, Content } from './types';
+export interface TypeTesterContentRef {
+    focus: () => void;
+}
 interface TypeTesterContentProps extends UseTypeTesterStylerProps {
     content: Content;
     setContent: (value: Content) => void;
@@ -8,6 +11,7 @@ interface TypeTesterContentProps extends UseTypeTesterStylerProps {
     setFocused: (value: boolean) => void;
     direction: string | null;
     autofitOnChange: boolean;
+    alignment: Alignment;
 }
-declare const TypeTesterContent: React.FunctionComponent<TypeTesterContentProps>;
+declare const TypeTesterContent: React.ForwardRefExoticComponent<TypeTesterContentProps & React.RefAttributes<TypeTesterContentRef>>;
 export default TypeTesterContent;

package/dist/components/TypeTester/TypeTesterContent.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useTypeTesterStyler = _interopRequireDefault(require("./useTypeTesterStyler"));
 
@@ -13,30 +13,46 @@ var _draftJs = require("draft-js");
 
 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; }
+
 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 TypeTesterContent = ({
+const TypeTesterContent = /*#__PURE__*/_react.default.forwardRef(({
   content,
   setContent,
   setFocused,
   direction,
+  alignment,
   ...props
-}) => {
+}, ref) => {
+  const editorRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus: () => {
+      var _editorRef$current;
+
+      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.focus();
+    }
+  }));
   const style = (0, _useTypeTesterStyler.default)({ ...props,
-    content
+    content,
+    alignment
   });
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, style, {
     className: "type-tester__text__container"
   }), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+    ref: editorRef,
     editorState: content,
     onChange: value => setContent(value),
     onBlur: () => setFocused(false),
     onFocus: () => setFocused(true),
     spellCheck: false,
     stripPastedStyles: true,
-    textDirectionality: direction === 'rtl' ? 'RTL' : 'LTR'
+    textDirectionality: direction === 'rtl' ? 'RTL' : 'LTR',
+    textAlignment: alignment
   }));
-};
+});
 
 var _default = TypeTesterContent;
 exports.default = _default;

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

@@ -1,28 +1,72 @@
 import React, { Dispatch } from 'react';
-import { Content, Features, Size, TypeTesterMode } from './types';
+import { Content, Features, Size, Alignment, TypeTesterMode } from './types';
+interface TypeTesterState {
+    content: Content;
+    contentEdited: boolean;
+    features: Features;
+    size: Size;
+    lineHeight: number;
+    focused: boolean;
+    featuresOpen: boolean;
+    autofit: boolean;
+    alignment: Alignment;
+}
+export interface TypeTestersState {
+    [id: string]: TypeTesterState;
+}
+export interface TypeTestersInitialState {
+    [id: string]: {
+        content: string | null;
+        size: number | null;
+        lineHeight: number | null;
+        autofit: boolean;
+        alignment: Alignment;
+    };
+}
 interface TypeTesterContextState {
     mode: TypeTesterMode;
-    content: Content | null;
-    features: Features | null;
-    size: Size | null;
+    globalFeaturesOpen: boolean;
+    testers: TypeTestersState;
 }
 declare type TypeTesterContextAction = {
     type: 'TOGGLE_MODE';
+} | {
+    type: 'TOGGLE_GLOBAL_FEATURES_OPEN';
 } | {
     type: 'SET_CONTENT';
-    value: Content | null;
+    id: string;
+    value: Content;
 } | {
     type: 'SET_SIZE';
-    value: Size | null;
+    id: string;
+    value: Size;
 } | {
     type: 'SET_FEATURES';
-    value: Features | null;
+    id: string;
+    value: Features;
+} | {
+    type: 'SET_FEATURES_OPEN';
+    id: string;
+    value: boolean;
+} | {
+    type: 'SET_FOCUSED';
+    id: string;
+    value: boolean;
+} | {
+    type: 'SET_LINE_HEIGHT';
+    id: string;
+    value: number;
+} | {
+    type: 'SET_ALIGNMENT';
+    id: string;
+    value: Alignment;
 };
 export declare const TypeTesterContext: React.Context<TypeTesterContextState & {
     dispatch: Dispatch<TypeTesterContextAction>;
 }>;
 export interface TypeTesterContextProps {
     defaultMode?: 'group' | 'local';
+    testers: TypeTestersInitialState;
 }
 declare const TypeTesterContextComponent: React.FunctionComponent<TypeTesterContextProps>;
 export default TypeTesterContextComponent;

package/dist/components/TypeTester/TypeTesterContext.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TypeTesterContext = void 0;
 
+var _draftJs = require("draft-js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 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); }
@@ -14,39 +16,147 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const TypeTesterContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.TypeTesterContext = TypeTesterContext;
 
+const updateTester = (state, id, newState) => {
+  const testers = state.testers;
+
+  if (state.mode === 'local') {
+    return { ...state,
+      testers: { ...testers,
+        [id]: { ...testers[id],
+          ...newState
+        }
+      }
+    };
+  }
+
+  if (state.mode === 'group') {
+    // affect all testers
+    const newTesters = Object.keys(testers).reduce((acc, tid) => {
+      let content = testers[tid].content;
+
+      if (newState.content) {
+        if (id === tid) {
+          // for the currently edited tester, we need to use the new content
+          // as-is to maintain the selection state
+          content = newState.content;
+        } else {
+          var _testers$id$content;
+
+          if (((_testers$id$content = testers[id].content) === null || _testers$id$content === void 0 ? void 0 : _testers$id$content.getCurrentContent()) !== newState.content.getCurrentContent()) {
+            // but we can't use the `content` state as-is for other testers, because
+            // the selection state seems to be globally tied to the browser selection,
+            // so the cursor jumps to the other tester. we have to make a new
+            // EditorState with a copy of the content
+            content = _draftJs.EditorState.createWithContent(newState.content.getCurrentContent());
+          }
+        }
+      }
+
+      acc[tid] = { ...testers[tid],
+        ...newState,
+        content
+      };
+      return acc;
+    }, {});
+    return { ...state,
+      testers: newTesters
+    };
+  }
+
+  return state;
+};
+
 const groupReducer = (state, action) => {
+  const {
+    testers
+  } = state;
+
   switch (action.type) {
     case 'TOGGLE_MODE':
       return { ...state,
         mode: state.mode === 'group' ? 'local' : 'group'
       };
 
-    case 'SET_CONTENT':
+    case 'TOGGLE_GLOBAL_FEATURES_OPEN':
       return { ...state,
-        content: action.value
+        globalFeaturesOpen: !state.globalFeaturesOpen
       };
 
+    case 'SET_CONTENT':
+      return updateTester(state, action.id, {
+        content: action.value,
+        contentEdited: true
+      });
+
     case 'SET_SIZE':
-      return { ...state,
+      return updateTester(state, action.id, {
         size: action.value
-      };
+      });
 
     case 'SET_FEATURES':
-      return { ...state,
+      return updateTester(state, action.id, {
         features: action.value
+      });
+
+    case 'SET_LINE_HEIGHT':
+      return updateTester(state, action.id, {
+        lineHeight: action.value
+      });
+
+    case 'SET_ALIGNMENT':
+      return updateTester(state, action.id, {
+        alignment: action.value
+      });
+
+    case 'SET_FOCUSED':
+      return { ...state,
+        testers: { ...testers,
+          [action.id]: { ...testers[action.id],
+            focused: action.value
+          }
+        }
+      };
+
+    case 'SET_FEATURES_OPEN':
+      return { ...state,
+        testers: { ...testers,
+          [action.id]: { ...testers[action.id],
+            featuresOpen: action.value
+          }
+        }
       };
   }
 };
 
 const TypeTesterContextComponent = ({
   children,
+  testers: initialTestersState,
   defaultMode = 'group'
 }) => {
+  const testers = Object.keys(initialTestersState).reduce((acc, id) => {
+    var _initialState$content, _initialState$size, _initialState$lineHei;
+
+    const initialState = initialTestersState[id];
+
+    const content = _draftJs.EditorState.createWithContent(_draftJs.ContentState.createFromText((_initialState$content = initialState.content) !== null && _initialState$content !== void 0 ? _initialState$content : ''));
+
+    acc[id] = {
+      content,
+      contentEdited: false,
+      size: (_initialState$size = initialState.size) !== null && _initialState$size !== void 0 ? _initialState$size : 72,
+      lineHeight: (_initialState$lineHei = initialState.lineHeight) !== null && _initialState$lineHei !== void 0 ? _initialState$lineHei : 1,
+      autofit: initialState.autofit,
+      features: [],
+      featuresOpen: false,
+      focused: false,
+      alignment: initialState.alignment
+    };
+    return acc;
+  }, {});
   const [value, dispatch] = (0, _react.useReducer)(groupReducer, {
-    content: null,
-    size: null,
-    features: null,
-    mode: defaultMode
+    mode: defaultMode,
+    globalFeaturesOpen: false,
+    testers
   });
   return /*#__PURE__*/_react.default.createElement(TypeTesterContext.Provider, {
     value: { ...value,

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

@@ -1,10 +1,9 @@
 import { TypeTesterFeatures_fontStyle } from '../../__generated__/TypeTesterFeatures_fontStyle.graphql';
 import { TypeTesterConfig } from '.';
 interface TypeTesterFeatures_props {
+    id: string;
     fontStyle: TypeTesterFeatures_fontStyle;
     features: ReadonlyArray<string>;
-    showFeatures: ReadonlyArray<string>;
-    toggleFeature: (feature: string) => void;
     config: TypeTesterConfig;
 }
 declare const _default: import("react-relay").Container<TypeTesterFeatures_props>;

package/dist/components/TypeTester/TypeTesterFeatures.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactRelay = require("react-relay");
 
@@ -13,10 +13,43 @@ var _features = _interopRequireDefault(require("./features"));
 
 var _TypeTesterBullet = _interopRequireDefault(require("../TypeTester/TypeTesterBullet"));
 
+var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
+
 var _TypeTesterFeatures_stylisticSetName, _TypeTesterFeatures_fontStyle;
 
 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; }
+
+function useHeightAnimation(isOpen = false, duration = 350) {
+  const contentRef = (0, _react.useRef)(null); // Inner wrapper that keeps the height if the outer animated is closed
+
+  const [height, setHeight] = (0, _react.useState)(isOpen ? 'auto' : 0);
+  (0, _react.useEffect)(() => {
+    var _contentRef$current;
+
+    const contentRect = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.getBoundingClientRect();
+    if (!contentRect) return;
+    setHeight("".concat(contentRect.height, "px"));
+    const first = setTimeout(() => setHeight(isOpen ? "".concat(contentRect.height, "px") : 0));
+    const second = setTimeout(() => {
+      if (isOpen) {
+        setHeight('auto');
+      }
+    }, duration);
+    return () => {
+      clearTimeout(first);
+      clearTimeout(second);
+    };
+  }, [isOpen]);
+  return {
+    height,
+    contentRef
+  };
+}
+
 const shouldIncludeFeature = (supportedFeatures, feature) => supportedFeatures.indexOf(feature) >= 0;
 
 const getStylisticSetName = (feature, stylisticSetNames) => stylisticSetNames.find(({
@@ -40,31 +73,65 @@ const getFeatureName = (feature, stylisticSetNames) => {
 _TypeTesterFeatures_stylisticSetName !== void 0 ? _TypeTesterFeatures_stylisticSetName : (_TypeTesterFeatures_stylisticSetName = require("../../__generated__/TypeTesterFeatures_stylisticSetName.graphql"), _TypeTesterFeatures_stylisticSetName.hash && _TypeTesterFeatures_stylisticSetName.hash !== "8420321d8ddf9b3846450d609586db21" && console.error("The definition of 'TypeTesterFeatures_stylisticSetName' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_stylisticSetName);
 
 const TypeTesterFeatures = ({
+  id,
   fontStyle,
-  showFeatures,
-  features,
-  toggleFeature,
+  features: showFeatures,
   config
 }) => {
-  var _config$openTypeFeatu, _config$openTypeFeatu2;
-
-  const renderFeature = feature => /*#__PURE__*/_react.default.createElement("button", {
-    key: feature,
-    className: "type-tester__features__button",
-    type: "button",
-    onClick: () => toggleFeature(feature)
-  }, /*#__PURE__*/_react.default.createElement(_TypeTesterBullet.default, {
-    checked: features.indexOf(feature) >= 0,
-    config: config
-  }), ' ', /*#__PURE__*/_react.default.createElement("span", {
-    className: "type-tester__features__name"
-  }, getFeatureName(feature, fontStyle.fontFeatures.stylisticSetNames)));
+  var _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$openTypeFeatu4;
+
+  const {
+    features,
+    toggleFeature,
+    featuresOpen
+  } = (0, _TypeTesterState.default)({
+    id
+  });
+
+  const renderFeature = feature => {
+    var _fontStyle$fontFeatur;
+
+    return /*#__PURE__*/_react.default.createElement("button", {
+      key: feature,
+      className: "type-tester__features__button",
+      type: "button",
+      onClick: () => toggleFeature(feature)
+    }, /*#__PURE__*/_react.default.createElement(_TypeTesterBullet.default, {
+      checked: features.indexOf(feature) >= 0,
+      config: config
+    }), ' ', /*#__PURE__*/_react.default.createElement("span", {
+      className: "type-tester__features__name"
+    }, getFeatureName(feature, (_fontStyle$fontFeatur = fontStyle.fontFeatures) === null || _fontStyle$fontFeatur === void 0 ? void 0 : _fontStyle$fontFeatur.stylisticSetNames)));
+  };
+
+  let featuresColumns;
 
   if ((_config$openTypeFeatu = config.openTypeFeatures) !== null && _config$openTypeFeatu !== void 0 && (_config$openTypeFeatu2 = _config$openTypeFeatu.columns) !== null && _config$openTypeFeatu2 !== void 0 && _config$openTypeFeatu2.length) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, config.openTypeFeatures.columns.map(column => /*#__PURE__*/_react.default.createElement("div", null, column.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, feature)).map(renderFeature))));
+    featuresColumns = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, config.openTypeFeatures.columns.map((column, i) => /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, column.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, feature)).map(renderFeature))));
+  } else {
+    featuresColumns = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showFeatures.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, feature)).map(renderFeature));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showFeatures.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, feature)).map(renderFeature));
+  const {
+    height: featuresHeight,
+    contentRef: featuresContentRef
+  } = useHeightAnimation(featuresOpen, 300);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__features-container",
+    onMouseDown: e => e.preventDefault(),
+    "data-open": featuresOpen,
+    style: {
+      height: featuresHeight,
+      overflow: featuresHeight === 'auto' ? 'visible' : 'hidden',
+      transition: "height 300ms ease-out"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: featuresContentRef,
+    className: "type-tester__features",
+    "data-columns": (_config$openTypeFeatu3 = config.openTypeFeatures) !== null && _config$openTypeFeatu3 !== void 0 && (_config$openTypeFeatu4 = _config$openTypeFeatu3.columns) !== null && _config$openTypeFeatu4 !== void 0 && _config$openTypeFeatu4.length ? 'set' : 'auto'
+  }, featuresColumns));
 };
 
 var _default = (0, _reactRelay.createFragmentContainer)(TypeTesterFeatures, {

package/dist/components/TypeTester/TypeTesterFeaturesButton.js

@@ -23,7 +23,7 @@ const TypeTesterFeaturesButton = ({
 }, /*#__PURE__*/_react.default.createElement("button", {
   className: "type-tester__features-button__button",
   type: "button",
-  onClick: toggleFeaturesOpen
+  onClick: () => toggleFeaturesOpen()
 }, /*#__PURE__*/_react.default.createElement("span", {
   className: "type-tester__features-button__text"
 }, "OT Features"), ' ', featuresOpen ? /*#__PURE__*/_react.default.createElement(_CarrotUp.default, null) : /*#__PURE__*/_react.default.createElement(_CarrotDown.default, null)));

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

@@ -0,0 +1,8 @@
+import { TypeTesterFloatingToolbar_testers } from '__generated__/TypeTesterFloatingToolbar_testers.graphql';
+interface TypeTesterFloatingToolbar_props {
+    testers: TypeTesterFloatingToolbar_testers;
+    features: readonly string[] | null | undefined;
+    onToolbarOpenClose?: (open: boolean) => void;
+}
+declare const _default: import("react-relay").Container<TypeTesterFloatingToolbar_props>;
+export default _default;