fontdue-js 0.1.0-alpha10 → 0.1.0-alpha14

package/dist/__generated__/TestFontsForm_Query.graphql.js

@@ -28,8 +28,8 @@ fragment TestFontsForm_viewer on Viewer {
     id
   }
   settings {
-    eulaAgreementLabel
-    newsletterOptInLabel
+    eulaAgreementLabel(format: HTML)
+    newsletterOptInLabel(format: HTML)
   }
   testFonts {
     archiveUrl
@@ -43,7 +43,12 @@ const node = function () {
     "kind": "ScalarField",
     "name": "id",
     "storageKey": null
-  };
+  },
+      v1 = [{
+    "kind": "Literal",
+    "name": "format",
+    "value": "HTML"
+  }];
   return {
     "fragment": {
       "argumentDefinitions": [],
@@ -122,16 +127,20 @@ const node = function () {
           "plural": false,
           "selections": [{
             "alias": null,
-            "args": null,
+            "args": v1
+            /*: any*/
+            ,
             "kind": "ScalarField",
             "name": "eulaAgreementLabel",
-            "storageKey": null
+            "storageKey": "eulaAgreementLabel(format:\"HTML\")"
           }, {
             "alias": null,
-            "args": null,
+            "args": v1
+            /*: any*/
+            ,
             "kind": "ScalarField",
             "name": "newsletterOptInLabel",
-            "storageKey": null
+            "storageKey": "newsletterOptInLabel(format:\"HTML\")"
           }],
           "storageKey": null
         }, {
@@ -156,12 +165,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "878f0047db453a740384a7e7f7d67e4a",
+      "cacheID": "598b43f60c1a9c3b5284c2b0532eec1d",
       "id": null,
       "metadata": {},
       "name": "TestFontsForm_Query",
       "operationKind": "query",
-      "text": "query TestFontsForm_Query {\n  viewer {\n    ...TestFontsForm_viewer\n    id\n  }\n}\n\nfragment TestFontsForm_viewer on Viewer {\n  currentOrder {\n    customer {\n      name\n      email\n      id\n    }\n    id\n  }\n  settings {\n    eulaAgreementLabel\n    newsletterOptInLabel\n  }\n  testFonts {\n    archiveUrl\n  }\n}\n"
+      "text": "query TestFontsForm_Query {\n  viewer {\n    ...TestFontsForm_viewer\n    id\n  }\n}\n\nfragment TestFontsForm_viewer on Viewer {\n  currentOrder {\n    customer {\n      name\n      email\n      id\n    }\n    id\n  }\n  settings {\n    eulaAgreementLabel(format: HTML)\n    newsletterOptInLabel(format: HTML)\n  }\n  testFonts {\n    archiveUrl\n  }\n}\n"
     }
   };
 }();

package/dist/__generated__/TestFontsForm_viewer.graphql.js

@@ -9,81 +9,93 @@ exports.default = void 0;
 
 /* eslint-disable */
 // @ts-nocheck
