fansunited-frontend-components 0.0.29 → 0.0.31-RC1

package/README.md

@@ -72,6 +72,7 @@ Interactive quiz component with multiple templates and customization options.
 | `userIsLoggedIn`             | `boolean`               | Determine if the user is logged in          |
 | `signInCTA`                  | `SignInCTADetails`      | Sign in call to action button configuration |
 | `additionalCTA`              | `AdditionalCTADetails`  | Additional call to action button configuration |
+| `rulesDisplay`               | `RulesDisplay`          | Game rules display configuration            |
 
 #### Templates
 
@@ -370,6 +371,63 @@ const additionalCTA: AdditionalCTADetails = {
 - **Split variant**: Displayed after "Play Again" button in the thank you container
 - **Overlay variant**: Displayed after "Play Again" and "Share Result" buttons
 
+#### Rules Display Configuration
+
+Display game rules and instructions to users with a clickable info icon in the component headline using the `rulesDisplay` prop.
+
+```tsx
+import { RulesDisplay } from "fansunited-frontend-core";
+
+// Display rules in a modal dialog (default)
+const rulesDisplay: RulesDisplay = {
+  type: "modal",
+};
+
+// Display rules as a clickable link
+const rulesDisplay: RulesDisplay = {
+  type: "link",
+  url: "https://your-website.com/quiz-rules",
+  target: "_blank", // or "_self"
+};
+
+// Custom rules content component
+const rulesDisplay: RulesDisplay = {
+  type: "modal",
+  component: <CustomRulesContent />,
+};
+
+<ClassicQuizPlay
+  {...otherProps}
+  rulesDisplay={rulesDisplay}
+/>;
+```
+
+**Display Types:**
+
+1. **Modal** - Opens rules in a modal dialog overlay (default behavior)
+   - Uses the quiz's `rules` field from the backend
+   - Displays in a centered modal with close button
+   - Supports HTML content rendering
+
+2. **Link** - Opens rules URL in a new tab/window
+   - Requires `url` property
+   - Optional `target` property (`_blank` or `_self`)
+   - Useful for external documentation or detailed rule pages
+
+**Features:**
+
+- **Info Icon**: Displays a small info icon (ⓘ) next to the component headline
+- **Responsive**: Adapts to all three templates (Standard, Split, Overlay)
+- **Theme-Aware**: Automatically adjusts colors based on theme mode and variant
+- **Accessible**: Keyboard navigable and screen reader friendly
+- **Non-Intrusive**: Icon only appears when rules are configured
+
+**Behavior:**
+
+- The rules icon appears in the headline section across all component states (main view, sign-in, error, score state, lead collection)
+- Modal dialogs can be closed by clicking the close button, clicking outside, or pressing Escape
+- Link type opens in a new tab by default for better user experience
+
 #### TypeScript Support
 
 This package is built with TypeScript and provides full type definitions. Import types from `fansunited-frontend-core`:
@@ -381,6 +439,9 @@ import {
   MainProps,
   CustomThemeOptions,
   LeadsOptions,
+  RulesDisplay,
+  SignInCTADetails,
+  AdditionalCTADetails,
   AnalyticsEvent,
 } from "fansunited-frontend-core";
 ```
@@ -468,6 +529,7 @@ Interactive poll voting component with real-time results, multiple choice suppor
 | `userIsLoggedIn`             | `boolean`               | Determine if the user is logged in          |
 | `signInCTA`                  | `SignInCTADetails`      | Sign in call to action button configuration |
 | `additionalCTA`              | `AdditionalCTADetails`  | Additional call to action button configuration |
+| `rulesDisplay`               | `RulesDisplay`          | Poll rules display configuration            |
 
 #### Templates
 
@@ -1005,6 +1067,7 @@ Interactive personality quiz component that matches users with personas based on
 | `signInCTA`                  | `SignInCTADetails`      | Sign in call to action button configuration |
 | `additionalCTA`              | `AdditionalCTADetails`  | Additional call to action button configuration |
 | `optionsLayout`              | `OptionsLayout`         | Layout for answer options                   |
+| `rulesDisplay`               | `RulesDisplay`          | Quiz rules display configuration            |
 
 #### Templates
 
@@ -1302,6 +1365,7 @@ Interactive match prediction quiz component that allows users to make prediction
 | `showTeamLabels`             | `boolean`               | Show team name labels in fixture components       |
 | `showPoints`                 | `boolean`               | Show points display for each fixture              |
 | `showPredictionDetails`      | `boolean`               | Show detailed prediction results after completion |
+| `rulesDisplay`               | `RulesDisplay`          | Match quiz rules display configuration            |
 
 #### Templates
 
@@ -1641,6 +1705,7 @@ Interactive event prediction component for sports and entertainment events. Feat
 | `showCountdown`              | `boolean`               | Show countdown timer when Event Game is open      |
 | `showPoints`                 | `boolean`               | Show points display for each fixture              |
 | `showPredictionDetails`      | `boolean`               | Show detailed prediction results after completion |
+| `rulesDisplay`               | `RulesDisplay`          | Event game rules display configuration            |
 
 #### Templates