@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

package/src/form/TextInput/{index.mdx → doc.mdx}

@@ -7,19 +7,13 @@ title: TextInput
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/Default.tsx" />
 
-### If you’re asking more than one question on the page
+### For multiple questions
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="MultipleQuestions.tsx"
-/>
+If you’re asking more than one question on the page, you can display directly the question's title without using the component `LabelTitle`.
+
+<code src="@digigov/ui/form/TextInput/__stories__/MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -29,59 +23,33 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FixedWidths.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FluidWidths.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/FluidWidths.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithHint.tsx"
-/>
-
-## Numbers
+<code src="@digigov/ui/form/TextInput/__stories__/WithHint.tsx" />
 
-### Asking for whole numbers
+### Asking for numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="AskingForNumbers.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/AskingForNumbers.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithErrorMessage.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="DisabledInput.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/DisabledInput.tsx" />
 
 ## API
 

package/src/form/TextInput/index.test.tsx

@@ -50,6 +50,10 @@ test('renders the All TextInput variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/form/TextInput/interaction.test.tsx

@@ -7,6 +7,10 @@ import { WithErrorMessage } from '@digigov/ui/form/TextInput/__stories__/WithErr
 test('renders the Default Click and write', async ({ mount, page }) => {
   await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>div>label>input').click();
   await page.keyboard.insertText('όνομα');
 
@@ -23,6 +27,10 @@ test('renders the WithErrorMessage Keyboard navigation', async ({
 }) => {
   await mount(<WithErrorMessage />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.keyboard.press('Tab');
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/govgr/GovGRLogo/index.tsx

@@ -1,5 +1,20 @@
-import GovGRLogo from '@digigov/react-core/GovGRLogo';
+export * from '@digigov/react-core/GovGRLogoBase';
+import React from 'react';
+import {
+  GovGRLogoBase,
+  GovGRLogoBaseProps,
+} from '@digigov/react-core/GovGRLogoBase';
+import { Link } from '@digigov/ui/navigation/Link';
 
-export { GovGRLogo };
+export interface GovGRLogoProps extends GovGRLogoBaseProps {}
 
+export const GovGRLogo = React.forwardRef<HTMLAnchorElement, GovGRLogoProps>(
+  function GovGRLogo({ children, ...props }, ref) {
+    return (
+      <GovGRLogoBase as={Link} ref={ref} {...props}>
+        {children}
+      </GovGRLogoBase>
+    );
+  }
+);
 export default GovGRLogo;

package/src/i18n/index.tsx

@@ -10,6 +10,9 @@ export const defaultTranslate = (
   key: string,
   context?: Record<string, any>
 ): string => {
+  if (typeof key !== 'string') {
+    return key;
+  }
   try {
     if (key.split('.').length > 0) {
       return key.split('.').reduce((locale, path) => {
@@ -33,7 +36,7 @@ export const defaultTranslate = (
     } else {
       return key;
     }
-  } catch (err) {
+  } catch {
     console.error(`Translation key \`${key}\` not found`);
     return key;
   }
@@ -48,7 +51,17 @@ export const I18NProvider: React.FC<I18NContextProps> = ({
   ...props
 }: I18NContextProps) => {
   return (
-    <I18NContext.Provider value={{ t, ...props }}>
+    <I18NContext.Provider
+      value={{
+        t: (...args) => {
+          if (typeof args[0] !== 'string') {
+            return args[0];
+          }
+          return t(...args);
+        },
+        ...props,
+      }}
+    >
       {children}
     </I18NContext.Provider>
   );

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,17 +28,44 @@ 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}}',
       },
+      datetime: {
+        invalid: 'Η ημερομηνία και ώρα πρέπει να είναι έγκυρη.',
+        invalid_month_year:
+          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα και το έτος.',
+        invalid_day_year:
+          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και το έτος.',
+        invalid_day_month:
+          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και τον μήνα.',
+        invalid_day: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα',
+        invalid_month: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα.',
+        invalid_year: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει το έτος.',
+        invalid_hours: 'Συμπληρώστε έγκυρη ώρα.',
+        invalid_minutes: 'Συμπληρώστε έγκυρα λεπτά.',
+        invalid_hours_range: 'Η ώρα πρέπει να είναι μεταξύ 0 και 23.',
+        invalid_minutes_range: 'Τα λεπτά πρέπει να είναι μεταξύ 0 και 59.',
+        earlier_than:
+          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}',
+        later_than:
+          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}',
+      },
       otp: {
         invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
         less_than: 'Έχετε συμπληρώσει λιγότερα από {{maxLength}} ψηφία.',
@@ -92,8 +123,7 @@ export default {
   outdated: {
     mobile:
       'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είτε δεν υποστηρίζεται είτε είναι μη επικαιροποιημένος. Παρακαλούμε επικαιροποιήστε τον browser σας.',
-    web:
-      'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είναι μη επικαιροποιημένος. Για να επικαιροποιήσετε τον browser σας επισκεφθείτε την ιστοσελίδα:  ',
+    web: 'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είναι μη επικαιροποιημένος. Για να επικαιροποιήσετε τον browser σας επισκεφθείτε την ιστοσελίδα:  ',
   },
   pagination: {
     show: 'Εμφανίζονται',

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,35 @@ 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.',
+      },
+      datetime: {
+        invalid: 'Date and time must be valid.',
+        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_hours: 'Please enter valid hours.',
+        invalid_minutes: 'Please enter valid minutes.',
+        invalid_hours_range: 'Hours must be between 0 and 23.',
+        invalid_minutes_range: 'Minutes must be between 0 and 59.',
+        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 +106,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

@@ -8,4 +8,4 @@ export default {
 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 = () => (
   <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/{index.mdx → doc.mdx}

@@ -9,11 +9,7 @@ Use the Bottom component in order to wrap the Footer's components.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Bottom"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/Bottom/__stories__/Default.tsx" />
 
 ## API
 

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 = () => (
   <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/{index.mdx → doc.mdx}

@@ -9,12 +9,7 @@ Container compoment wraps around other elements, grouping them together. Contain
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Container"
-  story="Default.tsx"
-/>
-
+<code src="@digigov/ui/layouts/Basic/Container/__stories__/Default.tsx" />
 
 ## API
 

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 = () => (
   <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/{index.mdx → doc.mdx}

@@ -3,16 +3,14 @@ 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.
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Main"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/Main/__stories__/Default.tsx" />
 
 ## API
 

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 = () => (
   <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"]} />