@digigov/css 1.3.0-rc.0 → 2.0.0-4be8f7cc

package/src/components/typography.css

@@ -68,47 +68,44 @@
   font-weight: var(--caption-md-font-weight);
   letter-spacing: var(--caption-md-letter-spacing);
 }
-.ds-body {
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  margin-bottom: var(--body-margin-bottom);
-  color: var(--body-color);
-  letter-spacing: var(--body-letter-spacing);
-}
-.ds-body-lg {
-  font-size: var(--body-lg-font-size);
-  line-height: var(--body-lg-line-height);
-}
-.ds-body-sm {
-  font-size: var(--body-sm-font-size);
-  line-height: var(--body-sm-line-height);
-}
 .ds-hint {
   font-size: var(--hint-font-size);
   line-height: var(--hint-line-height);
   margin-bottom: var(--hint-margin-bottom);
   color: var(--hint-color);
   letter-spacing: var(--hint-letter-spacing);
+  &.ds-hint--lg {
+    font-size: var(--hint-lg-font-size);
+    line-height: var(--hint--lg-line-height);
+  }
+  &.ds-hint--sm {
+    font-size: var(--hint--sm-font-size);
+    line-height: var(--hint--sm-line-height);
+  }
+  &.ds-hint--break-words {
+    @apply break-words;
+  }
 }
