https://class-act.netlify.app/assets/030_modal_system-BAVQn8Ar.js

1import{j as n}from"./index-w8uym0Jr.js";import"./vendor-react-B5kyjNin.js";import"./vendor-auth-3IJ4rw9Z.js";import"./vendor-ui-zVkK_Prl.js";import"./vendor-payment-Cx_eeV9O.js";import"./vendor-framer-CGrNjTbd.js";function r(s){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...s.components};return n.jsxs(n.Fragment,{children:[n.jsx(e.h1,{children:"Modal System"}),`
2`,n.jsx(e.h2,{children:"Overview"}),`
3`,n.jsx(e.p,{children:"The Modal System in ClassAct provides a standardized way to create and manage modals throughout the application. It leverages the Pixel Styles design system for consistent theming and responsive design."}),`
4`,n.jsx(e.p,{children:n.jsx(e.img,{src:"/images/docs/modal-diagram.html",alt:"Modal Architecture"})}),`
5`,n.jsx(e.h2,{children:"Key Components"}),`
6`,n.jsx(e.h3,{children:"1. Modal Context & Provider"}),`
7`,n.jsxs(e.p,{children:["The ",n.jsx(e.code,{children:"ModalContext"})," provides centralized state management for all modals in the application."]}),`
8`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`// Importing the context\r
9import { useModal } from '../context/ModalContext';\r
10\r
11// Using the context\r
12const { openModal, closeModal, isOpen } = useModal();
13`})}),`
14`,n.jsx(e.h3,{children:"2. Modal Component"}),`
15`,n.jsxs(e.p,{children:["The core ",n.jsx(e.code,{children:"Modal"})," component handles:"]}),`
16`,n.jsxs(e.ul,{children:[`
17`,n.jsx(e.li,{children:"Backdrop rendering"}),`
18`,n.jsx(e.li,{children:"Animations with Framer Motion"}),`
19`,n.jsx(e.li,{children:"Focus trapping for accessibility"}),`
20`,n.jsx(e.li,{children:"Keyboard interactions (Escape to close)"}),`
21`,n.jsx(e.li,{children:"Backdrop click handling"}),`
22`]}),`
23`,n.jsx(e.h3,{children:"3. ModalContent Component"}),`
24`,n.jsxs(e.p,{children:["The ",n.jsx(e.code,{children:"ModalContent"})," component provides consistent structure for modal content:"]}),`
25`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`<ModalContent \r
26  title="Modal Title" \r
27  description="Optional description text"\r
28  surface="primary" // Options: base, primary, secondary, accent, brand\r
29>\r
30  {/* Your modal content here */}\r
31</ModalContent>
32`})}),`
33`,n.jsx(e.h2,{children:"Using Modals"}),`
34`,n.jsx(e.h3,{children:"Opening a Modal"}),`
35`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const { openModal } = useModal();\r
36\r
37const handleOpenModal = () => {\r
38  openModal(\r
39    <ModalContent title="Reset Password" description="Enter your email to reset your password">\r
40      <form className={styles.modalForm}>\r
41        <div className={styles.modalInputWrapper}>\r
42          <IoMail className={styles.modalInputIcon} />\r
43          <input \r
44            type="email" \r
45            className={styles.modalInput} \r
46            placeholder="Email" \r
47          />\r
48        </div>\r
49        <div className={styles.modalButtons}>\r
50          <button type="submit" className={styles.primaryButton}>\r
51            Send Reset Link\r
52          </button>\r
53          <button type="button" className={styles.secondaryButton}>\r
54            Cancel\r
55          </button>\r
56        </div>\r
57      </form>\r
58    </ModalContent>\r
59  );\r
60};
61`})}),`
62`,n.jsx(e.h3,{children:"Modal CSS Classes"}),`
63`,n.jsx(e.p,{children:"The Modal system provides these CSS classes:"}),`
64`,n.jsxs(e.ul,{children:[`
65`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"modalForm"})," - Container for form elements"]}),`
66`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"modalInputWrapper"})," - Container for input + icon"]}),`
67`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"modalInputIcon"})," - Styling for input icons"]}),`
68`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"modalInput"})," - Styled input field"]}),`
69`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"modalButtons"})," - Container for button group"]}),`
70`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"primaryButton"})," - Primary action button"]}),`
71`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"secondaryButton"})," - Secondary/cancel button"]}),`
72`]}),`
73`,n.jsx(e.h2,{children:"Accessibility Features"}),`
74`,n.jsx(e.p,{children:"The modal system includes:"}),`
75`,n.jsxs(e.ul,{children:[`
76`,n.jsx(e.li,{children:"Proper focus management (focus is trapped inside the modal)"}),`
77`,n.jsx(e.li,{children:"Keyboard navigation (Tab, Escape)"}),`
78`,n.jsxs(e.li,{children:["ARIA attributes (",n.jsx(e.code,{children:'role="dialog"'}),", ",n.jsx(e.code,{children:'aria-modal="true"'}),")"]}),`
79`,n.jsx(e.li,{children:"Focus restoration when closing"}),`
80`,n.jsx(e.li,{children:"Screen reader support"}),`
81`]}),`
82`,n.jsx(e.h2,{children:"Integration with Pixel Styles"}),`
83`,n.jsxs(e.p,{children:["Modals leverage the Pixel Styles design system via ",n.jsx(e.code,{children:"data-surface"})," attributes:"]}),`
84`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`<ModalContent surface="primary">\r
85  {/* Content */}\r
86</ModalContent>
87`})}),`
88`,n.jsx(e.p,{children:"Available surface options:"}),`
89`,n.jsxs(e.ul,{children:[`
90`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"base"})," - Default modal styling"]}),`
91`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"primary"})," - Primary-colored surface"]}),`
92`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"secondary"})," - Secondary-colored surface"]}),`
93`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"accent"})," - Accent-colored surface"]}),`
94`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"brand"})," - Brand-colored surface"]}),`
95`]}),`
96`,n.jsx(e.h2,{children:"Responsive Design"}),`
97`,n.jsx(e.p,{children:"Modals are fully responsive:"}),`
98`,n.jsxs(e.ul,{children:[`
99`,n.jsx(e.li,{children:"Desktop: Centered card with maximum width"}),`
100`,n.jsx(e.li,{children:"Mobile: Properly sized and centered with appropriate spacing"}),`
101`]}),`
102`,n.jsx(e.h2,{children:"Best Practices"}),`
103`,n.jsxs(e.ol,{children:[`
104`,n.jsxs(e.li,{children:[`
105`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Component Structure"})}),`
106`,n.jsxs(e.ul,{children:[`
107`,n.jsx(e.li,{children:"Create dedicated modal components for reusable modals"}),`
108`,n.jsx(e.li,{children:"Use ModalContent for consistent styling"}),`
109`]}),`
110`]}),`
111`,n.jsxs(e.li,{children:[`
112`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Error Handling"})}),`
113`,n.jsxs(e.ul,{children:[`
114`,n.jsx(e.li,{children:"Use try/catch in modal forms"}),`
115`,n.jsx(e.li,{children:"Display error messages appropriately"}),`
116`]}),`
117`]}),`
118`,n.jsxs(e.li,{children:[`
119`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Accessibility"})}),`
120`,n.jsxs(e.ul,{children:[`
121`,n.jsx(e.li,{children:"Ensure proper tab order in forms"}),`
122`,n.jsx(e.li,{children:"Add descriptive aria-labels"}),`
123`]}),`
124`]}),`
125`,n.jsxs(e.li,{children:[`
126`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Performance"})}),`
127`,n.jsxs(e.ul,{children:[`
128`,n.jsx(e.li,{children:"Avoid opening modals in loops or high-frequency events"}),`
129`,n.jsx(e.li,{children:"Use callbacks wisely in modal content"}),`
130`]}),`
131`]}),`
132`]})]})}function a(s={}){const{wrapper:e}=s.components||{};return e?n.jsx(e,{...s,children:n.jsx(r,{...s})}):r(s)}export{a as default};