mypgs 1.3.4 → 1.3.7

package/templates/react/components/slides.jsx

@@ -0,0 +1,25 @@
+const slides = [
+    ["Slide uno", "Contenuto della prima slide.", "https://placehold.co/800x500?text=Slide+1", "Slide 1"],
+    ["Slide due", "Contenuto della seconda slide.", "https://placehold.co/800x500?text=Slide+2", "Slide 2"],
+    ["Slide tre", "Contenuto della terza slide.", "https://placehold.co/800x500?text=Slide+3", "Slide 3"],
+];
+
+export default function Slides() {
+    return (
+        <div pgs="slides" pgs-option="singleScroll shadowDesktop">
+            <ul pgs="slides-container">
+                {slides.map(([title, text, src, alt]) => (
+                    <li key={title}>
+                        <article pgs="card flexColumn">
+                            <img pgs="card-img imgCover" src={src} alt={alt} />
+                            <div pgs="flexColumnTexts">
+                                <h3>{title}</h3>
+                                <p>{text}</p>
+                            </div>
+                        </article>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

package/templates/react/components/stepTabs.jsx

@@ -0,0 +1,40 @@
+export default function StepTabs() {
+    return (
+        <div pgs="stepTabs flexColumnElements">
+            <div pgs="stepTabs-dots" aria-label="Avanzamento"></div>
+
+            <div pgs="stepTabs-container">
+                <section pgs="tab flexColumnTexts" tabIndex="-1" pgs-option="tabIcon[fa-user]">
+                    <h3>Dati personali</h3>
+                    <p>Contenuto del primo tab.</p>
+                </section>
+
+                <section pgs="tab flexColumnTexts" tabIndex="-1" pgs-option="tabIcon[fa-list-check]">
+                    <h3>Preferenze</h3>
+                    <p>Contenuto del secondo tab.</p>
+                </section>
+
+                <section pgs="tab flexColumnTexts" tabIndex="-1" pgs-option="tabIcon[fa-check]">
+                    <h3>Conferma</h3>
+                    <p>Contenuto del terzo tab.</p>
+                </section>
+            </div>
+
+            <div pgs="flexRow">
+                <button pgs="stepTabs-prev button" type="button">
+                    <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
+                    Indietro
+                </button>
+
+                <button pgs="stepTabs-restart button" type="button">
+                    Ricomincia
+                </button>
+
+                <button pgs="stepTabs-next button" pgs-option="buttonReverse" type="button">
+                    Avanti
+                    <i className="fa-solid fa-arrow-right" aria-hidden="true"></i>
+                </button>
+            </div>
+        </div>
+    );
+}

package/templates/react/components/steps.jsx

@@ -0,0 +1,21 @@
+const steps = [
+    ["1", "Primo step", "Descrizione del primo passaggio."],
+    ["2", "Secondo step", "Descrizione del secondo passaggio."],
+    ["3", "Terzo step", "Descrizione del terzo passaggio."],
+];
+
+export default function Steps() {
+    return (
+        <ol pgs="steps">
+            {steps.map(([number, title, text]) => (
+                <li key={number} pgs="steps-step">
+                    <span pgs="steps-step-circle">{number}</span>
+                    <div pgs="steps-step-content">
+                        <h3>{title}</h3>
+                        <p>{text}</p>
+                    </div>
+                </li>
+            ))}
+        </ol>
+    );
+}

package/templates/react/components/table.jsx

@@ -0,0 +1,28 @@
+export default function Table() {
+    return (
+        <div pgs="table">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Nome</th>
+                        <th>Stato</th>
+                        <th>Data</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    <tr>
+                        <td>Elemento uno</td>
+                        <td>Attivo</td>
+                        <td>2026-01-01</td>
+                    </tr>
+                    <tr>
+                        <td>Elemento due</td>
+                        <td>Bozza</td>
+                        <td>2026-02-01</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    );
+}

package/templates/react/components/tooltip.jsx

@@ -0,0 +1,12 @@
+export default function Tooltip() {
+    return (
+        <span pgs="dropdown tooltip">
+            <button pgs="dropdown-button buttonMini tooltip-button" title="open-tooltip" type="button">
+                <i className="fa-solid fa-info"></i>
+            </button>
+            <div pgs="dropdown-content tooltip-content">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto hic, id consectetur facilis et, iste animi minima quidem praesentium omnis quod. Quidem provident ad cum aut reprehenderit laboriosam eum placeat.
+            </div>
+        </span>
+    );
+}

package/templates/react/layout/body.jsx

@@ -0,0 +1,7 @@
+export default function Body({ children }) {
+    return (
+        <div pgs="bodyBase bodyImg bodyText bodyHeading">
+            {children}
+        </div>
+    );
+}

package/templates/react/layout/flex.jsx

@@ -0,0 +1,36 @@
+const columns = [
+    ["Colonna uno", "Contenuto della prima colonna."],
+    ["Colonna due", "Contenuto della seconda colonna."],
+    ["Colonna tre", "Contenuto della terza colonna."],
+    ["Colonna quattro", "Contenuto della quarta colonna."],
+    ["Colonna cinque", "Contenuto della quinta colonna."],
+    ["Colonna sei", "Contenuto della sesta colonna."],
+];
+
+function ColumnCard({ title, text }) {
+    return (
+        <article pgs="card flexColumnTexts">
+            <strong>{title}</strong>
+            <p>{text}</p>
+        </article>
+    );
+}
+
+export default function Flex() {
+    return (
+        <>
+            <div pgs="container flexColumnTexts">
+                <strong>Sezione standard</strong>
+                <p>Contenuto centrato dentro una sezione MyPGS.</p>
+            </div>
+
+            {[2, 3, 4, 6].map((count) => (
+                <div key={count} pgs={`flex-${count}`}>
+                    {columns.slice(0, count).map(([title, text]) => (
+                        <ColumnCard key={title} title={title} text={text} />
+                    ))}
+                </div>
+            ))}
+        </>
+    );
+}

package/templates/react/layout/grid.jsx

@@ -0,0 +1,36 @@
+const columns = [
+    ["Colonna uno", "Contenuto della prima colonna."],
+    ["Colonna due", "Contenuto della seconda colonna."],
+    ["Colonna tre", "Contenuto della terza colonna."],
+    ["Colonna quattro", "Contenuto della quarta colonna."],
+    ["Colonna cinque", "Contenuto della quinta colonna."],
+    ["Colonna sei", "Contenuto della sesta colonna."],
+];
+
+function ColumnCard({ title, text }) {
+    return (
+        <article pgs="card flexColumnTexts">
+            <strong>{title}</strong>
+            <p>{text}</p>
+        </article>
+    );
+}
+
+export default function Grid() {
+    return (
+        <>
+            <div pgs="container flexColumnTexts">
+                <strong>Sezione standard</strong>
+                <p>Contenuto centrato dentro una sezione MyPGS.</p>
+            </div>
+
+            {[2, 3, 4, 6].map((count) => (
+                <div key={count} pgs={`grid-${count}`}>
+                    {columns.slice(0, count).map(([title, text]) => (
+                        <ColumnCard key={title} title={title} text={text} />
+                    ))}
+                </div>
+            ))}
+        </>
+    );
+}

package/templates/react/layout/pageShell.jsx

@@ -0,0 +1,48 @@
+const contentText = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolore veniam nulla hic voluptatum harum illo voluptatem quos. Id quibusdam nemo, mollitia iusto quisquam tenetur doloremque corrupti natus nisi est sed consectetur deserunt? Fugiat consectetur iure aut id voluptate unde autem eius facilis dolorum? Eveniet, sit, excepturi iusto porro eos temporibus illum non ut sunt ex aut earum neque. Iure harum similique autem commodi ratione enim quisquam soluta rem, eius dolor officiis necessitatibus voluptatibus obcaecati vel sint iusto. Eligendi reiciendis aut error rem? Hic aliquid tenetur porro itaque quaerat excepturi consequatur veniam, et alias molestiae, eius odio quae maiores suscipit iure voluptatibus sed dolor facere ipsa quod libero necessitatibus, placeat natus. Doloribus esse nobis culpa ab ut dolorem id expedita nesciunt necessitatibus ipsam natus accusantium eius eveniet eum, distinctio quos modi perspiciatis earum sequi nostrum consequatur quibusdam? Blanditiis iusto possimus officia odio animi repudiandae? Repellendus autem ut soluta facere accusamus magni aut architecto cumque cupiditate. Nostrum officiis, tenetur consequuntur quaerat alias animi debitis? Quae quas placeat iure alias totam quaerat fugit recusandae sed, earum ipsa nihil molestiae quam odit itaque, odio asperiores, mollitia porro ratione tempora laboriosam. Incidunt aliquam nobis sunt ut molestiae nam animi placeat neque vero ratione? Eaque?";
+
+function Aside({ side }) {
+    return (
+        <aside pgs={`pageShell-aside${side}`}>
+            <div pgs="flexColumnTexts">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab modi ut sunt est illum accusantium dolores eum aut cum itaque.</p>
+            </div>
+        </aside>
+    );
+}
+
+function MainContent() {
+    return (
+        <main pgs="pageShell-content">
+            <section pgs="flexColumnElements" id="sezione-uno">
+                <strong>Lorem ipsum</strong>
+                <p>{contentText}</p>
+            </section>
+        </main>
+    );
+}
+
+export default function PageShell() {
+    return (
+        <>
+            <div pgs="pageShell">
+                <Aside side="Left" />
+                <MainContent />
+                <Aside side="Right" />
+            </div>
+
+            <div pgs="pageShell">
+                <Aside side="Left" />
+                <MainContent />
+            </div>
+
+            <div pgs="pageShell">
+                <MainContent />
+                <Aside side="Right" />
+            </div>
+
+            <div pgs="pageShell">
+                <MainContent />
+            </div>
+        </>
+    );
+}

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>
+    );
+}