mypgs 1.3.6 → 1.3.7

package/templates/react/layout/section.jsx

@@ -0,0 +1,44 @@
+export default function Section() {
+    return (
+        <div pgs="flexColumnSections">
+            <section pgs="section flexColumnElements">
+                <div pgs="container flexColumnTexts">
+                    <strong>Sezione standard</strong>
+                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+                </div>
+            </section>
+
+            <section pgs="sectionFull flexColumnElements">
+                <div pgs="container flexColumnTexts">
+                    <strong>Sezione full-width</strong>
+                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+                </div>
+            </section>
+
+            <section pgs="sectionSpecificity flexColumnElements">
+                <div pgs="container flexColumnTexts">
+                    <strong>Sezione specificità</strong>
+                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+                </div>
+                <div pgs="sectionSpecificity-child container flexColumnTexts">
+                    <strong>Sezione specificità-child</strong>
+                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+                </div>
+            </section>
+
+            <section pgs="sectionMax flexColumnElements" style={{ backgroundColor: "var(--color-primary-soft)" }}>
+                <div pgs="container flexColumnTexts">
+                    <strong>Sezione max-width</strong>
+                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+                </div>
+            </section>
+
+            <section pgs="sectionNoPadding flexColumnElements">
+                <div pgs="container flexColumnTexts">
+                    <strong>Sezione no-padding</strong>
+                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+                </div>
+            </section>
+        </div>
+    );
+}

package/templates/react/patterns/cookieConsent.jsx

@@ -0,0 +1,62 @@
+export default function CookieConsent({
+    enabled = true,
+    gaMeasurementId = "",
+    privacyUrl = "",
+    cookiePolicyUrl = "/cookie-policy/",
+}) {
+    if (!enabled) return null;
+
+    return (
+        <div id="cookieConsent" pgs="cookieConsent" role="dialog" aria-modal="true" data-ga-id={gaMeasurementId} hidden tabIndex="-1">
+            <p><i className="fa-duotone fa-solid fa-cookie-bite"></i> Cookie e privacy <br /></p>
+            <h2>La tua privacy prima di tutto</h2>
+
+            <p>
+                Utilizziamo cookie tecnici per offrire il servizio e, previo consenso, cookie analitici di
+                <strong>Google Analytics</strong> per misurare in modo anonimo il traffico e migliorare i contenuti.
+                Puoi modificare la scelta in qualsiasi momento.
+            </p>
+
+            <p>
+                <a href={privacyUrl} target="_blank" rel="noopener noreferrer">Privacy Policy</a> -
+                <a href={cookiePolicyUrl} target="_blank" rel="noopener noreferrer">Cookie Policy</a>
+            </p>
+
+            <div pgs="cookieConsent-panel flexColumn" role="group" aria-label="Preferenze cookie">
+                <div pgs="flexRow nowrap cookieConsent-featureEssential">
+                    <div>
+                        <p>
+                            <strong>Cookie tecnici</strong>
+                            <br />
+                            <small>Sempre attivi per garantire il corretto funzionamento del sito.</small>
+                        </p>
+                    </div>
+
+                    <span pgs="cookieConsent-panel-badge">Attivi</span>
+                </div>
+
+                <div pgs="flexRow cookieConsent-featureAnalytics">
+                    <label pgs="toggle">
+                        <p>
+                            <strong>Analytics</strong>
+                            <br />
+                            <small>Dati di navigazione raccolti in forma aggregata per statistiche anonime.</small>
+                        </p>
+
+                        <input type="checkbox" pgs="cookieConsent-toggleAnalytics" aria-label="Abilita Google Analytics" />
+                    </label>
+                </div>
+            </div>
+
+            <div pgs="flexRow">
+                <button type="button" pgs="button cookieConsent-actionReject">
+                    <i className="fa-solid fa-duotone fa-sliders"></i>Solo selezionati
+                </button>
+
+                <button type="button" pgs="buttonStrong cookieConsent-actionAccept">
+                    <i className="fa-solid fa-check"></i> Accetta tutto
+                </button>
+            </div>
+        </div>
+    );
+}

