@digigov/css 2.0.0-rc.6 → 2.0.0-rc.8

package/src/pages/admin.js

@@ -1,61 +0,0 @@
-export default function Home() {
-  return (
-    <div>
-      <header className="ds-header" role="banner" data-module="ds-header">
-        <div className="ds-admin-header__container">
-          <img className="ds-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" alt="gov.gr logo" />
-          {/* <div class="ds-header__container">
-            <input class="ds-input" type="text" id="business-name" name="business-name" />
-          </div> */}
-        </div>
-      </header>
-      <div className="ds-admin-main-wrapper">
-        <div className="ds-admin-side-content">
-          <h4 className="ds-heading-sm">Σχετικοί Σύνδεσμοι</h4>
-          <nav className="ds-vertical-nav">
-            <a className="ds-link ds-vertical-nav__item ds-vertical-nav__item--active" href="#"> Σύνδεσμος 1</a>
-            <a className="ds-link ds-vertical-nav__item" href="#"> Σύνδεσμος 2</a>
-            <a className="ds-link ds-vertical-nav__item" href="#"> Σύνδεσμος 3</a>
-          </nav>
-        </div>
-        <div className="ds-admin-main-content">
-          <div class="ds-breadcrumbs">
-            <ol class="ds-breadcrumbs__list">
-              <li class="ds-breadcrumbs__list-item">
-                <a class="ds-breadcrumbs__link" href="#">Αρχική</a>
-              </li>
-              <li class="ds-breadcrumbs__list-item">
-                <a class="ds-breadcrumbs__link" href="#">Υγεία και πρόνοια</a>
-              </li>
-              <li class="ds-breadcrumbs__list-item">
-                <a class="ds-breadcrumbs__link" href="#">Φάκελος υγείας</a>
-              </li>
-              <li class="ds-breadcrumbs__list-item">
-                <a class="ds-breadcrumbs__link" href="#">Άυλη συνταγογράφηση</a>
-              </li>
-            </ol>
-          </div>
-          <span className="ds-caption-xl"> Caption for h1 </span>
-          <h1 className="ds-heading-xl">Heading 1 - Κεντρικός τίτλος</h1>
-          <div class="ds-card--border ds-card">
-            <div class="ds-card__body">
-              <div role="heading" aria-level="2" class="ds-card__heading">This is a Card with border</div>
-              <div class="ds-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore   magna aliqua.
-              </div>
-            </div>
-          </div>
-          <div class="ds-btn-group">
-            <button class="ds-btn ds-btn-primary">
-              Save and continue
-            </button>
-            <button class="ds-btn ds-btn-secondary">Save as draft</button>
-          </div>
-          <span className="ds-caption-lg"> Caption for h2 </span>
-          <h2 className="ds-heading-lg">Heading 2</h2>
-          <span className="ds-caption-md"> Caption for h3 </span>
-          <h3 className="ds-heading-md">Heading 2</h3>
-        </div>
-      </div>
-    </div >
-  );
-}

package/src/pages/dropdown.js