-const node = {
-  "argumentDefinitions": [],
-  "kind": "Fragment",
-  "metadata": null,
-  "name": "TestFontsForm_viewer",
-  "selections": [{
-    "alias": null,
-    "args": null,
-    "concreteType": "Order",
-    "kind": "LinkedField",
-    "name": "currentOrder",
-    "plural": false,
+const node = function () {
+  var v0 = [{
+    "kind": "Literal",
+    "name": "format",
+    "value": "HTML"
+  }];
+  return {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "TestFontsForm_viewer",
     "selections": [{
       "alias": null,
       "args": null,
-      "concreteType": "Customer",
+      "concreteType": "Order",
       "kind": "LinkedField",
-      "name": "customer",
+      "name": "currentOrder",
       "plural": false,
       "selections": [{
         "alias": null,
         "args": null,
-        "kind": "ScalarField",
-        "name": "name",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "email",
+        "concreteType": "Customer",
+        "kind": "LinkedField",
+        "name": "customer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "email",
+          "storageKey": null
+        }],
         "storageKey": null
       }],
       "storageKey": null
-    }],
-    "storageKey": null
-  }, {
-    "alias": null,
-    "args": null,
-    "concreteType": "Settings",
-    "kind": "LinkedField",
-    "name": "settings",
-    "plural": false,
-    "selections": [{
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "eulaAgreementLabel",
-      "storageKey": null
     }, {
       "alias": null,
       "args": null,
-      "kind": "ScalarField",
-      "name": "newsletterOptInLabel",
+      "concreteType": "Settings",
+      "kind": "LinkedField",
+      "name": "settings",
+      "plural": false,
+      "selections": [{
+        "alias": null,
+        "args": v0
+        /*: any*/
+        ,
+        "kind": "ScalarField",
+        "name": "eulaAgreementLabel",
+        "storageKey": "eulaAgreementLabel(format:\"HTML\")"
+      }, {
+        "alias": null,
+        "args": v0
+        /*: any*/
+        ,
+        "kind": "ScalarField",
+        "name": "newsletterOptInLabel",
+        "storageKey": "newsletterOptInLabel(format:\"HTML\")"
+      }],
       "storageKey": null
-    }],
-    "storageKey": null
-  }, {
-    "alias": null,
-    "args": null,
-    "concreteType": "TestFonts",
-    "kind": "LinkedField",
-    "name": "testFonts",
-    "plural": false,
-    "selections": [{
+    }, {
       "alias": null,
       "args": null,
-      "kind": "ScalarField",
-      "name": "archiveUrl",
+      "concreteType": "TestFonts",
+      "kind": "LinkedField",
+      "name": "testFonts",
+      "plural": false,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "archiveUrl",
+        "storageKey": null
+      }],
       "storageKey": null
     }],
-    "storageKey": null
-  }],
-  "type": "Viewer",
-  "abstractKey": null
-};
-node.hash = '843da38f2f0593804778f3894731351d';
+    "type": "Viewer",
+    "abstractKey": null
+  };
+}();
+
+node.hash = '4b3632aa1b6b2a5525ec749ab67f1cde';
 var _default = node;
 exports.default = _default;

package/dist/components/FontdueProvider/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Config } from '../ConfigContext';
 import { Components } from '../ComponentsContext';
-interface FontdueProviderProps {
+export interface FontdueProvider_props {
     url: string;
     config?: Config;
     components?: Components;
 }
-declare const FontdueProvider: React.FC<FontdueProviderProps>;
+declare const FontdueProvider: React.FC<FontdueProvider_props>;
 export default FontdueProvider;

package/dist/components/NewsletterSignup/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 interface NewsletterSignup_props {
     optInLabel?: string;
+    buttonLabel?: string;
+    optInCheckboxChecked?: boolean;
     title?: string;
     intro?: string;
 }

package/dist/components/NewsletterSignup/index.js

@@ -25,12 +25,14 @@ const updateCustomerMutation = _NewsletterSignupUpdateCustomerMutation !== void
 
 const NewsletterSignup = ({
   optInLabel,
+  buttonLabel = 'Subscribe',
+  optInCheckboxChecked = false,
   title,
   intro
 }) => {
   const [name, setName] = (0, _react.useState)('');
   const [email, setEmail] = (0, _react.useState)('');
-  const [newsletterOptIn, setNewsletterOptIn] = (0, _react.useState)(false);
+  const [newsletterOptIn, setNewsletterOptIn] = (0, _react.useState)(optInCheckboxChecked);
   const [error, setError] = (0, _react.useState)(null);
   const [submitting, setSubmitting] = (0, _react.useState)(false);
   const [submitted, setSubmitted] = (0, _react.useState)(false);
@@ -123,7 +125,7 @@ const NewsletterSignup = ({
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "submit-button",
     disabled: submitting || !newsletterOptIn
-  }, submitting ? 'Submitting' : 'Subscribe', /*#__PURE__*/_react.default.createElement("span", {
+  }, submitting ? 'Submitting...' : buttonLabel, /*#__PURE__*/_react.default.createElement("span", {
     className: "submit-button__arrow"
   }, ' →')))));
 };

package/dist/components/Root/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FontdueProvider_props } from '../FontdueProvider';
+declare const Root: (props: FontdueProvider_props) => JSX.Element;
+export default Root;

package/dist/components/Root/index.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 
+var _uuid = require("uuid");
+
 var _utils = require("../../utils");
 
 var _FontdueProvider = _interopRequireDefault(require("../FontdueProvider"));
@@ -34,32 +36,30 @@ const loadable = loader => (0, _reactLoadable.default)({
   }
 });
 
