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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "2.0.0-rc.6",
+  "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.6",
+    "stylelint-plugin-digigov": "1.1.0-rc.8",
     "prettier": "3.2.5"
   },
   "dependencies": {

package/src/components/admin-header.css

@@ -3,7 +3,8 @@
   border-bottom-style: solid;
 }
 .ds-admin-header__content {
-  @apply px-4 py-2 mx-auto max-w-full w-full flex justify-between items-center;
+  @apply px-4 py-2 mx-auto max-w-full w-full flex justify-between items-center
+  flex-wrap sm:flex-nowrap print:px-0 gap-3;
 }
 
 /* overrides */
@@ -13,7 +14,7 @@
     @apply print:hidden;
   }
   .ds-dropdown__button.ds-link {
-    @apply text-lg text-white focus:text-base-content print:text-base-800;
+    @apply text-lg text-white focus:text-base-content print:text-base-800 text-right;
   }
   .ds-link {
     &:hover {

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

@@ -30,36 +30,39 @@
       @apply p-2;
     }
   }
-  .ds-dropdown__button {
-    @apply w-fit print:text-base-content;
-    &::marker {
-      font-size: 0;
-    }
-    &::-webkit-details-marker {
-      display: none;
-    }
+}
+.ds-dropdown__button {
+  @apply w-fit print:text-base-content;
+  &::marker {
+    font-size: 0;
   }
-  .ds-dropdown__button.ds-link + .ds-dropdown__content {
-    @apply mt-4 print:text-base-content;
+  &::-webkit-details-marker {
+    display: none;
   }
-  .ds-btn-group .ds-btn + .ds-dropdown__content {
-    @apply mt-4;
+}
+.ds-dropdown__button.ds-link + .ds-dropdown__content {
+  @apply mt-4 print:text-base-content;
+}
+.ds-btn-group .ds-btn + .ds-dropdown__content {
+  @apply mt-4;
+}
+.ds-dropdown__content {
+  @apply border border-base-400 p-4 bg-base-100 border-t-0
+  max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
+  -webkit-box-box-shadow:
+    0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+    0 -2px 0 var(--color-base-500);
+  box-shadow:
+    0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+    0 -2px 0 var(--color-base-500);
+  &.ds-dropdown__content--full-width {
+    @apply min-w-full;
   }
-  .ds-dropdown__content {
-    @apply border border-base-400 p-4 bg-base-100 border-t-0
-    max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
-    -webkit-box-box-shadow:
-      0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
-      0 -2px 0 var(--color-base-500);
-    box-shadow:
-      0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
-      0 -2px 0 var(--color-base-500);
-    &.ds-dropdown__content--full-width {
-      @apply min-w-full;
-    }
-    *:last-child {
-      @apply mb-0;
-    }
+  &.ds-dropdown__content--scrollable {
+    @apply overflow-y-auto max-h-64 md:max-h-96;
+  }
+  *:last-child {
+    @apply mb-0;
   }
 }
 
@@ -108,8 +111,7 @@
       }
     }
     .ds-svg-icon {
-      @apply w-5 h-6 md:h-8;
-      @apply print:hidden;
+      @apply w-5 h-6 md:h-8 min-w-4 print:hidden;
     }
   }
   .ds-dropdown__content {
@@ -121,6 +123,12 @@
     }
     > .ds-nav__list {
       @apply w-auto -mx-4 flex-col;
+      &:nth-child(1) {
+        @apply -mt-4;
+      }
+      &:last-child {
+        @apply -mb-4 !important;
+      }
       .ds-nav__list-item {
         @apply border-b border-base-300 py-2 px-4;
         &:last-child {

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/header.css

@@ -5,12 +5,15 @@
   border-width: var(--header-border-width);
 }
 .ds-header__content {
-  @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center
+  @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center flex-wrap sm:flex-nowrap
   print:px-0 gap-3;
 }
 .ds-header__section {
   @apply flex justify-start flex-wrap items-center gap-x-4 gap-y-2
   print:gap-1;
+  &:last-child:not(:first-child) {
+    @apply flex-1 justify-end sm:flex-none sm:justify-start;
+  }
 }
 .ds-header__logo {
   @apply h-12 print:hidden;
@@ -29,10 +32,10 @@
   text-decoration: none;
 }
 .ds-header__title {
-  color: var(--header__title-color);
   @apply font-bold text-2xl leading-10 tracking-wide no-underline
   w-auto align-middle hover:no-underline 
   print:text-base-content;
+  color: var(--header__title-color);
   &:hover {
     /* @apply text-white; */
     color: var(--header__title-color-hover);
@@ -54,8 +57,8 @@
   .ds-header__section {
     > .ds-link,
     > .ds-dropdown .ds-dropdown__button.ds-link {
-      color: var(--color-header-text);
       @apply focus:text-link-active print:text-base-content;
+      color: var(--color-header-text);
     }
   }
   .ds-dropdown {
@@ -65,9 +68,6 @@
     @apply sm:w-max;
   }
   .ds-link {
-    .ds-svg-icon {
-      fill: var(--color-header-text);
-    }
     &:hover {
       .ds-svg-icon {
         fill: var(--color-header-text-hover);
@@ -83,8 +83,8 @@
     }
   }
   .ds-phase-banner__text {
-    color: var(--color-header-text);
     @apply print:text-base-content;
+    color: var(--color-header-text);
   }
 }
 .ds-header__section {

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;
@@ -258,9 +263,6 @@
   }
 }
 .ds-table__header {
-  .ds-dropdown__content {
-    @apply py-0;
-  }
   .ds-dropdown__button:not(:focus) {
     @apply no-underline font-bold text-base-content !important;
   }

package/src/components/typography.css

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

package/tailwind.config.js

@@ -130,6 +130,7 @@ module.exports = {
         fit: "fit-content",
       },
       minWidth: {
+        4: "1rem",
         10: "2.5rem",
         32: "8rem",
         52: "13rem",

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