mypgs 1.0.0 → 1.1.5

package/templates/components/md-accordion.html

@@ -0,0 +1,23 @@
+<ul pgs="grid-1 gapTexts">
+    <li pgs="accordion" class="accordion-item">
+        <button pgs="accordion-button" type="button">
+            <i class="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" class="accordion-item">
+        <button pgs="accordion-button" type="button">
+            <i class="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/components/md-breadcumbs.html

@@ -1,23 +1,23 @@
 <nav aria-label="Breadcrumb">
-    <ul pgs="breadcrumbs">
-        <li pgs="breadcrumbs-item">
+    <ul pgs="breadcrumb">
+        <li pgs="breadcrumb-item">
             <a href="/">Home</a>
-            <span pgs="breadcrumbs-item-separator" aria-hidden="true">
+            <span pgs="breadcrumb-item-separator" aria-hidden="true">
                 >
             </span>
         </li>
 
-        <li pgs="breadcrumbs-item">
+        <li pgs="breadcrumb-item">
             <a href="/blog">Blog</a>
-            <span pgs="breadcrumbs-item-separator" aria-hidden="true">
+            <span pgs="breadcrumb-item-separator" aria-hidden="true">
                 >
             </span>
         </li>
 
-        <li pgs="breadcrumbs-item">
-            <span pgs="breadcrumbs-item-current" aria-current="page">
+        <li pgs="breadcrumb-item">
+            <span aria-current="page">
                 Articolo di prova
             </span>
         </li>
     </ul>
-</nav>
+</nav>

package/templates/components/md-button.html

@@ -0,0 +1,29 @@
+<div pgs="flexRow">
+    <a pgs="button" href="#">
+        <i class="fa-duotone fa-solid fa-store"></i>
+        About
+    </a>
+
+    <button pgs="button" type="button" pgs-option="buttonReverse">
+        Avanti
+        <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+    </button>
+
+    <button pgs="buttonStrong" type="button">
+        <i class="fa-solid fa-check" aria-hidden="true"></i>
+        Submit
+    </button>
+
+    <button pgs="buttonIcon" type="button" aria-label="Impostazioni">
+        <i class="fa-solid fa-gear" aria-hidden="true"></i>
+    </button>
+
+    <button pgs="buttonMini" type="button" aria-label="Informazioni">
+        <i class="fa-solid fa-info" aria-hidden="true"></i>
+    </button>
+
+    <button pgs="buttonBig" type="button" aria-label="Bottone grande">
+        <i class="fa-solid fa-rocket" aria-hidden="true"></i>
+        Bottone grande
+    </button>
+</div>

package/templates/components/md-card.html

@@ -0,0 +1,23 @@
+<div pgs="flex-2">
+
+    <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>
+    
+    <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>
+</div>

package/templates/components/md-dropdown.html

@@ -0,0 +1,16 @@
+<span pgs="dropdown">
+    <button pgs="dropdown-button button" pgs-option="buttonReverse" type="button">
+        Apri menu
+        <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
+    </button>
+
+    <div pgs="dropdown-content">
+        <nav aria-label="Menu dropdown">
+            <ul>
+                <li><a href="#">Voce uno</a></li>
+                <li><a href="#">Voce due</a></li>
+                <li><a href="#">Voce tre</a></li>
+            </ul>
+        </nav>
+    </div>
+</span>

package/templates/components/md-form.html

@@ -0,0 +1,26 @@
+<form pgs="form" action="#" method="post">
+    <label pgs="label" for="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" for="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" for="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 class="fa-solid fa-paper-plane" aria-hidden="true"></i>
+        Invia
+    </button>
+</form>

package/templates/components/md-logo.html

@@ -0,0 +1,7 @@
+<a aria-label="Logo" pgs="logo logo-darkmode" href="/">
+    <img pgs="logo-image" src="https://placehold.co/240x80?text=MyPGS" alt="MyPGS">
+</a>
+
+<a aria-label="Logo testuale" pgs="logo" href="/">
+    <span pgs="logo-text">MyPGS</span>
+</a>

package/templates/components/md-menu.html

