[WIP] Failed attempt at linking out to docs in help text

src/components/Doc.tsx

@@ -18,14 +18,15 @@ type DocProps = {
     'sdk-support'?: {
       [key: string]: typeof headers
     }
+    docUrl?: string
   }
-};
+};  // & WithTranslation?
 
 export default class Doc extends React.Component<DocProps> {
   render () {
     const {fieldSpec} = this.props;
 
-    const {doc, values} = fieldSpec;
+    const {doc, values, docUrl} = fieldSpec;
     const sdkSupport = fieldSpec['sdk-support'];
 
     const renderValues = (
@@ -85,7 +86,12 @@ export default class Doc extends React.Component<DocProps> {
             </table>
           </div>
         }
+        {docUrl &&
+          <div className="SpecDoc__learn-more">
+            <a href={docUrl}  target="_blank" rel="noreferrer" onClick={() => console.log('Link clicked')}>Learn More (TODO i18n)</a>
+          </div>
+        }
       </>
     );
   }
-}
+}

src/components/ModalExport.tsx

@@ -116,13 +116,6 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
         <p>
           {t("Download a JSON style to your computer.")}
         </p>
-        <p>
-          <a href="https://docs.maptiler.com/cloud/api/authentication-key/" target="_blank" rel="noreferrer">MapTiler</a>,&nbsp;
-          <a href="https://www.thunderforest.com/docs/apikeys/" target="_blank" rel="noreferrer">ThunderForest</a>,
-          and <a href="https://docs.stadiamaps.com/authentication/" target="_blank" rel="noreferrer">Stadia Maps</a>&nbsp;
-          may require access keys or other authentication to access map tiles.
-          Refer to their documentation for details.
-        </p>
 
         <div>
           <FieldString

src/libs/field-spec-additional.ts

@@ -4,19 +4,22 @@ const spec = (t: TFunction) => ({
   maputnik: {
     maptiler_access_token: {
       label: t("MapTiler Access Token"),
-      doc: t("Public access token for MapTiler Cloud.")
+      doc: t("Public access token for MapTiler Cloud."),
+      docUrl: "https://docs.maptiler.com/cloud/api/authentication-key/"
     },
     thunderforest_access_token: {
       label: t("Thunderforest Access Token"),
-      doc: t("Public access token for Thunderforest services.")
+      doc: t("Public access token for Thunderforest services."),
+      docUrl: "https://www.thunderforest.com/docs/apikeys/",
     },
     stadia_access_token: {
       label: t("Stadia Maps API Key"),
-      doc: t("API key for Stadia Maps.")
+      doc: t("API key for Stadia Maps."),
+      docUrl: "https://docs.stadiamaps.com/authentication/",
     },
     style_renderer: {
       label: t("Style Renderer"),
-      doc: t("Choose the default Maputnik renderer for this style."),
+      doc: t("Choose the default Maputnik renderer for this style.")
     },
   }
 })