mypgs 1.3.6 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mypgs",
-    "version": "1.3.6",
+    "version": "1.3.7",
     "description": "MyPGS frontend theme and UI behaviors, with bundled JavaScript and CSS assets.",
     "main": "./dist/javascript/index.js",
     "module": "./assets/javascript/index.js",

package/templates/react/components/accordion.jsx

@@ -0,0 +1,27 @@
+export default function Accordion() {
+    return (
+        <ul pgs="grid-1 gapTexts">
+            <li pgs="accordion">
+                <button pgs="accordion-button" type="button">
+                    <i className="fa-solid fa-circle-question" aria-hidden="true"></i>
+                    <span>Domanda frequente</span>
+                </button>
+
+                <div pgs="accordion-content" hidden>
+                    <p>Risposta di esempio con contenuto testuale riutilizzabile.</p>
+                </div>
+            </li>
+
+            <li pgs="accordion">
+                <button pgs="accordion-button" type="button">
+                    <i className="fa-solid fa-circle-info" aria-hidden="true"></i>
+                    <span>Seconda sezione</span>
+                </button>
+
+                <div pgs="accordion-content" hidden>
+                    <p>Altro contenuto del pannello accordion.</p>
+                </div>
+            </li>
+        </ul>
+    );
+}

package/templates/react/components/breadcumbs.jsx

@@ -0,0 +1,27 @@
+export default function Breadcumbs() {
+    return (
+        <nav aria-label="Breadcrumb">
+            <ul pgs="breadcrumb">
+                <li pgs="breadcrumb-item">
+                    <a href="/">Home</a>
+                    <span pgs="breadcrumb-item-separator" aria-hidden="true">
+                        &gt;
+                    </span>
+                </li>
+
+                <li pgs="breadcrumb-item">
+                    <a href="/blog">Blog</a>
+                    <span pgs="breadcrumb-item-separator" aria-hidden="true">
+                        &gt;
+                    </span>
+                </li>
+
+                <li pgs="breadcrumb-item">
+                    <span aria-current="page">
+                        Articolo di prova
+                    </span>
+                </li>
+            </ul>
+        </nav>
+    );
+}

package/templates/react/components/button.jsx

@@ -0,0 +1,33 @@
+export default function Button() {
+    return (
+        <div pgs="flexRow">
+            <a pgs="button" href="#">
+                <i className="fa-duotone fa-solid fa-store"></i>
+                About
+            </a>
+
+            <button pgs="button" type="button" pgs-option="buttonReverse">
+                Avanti
+                <i className="fa-solid fa-arrow-right" aria-hidden="true"></i>
+            </button>
+
+            <button pgs="buttonStrong" type="button">
+                <i className="fa-solid fa-check" aria-hidden="true"></i>
+                Submit
+            </button>
+
+            <button pgs="buttonIcon" type="button" aria-label="Impostazioni">
+                <i className="fa-solid fa-gear" aria-hidden="true"></i>
+            </button>
+
+            <button pgs="buttonMini" type="button" aria-label="Informazioni">
+                <i className="fa-solid fa-info" aria-hidden="true"></i>
+            </button>
+
+            <button pgs="buttonBig" type="button" aria-label="Bottone grande">
+                <i className="fa-solid fa-rocket" aria-hidden="true"></i>
+                Bottone grande
+            </button>
+        </div>
+    );
+}

package/templates/react/components/card.jsx

@@ -0,0 +1,27 @@
+export default function Card() {
+    return (
+        <article pgs="card flexColumn">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Immagine segnaposto" />
+
+            <div pgs="flexColumnTexts">
+                <h3>Card riutilizzabile</h3>
+                <p>Contenuto descrittivo della card, adatto a liste, anteprime e griglie.</p>
+                <a pgs="button" href="#">Leggi di piu</a>
+            </div>
+        </article>
+    );
+}
+export default function CardLink() {
+    return (
+        <article pgs="card">
+            <a pgs="flexColumn" href="">
+                <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Immagine segnaposto" />
+
+                <div pgs="flexColumnTexts">
+                    <h3>Card riutilizzabile</h3>
+                    <p>Contenuto descrittivo della card, adatto a liste, anteprime e griglie.</p>
+                </div>
+            </a>
+        </article>
+    );
+}

package/templates/react/components/dropdown.jsx

