@digigov/ui 2.0.0-7d9a8d86 → 2.0.0-834daea4

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

@@ -7,21 +7,13 @@ title: SingleCharacterInputs
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SingleCharacterInputs"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/Default.tsx" />
 
 ### Error message
 
-If you’re highlighting the whole date, style all the fields like this:
+If you’re highlighting all the digits of the password, style the fields like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SingleCharacterInputs"
-  story="WithDefaultError.tsx"
-/>
+<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError.tsx" />
 
 ## API
 

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';
+import { WithDefaultError } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';
+import { WithErrorMessageInvalidCode } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';
+import { WithErrorMessageLessDigit } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';
+
+test('renders the All SingleCharacterInputs variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithDefaultError">
+      <WithDefaultError />
+    </TestVariant>
+    <TestVariant title="WithErrorMessageInvalidCode">
+      <WithErrorMessageInvalidCode />
+    </TestVariant>
+    <TestVariant title="WithErrorMessageLessDigit">
+      <WithErrorMessageLessDigit />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/TextArea/TextArea.stories.js

@@ -7,11 +7,11 @@ export default {
   component: TextArea,
   displayName: 'TextArea',
 };
-export * from '@digigov/ui/form/TextArea/__stories__/Default';
-export * from '@digigov/ui/form/TextArea/__stories__/WithHint';
-export * from '@digigov/ui/form/TextArea/__stories__/WithDeclaredRows';
-export * from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
-export * from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
-export * from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
-export * from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
-export * from '@digigov/ui/form/TextArea/__stories__/Dense';
+export { Default } from '@digigov/ui/form/TextArea/__stories__/Default';
+export { WithHint } from '@digigov/ui/form/TextArea/__stories__/WithHint';
+export { WithDeclaredRows } from '@digigov/ui/form/TextArea/__stories__/WithDeclaredRows';
+export { MultipleQuestions } from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
+export { LimitedCharacters } from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
+export { WithErrorMessage } from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
+export { DisabledInput } from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
+export { Dense } from '@digigov/ui/form/TextArea/__stories__/Dense';

package/src/form/TextArea/doc.mdx

@@ -0,0 +1,48 @@
+---
+id: text-area
+title: TextArea
+---
+
+# TextArea
+
+## How to use
+
+<code src="@digigov/ui/form/TextArea/__stories__/Default.tsx" />
+
+### Use appropriately-sized textarea inputs
+
+<code src="@digigov/ui/form/TextArea/__stories__/WithDeclaredRows.tsx" />
+
+### For multiple questions
+
+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/TextArea/__stories__/MultipleQuestions.tsx" />
+
+### Limiting the number of characters
+
+If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
+
+<code src="@digigov/ui/form/TextArea/__stories__/LimitedCharacters.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.
+
+<code src="@digigov/ui/form/TextArea/__stories__/WithHint.tsx" />
+
+### Error message
+
+Error messages should be styled like this:
+
+<code src="@digigov/ui/form/TextArea/__stories__/WithErrorMessage.tsx" />
+
+### Disabled input
+
+<code src="@digigov/ui/form/TextArea/__stories__/DisabledInput.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["TextArea"]} /> 

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/form/TextArea/__stories__/Default';
+import { Dense } from '@digigov/ui/form/TextArea/__stories__/Dense';
+import { DisabledInput } from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
+import { LimitedCharacters } from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
+import { MultipleQuestions } from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
+import { WithDeclaredRows } from '@digigov/ui/form/TextArea/__stories__/WithDeclaredRows';
+import { WithErrorMessage } from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
+import { WithHint } from '@digigov/ui/form/TextArea/__stories__/WithHint';
+
+test('renders the All TextArea variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="DisabledInput">
+      <DisabledInput />
+    </TestVariant>
+    <TestVariant title="LimitedCharacters">
+      <LimitedCharacters />
+    </TestVariant>
+    <TestVariant title="MultipleQuestions">
+      <MultipleQuestions />
+    </TestVariant>
+    <TestVariant title="WithDeclaredRows">
+      <WithDeclaredRows />
+    </TestVariant>
+    <TestVariant title="WithErrorMessage">
+      <WithErrorMessage />
+    </TestVariant>
+    <TestVariant title="WithHint">
+      <WithHint />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/form/TextArea/__stories__/Default';
+import { WithErrorMessage } from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
+import { WithHint } from '@digigov/ui/form/TextArea/__stories__/WithHint';
+
+test('renders the Default click textarea', async ({ mount, page }) => {
+  await mount(<Default />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>div>label>textarea').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the WithErrorMessage Click textarea', async ({ mount, page }) => {
+  await mount(<WithErrorMessage />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>div>label>textarea').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the WithHint Navigate with keyboard', async ({ mount, page }) => {
+  await mount(<WithHint />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.keyboard.press('Tab');
+  await page.keyboard.insertText('Πληροφορίες');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/form/TextInput/TextInput.stories.js

@@ -7,13 +7,13 @@ export default {
   component: TextInput,
   displayName: 'TextInput',
 };
-export * from '@digigov/ui/form/TextInput/__stories__/Default';
-export * from '@digigov/ui/form/TextInput/__stories__/MultipleQuestions';
-export * from '@digigov/ui/form/TextInput/__stories__/FixedWidths';
-export * from '@digigov/ui/form/TextInput/__stories__/FluidWidths';
-export * from '@digigov/ui/form/TextInput/__stories__/WithHint';
-export * from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
-export * from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
-export * from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
-export * from '@digigov/ui/form/TextInput/__stories__/DisabledInputWithValue';
-export * from '@digigov/ui/form/TextInput/__stories__/Dense';
+export { Default } from '@digigov/ui/form/TextInput/__stories__/Default';
+export { MultipleQuestions } from '@digigov/ui/form/TextInput/__stories__/MultipleQuestions';
+export { FixedWidths } from '@digigov/ui/form/TextInput/__stories__/FixedWidths';
+export { FluidWidths } from '@digigov/ui/form/TextInput/__stories__/FluidWidths';
+export { WithHint } from '@digigov/ui/form/TextInput/__stories__/WithHint';
+export { AskingForNumbers } from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
+export { WithErrorMessage } from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
+export { DisabledInput } from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+export { DisabledInputWithValue } from '@digigov/ui/form/TextInput/__stories__/DisabledInputWithValue';
+export { Dense } from '@digigov/ui/form/TextInput/__stories__/Dense';

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { AskingForNumbers } from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
+import { Default } from '@digigov/ui/form/TextInput/__stories__/Default';
+import { Dense } from '@digigov/ui/form/TextInput/__stories__/Dense';
+import { DisabledInput } from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+import { DisabledInputWithValue } from '@digigov/ui/form/TextInput/__stories__/DisabledInputWithValue';
+import { FixedWidths } from '@digigov/ui/form/TextInput/__stories__/FixedWidths';
+import { FluidWidths } from '@digigov/ui/form/TextInput/__stories__/FluidWidths';
+import { MultipleQuestions } from '@digigov/ui/form/TextInput/__stories__/MultipleQuestions';
+import { WithErrorMessage } from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
+import { WithHint } from '@digigov/ui/form/TextInput/__stories__/WithHint';
+
+test('renders the All TextInput variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="AskingForNumbers">
+      <AskingForNumbers />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="DisabledInput">
+      <DisabledInput />
+    </TestVariant>
+    <TestVariant title="DisabledInputWithValue">
+      <DisabledInputWithValue />
+    </TestVariant>
+    <TestVariant title="FixedWidths">
+      <FixedWidths />
+    </TestVariant>
+    <TestVariant title="FluidWidths">
+      <FluidWidths />
+    </TestVariant>
+    <TestVariant title="MultipleQuestions">
+      <MultipleQuestions />
+    </TestVariant>
+    <TestVariant title="WithErrorMessage">
+      <WithErrorMessage />
+    </TestVariant>
+    <TestVariant title="WithHint">
+      <WithHint />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/form/TextInput/__stories__/Default';
+import { WithErrorMessage } from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
+
+test('renders the Default Click and write', async ({ mount, page }) => {
+  await mount(<Default />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>div>label>input').click();
+  await page.keyboard.insertText('όνομα');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the WithErrorMessage Keyboard navigation', async ({
+  mount,
+  page,
+}) => {
+  await mount(<WithErrorMessage />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.keyboard.press('Tab');
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/govgr/Footer/Copyright.tsx

@@ -12,6 +12,7 @@ export interface CopyrightProps {
   copyright?: string;
   createdBy?: React.ReactNode;
   minDigitalCopyright?: boolean;
+  children?: React.ReactNode;
 }
 export const Copyright: React.FC<CopyrightProps> = ({
   copyright,

package/src/i18n/index.tsx

@@ -17,8 +17,8 @@ export const defaultTranslate = (
           if (typeof locale[path] === 'string' && context) {
             let nextLocale = locale[path];
             const matches = locale[path].match(/\{{(\w+)\}}/g) || [];
-            matches.forEach((match) => {
-              const variable = match.replaceAll(/{|}/g, '');
+            matches.forEach((match: string) => {
+              const variable = match.replace(/{|}/g, '');
               nextLocale = nextLocale.replace(match, context[variable]);
             });
             return nextLocale;

package/src/i18n/locales/el.ts

@@ -12,9 +12,10 @@ export default {
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
-      file_size: 'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο.',
+      file_size:
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
       image_size:
-        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο.',
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',
@@ -24,14 +25,21 @@ 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}}',
       },
@@ -92,8 +100,7 @@ export default {
   outdated: {
     mobile:
       'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είτε δεν υποστηρίζεται είτε είναι μη επικαιροποιημένος. Παρακαλούμε επικαιροποιήστε τον browser σας.',
-    web:
-      'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είναι μη επικαιροποιημένος. Για να επικαιροποιήσετε τον browser σας επισκεφθείτε την ιστοσελίδα:  ',
+    web: 'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είναι μη επικαιροποιημένος. Για να επικαιροποιήσετε τον browser σας επισκεφθείτε την ιστοσελίδα:  ',
   },
   pagination: {
     show: 'Εμφανίζονται',

package/src/i18n/locales/en.ts

@@ -12,8 +12,8 @@ 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.',
-      image_size: 'Image size is larger than allowed.',
+      file_size: 'File size is larger than allowed ({{maxSizeToMb}}Mb).',
+      image_size: 'Image size is larger than allowed ({{maxSizeToMb}}Mb).',
       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.',

package/src/icons/index.tsx

@@ -1,2 +1,25 @@
-export * from '@digigov/react-icons';
 export * from '@digigov/ui/icons/Icon';
+export {
+  ArrowIcon,
+  CaretIcon,
+  ChevronIcon,
+  CloseIcon,
+  CheckIcon,
+  BurgerIcon,
+  UncheckIcon,
+  MoreVertIcon,
+  SearchIcon,
+  DownloadIcon,
+  PdfFileIcon,
+  CancelIcon,
+  LockIcon,
+  PlusIcon,
+  MinusIcon,
+  LoginIcon,
+  RestoreIcon,
+  ReplyIcon,
+  ChatIcon,
+  ExclamationIcon,
+  PrintIcon,
+  GlobeIcon,
+} from '@digigov/react-icons';

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

@@ -5,6 +5,7 @@ export default {
   component: Basic,
   displayName: 'Basic',
 };
-export * from '@digigov/ui/layouts/Basic/__stories__/Default';
-export * from '@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns';
-export * from '@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout';
+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';

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

@@ -1,28 +1,32 @@
-
 import React from 'react';
 import { GovGRFooter } from '@digigov/ui/govgr/Footer';
 import { Layout } from '@digigov/ui/layouts/Basic';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
 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';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+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