@@ -1,6 +1,40 @@
-<nav pgs="menuHorizontal">
-    <ul id="menu-principale" class="primary-menu">
-        <li id="menu-item-1752" class="menu-item"><a href="http://" aria-current="page"><i class="fa-duotone fa-icons"></i> <span>Menu1</span></a></li>
-        <li id="menu-item-2420" class="menu-item"><a href="http://"><i class="fa-duotone fa-shop"></i> <span>Menu2</span></a></li>
+<nav pgs="menuHorizontal" aria-label="Menu orizzontale">
+    <ul class="primary-menu">
+        <li class="menu-item current-menu-item">
+            <a href="/" aria-current="page">
+                <i class="fa-solid fa-house" aria-hidden="true"></i>
+                <span>Home</span>
+            </a>
+        </li>
+        <li class="menu-item menu-item-has-children">
+            <a href="/servizi">
+                <i class="fa-solid fa-layer-group" aria-hidden="true"></i>
+                <span>Servizi</span>
+            </a>
+            <ul class="sub-menu">
+                <li class="menu-item"><a href="/servizi/uno">Servizio uno</a></li>
+                <li class="menu-item"><a href="/servizi/due">Servizio due</a></li>
+            </ul>
+        </li>
+        <li class="menu-item">
+            <a href="/contatti">
+                <i class="fa-solid fa-envelope" aria-hidden="true"></i>
+                <span>Contatti</span>
+            </a>
+        </li>
     </ul>
-</nav>
+</nav>
+
+<nav pgs="menuVertical" aria-label="Menu verticale">
+    <ul>
+        <li class="menu-item"><a href="#">Voce verticale uno</a></li>
+        <li class="menu-item"><a href="#">Voce verticale due</a></li>
+    </ul>
+</nav>
+
+<nav pgs="menuFooter" aria-label="Menu footer">
+    <ul>
+        <li class="menu-item"><a href="/privacy-policy">Privacy Policy</a></li>
+        <li class="menu-item"><a href="/cookie-policy">Cookie Policy</a></li>
+    </ul>
+</nav>

package/templates/components/md-modal.html

@@ -0,0 +1,19 @@
+<div pgs="modal" pgs-option="containerID[modal-container]">
+    <button pgs="modal-button button" type="button">
+        <i class="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 id="modal-container"></div>

package/templates/components/md-notification.html

@@ -1,3 +1,6 @@
+<div pgs="notification" aria-live="polite"></div>
+<div pgs="toast" aria-live="polite"></div>
+
 <div pgs="hidden notificationTrigger" data-notification='{
         "title":"Titolo",
         "message":"Messaggio",
@@ -7,4 +10,4 @@
         "duration":"-1",
         "link":null
     }'>
-</div>
+</div>

package/templates/components/md-searchbar.html

@@ -1,4 +1,9 @@
-<div pgs="modal searchbar-modal" pgs-option="containerPgs[header]">
+<form pgs="buttonNohover searchbar" autocomplete="off" action="" method="get">
+    <button type="submit" title="Cerca"><i class="fa-solid fa-search"></i></button>
+    <input type="search" name="s" placeholder="Cerca" value="">
+</form>
+
+<div pgs="modal searchbar-modal" pgs-option="containerPGS[header]">
 
     <button type="button" pgs="modal-button buttonIcon" title="Cerca">
         <i class="fa-solid fa-search"></i>

package/templates/components/md-slides.html

@@ -0,0 +1,33 @@
+<div pgs="slides" class="slides" pgs-option="singleScroll shadowDesktop">
+    <ul pgs="slides-container" class="slides-container">
+        <li class="slides-ul-li">
+            <article pgs="card flexColumn">
+                <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+1" alt="Slide 1">
+                <div pgs="flexColumnTexts">
+                    <h3>Slide uno</h3>
+                    <p>Contenuto della prima slide.</p>
+                </div>
+            </article>
+        </li>
+
+        <li class="slides-ul-li">
+            <article pgs="card flexColumn">
+                <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+2" alt="Slide 2">
+                <div pgs="flexColumnTexts">
+                    <h3>Slide due</h3>
+                    <p>Contenuto della seconda slide.</p>
+                </div>
+            </article>
+        </li>
+
+        <li class="slides-ul-li">
+            <article pgs="card flexColumn">
+                <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+3" alt="Slide 3">
+                <div pgs="flexColumnTexts">
+                    <h3>Slide tre</h3>
+                    <p>Contenuto della terza slide.</p>
+                </div>
+            </article>
+        </li>
+    </ul>
+</div>

package/templates/components/md-stepTabs.html

@@ -0,0 +1,36 @@
+<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 class="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 class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+        </button>
+    </div>
+</div>

package/templates/components/md-steps.html

