@digigov/css 1.1.1 → 1.2.0-mobile

package/src/pages/form.js

@@ -1,400 +0,0 @@
-import Head from 'next/head';
-import Image from 'next/image';
-
-export default function Home() {
-  return (
-    <div class="govgr-layout-wrapper">
-      <div class="govgr-top">
-        <header role="banner" data-module="govgr-header" class="govgr-header">
-          <div class="govgr-header__container">
-            <div class="govgr-header__content">
-              <a href="https://www.gov.gr/" class="govgr-header-link">
-                <img src="https://www.gov.gr/gov_gr_logo.svg" class="govgr-header-logo" alt="gov.gr logo" />
-              </a>
-              <a href="/" class="govgr-header-title">
-                Η Υπηρεσία μου
-              </a>
-            </div>
-          </div>
-        </header>
-      </div>
-      <nav className="govgr-nav govgr-nav--horizontal">
-        <ul className="govgr-nav__list">
-          <a className="govgr-nav__list-item-link govgr-nav__list-item-link--active" href="/"> Αρχική </a>
-          <a className="govgr-nav__list-item-link" href=""> Καταχώρηση φόρμας </a>
-          <a className="govgr-nav__list-item-link" href=""> Νέα</a>
-          <a className="govgr-nav__list-item-link" href=""> Επικοινωνία </a>
-        </ul>
-      </nav>
-      <div className="govgr-container">
-        <div className="govgr-main-wrapper">
-          <div className="govgr-grid-column-two-thirds">
-            <h1 className="govgr-heading-xl">Καταχώρηση φόρμας</h1>
-            <div className="govgr-form">
-              <div className="govgr-field">
-                <fieldset className="govgr-fieldset" aria-describedby="radiohint">
-                  <legend className="govgr-heading-md govgr-fieldset__legend">
-                    Επιλέξτε την απάντηση σας
-                  </legend>
-                  <p className="govgr-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
-                  <div className="govgr-radios">
-                    <div className="govgr-radios__item">
-                      <label className="govgr-radios__label">
-                        Ναι
-                        <input className="govgr-radios__input" type="radio" name="fav_language" value="ναι" />
-                      </label>
-                    </div>
-                    <div className="govgr-radios__item">
-                      <label className="govgr-radios__label">
-                        Όχι
-                        <input className="govgr-radios__input" type="radio" name="fav_language" value="όχι" />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="govgr-field govgr-field__error">
-                <fieldset className="govgr-fieldset" aria-describedby="radiohint">
-                  <legend className="govgr-heading-md govgr-fieldset__legend">
-                    Επιλέξτε την απάντηση σας
-                  </legend>
-                  <p className="govgr-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
-                  <p className="govgr-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
-                  <div className="govgr-radios">
-                    <div className="govgr-radios__item">
-                      <label className="govgr-radios__label">
-                        Ναι
-                        <input className="govgr-radios__input" type="radio" name="fav_language" value="ναι" />
-                      </label>
-                    </div>
-                    <div className="govgr-radios__item">
-                      <label className="govgr-radios__label">
-                        Όχι
-                        <input className="govgr-radios__input" type="radio" name="fav_language" value="όχι" />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="govgr-field">
-                <fieldset className="govgr-fieldset" aria-describedby="checkboxhint">
-                  <legend className="govgr-heading-md govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
-                  <p className="govgr-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
-                  <p className="govgr-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
-                  <div className="govgr-checkboxes">
-                    <div className="govgr-checkboxes__item">
-                      <label className="govgr-label govgr-checkboxes__label">
-                        Ναι
-                        <input className="govgr-checkboxes__input" type="checkbox" name="fav_language" value="ναι" />
-                      </label>
-                    </div>
-                    <div className="govgr-checkboxes__item">
-                      <label className="govgr-label govgr-checkboxes__label">
-                        Όχι
-                        <input className="govgr-checkboxes__input" type="checkbox" name="fav_language" value="όχι" />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="govgr-field govgr-field__error">
-                <fieldset className="govgr-fieldset" aria-describedby="checkboxhint">
-                  <legend className="govgr-heading-md govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
-                  <p className="govgr-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
-                  <div className="govgr-checkboxes">
-                    <div className="govgr-checkboxes__item">
-                      <label className="govgr-label govgr-checkboxes__label">
-                        Ναι
-                        <input className="govgr-checkboxes__input" type="checkbox" name="fav_language" value="ναι" />
-                      </label>
-                    </div>
-                    <div className="govgr-checkboxes__item">
-                      <label className="govgr-label govgr-checkboxes__label">
-                        Όχι
-                        <input className="govgr-checkboxes__input" type="checkbox" name="fav_language" value="όχι" />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="govgr-field">
-                <label className='govgr-label'>
-                  <span className="govgr-heading-sm">Ερώτηση</span>
-                  <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
-                  <input className="govgr-input" type="text" name="fname" />
-                </label>
-              </div>
-              <div className="govgr-field govgr-field__error">
-                <label className='govgr-label'>
-                  <span className="govgr-heading-sm">Ερώτηση</span>
-                  <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
-                  <p className="govgr-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
-                  <input className="govgr-input govgr-error-input" type="text" name="fname" />
-                </label>
-              </div>
-              <div className="govgr-field">
-                <label className='govgr-label'>
-                  <span className="govgr-heading-sm">Μια ακόμα ερώτηση</span>
-                  <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
-                  <textarea className="govgr-textarea" name="ta" rows={5} />
-                  <span className="govgr-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
-                </label>
-              </div>
-              <div className="govgr-field govgr-field__error">
-                <label className='govgr-label'>
-                  <span className="govgr-heading-sm">Μια ακόμα ερώτηση</span>
-                  <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
-                  <p className="govgr-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
-                  <textarea className="govgr-textarea govgr-error-input" name="ta" rows={5} />
-                  <span className="govgr-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
-                </label>
-              </div>
-              <div className="govgr-field">
-                <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-lg" ></legend>
-                  <h4 className="govgr-fieldset__legend" >Επιλέξτε από την λίστα</h4>
-                  <p className="govgr-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
-                  <label className="govgr-label">
-                    <select className="govgr-select" id="select-list" name="select-list" defaultValue="one">
-                      <option value="one">Ένα</option>
-                      <option value="two">Δύο</option>
-                      <option value="three">Τρία</option>
-                      <option value="four">Τέσσερα</option>
-                    </select>
-                  </label>
-                </fieldset>
-              </div>
-              <div className="govgr-field">
-                <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-lg" >
-                    Βασικές πληροφορίες
-                  </legend>
-                  <label className="govgr-label" >
-                    <span class="govgr-heading-sm">Όνομα</span>
-                    <input className="govgr-input" type="text" name="fname" />
-                  </label>
-                  <label className="govgr-label" >
-                    <span class="govgr-heading-sm">Επώνυμο</span>
-                    <input className="govgr-input" type="text" name="lname" />
-                  </label>
-                  <label className="govgr-label">
-                    <span class="govgr-heading-sm">Email</span>
-                    <input className="govgr-input" type="email" name="email" />
-                  </label>
-                  <label className="govgr-label">
-                    <span class="govgr-heading-sm">Ημ/νια γέννησης</span>
-                    <input className="govgr-input" type="date" name="birthday" />
-                  </label>
-                </fieldset>
-              </div>
-              <div className="govgr-field govgr-field__error">
-                <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-lg">
-                    Πότε έγινε αυτό;
-                  </legend>
-                  <p className="govgr-hint">Για παράδειγμα: 05 11 2020</p>
-                  <p className="govgr-error-message" > Τα πεδία πρέπει να είναι αριθμοί. </p>
-                  <div className="govgr-date-input">
-                    <div className="govgr-date-input__item">
-                      <div className="govgr-field">
-                        <label className="govgr-label">
-                          Ημέρα
-                          <input className="govgr-input govgr-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-day" autoComplete="bday-day" />
-                        </label>
-                      </div>
-                    </div>
-                    <div className="govgr-date-input__item">
-                      <div className="govgr-field">
-                        <label className="govgr-label">
-                          Μήνας
-                          <input className="govgr-input govgr-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-month" autoComplete="bday-month" />
-                        </label>
-                      </div>
-                    </div>
-                    <div className="govgr-date-input__item">
-                      <div className="govgr-field">
-                        <label className="govgr-label">
-                          Έτος
-                          <input className="govgr-input govgr-input--width-4" type="text" pattern="[0-9]*" inputMode="numeric" name="b-year" autoComplete="bday-year" />
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="govgr-field">
-                <label className="govgr-label label-file">
-                  Επιλογή αρχείου
-                  <p className="govgr-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
-                  <div className="upload-file" >
-                    <input className="govgr-file-input" type="file" name="filename" />
-                  </div>
-                </label>
-              </div>
-              <div className="govgr-field govgr-field__error">
-                <label className="govgr-label label-file">
-                  Επιλογή αρχείου
-                  <p className="govgr-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
-                  <div className="upload-file">
-                    <p className="govgr-error-message"> Το αρχείο πρέπει να είναι μέχρι 2MB. </p>
-                    <input className="govgr-file-input" type="file" name="filename" />
-                  </div>
-                </label>
-              </div>
-              <button className="govgr-btn govgr-btn-primary">
-                Συνέχεια
-              </button>
-            </div>
-            <h2 className="govgr-heading-xl">Disabled</h2>
-            <div className="govgr-form">
-              <div className="govgr-field">
-                <fieldset className="govgr-fieldset" aria-describedby="radiohint">
-                  <legend className="govgr-heading-md govgr-fieldset__legend">
-                    Επιλέξτε την απάντηση σας
-                  </legend>
-                  <div className="govgr-radios">
-                    <div className="govgr-radios__item">
-                      <label className="govgr-radios__label">
-                        Ναι
-                        <input className="govgr-radios__input" type="radio" name="fav_language" value="ναι" disabled checked />
-                      </label>
-                    </div>
-                    <div className="govgr-radios__item">
-                      <label className="govgr-radios__label">
-                        Όχι
-                        <input className="govgr-radios__input" type="radio" name="fav_language" value="όχι" disabled />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-
-              <div className="govgr-field">
-                <fieldset className="govgr-fieldset" aria-describedby="checkboxhint">
-                  <legend className="govgr-heading-md govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
-                  <p className="govgr-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
-                  <div className="govgr-checkboxes">
-                    <div className="govgr-checkboxes__item">
-                      <label className="govgr-label govgr-checkboxes__label" >
-                        Ναι
-                        <input className="govgr-checkboxes__input" type="checkbox" name="fav_language" value="ναι" disabled checked />
-                      </label>
-                    </div>
-                    <div className="govgr-checkboxes__item">
-                      <label className="govgr-label govgr-checkboxes__label">
-                        Όχι
-                        <input className="govgr-checkboxes__input" type="checkbox" name="fav_language" value="όχι" disabled />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-
-              <div className="govgr-field">
-                <label className='govgr-label'>
-                  <span className="govgr-heading-sm">Ερώτηση</span>
-                  <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
-                  <input className="govgr-input" type="text" name="fname" disabled />
-                </label>
-              </div>
-
-              <div className="govgr-field">
-                <label className='govgr-label'>
-                  <span className="govgr-heading-sm">Μια ακόμα ερώτηση</span>
-                  <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
-                  <textarea className="govgr-textarea" name="ta" rows={5} disabled />
-                  <span className="govgr-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
-                </label>
-              </div>
-
-              <div className="govgr-field">
-                <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-lg" ></legend>
-                  <h4 className="govgr-fieldset__legend" >Επιλέξτε από την λίστα</h4>
-                  <p className="govgr-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
-                  <label className="govgr-label">
-                    <select className="govgr-select" id="select-list" name="select-list" defaultValue="one" disabled>
-                      <option value="one">Ένα</option>
-                      <option value="two">Δύο</option>
-                      <option value="three">Τρία</option>
-                      <option value="four">Τέσσερα</option>
-                    </select>
-                  </label>
-                </fieldset>
-              </div>
-              <div className="govgr-field">
-                <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-lg" >
-                    Βασικές πληροφορίες
-                  </legend>
-                  <label className="govgr-label" >
-                    <span class="govgr-heading-sm">Όνομα</span>
-                    <input className="govgr-input" type="text" name="fname" disabled />
-                  </label>
-                  <label className="govgr-label" >
-                    <span class="govgr-heading-sm">Επώνυμο</span>
-                    <input className="govgr-input" type="text" name="lname" />
-                  </label>
-                  <label className="govgr-label">
-                    <span class="govgr-heading-sm">Email</span>
-                    <input className="govgr-input" type="email" name="email" disabled value="test@test.com" />
-                  </label>
-                  <label className="govgr-label">
-                    <span class="govgr-heading-sm">Ημ/νια γέννησης</span>
-                    <input className="govgr-input" type="date" name="birthday" disabled />
-                  </label>
-                </fieldset>
-              </div>
-              <div className="govgr-field">
-                <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-lg">
-                    Πότε έγινε αυτό;
-                  </legend>
-                  <div className="govgr-date-input">
-                    <div className="govgr-date-input__item">
-                      <div className="govgr-field">
-                        <label className="govgr-label">
-                          Ημέρα
-                          <input className="govgr-input govgr-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-day" autoComplete="bday-day" disabled />
-                        </label>
-                      </div>
-                    </div>
-                    <div className="govgr-date-input__item">
-                      <div className="govgr-field">
-                        <label className="govgr-label">
-                          Μήνας
-                          <input className="govgr-input govgr-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-month" autoComplete="bday-month" />
-                        </label>
-                      </div>
-                    </div>
-                    <div className="govgr-date-input__item">
-                      <div className="govgr-field">
-                        <label className="govgr-label">
-                          Έτος
-                          <input className="govgr-input govgr-input--width-4" type="text" pattern="[0-9]*" inputMode="numeric" name="b-year" autoComplete="bday-year" disabled value="2022" />
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="govgr-field">
-                <label className="govgr-label label-file">
-                  Επιλογή αρχείου
-                  <p className="govgr-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
-                  <div className="upload-file" >
-                    <input className="govgr-file-input" type="file" name="filename" disabled />
-                  </div>
-                </label>
-              </div>
-
-              <button className="govgr-btn govgr-btn-primary">
-                Συνέχεια
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div >
-  );
-}

