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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.8",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -55,7 +55,7 @@
     "rimraf": "3.0.2",
     "publint": "0.1.8",
     "stylelint": "15.11.0",
-    "stylelint-plugin-digigov": "1.1.0-rc.7",
+    "stylelint-plugin-digigov": "1.1.0-rc.8",
     "prettier": "3.2.5"
   },
   "dependencies": {

package/src/components/admin-layout.css

@@ -11,16 +11,9 @@
     @apply border border-base-300 px-4 py-2;
   }
 }
-.ds-admin-width-container {
-  @apply px-4 py-8 m-0 w-full mx-auto;
-  flex: 1 1 0%;
-}
-.ds-admin-main-wrapper {
-  @apply grid p-4 md:grid-cols-12 gap-x-8 md:gap-x-10 gap-y-4 grid-cols-1 print:grid-cols-1;
-}
-.ds-admin-main-content {
+.ds-admin-main {
   @apply lg:col-span-8 md:col-span-7;
 }
-.ds-admin-side-content {
+.ds-admin-aside {
   @apply lg:col-span-4 md:col-span-5 print:order-1;
 }

package/src/components/autocomplete.css

@@ -78,7 +78,7 @@
 }
 
 .ds-autocomplete__menu {
-  @apply block max-h-96 w-full m-0 p-0 overflow-x-hidden
+  @apply block max-h-64 md:max-h-96 w-full m-0 p-0 overflow-x-hidden
   border-2 border-t-0 border-base-content bg-base-100
   absolute left-0 top-full z-50 shadow-xl;
   &.ds-autocomplete__menu--hidden {

package/src/components/card.css

@@ -1,5 +1,5 @@
 .ds-card {
-  @apply mb-7 text-base-content;
+  @apply mb-7 text-base-content max-w-full;
   border-radius: var(--card-border-radius);
   &.ds-card--dense,
   .ds-dense & {

package/src/components/dropdown.css

@@ -59,7 +59,7 @@
     @apply min-w-full;
   }
   &.ds-dropdown__content--scrollable {
-    @apply overflow-y-auto max-h-96;
+    @apply overflow-y-auto max-h-64 md:max-h-96;
   }
   *:last-child {
     @apply mb-0;

package/src/components/form.css

@@ -171,7 +171,7 @@
 .ds-textarea:disabled,
 .ds-checkboxes__input:disabled::before,
 .ds-radios__input:disabled::before {
-  @apply border-base-content text-base-content;
+  @apply border-base-700 text-base-800;
 }
 .ds-checkboxes__input:disabled:checked::after,
 .ds-radios__input:disabled:checked::after {

package/src/components/index.css

@@ -1,46 +1,47 @@
 @import './accordion.css';
+@import './admin-header.css';
+@import './admin-layout.css';
 @import './autocomplete.css';
-@import './button.css';
+@import './back-to-top.css';
 @import './bottom-info.css';
-@import './chip.css';
+@import './breadcrumbs.css';
+@import './button.css';
+@import './card.css';
 @import './form.css';
 @import './checkboxes.css';
+@import './chip.css';
+@import './copy-to-clipboard.css';
+@import './details.css';
+@import './dev-theme.css';
+@import './drawer.css';
 @import './dropdown.css';
-@import './radios.css';
-@import './header.css';
+@import './fillable.css';
+@import './filter.css';
 @import './footer.css';
+@import './full-page-background.css';
+@import './header.css';
+@import './hidden.css';
 @import './layout.css';
-@import './nav.css';
-@import './typography.css';
-@import './back-to-top.css';
-@import './table.css';
-@import './filter.css';
-@import './admin-layout.css';
-@import './admin-header.css';
-@import './breadcrumbs.css';
-@import './card.css';
-@import './details.css';
-@import './notification-banner.css';
+@import './loader.css';
 @import './masthead.css';
-@import './panel.css';
-@import './phase-banner.css';
-@import './summary-list.css';
-@import './stack.css';
-@import './tabs.css';
 @import './misc.css';
 @import './modal.css';
-@import './svg-icons.css';
+@import './nav.css';
 @import './pagination.css';
-@import './loader.css';
-@import './full-page-background.css';
-@import './drawer.css';
-@import './copy-to-clipboard.css';
-@import './fillable.css';
+@import './panel.css';
+@import './phase-banner.css';
+@import './radios.css';
+@import './skeleton.css';
 @import './skiplink.css';
-@import './timeline.css';
-@import './task-list.css';
+@import './stack.css';
 @import './stepnav.css';
-@import './dev-theme.css';
-@import './kitchensink.css';
-@import './hidden.css';
+@import './summary-list.css';
+@import './svg-icons.css';
+@import './table.css';
+@import './tabs.css';
+@import './task-list.css';
+@import './timeline.css';
+@import './typography.css';
+@import './notification-banner.css';
 @import './warning-text.css';
+@import './kitchensink.css';

package/src/components/modal.css

@@ -9,8 +9,11 @@
 
   &.ds-modal--dense,
   &.ds-dense & {
+    .ds-modal__body {
+      @apply px-4 py-0;
+    }
     .ds-modal__container {
-      @apply px-4 py-0 gap-4;
+      @apply gap-4 my-0;
     }
   }
 }
@@ -18,11 +21,17 @@
   @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
   h-fit md:h-auto overflow-y-auto
   bg-base-100
-  border border-solid border-base-500;
+  border border-solid border-base-500 p-6;
   max-height: 95vh;
 }
 .ds-modal__container {
-  @apply grid p-10 gap-6 px-6 py-2;
+  @apply grid gap-6 -my-4;
+  .ds-modal__action {
+    @apply mb-0;
+  }
+  >.ds-heading-xs, >.ds-heading-sm, >.ds-heading-md, >.ds-heading-lg, >.ds-heading-xl {
+    @apply mb-0;
+  }
 }
 .ds-modal__content {
   @apply text-base lg:text-xl text-lg;

package/src/components/skeleton.css

@@ -0,0 +1,84 @@
+.ds-skeleton {
+  @apply block bg-base-300 h-auto w-full max-w-full rounded-sm;
+
+  /* max-width: 105ch; */
+  &.ds-skeleton--text {
+    /* @apply text-lg; */
+    &::before {
+      content: '\00a0';
+    }
+    &.ds-skeleton--font-xs {
+      @apply text-sm md:text-base;
+      line-height: 1rem;
+    }
+    &.ds-skeleton--font-sm {
+      @apply text-base md:text-lg;
+    }
+    &.ds-skeleton--font-md {
+      @apply text-xl md:text-2xl;
+    }
+    &.ds-skeleton--font-lg {
+      @apply text-2xl md:text-3xl;
+    }
+    &.ds-skeleton--font-xl {
+      @apply text-3xl md:text-4xl;
+    }
+  }
+  &.ds-skeleton--circular {
+    border-radius: 50%;
+  }
+  &.ds-skeleton--rectangular {
+  }
+  &.ds-skeleton--button {
+    @apply mb-8 w-fit min-h-10 md:min-h-12 px-6 py-3
+    border-b-2 border-gray-400
+    flex items-center justify-center;
+    .ds-skeleton__line {
+      @apply block bg-base-400 w-full max-w-full max-h-full;
+      &::before {
+        content: '\00a0';
+      }
+      &.ds-skeleton__line--size-default {
+        @apply h-4 w-20;
+      }
+    }
+  }
+
+  /* Skeleton with a child. */
+  &.ds-skeleton--width-fit-content {
+    @apply w-fit;
+  }
+  &.ds-skeleton--animate {
+    /* @apply animate-pulse; */
+    position: relative;
+    overflow: hidden;
+    mask-image: radial-gradient(white, black);
+    &::after {
+      @apply absolute top-0 bottom-0 left-0 right-0;
+      animation: wave 2s linear 0.5s infinite;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 0, 0, 0.05),
+        transparent
+      );
+      content: '';
+      transform: translateX(-100%);
+    }
+  }
+  > :not(.ds-skeleton__line) {
+    @apply invisible;
+  }
+}
+
+@keyframes wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/components/summary-list.css

@@ -10,6 +10,16 @@
     }
   }
 }
