@digigov/ui 2.0.0-85c27c19 → 2.0.0-8e254888

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/TextArea/__stories__/Default.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 
 export const Default = () => (

package/src/form/TextArea/__stories__/DisabledInput.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextArea/__stories__/LimitedCharacters.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextArea/__stories__/WithDeclaredRows.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextArea/__stories__/WithErrorMessage.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextArea/__stories__/WithHint.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

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/interaction.test.tsx

@@ -2,29 +2,40 @@ 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 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' });
+  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 mount(<WithHint />);
   await page.evaluate(() => document.fonts.ready);
- await page.keyboard.press("Tab");
- await page.keyboard.insertText("undefined");
+  await page.keyboard.press('Tab');
+  await page.keyboard.insertText('Πληροφορίες');
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/form/TextInput/__stories__/AskingForNumbers.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextInput/__stories__/Default.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const Default = () => (

package/src/form/TextInput/__stories__/DisabledInput.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextInput/__stories__/DisabledInputWithValue.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
+import { LockIcon } from '@digigov/react-icons';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
-import { LockIcon } from '@digigov/react-icons';
 
 export const DisabledInputWithValue = () => (
   <FieldContainer>
@@ -16,9 +15,9 @@ export const DisabledInputWithValue = () => (
         value={'Μάριος'}
         disabled
       ></TextInput>
-      <Hint id="input-hint" size='sm'>
+      <Hint id="input-hint" size="sm">
         <LockIcon mr={1} mb={1} />
-       Πεδίο μόνο για προβολή
+        Πεδίο μόνο για προβολή
       </Hint>
     </LabelContainer>
   </FieldContainer>

package/src/form/TextInput/__stories__/FixedWidths.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FixedWidths = () => (

package/src/form/TextInput/__stories__/FluidWidths.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FluidWidths = () => (

package/src/form/TextInput/__stories__/WithErrorMessage.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextInput/__stories__/WithHint.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

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/interaction.test.tsx

@@ -2,16 +2,31 @@ 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 mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>label>input").click();
- await page.keyboard.insertText("undefined");
+  await page.locator('#root>div>label>input').click();
+  await page.keyboard.insertText('όνομα');
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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/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) => {
@@ -17,8 +20,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;
@@ -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,6 +4,8 @@ export default {
       day: 'Ημέρα',
       month: 'Μήνας',
       year: 'Έτος',
+      hours: 'Ώρα',
+      minutes: 'Λεπτά',
     },
     error: {
       required: 'Το πεδίο είναι υποχρεωτικό.',
@@ -12,7 +14,8 @@ export default {
       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';