fontdue-js 2.0.0-alpha9 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
## 2.0.0
|
|
2
2
|
|
|
3
|
-
- __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.
|
|
3
|
+
- __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.
|
|
4
|
+
- Adds `variableAxesPosition` to type tester config
|
|
4
5
|
|
|
5
6
|
## 1.12.3
|
|
6
7
|
|
|
7
|
-
-
|
|
8
|
+
- Fixes Stripe integration for Apple Pay
|
|
8
9
|
|
|
9
10
|
## 1.12.2
|
|
10
11
|
|
package/README.md
CHANGED
|
@@ -11,10 +11,43 @@ npm install fontdue-js@latest
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
1. Wrap the root of your project with the [`FontdueProvider`](#fontdueprovider) component. For example in a Next.js app, add it to your `app/layout.tsx` or `pages/_app.tsx`.
|
|
14
|
-
2.
|
|
14
|
+
2. If using Next.js, add an environment variable to your app `NEXT_PUBLIC_FONTDUE_URL` pointing to your Fontdue store URL. Otherwise, you can include the `url` prop on the `FontdueProvider`.
|
|
15
15
|
3. Render the [`StoreModal`](#storemodal) component so that is it available on every page.
|
|
16
16
|
4. Import the `fontdue-js/fontdue.css` CSS file. (This example uses Next.js)
|
|
17
17
|
|
|
18
|
+
### Example
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
``` shell
|
|
22
|
+
# .env.local
|
|
23
|
+
NEXT_PUBLIC_FONTDUE_URL=https://example.fontdue.com
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
// app/layout.tsx
|
|
28
|
+
import FontdueProvider from "fontdue-js/FontdueProvider";
|
|
29
|
+
import StoreModal from "fontdue-js/StoreModal";
|
|
30
|
+
import "fontdue-js/fontdue.css";
|
|
31
|
+
|
|
32
|
+
export default async function RootLayout({
|
|
33
|
+
children,
|
|
34
|
+
}: {
|
|
35
|
+
children: React.ReactNode;
|
|
36
|
+
}) {
|
|
37
|
+
return (
|
|
38
|
+
<html lang="en">
|
|
39
|
+
<body>
|
|
40
|
+
<FontdueProvider>
|
|
41
|
+
{children}
|
|
42
|
+
|
|
43
|
+
<StoreModal />
|
|
44
|
+
</FontdueProvider>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
18
51
|
For details on integrating into your Next.js app, read our [Next.js guide](https://docs.fontdue.com/nextjs)
|
|
19
52
|
|
|
20
53
|
## IDs
|
|
@@ -30,10 +30,6 @@ const TypeTesterVariableAxes = _ref => {
|
|
|
30
30
|
variableSettings[axis] = value;
|
|
31
31
|
setVariableSettings(variableSettings);
|
|
32
32
|
};
|
|
33
|
-
console.log({
|
|
34
|
-
axes,
|
|
35
|
-
variableSettings
|
|
36
|
-
});
|
|
37
33
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
38
34
|
className: "type-tester__variable-axes"
|
|
39
35
|
}, axes.map(showAxis => {
|
package/dist/fontdue.css
CHANGED
|
@@ -661,11 +661,17 @@ div[data-component=TypeTesters] {
|
|
|
661
661
|
text-align: right;
|
|
662
662
|
font-feature-settings: "tnum" 1;
|
|
663
663
|
}
|
|
664
|
+
.type-tester__variable-axes__name {
|
|
665
|
+
white-space: nowrap;
|
|
666
|
+
}
|
|
664
667
|
.type-tester__variable-axes__slider {
|
|
665
668
|
flex: 1;
|
|
669
|
+
display: flex;
|
|
666
670
|
}
|
|
667
671
|
.type-tester__variable-axes .type-tester__slider__track {
|
|
668
672
|
max-width: none;
|
|
673
|
+
min-width: 50px;
|
|
674
|
+
flex: 1;
|
|
669
675
|
}
|
|
670
676
|
.type-tester__bullet {
|
|
671
677
|
margin-right: 5px;
|
package/package.json
CHANGED