@digigov/css 2.0.0-rc.7 → 2.0.2

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="ds-layout-wrapper">
-      <div class="ds-top">
-        <header role="banner" data-module="ds-header" class="ds-header">
-          <div class="ds-header__container">
-            <div class="ds-header__content">
-              <a href="https://www.gov.gr/" class="ds-header-link">
-                <img src="https://www.gov.gr/gov_gr_logo.svg" class="ds-header-logo" alt="gov.gr logo" />
-              </a>
-              <a href="/" class="ds-header-title">
-                Η Υπηρεσία μου
-              </a>
-            </div>
-          </div>
-        </header>
-      </div>
-      <nav className="ds-nav ds-nav--horizontal">
-        <ul className="ds-nav__list">
-          <a className="ds-nav__list-item-link ds-nav__list-item-link--active" href="/"> Αρχική </a>
-          <a className="ds-nav__list-item-link" href=""> Καταχώρηση φόρμας </a>
-          <a className="ds-nav__list-item-link" href=""> Νέα</a>
-          <a className="ds-nav__list-item-link" href=""> Επικοινωνία </a>
-        </ul>
-      </nav>
-      <div className="ds-container">
-        <div className="ds-main-wrapper">
-          <div className="ds-grid-column-two-thirds">
-            <h1 className="ds-heading-xl">Καταχώρηση φόρμας</h1>
-            <div className="ds-form">
-              <div className="ds-field">
-                <fieldset className="ds-fieldset" aria-describedby="radiohint">
-                  <legend className="ds-heading-md ds-fieldset__legend">
-                    Επιλέξτε την απάντηση σας
-                  </legend>
-                  <p className="ds-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
-                  <div className="ds-radios">
-                    <div className="ds-radios__item">
-                      <label className="ds-radios__label">
-                        Ναι
-                        <input className="ds-radios__input" type="radio" name="fav_language" value="ναι" />
-                      </label>
-                    </div>
-                    <div className="ds-radios__item">
-                      <label className="ds-radios__label">
-                        Όχι
-                        <input className="ds-radios__input" type="radio" name="fav_language" value="όχι" />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="ds-field ds-field__error">
-                <fieldset className="ds-fieldset" aria-describedby="radiohint">
-                  <legend className="ds-heading-md ds-fieldset__legend">
-                    Επιλέξτε την απάντηση σας
-                  </legend>
-                  <p className="ds-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
-                  <p className="ds-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
-                  <div className="ds-radios">
-                    <div className="ds-radios__item">
-                      <label className="ds-radios__label">
-                        Ναι
-                        <input className="ds-radios__input" type="radio" name="fav_language" value="ναι" />
-                      </label>
-                    </div>
-                    <div className="ds-radios__item">
-                      <label className="ds-radios__label">
-                        Όχι
-                        <input className="ds-radios__input" type="radio" name="fav_language" value="όχι" />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="ds-field">
-                <fieldset className="ds-fieldset" aria-describedby="checkboxhint">
-                  <legend className="ds-heading-md ds-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
-                  <p className="ds-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
-                  <p className="ds-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
-                  <div className="ds-checkboxes">
-                    <div className="ds-checkboxes__item">
-                      <label className="ds-label ds-checkboxes__label">
-                        Ναι
-                        <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="ναι" />
-                      </label>
-                    </div>
-                    <div className="ds-checkboxes__item">
-                      <label className="ds-label ds-checkboxes__label">
-                        Όχι
-                        <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="όχι" />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="ds-field ds-field__error">
-                <fieldset className="ds-fieldset" aria-describedby="checkboxhint">
-                  <legend className="ds-heading-md ds-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
-                  <p className="ds-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
-                  <div className="ds-checkboxes">
-                    <div className="ds-checkboxes__item">
-                      <label className="ds-label ds-checkboxes__label">
-                        Ναι
-                        <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="ναι" />
-                      </label>
-                    </div>
-                    <div className="ds-checkboxes__item">
-                      <label className="ds-label ds-checkboxes__label">
-                        Όχι
-                        <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="όχι" />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="ds-field">
-                <label className='ds-label'>
-                  <span className="ds-heading-sm">Ερώτηση</span>
-                  <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
-                  <input className="ds-input" type="text" name="fname" />
-                </label>
-              </div>
-              <div className="ds-field ds-field__error">
-                <label className='ds-label'>
-                  <span className="ds-heading-sm">Ερώτηση</span>
-                  <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
-                  <p className="ds-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
-                  <input className="ds-input ds-error-input" type="text" name="fname" />
-                </label>
-              </div>
-              <div className="ds-field">
-                <label className='ds-label'>
-                  <span className="ds-heading-sm">Μια ακόμα ερώτηση</span>
-                  <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
-                  <textarea className="ds-textarea" name="ta" rows={5} />
-                  <span className="ds-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
-                </label>
-              </div>
-              <div className="ds-field ds-field__error">
-                <label className='ds-label'>
-                  <span className="ds-heading-sm">Μια ακόμα ερώτηση</span>
-                  <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
-                  <p className="ds-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
-                  <textarea className="ds-textarea ds-error-input" name="ta" rows={5} />
-                  <span className="ds-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
-                </label>
-              </div>
-              <div className="ds-field">
-                <fieldset>
-                  <legend class="ds-fieldset__legend ds-heading-lg" ></legend>
-                  <h4 className="ds-fieldset__legend" >Επιλέξτε από την λίστα</h4>
-                  <p className="ds-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
-                  <label className="ds-label">
-                    <select className="ds-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="ds-field">
-                <fieldset>
-                  <legend class="ds-fieldset__legend ds-heading-lg" >
-                    Βασικές πληροφορίες
-                  </legend>
-                  <label className="ds-label" >
-                    <span class="ds-heading-sm">Όνομα</span>
-                    <input className="ds-input" type="text" name="fname" />
-                  </label>
-                  <label className="ds-label" >
-                    <span class="ds-heading-sm">Επώνυμο</span>
-                    <input className="ds-input" type="text" name="lname" />
-                  </label>
-                  <label className="ds-label">
-                    <span class="ds-heading-sm">Email</span>
-                    <input className="ds-input" type="email" name="email" />
-                  </label>
-                  <label className="ds-label">
-                    <span class="ds-heading-sm">Ημ/νια γέννησης</span>
-                    <input className="ds-input" type="date" name="birthday" />
-                  </label>
-                </fieldset>
-              </div>
-              <div className="ds-field ds-field__error">
-                <fieldset>
-                  <legend class="ds-fieldset__legend ds-heading-lg">
-                    Πότε έγινε αυτό;
-                  </legend>
-                  <p className="ds-hint">Για παράδειγμα: 05 11 2020</p>
-                  <p className="ds-error-message" > Τα πεδία πρέπει να είναι αριθμοί. </p>
-                  <div className="ds-date-input">
-                    <div className="ds-date-input__item">
-                      <div className="ds-field">
-                        <label className="ds-label">
-                          Ημέρα
-                          <input className="ds-input ds-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-day" autoComplete="bday-day" />
-                        </label>
-                      </div>
-                    </div>
-                    <div className="ds-date-input__item">
-                      <div className="ds-field">
-                        <label className="ds-label">
-                          Μήνας
-                          <input className="ds-input ds-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-month" autoComplete="bday-month" />
-                        </label>
-                      </div>
-                    </div>
-                    <div className="ds-date-input__item">
-                      <div className="ds-field">
-                        <label className="ds-label">
-                          Έτος
-                          <input className="ds-input ds-input--width-4" type="text" pattern="[0-9]*" inputMode="numeric" name="b-year" autoComplete="bday-year" />
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div className="ds-field">
-                <label className="ds-label label-file">
-                  Επιλογή αρχείου
-                  <p className="ds-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
-                  <div className="upload-file" >
-                    <input className="ds-file-input" type="file" name="filename" />
-                  </div>
-                </label>
-              </div>
-              <div className="ds-field ds-field__error">
-                <label className="ds-label label-file">
-                  Επιλογή αρχείου
-                  <p className="ds-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
-                  <div className="upload-file">
-                    <p className="ds-error-message"> Το αρχείο πρέπει να είναι μέχρι 2MB. </p>
-                    <input className="ds-file-input" type="file" name="filename" />
-                  </div>
-                </label>
-              </div>
-              <button className="ds-btn ds-btn-primary">
-                Συνέχεια
-              </button>
-            </div>
-            <h2 className="ds-heading-xl">Disabled</h2>
-            <div className="ds-form">
-              <div className="ds-field">
-                <fieldset className="ds-fieldset" aria-describedby="radiohint">
-                  <legend className="ds-heading-md ds-fieldset__legend">
-                    Επιλέξτε την απάντηση σας
-                  </legend>
-                  <div className="ds-radios">
-                    <div className="ds-radios__item">
-                      <label className="ds-radios__label">
-                        Ναι
-                        <input className="ds-radios__input" type="radio" name="fav_language" value="ναι" disabled checked />
-                      </label>
-                    </div>
-                    <div className="ds-radios__item">
-                      <label className="ds-radios__label">
-                        Όχι
-                        <input className="ds-radios__input" type="radio" name="fav_language" value="όχι" disabled />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-
-              <div className="ds-field">
-                <fieldset className="ds-fieldset" aria-describedby="checkboxhint">
-                  <legend className="ds-heading-md ds-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
-                  <p className="ds-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
-                  <div className="ds-checkboxes">
-                    <div className="ds-checkboxes__item">
-                      <label className="ds-label ds-checkboxes__label" >
-                        Ναι
-                        <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="ναι" disabled checked />
-                      </label>
-                    </div>
-                    <div className="ds-checkboxes__item">
-                      <label className="ds-label ds-checkboxes__label">
-                        Όχι
-                        <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="όχι" disabled />
-                      </label>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-
-              <div className="ds-field">
-                <label className='ds-label'>
-                  <span className="ds-heading-sm">Ερώτηση</span>
-                  <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
-                  <input className="ds-input" type="text" name="fname" disabled />
-                </label>
-              </div>
-
-              <div className="ds-field">
-                <label className='ds-label'>
-                  <span className="ds-heading-sm">Μια ακόμα ερώτηση</span>
-                  <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
-                  <textarea className="ds-textarea" name="ta" rows={5} disabled />
-                  <span className="ds-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
-                </label>
-              </div>
-
-              <div className="ds-field">
-                <fieldset>
-                  <legend class="ds-fieldset__legend ds-heading-lg" ></legend>
-                  <h4 className="ds-fieldset__legend" >Επιλέξτε από την λίστα</h4>
-                  <p className="ds-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
-                  <label className="ds-label">
-                    <select className="ds-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="ds-field">
-                <fieldset>
-                  <legend class="ds-fieldset__legend ds-heading-lg" >
-                    Βασικές πληροφορίες
-                  </legend>
-                  <label className="ds-label" >
-                    <span class="ds-heading-sm">Όνομα</span>
-                    <input className="ds-input" type="text" name="fname" disabled />
-                  </label>
-                  <label className="ds-label" >
-                    <span class="ds-heading-sm">Επώνυμο</span>
-                    <input className="ds-input" type="text" name="lname" />
-                  </label>
-                  <label className="ds-label">
-                    <span class="ds-heading-sm">Email</span>
-                    <input className="ds-input" type="email" name="email" disabled value="test@test.com" />
-                  </label>
-                  <label className="ds-label">
-                    <span class="ds-heading-sm">Ημ/νια γέννησης</span>
-                    <input className="ds-input" type="date" name="birthday" disabled />
-                  </label>
-                </fieldset>
-              </div>
-              <div className="ds-field">
-                <fieldset>
-                  <legend class="ds-fieldset__legend ds-heading-lg">
-                    Πότε έγινε αυτό;
-                  </legend>
-                  <div className="ds-date-input">
-                    <div className="ds-date-input__item">
-                      <div className="ds-field">
-                        <label className="ds-label">
-                          Ημέρα
-                          <input className="ds-input ds-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-day" autoComplete="bday-day" disabled />
-                        </label>
-                      </div>
-                    </div>
-                    <div className="ds-date-input__item">
-                      <div className="ds-field">
-                        <label className="ds-label">
-                          Μήνας
-                          <input className="ds-input ds-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-month" autoComplete="bday-month" />
-                        </label>
-                      </div>
-                    </div>
-                    <div className="ds-date-input__item">
-                      <div className="ds-field">
-                        <label className="ds-label">
-                          Έτος
-                          <input className="ds-input ds-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="ds-field">
-                <label className="ds-label label-file">
-                  Επιλογή αρχείου
-                  <p className="ds-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
-                  <div className="upload-file" >
-                    <input className="ds-file-input" type="file" name="filename" disabled />
-                  </div>
-                </label>
-              </div>
-
-              <button className="ds-btn ds-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="ds-pagination" >
-        <p class="ds-pagination__label">Showing <b>10</b> to <b>20</b> of <b>300000000000</b> pages</p>
-        <ul class="ds-pagination__list">
-          <li class="ds-pagination__item">
-            <a class="ds-link" href="">
-              <svg
-                aria-hidden="true"
-                className=" ds-svg-icon ds-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="ds-visually-hidden"> set of pages</span></a>
-          </li>
-
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=1">1</a></li>
-          <li class="ds-pagination__item ds-pagination__item--current">2</li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=3">3</a></li>
-          <li class="ds-pagination__item ds-pagination__item--dots">...</li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=5">5</a></li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=6">6</a></li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=7">7</a></li>
-
-          <li class="ds-pagination__item">
-            <a class="ds-link" href=""><span class="ds-visually-hidden"> set of pages</span>
-              <svg
-                aria-hidden="true"
-                className=" ds-svg-icon ds-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="ds-pagination" >
-        <p class="ds-pagination__label">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
-        <ul class="ds-pagination__list">
-          <li class="ds-pagination__item ds-pagination__item--inactive">
-            <a class="ds-link" href="">
-              <svg
-                aria-hidden="true"
-                className=" ds-svg-icon ds-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="ds-visually-hidden"> set of pages</span></a>
-          </li>
-          <li class="ds-pagination__item ds-pagination__item--current">1</li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=1">2</a></li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=3">3</a></li>
-          <li class="ds-pagination__item ds-pagination__item--dots">...</li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=5">5</a></li>
-          <li class="ds-pagination__item">
-            <a class="ds-link" href="">Next<span class="ds-visually-hidden"> set of pages</span>
-              <svg
-                aria-hidden="true"
-                className=" ds-svg-icon ds-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="ds-pagination" >
-        <p class="ds-pagination__label">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
-        <ul class="ds-pagination__list">
-          <li class="ds-pagination__item ds-pagination__item">
-            <a class="ds-link" href="">
-              <svg
-                aria-hidden="true"
-                className=" ds-svg-icon ds-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="ds-visually-hidden"> set of pages</span></a>
-          </li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=1">1</a></li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=2">2</a></li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=3">3</a></li>
-          <li class="ds-pagination__item ds-pagination__item--dots">...</li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=5">5</a></li>
-          <li class="ds-pagination__item"><a class="ds-link" href="/page=6">6</a></li>
-          <li class="ds-pagination__item ds-pagination__item--current">7</li>
-          <li class="ds-pagination__item ds-pagination__item--inactive">
-            <a class="ds-link" href="">Next<span class="ds-visually-hidden"> set of pages</span>
-              <svg
-                aria-hidden="true"
-                className=" ds-svg-icon ds-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>
-  )
-}