@digigov/ui 2.0.0-b4cd6916 → 2.0.0-d0adc9fb

package/src/i18n/locales/el.ts

@@ -4,15 +4,18 @@ 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).',
+      file_size:
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
       image_size:
         'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
@@ -24,17 +27,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 +122,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.',
@@ -21,16 +23,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 +105,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"]} /> 

package/src/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -1,109 +1,37 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside
-children  1`] = `
-<ForwardRef(Layout)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-layout--full-height ds-layout"
-  >
+exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside children 1`] = `
+<body>
+  <div>
     <div
-      className="ds-layout--full-height ds-layout"
+      class="ds-layout ds-layout--full-height"
     >
-      <ForwardRef(Top)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-top"
+      <div
+        class="ds-top"
+      >
+        Header content
+      </div>
+      <div
+        class="ds-container ds-grid ds-gap-sm-12"
+      >
+        <main
+          class="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
+          id="main-content"
         >
-          <div
-            className="ds-top"
-          >
-            Header content
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(Top)>
-      <withDeprecationComponent>
-        <ForwardRef(Container)>
-          <ForwardRef(Grid)
-            className="ds-container"
-            container={true}
-            spacing={
-              Object {
-                "sm": 12,
-              }
-            }
-          >
-            <ForwardRef(Base)
-              as="div"
-              className="ds-container ds-gap-sm-12 ds-grid"
-            >
-              <div
-                className="ds-container ds-gap-sm-12 ds-grid"
-              >
-                <ForwardRef(Main)>
-                  <ForwardRef(Grid)
-                    as="main"
-                    className="ds-main"
-                    id="main-content"
-                    item={true}
-                    md={8}
-                    xs={12}
-                  >
-                    <ForwardRef(Base)
-                      as="main"
-                      className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
-                      id="main-content"
-                    >
-                      <main
-                        className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
-                        id="main-content"
-                      >
-                        Main content
-                      </main>
-                    </ForwardRef(Base)>
-                  </ForwardRef(Grid)>
-                </ForwardRef(Main)>
-                <withDeprecationComponent>
-                  <ForwardRef(Aside)>
-                    <ForwardRef(Grid)
-                      as="aside"
-                      className="ds-aside"
-                      item={true}
-                      md={4}
-                      spacing={4}
-                      xs={12}
-                    >
-                      <ForwardRef(Base)
-                        as="aside"
-                        className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
-                      >
-                        <aside
-                          className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
-                        >
-                          Side content
-                        </aside>
-                      </ForwardRef(Base)>
-                    </ForwardRef(Grid)>
-                  </ForwardRef(Aside)>
-                </withDeprecationComponent>
-              </div>
-            </ForwardRef(Base)>
-          </ForwardRef(Grid)>
-        </ForwardRef(Container)>
-      </withDeprecationComponent>
-      <ForwardRef(Bottom)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-bottom"
+          Main content
+        </main>
+        <aside
+          class="ds-aside ds-aside--sticky xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
         >
-          <div
-            className="ds-bottom"
-          >
-            Bottom content
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(Bottom)>
+          Side content
+        </aside>
+      </div>
+      <div
+        class="ds-bottom"
+      >
+        Bottom content
+      </div>
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(Layout)>
+  </div>
+</body>
 `;

package/src/layouts/Basic/__stories__/WithBasicLayout.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import BasicLayout from '@digigov/ui/layouts/Basic';
 import { Aside } from '@digigov/ui/layouts/Basic/Aside';
+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 BasicLayout from '@digigov/ui/layouts/Basic';
 import { Top } from '@digigov/ui/layouts/Basic/Top';
-import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 
 export const WithBasicLayout = () => (
   <BasicLayout>

package/src/layouts/Basic/{index.mdx → doc.mdx}

@@ -12,26 +12,15 @@ Content and Bottom components.
 
 ### Default layout
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/__stories__/Default.tsx" />
 
 ### Two thirds one third columns layout
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="TwoThirdsOneThirdColumns.tsx"
-/>
-
-  ### Multiple rows lyout
-
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="MultipleRowsLayout.tsx"
-/>
+
+<code src="@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.tsx" />
+
+### Multiple rows layout
+
+<code src="@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout.tsx" />
 
 ## API
 

package/src/layouts/Basic/index.spec.tsx

@@ -9,7 +9,7 @@ import BasicLayout, {
   Bottom,
 } from '@digigov/ui/layouts/Basic';
 
-it('renders the BasicLayout with Top, Container, Bottom, Main and Aside children ', () => {
+it('renders the BasicLayout with Top, Container, Bottom, Main and Aside children', () => {
   const jsx = (
     <BasicLayout>
       <Top>Header content</Top>

package/src/layouts/Basic/index.tsx

@@ -4,7 +4,6 @@ export * from '@digigov/ui/layouts/Basic/Aside';
 export * from '@digigov/ui/layouts/Basic/Main';
 export * from '@digigov/ui/layouts/Basic/Container';
 export * from '@digigov/ui/layouts/Basic/Bottom';
-export * from '@digigov/ui/layouts/Basic/Masthead';
 
 import Layout from '@digigov/react-core/Layout';
 export default Layout;