-const componentMap = {
-  Precart: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Precart')))),
-  BuyingOptions: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyingOptions')))),
-  AddToCartBanner: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../AddToCartBanner')))),
-  CookieNotification: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CookieNotification')))),
-  Cart: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Cart')))),
-  CartButton: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CartButton')))),
-  TypeTesters: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTesters')))),
-  TypeTester: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTester/TypeTesterStandalone')))),
-  SpecimenLink: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../SpecimenLink')))),
-  StickyNav: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StickyNav')))),
-  StoreModal: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StoreModal')))),
-  FontFamilies: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../FontFamilies')))),
-  CollectionAa: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CollectionAa')))),
-  TestFontsForm: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TestFontsForm')))),
-  NewsletterSignup: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../NewsletterSignup')))),
-  BuyButton: loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyButton'))))
-};
 const customElementMap = {
-  'fontdue-buy-button': componentMap.BuyButton,
-  'fontdue-cart-button': componentMap.CartButton,
-  'fontdue-newsletter-signup': componentMap.NewsletterSignup,
-  'fontdue-store-modal': componentMap.StoreModal,
-  'fontdue-test-fonts-form': componentMap.TestFontsForm,
-  'fontdue-type-testers': componentMap.TypeTesters,
-  'fontdue-type-tester': componentMap.TypeTester
+  // @ts-ignore
+  'fontdue-add-to-cart-banner': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../AddToCartBanner')))),
+  // @ts-ignore
+  'fontdue-buying-options': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyingOptions')))),
+  'fontdue-buy-button': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyButton')))),
+  'fontdue-cart': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Cart')))),
+  'fontdue-cart-button': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CartButton')))),
+  // @ts-ignore
+  'fontdue-collection-aa': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CollectionAa')))),
+  // @ts-ignore
+  'fontdue-cookie-notification': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CookieNotification')))),
+  'fontdue-font-families': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../FontFamilies')))),
+  'fontdue-newsletter-signup': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../NewsletterSignup')))),
+  // @ts-ignore
+  'fontdue-precart': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Precart')))),
+  // @ts-ignore
+  'fontdue-specimen-link': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../SpecimenLink')))),
+  // @ts-ignore
+  '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-testers': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTesters'))))
 };
 Object.keys(customElementMap).forEach(elementName => {
   // this might be more sophisticated in the future with a shadow DOM, etc,
@@ -69,44 +69,87 @@ Object.keys(customElementMap).forEach(elementName => {
   customElements.define(elementName, FontdueElement);
 });
 
-const renderComponent = (element, i) => {
-  const {
-    component,
-    ...data
-  } = element.dataset;
-  const Component = componentMap[component];
-
-  if (typeof Component === 'undefined') {
-    // eslint-disable-next-line no-console
-    console.warn("Tried to mount ".concat(component, " but it wasn't imported into Root"));
-    return null;
-  }
-
-  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(Component, _extends({}, data, {
-    key: i
-  })), element);
-};
-
-const renderCustomElement = (element, i) => {
+const renderCustomElement = (element, key) => {
   const Component = customElementMap[element.nodeName.toLowerCase()];
   const attributes = element.getAttributeNames();
   const props = attributes.reduce((acc, attribute) => {
-    acc[(0, _utils.kebabToCamel)(attribute)] = element.getAttribute(attribute);
+    var _element$getAttribute;
+
+    acc[(0, _utils.kebabToCamel)(attribute)] = (_element$getAttribute = element.getAttribute(attribute)) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : '';
     return acc;
   }, {});
   return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
-    key: i
+    key: key
   })), element);
 };
 