@@ -0,0 +1,29 @@
+const dropdowns = [
+    ["Bottom center", "Contenuto bottom center"],
+    ["Top left", "Contenuto top left", "position[top left]"],
+    ["Top center", "Contenuto top center", "position[top center]"],
+    ["Top right", "Contenuto top right", "position[top right]"],
+    ["Bottom left", "Contenuto bottom left", "position[bottom left]"],
+    ["Bottom right", "Contenuto bottom right", "position[bottom right]"],
+    ["Left center", "Contenuto left center", "position[left center]"],
+    ["Right center", "Contenuto right center", "position[right center]"],
+];
+
+export default function Dropdown() {
+    return (
+        <div pgs="flexRow">
+            {dropdowns.map(([label, content, option]) => (
+                <span key={label} pgs="dropdown" {...(option ? { "pgs-option": option } : {})}>
+                    <button pgs="dropdown-button button" pgs-option="buttonReverse" type="button">
+                        {label}
+                        <i className="fa-solid fa-chevron-down" aria-hidden="true"></i>
+                    </button>
+
+                    <div pgs="dropdown-content">
+                        {content}
+                    </div>
+                </span>
+            ))}
+        </div>
+    );
+}

package/templates/react/components/form.jsx

@@ -0,0 +1,30 @@
+export default function Form() {
+    return (
+        <form pgs="form" action="#" method="post">
+            <label pgs="label" htmlFor="form-name">
+                Nome
+            </label>
+            <input id="form-name" pgs="input" type="text" name="name" placeholder="Mario Rossi" required data-form-field-message="Inserisci il nome" />
+
+            <label pgs="label" htmlFor="form-email">
+                Email
+            </label>
+            <input id="form-email" pgs="input" type="email" name="email" placeholder="nome@example.com" required data-form-field-message="Inserisci una email valida" />
+
+            <label pgs="label" htmlFor="form-message">
+                Messaggio
+            </label>
+            <textarea id="form-message" pgs="textarea" name="message" rows="5" placeholder="Scrivi il messaggio"></textarea>
+
+            <label pgs="toggle">
+                <span>Accetto la privacy policy</span>
+                <input type="checkbox" name="privacy" required />
+            </label>
+
+            <button pgs="buttonStrong" type="submit">
+                <i className="fa-solid fa-paper-plane" aria-hidden="true"></i>
+                Invia
+            </button>
+        </form>
+    );
+}

package/templates/react/components/logo.jsx

@@ -0,0 +1,14 @@
+export default function Logo() {
+    return (
+        <a aria-label="Logo" pgs="logo logo-darkmode" href="/">
+            <img pgs="logo-image" src="https://placehold.co/240x80?text=MyPGS" alt="MyPGS" />
+        </a>
+    );
+}
+export default function LogoText() {
+    return (
+        <a aria-label="Logo testuale" pgs="logo" href="/">
+            <span pgs="logo-text">MyPGS</span>
+        </a>
+    );
+}

package/templates/react/components/menu.jsx

@@ -0,0 +1,37 @@
+const menuItems = (
+    <ul>
+        <li>
+            <a href="/" aria-current="page">
+                <i className="fa-solid fa-house" aria-hidden="true"></i>
+                <span>Home</span>
+            </a>
+        </li>
+        <li>
+            <a href="/servizi">
+                <i className="fa-solid fa-layer-group" aria-hidden="true"></i>
+                <span>Servizi</span>
+            </a>
+            <ul>
+                <li><a href="/servizi/uno">Servizio uno</a></li>
+                <li><a href="/servizi/due">Servizio due</a></li>
+            </ul>
+        </li>
+    </ul>
+);
+
+export default function MenuHorizontal() {
+    return (
+        <nav pgs="menu" pgs-option="horizontal" aria-label="Menu orizzontale">
+            {menuItems}
+        </nav>
+    );
+}
+
+export default function MenuVertical() {
+    return (
+
+        <nav pgs="menu" pgs-option="vertical" aria-label="Menu verticale">
+            {menuItems}
+        </nav>
+    );
+}

package/templates/react/components/modal.jsx

