@digigov/css 0.38.2 → 1.0.0-rc

package/src/pages/dropdown.js

@@ -1,6 +1,6 @@
 export default function Dropdown() {
   return (
-    <div className="example">
+    <div>
 
       <h1 className="govgr-heading-xl">Dropdowns</h1>
 
@@ -13,13 +13,13 @@ export default function Dropdown() {
       </p>
 
 
-      <h3 className="govgr-heading-s">Primary button with arrow icon</h3>
+      <h3 className="govgr-heading-sm">Primary button with arrow icon</h3>
 
 
       <details className="govgr-dropdown">
         <summary className="govgr-dropdown__button govgr-btn govgr-btn-primary">
           Ενέργειες
-          <svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
+          <svg aria-hidden="true" className="govgr-svg-icon govgr-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>
@@ -30,8 +30,8 @@ export default function Dropdown() {
         </div>
       </details>
 
-      <hr className="govgr-section-break govgr-section-break--m" />
-      <h4 className="govgr-heading-s">Secondary button with more icon and nav</h4>
+      <hr className="govgr-section-break govgr-section-break--md" />
+      <h4 className="govgr-heading-sm">Secondary button with more icon and nav</h4>
 
       <details className="govgr-dropdown">
         <summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
@@ -51,8 +51,8 @@ export default function Dropdown() {
         </div>
       </details>
 
-      <hr className="govgr-section-break govgr-section-break--m" />
-      <h3 className="govgr-heading-s">Link with more icon</h3>
+      <hr className="govgr-section-break govgr-section-break--md" />
+      <h3 className="govgr-heading-sm">Link with more icon</h3>
 
       <details className="govgr-dropdown">
         <summary className="govgr-dropdown__button govgr-link">
@@ -68,8 +68,8 @@ export default function Dropdown() {
         </div>
       </details>
 
-      <hr className="govgr-section-break govgr-section-break--m" />
-      <h3 className="govgr-heading-m">Secondary button, with rotating arrow</h3>
+      <hr className="govgr-section-break govgr-section-break--md" />
+      <h3 className="govgr-heading-md">Secondary button, with rotating arrow</h3>
       <p className="govgr-body">
         We can implement a prop at dropdown__button that adds a rotating arrow to the button, like this:
       </p>
@@ -77,7 +77,7 @@ export default function Dropdown() {
       <details className="govgr-dropdown">
         <summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary govgr-dropdown__button--arrow">
           Ενέργειες
-          <svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
+          <svg aria-hidden="true" className="govgr-svg-icon govgr-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>
@@ -88,7 +88,7 @@ export default function Dropdown() {
               <input className="govgr-input" type="text" name="business-name" />
             </label>
           </div>
-          <hr className="govgr-section-break govgr-section-break--s govgr-section-break--visible" />
+          <hr className="govgr-section-break govgr-section-break--sm govgr-section-break--visible" />
 
           <nav className="govgr-vertical-nav">
             <a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
@@ -96,8 +96,8 @@ export default function Dropdown() {
             <a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
           </nav>
 
-          <hr className="govgr-section-break govgr-section-break--s" />
-          <hr className="govgr-section-break govgr-section-break--s govgr-section-break--visible" />
+          <hr className="govgr-section-break govgr-section-break--sm" />
+          <hr className="govgr-section-break govgr-section-break--sm govgr-section-break--visible" />
 
           <button className="govgr-btn govgr-btn-primary">Αποθήκευση</button>
 
@@ -107,8 +107,8 @@ export default function Dropdown() {
       <p className="govgr-body">
         Also, the content can be a compination of things: inputs, lists, text, buttons.
       </p>
-      <hr className="govgr-section-break govgr-section-break--m" />
-      <h4 className="govgr-heading-m">Primary button without icon, position UP</h4>
+      <hr className="govgr-section-break govgr-section-break--md" />
+      <h4 className="govgr-heading-md">Primary button without icon, position UP</h4>
 
       <details className="govgr-dropdown govgr-dropdown--up">
         <summary className="govgr-dropdown__button govgr-btn govgr-btn-primary">
@@ -121,17 +121,17 @@ export default function Dropdown() {
         </div>
       </details>
 
-      <h3 className="govgr-heading-m">Button groups and dropdown combinations</h3>
+      <h3 className="govgr-heading-md">Button groups and dropdown combinations</h3>
 
-      <hr className="govgr-section-break govgr-section-break--m" />
-      <h4 className="govgr-heading-s">Links </h4>
+      <hr className="govgr-section-break govgr-section-break--md" />
+      <h4 className="govgr-heading-sm">Links </h4>
 
-      <div className="govgr-button-group">
+      <div className="govgr-btn-group">
 
         <details className="govgr-dropdown govgr-dropdown--up">
           <summary className="govgr-dropdown__button govgr-link">
             Ενέργειες
-            <svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
+            <svg aria-hidden="true" className="govgr-svg-icon govgr-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>
@@ -145,7 +145,7 @@ export default function Dropdown() {
         <details className="govgr-dropdown govgr-dropdown--left govgr-dropdown--up">
           <summary className="govgr-dropdown__button govgr-link  govgr-dropdown__button--arrow">
             Ενέργειες
-            <svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
+            <svg aria-hidden="true" className="govgr-svg-icon govgr-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>
@@ -158,17 +158,17 @@ export default function Dropdown() {
 
       </div>
 
-      <hr className="govgr-section-break govgr-section-break--m" />
-      <h3 className="govgr-heading-m">A group of buttons and dropdowns with icons and various directions</h3>
+      <hr className="govgr-section-break govgr-section-break--md" />
+      <h3 className="govgr-heading-md">A group of buttons and dropdowns with icons and various directions</h3>
 
-      <div className="govgr-button-group">
+      <div className="govgr-btn-group">
 
         <button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
 
         <details className="govgr-dropdown govgr-dropdown--up">
           <summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
             Ενέργειες
-            <svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
+            <svg aria-hidden="true" className="govgr-svg-icon govgr-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>
@@ -197,7 +197,7 @@ export default function Dropdown() {
         <details className="govgr-dropdown govgr-dropdown--left ">
           <summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
             <svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
-              <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" />
+              <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>
           </summary>
           <div className="govgr-dropdown__content">
@@ -225,7 +225,7 @@ export default function Dropdown() {
         </details>
       </div>
 
-      <hr className="govgr-section-break govgr-section-break--l" />
+      <hr className="govgr-section-break govgr-section-break--lg" />
 
       <footer className="govgr-footer" role="contentinfo">
         <div className="govgr-width-container">

package/src/pages/form.js

@@ -33,7 +33,7 @@ export default function Home() {
             <div className="govgr-form">
               <div className="govgr-field">
                 <fieldset className="govgr-fieldset" aria-describedby="radiohint">
-                  <legend className="govgr-heading-m govgr-fieldset__legend">
+                  <legend className="govgr-heading-md govgr-fieldset__legend">
                     Επιλέξτε την απάντηση σας
                   </legend>
                   <p className="govgr-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
@@ -55,7 +55,7 @@ export default function Home() {
               </div>
               <div className="govgr-field govgr-field__error">
                 <fieldset className="govgr-fieldset" aria-describedby="radiohint">
-                  <legend className="govgr-heading-m govgr-fieldset__legend">
+                  <legend className="govgr-heading-md govgr-fieldset__legend">
                     Επιλέξτε την απάντηση σας
                   </legend>
                   <p className="govgr-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
@@ -78,7 +78,7 @@ export default function Home() {
               </div>
               <div className="govgr-field">
                 <fieldset className="govgr-fieldset" aria-describedby="checkboxhint">
-                  <legend className="govgr-heading-m govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
+                  <legend className="govgr-heading-md govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
                   <p className="govgr-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
                   <p className="govgr-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
                   <div className="govgr-checkboxes">
@@ -99,7 +99,7 @@ export default function Home() {
               </div>
               <div className="govgr-field govgr-field__error">
                 <fieldset className="govgr-fieldset" aria-describedby="checkboxhint">
-                  <legend className="govgr-heading-m govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
+                  <legend className="govgr-heading-md govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
                   <p className="govgr-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
                   <div className="govgr-checkboxes">
                     <div className="govgr-checkboxes__item">
@@ -119,14 +119,14 @@ export default function Home() {
               </div>
               <div className="govgr-field">
                 <label className='govgr-label'>
-                  <span className="govgr-heading-s">Ερώτηση</span>
+                  <span className="govgr-heading-sm">Ερώτηση</span>
                   <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
                   <input className="govgr-input" type="text" name="fname" />
                 </label>
               </div>
               <div className="govgr-field govgr-field__error">
                 <label className='govgr-label'>
-                  <span className="govgr-heading-s">Ερώτηση</span>
+                  <span className="govgr-heading-sm">Ερώτηση</span>
                   <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
                   <p className="govgr-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
                   <input className="govgr-input govgr-error-input" type="text" name="fname" />
@@ -134,7 +134,7 @@ export default function Home() {
               </div>
               <div className="govgr-field">
                 <label className='govgr-label'>
-                  <span className="govgr-heading-s">Μια ακόμα ερώτηση</span>
+                  <span className="govgr-heading-sm">Μια ακόμα ερώτηση</span>
                   <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
                   <textarea className="govgr-textarea" name="ta" rows={5} />
                   <span className="govgr-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
@@ -142,7 +142,7 @@ export default function Home() {
               </div>
               <div className="govgr-field govgr-field__error">
                 <label className='govgr-label'>
-                  <span className="govgr-heading-s">Μια ακόμα ερώτηση</span>
+                  <span className="govgr-heading-sm">Μια ακόμα ερώτηση</span>
                   <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
                   <p className="govgr-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
                   <textarea className="govgr-textarea govgr-error-input" name="ta" rows={5} />
@@ -151,7 +151,7 @@ export default function Home() {
               </div>
               <div className="govgr-field">
                 <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-l" ></legend>
+                  <legend class="govgr-fieldset__legend govgr-heading-lg" ></legend>
                   <h4 className="govgr-fieldset__legend" >Επιλέξτε από την λίστα</h4>
                   <p className="govgr-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
                   <label className="govgr-label">
@@ -166,30 +166,30 @@ export default function Home() {
               </div>
               <div className="govgr-field">
                 <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-l" >
+                  <legend class="govgr-fieldset__legend govgr-heading-lg" >
                     Βασικές πληροφορίες
                   </legend>
                   <label className="govgr-label" >
-                    <span class="govgr-heading-s">Όνομα</span>
+                    <span class="govgr-heading-sm">Όνομα</span>
                     <input className="govgr-input" type="text" name="fname" />
                   </label>
                   <label className="govgr-label" >
-                    <span class="govgr-heading-s">Επώνυμο</span>
+                    <span class="govgr-heading-sm">Επώνυμο</span>
                     <input className="govgr-input" type="text" name="lname" />
                   </label>
                   <label className="govgr-label">
-                    <span class="govgr-heading-s">Email</span>
+                    <span class="govgr-heading-sm">Email</span>
                     <input className="govgr-input" type="email" name="email" />
                   </label>
                   <label className="govgr-label">
-                    <span class="govgr-heading-s">Ημ/νια γέννησης</span>
+                    <span class="govgr-heading-sm">Ημ/νια γέννησης</span>
                     <input className="govgr-input" type="date" name="birthday" />
                   </label>
                 </fieldset>
               </div>
               <div className="govgr-field govgr-field__error">
                 <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-l">
+                  <legend class="govgr-fieldset__legend govgr-heading-lg">
                     Πότε έγινε αυτό;
                   </legend>
                   <p className="govgr-hint">Για παράδειγμα: 05 11 2020</p>
@@ -249,7 +249,7 @@ export default function Home() {
             <div className="govgr-form">
               <div className="govgr-field">
                 <fieldset className="govgr-fieldset" aria-describedby="radiohint">
-                  <legend className="govgr-heading-m govgr-fieldset__legend">
+                  <legend className="govgr-heading-md govgr-fieldset__legend">
                     Επιλέξτε την απάντηση σας
                   </legend>
                   <div className="govgr-radios">
@@ -271,7 +271,7 @@ export default function Home() {
 
               <div className="govgr-field">
                 <fieldset className="govgr-fieldset" aria-describedby="checkboxhint">
-                  <legend className="govgr-heading-m govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
+                  <legend className="govgr-heading-md govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
                   <p className="govgr-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
                   <div className="govgr-checkboxes">
                     <div className="govgr-checkboxes__item">
@@ -292,7 +292,7 @@ export default function Home() {
 
               <div className="govgr-field">
                 <label className='govgr-label'>
-                  <span className="govgr-heading-s">Ερώτηση</span>
+                  <span className="govgr-heading-sm">Ερώτηση</span>
                   <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
                   <input className="govgr-input" type="text" name="fname" disabled />
                 </label>
@@ -300,7 +300,7 @@ export default function Home() {
 
               <div className="govgr-field">
                 <label className='govgr-label'>
-                  <span className="govgr-heading-s">Μια ακόμα ερώτηση</span>
+                  <span className="govgr-heading-sm">Μια ακόμα ερώτηση</span>
                   <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
                   <textarea className="govgr-textarea" name="ta" rows={5} disabled />
                   <span className="govgr-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
@@ -309,7 +309,7 @@ export default function Home() {
 
               <div className="govgr-field">
                 <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-l" ></legend>
+                  <legend class="govgr-fieldset__legend govgr-heading-lg" ></legend>
                   <h4 className="govgr-fieldset__legend" >Επιλέξτε από την λίστα</h4>
                   <p className="govgr-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
                   <label className="govgr-label">
@@ -324,30 +324,30 @@ export default function Home() {
               </div>
               <div className="govgr-field">
                 <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-l" >
+                  <legend class="govgr-fieldset__legend govgr-heading-lg" >
                     Βασικές πληροφορίες
                   </legend>
                   <label className="govgr-label" >
-                    <span class="govgr-heading-s">Όνομα</span>
+                    <span class="govgr-heading-sm">Όνομα</span>
                     <input className="govgr-input" type="text" name="fname" disabled />
                   </label>
                   <label className="govgr-label" >
-                    <span class="govgr-heading-s">Επώνυμο</span>
+                    <span class="govgr-heading-sm">Επώνυμο</span>
                     <input className="govgr-input" type="text" name="lname" />
                   </label>
                   <label className="govgr-label">
-                    <span class="govgr-heading-s">Email</span>
+                    <span class="govgr-heading-sm">Email</span>
                     <input className="govgr-input" type="email" name="email" disabled value="test@test.com" />
                   </label>
                   <label className="govgr-label">
-                    <span class="govgr-heading-s">Ημ/νια γέννησης</span>
+                    <span class="govgr-heading-sm">Ημ/νια γέννησης</span>
                     <input className="govgr-input" type="date" name="birthday" disabled />
                   </label>
                 </fieldset>
               </div>
               <div className="govgr-field">
                 <fieldset>
-                  <legend class="govgr-fieldset__legend govgr-heading-l">
+                  <legend class="govgr-fieldset__legend govgr-heading-lg">
                     Πότε έγινε αυτό;
                   </legend>
                   <div className="govgr-date-input">

package/src/pages/headings/service-heading.js

@@ -8,13 +8,13 @@ export default function Home() {
     <div>
       <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>
-      <h5 className="govgr-heading-s">Heading 5</h5>
-      <h6 className="govgr-heading-s">Heading 6</h6>
+      <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>
+      <h5 className="govgr-heading-sm">Heading 5</h5>
+      <h6 className="govgr-heading-sm">Heading 6</h6>
     </div>
   );
 }

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"
               >