+
+
+.ds-summary-list--no-last-border {
+  .ds-summary-list__row:last-child {
+    .ds-summary-list__key, .ds-summary-list__value, .ds-summary-list__actions {
+      @apply border-b-0;
+    }
+  }
+}
+
 .ds-summary-list__row {
   @apply block sm:flex
   pb-4 mb-4 border-b border-solid border-base-300

package/src/components/table.css

@@ -151,6 +151,11 @@
       content: attr(data-label);
     }
   }
+  .ds-table__cell {
+    .ds-body:last-child {
+      @apply mb-0;
+    }
+  }
 }
 .ds-table-sort__icons-container {
   @apply flex flex-col;

package/src/components/typography.css

@@ -309,6 +309,7 @@
 }
 
 /* overrides */
+
 .ds-hint {
   .ds-svg-icon {
     fill: var(--hint-color);

package/src/pages/admin-filtering-data.js

@@ -1,160 +0,0 @@
-import Head from 'next/head';
-import Image from 'next/image';
-
-export default function Home() {
-  return (
-    <div>
-      <header className="ds-admin-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>
-      </header>
-      <div className="ds-admin-wrapper">
-        <div className="ds-admin-width-container">
-          <div className="ds-admin-main-wrapper">
-            <div className="ds-grid__col-span-12">
-              <h1 className="ds-heading-xl">Αναζήτηση μεταφραστή</h1>
-              <div className="ds-field">
-                <label className="ds-label"> Αναζήτηση με λέξη-κλειδί  </label>
-                <div className="ds-search">
-                  <input className="ds-input" type="text" id="business-name" name="business-name" />
-                  <button className="ds-btn ds-input__search-btn">
-                    <svg className="ds-svg-icon--search" focusable="false" viewBox="0 0 24 24" aria-hidden="true" >
-                      <path d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <aside className="ds-admin-side-content">
-              <div className="ds-filter">
-                <div className="ds-filter__heading">
-                  <a className="ds-link ds-close-btn" href="#">
-                    Κλείσιμο
-                    <svg class="ds-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
-                  </a>
-                  <h3 className="ds-heading-md">Φίλτρα</h3>
-                </div>
-                <div className="ds-filter__content">
-                  {/* <div className="ds-filter__selected">
-                  <div className="ds-filter__selected-heading">
-                    <h3 className="ds-heading-sm">Επιλεγμένα φίλτρα</h3>
-                  </div>
-                  <p className="ds-hint-sm"> Δεν έχει επιλεχθεί κάποιο φίλτρο. </p>
-                  <p className="ds-hint-sm"> Για να προσθέσετε φίλτρο, επιλέξτε τουλάχιστον μία από τις παρακάτω επιλογές και πατήστε το κουμπί "Αναζήτηση".</p>
-                </div> */}
-                  <div className="ds-filter__selected">
-                    <div className="ds-filter__selected-heading">
-                      <h3 className="ds-heading-sm">Επιλεγμένα φίλτρα</h3>
-                      <a className="ds-link" href="#"> Καθαρισμός</a>
-                    </div>
-                    <h4 className="ds-chip--heading">Περιοχή</h4>
-                    <ul className="ds-chips">
-                      <li><a className="ds-chip" href="#">Άλιμος
-                        <svg className="ds-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
-                      </a></li>
-                      <li><a className="ds-chip" href="#">Πετρούπολη <div className="ds-chip--x-icon">
-                        <svg className="ds-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
-                      </div> </a></li>
-                      <li><a className="ds-chip" href="#">Δροσιά <div className="ds-chip--x-icon">
-                        <svg className="ds-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
-                      </div> </a></li>
-                    </ul>
-                  </div>
-                  <div className="ds-filter__options">
-                    <div className="ds-field">
-                      <label className="ds-heading-sm ds-label" for="business-name">Αναζήτηση λέξης</label>
-                      <input className="ds-input" type="text" id="business-name" name="business-name" />
-                    </div>
-                    <div className="ds-field">
-                      <label className="ds-heading-sm ds-label" for="select-list">Περιοχή</label>
-                      <select className="ds-select" id="select-list" name="select-list">
-                        <option value="popular" selected>France</option>
-                        <option value="recently" selected>Άγιος Δημήτριος</option>
-                        <option value="three" selected>Άλιμος</option>
-                        <option value="four">Άνω Ελευσίνα</option>
-                      </select>
-                    </div>
-                    <div className="ds-field">
-                      <fieldset className="ds-fieldset" aria-describedby="checkboxhint">
-                        <legend className="ds-heading-sm ds-fieldset__legend">Γλώσσα</legend>
-                        <div className="ds-checkboxes">
-                          <div className="ds-checkboxes__item">
-                            <input className="ds-checkboxes__input" type="checkbox" id="runny-nose" name="runny-nose" value="runny-nose" />
-                            <label className="ds-label ds-checkboxes__label" for="runny-nose">Ελληνικά
-                            </label>
-                          </div>
-                          <div className="ds-checkboxes__item">
-                            <input className="ds-checkboxes__input" type="checkbox" id="fever" name="fever" value="fever" />
-                            <label className="ds-label ds-checkboxes__label" for="fever">Αγγλικά <br />
-                            </label>
-                          </div>
-                          <div className="ds-checkboxes__item">
-                            <input className="ds-checkboxes__input" type="checkbox" id="tiredness" name="tiredness" value="tiredness" />
-                            <label className="ds-label ds-checkboxes__label" for="tiredness">Γαλλικά <br />
-                            </label>
-                          </div>
-                        </div>
-                      </fieldset>
-                    </div>
-                    <button className="ds-btn ds-btn-primary">Αναζήτηση</button>
-                  </div>
-                </div>
-              </div>
-            </aside>
-            <main className="ds-admin-main-content">
-              <div className="ds-results-heading">
-                <h3 className="ds-heading-md">146 Αποτελέσματα</h3>
-                <div className="ds-results-heading__actions">
-                  <a className="ds-link" href="#"> Εξαγωγή δεδομένων</a>
-                  <a className="ds-link ds-link-filters" href="#"> Φίλτρα</a>
-                </div>
-              </div>
-              <hr className="ds-section-break ds-section-break--visible ds-section-break--md" />
-              <div className="ds-results-action-bar">
-                <div className="ds-field">
-                  <label className="ds-label" for="select-list2"> Ταξινόμηση: </label>
-                  <select className="ds-select" id="select-list2" name="select-list2">
-                    <option value="popular" selected>Δημοφιλή</option>
-                    <option value="recently">Πρόσφατα</option>
-                  </select>
-                </div>
-                <div className="ds-field">
-                  <label className="ds-label" for="select-list2"> Σελίδες ανά σελίδα: </label>
-                  <select className="ds-select" id="select-list3" name="select-list3">
-                    <option value="popular" selected>12</option>
-                    <option value="recently">24</option>
-                    <option value="recently">48</option>
-                  </select>
-                </div>
-              </div>
-              <div className="ds-grid ds-grid__gap-4">
-                <div className="ds-card ds-grid__col-span-12">
-                  <div className="ds-card__body">
-                    <div role="heading" aria-level="2" className="ds-card__heading">This is a Card</div>
-                    <div className="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 className="ds-card ds-grid__col-span-12">
-                  <div className="ds-card__body">
-                    <div role="heading" aria-level="2" className="ds-card__heading">This is a Card</div>
-                    <div className="ds-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.
-                    </div>
-                  </div>
-                </div>
-                <div className="ds-card ds-grid__col-span-12">
-                  <div className="ds-card__body">
-                    <div role="heading" aria-level="2" className="ds-card__heading">This is a Card</div>
-                    <div className="ds-card__content">Lorem ipsum dolor sit amet.
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </main>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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 >
-  );
-}