Skip to content

Commit bf457b8

Browse files
feat: inherit font family (#55)
* add inherit to fonts * embed script update use of font inherit value
1 parent 072c4d6 commit bf457b8

File tree

9 files changed

+54
-17
lines changed

9 files changed

+54
-17
lines changed

frontend/app/components/ColorPicker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
5353

5454
return (
5555
<div className={cx('flex relative', className)} ref={ref} {...props}>
56-
<input type="hidden" name={name} value={value} id={internalId} />
56+
<input type="hidden" name={name} value={value ?? ''} id={internalId} />
5757
<div className="flex p-3">
5858
{colorPresets.map((color) => (
5959
<div

frontend/app/components/Select.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ type SelectProps = {
1515
placeholder: string
1616
name?: string
1717
label?: string
18+
tooltip?: string
1819
disabled?: boolean
1920
required?: boolean
2021
error?: string | string[]
@@ -31,6 +32,7 @@ export const Select = ({
3132
name,
3233
placeholder,
3334
label,
35+
tooltip,
3436
error,
3537
disabled = false,
3638
required = false,
@@ -75,10 +77,17 @@ export const Select = ({
7577
disabled={disabled}
7678
>
7779
{name ? (
78-
<input type="hidden" name={name} value={internalValue.value} />
80+
<input type="hidden" name={name} value={internalValue.value ?? ''} />
7981
) : null}
8082
<div className={cx('flex flex-col relative w-full', label && 'mt-1')}>
81-
{label && <Label className="w-full mb-px">{label}</Label>}
83+
{label && (
84+
<Label
85+
className={cx('w-full mb-px', tooltip && 'flex')}
86+
tooltip={tooltip}
87+
>
88+
{label}
89+
</Label>
90+
)}
8291
<div
8392
className={cx(
8493
'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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const UploadControl = ({
8989
ref={fileInputRef}
9090
onChange={handleFileChange}
9191
/>
92-
<input type="hidden" name={name} value={value} />
92+
<input type="hidden" name={name} value={value ?? ''} />
9393
<Button
9494
className="max-h-8"
9595
aria-label="Upload image"

frontend/app/components/compositions/ToolConfig.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
UploadControl,
2828
FontSize
2929
} from '../index.js'
30+
import { tooltips } from '~/lib/tooltips.js'
3031

3132
type ToolConfigProps = {
3233
type?: string
@@ -257,6 +258,7 @@ const BannerConfig = ({
257258
withBorder
258259
name="bannerFontName"
259260
label="Font"
261+
tooltip={tooltips.font}
260262
placeholder="Select Font"
261263
options={fontOptions}
262264
value={defaultFontValue}
@@ -269,7 +271,7 @@ const BannerConfig = ({
269271
<FontSize
270272
name="bannerFontSize"
271273
label="Size"
272-
value={config?.bannerFontSize}
274+
value={config?.bannerFontSize || 16}
273275
updateSize={(value) =>
274276
setToolConfig({ ...config, bannerFontSize: Number(value ?? 16) })
275277
}

frontend/app/components/modals/NewVersion.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const NewVersionModal = ({
6565
name="version"
6666
label="Version title"
6767
placeholder="Default"
68-
value={versionName}
68+
value={versionName ?? ''}
6969
error={errors?.fieldErrors.version}
7070
onChange={(e) => {
7171
const newValue = e.target.value

frontend/app/lib/presets.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@ export const backgroundColorPresets = [
1212
'#f69656',
1313
'#7f76b2'
1414
]
15-
export const FontsType = ['Arial', 'Open Sans', 'Cookie', 'Titillium Web']
15+
export const FontsType = [
16+
'Arial',
17+
'Inherit',
18+
'Open Sans',
19+
'Cookie',
20+
'Titillium Web'
21+
]
1622

1723
export const bgColors = {
1824
button: 'from-wm-green to-wm-green-fade',

frontend/app/lib/tooltips.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@ export const tooltips = {
66
widget:
77
'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.',
88
scriptModal:
9-
'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.'
9+
'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.',
10+
font: 'Setting the Font to Inherit, will make the component use the font from the website it is added to.'
1011
}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,9 +213,13 @@ export default function Create() {
213213
<input
214214
type="hidden"
215215
name="fullconfig"
216-
value={JSON.stringify(fullConfig)}
216+
value={JSON.stringify(fullConfig ?? {})}
217+
/>
218+
<input
219+
type="hidden"
220+
name="version"
221+
value={selectedVersion || 'default'}
217222
/>
218-
<input type="hidden" name="version" value={selectedVersion} />
219223
<div className="px-6 pt-5">
220224
<ErrorPanel errors={response?.errors.message} />
221225
</div>

frontend/script/index.tsx

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,16 @@ const getFontFamily = (family: string, forElement: string = 'banner') => {
9595
currentFontFamily.remove()
9696
}
9797

98-
let selectedFont = 'Arial'
98+
let selectedFont = 'inherit'
9999
if (allowedFonts.indexOf(family) != -1) {
100100
selectedFont = family
101101
}
102102

103+
// skip injecting of font if set to inherit
104+
if (selectedFont == 'inherit') {
105+
return
106+
}
107+
103108
const styleObj = document.createElement('link') as HTMLLinkElement
104109
styleObj.id = `wmt-font-family-${forElement}`
105110
styleObj.rel = 'stylesheet'
@@ -138,7 +143,10 @@ const drawElement = (
138143
switch (type) {
139144
case 'widget': {
140145
const font = getFontFamily(config.widgetFontName, 'widget')
141-
shadowHost.style.setProperty('--wmt-widget-font', font.selectedFont)
146+
shadowHost.style.setProperty(
147+
'--wmt-widget-font',
148+
font?.selectedFont ? font.selectedFont : 'inherit'
149+
)
142150
shadowHost.style.setProperty(
143151
'--wmt-widget-font-size',
144152
config.widgetFontSize
@@ -147,15 +155,20 @@ const drawElement = (
147155
const element = drawWidget(walletAddress, config)
148156
shadowRoot.appendChild(css)
149157
shadowRoot.appendChild(element)
150-
// font family needs to be outside of the shadow DOM
151-
document.body.appendChild(font.fontFamily)
158+
if (font?.fontFamily) {
159+
// font family needs to be outside of the shadow DOM
160+
document.body.appendChild(font.fontFamily)
161+
}
152162
document.body.appendChild(shadowHost)
153163
break
154164
}
155165
case 'banner':
156166
default:
157167
const font = getFontFamily(config.bannerFontName, 'banner')
158-
shadowHost.style.setProperty('--wmt-banner-font', font.selectedFont)
168+
shadowHost.style.setProperty(
169+
'--wmt-banner-font',
170+
font?.selectedFont ? font.selectedFont : 'inherit'
171+
)
159172
shadowHost.style.setProperty(
160173
'--wmt-banner-font-size',
161174
config.bannerFontSize
@@ -166,8 +179,10 @@ const drawElement = (
166179
shadowRoot.appendChild(css)
167180
shadowRoot.appendChild(element)
168181
}
169-
// font family needs to be outside of the shadow DOM
170-
document.body.appendChild(font.fontFamily)
182+
if (font?.fontFamily) {
183+
// font family needs to be outside of the shadow DOM
184+
document.body.appendChild(font.fontFamily)
185+
}
171186
document.body.appendChild(shadowHost)
172187
}
173188
}

0 commit comments

Comments
 (0)