package/src/pages/pagination.js

@@ -1,124 +0,0 @@
-export default function Pagination() {
-  return (
-    <div class="example">
-      <nav class="govgr-pagination" >
-        <p class="govgr-pagination__label">Showing <b>10</b> to <b>20</b> of <b>300000000000</b> pages</p>
-        <ul class="govgr-pagination__list">
-          <li class="govgr-pagination__item">
-            <a class="govgr-link" href="">
-              <svg
-                aria-hidden="true"
-                className=" govgr-svg-icon govgr-svg-icon--arrow--left"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
-                />
-              </svg><span class="govgr-visually-hidden"> set of pages</span></a>
-          </li>
-
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">1</a></li>
-          <li class="govgr-pagination__item govgr-pagination__item--current">2</li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
-          <li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=6">6</a></li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=7">7</a></li>
-
-          <li class="govgr-pagination__item">
-            <a class="govgr-link" href=""><span class="govgr-visually-hidden"> set of pages</span>
-              <svg
-                aria-hidden="true"
-                className=" govgr-svg-icon govgr-svg-icon--arrow--right"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
-                />
-              </svg></a>
-          </li>
-        </ul>
-      </nav>
-
-      <nav class="govgr-pagination" >
-        <p class="govgr-pagination__label">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
-        <ul class="govgr-pagination__list">
-          <li class="govgr-pagination__item govgr-pagination__item--inactive">
-            <a class="govgr-link" href="">
-              <svg
-                aria-hidden="true"
-                className=" govgr-svg-icon govgr-svg-icon--arrow--left"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
-                />
-              </svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
-          </li>
-          <li class="govgr-pagination__item govgr-pagination__item--current">1</li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">2</a></li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
-          <li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
-          <li class="govgr-pagination__item">
-            <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
-              <svg
-                aria-hidden="true"
-                className=" govgr-svg-icon govgr-svg-icon--arrow--right"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
-                />
-              </svg></a>
-          </li>
-        </ul>
-
-      </nav>
-
-      <nav class="govgr-pagination" >
-        <p class="govgr-pagination__label">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
-        <ul class="govgr-pagination__list">
-          <li class="govgr-pagination__item govgr-pagination__item">
-            <a class="govgr-link" href="">
-              <svg
-                aria-hidden="true"
-                className=" govgr-svg-icon govgr-svg-icon--arrow--left"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
-                />
-              </svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
-          </li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">1</a></li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=2">2</a></li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
-          <li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
-          <li class="govgr-pagination__item"><a class="govgr-link" href="/page=6">6</a></li>
-          <li class="govgr-pagination__item govgr-pagination__item--current">7</li>
-          <li class="govgr-pagination__item govgr-pagination__item--inactive">
-            <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
-              <svg
-                aria-hidden="true"
-                className=" govgr-svg-icon govgr-svg-icon--arrow--right"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
-                />
-              </svg></a>
-          </li>
-        </ul>
-
-      </nav>
-    </div>
-  )
-}