@@ -0,0 +1,25 @@
+<ol pgs="steps" class="steps">
+    <li pgs="steps-step" class="step_li">
+        <span pgs="steps-step-circle">1</span>
+        <div pgs="steps-step-content" class="step_li-content">
+            <h3>Primo step</h3>
+            <p>Descrizione del primo passaggio.</p>
+        </div>
+    </li>
+
+    <li pgs="steps-step" class="step_li">
+        <span pgs="steps-step-circle">2</span>
+        <div pgs="steps-step-content" class="step_li-content">
+            <h3>Secondo step</h3>
+            <p>Descrizione del secondo passaggio.</p>
+        </div>
+    </li>
+
+    <li pgs="steps-step" class="step_li">
+        <span pgs="steps-step-circle">3</span>
+        <div pgs="steps-step-content" class="step_li-content">
+            <h3>Terzo step</h3>
+            <p>Descrizione del terzo passaggio.</p>
+        </div>
+    </li>
+</ol>

package/templates/components/md-table.html

@@ -0,0 +1,24 @@
+<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/components/md-tooltip.html

@@ -1,5 +1,6 @@
 <span pgs="dropdown tooltip">
     <button pgs="dropdown-button buttonMini tooltip-button" title="open-tooltip" type="button"><i class="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/demo.css

@@ -0,0 +1,51 @@
+.primary-menu {
+    overflow: auto;
+}
+
+pre {
+    display: flex;
+
+    code {
+        overflow: auto;
+        width: 100%;
+    }
+}
+
+.template-title {
+    color: var(--color-primary);
+    display: flex;
+    align-items: center;
+    gap: 30px;
+    text-transform: capitalize;
+
+    &::before {
+        content: "";
+        flex-shrink: 1;
+        min-inline-size: 0;
+        height: 3px;
+        border-radius: 3px;
+        width: 100%;
+        background-color: var(--color-tertiary-soft);
+        display: block;
+    }
+
+    strong {
+        flex: 0 0 auto;
+        color: var(--color-primary);
+    }
+
+    &::after {
+        content: "";
+        flex-shrink: 1;
+        min-inline-size: 0;
+        height: 3px;
+        border-radius: 3px;
+        width: 100%;
+        background-color: var(--color-tertiary-soft);
+        display: block;
+    }
+}
+
+[pgs~=buttonBig]{
+    max-width: 300px;
+}

package/templates/demo.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="it" pgs="htmlBase initP">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MyPGS templates demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <link rel="stylesheet" href="../dist/css/index.css">
+    <link rel="stylesheet" href="demo.css">
+</head>
+
+<body pgs="bodyBase bodyImg bodyText bodyHeading" style="background-color: var(--color-box2);">
+    <div id="templates-demo-layouts-before"></div>
+    <main pgs="main" id="templates-demo-components"></main>
+    <div id="templates-demo-layouts" pgs="flexColumnSections"></div>
+
+    <script src="./demo.js"></script>
+</body>
+
+</html>

package/templates/demo.js

