fansunited-frontend-components 0.0.24 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +227 -39
  2. package/components.js +27797 -26644
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -62,15 +62,16 @@ Interactive quiz component with multiple templates and customization options.
62
62
 
63
63
  #### Optional Props
64
64
 
65
- | Prop | Type | Description |
66
- | ---------------------------- | -------------------- | ------------------------------------------- |
67
- | `themeOptions` | `CustomThemeOptions` | Theme configuration |
68
- | `showAnswerExplanations` | `boolean` | Show explanations after quiz completion |
69
- | `leads` | `LeadsOptions` | Lead collection settings |
70
- | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
71
- | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
72
- | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
73
- | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
65
+ | Prop | Type | Description |
66
+ | ---------------------------- | ----------------------- | ------------------------------------------- |
67
+ | `themeOptions` | `CustomThemeOptions` | Theme configuration |
68
+ | `showAnswerExplanations` | `boolean` | Show explanations after quiz completion |
69
+ | `leads` | `LeadsOptions` | Lead collection settings |
70
+ | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
71
+ | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
72
+ | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
73
+ | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
74
+ | `additionalCTA` | `AdditionalCTADetails` | Additional call to action button configuration |
74
75
 
75
76
  #### Templates
76
77
 
@@ -323,6 +324,52 @@ const signInCTA: SignInCTADetails = {
323
324
 
324
325
  - When `userIsLoggedIn` is `false` and the quiz requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the quiz
325
326
 
327
+ #### Additional CTA Configuration
328
+
329
+ Add an extra call-to-action button to the quiz completion screen using the `additionalCTA` prop.
330
+
331
+ ```tsx
332
+ import { AdditionalCTADetails } from "fansunited-frontend-core";
333
+
334
+ // Custom component
335
+ const additionalCTA: AdditionalCTADetails = {
336
+ component: <CustomCTAButton />,
337
+ };
338
+
339
+ // Basic CTA with onClick handler
340
+ const additionalCTA: AdditionalCTADetails = {
341
+ defaultLabel: "See More",
342
+ onClick: () => {
343
+ // Handle click logic
344
+ console.log("Additional CTA clicked");
345
+ },
346
+ };
347
+
348
+ // CTA with URL navigation
349
+ const additionalCTA: AdditionalCTADetails = {
350
+ defaultLabel: "Visit Website",
351
+ url: "https://your-website.com",
352
+ target: "_blank", // or "_self"
353
+ };
354
+
355
+ <ClassicQuizPlay
356
+ {...otherProps}
357
+ additionalCTA={additionalCTA}
358
+ />;
359
+ ```
360
+
361
+ **Priority Order:**
362
+
363
+ 1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
364
+ 2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
365
+ 3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
366
+
367
+ **Placement:**
368
+
369
+ - **Standard variant**: Displayed after "Play Again" and "Share Result" buttons
370
+ - **Split variant**: Displayed after "Play Again" button in the thank you container
371
+ - **Overlay variant**: Displayed after "Play Again" and "Share Result" buttons
372
+
326
373
  #### TypeScript Support
327
374
 
328
375
  This package is built with TypeScript and provides full type definitions. Import types from `fansunited-frontend-core`:
@@ -412,14 +459,15 @@ Interactive poll voting component with real-time results, multiple choice suppor
412
459
 
413
460
  #### Optional Props
414
461
 
415
- | Prop | Type | Description |
416
- | ---------------------------- | -------------------- | ------------------------------------------- |
417
- | `themeOptions` | `CustomThemeOptions` | Theme configuration |
418
- | `leads` | `LeadsOptions` | Lead collection settings |
419
- | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
420
- | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
421
- | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
422
- | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
462
+ | Prop | Type | Description |
463
+ | ---------------------------- | ----------------------- | ------------------------------------------- |
464
+ | `themeOptions` | `CustomThemeOptions` | Theme configuration |
465
+ | `leads` | `LeadsOptions` | Lead collection settings |
466
+ | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
467
+ | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
468
+ | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
469
+ | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
470
+ | `additionalCTA` | `AdditionalCTADetails` | Additional call to action button configuration |
423
471
 
424
472
  #### Templates
425
473
 
@@ -489,6 +537,52 @@ const signInCTA: SignInCTADetails = {
489
537
 
490
538
  - When `userIsLoggedIn` is `false` and the poll requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the poll
491
539
 
540
+ #### Additional CTA Configuration
541
+
542
+ Add an extra call-to-action button to the poll results screen using the `additionalCTA` prop.
543
+
544
+ ```tsx
545
+ import { AdditionalCTADetails } from "fansunited-frontend-core";
546
+
547
+ // Custom component
548
+ const additionalCTA: AdditionalCTADetails = {
549
+ component: <CustomCTAButton />,
550
+ };
551
+
552
+ // Basic CTA with onClick handler
553
+ const additionalCTA: AdditionalCTADetails = {
554
+ defaultLabel: "Learn More",
555
+ onClick: () => {
556
+ // Handle click logic
557
+ console.log("Additional CTA clicked");
558
+ },
559
+ };
560
+
561
+ // CTA with URL navigation
562
+ const additionalCTA: AdditionalCTADetails = {
563
+ defaultLabel: "View Details",
564
+ url: "https://your-website.com/poll-details",
565
+ target: "_blank", // or "_self"
566
+ };
567
+
568
+ <PollVote
569
+ {...otherProps}
570
+ additionalCTA={additionalCTA}
571
+ />;
572
+ ```
573
+
574
+ **Priority Order:**
575
+
576
+ 1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
577
+ 2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
578
+ 3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
579
+
580
+ **Placement:**
581
+
582
+ - **Standard variant**: Displayed before "Vote Again" button
583
+ - **Split variant**: Displayed in the same container as "Vote Again" button
584
+ - **Overlay variant**: Displayed after "Vote Again" button
585
+
492
586
  #### Lead Collection
493
587
 
494
588
  Capture user information before or after voting:
@@ -900,16 +994,17 @@ Interactive personality quiz component that matches users with personas based on
900
994
 
901
995
  #### Optional Props
902
996
 
903
- | Prop | Type | Description |
904
- | ---------------------------- | -------------------- | ------------------------------------------- |
905
- | `themeOptions` | `CustomThemeOptions` | Theme configuration |
906
- | `showAnswerExplanations` | `boolean` | Show explanations after quiz completion |
907
- | `leads` | `LeadsOptions` | Lead collection settings |
908
- | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
909
- | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
910
- | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
911
- | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
912
- | `optionsLayout` | `OptionsLayout` | Layout for answer options |
997
+ | Prop | Type | Description |
998
+ | ---------------------------- | ----------------------- | ------------------------------------------- |
999
+ | `themeOptions` | `CustomThemeOptions` | Theme configuration |
1000
+ | `showAnswerExplanations` | `boolean` | Show explanations after quiz completion |
1001
+ | `leads` | `LeadsOptions` | Lead collection settings |
1002
+ | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
1003
+ | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
1004
+ | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
1005
+ | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
1006
+ | `additionalCTA` | `AdditionalCTADetails` | Additional call to action button configuration |
1007
+ | `optionsLayout` | `OptionsLayout` | Layout for answer options |
913
1008
 
914
1009
  #### Templates
915
1010
 
@@ -1012,6 +1107,52 @@ const signInCTA: SignInCTADetails = {
1012
1107
 
1013
1108
  - When `userIsLoggedIn` is `false` and the quiz requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the quiz
1014
1109
 
1110
+ #### Additional CTA Configuration
1111
+
1112
+ Add an extra call-to-action button to the quiz results screen using the `additionalCTA` prop.
1113
+
1114
+ ```tsx
1115
+ import { AdditionalCTADetails } from "fansunited-frontend-core";
1116
+
1117
+ // Custom component
1118
+ const additionalCTA: AdditionalCTADetails = {
1119
+ component: <CustomCTAButton />,
1120
+ };
1121
+
1122
+ // Basic CTA with onClick handler
1123
+ const additionalCTA: AdditionalCTADetails = {
1124
+ defaultLabel: "Explore More",
1125
+ onClick: () => {
1126
+ // Handle click logic
1127
+ console.log("Additional CTA clicked");
1128
+ },
1129
+ };
1130
+
1131
+ // CTA with URL navigation
1132
+ const additionalCTA: AdditionalCTADetails = {
1133
+ defaultLabel: "Discover Your Type",
1134
+ url: "https://your-website.com/personality-types",
1135
+ target: "_blank", // or "_self"
1136
+ };
1137
+
1138
+ <PersonalityQuizPlay
1139
+ {...otherProps}
1140
+ additionalCTA={additionalCTA}
1141
+ />;
1142
+ ```
1143
+
1144
+ **Priority Order:**
1145
+
1146
+ 1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
1147
+ 2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
1148
+ 3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
1149
+
1150
+ **Placement:**
1151
+
1152
+ - **Standard variant**: Displayed before "Play Again" button
1153
+ - **Split variant**: Displayed in the thank you container after "Play Again" button
1154
+ - **Overlay variant**: Displayed after "Play Again" button if available
1155
+
1015
1156
  #### Lead Collection
1016
1157
 
1017
1158
  Capture user information before or after taking the personality quiz:
@@ -1148,18 +1289,19 @@ Interactive match prediction quiz component that allows users to make prediction
1148
1289
 
1149
1290
  #### Optional Props
1150
1291
 
1151
- | Prop | Type | Description |
1152
- | ---------------------------- | -------------------- | ------------------------------------------------- |
1153
- | `themeOptions` | `CustomThemeOptions` | Theme configuration |
1154
- | `leads` | `LeadsOptions` | Lead collection settings |
1155
- | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
1156
- | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
1157
- | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
1158
- | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
1159
- | `showCountdown` | `boolean` | Show countdown timer when Match Quiz is open |
1160
- | `showTeamLabels` | `boolean` | Show team name labels in fixture components |
1161
- | `showPoints` | `boolean` | Show points display for each fixture |
1162
- | `showPredictionDetails` | `boolean` | Show detailed prediction results after completion |
1292
+ | Prop | Type | Description |
1293
+ | ---------------------------- | ----------------------- | ------------------------------------------------- |
1294
+ | `themeOptions` | `CustomThemeOptions` | Theme configuration |
1295
+ | `leads` | `LeadsOptions` | Lead collection settings |
1296
+ | `imagePosition` | `"left" \| "right"` | Image position (STANDARD template only) |
1297
+ | `defaultImagePlaceholderUrl` | `string` | URL for default image placeholder |
1298
+ | `userIsLoggedIn` | `boolean` | Determine if the user is logged in |
1299
+ | `signInCTA` | `SignInCTADetails` | Sign in call to action button configuration |
1300
+ | `additionalCTA` | `AdditionalCTADetails` | Additional call to action button configuration |
1301
+ | `showCountdown` | `boolean` | Show countdown timer when Match Quiz is open |
1302
+ | `showTeamLabels` | `boolean` | Show team name labels in fixture components |
1303
+ | `showPoints` | `boolean` | Show points display for each fixture |
1304
+ | `showPredictionDetails` | `boolean` | Show detailed prediction results after completion |
1163
1305
 
1164
1306
  #### Templates
1165
1307
 
@@ -1320,6 +1462,52 @@ const signInCTA: SignInCTADetails = {
1320
1462
 
1321
1463
  - When `userIsLoggedIn` is `false` and the quiz requires authentication (`authRequirement: "REGISTERED"`), the sign-in screen will be displayed instead of the quiz
1322
1464
 
1465
+ #### Additional CTA Configuration
1466
+
1467
+ Add an extra call-to-action button to the match quiz results screen using the `additionalCTA` prop.
1468
+
1469
+ ```tsx
1470
+ import { AdditionalCTADetails } from "fansunited-frontend-core";
1471
+
1472
+ // Custom component
1473
+ const additionalCTA: AdditionalCTADetails = {
1474
+ component: <CustomCTAButton />,
1475
+ };
1476
+
1477
+ // Basic CTA with onClick handler
1478
+ const additionalCTA: AdditionalCTADetails = {
1479
+ defaultLabel: "View Leaderboard",
1480
+ onClick: () => {
1481
+ // Handle click logic
1482
+ console.log("Additional CTA clicked");
1483
+ },
1484
+ };
1485
+
1486
+ // CTA with URL navigation
1487
+ const additionalCTA: AdditionalCTADetails = {
1488
+ defaultLabel: "Match Details",
1489
+ url: "https://your-website.com/match-details",
1490
+ target: "_blank", // or "_self"
1491
+ };
1492
+
1493
+ <MatchQuizPlay
1494
+ {...otherProps}
1495
+ additionalCTA={additionalCTA}
1496
+ />;
1497
+ ```
1498
+
1499
+ **Priority Order:**
1500
+
1501
+ 1. **Custom Component** - If `additionalCTA.component` is provided, it will be rendered
1502
+ 2. **Click Handler** - If `additionalCTA.onClick` is provided, a button with the handler will be rendered
1503
+ 3. **URL Navigation** - If `additionalCTA.url` is provided, a button will be rendered and clicking will navigate to the URL
1504
+
1505
+ **Placement:**
1506
+
1507
+ - **Standard variant**: Displayed on the same line as the branding logo
1508
+ - **Split variant**: Displayed centered after main content
1509
+ - **Overlay variant**: Displayed on the same line as the branding logo
1510
+
1323
1511
  #### Lead Collection
1324
1512
 
1325
1513
  Capture user information before or after making predictions: