<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>POPUP:</strong> Modal dialog for essential information or actions<br> <strong>TYPES:</strong> Rich Content (default) | Informative (.popup-seamless) | Minimal (.popup-minimal)<br> <strong>ALIGNMENT:</strong> Left (default) | Center (.popup-center)<br> <strong>SIZES:</strong> Small (.popup-sm) | Default | Large (.popup-lg) | Extra Large (.popup-xl) </p> <p class="tw:mb-0 tw:text-sm"> Popups block user interaction until dismissed. Use for confirmations, settings panels, and informational dialogs. Supports layered stacking with dimming and configurable dismiss modes. </p> </div> <!-- ============================================ Type: Rich Content (Default) ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Type: Rich Content (Default)</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Rich Content:</strong> Header has a visible bottom border separating it from the body. Body scrolls when content exceeds viewport. Footer stays fixed at the bottom with no top border. Best for settings panels, table configurations, and form inputs. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="btn btn-primary" type="button" data-action="click->popup#show"> Open Rich Content Popup </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="rich-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="rich-title">Table View Settings</h2> <p class="popup-header-subtitle">Configure visible columns and their order</p> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <p class="tw:mb-3">Select which columns to display in the saved providers view. Drag to reorder.</p> <div class="tw:space-y-2"> <label class="form-check"> <input type="checkbox" class="form-check-input" checked> <span class="form-check-label">Provider Name</span> </label> <label class="form-check"> <input type="checkbox" class="form-check-input" checked> <span class="form-check-label">Application Date</span> </label> <label class="form-check"> <input type="checkbox" class="form-check-input" checked> <span class="form-check-label">Status</span> </label> <label class="form-check"> <input type="checkbox" class="form-check-input"> <span class="form-check-label">Year Group</span> </label> <label class="form-check"> <input type="checkbox" class="form-check-input"> <span class="form-check-label">Contact Email</span> </label> </div> </div> <div class="popup-footer"> <button class="btn btn-secondary" type="button" data-action="click->popup#close">Cancel</button> <button class="btn btn-primary" type="button" data-action="click->popup#close">Apply Settings</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="popup-panel" role="dialog" aria-modal="true"&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="popup-header"&gt;...&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="popup-body"&gt;...&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="popup-footer"&gt;...&lt;/div&gt;</code><br> <code>&lt;/div&gt;</code> </div> </div> <!-- ============================================ Type: Informative (Seamless) ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Type: Informative (.popup-seamless)</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Informative:</strong> Header flows seamlessly into the body with no border. Best for confirmation dialogs with explanatory text and information popups. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="btn btn-primary" type="button" data-action="click->popup#show"> Open Informative Popup </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-seamless" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="info-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="info-title">How does the Sorting Hat really sort?</h2> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <p class="tw:mb-3"> The course eligibility algorithm takes multiple factors into account when matching you to sixth form and college courses. Understanding these factors helps you put forward the strongest possible application. </p> <p class="tw:mb-3"> <strong>Academic Performance</strong> — Your current school reports and predicted grades are weighted based on each provider's entry requirements. For Year 12 entry, GCSE results carry the highest weight. </p> <p class="tw:mb-3"> <strong>Interview Performance</strong> — If shortlisted, your interview score is factored into the match. Providers normalise scores to ensure fair comparison across all applicants. </p> <p> <strong>Special Considerations</strong> — Sibling at provider, bursary eligibility, and catchment area are noted separately rather than modifying your base score, ensuring transparency in the final outcome. </p> </div> <div class="popup-footer"> <button class="btn btn-primary" type="button" data-action="click->popup#close">Got it</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="popup-panel <strong>popup-seamless</strong>"&gt;...&lt;/div&gt;</code> </div> </div> <!-- ============================================ Type: Minimal ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Type: Minimal (.popup-minimal)</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Minimal:</strong> No header at all — body content starts immediately with extra top padding. Best for simple confirmations with an icon, success messages, and yes/no prompts. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="btn btn-success" type="button" data-action="click->popup#show"> Open Minimal Popup </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-minimal popup-center popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-label="Action completed"> <div class="popup-body"> <div class="tw:text-green-500 tw:mx-auto tw:mb-4 tw:text-5xl tw:text-center"> <i class="fa-solid fa-circle-check"></i> </div> <p class="h3 tw:mb-2">Application Submitted!</p> <p class="text-muted">Your Year 12 application has been successfully submitted. You will receive a confirmation email shortly.</p> </div> <div class="popup-footer"> <button class="btn btn-primary" type="button" data-action="click->popup#close">Done</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="popup-panel <strong>popup-minimal popup-center popup-sm</strong>"&gt;...&lt;/div&gt;</code> </div> </div> <!-- ============================================ Center Alignment ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Center Alignment (.popup-center)</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Center:</strong> Centers text in header, body, and footer. Combine with any type. Best for confirmation dialogs and simple prompts. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="btn btn-danger" type="button" data-action="click->popup#show"> Open Centered Confirmation </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-seamless popup-center popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="center-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="center-title">Delete Application?</h2> </div> </div> <div class="popup-body"> <p class="text-muted"> Are you sure you want to permanently delete the application for <strong>James Thompson</strong>? This action cannot be undone and all associated documents will be removed. </p> </div> <div class="popup-footer"> <button class="btn btn-secondary" type="button" data-action="click->popup#close">Cancel</button> <button class="btn btn-danger" type="button" data-action="click->popup#close">Delete Application</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="popup-panel <strong>popup-center</strong>"&gt;...&lt;/div&gt;</code> </div> </div> <!-- ============================================ Size Variants ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Size Variants</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Sizes:</strong> <code>.popup-sm</code> (400px) | Default (520px) | <code>.popup-lg</code> (680px) | <code>.popup-xl</code> (860px). All sizes are responsive and shrink gracefully on mobile. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <!-- Small --> <div data-controller="popup"> <button class="btn btn-outline-primary btn-sm" type="button" data-action="click->popup#show"> Small (400px) </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="size-sm-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="size-sm-title">Small Popup</h2> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <p>This popup is 400px wide. Ideal for simple confirmations and quick prompts.</p> </div> <div class="popup-footer"> <button class="btn btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> <!-- Default --> <div data-controller="popup"> <button class="btn btn-outline-primary btn-sm" type="button" data-action="click->popup#show"> Default (520px) </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="size-md-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="size-md-title">Default Popup</h2> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <p>This popup is 520px wide. The standard size for most use cases including forms and settings.</p> </div> <div class="popup-footer"> <button class="btn btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> <!-- Large --> <div data-controller="popup"> <button class="btn btn-outline-primary btn-sm" type="button" data-action="click->popup#show"> Large (680px) </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="size-lg-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="size-lg-title">Large Popup</h2> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <p>This popup is 680px wide. Good for rich content, multi-column forms, and detailed settings.</p> </div> <div class="popup-footer"> <button class="btn btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> <!-- Extra Large --> <div data-controller="popup"> <button class="btn btn-outline-primary btn-sm" type="button" data-action="click->popup#show"> Extra Large (860px) </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-xl" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="size-xl-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="size-xl-title">Extra Large Popup</h2> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <p>This popup is 860px wide. Suitable for complex settings panels, large data tables, and multi-step flows.</p> </div> <div class="popup-footer"> <button class="btn btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="popup-panel <strong>popup-sm</strong>"&gt;</code> | <code>&lt;div class="popup-panel"&gt;</code> | <code>&lt;div class="popup-panel <strong>popup-lg</strong>"&gt;</code> | <code>&lt;div class="popup-panel <strong>popup-xl</strong>"&gt;</code> </div> </div> <!-- ============================================ Scrollable Body ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Scrollable Body</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Scrollable:</strong> When body content exceeds the viewport, only the body scrolls. Header and footer remain fixed in place. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="btn btn-primary" type="button" data-action="click->popup#show"> Open Scrollable Popup </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="scroll-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="scroll-title">Terms and Conditions</h2> <p class="popup-header-subtitle">Please read carefully before proceeding</p> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <h3 class="h4 tw:mb-3">1. Data Protection</h3> <p class="tw:mb-4">All personal data collected through the application process is handled in accordance with the Data Protection Act 2018 and UK GDPR. The provider acts as a data controller and processes applicant information solely for the purpose of managing application decisions.</p> <h3 class="h4 tw:mb-3">2. Application Process</h3> <p class="tw:mb-4">Applications must be submitted by the published deadline. Late applications may be considered at the provider's discretion but will not be given priority over timely submissions. All information provided must be accurate and complete.</p> <h3 class="h4 tw:mb-3">3. Assessment and Selection</h3> <p class="tw:mb-4">The provider reserves the right to assess applicants through interviews, entrance examinations, or portfolio reviews as appropriate. Selection criteria are published annually and applied consistently to all applicants.</p> <h3 class="h4 tw:mb-3">4. Offer and Acceptance</h3> <p class="tw:mb-4">Offers of places are conditional upon acceptance within the specified timeframe. Failure to respond by the deadline may result in the offer being withdrawn and the place offered to the next applicant on the waiting list.</p> <h3 class="h4 tw:mb-3">5. Waiting Lists</h3> <p class="tw:mb-4">Where the provider is oversubscribed, a waiting list will be maintained until the end of the autumn term. Position on the waiting list is determined by the application criteria and may change as new applications are received.</p> <h3 class="h4 tw:mb-3">6. Appeals</h3> <p class="tw:mb-4">Parents have the right to appeal against a decision to refuse admission. Appeals are heard by an independent panel and the provider will supply information about the appeals process with any refusal notification.</p> <h3 class="h4 tw:mb-3">7. Fees and Deposits</h3> <p>A non-refundable registration fee is required at the time of application. Upon acceptance of a place, a deposit is payable which will be credited against the first term's fees. Full fee schedules are available from the provider's admissions office.</p> </div> <div class="popup-footer"> <button class="btn btn-secondary" type="button" data-action="click->popup#close">Decline</button> <button class="btn btn-primary" type="button" data-action="click->popup#close">Accept Terms</button> </div> </div> </div> </div> </div> <!-- ============================================ Without Close Button ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Without Close Button</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>No Close Button:</strong> The close button (<code>.popup-close</code>) is optional. Omit it when the user must make an explicit choice from the footer actions. The popup can still be closed via overlay click or Escape key. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="btn btn-warning" type="button" data-action="click->popup#show"> Open Without Close Button </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-seamless popup-center popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="noclose-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="noclose-title">Unsaved Changes</h2> </div> </div> <div class="popup-body"> <p class="text-muted"> You have unsaved changes. Would you like to save before leaving this page? </p> </div> <div class="popup-footer"> <button class="btn btn-secondary" type="button" data-action="click->popup#close">Discard</button> <button class="btn btn-primary" type="button" data-action="click->popup#close">Save Changes</button> </div> </div> </div> </div> </div> <!-- ============================================ Layered Popups (Stacking) ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Layered Popups (Stacking)</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Stacking:</strong> When a second popup opens, the first popup is dimmed (<code>.popup-dimmed</code>) and the new overlay is transparent to avoid double-darkening. Closing the top popup un-dims the one underneath. Focus is trapped in the topmost popup. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="btn btn-primary" type="button" data-action="click->popup#show"> Open First Popup </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="layer1-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="layer1-title">Notification Settings</h2> <p class="popup-header-subtitle">Manage your application deadline and open day reminders</p> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <p class="tw:mb-4">Manage your notification preferences for upcoming application deadlines and open days.</p> <div data-controller="popup"> <button class="btn btn-secondary btn-sm" type="button" data-action="click->popup#show"> Open Confirmation (Second Popup) </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-seamless popup-center popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="layer2-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="layer2-title">Confirm Reset?</h2> </div> </div> <div class="popup-body"> <p class="text-muted"> This will reset all notification settings to their default values. Are you sure you want to continue? </p> </div> <div class="popup-footer"> <button class="btn btn-secondary" type="button" data-action="click->popup#close">Cancel</button> <button class="btn btn-danger" type="button" data-action="click->popup#close">Reset Settings</button> </div> </div> </div> </div> <div class="popup-footer"> <button class="btn btn-secondary" type="button" data-action="click->popup#close">Cancel</button> <button class="btn btn-primary" type="button" data-action="click->popup#close">Save Settings</button> </div> </div> </div> </div> </div> <!-- ============================================ Dismiss Modes ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Dismiss Modes</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Dismiss Mode:</strong> Controls what happens when the overlay is clicked or Escape is pressed.<br> <code>data-popup-dismiss-mode-value="single"</code> (default) — Closes only the topmost popup.<br> <code>data-popup-dismiss-mode-value="all"</code> — Closes all open popups at once. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <!-- Single dismiss mode --> <div data-controller="popup" data-popup-dismiss-mode-value="single"> <button class="btn btn-outline-primary btn-sm" type="button" data-action="click->popup#show"> Single Dismiss (default) </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="dismiss-single-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="dismiss-single-title">Single Dismiss</h2> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <p>Click the overlay or press Escape to close only this popup. This is the default behavior.</p> </div> <div class="popup-footer"> <button class="btn btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> <!-- All dismiss mode --> <div data-controller="popup" data-popup-dismiss-mode-value="all"> <button class="btn btn-outline-primary btn-sm" type="button" data-action="click->popup#show"> Dismiss All </button> <div class="popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="popup-panel popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="dismiss-all-title"> <div class="popup-header"> <div> <h2 class="popup-header-title" id="dismiss-all-title">Dismiss All</h2> </div> <button class="popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="popup-body"> <p>With <code>data-popup-dismiss-mode-value="all"</code>, clicking the overlay or pressing Escape closes all open popups at once.</p> </div> <div class="popup-footer"> <button class="btn btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> </div> </div> <!-- ============================================ Keyboard & Accessibility ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Keyboard &amp; Accessibility</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Accessibility:</strong> Popups use <code>role="dialog"</code> with <code>aria-modal="true"</code>. Focus is trapped inside the popup — Tab cycles through focusable elements and wraps at boundaries. Escape closes the popup. Focus returns to the trigger element on close. Use <code>aria-labelledby</code> to link to the title, or <code>aria-label</code> for minimal popups without a visible title. </p> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <table class="table table-sm"> <thead> <tr> <th>Key</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td><code>Escape</code></td> <td>Closes the topmost popup (or all, based on dismiss mode)</td> </tr> <tr> <td><code>Tab</code></td> <td>Cycles forward through focusable elements within the popup</td> </tr> <tr> <td><code>Shift + Tab</code></td> <td>Cycles backward through focusable elements within the popup</td> </tr> </tbody> </table> </div> </div> </div>