@digigov/css 0.38.2 → 1.0.0-blabla-test

package/src/pages/index.js

@@ -3,7 +3,7 @@ import Image from 'next/image';
 
 export default function Home() {
   return (
-    <div className="example">
+    <div>
 
       <header className="govgr-header">
         <div className="govgr-header__container">
@@ -16,7 +16,7 @@ export default function Home() {
             </a>
             <a href="/" className="govgr-header-title">Service name</a>
           </div>
-          <svg className="govgr-burger-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <rect id="govgr-burger-icon__line-1" width="20" height="3.3" /><rect id="govgr-burger-icon__line-2" width="20" height="3.3" /><rect id="govgr-burger-icon__line-3" width="20" height="3.3" /></svg>
+          <svg className="govgr-svg-icon--burger" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <rect id="govgr-svg-icon--burger__line-1" width="20" height="3.3" /><rect id="govgr-svg-icon--burger__line-2" width="20" height="3.3" /><rect id="govgr-svg-icon--burger__line-3" width="20" height="3.3" /></svg>
         </div>
       </header>
       <nav className="govgr-nav govgr-nav--horizontal">
@@ -28,8 +28,8 @@ export default function Home() {
         </ul>
       </nav>
 
-      <svg className="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" >
-        <rect id="govgr-burger-icon__line-1" width="20" height="3.3" /><rect id="govgr-burger-icon__line-2" width="20" height="3.3" /><rect id="govgr-burger-icon__line-3" width="20" height="3.3" />
+      <svg className="govgr-svg-icon--burger govgr-svg-icon--burger--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" >
+        <rect id="govgr-svg-icon--burger__line-1" width="20" height="3.3" /><rect id="govgr-svg-icon--burger__line-2" width="20" height="3.3" /><rect id="govgr-svg-icon--burger__line-3" width="20" height="3.3" />
       </svg>
 
 
@@ -37,7 +37,7 @@ export default function Home() {
         <div className="govgr-width-container">
           <div className="govgr-main-wrapper">
             <div className="govgr-grid-column-two-thirds">
-              <img className="govgr-masthead-logo header-logo" src="https://dilosi.services.gov.gr/minedu-logo.svg" alt="minedu logo" />
+              <img className="govgr-masthead__logo" src="https://dilosi.services.gov.gr/minedu-logo.svg" alt="minedu logo" />
               <h1 className="govgr-heading-xl"> Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR </h1>
               <p className="govgr-masthead-body">
                 Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία συνεπή στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και την εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που έχουν ήδη γίνει.
@@ -46,7 +46,7 @@ export default function Home() {
               <p className="govgr-hint">Τελευταία ενημέρωση: 08/12/2021 </p>
               <button className="govgr-btn govgr-btn-primary govgr-btn-cta">
                 Ξεκινήστε εδώ
-                <svg viewBox="0 0 24 24" className="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z" /> </svg>
+                <svg viewBox="0 0 24 24" className="govgr-svg-icon--arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z" /> </svg>
               </button>
             </div>
           </div>
@@ -59,11 +59,11 @@ export default function Home() {
 
             <span className="govgr-caption-xl"> Caption for h1 </span>
             <h1 className="govgr-heading-xl">Heading 1 - Κεντρικός τίτλος</h1>
-            <span className="govgr-caption-l"> Caption for h2 </span>
-            <h2 className="govgr-heading-l">Heading 2</h2>
-            <span className="govgr-caption-m"> Caption for h3 </span>
-            <h3 className="govgr-heading-m">Heading 3</h3>
-            <h4 className="govgr-heading-s">Heading 4</h4>
+            <span className="govgr-caption-lg"> Caption for h2 </span>
+            <h2 className="govgr-heading-lg">Heading 2</h2>
+            <span className="govgr-caption-md"> Caption for h3 </span>
+            <h3 className="govgr-heading-md">Heading 3</h3>
+            <h4 className="govgr-heading-sm">Heading 4</h4>
             <p className="govgr-body">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για τη
               δημιουργία ενιαίων και φιλικών
               ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση όλων των
@@ -98,9 +98,9 @@ export default function Home() {
 
             <button className="govgr-btn govgr-btn-primary govgr-btn-cta">
               Είσοδος στην υπηρεσία
-              <svg viewBox="0 0 24 24" className="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z" /> </svg>
+              <svg viewBox="0 0 24 24" className="govgr-svg-icon--arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z" /> </svg>
             </button>
-            <div className="govgr-button-group">
+            <div className="govgr-btn-group">
               <button className="govgr-btn govgr-btn-primary">
                 Συνέχεια
               </button>
@@ -109,7 +109,7 @@ export default function Home() {
             </div>
 
             <a href="#" className="govgr-back-link">
-              <svg className="govgr-caret--left" viewBox="0 0 24 24" aria-hidden="true"><path d="M18,22V2L6,12L18,22z" /></svg>
+              <svg className="govgr-svg-icon--caret--left" viewBox="0 0 24 24" aria-hidden="true"><path d="M18,22V2L6,12L18,22z" /></svg>
               Πίσω
             </a>
             <br />
@@ -137,7 +137,7 @@ export default function Home() {
             </blockquote>
 
             <div className="govgr-error-summary">
-              <h3 className="govgr-heading-s">Υπήρξε κάποιο πρόβλημα</h3>
+              <h3 className="govgr-heading-sm">Υπήρξε κάποιο πρόβλημα</h3>
               <a className="govgr-link" href="#"> Πρέπει να συμπληρώσετε το έτος</a>
             </div>
 
@@ -200,7 +200,7 @@ export default function Home() {
             </dl>
 
             <div className="govgr-tabs">
-              <h6 className="govgr-heading-s govgr-tabs__title">Περιεχόμενα</h6>
+              <h6 className="govgr-heading-sm govgr-tabs__title">Περιεχόμενα</h6>
               <ul className="govgr-tabs__list" role="tablist">
                 <li className="govgr-tabs__list-item govgr-tabs__list-item-selected" role="presentation">
                   <a className="govgr-tabs__tab" href="#user-details" id="tab_user-details" role="tab" aria-controls="past-week" aria-selected="false" tabindex="-1">
@@ -219,18 +219,18 @@ export default function Home() {
                 </li>
               </ul>
               <div id="tab1" className="govgr-tabs__panel govgr-tabs__panel-visible">
-                <h3 className="govgr-heading-l">Στοιχεία πολίτη</h3>
+                <h3 className="govgr-heading-lg">Στοιχεία πολίτη</h3>
                 <p className="govgr-body">Πληροφορίες</p>
               </div>
               <div id="tab2" className="govgr-tabs__panel">
-                <h3 className="govgr-heading-m">παράδειγμα 2</h3>
+                <h3 className="govgr-heading-md">παράδειγμα 2</h3>
                 <p>
                   It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
                   application.
                 </p>
               </div>
               <div id="tab3" className="govgr-tabs__panel">
-                <h3 className="govgr-heading-m">άλλο παράδειγμα</h3>
+                <h3 className="govgr-heading-md">άλλο παράδειγμα</h3>
                 <p>
                   It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
                   application.
@@ -310,7 +310,7 @@ export default function Home() {
               </div>
             </div>
           </div>
-          <div className="govgr-grid-column-one-third">
+          <div className="govgr-aside govgr-grid-column-one-third">
             <h4>Σχετικοί Σύνδεσμοι</h4>
             <nav className="govgr-vertical-nav">
               <a className="govgr-link govgr-vertical-nav__item govgr-vertical-nav__item--active" href="#"> Σύνδεσμος 1</a>
@@ -342,7 +342,7 @@ export default function Home() {
         <div className="govgr-width-container">
           <div className="govgr-footer__navigation">
             <div className="govgr-footer__section">
-              <h2 className="govgr-footer__heading govgr-heading-s">Λίστα δύο στηλών</h2>
+              <h2 className="govgr-footer__heading govgr-heading-sm">Λίστα δύο στηλών</h2>
               <ul className="govgr-footer__list govgr-footer__list--columns-2">
                 <li className="govgr-footer__list-item">
                   <a className="govgr-footer__link" href="#1">Σύνδεσμος 1</a>
@@ -365,7 +365,7 @@ export default function Home() {
               </ul>
             </div>
             <div className="govgr-footer__section">
-              <h2 className="govgr-footer__heading govgr-heading-s">Λίστα μίας στήλης</h2>
+              <h2 className="govgr-footer__heading govgr-heading-sm">Λίστα μίας στήλης</h2>
               <ul className="govgr-footer__list ">
                 <li className="govgr-footer__list-item">
                   <a className="govgr-footer__link" href="#1">Σύνδεσμος 1</a>
@@ -379,7 +379,7 @@ export default function Home() {
               </ul>
             </div>
           </div>
-          <hr className="govgr-footer__section-break" />
+          <hr className="govgr-section-break govgr-section-break--visible" />
           <div className="govgr-footer__meta">
             <div className="govgr-footer__meta-item govgr-footer__meta-item--grow">
               <div className="govgr-footer__content">

package/src/pages/pagination.js

@@ -8,7 +8,7 @@ export default function Pagination() {
             <a class="govgr-link" href="">
               <svg
                 aria-hidden="true"
-                className=" govgr-svg-icon govgr-arrow--left"
+                className=" govgr-svg-icon govgr-svg-icon--arrow--left"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -30,7 +30,7 @@ export default function Pagination() {
             <a class="govgr-link" href=""><span class="govgr-visually-hidden"> set of pages</span>
               <svg
                 aria-hidden="true"
-                className=" govgr-svg-icon govgr-arrow--right"
+                className=" govgr-svg-icon govgr-svg-icon--arrow--right"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -49,7 +49,7 @@ export default function Pagination() {
             <a class="govgr-link" href="">
               <svg
                 aria-hidden="true"
-                className=" govgr-svg-icon govgr-arrow--left"
+                className=" govgr-svg-icon govgr-svg-icon--arrow--left"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -67,7 +67,7 @@ export default function Pagination() {
             <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
               <svg
                 aria-hidden="true"
-                className=" govgr-svg-icon govgr-arrow--right"
+                className=" govgr-svg-icon govgr-svg-icon--arrow--right"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -87,7 +87,7 @@ export default function Pagination() {
             <a class="govgr-link" href="">
               <svg
                 aria-hidden="true"
-                className=" govgr-svg-icon govgr-arrow--left"
+                className=" govgr-svg-icon govgr-svg-icon--arrow--left"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -107,7 +107,7 @@ export default function Pagination() {
             <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
               <svg
                 aria-hidden="true"
-                className=" govgr-svg-icon govgr-arrow--right"
+                className=" govgr-svg-icon govgr-svg-icon--arrow--right"
                 focusable="false"
                 viewBox="0 0 24 24"
               >

package/src/pages/table.js

@@ -1,17 +1,17 @@
 export default function Table() {
   return (
-    <body className="example">
+    <body>
 
       
       <table className="govgr-table">
-        <caption className="govgr-table__caption govgr-table__caption--s">Table caption S</caption>
-        <caption className="govgr-table__caption govgr-table__caption--m">Table caption M</caption>
-        <caption className="govgr-table__caption govgr-table__caption--l">Table caption L</caption>
+        <caption className="govgr-table__caption govgr-table__caption--sm">Table caption S</caption>
+        <caption className="govgr-table__caption govgr-table__caption--md">Table caption M</caption>
+        <caption className="govgr-table__caption govgr-table__caption--lg">Table caption L</caption>
         <caption className="govgr-table__caption govgr-table__caption--xl">Table caption XL</caption>
       </table>
       
       <table className="govgr-table">
-        <caption className="govgr-table__caption govgr-table__caption--m">Simple Table</caption>
+        <caption className="govgr-table__caption govgr-table__caption--md">Simple Table</caption>
         <thead className="govgr-table__head">
           <tr className="govgr-table__row">
             <th scope="col" className="govgr-table__header">Date</th>
@@ -35,8 +35,8 @@ export default function Table() {
       </table>
       
       {/* Table with vertical lines */}
-      <table className="govgr-table govgr-table--with-vertical-lines">
-        <caption className="govgr-table__caption govgr-table__caption--m">Table with vertical lines</caption>
+      <table className="govgr-table govgr-table--vertical-lines">
+        <caption className="govgr-table__caption govgr-table__caption--md">Table with vertical lines</caption>
         <thead className="govgr-table__head">
           <tr className="govgr-table__row">
             <th scope="col" className="govgr-table__header">Date</th>
@@ -64,7 +64,7 @@ export default function Table() {
       </table>
 
       <table className="govgr-table">
-        <caption className="govgr-table__caption govgr-table__caption--m">Table with numbers and custom column widths </caption>
+        <caption className="govgr-table__caption govgr-table__caption--md">Table with numbers and custom column widths </caption>
         <thead className="govgr-table__head">
           <tr className="govgr-table__row">
             <th scope="col" className="govgr-table__header govgr-!-width-one-half">Date</th>
@@ -87,8 +87,8 @@ export default function Table() {
       </table>
         
       {/* Table with primary color at header */}
-      <table className="govgr-table govgr-table--dark govgr-table--with-vertical-lines">
-        <caption className="govgr-table__caption govgr-table__caption--m">Table with primary color at header</caption>
+      <table className="govgr-table govgr-table--dark govgr-table--vertical-lines">
+        <caption className="govgr-table__caption govgr-table__caption--md">Table with primary color at header</caption>
         <thead className="govgr-table__head">
           <tr className="govgr-table__row">
             <th scope="col" className="govgr-table__header govgr-table__header--dark">Date</th>
@@ -113,7 +113,7 @@ export default function Table() {
 
       {/* Table with gray color at all headers */}
       <table className="govgr-table govgr-table--dark ">
-        <caption className="govgr-table__caption govgr-table__caption--m">Table with  gray color at header</caption>
+        <caption className="govgr-table__caption govgr-table__caption--md">Table with  gray color at header</caption>
         <thead className="govgr-table__head">
           <tr className="govgr-table__row">
             <th scope="col" className="govgr-table__header govgr-table__header--gray">Date</th>
@@ -137,7 +137,7 @@ export default function Table() {
 
       {/* Zebra Table */}
       <table className="govgr-table govgr-table--zebra">
-        <caption className="govgr-table__caption govgr-table__caption--m">Zebra Table</caption>
+        <caption className="govgr-table__caption govgr-table__caption--md">Zebra Table</caption>
         <thead className="govgr-table__head">
           <tr className="govgr-table__row">
             <th scope="col" className="govgr-table__header">Date</th>
@@ -170,7 +170,7 @@ export default function Table() {
 
       {/* Zebra Table with dark header */}
       <table className="govgr-table govgr-table--dark govgr-table--zebra">
-        <caption className="govgr-table__caption govgr-table__caption--m">Zebra Table with dark header</caption>
+        <caption className="govgr-table__caption govgr-table__caption--md">Zebra Table with dark header</caption>
         <thead className="govgr-table__head">
           <tr className="govgr-table__row">
             <th scope="col" className="govgr-table__header govgr-table__header--dark">Date</th>
@@ -203,7 +203,7 @@ export default function Table() {
       
       {/* Zebra Table with dark headers */}
       <table className="govgr-table govgr-table--dark govgr-table--zebra">
-        <caption className="govgr-table__caption govgr-table__caption--m">Zebra Table with dark header</caption>
+        <caption className="govgr-table__caption govgr-table__caption--md">Zebra Table with dark header</caption>
         <thead className="govgr-table__head">
           <tr className="govgr-table__row">
             <th scope="col" className="govgr-table__header govgr-table__header--dark">Date</th>
@@ -248,7 +248,7 @@ export default function Table() {
 
       {/* Densed zebra Table */}
       <table className="govgr-table govgr-table--zebra govgr-table--dense">
-        <caption className="govgr-table__caption govgr-table__caption--m">Densed zebra Table</caption>
+        <caption className="govgr-table__caption govgr-table__caption--md">Densed zebra Table</caption>
         <thead className="govgr-table__head">
           <tr className="govgr-table__row">
             <th scope="col" className="govgr-table__header">Date</th>

package/src/utilities/index.css

@@ -400,9 +400,6 @@
 .govgr-grid__gap-2 {
   @apply gap-2;
 }
-.govgr-grid__gap-3 {
-  @apply gap-3;
-}
 .govgr-grid__gap-4 {
   @apply gap-4;
 }
@@ -457,36 +454,6 @@
 .govgr-grid__col-span-12 {
   @apply col-span-12;
 }
-.govgr-lg-up {
-  @apply lg:hidden;
-}
-.govgr-md-up {
-  @apply md:hidden;
-}
-.govgr-sm-up {
-  @apply sm:hidden;
-}
-.govgr-xl-up {
-  @apply xl:hidden;
-}
-.govgr-xs-up {
-  @apply xs:hidden;
-}
-.govgr-lg-up-block {
-  @apply lg:block !important;
-}
-.govgr-md-up-block {
-  @apply md:block !important;
-}
-.govgr-sm-up-block {
-  @apply sm:block !important;
-}
-.govgr-xl-up-block {
-  @apply xl:block !important;
-}
-.govgr-xs-up-block {
-  @apply xs:block !important;
-}
 .govgr-print-hidden {
   @apply print:hidden !important;
 }

package/src/utilities/utilities.css

@@ -402,9 +402,6 @@
   .govgr-grid__gap-2 {
     @apply gap-2;
   }
-  .govgr-grid__gap-3 {
-    @apply gap-3;
-  }
   .govgr-grid__gap-4 {
     @apply gap-4;
   }
@@ -459,36 +456,6 @@
   .govgr-grid__col-span-12 {
     @apply col-span-12;
   }
-  .govgr-lg-up {
-    @apply lg:hidden;
-  }
-  .govgr-md-up {
-    @apply md:hidden;
-  }
-  .govgr-sm-up {
-    @apply sm:hidden;
-  }
-  .govgr-xl-up {
-    @apply xl:hidden;
-  }
-  .govgr-xs-up {
-    @apply xs:hidden;
-  }
-  .govgr-lg-up-block {
-    @apply lg:block !important;
-  }
-  .govgr-md-up-block {
-    @apply md:block !important;
-  }
-  .govgr-sm-up-block {
-    @apply sm:block !important;
-  }
-  .govgr-xl-up-block {
-    @apply xl:block !important;
-  }
-  .govgr-xs-up-block {
-    @apply xs:block !important;
-  }
   .govgr-print-hidden {
     @apply print:hidden !important;
   }

package/src/components/admin-footer.css

@@ -1,3 +0,0 @@
-.govgr-admin-footer {
-  @apply border-0 border-solid font-normal text-base py-4 md:py-8 border-t-4 border-tertiary text-base-800 bg-base-200 w-full;
-}

package/src/components/admin-form.css

@@ -1,5 +0,0 @@
-.govgr-admin-filter-wrapper {
-  .govgr-field:last-child {
-    @apply border-b border-base-300 md:border-0 mb-0 pb-6;
-  }
-}

package/src/components/cookie.css

@@ -1,3 +0,0 @@
-.govgr-cookie-banner {
-  @apply bg-base-200;
-}