fontdue-js 2.0.0-alpha8 → 2.0.0

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

@@ -5,4 +5,5 @@ export type LineHeight = number;
 export type Features = string[];
 export type Alignment = 'left' | 'center' | 'right';
 export type Direction = 'ltr' | 'rtl';
+export type TypeTesterAxesPosition = 'auto' | 'features-panel' | 'inline' | 'above';
 export type TypeTesterMode = 'local' | 'group';

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

@@ -13,12 +13,6 @@ declare const useFeaturesData: ({ fontStyle }: useFeatures_props) => {
         }[];
         readonly supportedFeatures: readonly string[];
     };
-    variableAxes: readonly {
-        readonly axis: string;
-        readonly maxValue: number;
-        readonly minValue: number;
-        readonly name: string;
-    }[] | null;
     " $fragmentType": "useFeaturesData_fontStyle";
 };
 export default useFeaturesData;

package/dist/components/TypeTester/useFeaturesData.js

@@ -19,7 +19,7 @@ const useFeaturesData = _ref2 => {
   let {
     fontStyle
   } = _ref2;
-  const data = (0, _reactRelay.useFragment)(_useFeaturesData_fontStyle !== void 0 ? _useFeaturesData_fontStyle : (_useFeaturesData_fontStyle = require("../../__generated__/useFeaturesData_fontStyle.graphql"), _useFeaturesData_fontStyle.hash && _useFeaturesData_fontStyle.hash !== "f698c938cad6a351aaba65d33ce650d2" && console.error("The definition of 'useFeaturesData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFeaturesData_fontStyle), fontStyle);
+  const data = (0, _reactRelay.useFragment)(_useFeaturesData_fontStyle !== void 0 ? _useFeaturesData_fontStyle : (_useFeaturesData_fontStyle = require("../../__generated__/useFeaturesData_fontStyle.graphql"), _useFeaturesData_fontStyle.hash && _useFeaturesData_fontStyle.hash !== "3c48a87b1b19f52e3dda10fc11f0030a" && console.error("The definition of 'useFeaturesData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFeaturesData_fontStyle), fontStyle);
   const featureNames = ((_data$fontFeatures = data.fontFeatures) === null || _data$fontFeatures === void 0 ? void 0 : _data$fontFeatures.supportedFeatures.reduce((acc, feature) => {
     let featureName = feature;
     if (_features.default.hasOwnProperty(feature)) {

package/dist/fontdue.css

@@ -414,7 +414,7 @@ div[data-component=TypeTesters] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  margin-right: 20px;
+  white-space: nowrap;
 }
 .type-tester__edit-all:active, .type-tester__edit-all:focus {
   outline: none;
@@ -422,6 +422,9 @@ div[data-component=TypeTesters] {
 .type-tester__edit-all:not(:disabled) {
   cursor: pointer;
 }
+.type-tester__edit-all:not(:last-child) {
+  margin-right: 20px;
+}
 @media (max-width: 899px) {
   .type-tester__edit-all {
     display: none;
@@ -430,11 +433,14 @@ div[data-component=TypeTesters] {
 .type-tester__name {
   margin-right: 1em;
 }
+.type-tester__toolbar .type-tester__variable-axes {
+  margin-right: 20px;
+}
 .type-tester__toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   position: relative;
   z-index: 2;
   margin-top: 10px;
@@ -449,6 +455,9 @@ div[data-component=TypeTesters] {
   justify-content: space-between;
   flex: 1;
 }
+.type-tester__toolbar__tools:not(:last-child) {
+  margin-right: 20px;
+}
 .type-tester[data-shy=hover] .type-tester__toolbar__tools, .type-tester[data-shy=focus] .type-tester__toolbar__tools {
   opacity: 0;
   pointer-events: none;
@@ -544,7 +553,7 @@ div[data-component=TypeTesters] {
 .type-tester__slider__handle:hover {
   background-color: currentcolor;
 }
-.type-tester__features-select {
+.type-tester__features-select:not(:last-child) {
   margin-right: 20px;
 }
 @media (max-width: 899px) {
@@ -553,9 +562,11 @@ div[data-component=TypeTesters] {
   }
 }
 .type-tester__features-button {
-  margin-right: 20px;
   white-space: nowrap;
 }
+.type-tester__features-button:not(:last-child) {
+  margin-right: 20px;
+}
 @media (max-width: 899px) {
   .type-tester__features-button {
     display: none;
@@ -584,6 +595,9 @@ div[data-component=TypeTesters] {
   font-size: 18px;
   vertical-align: middle;
 }
+.type-tester__features-container .type-tester__variable-axes {
+  padding-bottom: 10px;
+}
 .type-tester__features {
   position: relative;
   z-index: 1;
@@ -627,11 +641,13 @@ div[data-component=TypeTesters] {
 .type-tester__features[data-selection-style=checkbox] .type-tester__features__button {
   margin-bottom: 5px;
 }
+.type-tester > .type-tester__variable-axes:first-child {
+  margin-top: 10px;
+}
 .type-tester__variable-axes {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   grid-gap: 10px 20px;
-  padding-bottom: 10px;
 }
 .type-tester__variable-axes__axis {
   width: 100%;
@@ -645,12 +661,17 @@ div[data-component=TypeTesters] {
   text-align: right;
   font-feature-settings: "tnum" 1;
 }
+.type-tester__variable-axes__name {
+  white-space: nowrap;
+}
 .type-tester__variable-axes__slider {
   flex: 1;
-  margin-right: 20px;
+  display: flex;
 }
 .type-tester__variable-axes .type-tester__slider__track {
   max-width: none;
+  min-width: 50px;
+  flex: 1;
 }
 .type-tester__bullet {
   margin-right: 5px;

package/package.json

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