@@ -1,249 +0,0 @@
-export default function Dropdown() {
-  return (
-    <div>
-
-      <h1 className="ds-heading-xl">Dropdowns</h1>
-
-      <p className="ds-body">
-        So, let's see some implementations for the dropdown.
-      </p>
-      <p className="ds-body">
-        First, we can add to the dropdown__button our button or link classes. Also, we can add svg icon after the text of the button.
-        Some examples:
-      </p>
-
-
-      <h3 className="ds-heading-sm">Primary button with arrow icon</h3>
-
-
-      <details className="ds-dropdown">
-        <summary className="ds-dropdown__button ds-btn ds-btn-primary">
-          Ενέργειες
-          <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
-            <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
-          </svg>
-        </summary>
-        <div className="ds-dropdown__content">
-          <p className="ds-body">
-            Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
-          </p>
-        </div>
-      </details>
-
-      <hr className="ds-section-break ds-section-break--md" />
-      <h4 className="ds-heading-sm">Secondary button with more icon and nav</h4>
-
-      <details className="ds-dropdown">
-        <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
-          Ενέργειες
-          <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
-            <circle cx="12" cy="5" r="2" />
-            <circle cx="12" cy="12" r="2" />
-            <circle cx="12" cy="19" r="2" />
-          </svg>
-        </summary>
-        <div className="ds-dropdown__content">
-          <nav className="ds-vertical-nav">
-            <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
-            <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
-            <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
-          </nav>
-        </div>
-      </details>
-
-      <hr className="ds-section-break ds-section-break--md" />
-      <h3 className="ds-heading-sm">Link with more icon</h3>
-
-      <details className="ds-dropdown">
-        <summary className="ds-dropdown__button ds-link">
-          Ενέργειες
-          <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
-            <circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" />
-          </svg>
-        </summary>
-        <div className="ds-dropdown__content">
-          <p className="ds-body">
-            Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
-          </p>
-        </div>
-      </details>
-
-      <hr className="ds-section-break ds-section-break--md" />
-      <h3 className="ds-heading-md">Secondary button, with rotating arrow</h3>
-      <p className="ds-body">
-        We can implement a prop at dropdown__button that adds a rotating arrow to the button, like this:
-      </p>
-
-      <details className="ds-dropdown">
-        <summary className="ds-dropdown__button ds-btn ds-btn-secondary ds-dropdown__button--chevron">
-          Ενέργειες
-          <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
-            <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
-          </svg>
-        </summary>
-        <div className="ds-dropdown__content">
-          <div className="ds-field">
-            <label className="ds-label">
-              <span>Όνομα επιχείρησης</span>
-              <input className="ds-input" type="text" name="business-name" />
-            </label>
-          </div>
-          <hr className="ds-section-break ds-section-break--sm ds-section-break--visible" />
-
-          <nav className="ds-vertical-nav">
-            <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
-            <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
-            <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
-          </nav>
-
-          <hr className="ds-section-break ds-section-break--sm" />
-          <hr className="ds-section-break ds-section-break--sm ds-section-break--visible" />
-
-          <button className="ds-btn ds-btn-primary">Αποθήκευση</button>
-
-        </div>
-      </details>
-
-      <p className="ds-body">
-        Also, the content can be a compination of things: inputs, lists, text, buttons.
-      </p>
-      <hr className="ds-section-break ds-section-break--md" />
-      <h4 className="ds-heading-md">Primary button without icon, position UP</h4>
-
-      <details className="ds-dropdown ds-dropdown--up">
-        <summary className="ds-dropdown__button ds-btn ds-btn-primary">
-          Ενέργειες
-        </summary>
-        <div className="ds-dropdown__content">
-          <p className="ds-body">
-            Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
-          </p>
-        </div>
-      </details>
-
-      <h3 className="ds-heading-md">Button groups and dropdown combinations</h3>
-
-      <hr className="ds-section-break ds-section-break--md" />
-      <h4 className="ds-heading-sm">Links </h4>
-
-      <div className="ds-btn-group">
-
-        <details className="ds-dropdown ds-dropdown--up">
-          <summary className="ds-dropdown__button ds-link">
-            Ενέργειες
-            <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
-              <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
-            </svg>
-          </summary>
-          <div className="ds-dropdown__content">
-            <p className="ds-body">
-              Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
-            </p>
-          </div>
-        </details>
-
-        <details className="ds-dropdown ds-dropdown--left ds-dropdown--up">
-          <summary className="ds-dropdown__button ds-link  ds-dropdown__button--chevron">
-            Ενέργειες
-            <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
-              <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
-            </svg>
-          </summary>
-          <div className="ds-dropdown__content">
-            <p className="ds-body">
-              Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
-            </p>
-          </div>
-        </details>
-
-      </div>
-
-      <hr className="ds-section-break ds-section-break--md" />
-      <h3 className="ds-heading-md">A group of buttons and dropdowns with icons and various directions</h3>
-
-      <div className="ds-btn-group">
-
-        <button className="ds-btn ds-btn-secondary">Αποθήκευση</button>
-
-        <details className="ds-dropdown ds-dropdown--up">
-          <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
-            Ενέργειες
-            <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
-              <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
-            </svg>
-          </summary>
-          <div className="ds-dropdown__content">
-            <p className="ds-body">
-              Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
-            </p>
-          </div>
-        </details>
-
-        <details className="ds-dropdown">
-          <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
-            <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
-              <circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" />
-            </svg>
-          </summary>
-          <div className="ds-dropdown__content">
-            <nav className="ds-vertical-nav">
-              <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
-              <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
-              <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
-            </nav>
-          </div>
-        </details>
-
-        <details className="ds-dropdown ds-dropdown--left ">
-          <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
-            <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
-              <rect id="ds-svg-icon--burger__line-1" width="20" height="3.3" /> <rect id="ds-svg-icon--burger__line-2" width="20" height="3.3" /> <rect id="ds-svg-icon--burger__line-3" width="20" height="3.3" />
-            </svg>
-          </summary>
-          <div className="ds-dropdown__content">
-            <nav className="ds-vertical-nav">
-              <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
-              <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
-              <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
-            </nav>
-          </div>
-        </details>
-
-        <details className="ds-dropdown ds-dropdown--left ds-dropdown--up">
-          <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
-            <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--caret" focusable="false" viewBox="0 0 24 24">
-              <path d="M22,6H2l10,12L22,6z" />
-            </svg>
-          </summary>
-          <div className="ds-dropdown__content">
-            <nav className="ds-vertical-nav">
-              <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
-              <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
-              <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
-            </nav>
-          </div>
-        </details>
-      </div>
-
-      <hr className="ds-section-break ds-section-break--lg" />
-
-      <footer className="ds-footer" role="contentinfo">
-        <div className="ds-container">
-          <div className="ds-footer__meta">
-            <div className="ds-footer__meta-item ds-footer__meta-item--grow">
-              <div className="ds-footer__content">
-                <p className="ds-footer__copyright">
-                  Υλοποίηση από το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="ds-link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="ds-visually-hidden">(ανοίγει σε καινούρια καρτέλα) </span></a>
-                </p>
-              </div>
-            </div>
-            <div className="ds-footer__meta-item">
-              <img className="ds-footer__government-logo" src="/img/government-logo2.svg" alt="government logo" />
-            </div>
-          </div>
-        </div>
-      </footer>
-
-    </div>
-  )
-}