@digigov/ui 2.0.0-daaf7bdf → 2.0.0-e20fed09

package/src/i18n/locales/el.ts

@@ -4,17 +4,21 @@ export default {
       day: 'Ημέρα',
       month: 'Μήνας',
       year: 'Έτος',
+      hours: 'Ώρα',
+      minutes: 'Λεπτά',
     },
     error: {
       required: 'Το πεδίο είναι υποχρεωτικό.',
       number: 'Συμπληρώστε έναν έγκυρο αριθμό',
-      positive_integer_number: 'Συμπληρώστε έναν θετικό ακέραιο αριθμό.',
+      positive_integer_number: 'Συμπληρώστε έναν θετικό ακέραιο αριθμό',
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
-      file_size: 'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+      amka: 'Ο ΑΜΚΑ που συμπληρώσατε δεν είναι έγκυρος.',
+      file_size:
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}}).',
       image_size:
-        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}}).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',
@@ -24,16 +28,93 @@ export default {
       'needs-more':
         'Για να συνεχίσετε, πατήστε το κουμπί «Προσθήκη». Διαφορετικά, επιλέξε το «Όχι» σαν απάντηση.',
       array: {
-        min:
-          'Το πεδίο πρέπει να έχει τουλάχιστον {{min}} εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.',
-        max:
-          'Έχετε φτάσει το όριο των {{max}} εγγραφών. Αν θέλετε να προσθέσετε μια νέα, διαγράψτε μια από τις παραπάνω εγγραφές. Διαφορετικά, επιλέξτε το «Όχι» σαν απάντηση.',
+        min: 'Το πεδίο πρέπει να έχει τουλάχιστον {{min}} εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.',
+        max: 'Έχετε φτάσει το όριο των {{max}} εγγραφών. Αν θέλετε να προσθέσετε μια νέα, διαγράψτε μια από τις παραπάνω εγγραφές. Διαφορετικά, επιλέξτε το «Όχι» σαν απάντηση.',
         length: 'Το πεδίο πρέπει να έχει ακριβώς {{length}} εγγραφές',
       },
       date: {
         invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
+        invalid_month_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
+        invalid_day_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
+        invalid_day_month:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το ετος.',
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
+        invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
+      },
+      datetime: {
+        invalid: 'Η ημερομηνία και ώρα πρέπει να είναι έγκυρη.',
+        invalid_month_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, την ώρα και τα λεπτά.',
+        invalid_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος, την ώρα και τα λεπτά.',
+        invalid_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, την ώρα και τα λεπτά.',
+        invalid_day_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, την ώρα και τα λεπτά.',
+        invalid__hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
+        invalid_minutes: 'Η ημερομηνία πρέπει να περιλαμβάνει τα λεπτά.',
+        invalid_hours: 'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα.',
+        invalid_month_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και τα λεπτά.',
+        invalid_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και την ώρα.',
+        invalid_month_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
+        invalid_day_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και τα λεπτά.',
+        invalid_day_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και την ώρα.',
+        invalid_day_month_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος.',
+        invalid_day_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, το έτος και την ώρα.',
+        invalid_day_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
+        invalid_day_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και τα λεπτά.',
+        invalid_day_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και την ώρα.',
+        invalid_day_month:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και τα λεπτά.',
+        invalid_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και την ώρα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το έτος.',
+        invalid_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και τα λεπτά.',
+        invalid_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και την ώρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_day_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τα λεπτά.',
+        invalid_day_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και την ώρα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
+        invalid_hours_range: 'Η ώρα πρέπει να είναι μεταξύ 0 και 23.',
+        invalid_minutes_range: 'Τα λεπτά πρέπει να είναι μεταξύ 0 και 59.',
+        invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
+        invalid_day_month_year_minutes:
+          'Η ημερομηννία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος κ  τα λεπτά.',
+        invalid_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
+        earlier_than:
+          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}.',
+        later_than:
+          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}.',
       },
       otp: {
         invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
@@ -92,8 +173,7 @@ export default {
   outdated: {
     mobile:
       'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είτε δεν υποστηρίζεται είτε είναι μη επικαιροποιημένος. Παρακαλούμε επικαιροποιήστε τον browser σας.',
-    web:
-      'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είναι μη επικαιροποιημένος. Για να επικαιροποιήσετε τον browser σας επισκεφθείτε την ιστοσελίδα:  ',
+    web: 'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είναι μη επικαιροποιημένος. Για να επικαιροποιήσετε τον browser σας επισκεφθείτε την ιστοσελίδα:  ',
   },
   pagination: {
     show: 'Εμφανίζονται',
@@ -105,14 +185,14 @@ export default {
   },
   upload: {
     file: 'Αρχείο',
+    image: 'Εικόνα',
     choose_file: 'Επιλογή αρχείου',
     change_file: 'Αντικατάσταση αρχείου',
     no_file: 'Δεν έχετε επιλέξει αρχείο',
     reset_file: 'Αφαίρεση',
-    image: 'Φωτογραφία',
-    no_image: 'Δεν έχετε επιλέξει φωτογραφία',
-    change_image: 'Αντικατάσταση φωτογραφίας',
-    choose_image: 'Επιλογή φωτογραφίας',
+    no_image: 'Δεν έχετε επιλέξει εικόνα',
+    change_image: 'Αντικατάσταση εικόνας',
+    choose_image: 'Επιλογή εικόνας',
   },
   'copy-to-clipboard': {
     message: 'Το κείμενο αντιγράφηκε επιτυχώς!',

package/src/i18n/locales/en.ts

@@ -4,6 +4,8 @@ export default {
       day: 'Day',
       month: 'Month',
       year: 'Year',
+      hours: 'Hours',
+      minutes: 'Minutes',
     },
     error: {
       required: 'This field is required.',
@@ -12,8 +14,9 @@ export default {
       string: 'This field must be a string',
       email: 'Please enter a valid email address (e-mail).',
       afm: 'The VAT number you entered is incorrect.',
-      file_size: 'File size is larger than allowed ({{maxSizeToMb}}Mb).',
-      image_size: 'Image size is larger than allowed ({{maxSizeToMb}}Mb).',
+      amka: 'The SSN you entered is incorrect.',
+      file_size: 'File size is larger than allowed ({{maxSize}}).',
+      image_size: 'Image size is larger than allowed ({{maxSize}}).',
       mobile_phone: 'Fill in a valid mobile phone number.',
       landline: 'Fill in a valid landline phone number.',
       phone_number: 'Fill in a valid phone number.',
@@ -21,16 +24,70 @@ export default {
       iban: 'Fill in a valid IBAN number',
       postalCode: 'Fill in a valid postal code number.',
       array: {
-        min:
-          'This field should have at least {{min}} records. Add one more by selecting the answer “Yes“ in the next question.',
-        max:
-          'You have reached the maximum limit of {{max}} records. If you want to add one more, please remove one of the answers above. Otherwise, select “No“ as an answer.',
+        min: 'This field should have at least {{min}} records. Add one more by selecting the answer “Yes“ in the next question.',
+        max: 'You have reached the maximum limit of {{max}} records. If you want to add one more, please remove one of the answers above. Otherwise, select “No“ as an answer.',
         length: 'This field should have exactly {{length}} records',
       },
       date: {
         invalid: 'Date must be a real date.',
         earlier_than: 'The date must be earlier than {{maxDate}}.',
         later_than: 'The date must be later than {{minDate}}',
+        invalid_month_year: 'Date must include month and year.',
+        invalid_day_year: 'Date must include day and year.',
+        invalid_day_month: 'Date must include day and month.',
+        invalid_day: 'Date must include day.',
+        invalid_month: 'Date must include month.',
+        invalid_year: 'Date must include year.',
+        invalid_day_range: 'Day must be between 1 and {{maxDay}}.',
+        invalid_month_range: 'Month must be between 1 and 12.',
+      },
+      datetime: {
+        invalid: 'Date and time must be valid.',
+        invalid_month_year_hours_minutes:
+          'Date must include month, year, hours, and minutes.',
+        invalid_day_year_hours_minutes:
+          'Date must include day, year, hours, and minutes.',
+        invalid_day_month_hours_minutes:
+          'Date must include day, month, hours, and minutes.',
+        invalid_year_hours_minutes:
+          'Date must include year, hours, and minutes.',
+        invalid_month_hours_minutes:
+          'Date must include month, hours, and minutes.',
+        invalid_day_hours_minutes: 'Date must include day, hours, and minutes.',
+        invalid__hours_minutes: 'Time must include hours and minutes.',
+        invalid_minutes: 'Please enter valid minutes.',
+        invalid_hours: 'Please enter valid hours.',
+        invalid_month_year_minutes:
+          'Date must include month, year, and minutes.',
+        invalid_month_year_hours: 'Date must include month, year, and hours.',
+        invalid_month_year: 'Date must include month and year.',
+        invalid_day_year_minutes: 'Date must include day, year, and minutes.',
+        invalid_day_year_hours: 'Date must include day, year, and hours.',
+        invalid_day_month_year: 'Date must include day, month, and year.',
+        invalid_day_month_year_hours:
+          'Date must include day, month, year, and hours.',
+        invalid_day_year: 'Date must include day and year.',
+        invalid_day_month_minutes: 'Date must include day, month, and minutes.',
+        invalid_day_month_hours: 'Date must include day, month, and hours.',
+        invalid_day_month: 'Date must include day and month.',
+        invalid_year_minutes: 'Date must include year and minutes.',
+        invalid_year_hours: 'Date must include year and hours.',
+        invalid_year: 'Date must include year.',
+        invalid_month_minutes: 'Date must include month and minutes.',
+        invalid_month_hours: 'Date must include month and hours.',
+        invalid_month: 'Date must include month.',
+        invalid_day_minutes: 'Date must include day and minutes.',
+        invalid_day_hours: 'Date must include day and hours.',
+        invalid_day: 'Date must include day.',
+        invalid_day_month_year_minutes:
+          'Date must include day, month,year and minutes.',
+        invalid_hours_minutes: 'Date must include hours and minutes.',
+        invalid_hours_range: 'Hours must be between 0 and 23.',
+        invalid_minutes_range: 'Minutes must be between 0 and 59.',
+        invalid_day_range: 'Day must be between 1 and {{maxDay}}.',
+        invalid_month_range: 'Month must be between 1 and 12.',
+        earlier_than: 'The date and time must be earlier than {{maxDateTime}}.',
+        later_than: 'The date and time must be later than {{minDateTime}}.',
       },
       text: {
         more_than: 'You have surpass the {{max}} characters limit.',
@@ -84,8 +141,7 @@ export default {
   outdated: {
     mobile:
       'This site may not work properly because your browser is either not supported or outdated. Please update your browser',
-    web:
-      'This site may not work properly because your browser outdated. To update your browser visit: ',
+    web: 'This site may not work properly because your browser outdated. To update your browser visit: ',
   },
   pagination: {
     show: 'Showing',

package/src/icons/IconBase/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-icons/IconBase';
+
+import IconBase from '@digigov/react-icons/IconBase';
+export default IconBase;

package/src/icons/SvgIcon/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-icons/SvgIcon';
+
+import SvgIcon from '@digigov/react-icons/SvgIcon';
+export default SvgIcon;

package/src/icons/index.tsx

@@ -1,4 +1,6 @@
 export * from '@digigov/ui/icons/Icon';
+export * from '@digigov/ui/icons/IconBase';
+export * from '@digigov/ui/icons/SvgIcon';
 export {
   ArrowIcon,
   CaretIcon,
@@ -22,4 +24,4 @@ export {
   ExclamationIcon,
   PrintIcon,
   GlobeIcon,
-} from '@digigov/react-icons';
+} from '@digigov/react-icons';

package/src/layouts/Basic/Basic.stories.js

@@ -1,11 +1,14 @@
 import Basic from '@digigov/ui/layouts/Basic';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov UI/layouts/Basic',
   defaultWidth: 'lg',
   component: Basic,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Basic',
 };
 export { Default } from '@digigov/ui/layouts/Basic/__stories__/Default';
 export { TwoThirdsOneThirdColumns } from '@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns';
 export { MultipleRowsLayout } from '@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout';
-export { WithBasicLayout } from '@digigov/ui/layouts/Basic/__stories__/WithBasicLayout';
+export { WithBasicLayout } from '@digigov/ui/layouts/Basic/__stories__/WithBasicLayout';

package/src/layouts/Basic/Bottom/__stories__/Default.tsx

@@ -1,28 +1,32 @@
-
 import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRFooter } from '@digigov/ui/govgr/Footer';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Layout } from '@digigov/ui/layouts/Basic';
+import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
 import { Heading, Paragraph } from '@digigov/ui/typography';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
-import Bottom from '@digigov/ui/layouts/Basic/Bottom';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Τίτλος σελίδας</Heading>
         <Paragraph>
-          Σε αυτό το παράδειγμα το Footer εσωκλείεται μέσα στο
-          Bottom component
+          Σε αυτό το παράδειγμα το Footer εσωκλείεται μέσα στο Bottom component
         </Paragraph>
       </Main>
     </Container>
@@ -32,4 +36,4 @@ export const Default = () => (
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Bottom/doc.mdx

@@ -0,0 +1,18 @@
+---
+id: bottom
+title: Bottom
+---
+
+# Bottom
+
+Use the Bottom component in order to wrap the Footer's components.
+
+## How to use
+
+<code src="@digigov/ui/layouts/Basic/Bottom/__stories__/Default.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Bottom"]} /> 

package/src/layouts/Basic/Container/__stories__/Default.tsx

@@ -1,30 +1,37 @@
 import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Layout } from '@digigov/ui/layouts/Basic';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
 import { Heading, Paragraph } from '@digigov/ui/typography';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Περιεχόμενο μέσα σε Container</Heading>
         <Paragraph>
-          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών,
-          Μελών Ειδικού Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
-          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν διδακτικό έργο.
+          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών, Μελών Ειδικού
+          Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
+          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν
+          διδακτικό έργο.
         </Paragraph>
       </Main>
     </Container>
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Container/doc.mdx

@@ -0,0 +1,18 @@
+---
+id: container
+title: Container
+---
+
+# Container
+
+Container compoment wraps around other elements, grouping them together. Containers are often used to structure and organize content on a web page.
+
+## How to use
+
+<code src="@digigov/ui/layouts/Basic/Container/__stories__/Default.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Container"]} /> 

package/src/layouts/Basic/Main/__stories__/Default.tsx

@@ -1,30 +1,37 @@
 import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Layout } from '@digigov/ui/layouts/Basic';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
 import { Heading, Paragraph } from '@digigov/ui/typography';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Τίτλος Main</Heading>
         <Paragraph>
-          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών,
-          Μελών Ειδικού Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
-          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν διδακτικό έργο.
+          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών, Μελών Ειδικού
+          Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
+          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν
+          διδακτικό έργο.
         </Paragraph>
       </Main>
     </Container>
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Main/doc.mdx

@@ -0,0 +1,19 @@
+---
+id: main
+title: Main
+---
+
+# Main
+
+# How to use
+
+The Main component is used to include tha main information of the page,
+spanning two-thirds of the page width.
+
+<code src="@digigov/ui/layouts/Basic/Main/__stories__/Default.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Main"]} /> 

package/src/layouts/Basic/Top/__stories__/Default.tsx

@@ -1,28 +1,35 @@
 import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Layout } from '@digigov/ui/layouts/Basic';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
 import { Heading, Paragraph } from '@digigov/ui/typography';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Τίτλος σελίδας</Heading>
         <Paragraph>
-          Σε αυτό το παράδειγμα το περιεχόμενο του Header εσωκλείεται μέσα στο Top component
+          Σε αυτό το παράδειγμα το περιεχόμενο του Header εσωκλείεται μέσα στο
+          Top component
         </Paragraph>
       </Main>
     </Container>
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Top/doc.mdx

@@ -0,0 +1,19 @@
+---
+id: top
+title: Top
+parent: docs/ui/components
+---
+
+# Top
+
+The Top component is used to group the Header components.
+
+## How to use
+
+<code src="@digigov/ui/layouts/Basic/Top/__stories__/Default.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["Top"]} />