-.ds-background-dark, .ds-masthead--primary {
+.ds-background-dark,
+.ds-masthead--primary {
   .ds-hint {
     @apply opacity-70 text-white print:text-base-content;
   }
 }
 .ds-code {
   @apply text-sm sm:text-base bg-base-100;
-}
-.ds-code--attr {
-  @apply text-info;
-}
-.ds-code--string {
-  @apply text-success;
-}
-.ds-code--keyword {
-  @apply text-warning;
-}
-.ds-code--name {
-  @apply text-tertiary;
+  &.ds-code--attr {
+    @apply text-info;
+  }
+  &.ds-code--string {
+    @apply text-success;
+  }
+  &.ds-code--keyword {
+    @apply text-warning;
+  }
+  &.ds-code--name {
+    @apply text-tertiary;
+  }
 }
 .ds-\!-font-size-14 {
   @apply text-xs md:text-sm !important;
@@ -142,9 +139,25 @@
 }
 .ds-list {
   @apply list-none list-outside mt-4;
+  @apply md:mb-8 mb-4 text-base-content;
   font-size: var(--list-font-size);
   line-height: var(--list-line-height);
   letter-spacing: var(--list-letter-spacing);
+  &.ds-list--bullet {
+    @apply list-disc list-outside pl-4;
+  }
+  &.ds-list--number {
+    @apply list-decimal list-outside pl-6;
+  }
+  &.ds-list--horizontal {
+    @apply flex flex-wrap gap-x-6 gap-y-3;
+    &.ds-list--spaced {
+      @apply gap-x-10 gap-y-5;
+    }
+    .ds-list__item {
+      @apply w-full sm:w-auto;
+    }
+  }
   .ds-list__item {
     @apply mb-2;
     &:last-child {
@@ -155,41 +168,23 @@
 .ds-list__item > .ds-list--bullet:nth-child(1) {
   list-style: circle inside none;
 }
-.ds-list__item
-  > .ds-list
-  > .ds-list__item
-  > .ds-list--bullet:nth-child(1) {
+.ds-list__item > .ds-list > .ds-list__item > .ds-list--bullet:nth-child(1) {
   @apply list-disc;
 }
 .ds-list__item
-  > .ds-list:not(.ds-list--bullet):not(.ds-list--number):nth-child(1)
+  > .ds-list:not(.ds-list--bullet, .ds-list--number):nth-child(1)
   > .ds-list__item {
   @apply pl-10;
 }
 .ds-list__item > .ds-list {
   @apply mb-0 mt-2;
 }
-.ds-list--bullet {
-  @apply list-disc list-outside pl-4;
-}
-.ds-list--number {
-  @apply list-decimal list-outside pl-6;
-}
 .ds-list--spaced:not(.ds-list--horizontal) > .ds-list__item {
   @apply mb-4;
   &:last-child {
     @apply mb-0;
   }
 }
-.ds-list--horizontal {
-  @apply flex flex-wrap gap-x-6 gap-y-3;
-  .ds-list__item {
-    @apply w-full sm:w-auto;
-  }
-  &.ds-list--spaced {
-    @apply gap-x-10 gap-y-5;
-  }
-}
 @media (min-width: 768px) {
   .ds-list--col-2 {
     column-count: 2;
@@ -198,16 +193,14 @@
     column-count: 2;
   }
 }
-.ds-list {
-  @apply md:mb-8 mb-4 text-base-content;
-}
 .ds-blockquote {
   @apply mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
   font-size: var(--blockquote-font-size);
   line-height: var(--blockquote-line-height);
-  &.ds-blockquote--dense, .ds-dense & {
+  &.ds-blockquote--dense,
+  .ds-dense & {
     @apply mt-3 md:mb-6 p-3 border-l-6;
-  } 
+  }
 }
 .ds-body {
   font-size: var(--body-font-size);
@@ -215,34 +208,18 @@
   margin-bottom: var(--body-margin-bottom);
   color: var(--body-color);
   letter-spacing: var(--body-letter-spacing);
+  &.ds-body--lg {
+    font-size: var(--body--lg-font-size);
+    line-height: var(--body--lg-line-height);
+  }
+  &.ds-body--sm {
+    font-size: var(--body--sm-font-size);
+    line-height: var(--body--sm-line-height);
+  }
+  .ds-code {
+    @apply p-2 bg-base-200;
+  }
 }
-.ds-body-lg {
-  font-size: var(--body-lg-font-size);
-  line-height: var(--body-lg-line-height);
-}
-.ds-body-sm {
-  font-size: var(--body-sm-font-size);
-  line-height: var(--body-sm-line-height);
-}
-.ds-hint {
-  font-size: var(--hint-font-size);
-  line-height: var(--hint-line-height);
-  margin-bottom: var(--hint-margin-bottom);
-  color: var(--hint-color);
-  letter-spacing: var(--hint-letter-spacing);
-}
-.ds-hint-lg {
-  font-size: var(--hint-lg-font-size);
-  line-height: var(--hint-lg-line-height);
-}
-.ds-hint-sm {
-  font-size: var(--hint-sm-font-size);
-  line-height: var(--hint-sm-line-height);
-}
-.ds-hint--break-words {
-  @apply break-words;
-}
-
 
 .ds-link {
   @apply focus:text-link-active underline cursor-pointer;
@@ -264,25 +241,24 @@
     text-decoration: none !important;
     outline: none;
   }
-  .ds-heading-xl & ,
-  .ds-heading-lg & ,
-  .ds-heading-md & ,
-  .ds-heading-sm & ,
+  &.ds-link--no-underline {
+    @apply no-underline hover:underline;
+  }
+  .ds-heading-xl &,
+  .ds-heading-lg &,
+  .ds-heading-md &,
+  .ds-heading-sm &,
   .ds-body &,
   .ds-hint &,
-  .ds-footer__list &
-  {
+  .ds-footer__list & {
     font-size: inherit;
   }
 }
-.ds-link--no-underline {
-  @apply no-underline hover:underline;
-}
 
 .ds-back-link {
+  @apply w-fit text-base-content underline flex items-center mb-4 cursor-pointer;
   font-size: var(--back-link-font-size);
   letter-spacing: var(--back-link-letter-spacing);
-  @apply w-fit text-base-content underline flex items-center mb-4 cursor-pointer;
   &:hover {
     text-decoration-thickness: 2px;
   }
@@ -297,34 +273,35 @@
 }
 
 .ds-highlight-links {
-  .ds-link {
-    @apply bg-base-content p-1 text-focus underline m-1;
-  }
   &.dark {
     .ds-link {
       @apply bg-base-300;
     }
   }
+  .ds-link {
+    @apply bg-base-content p-1 text-focus underline m-1;
+  }
 }
 .ds-visually-hidden {
   @apply absolute m-0 p-0 overflow-hidden border-0 whitespace-nowrap !important;
   width: 1px !important;
   height: 1px !important;
   clip: rect(0 0 0 0) !important;
-  -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
 }
 @media print {
-  .ds-body .ds-link[href^="#"]:after {
+  .ds-body .ds-link[href^='#']::after {
     display: none;
   }
   .ds-link[href^="http://"]:after, .ds-link[href^="https://"]:after
   {
-    content: " (" attr(href) ")";
+    content: ' (' attr(href) ')';
     font-size: 80%;
   }
-  .ds-body .ds-link {
-    word-wrap: break-word;
+  .ds-body {
+    .ds-link {
+      word-wrap: break-word;
+    }
   }
   .ds-link {
     @apply text-base-content;
@@ -333,10 +310,12 @@
 
 /* overrides */
 
-.ds-link {
+.ds-hint {
   .ds-svg-icon {
-    fill: var(--color-link);
+    fill: var(--hint-color);
   }
+}
+.ds-link {
   &:hover {
     .ds-svg-icon {
       fill: var(--color-link-hover);
@@ -347,6 +326,9 @@
       fill: var(--color-link-active);
     }
   }
+  .ds-svg-icon {
+    fill: var(--color-link);
+  }
 }
 button.ds-link {
   .ds-svg-icon {
@@ -355,13 +337,22 @@ button.ds-link {
 }
 .ds-back-link {
   .ds-svg-icon--caret {
-    fill: var(--color-base-content);
     @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
+    fill: var(--color-base-content);
   }
 }
-
 .ds-code-block__container {
   @apply p-4 bg-base-200 border border-base-300 w-full;
+  & > pre {
+    @apply bg-transparent p-0 m-0;
+    font: inherit;
+    color: inherit;
+  }
+}
+.ds-table__cell {
+  & > code {
+    @apply border-none;
+  }
 }
 .ds-code-block__content {
   @apply text-sm sm:text-base;

package/src/components/warning-text.css

@@ -1,6 +1,12 @@
 .ds-warning-text {
-  font-size: var(--warning-text-font-size);
   @apply flex py-4 px-0;
+  font-size: var(--warning-text-font-size);
+  &.ds-warning-text--dense,
+  .ds-dense & {
+    .ds-warning-text__icon {
+      @apply mr-4 md:mr-5;
+    }
+  }
   .ds-warning-text__icon {
     @apply text-base-content-invert font-bold bg-base-content text-3xl leading-10 text-center 
     rounded-3xl md:min-h-10 min-w-10 h-fit mr-6 mt-1
@@ -12,12 +18,6 @@
   .ds-warning-text__assistive {
     @apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden whitespace-nowrap !important;
     clip: rect(0 0 0 0) !important;
-    -webkit-clip-path: inset(50%) !important;
     clip-path: inset(50%) !important;
   }
-  &.ds-warning-text--dense, .ds-dense & {
-    .ds-warning-text__icon  {
-      @apply mr-4 md:mr-5;
-    }
-  }
 }

package/src/pages/index.js

@@ -397,7 +397,7 @@ export default function Home() {
                     <a className="ds-footer__link" href="#3">Σύνδεσμος 3</a>
                   </li>
                 </ul>
-                <div className="ds-footer__content--logos">
+                <div className="ds-footer__content__logos">
                   <img className="ds-footer__logo" src="/img/government-logo2.svg" alt="government logo" />
                   <img className="ds-footer__logo" src="/img/government-logo2.svg" alt="government logo" />
                 </div>

package/tailwind.config.js

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

package/defaultTheme/footer.json

@@ -1,8 +0,0 @@
-{
-  "footer__copyright": {
-    "font-size": {
-      "xs": "var(--text-sm)",
-      "md": "var(--text-base)"
-    }
-  }
-}

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