@@ -0,0 +1,84 @@
+export default function Modal() {
+    return (
+        <>
+            <div pgs="modal" pgs-option="containerID[modal-container]">
+                <button pgs="modal-button button" type="button">
+                    <i className="fa-solid fa-window-maximize"></i> Apri modale
+                </button>
+
+                <dialog>
+                    <div pgs="modal-dialog-content">
+                        <div pgs="modal-dialog-content-header">
+                            <h3>Modale di esempio</h3>
+                        </div>
+
+                        <div pgs="modal-dialog-content-scroll">
+                            <p>Contenuto della modale. Il bottone di chiusura viene aggiunto automaticamente se non presente.</p>
+                        </div>
+                    </div>
+                </dialog>
+            </div>
+
+            <div pgs="modal" pgs-option="containerID[modal-container]">
+                <button pgs="modal-button button" type="button">
+                    <i className="fa-solid fa-window-maximize"></i> Apri modale right
+                </button>
+
+                <dialog pgs-option="right">
+                    <div pgs="modal-dialog-content">
+                        <div pgs="modal-dialog-content-header">
+                            <h3>Modale laterale</h3>
+                        </div>
+
+                        <div pgs="modal-dialog-content-scroll">
+                            <p>Contenuto della modale con <code>pgs-option=&quot;right&quot;</code>.</p>
+                        </div>
+                    </div>
+                </dialog>
+            </div>
+
+            <div pgs="modal" pgs-option="containerID[modal-container]">
+                <button pgs="modal-button button" type="button">
+                    <i className="fa-solid fa-window-maximize"></i> Apri modale left
+                </button>
+
+                <dialog pgs-option="left">
+                    <div pgs="modal-dialog-content">
+                        <div pgs="modal-dialog-content-header">
+                            <h3>Modale laterale sinistra</h3>
+                        </div>
+
+                        <div pgs="modal-dialog-content-scroll">
+                            <p>Contenuto della modale con <code>pgs-option=&quot;left&quot;</code>.</p>
+                        </div>
+                    </div>
+                </dialog>
+            </div>
+
+            <div pgs="modal">
+                <button pgs="modal-button button" type="button">
+                    <i className="fa-solid fa-floppy-disk"></i> Conferma salvataggio
+                </button>
+
+                <dialog pgs-option="topLevel">
+                    <div pgs="modal-dialog-content">
+                        <div pgs="modal-dialog-content-header">
+                            <h3>Salvare le modifiche?</h3>
+                        </div>
+
+                        <div pgs="modal-dialog-content-scroll flexColumnElements">
+                            <p>Hai modifiche non salvate. Conferma per applicarle oppure annulla per tornare alla pagina.</p>
+
+                            <div pgs="flexRow">
+                                <button pgs="button modal-close" type="button">Annulla</button>
+                                <button pgs="buttonStrong" type="button">Salva modifiche</button>
+                            </div>
+                        </div>
+                    </div>
+                </dialog>
+            </div>
+
+            <div id="modal-container"></div>
+        </>
+    );
+}

package/templates/react/components/notification.jsx

@@ -0,0 +1,31 @@
+const notificationData = {
+    title: "Titolo",
+    message: "Messaggio",
+    element: "notification",
+    type: "info",
+    icon: null,
+    duration: "-1",
+    link: null,
+};
+
+const toastData = {
+    title: "Benvetuto",
+    message: "Messaggio",
+    element: "toast",
+    type: "info",
+    icon: null,
+    duration: "3000",
+    link: null,
+};
+
+export default function Notification() {
+    return (
+        <>
+            <div pgs="notification" aria-live="polite"></div>
+            <div pgs="toast" aria-live="polite"></div>
+
+            <div pgs="hidden notificationTrigger" data-notification={JSON.stringify(notificationData)}></div>
+            <div pgs="hidden notificationTrigger" data-notification={JSON.stringify(toastData)}></div>
+        </>
+    );
+}

package/templates/react/components/searchbar.jsx

@@ -0,0 +1,34 @@
+export default function Searchbar() {
+    return (
+        <form pgs="buttonNohover searchbar" autoComplete="off" action="" method="get">
+            <button type="submit" title="Cerca"><i className="fa-solid fa-search"></i></button>
+            <input type="search" name="s" placeholder="Cerca" defaultValue="" />
+        </form>
+    );
+}
+export default function SearchbarModal() {
+    return (
+
+        <div pgs="modal searchbar-modal" pgs-option="containerPGS[header]">
+            <button type="button" pgs="modal-button buttonIcon" title="Cerca">
+                <i className="fa-solid fa-search"></i>
+            </button>
+
+            <dialog>
+                <div pgs="flexRow section searchbar-mobile">
+                    <form pgs="buttonNohover searchbar" autoComplete="off" action="/" method="get">
+                        <button type="submit" title="Cerca">
+                            <i className="fa-solid fa-search"></i>
+                        </button>
+
+                        <input type="search" name="s" placeholder="Cerca" defaultValue="" />
+                    </form>
+
+                    <button type="button" pgs="modal-close buttonIcon">
+                        <i className="fa-solid fa-close"></i>
+                    </button>
+                </div>
+            </dialog>
+        </div>
+    );
+}

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