+const customElementTags = Object.keys(customElementMap);
+
+const allFontdueElements = element => customElementTags.flatMap(elementName => Array.from(element.querySelectorAll(elementName)));
+
+const getInitialElements = () => {
+  const map = new Map();
+  allFontdueElements(document.body).forEach(element => map.set(element, (0, _uuid.v4)()));
+  return map;
+};
+
 const Root = props => {
-  const componentElements = Array.from(document.querySelectorAll('[data-component]'));
-  const customElements = Object.keys(customElementMap).flatMap(elementName => Array.from(document.querySelectorAll(elementName)));
+  // use a Map here instead of an array in case we register the same element
+  // more than once (otherwise we run into issues rendering the component
+  // twice into the same element). this also gives us a way to set unique keys.
+  const [elements, setElements] = (0, _react.useState)(getInitialElements());
+  (0, _react.useEffect)(() => {
+    // watch for any new or removed fontdue elements
+    const mutationObserver = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          if (!(node instanceof HTMLElement)) return;
+          let newElements = [];
+
+          if (customElementTags.includes(node.nodeName.toLowerCase())) {
+            newElements.push(node);
+          }
+
+          newElements = newElements.concat(allFontdueElements(node));
+
+          if (newElements.length > 0) {
+            setElements(elements => {
+              const newMap = new Map(elements);
+              newElements.forEach(el => newMap.set(el, (0, _uuid.v4)()));
+              return newMap;
+            });
+          }
+        });
+        mutation.removedNodes.forEach(node => {
+          if (!(node instanceof HTMLElement)) return;
+          let removedElements = [];
+
+          if (customElementTags.includes(node.nodeName.toLowerCase())) {
+            removedElements.push(node);
+          }
+
+          removedElements = removedElements.concat(allFontdueElements(node));
+
+          if (removedElements.length > 0) {
+            setElements(elements => {
+              const newMap = new Map(elements);
+              removedElements.forEach(el => newMap.delete(el));
+              return newMap;
+            });
+          }
+        });
+      });
+    });
+    mutationObserver.observe(document.body, {
+      subtree: true,
+      childList: true
+    });
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_FontdueProvider.default, {
     url: props.url,
     config: props.config,
     components: props.components
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, componentElements.map(renderComponent)), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customElements.map(renderCustomElement)));
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Array.from(elements).map(([el, key]) => renderCustomElement(el, key))));
 };
 
 var _default = Root;

package/dist/components/StoreModal/createRouter.js

@@ -30,7 +30,6 @@ const createRouter = (store, environment) => {
     currentRoute = store.getState().storeModalRoute;
 
     if (currentRoute !== previousRoute) {
-      console.log(currentRoute);
       currentEntry = prepareRoute(currentRoute, environment);
       subscribers.forEach(cb => cb(currentEntry));
     }

package/dist/components/TestFontsForm/index.js

@@ -110,7 +110,7 @@ const TestFontsFormBase = ({
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Name *",
+    label: "Name*",
     value: name,
     onChange: value => setName(value),
     autocomplete: "name",
@@ -118,7 +118,7 @@ const TestFontsFormBase = ({
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Email *",
+    label: "Email*",
     value: email,
     onChange: value => setEmail(value),
     autocomplete: "email",
@@ -152,8 +152,11 @@ const TestFontsFormBase = ({
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "checkbox__icon"
   }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null))), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "newsletter-opt-in"
-  }, newsletterOptInLabel)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    htmlFor: "newsletter-opt-in",
+    dangerouslySetInnerHTML: {
+      __html: newsletterOptInLabel
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
     className: "submit-button",
     type: "submit",
     disabled: submitting || disabled
@@ -166,7 +169,7 @@ const TestFontsFormBase = ({
 };
 
 const TestFontsForm = (0, _reactRelay.createFragmentContainer)(TestFontsFormBase, {
-  viewer: _TestFontsForm_viewer !== void 0 ? _TestFontsForm_viewer : (_TestFontsForm_viewer = require("../../__generated__/TestFontsForm_viewer.graphql"), _TestFontsForm_viewer.hash && _TestFontsForm_viewer.hash !== "843da38f2f0593804778f3894731351d" && console.error("The definition of 'TestFontsForm_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_viewer)
+  viewer: _TestFontsForm_viewer !== void 0 ? _TestFontsForm_viewer : (_TestFontsForm_viewer = require("../../__generated__/TestFontsForm_viewer.graphql"), _TestFontsForm_viewer.hash && _TestFontsForm_viewer.hash !== "4b3632aa1b6b2a5525ec749ab67f1cde" && console.error("The definition of 'TestFontsForm_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_viewer)
 });
 
 const TestFontsFormFetcher = params => {

package/dist/components/TypeTester/index.js

@@ -124,9 +124,9 @@ const TypeTesterComponent = ({
         config: config
       }), ((_config$priceText = config.priceText) !== null && _config$priceText !== void 0 ? _config$priceText : false) && fontStyle.sku && /*#__PURE__*/_react.default.createElement("div", {
         className: "type-tester__toolbar__price-text"
-      }, "From ", /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+      }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
         sku: fontStyle.sku
-      }), " excl. VAT"), /*#__PURE__*/_react.default.createElement("div", {
+      })), /*#__PURE__*/_react.default.createElement("div", {
         className: "type-tester__toolbar__tools"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "type-tester__slider"