package/templates/react/patterns/footer.jsx

@@ -0,0 +1,40 @@
+export default function Footer() {
+    return (
+        <footer pgs="footer">
+            <button pgs="button toggleDarkmode" type="button" aria-label="Cambia tema">
+                <i className="fa-solid fa-moon"></i>
+            </button>
+
+            <section pgs="footer-top section">
+                <div pgs="footer-top-content flex-3">
+                    <div pgs="footer-brand">
+                        <a aria-label="Logo" pgs="logo" href="/">
+                            <span pgs="logo-text">MyPGS</span>
+                        </a>
+                        <p pgs="footer-brand-motto">Componenti frontend riutilizzabili.</p>
+                    </div>
+
+                    <div pgs="footer-content">
+                        <h2>Menu</h2>
+                        <nav pgs="menuFooter" aria-label="Menu footer">
+                            <ul>
+                                <li><a href="/">Home</a></li>
+                                <li><a href="/contatti">Contatti</a></li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </section>
+
+            <section pgs="footer-legal section">
+                <div pgs="footer-legal-content">
+                    <button type="button" pgs="button cookieConsent-actionOpen">Preferenze cookie</button>
+                    <p><a href="">Privacy Policy</a></p>
+                    <p><a href="">Cookie Policy</a></p>
+                    <p><a href="">Termini e Condizioni</a></p>
+                    <p>© 2026 MyPgs. Nessun diritto riservato.</p>
+                </div>
+            </section>
+        </footer>
+    );
+}

package/templates/react/patterns/header.jsx

@@ -0,0 +1,62 @@
+import { useEffect } from "react";
+
+export default function Header() {
+    useEffect(() => {
+        if (localStorage.getItem("screenIsDarkMode") === "true") {
+            document.body.classList.add("darkmode");
+            document.querySelector(":root")?.setAttribute("data-darkmode", "true");
+            document.body.setAttribute("data-darkmode", "true");
+        }
+
+        if (window.innerWidth < 600 && window.pgs) {
+            window.pgs(document.querySelector("header")).state.add("mobileActive");
+            window.pgs(document.querySelector("[pgs~=header-element]")).state.add("mobileActive");
+        }
+    }, []);
+
+    return (
+        <header pgs="header">
+            <div pgs="header-element">
+                <div pgs="header-element-alwaysOn">
+                    <a aria-label="Logo" pgs="logo" href="/">
+                        <span pgs="logo-text">MyPGS</span>
+                    </a>
+                </div>
+
+                <div pgs="header-element-onlyDesktop">
+                    <nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Menu principale">
+                        <ul>
+                            <li><a href="/">Home</a></li>
+                            <li><a href="#componenti">Componenti</a></li>
+                            <li><a href="#layout">Layout</a></li>
+                        </ul>
+                    </nav>
+                </div>
+
+                <div pgs="header-element-onlyMobile"></div>
+
+                <div pgs="header-element-alwaysOnLast">
+                    <button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Cambia tema">
+                        <i className="fa-solid fa-moon"></i>
+                    </button>
+                </div>
+
+                <div pgs="header-element-hamburger modal" pgs-option="containerPGS[header] ">
+                    <button pgs="buttonIcon modal-button modal-close header-element-hamburger-button" type="button"></button>
+
+                    <dialog pgs="modal-dialog" pgs-option="right">
+                        <div pgs="modal-dialog-content">
+                            <nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Menu mobile">
+                                <ul>
+                                    <li><a href="/">Home</a></li>
+                                    <li><a href="#componenti">Componenti</a></li>
+                                    <li><a href="#layout">Layout</a></li>
+                                </ul>
+                            </nav>
+                        </div>
+                    </dialog>
+                </div>
+            </div>
+        </header>
+    );
+}