@@ -0,0 +1,141 @@
+
+if (localStorage.getItem("screenIsDarkMode") === "true") {
+    document.body.classList.add("darkmode");
+    document.querySelector(":root").setAttribute("data-darkmode", "true");
+    document.body.setAttribute("data-darkmode", "true");
+}
+
+
+const templateFiles = [
+    "components/md-tooltip.html",
+    "components/md-modal.html",
+    "components/md-stepTabs.html",
+    "layout/md-header.html",
+    "components/md-accordion.html",
+    "components/md-breadcumbs.html",
+    "components/md-button.html",
+    "components/md-card.html",
+    "components/md-dropdown.html",
+    "components/md-form.html",
+    "components/md-logo.html",
+    "components/md-menu.html",
+    "components/md-searchbar.html",
+    "components/md-slides.html",
+    "components/md-steps.html",
+    "components/md-table.html",
+    "layout/md-body.html",
+    "layout/md-cookieConsent.html",
+    "layout/md-section.html",
+    "layout/md-pageShell.html",
+    "layout/md-footer.html",
+    "components/md-notification.html",
+];
+
+function getTemplateTitle(path) {
+    return path
+        .replace(".html", "")
+        .replace("/", " / ")
+        .replace("md-", "");
+}
+
+function renderSourceTemplate(section, html) {
+    const pre = document.createElement("pre");
+    const code = document.createElement("code");
+    code.textContent = html.trim();
+    pre.append(code);
+    section.append(pre);
+}
+
+function renderTemplate(section, path, html) {
+    const content = document.createElement("div");
+    content.setAttribute("pgs", "container flexColumnElements");
+    content.innerHTML = html;
+    section.append(content);
+}
+
+function renderLayout(root, path, html) {
+    if (path === "layout/md-body.html") {
+        const section = document.createElement("section");
+        section.setAttribute("pgs", "section flexColumnElements");
+        section.dataset.template = path;
+
+        const title = document.createElement("h2");
+        title.textContent = getTemplateTitle(path);
+        section.append(title);
+        renderSourceTemplate(section, html);
+        root.append(section);
+        return;
+    }
+
+    const template = document.createElement("template");
+    template.innerHTML = html.trim();
+    root.append(template.content.cloneNode(true));
+}
+
+function getLayoutRoot(path, beforeRoot, afterRoot) {
+    if (path === "layout/md-header.html") return beforeRoot;
+    return afterRoot;
+}
+
+async function loadTemplate(path) {
+    const response = await fetch(path);
+    if (!response.ok) {
+        throw new Error(`${path}: ${response.status}`);
+    }
+    return response.text();
+}
+
+function loadPgsJavascript() {
+    const script = document.createElement("script");
+    script.src = "../dist/javascript/index.js";
+    document.body.append(script);
+}
+
+async function bootDemo() {
+    const componentsRoot = document.getElementById("templates-demo-components");
+    const layoutsBeforeRoot = document.getElementById("templates-demo-layouts-before");
+    const layoutsRoot = document.getElementById("templates-demo-layouts");
+
+    for (const path of templateFiles) {
+        const isLayout = path.startsWith("layout/");
+
+        if (isLayout) {
+            const layoutRoot = getLayoutRoot(path, layoutsBeforeRoot, layoutsRoot);
+
+            try {
+                const html = await loadTemplate(path);
+                renderLayout(layoutRoot, path, html);
+            } catch (error) {
+                const message = document.createElement("p");
+                message.textContent = `Template non caricato: ${error.message}`;
+                layoutRoot.append(message);
+            }
+
+            continue;
+        }
+
+        const section = document.createElement("section");
+        section.setAttribute("pgs", "section flexColumnElements");
+        section.dataset.template = path;
+
+        const title = document.createElement("p");
+        title.classList.add("template-title");
+        title.innerHTML = "<strong>" + getTemplateTitle(path) + "</strong>";
+        section.append(title);
+
+        try {
+            const html = await loadTemplate(path);
+            renderTemplate(section, path, html);
+        } catch (error) {
+            const message = document.createElement("p");
+            message.textContent = `Template non caricato: ${error.message}`;
+            section.append(message);
+        }
+
+        componentsRoot.append(section);
+    }
+
+    loadPgsJavascript();
+}
+
+bootDemo();

package/templates/layout/md-body.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="it-IT" pgs="htmlBase">
+<html lang="it-IT" pgs="htmlBase initP">
 
 <head>
 	<meta charset="UTF-8">

package/templates/layout/md-cookieConsent.html

@@ -1,4 +1,4 @@
-<section id="pgs-cookieConsent" pgs="cookieConsent" role="dialog" aria-modal="true" data-ga-id="<?= esc_attr($ga_measurement_id); ?>" hidden tabindex="-1">
+<section id="pgs-cookieConsent" pgs="cookieConsent" role="dialog" aria-modal="true" data-ga-id="G-XXXXXXXXXX" hidden tabindex="-1">
     <p><i class="fa-duotone fa-solid fa-cookie-bite"></i> Cookie e privacy <br></p>
     <h2>La tua privacy prima di tutto</h2>
 
@@ -48,4 +48,4 @@
             <i class="fa-solid fa-check"></i> Accetta tutto
         </button>
     </div>
-</section>
+</section>

package/templates/layout/md-footer.html

@@ -1,10 +1,29 @@
 <footer pgs="footer">
+    <button pgs="button toggleDarkmode" type="button" aria-label="Cambia tema">
+        <i class="fa-solid fa-moon"></i>
+    </button>
+
     <section pgs="footer-top section">
         <div pgs="footer-top-content flex-3">
-            <div><h2>Menu1</h2></div>
-            <div><h2>Menu2</h2></div>
+            <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">
             <p><a href="">Privacy Policy</a></p>