feat: inherit font family (#55)

* add inherit to fonts
* embed script update use of font inherit value

Author: lengyel-arpad85

frontend/app/components/ColorPicker.tsx

@@ -53,7 +53,7 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
 
     return (
       <div className={cx('flex relative', className)} ref={ref} {...props}>
-        <input type="hidden" name={name} value={value} id={internalId} />
+        <input type="hidden" name={name} value={value ?? ''} id={internalId} />
         <div className="flex p-3">
           {colorPresets.map((color) => (
             <div

frontend/app/components/Select.tsx

@@ -15,6 +15,7 @@ type SelectProps = {
   placeholder: string
   name?: string
   label?: string
+  tooltip?: string
   disabled?: boolean
   required?: boolean
   error?: string | string[]
@@ -31,6 +32,7 @@ export const Select = ({
   name,
   placeholder,
   label,
+  tooltip,
   error,
   disabled = false,
   required = false,
@@ -75,10 +77,17 @@ export const Select = ({
       disabled={disabled}
     >
       {name ? (
-        <input type="hidden" name={name} value={internalValue.value} />
+        <input type="hidden" name={name} value={internalValue.value ?? ''} />
       ) : null}
       <div className={cx('flex flex-col relative w-full', label && 'mt-1')}>
-        {label && <Label className="w-full mb-px">{label}</Label>}
+        {label && (
+          <Label
+            className={cx('w-full mb-px', tooltip && 'flex')}
+            tooltip={tooltip}
+          >
+            {label}
+          </Label>
+        )}
         <div
           className={cx(
             'relative w-full cursor-default overflow-hidden bg-white text-left outline-0 focus:outline-none sm:text-sm h-9',

frontend/app/components/UploadControl.tsx

@@ -89,7 +89,7 @@ export const UploadControl = ({
         ref={fileInputRef}
         onChange={handleFileChange}
       />
-      <input type="hidden" name={name} value={value} />
+      <input type="hidden" name={name} value={value ?? ''} />
       <Button
         className="max-h-8"
         aria-label="Upload image"

frontend/app/components/compositions/ToolConfig.tsx

@@ -27,6 +27,7 @@ import {
   UploadControl,
   FontSize
 } from '../index.js'
+import { tooltips } from '~/lib/tooltips.js'
 
 type ToolConfigProps = {
   type?: string
@@ -257,6 +258,7 @@ const BannerConfig = ({
             withBorder
             name="bannerFontName"
             label="Font"
+            tooltip={tooltips.font}
             placeholder="Select Font"
             options={fontOptions}
             value={defaultFontValue}
@@ -269,7 +271,7 @@ const BannerConfig = ({
           <FontSize
             name="bannerFontSize"
             label="Size"
-            value={config?.bannerFontSize}
+            value={config?.bannerFontSize || 16}
             updateSize={(value) =>
               setToolConfig({ ...config, bannerFontSize: Number(value ?? 16) })
             }

frontend/app/components/modals/NewVersion.tsx

@@ -65,7 +65,7 @@ export const NewVersionModal = ({
                           name="version"
                           label="Version title"
                           placeholder="Default"
-                          value={versionName}
+                          value={versionName ?? ''}
                           error={errors?.fieldErrors.version}
                           onChange={(e) => {
                             const newValue = e.target.value

frontend/app/lib/presets.ts

@@ -12,7 +12,13 @@ export const backgroundColorPresets = [
   '#f69656',
   '#7f76b2'
 ]
-export const FontsType = ['Arial', 'Open Sans', 'Cookie', 'Titillium Web']
+export const FontsType = [
+  'Arial',
+  'Inherit',
+  'Open Sans',
+  'Cookie',
+  'Titillium Web'
+]
 
 export const bgColors = {
   button: 'from-wm-green to-wm-green-fade',

frontend/app/lib/tooltips.ts

@@ -6,5 +6,6 @@ export const tooltips = {
   widget:
     'This widget enables one-time payments for your website. It appears in the lower right corner, visible to all visitors regardless of their Web Monetization status. The title, text, and styling of the displayed message are customizable.',
   scriptModal:
-    'Copy your script and insert it just before the closing </body> tag on your website, or place it within a script type element if you\'re using a site management software (ex: WordPress, etc). <br />Be sure to review and select all the options in the "Include" section, that you want to display on your website.'
+    'Copy your script and insert it just before the closing </body> tag on your website, or place it within a script type element if you\'re using a site management software (ex: WordPress, etc). <br />Be sure to review and select all the options in the "Include" section, that you want to display on your website.',
+  font: 'Setting the Font to Inherit, will make the component use the font from the website it is added to.'
 }

frontend/app/routes/create.$type.tsx

@@ -213,9 +213,13 @@ export default function Create() {
             <input
               type="hidden"
               name="fullconfig"
-              value={JSON.stringify(fullConfig)}
+              value={JSON.stringify(fullConfig ?? {})}
+            />
+            <input
+              type="hidden"
+              name="version"
+              value={selectedVersion || 'default'}
             />
-            <input type="hidden" name="version" value={selectedVersion} />
             <div className="px-6 pt-5">
               <ErrorPanel errors={response?.errors.message} />
             </div>

frontend/script/index.tsx

@@ -95,11 +95,16 @@ const getFontFamily = (family: string, forElement: string = 'banner') => {
     currentFontFamily.remove()
   }
 
-  let selectedFont = 'Arial'
+  let selectedFont = 'inherit'
   if (allowedFonts.indexOf(family) != -1) {
     selectedFont = family
   }
 
+  // skip injecting of font if set to inherit
+  if (selectedFont == 'inherit') {
+    return
+  }
+
   const styleObj = document.createElement('link') as HTMLLinkElement
   styleObj.id = `wmt-font-family-${forElement}`
   styleObj.rel = 'stylesheet'
@@ -138,7 +143,10 @@ const drawElement = (
     switch (type) {
       case 'widget': {
         const font = getFontFamily(config.widgetFontName, 'widget')
-        shadowHost.style.setProperty('--wmt-widget-font', font.selectedFont)
+        shadowHost.style.setProperty(
+          '--wmt-widget-font',
+          font?.selectedFont ? font.selectedFont : 'inherit'
+        )
         shadowHost.style.setProperty(
           '--wmt-widget-font-size',
           config.widgetFontSize
@@ -147,15 +155,20 @@ const drawElement = (
         const element = drawWidget(walletAddress, config)
         shadowRoot.appendChild(css)
         shadowRoot.appendChild(element)
-        // font family needs to be outside of the shadow DOM
-        document.body.appendChild(font.fontFamily)
+        if (font?.fontFamily) {
+          // font family needs to be outside of the shadow DOM
+          document.body.appendChild(font.fontFamily)
+        }
         document.body.appendChild(shadowHost)
         break
       }
       case 'banner':
       default:
         const font = getFontFamily(config.bannerFontName, 'banner')
-        shadowHost.style.setProperty('--wmt-banner-font', font.selectedFont)
+        shadowHost.style.setProperty(
+          '--wmt-banner-font',
+          font?.selectedFont ? font.selectedFont : 'inherit'
+        )
         shadowHost.style.setProperty(
           '--wmt-banner-font-size',
           config.bannerFontSize
@@ -166,8 +179,10 @@ const drawElement = (
           shadowRoot.appendChild(css)
           shadowRoot.appendChild(element)
         }
-        // font family needs to be outside of the shadow DOM
-        document.body.appendChild(font.fontFamily)
+        if (font?.fontFamily) {
+          // font family needs to be outside of the shadow DOM
+          document.body.appendChild(font.fontFamily)
+        }
         document.body.appendChild(shadowHost)
     }
   }