| 1 |
/** |
| 2 |
* Hover-preview SVG mockups (block name → JSX). Inline fill/stroke — see icons.js. |
| 3 |
*/ |
| 4 |
|
| 5 |
// Fixed pixel size so the preview iframe stylesheet cannot reflow the SVG. |
| 6 |
const ROOT = { |
| 7 |
viewBox: '0 0 240 110', |
| 8 |
xmlns: 'http://www.w3.org/2000/svg', |
| 9 |
strokeLinecap: 'round', |
| 10 |
strokeLinejoin: 'round', |
| 11 |
style: { fill: 'none', stroke: 'currentColor', display: 'block', width: '224px', height: '103px', maxWidth: 'none' }, |
| 12 |
}; |
| 13 |
|
| 14 |
const FILL = { fill: 'currentColor', stroke: 'none' }; |
| 15 |
const LABEL = { fontFamily: 'sans-serif', fontSize: 15, fontWeight: 600, style: FILL }; |
| 16 |
const PLACE = { fontFamily: 'sans-serif', fontSize: 13, opacity: 0.5, style: FILL }; |
| 17 |
const VALUE = { fontFamily: 'sans-serif', fontSize: 13, opacity: 0.8, style: FILL }; |
| 18 |
const SMALL = { fontFamily: 'sans-serif', fontSize: 11, opacity: 0.65, style: FILL }; |
| 19 |
|
| 20 |
// --- shared primitives ----------------------------------------------------- |
| 21 |
|
| 22 |
const lab = ( t ) => <text x="16" y="27" { ...LABEL }>{ t }</text>; |
| 23 |
const frame = ( y, h ) => <rect x="16" y={ y } width="208" height={ h } rx="7" strokeWidth="1.6" />; |
| 24 |
const chevron = <path d="M198 59 205 66 212 59" strokeWidth="1.8" />; |
| 25 |
|
| 26 |
// --- left-of-input glyphs (≈ x28–46, vertical centre y62) ------------------ |
| 27 |
|
| 28 |
const gEnvelope = ( |
| 29 |
<g strokeWidth="1.4"> |
| 30 |
<rect x="28" y="56" width="17" height="12" rx="2" /> |
| 31 |
<path d="M28.6 57 36.5 63 44.4 57" /> |
| 32 |
</g> |
| 33 |
); |
| 34 |
const gLock = ( |
| 35 |
<g strokeWidth="1.4"> |
| 36 |
<rect x="30" y="60" width="13" height="9" rx="1.6" /> |
| 37 |
<path d="M32.6 60V58a3.9 3.9 0 0 1 7.8 0v2" /> |
| 38 |
</g> |
| 39 |
); |
| 40 |
const gGlobe = ( |
| 41 |
<g strokeWidth="1.4"> |
| 42 |
<circle cx="37" cy="62" r="7" /> |
| 43 |
<path d="M30 62h14" /> |
| 44 |
<path d="M37 55c2.4 2 2.4 12 0 14" /> |
| 45 |
<path d="M37 55c-2.4 2-2.4 12 0 14" /> |
| 46 |
</g> |
| 47 |
); |
| 48 |
const gPhone = ( |
| 49 |
<path strokeWidth="1.4" d="M31 55h2.1l1 3-1.3 1a7 7 0 0 0 3.2 3.2l1-1.3 3 1v2.1a1.3 1.3 0 0 1-1.3 1.3A9.5 9.5 0 0 1 29.7 56.3 1.3 1.3 0 0 1 31 55z" /> |
| 50 |
); |
| 51 |
const gAt = ( |
| 52 |
<g strokeWidth="1.4"> |
| 53 |
<circle cx="37" cy="62" r="2.9" /> |
| 54 |
<path d="M39.9 62c0 1.5 0 3 1.7 3 1.4 0 2.1-1.5 2.1-3.4 0-3.6-2.8-5.6-6-5.6a6.4 6.4 0 1 0 3.7 11.7" /> |
| 55 |
</g> |
| 56 |
); |
| 57 |
const gLink = ( |
| 58 |
<g strokeWidth="1.4"> |
| 59 |
<path d="M34 65 41 58" /> |
| 60 |
<path d="M35 56.6 36.5 55a3 3 0 0 1 4.2 4.2L39 61" /> |
| 61 |
<path d="M40 67.4 38.5 69a3 3 0 0 1-4.2-4.2L36 63" /> |
| 62 |
</g> |
| 63 |
); |
| 64 |
const gPerson = ( |
| 65 |
<g strokeWidth="1.4"> |
| 66 |
<circle cx="37" cy="59.4" r="2.6" /> |
| 67 |
<path d="M32.4 69c0-2.5 2-4 4.6-4s4.6 1.5 4.6 4" /> |
| 68 |
</g> |
| 69 |
); |
| 70 |
const gFlag = ( |
| 71 |
<g strokeWidth="1.4"> |
| 72 |
<path d="M32 55v14" /> |
| 73 |
<path d="M32 56h8.2l-1.8 2.3 1.8 2.3H32z" /> |
| 74 |
</g> |
| 75 |
); |
| 76 |
const gMagnifier = ( |
| 77 |
<g strokeWidth="1.4"> |
| 78 |
<circle cx="36" cy="61" r="4.4" /> |
| 79 |
<path d="M39.4 64.4 43 68" /> |
| 80 |
</g> |
| 81 |
); |
| 82 |
|
| 83 |
// --- right-of-input picker glyphs ------------------------------------------ |
| 84 |
|
| 85 |
const gCalendar = ( |
| 86 |
<g strokeWidth="1.4"> |
| 87 |
<rect x="196" y="55" width="16" height="14" rx="2" /> |
| 88 |
<path d="M196 59.5h16" /> |
| 89 |
<path d="M200 53v3M208 53v3" /> |
| 90 |
</g> |
| 91 |
); |
| 92 |
const gClock = ( |
| 93 |
<g strokeWidth="1.4"> |
| 94 |
<circle cx="205" cy="62" r="6.8" /> |
| 95 |
<path d="M205 58v4.2l2.6 1.6" /> |
| 96 |
</g> |
| 97 |
); |
| 98 |
|
| 99 |
// --- control renderers ----------------------------------------------------- |
| 100 |
|
| 101 |
const textInput = ( label, placeholder, glyph = null ) => ( |
| 102 |
<svg { ...ROOT }> |
| 103 |
{ lab( label ) } |
| 104 |
{ frame( 42, 40 ) } |
| 105 |
{ glyph } |
| 106 |
<text x={ glyph ? 54 : 30 } y="67" { ...PLACE }>{ placeholder }</text> |
| 107 |
</svg> |
| 108 |
); |
| 109 |
|
| 110 |
const selectInput = ( label, value, glyph = null ) => ( |
| 111 |
<svg { ...ROOT }> |
| 112 |
{ lab( label ) } |
| 113 |
{ frame( 42, 40 ) } |
| 114 |
{ glyph } |
| 115 |
<text x={ glyph ? 54 : 30 } y="67" { ...VALUE }>{ value }</text> |
| 116 |
{ chevron } |
| 117 |
</svg> |
| 118 |
); |
| 119 |
|
| 120 |
const searchSelect = ( label, value ) => ( |
| 121 |
<svg { ...ROOT }> |
| 122 |
{ lab( label ) } |
| 123 |
{ frame( 42, 40 ) } |
| 124 |
{ gMagnifier } |
| 125 |
<text x="54" y="67" { ...VALUE }>{ value }</text> |
| 126 |
{ chevron } |
| 127 |
</svg> |
| 128 |
); |
| 129 |
|
| 130 |
const multiSelect = ( label, chips ) => ( |
| 131 |
<svg { ...ROOT }> |
| 132 |
{ lab( label ) } |
| 133 |
{ frame( 42, 40 ) } |
| 134 |
{ chips.map( ( c, i ) => { |
| 135 |
const x = 28 + i * 76; |
| 136 |
return ( |
| 137 |
<g key={ i }> |
| 138 |
<rect x={ x } y="52" width="70" height="20" rx="10" strokeWidth="1.3" /> |
| 139 |
<text x={ x + 12 } y="66" { ...VALUE }>{ c }</text> |
| 140 |
</g> |
| 141 |
); |
| 142 |
} ) } |
| 143 |
{ chevron } |
| 144 |
</svg> |
| 145 |
); |
| 146 |
|
| 147 |
const textareaInput = ( label ) => ( |
| 148 |
<svg { ...ROOT }> |
| 149 |
{ lab( label ) } |
| 150 |
{ frame( 40, 58 ) } |
| 151 |
<line x1="30" y1="56" x2="210" y2="56" strokeWidth="1.3" opacity="0.45" /> |
| 152 |
<line x1="30" y1="68" x2="210" y2="68" strokeWidth="1.3" opacity="0.45" /> |
| 153 |
<line x1="30" y1="80" x2="150" y2="80" strokeWidth="1.3" opacity="0.45" /> |
| 154 |
</svg> |
| 155 |
); |
| 156 |
|
| 157 |
const wysiwygInput = ( label ) => ( |
| 158 |
<svg { ...ROOT }> |
| 159 |
{ lab( label ) } |
| 160 |
{ frame( 40, 58 ) } |
| 161 |
<line x1="16" y1="56" x2="224" y2="56" strokeWidth="1.3" /> |
| 162 |
<line x1="28" y1="48" x2="38" y2="48" strokeWidth="1.6" /> |
| 163 |
<line x1="46" y1="48" x2="56" y2="48" strokeWidth="1.6" /> |
| 164 |
<line x1="64" y1="48" x2="74" y2="48" strokeWidth="1.6" /> |
| 165 |
<line x1="30" y1="70" x2="210" y2="70" strokeWidth="1.3" opacity="0.45" /> |
| 166 |
<line x1="30" y1="82" x2="150" y2="82" strokeWidth="1.3" opacity="0.45" /> |
| 167 |
</svg> |
| 168 |
); |
| 169 |
|
| 170 |
const pickerInput = ( label, placeholder, rightGlyph ) => ( |
| 171 |
<svg { ...ROOT }> |
| 172 |
{ lab( label ) } |
| 173 |
{ frame( 42, 40 ) } |
| 174 |
<text x="30" y="67" { ...PLACE }>{ placeholder }</text> |
| 175 |
{ rightGlyph } |
| 176 |
</svg> |
| 177 |
); |
| 178 |
|
| 179 |
const colorInput = ( label ) => ( |
| 180 |
<svg { ...ROOT }> |
| 181 |
{ lab( label ) } |
| 182 |
{ frame( 42, 40 ) } |
| 183 |
<rect x="29" y="54" width="16" height="16" rx="3" style={ FILL } opacity="0.85" /> |
| 184 |
<text x="56" y="67" { ...VALUE }>#3858E9</text> |
| 185 |
</svg> |
| 186 |
); |
| 187 |
|
| 188 |
const checkboxInput = ( label, optionText ) => ( |
| 189 |
<svg { ...ROOT }> |
| 190 |
{ lab( label ) } |
| 191 |
<rect x="16" y="48" width="18" height="18" rx="4" strokeWidth="1.6" /> |
| 192 |
<path d="M20 57.5 23 60.5 30 53.5" strokeWidth="1.6" /> |
| 193 |
<text x="44" y="62" { ...VALUE }>{ optionText }</text> |
| 194 |
</svg> |
| 195 |
); |
| 196 |
|
| 197 |
const checkboxGroup = ( label, options ) => ( |
| 198 |
<svg { ...ROOT }> |
| 199 |
{ lab( label ) } |
| 200 |
{ options.map( ( o, i ) => { |
| 201 |
const y = 42 + i * 22; |
| 202 |
return ( |
| 203 |
<g key={ i }> |
| 204 |
<rect x="16" y={ y } width="15" height="15" rx="3.5" strokeWidth="1.5" /> |
| 205 |
{ o.checked && <path d={ `M19.5 ${ y + 7.5 } 22 ${ y + 10 } 27.5 ${ y + 4 }` } strokeWidth="1.5" /> } |
| 206 |
<text x="40" y={ y + 12 } { ...VALUE }>{ o.label }</text> |
| 207 |
</g> |
| 208 |
); |
| 209 |
} ) } |
| 210 |
</svg> |
| 211 |
); |
| 212 |
|
| 213 |
const radioInput = ( label, options ) => ( |
| 214 |
<svg { ...ROOT }> |
| 215 |
{ lab( label ) } |
| 216 |
{ options.map( ( o, i ) => { |
| 217 |
const cy = 50 + i * 22; |
| 218 |
return ( |
| 219 |
<g key={ i }> |
| 220 |
<circle cx="24" cy={ cy } r="7.5" strokeWidth="1.5" /> |
| 221 |
{ o.selected && <circle cx="24" cy={ cy } r="3.4" style={ FILL } /> } |
| 222 |
<text x="40" y={ cy + 4.5 } { ...VALUE }>{ o.label }</text> |
| 223 |
</g> |
| 224 |
); |
| 225 |
} ) } |
| 226 |
</svg> |
| 227 |
); |
| 228 |
|
| 229 |
const headingPreview = ( text ) => ( |
| 230 |
<svg { ...ROOT }> |
| 231 |
<text x="16" y="44" fontFamily="sans-serif" fontSize="20" fontWeight="700" style={ FILL }>{ text }</text> |
| 232 |
<line x1="16" y1="56" x2="150" y2="56" strokeWidth="2" /> |
| 233 |
</svg> |
| 234 |
); |
| 235 |
|
| 236 |
const uploadInput = ( label ) => ( |
| 237 |
<svg { ...ROOT }> |
| 238 |
{ lab( label ) } |
| 239 |
<rect x="16" y="40" width="208" height="56" rx="7" strokeWidth="1.6" strokeDasharray="5 4" /> |
| 240 |
<path d="M120 76V58" strokeWidth="1.6" /> |
| 241 |
<path d="M114 64 120 58 126 64" strokeWidth="1.6" /> |
| 242 |
<text x="120" y="89" textAnchor="middle" { ...SMALL }>Drop a file or browse</text> |
| 243 |
</svg> |
| 244 |
); |
| 245 |
|
| 246 |
const avatarPreview = ( label ) => ( |
| 247 |
<svg { ...ROOT }> |
| 248 |
{ lab( label ) } |
| 249 |
<circle cx="42" cy="68" r="16" strokeWidth="1.6" /> |
| 250 |
<circle cx="42" cy="63" r="5" strokeWidth="1.4" /> |
| 251 |
<path d="M33 78c1.4-3.6 16.6-3.6 18 0" strokeWidth="1.4" /> |
| 252 |
<rect x="70" y="60" width="86" height="17" rx="8.5" strokeWidth="1.4" /> |
| 253 |
<text x="113" y="72" textAnchor="middle" { ...VALUE }>Upload</text> |
| 254 |
</svg> |
| 255 |
); |
| 256 |
|
| 257 |
const mapPreview = ( label ) => ( |
| 258 |
<svg { ...ROOT }> |
| 259 |
{ lab( label ) } |
| 260 |
{ frame( 40, 58 ) } |
| 261 |
<path d="M16 64 70 52 130 70 224 54" strokeWidth="1.2" opacity="0.4" /> |
| 262 |
<path d="M90 98 86 56" strokeWidth="1.2" opacity="0.4" /> |
| 263 |
<path d="M120 70c4-3.8 6.2-6.7 6.2-9.7a6.2 6.2 0 1 0-12.4 0c0 3 2.2 5.9 6.2 9.7z" strokeWidth="1.6" /> |
| 264 |
<circle cx="120" cy="60.5" r="2.2" strokeWidth="1.6" /> |
| 265 |
</svg> |
| 266 |
); |
| 267 |
|
| 268 |
const captchaWidget = ( optionText, badge ) => ( |
| 269 |
<svg { ...ROOT }> |
| 270 |
<rect x="36" y="38" width="168" height="46" rx="6" strokeWidth="1.6" /> |
| 271 |
<rect x="50" y="53" width="16" height="16" rx="3" strokeWidth="1.5" /> |
| 272 |
<text x="76" y="65" { ...VALUE }>{ optionText }</text> |
| 273 |
{ badge } |
| 274 |
</svg> |
| 275 |
); |
| 276 |
|
| 277 |
const buttonPreview = ( text ) => ( |
| 278 |
<svg { ...ROOT }> |
| 279 |
<rect x="16" y="44" width="168" height="36" rx="7" strokeWidth="1.6" /> |
| 280 |
<text x="100" y="66" textAnchor="middle" { ...VALUE }>{ text }</text> |
| 281 |
</svg> |
| 282 |
); |
| 283 |
|
| 284 |
const hiddenPreview = ( label, note ) => ( |
| 285 |
<svg { ...ROOT }> |
| 286 |
{ lab( label ) } |
| 287 |
<rect x="16" y="44" width="208" height="38" rx="7" strokeWidth="1.5" strokeDasharray="5 4" opacity="0.55" /> |
| 288 |
<g strokeWidth="1.4" opacity="0.7"> |
| 289 |
<path d="M34 63s4-6 9-6 9 6 9 6-4 6-9 6-9-6-9-6z" /> |
| 290 |
<circle cx="43" cy="63" r="2.4" /> |
| 291 |
<path d="M35 55 51 71" /> |
| 292 |
</g> |
| 293 |
<text x="60" y="67" { ...SMALL }>{ note }</text> |
| 294 |
</svg> |
| 295 |
); |
| 296 |
|
| 297 |
const repeaterPreview = ( label ) => ( |
| 298 |
<svg { ...ROOT }> |
| 299 |
{ lab( label ) } |
| 300 |
<rect x="16" y="38" width="208" height="62" rx="7" strokeWidth="1.6" /> |
| 301 |
<rect x="28" y="48" width="184" height="16" rx="4" strokeWidth="1.3" /> |
| 302 |
<rect x="28" y="68" width="184" height="16" rx="4" strokeWidth="1.3" /> |
| 303 |
<path d="M30 92h7M33.5 88.5v7" strokeWidth="1.5" /> |
| 304 |
<text x="46" y="95" { ...SMALL }>Add row</text> |
| 305 |
</svg> |
| 306 |
); |
| 307 |
|
| 308 |
// PMS "Subscription Plans" — radio rows with a right-aligned price, so the |
| 309 |
// preview reads as "pick a paid plan" instead of a generic radio group. |
| 310 |
const plansPreview = ( label, plans ) => ( |
| 311 |
<svg { ...ROOT }> |
| 312 |
{ lab( label ) } |
| 313 |
{ plans.map( ( p, i ) => { |
| 314 |
const cy = 48 + i * 22; |
| 315 |
return ( |
| 316 |
<g key={ i }> |
| 317 |
<circle cx="24" cy={ cy } r="7.5" strokeWidth="1.5" /> |
| 318 |
{ p.selected && <circle cx="24" cy={ cy } r="3.4" style={ FILL } /> } |
| 319 |
<text x="40" y={ cy + 4.5 } { ...VALUE }>{ p.label }</text> |
| 320 |
<text x="224" y={ cy + 4.5 } textAnchor="end" { ...SMALL }>{ p.price }</text> |
| 321 |
</g> |
| 322 |
); |
| 323 |
} ) } |
| 324 |
</svg> |
| 325 |
); |
| 326 |
|
| 327 |
// A stack of inputs carrying their name as an in-input placeholder — for a field |
| 328 |
// type that renders a GROUP of inputs (PMS billing fields). Deliberately unlike |
| 329 |
// addressPreview (labels ABOVE each row) so the two don't read identically. |
| 330 |
const stackedInputs = ( label, placeholders ) => ( |
| 331 |
<svg { ...ROOT }> |
| 332 |
{ lab( label ) } |
| 333 |
{ placeholders.map( ( p, i ) => { |
| 334 |
const y = 38 + i * 24; |
| 335 |
return ( |
| 336 |
<g key={ i }> |
| 337 |
<rect x="16" y={ y } width="208" height="20" rx="5" strokeWidth="1.4" /> |
| 338 |
<text x="30" y={ y + 14 } { ...PLACE }>{ p }</text> |
| 339 |
</g> |
| 340 |
); |
| 341 |
} ) } |
| 342 |
</svg> |
| 343 |
); |
| 344 |
|
| 345 |
const addressPreview = ( label, rows ) => ( |
| 346 |
<svg { ...ROOT }> |
| 347 |
{ lab( label ) } |
| 348 |
{ rows.map( ( r, i ) => { |
| 349 |
const y = 40 + i * 30; |
| 350 |
return ( |
| 351 |
<g key={ i }> |
| 352 |
<text x="16" y={ y } { ...SMALL }>{ r }</text> |
| 353 |
<rect x="16" y={ y + 5 } width="208" height="20" rx="5" strokeWidth="1.4" /> |
| 354 |
</g> |
| 355 |
); |
| 356 |
} ) } |
| 357 |
</svg> |
| 358 |
); |
| 359 |
|
| 360 |
// --- structural ------------------------------------------------------------ |
| 361 |
|
| 362 |
const stepBreakPreview = ( |
| 363 |
<svg { ...ROOT }> |
| 364 |
<text x="16" y="27" { ...LABEL }>Step Break</text> |
| 365 |
<circle cx="40" cy="64" r="9" strokeWidth="1.6" /> |
| 366 |
<text x="40" y="68.5" textAnchor="middle" { ...VALUE }>1</text> |
| 367 |
<line x1="52" y1="64" x2="108" y2="64" strokeWidth="1.6" strokeDasharray="4 4" /> |
| 368 |
<circle cx="120" cy="64" r="9" strokeWidth="1.6" style={ { fill: 'currentColor' } } /> |
| 369 |
<text x="120" y="68.5" textAnchor="middle" fontFamily="sans-serif" fontSize="13" style={ { fill: '#fff', stroke: 'none' } }>2</text> |
| 370 |
<line x1="132" y1="64" x2="188" y2="64" strokeWidth="1.6" strokeDasharray="4 4" /> |
| 371 |
<circle cx="200" cy="64" r="9" strokeWidth="1.6" /> |
| 372 |
<text x="200" y="68.5" textAnchor="middle" { ...VALUE }>3</text> |
| 373 |
</svg> |
| 374 |
); |
| 375 |
|
| 376 |
const columnsPreview = ( |
| 377 |
<svg { ...ROOT }> |
| 378 |
<text x="16" y="27" { ...LABEL }>Columns</text> |
| 379 |
<rect x="16" y="40" width="98" height="58" rx="6" strokeWidth="1.6" /> |
| 380 |
<rect x="126" y="40" width="98" height="58" rx="6" strokeWidth="1.6" /> |
| 381 |
<line x1="30" y1="58" x2="100" y2="58" strokeWidth="1.3" opacity="0.45" /> |
| 382 |
<line x1="30" y1="74" x2="90" y2="74" strokeWidth="1.3" opacity="0.45" /> |
| 383 |
<line x1="140" y1="58" x2="210" y2="58" strokeWidth="1.3" opacity="0.45" /> |
| 384 |
<line x1="140" y1="74" x2="200" y2="74" strokeWidth="1.3" opacity="0.45" /> |
| 385 |
</svg> |
| 386 |
); |
| 387 |
|
| 388 |
const progressBarPreview = ( |
| 389 |
<svg { ...ROOT }> |
| 390 |
<text x="16" y="27" { ...LABEL }>Progress Bar</text> |
| 391 |
<rect x="16" y="48" width="208" height="16" rx="8" strokeWidth="1.6" /> |
| 392 |
<rect x="19" y="51" width="100" height="10" rx="5" style={ FILL } /> |
| 393 |
<text x="120" y="86" textAnchor="middle" { ...SMALL }>50% complete</text> |
| 394 |
</svg> |
| 395 |
); |
| 396 |
|
| 397 |
// --- map ------------------------------------------------------------------- |
| 398 |
|
| 399 |
export const FIELD_PREVIEWS = { |
| 400 |
/* Default */ |
| 401 |
'profile-builder/field-default-name-heading': headingPreview( 'Name' ), |
| 402 |
'profile-builder/field-default-contact-info-heading': headingPreview( 'Contact Info' ), |
| 403 |
'profile-builder/field-default-about-yourself-heading': headingPreview( 'About Yourself' ), |
| 404 |
'profile-builder/field-default-username': textInput( 'Username *', 'your_username', gPerson ), |
| 405 |
'profile-builder/field-default-first-name': textInput( 'First Name', 'Jane' ), |
| 406 |
'profile-builder/field-default-last-name': textInput( 'Last Name', 'Doe' ), |
| 407 |
'profile-builder/field-default-nickname': textInput( 'Nickname', 'jane' ), |
| 408 |
'profile-builder/field-default-email': textInput( 'E-mail *', '[email protected]', gEnvelope ), |
| 409 |
'profile-builder/field-default-website': textInput( 'Website', 'https://example.com', gGlobe ), |
| 410 |
'profile-builder/field-default-password': textInput( 'Password *', '••••••••', gLock ), |
| 411 |
'profile-builder/field-default-repeat-password': textInput( 'Repeat Password *', '••••••••', gLock ), |
| 412 |
'profile-builder/field-default-biographical-info': textareaInput( 'Biographical Info' ), |
| 413 |
'profile-builder/field-default-display-name': selectInput( 'Display name publicly as', 'Jane Doe' ), |
| 414 |
'profile-builder/field-default-aim': textInput( 'AIM', 'screenname' ), |
| 415 |
'profile-builder/field-default-yim': textInput( 'Yahoo IM', 'screenname' ), |
| 416 |
'profile-builder/field-default-jabber': textInput( 'Jabber / Google Talk', '[email protected]' ), |
| 417 |
|
| 418 |
/* Standard */ |
| 419 |
'profile-builder/field-input': textInput( 'Text', 'Type here…' ), |
| 420 |
'profile-builder/field-textarea': textareaInput( 'Textarea' ), |
| 421 |
'profile-builder/field-select': selectInput( 'Choose an option', 'Select…' ), |
| 422 |
'profile-builder/field-select-multiple': multiSelect( 'Select (Multiple)', [ 'Option A', 'Option B' ] ), |
| 423 |
'profile-builder/field-checkbox': checkboxInput( 'Checkbox', 'Yes, sign me up' ), |
| 424 |
'profile-builder/field-radio': radioInput( 'Radio', [ { label: 'Option one', selected: true }, { label: 'Option two' } ] ), |
| 425 |
'profile-builder/field-heading': headingPreview( 'Heading' ), |
| 426 |
'profile-builder/field-avatar': avatarPreview( 'Avatar' ), |
| 427 |
'profile-builder/field-number': textInput( 'Number', '0' ), |
| 428 |
'profile-builder/field-input-hidden': hiddenPreview( 'Hidden Field', 'Not shown on the form' ), |
| 429 |
'profile-builder/field-language': selectInput( 'Language', 'English (United States)' ), |
| 430 |
'profile-builder/field-wysiwyg': wysiwygInput( 'WYSIWYG' ), |
| 431 |
'profile-builder/field-html': textareaInput( 'HTML' ), |
| 432 |
'profile-builder/field-upload': uploadInput( 'Upload' ), |
| 433 |
'profile-builder/field-international-telephone-input': textInput( 'Phone', '+1 (555) 000-0000', gFlag ), |
| 434 |
|
| 435 |
/* Advanced */ |
| 436 |
'profile-builder/field-select2': searchSelect( 'Select2', 'Search…' ), |
| 437 |
'profile-builder/field-phone': textInput( 'Phone', '+1 (555) 000-0000', gPhone ), |
| 438 |
'profile-builder/field-select-country': selectInput( 'Country', 'United States', gFlag ), |
| 439 |
'profile-builder/field-select-timezone': selectInput( 'Timezone', 'UTC+00:00 — London' ), |
| 440 |
'profile-builder/field-select-currency': selectInput( 'Currency', 'USD — US Dollar ($)' ), |
| 441 |
'profile-builder/field-select-cpt': selectInput( 'Select (CPT)', 'Choose a post…' ), |
| 442 |
'profile-builder/field-select-taxonomy': selectInput( 'Select (Taxonomy)', 'Choose a category…' ), |
| 443 |
'profile-builder/field-checkbox-toa': checkboxInput( 'Terms and Conditions', 'I agree to the Terms' ), |
| 444 |
'profile-builder/field-datepicker': pickerInput( 'Datepicker', 'YYYY-MM-DD', gCalendar ), |
| 445 |
'profile-builder/field-timepicker': pickerInput( 'Timepicker', 'HH : MM', gClock ), |
| 446 |
'profile-builder/field-colorpicker': colorInput( 'Colorpicker' ), |
| 447 |
'profile-builder/field-validation': textInput( 'Validation', 'Enter the code' ), |
| 448 |
'profile-builder/field-map': mapPreview( 'Map' ), |
| 449 |
'profile-builder/field-additional-map': mapPreview( 'Additional Map' ), |
| 450 |
'profile-builder/field-recaptcha': captchaWidget( "I'm not a robot", ( |
| 451 |
<g strokeWidth="1.4" opacity="0.75"> |
| 452 |
<path d="M188 53a6 6 0 1 0 1.7 4.2" /> |
| 453 |
<path d="M188 49v4h-4" /> |
| 454 |
<text x="186" y="78" textAnchor="middle" fontFamily="sans-serif" fontSize="8" style={ FILL } opacity="0.6">reCAPTCHA</text> |
| 455 |
</g> |
| 456 |
) ), |
| 457 |
'profile-builder/field-turnstile': captchaWidget( 'Verify you are human', ( |
| 458 |
<path strokeWidth="1.4" opacity="0.75" d="M180 64h11a3 3 0 0 0 .3-6 4 4 0 0 0-7.7-1.1A3.2 3.2 0 0 0 180 64z" /> |
| 459 |
) ), |
| 460 |
'profile-builder/field-select-user-role': selectInput( 'User Role', 'Subscriber' ), |
| 461 |
'profile-builder/field-default-blog-details': textInput( 'Blog Title', 'My blog' ), |
| 462 |
'profile-builder/field-mailchimp-subscribe': checkboxInput( 'MailChimp', 'Subscribe to our newsletter' ), |
| 463 |
'profile-builder/field-mailpoet-subscribe': checkboxInput( 'MailPoet', 'Subscribe to our newsletter' ), |
| 464 |
'profile-builder/field-campaign-monitor-subscribe': checkboxInput( 'Campaign Monitor', 'Subscribe to our newsletter' ), |
| 465 |
'profile-builder/field-woo-billing-address': addressPreview( 'Billing Address', [ 'Full name', 'Street address' ] ), |
| 466 |
'profile-builder/field-woo-shipping-address': addressPreview( 'Shipping Address', [ 'Full name', 'Street address' ] ), |
| 467 |
|
| 468 |
/* Other */ |
| 469 |
'profile-builder/field-email': textInput( 'Email', '[email protected]', gAt ), |
| 470 |
'profile-builder/field-email-confirmation': textInput( 'Confirm E-mail', '[email protected]', gEnvelope ), |
| 471 |
'profile-builder/field-gdpr-checkbox': checkboxInput( 'GDPR Agreement', 'I consent to my data being stored' ), |
| 472 |
'profile-builder/field-gdpr-communication-preferences': checkboxGroup( 'Communication Preferences', [ |
| 473 |
{ label: 'E-mail', checked: true }, |
| 474 |
{ label: 'Phone' }, |
| 475 |
{ label: 'SMS' }, |
| 476 |
] ), |
| 477 |
'profile-builder/field-gdpr-delete': buttonPreview( 'Delete my account' ), |
| 478 |
'profile-builder/field-pms-subscription-plans': plansPreview( 'Subscription Plans', [ |
| 479 |
{ label: 'Free', price: '$0', selected: true }, |
| 480 |
{ label: 'Monthly', price: '$9 / mo' }, |
| 481 |
{ label: 'Yearly', price: '$90 / yr' }, |
| 482 |
] ), |
| 483 |
'profile-builder/field-pms-billing-fields': stackedInputs( 'Billing Fields', [ |
| 484 |
'Billing First Name', |
| 485 |
'Billing Address', |
| 486 |
'Billing Country', |
| 487 |
] ), |
| 488 |
'profile-builder/field-honeypot': hiddenPreview( 'Honeypot', 'Anti-spam — hidden from users' ), |
| 489 |
'profile-builder/field-input-url': textInput( 'URL', 'https://example.com', gLink ), |
| 490 |
'profile-builder/field-select2-multiple': multiSelect( 'Select2 (Multiple)', [ 'Tag one', 'Tag two' ] ), |
| 491 |
'profile-builder/field-repeater': repeaterPreview( 'Repeater' ), |
| 492 |
|
| 493 |
/* Structural */ |
| 494 |
'profile-builder/msf-step-break': stepBreakPreview, |
| 495 |
'profile-builder/ffc-columns': columnsPreview, |
| 496 |
'profile-builder/progress-bar': progressBarPreview, |
| 497 |
}; |
| 498 |
|
