@digigov/css 0.5.0 → 0.7.0

package/src/pages/headings/service-heading.js

@@ -0,0 +1,20 @@
+import Head from 'next/head';
+import Image from 'next/image';
+
+
+
+export default function Home() {
+  return (
+    <div>
+      <span className="govgr-caption-xl"> Caption for h1 </span>
+      <h1 className="govgr-heading-xl">Heading 1 - Κεντρικός τίτλος</h1>
+      <span className="govgr-caption-l"> Caption for h2 </span>
+      <h2 className="govgr-heading-l">Heading 2</h2>
+      <span className="govgr-caption-m"> Caption for h3 </span>
+      <h3 className="govgr-heading-m">Heading 3</h3>
+      <h4 className="govgr-heading-s">Heading 4</h4>
+      <h5 className="govgr-heading-s">Heading 5</h5>
+      <h6 className="govgr-heading-s">Heading 6</h6>
+    </div>
+  );
+}

package/src/pages/index.js

@@ -0,0 +1,495 @@
+import Head from 'next/head';
+import Image from 'next/image';
+
+export default function Home() {
+  return (
+    <div className="example">
+      <header className="govgr-header">
+        <div className="govgr-header-container">
+          <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
+          <div className="govgr-burger-menu active">
+            <div class="govgr-burger-menu__line1"></div>
+            <div class="govgr-burger-menu__line2"></div>
+            <div class="govgr-burger-menu__line3"></div>
+          </div>
+        </div>
+      </header>
+      <nav className="govgr-horizontal-nav test-header-nav">
+        <div className="govgr-horizontal-nav__container">
+          <ul className="govgr-nav-bar">
+            <li className="active"> <a href=""> Αρχική </a></li>
+            <li> <a href="/form"> Καταχώρηση φόρμας </a></li>
+            <li> <a href=""> Νέα</a></li>
+            <li><a href=""> Επικοινωνία </a></li>
+          </ul>
+        </div>
+      </nav>
+      <header className="govgr-header">
+        <div className="govgr-header__container">
+            <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
+            <div className="govgr-burger-menu govgr-burger-menu--active">
+            <div className="govgr-burger-menu__line1"></div>
+            <div className="govgr-burger-menu__line2"></div>
+            <div className="govgr-burger-menu__line3"></div>
+            </div>
+        </div>
+    </header>
+    <nav className="govgr-horizontal-nav">
+        <div className="govgr-horizontal-nav__container">
+            <a href="" className="govgr-horizontal-nav__item govgr-horizontal-nav__item-active"> Αρχική </a>
+            <a href="#" className="govgr-horizontal-nav__item"> Καταχώρηση φόρμας </a>
+            <a href="#" className="govgr-horizontal-nav__item"> Νέα</a>
+            <a href="#" className="govgr-horizontal-nav__item"> Επικοινωνία </a>
+        </div>
+    </nav>
+
+
+      {/*new className: "govgr-masthead" -->
+      new className: "govgr-background-dark" */}
+      <div className="govgr-masthead govgr-background-dark">
+        <div className="govgr-width-container">
+          <div className="govgr-main-wrapper">
+            <div className="govgr-grid-column-two-thirds">
+              <img className="govgr-masthead-logo header-logo" src="https://dilosi.services.gov.gr/minedu-logo.svg" />
+
+              <h1 className="govgr-heading-xl"> Όνομα Υπηρεσίας </h1>
+              <p className="p">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για τη
+                δημιουργία ενιαίων και φιλικών ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση των πολιτών.
+              </p>
+              <p className="govgr-hint">Τελευταία ενημέρωση: 05/07/2021 </p>
+
+              <a href="#" className="govgr-link hover-bold-underline"> Σύνδεσμος</a>
+              <br />
+              <a href="#" className="govgr-link govgr-link--no-underline hover-bold-underline"> Sample link</a>
+
+              <div className="govgr-button-group">
+
+                <button className="govgr-btn govgr-btn-primary">
+                  Συνέχεια
+                  <span className="right-arrow"></span>
+                </button>
+                <button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
+                <button className="govgr-btn govgr-btn-warning">Ακύρωση</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="govgr-width-container">
+        <div className="govgr-main-wrapper">
+          <div className="govgr-grid-column-two-thirds">
+            {/*<h1>Design Example</h1> */}
+
+            <span className="govgr-caption-xl"> Caption for h1 </span>
+            <h1 className="govgr-heading-xl">Heading 1 - Κεντρικός τίτλος</h1>
+            <span className="govgr-caption-l"> Caption for h2 </span>
+            <h2 className="govgr-heading-l">Heading 2</h2>
+            <span className="govgr-caption-m"> Caption for h3 </span>
+            <h3 className="govgr-heading-m">Heading 3</h3>
+            <h4 className="govgr-heading-s">Heading 4</h4>
+            <p className="p">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για τη
+              δημιουργία ενιαίων και φιλικών
+              ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση όλων των
+              <span className="tooltip">πολιτών
+                <span className="tooltiptext">Είσαι και εσύ ένας πολίτης</span>
+              </span>.
+            </p>
+            <p className="govgr-hint">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της
+              δημόσιας διοίκησης για τη δημιουργία ενιαίων και φιλικών ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την
+              εξυπηρέτηση των πολιτών.
+            </p>
+            <ul className="govgr-list">
+              <li> List Item</li>
+              <li> List Item</li>
+              <li> List Item</li>
+              <li> List Item</li>
+            </ul>
+            <a className="govgr-link" href="#"> Sample link</a>
+            <br />
+            <a href="#" className="govgr-link govgr-link--no-underline"> Sample link</a>
+            <br />
+            <details className="govgr-details">
+              <summary className="govgr-details__summary"> Sample link</summary>
+              {/*<a href="#" className="details-link"> <span className="govgr-caret-right"></span> Sample link</a> */}
+              <div className="govgr-details__summary-text">
+                <p className="govgr-body">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για
+                  τη δημιουργία ενιαίων και φιλικών ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση των
+                  πολιτών.
+                </p>
+              </div>
+            </details>
+            <br />
+
+            <button className="govgr-btn govgr-btn-primary govgr-btn-cta">
+              Είσοδος στην υπηρεσία
+              <span className="right-arrow"></span>
+            </button>
+            <div className="govgr-button-group">
+              <button className="govgr-btn govgr-btn-primary">
+                Συνέχεια
+                {/*<span className="right-arrow"></span>  */}
+              </button>
+              <button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
+              <button className="govgr-btn govgr-btn-warning">Ακύρωση</button>
+            </div>
+
+            <a href="#" className="govgr-back-link">
+              <span className="govgr-caret-left"></span>
+              Πίσω
+            </a>
+            <br />
+            {/*<button className="govgr-btn-back"><span className="back-arrow"></span> Πίσω</button> */}
+
+            <div className="govgr-breadcrumbs">
+              <ol className="govgr-breadcrumbs__list">
+                <li className="govgr-breadcrumbs__list-item">
+                  <a className="govgr-breadcrumbs__link" href="#">Αρχική</a>
+                </li>
+                <li className="govgr-breadcrumbs__list-item">
+                  <a className="govgr-breadcrumbs__link" href="#">Υγεία και πρόνοια</a>
+                </li>
+                <li className="govgr-breadcrumbs__list-item">
+                  <a className="govgr-breadcrumbs__link" href="#">Φάκελος υγείας</a>
+                </li>
+                <li className="govgr-breadcrumbs__list-item">
+                  <a className="govgr-breadcrumbs__link" href="#">Άυλη συνταγογράφηση</a>
+                </li>
+              </ol>
+            </div>
+            <hr className="govgr-section-break" />
+
+            <blockquote>
+              <p>
+                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                application.
+              </p>
+            </blockquote>
+            {/*new className: "error-msg" */}
+            <blockquote className="error-msg">
+              <h4>
+                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                application.
+              </h4>
+              <p>
+                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                application.
+              </p>
+            </blockquote>
+
+            <div className="govgr-error-summary">
+              <h3 className="govgr-heading-s">Υπήρξε κάποιο πρόβλημα</h3>
+              <p className="govgr-body">
+                  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                  application.
+              </p>
+            </div>
+            <div className="govgr-panel govgr-panel--confirmation">
+              <h1 className="govgr-panel__title">Η φόρμα υποβλήθηκε επιτυχώς</h1>
+              <div className="govgr-panel__body">
+                  Ο κωδικός της φόρμας είναι:
+                  <strong>HDJ2123F</strong>
+              </div>
+            </div>
+
+            {/*new className: "info-msg" */}
+            <div className="govgr-warning-text">
+              <span className="info-icon">!</span>
+              <p>
+                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                application.
+              </p>
+            </div>
+
+            <div className="summary-list flex flex-wrap">
+              <div className="summary-row row">
+                <div className="flex-3">
+                  <h6>Όνομα</h6>
+                </div>
+                <div className="flex-7">Κατερίνα</div>
+                <div className="flex-2"> <a className="govgr-link" href="#">Αλλαγή</a></div>
+
+              </div>
+              <div className="summary-row row">
+                <div className="flex-3">
+                  <h6>Επώνυμο</h6>
+                </div>
+                <div className="flex-7">Μπράνη</div>
+                <div className="flex-2 "> <a href="#" className="govgr-link "></a></div>
+              </div>
+            </div>
+
+            {/*<div className="govgr-tabs">
+            <h4 className="tab-title">Περιεχόμενα</h4>
+            <div className="tab">
+              <button className="tablink active" >παράδειγμα 1</button>
+              <button className="tablink" >παράδειγμα 2</button>
+              <button className="tablink" >άλλο παράδειγμα</button>
+            </div>
+          
+            <div id="tab1" className="tab-content active">
+              <h3>παράδειγμα 1</h3>
+              <p>
+                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.    
+              </p>           
+            </div>
+            
+            <div id="tab2" className="tab-content">
+              <h3>παράδειγμα 2</h3>
+              <p>
+                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
+              </p>
+            </div>
+            
+            <div id="tab3" className="tab-content">
+              <h3>άλλο παράδειγμα</h3>
+              <p>
+                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
+              </p>           
+            </div>
+          </div> */}
+
+            <div className="govgr-tabs">
+              <h6 className="tab-title">Περιεχόμενα</h6>
+              <div className="tab">
+                <a className="govgr-link tablink active">παράδειγμα 1</a>
+                <a className="govgr-link tablink">παράδειγμα 2</a>
+                <a className="govgr-link tablink">άλλο παράδειγμα</a>
+              </div>
+
+              <div id="tab1" className="tab-content active">
+                <h3>παράδειγμα 1</h3>
+                <p>
+                  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                  application.
+                </p>
+              </div>
+
+              <div id="tab2" className="tab-content">
+                <h3>παράδειγμα 2</h3>
+                <p>
+                  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                  application.
+                </p>
+              </div>
+
+              <div id="tab3" className="tab-content">
+                <h3>άλλο παράδειγμα</h3>
+                <p>
+                  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                  application.
+                </p>
+              </div>
+            </div>
+
+            <div className="accordion" id="accordion-default">
+              <div className="accordion-section selected-section">
+                <div className="accordion-section-header">
+                  <a className="accordion-section-heading govgr-link" id="accordion-heading-1">
+                    Παράδειγμα 1
+                  </a>
+                </div>
+                <div id="accordion-content-1" className="accordion-section-content" aria-labelledby="accordion-heading-1">
+                  <p>It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                    application.</p>
+                </div>
+              </div>
+              <div className="accordion-section ">
+                <div className="accordion-section-header">
+                  <a className="accordion-section-heading govgr-link" id="accordion-heading-2">
+                    Παράδειγμα 2
+                  </a>
+                </div>
+                <div id="accordion-content-2" className="accordion-section-content" aria-labelledby="accordion-heading-2">
+                  <p>It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                    application.</p>
+                </div>
+              </div>
+              <div className="accordion-section ">
+                <div className="accordion-section-header">
+                  <a className="accordion-section-heading govgr-link" id="accordion-heading-3">
+                    Άλλο ένα παράδειγμα
+                  </a>
+                </div>
+                <div id="accordion-content-3" className="accordion-section-content" aria-labelledby="accordion-heading-3">
+                  <p>It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
+                    application.</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="colors">
+              <div className="bg-secondary-50">A</div>
+              <div className="c-secondary-50">A</div>
+              <div className="c-secondary-200">A</div>
+              <div className="c-secondary-400">A</div>
+              <div className="c-secondary-600">A</div>
+              <div className="c-secondary-800">A</div>
+              <div className="c-primary">A</div>
+              <div className="c-primary-200">A</div>
+
+            </div>
+            <div className="colors">
+              <div className="c-base-100">A</div>
+              <div className="c-base-150">A</div>
+              <div className="c-base-200">A</div>
+              <div className="c-base-300">A</div>
+              <div className="c-neutral">A</div>
+              <div className="c-neutral-focus">A</div>
+              <div className="c-info"></div>
+              <div className="c-success"></div>
+              <div className="c-warning"></div>
+              <div className="c-error"></div>
+            </div>
+
+          </div>
+          <div className="govgr-grid-column-one-third">
+            <h4>Σχετικοί Σύνδεσμοι</h4>
+            <nav>
+              <ul className="nav-list">
+                <li className="nav-list-item active">
+                  <a className="govgr-link" href="#"> Σύνδεσμος 1</a>
+                </li>
+                <li className="nav-list-item">
+                  <a className="govgr-link" href="#"> Σύνδεσμος 2</a>
+                </li>
+                <li className="nav-list-item">
+                  <a className="govgr-link" href="#"> Σύνδεσμος 3</a>
+                </li>
+              </ul>
+            </nav>
+            {/*<nav>
+            <ul className="nav-list">
+              <li className="nav-list-item active-item">
+                <a href="#" className="govgr-link--no-underline "> Σύνδεσμος 1</a>
+              </li>
+              <li className="nav-list">
+                <a href="#" className="nav-list-item govgr-link--no-underline "> Σύνδεσμος 2</a>
+              </li>
+              <li className="nav-list">
+                <a href="#" className="nav-list-item govgr-link--no-underline "> Σύνδεσμος 3</a>
+              </li>
+            </ul>
+          </nav> */}
+
+          </div>
+        </div>
+      </div>
+
+      <div className="govgr-masthead govgr-background-dark important-bg">
+        <div className="govgr-width-container">
+          <div className="govgr-main-wrapper">
+            <div className="govgr-grid-column-two-thirds">
+              <h1 className="govgr-heading-xl">Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR </h1>
+              <p className="p">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για τη
+                δημιουργία ενιαίων και φιλικών ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση των πολιτών.
+              </p>
+              <a href="#" className="hover-bold-underline"> Σύνδεσμος</a>
+
+              <button className="govgr-btn govgr-btn-primary "> Συνέχεια </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="govgr-masthead info-bg">
+        <div className="govgr-width-container">
+          <div className="govgr-main-wrapper">
+            <div className="govgr-grid-column-two-thirds">
+              <h1 className="govgr-heading-xl">Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR </h1>
+              <p className="p">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης
+                για τη
+                δημιουργία ενιαίων και φιλικών ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση των
+                πολιτών.
+              </p>
+              <a className="govgr-link" href="#"> Σύνδεσμος</a>
+
+              <button className="govgr-btn govgr-btn-primary"> Συνέχεια </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <div className="govgr-width-container">
+        <div className="govgr-main-wrapper">
+          <div className="govgr-grid-column-two-thirds">
+
+            <h1 className="govgr-heading-xl">Καταχώρηση φόρμας</h1>
+
+            <p className="p">Παρακάτω, θα οδηγηθείτε στην σελίδα της καταχώρησης μιας φόρμας. Εμφανίζονται ενδεικτικά παραδείγματα.</p>
+            {/* <button className="govgr-btn-primary govgr-btn-cta">
+              Συμπληρώστε την φόρμα
+              <span className="right-arrow"></span>
+            </button> */}
+
+            <a href="/form" className="govgr-btn govgr-btn-primary govgr-btn-cta">Συμπληρώστε την φόρμα
+              <span className="right-arrow"></span>
+            </a>
+
+
+
+
+          </div>
+        </div>
+      </div>
+      <footer className="govgr-footer" role="contentinfo">
+        <div className="govgr-width-container">
+          <div className="govgr-footer__meta">
+            <div className="govgr-footer__meta-item govgr-footer__meta-item--grow">
+              <div className="govgr-footer__content">
+
+                <img className="govgr-footer__logo" src="https://www.gov.gr/gov_gr_logo.svg" />
+                <p className="govgr-footer__licence-description">
+                  Υλοποίηση από το <a href="https://grnet.gr/" target="_blank" className="govgr-link">ΕΔΥΤΕ</a> για το <a href="https://mindigital.gr/" className="govgr-link">Υπουργείο Ψηφιακής Διακυβέρνησης</a>
+                </p>
+              </div>
+            </div>
+            <div className="govgr-footer__meta-item">
+              <img className="govgr-footer__logo" src="https://www.gov.gr/gov_gr_logo.svg" />
+            </div>
+
+          </div>
+        </div>
+      </footer>
+
+      <footer className="govgr-footer" role="contentinfo">
+        <div className="govgr-width-container">
+            <div className="govgr-footer__meta">
+                <div className="govgr-footer__meta-item govgr-footer__meta-item--grow">
+                    <div className="govgr-footer__content">
+                        <h2 className="govgr-visually-hidden">Σύνδεσμοι</h2>
+                        <ul className="govgr-footer__inline-list">
+                            <li className="govgr-footer__inline-list-item">
+                                <a className="govgr-footer__link" href="#1">
+                                Σύνδεσμος 1
+                                </a>
+                            </li>
+                            <li className="govgr-footer__inline-list-item">
+                                <a className="govgr-footer__link" href="#2">
+                                Σύνδεσμος 2
+                                </a>
+                            </li>
+                            <li className="govgr-footer__inline-list-item">
+                                <a className="govgr-footer__link" href="#3">
+                                Σύνδεσμος 3
+                                </a>
+                            </li>
+                        </ul>
+                        <p className="govgr-footer__licence-description">
+                            Υλοποίηση από το <a href="https://grnet.gr/" target="_blank" rel="noreferrer noopener" className="govgr-link"> ΕΔΥΤΕ <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα)</span>
+                            </a> 
+                            για το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="govgr-link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα)</span>
+                            </a>
+                        </p>
+                      </div>
+                    </div>
+                  <div className="govgr-footer__meta-item">
+                      <img className="govgr-footer__government-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
+                  </div>
+              </div>
+          </div>
+      </footer>
+    </div >
+  );
+}