@digigov/ui 2.0.0-76ec20a0 → 2.0.0-7d765d3c

package/src/form/AutoComplete/doc.mdx

@@ -30,21 +30,22 @@ through, select from large collections of options and help services get more con
 
 ### With min length
 
-This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2)
+This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2).
 
 <code src="@digigov/ui/form/AutoComplete/__stories__/WithMinLength.tsx" />
 
 ## API
 
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={
-  ["AutoCompleteWrapper",
-  "AutoCompleteStatus",
-  "AutoCompleteStatusWrapper",
-  "AutoCompleteInputTypeahead",
-  "AutoCompleteInput",
-  "AutoCompleteResultList",
-  "AutoCompleteResultListItem",
-  "AutoCompleteAssistiveHint"
-  ]} /> 
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps
+  componentName={[
+    'AutoCompleteWrapper',
+    'AutoCompleteStatus',
+    'AutoCompleteStatusWrapper',
+    'AutoCompleteInput',
+    'AutoCompleteResultList',
+    'AutoCompleteResultListItem',
+    'AutoCompleteAssistiveHint',
+  ]}
+/>

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

@@ -7,7 +7,9 @@ import { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stor
 import { MultipleWithDefaultValues } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
 import { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
 import { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
+import { WithCustomValue } from '@digigov/ui/form/AutoComplete/__stories__/WithCustomValue';
 import { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
+import { WithHint } from '@digigov/ui/form/AutoComplete/__stories__/WithHint';
 import { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';
 import { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
 import { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
@@ -34,9 +36,15 @@ test('renders the All AutoComplete variants', async ({ mount, page }) => {
     <TestVariant title="WithAutoSelect">
       <WithAutoSelect />
     </TestVariant>
+    <TestVariant title="WithCustomValue">
+      <WithCustomValue />
+    </TestVariant>
     <TestVariant title="WithDefaultValue">
       <WithDefaultValue />
     </TestVariant>
+    <TestVariant title="WithHint">
+      <WithHint />
+    </TestVariant>
     <TestVariant title="WithMinLength">
       <WithMinLength />
     </TestVariant>

package/src/form/AutoComplete/index.tsx

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 import { AutoCompleteAssistiveHint } from '@digigov/react-core/AutoCompleteAssistiveHint';
 import { AutoCompleteContainer } from '@digigov/react-core/AutoCompleteContainer';
 import { AutoCompleteInputBase } from '@digigov/react-core/AutoCompleteInputBase';
-import { AutoCompleteInputTypeahead } from '@digigov/react-core/AutoCompleteInputTypeahead';
 import { AutoCompleteMultipleInput } from '@digigov/react-core/AutoCompleteMultipleInput';
 import { AutoCompleteMultipleInputContainer } from '@digigov/react-core/AutoCompleteMultipleInputContainer';
 import { AutoCompleteResultList } from '@digigov/react-core/AutoCompleteResultList';
@@ -36,6 +35,7 @@ export interface AutoCompleteProps {
   };
   width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
   autoselect?: boolean;
+  hint?: boolean;
   defaultValue?: string | string[];
   minLength?: number;
   name?: string;
@@ -70,6 +70,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     minLength: 0,
     name: 'ds-input-autocomplete',
     placeholder: '',
+    hint: false,
     onConfirm: (): void => {
       return;
     },
@@ -191,12 +192,13 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
   handleComponentBlur(newState?: NewQueryProps): void {
     const { options, query, selected } = this.state;
-    let newQuery: string;
-    if (this.props.confirmOnBlur) {
-      newQuery = newState?.query || query;
-      this.props.onConfirm?.(options[selected as number]);
-    } else {
-      newQuery = query;
+    const { confirmOnBlur, autoselect, onConfirm } = this.props;
+    let newQuery = query;
+    if (confirmOnBlur || autoselect) {
+      newQuery = newState?.query ?? query;
+    }
+    if (confirmOnBlur) {
+      onConfirm?.(options[selected as number]);
     }
     this.setState({
       focused: null,
@@ -214,6 +216,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
   }
 
   handleAutoCompleteBlur(event, index?: number): void {
+    const { autoselect } = this.props;
     const { focused, options, query, selected } = this.state;
     let focusingOutsideComponent = false;
     if (event.relatedTarget === null) {
@@ -235,7 +238,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       focusingOutsideComponent &&
       !(focusingAnotherOption || focusingInput || focusingButtonArrow);
 
-    if (blurComponent) {
+    if (blurComponent && !autoselect) {
       // In handleInputBlur:
       const newQuery = isIosDevice()
         ? query
@@ -245,11 +248,24 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         query: newQuery,
       });
     }
+    if (blurComponent && autoselect) {
+      // In handleInputBlur:
+      const selectedOption = this.templateInputValue(
+        options[selected as number]
+      );
+      const newQuery = isIosDevice()
+        ? query
+        : selectedOption?.toLowerCase().includes(query.toLowerCase())
+          ? selectedOption
+          : query;
+      this.handleComponentBlur({
+        menuOpen: false,
+        query: newQuery,
+      });
+    }
   }
-
   handleInputChange(event: { target: any }): void {
     const { source, minLength } = this.props;
-    const autoselect = this.hasAutoselect();
     const query = event.target.value;
     const queryEmpty = query.length === 0;
     this.setState({
@@ -263,7 +279,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       this.setState({
         menuOpen: optionsAvailable,
         options,
-        selected: autoselect && optionsAvailable ? 0 : -1,
+        selected: -1,
         validChoiceMade: false,
       });
     });
@@ -315,6 +331,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         hovered: index,
       });
     }
+    this.handleOptionFocus(index);
   }
 
   handleOptionClickMultiple(index: number): void {
@@ -467,11 +484,13 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       case 'enter':
         this.handleEnter(event);
         break;
-      case 'escape':
+      case 'escape': {
         this.handleComponentBlur({
           query: this.state.query,
+          menuOpen: false,
         });
         break;
+      }
       case 'backspace':
         if (this.props.multiple) {
           if (
@@ -507,7 +526,6 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         break;
     }
   }
-
   render(): JSX.Element {
     const {
       id,
@@ -516,6 +534,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       name,
       placeholder,
       required,
+      hint,
       tNoResults,
       tStatusQueryTooShort,
       tStatusNoResults,
@@ -550,7 +569,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       selectedOptionText &&
       selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0;
     const hintValue =
-      optionBeginsWithQuery && autoselect
+      optionBeginsWithQuery && (autoselect || hint)
         ? query + selectedOptionText.substr(query.length)
         : '';
 
@@ -646,12 +665,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           tSelectedOption={tStatusSelectedOption}
           tResults={tStatusResults}
         />
-
-        {hintValue && (placeholder === '' || !placeholder) && (
-          <AutoCompleteInputTypeahead value={hintValue} />
-        )}
-
-        {multiple ? (
+        {multiple && !autoselect ? (
           <AutoCompleteMultipleInputContainer
             isFocused={componentIsFocused}
             numberOfSelected={this.props.numberOfSelected}
@@ -711,7 +725,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               onChange={this.handleInputChange}
               onFocus={this.handleInputFocus}
               name={name}
-              placeholder={placeholder}
+              placeholder={hintValue || placeholder}
               ref={(inputElement) => {
                 this.elementReferences[-1] = inputElement;
               }}
@@ -732,7 +746,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
                     this.setState({
                       menuOpen: optionsAvailable,
                       options,
-                      selected: autoselect && optionsAvailable ? 0 : -1,
+                      selected: -1,
                       validChoiceMade: false,
                     });
                   });
@@ -787,7 +801,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               onChange={this.handleInputChange}
               onFocus={this.handleInputFocus}
               name={name}
-              placeholder={placeholder}
+              placeholder={hintValue || placeholder}
               ref={(inputElement) => {
                 this.elementReferences[-1] = inputElement;
               }}
@@ -823,7 +837,6 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 export {
   AutoComplete,
   AutoCompleteInputBase,
-  AutoCompleteInputTypeahead,
   AutoCompleteResultList,
   AutoCompleteResultListItem,
   AutoCompleteContainer,

package/src/form/Button/__stories__/ThemeToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ThemeToggleButton } from '@digigov/ui/form/Button/ThemeToggleButton';
 
-export const ThemeToggle = () => <ThemeToggleButton />;
+export const ThemeToggle = (_: any) => <ThemeToggleButton />;
 export default ThemeToggle;

package/src/form/Button/doc.mdx

@@ -10,36 +10,47 @@ application or saving their information.
 
 ## How to use
 
-### Default buttons
 
 Use a default button for the main call to action on a page.
 
 <code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
 
-### Start buttons
+Avoid using multiple default buttons on a single page. Having more than on main
+call to action reduces their impact, and makes it harder for users to know what
+to do next.
+
+### Start button - Call To Action
 
 Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
 
 <code src="@digigov/ui/form/Button/__stories__/CallToActionButton.tsx" />
 
-### Secondary buttons
+### Secondary color
 
 Use secondary buttons for secondary calls to action on a page.
 
 <code src="@digigov/ui/form/Button/__stories__/Secondary.tsx" />
 
-### Warning buttons
+### Warning color
 
 Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
 
 <code src="@digigov/ui/form/Button/__stories__/Warning.tsx" />
 
-### Disable buttons
+### Link variant
+
+<code src="@digigov/ui/form/Button/__stories__/WithVariantLink.tsx" />
+
+### Disabled
 
 Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
 
 <code src="@digigov/ui/form/Button/__stories__/Disabled.tsx" />
 
+### Dense 
+
+<code src="@digigov/ui/form/Button/__stories__/Dense.tsx" />
+
 ### Grouping buttons
 
 Use a button group when two or more buttons are placed together.
@@ -71,15 +82,17 @@ For example, `Add another address` and `Accept and claim a tax refund`.
 
 Align the primary action button to the left edge of your form.
 
-## Default buttons
+## More buttons
 
-Use a default button for the main call to action on a page.
+### Back link button
 
-<code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
+<code src="@digigov/ui/form/Button/__stories__/Back.tsx" />
+
+
+### Theme toggle button
+
+<code src="@digigov/ui/form/Button/__stories__/ThemeToggle.tsx" />
 
-Avoid using multiple default buttons on a single page. Having more than on main
-call to action reduces their impact, and makes it harder for users to know what
-to do next.
 
 ## Accessibility
 
@@ -88,9 +101,7 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 
 ## API
 
-Read more about [how to use the React types](/docs/api/Button).
-
-See below for a complete reference to all of the props  available to the components mentioned here.
+See below for a complete reference to all of the props available to the components mentioned here.
 
 <ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} /> 
 

package/src/form/Checkbox/doc.mdx

@@ -37,7 +37,7 @@ Error messages should be styled like this:
 
 <code src="@digigov/ui/form/Checkbox/__stories__/WithErrorMessage.tsx" />
 
-## Conditionally revealing a related question
+### Conditionally revealing a related question
 
 You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
 

package/src/form/FileUpload/FileUpload.stories.js

@@ -10,3 +10,4 @@ export default {
 };
 export { Default } from '@digigov/ui/form/FileUpload/__stories__/Default';
 export { WithErrorMessage } from '@digigov/ui/form/FileUpload/__stories__/WithErrorMessage';
+export { WithVariantLink } from '@digigov/ui/form/FileUpload/__stories__/WithVariantLink';

package/src/form/FileUpload/__stories__/WithVariantLink.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+import { FileUpload } from '@digigov/ui/form/FileUpload';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const WithVariantLink = () => (
+  <FieldContainer>
+    <Fieldset>
+      <FieldsetLegend size="md">Λογότυπο επιχείρησης</FieldsetLegend>
+      <Hint id="file-hint">Το αρχείο μπορεί να είναι png ή jpeg.</Hint>
+      <FileUpload aria-describedby="file-hint" variant="link">
+        Επιλογή αρχείου
+      </FileUpload>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithVariantLink;

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

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/form/FileUpload/__stories__/Default';
 import { WithErrorMessage } from '@digigov/ui/form/FileUpload/__stories__/WithErrorMessage';
+import { WithVariantLink } from '@digigov/ui/form/FileUpload/__stories__/WithVariantLink';
 
 test('renders the All FileUpload variants', async ({ mount, page }) => {
   await mount(
@@ -14,6 +15,9 @@ test('renders the All FileUpload variants', async ({ mount, page }) => {
     <TestVariant title="WithErrorMessage">
       <WithErrorMessage />
     </TestVariant>
+    <TestVariant title="WithVariantLink">
+      <WithVariantLink />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);

package/src/form/RadioContainer/doc.mdx

@@ -19,20 +19,20 @@ If you’re asking more than one question on the page, you can display the quest
 
 <code src="@digigov/ui/form/RadioContainer/__stories__/Inline.tsx" />
 
-### Checkbox items with hints
+### Radio items with hints
 
-You can add hints to checkbox items to provide additional information about the options.
+You can add hints to radio items to provide additional information about the options.
 
 <code src="@digigov/ui/form/RadioContainer/__stories__/WithHints.tsx" />
 
-### RadioContainer items with a text divider
+### Radio items with a text divider
 
 If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
 The text is usually the word ‘or’.
 
 <code src="@digigov/ui/form/RadioContainer/__stories__/NoneAnswer.tsx" />
 
-## Conditionally revealing a related question
+### Conditionally revealing a related question
 
 You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
 

package/src/i18n/locales/el.ts

@@ -14,10 +14,11 @@ export default {
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
+      amka: 'Ο ΑΜΚΑ που συμπληρώσατε δεν είναι έγκυρος.',
       file_size:
-        'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}}).',
       image_size:
-        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}}).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',
@@ -34,36 +35,86 @@ export default {
       date: {
         invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
         invalid_month_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
         invalid_day_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
         invalid_day_month:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και τον μήνα.',
-        invalid_day: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα',
-        invalid_month: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα.',
-        invalid_year: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει το ετος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το ετος.',
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
+        invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
       },
       datetime: {
         invalid: 'Η ημερομηνία και ώρα πρέπει να είναι έγκυρη.',
+        invalid_month_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, την ώρα και τα λεπτά.',
+        invalid_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος, την ώρα και τα λεπτά.',
+        invalid_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, την ώρα και τα λεπτά.',
+        invalid_day_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, την ώρα και τα λεπτά.',
+        invalid__hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
+        invalid_minutes: 'Η ημερομηνία πρέπει να περιλαμβάνει τα λεπτά.',
+        invalid_hours: 'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα.',
+        invalid_month_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και τα λεπτά.',
+        invalid_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και την ώρα.',
         invalid_month_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
+        invalid_day_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και τα λεπτά.',
+        invalid_day_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και την ώρα.',
+        invalid_day_month_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος.',
+        invalid_day_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, το έτος και την ώρα.',
         invalid_day_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
+        invalid_day_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και τα λεπτά.',
+        invalid_day_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και την ώρα.',
         invalid_day_month:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και τον μήνα.',
-        invalid_day: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα',
-        invalid_month: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα.',
-        invalid_year: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει το έτος.',
-        invalid_hours: 'Συμπληρώστε έγκυρη ώρα.',
-        invalid_minutes: 'Συμπληρώστε έγκυρα λεπτά.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και τα λεπτά.',
+        invalid_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και την ώρα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το έτος.',
+        invalid_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και τα λεπτά.',
+        invalid_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και την ώρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_day_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τα λεπτά.',
+        invalid_day_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και την ώρα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
         invalid_hours_range: 'Η ώρα πρέπει να είναι μεταξύ 0 και 23.',
         invalid_minutes_range: 'Τα λεπτά πρέπει να είναι μεταξύ 0 και 59.',
+        invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
+        invalid_day_month_year_minutes:
+          'Η ημερομηννία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος κ  τα λεπτά.',
+        invalid_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
         earlier_than:
-          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}',
+          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}.',
         later_than:
-          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}',
+          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}.',
       },
       otp: {
         invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
@@ -134,14 +185,14 @@ export default {
   },
   upload: {
     file: 'Αρχείο',
+    image: 'Εικόνα',
     choose_file: 'Επιλογή αρχείου',
     change_file: 'Αντικατάσταση αρχείου',
     no_file: 'Δεν έχετε επιλέξει αρχείο',
     reset_file: 'Αφαίρεση',
-    image: 'Φωτογραφία',
-    no_image: 'Δεν έχετε επιλέξει φωτογραφία',
-    change_image: 'Αντικατάσταση φωτογραφίας',
-    choose_image: 'Επιλογή φωτογραφίας',
+    no_image: 'Δεν έχετε επιλέξει εικόνα',
+    change_image: 'Αντικατάσταση εικόνας',
+    choose_image: 'Επιλογή εικόνας',
   },
   'copy-to-clipboard': {
     message: 'Το κείμενο αντιγράφηκε επιτυχώς!',

package/src/i18n/locales/en.ts

@@ -14,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.',
@@ -37,21 +38,56 @@ export default {
         invalid_day: 'Date must include day.',
         invalid_month: 'Date must include month.',
         invalid_year: 'Date must include year.',
+        invalid_day_range: 'Day must be between 1 and {{maxDay}}.',
+        invalid_month_range: 'Month must be between 1 and 12.',
       },
       datetime: {
         invalid: 'Date and time must be valid.',
+        invalid_month_year_hours_minutes:
+          'Date must include month, year, hours, and minutes.',
+        invalid_day_year_hours_minutes:
+          'Date must include day, year, hours, and minutes.',
+        invalid_day_month_hours_minutes:
+          'Date must include day, month, hours, and minutes.',
+        invalid_year_hours_minutes:
+          'Date must include year, hours, and minutes.',
+        invalid_month_hours_minutes:
+          'Date must include month, hours, and minutes.',
+        invalid_day_hours_minutes: 'Date must include day, hours, and minutes.',
+        invalid__hours_minutes: 'Time must include hours and minutes.',
+        invalid_minutes: 'Please enter valid minutes.',
+        invalid_hours: 'Please enter valid hours.',
+        invalid_month_year_minutes:
+          'Date must include month, year, and minutes.',
+        invalid_month_year_hours: 'Date must include month, year, and hours.',
         invalid_month_year: 'Date must include month and year.',
+        invalid_day_year_minutes: 'Date must include day, year, and minutes.',
+        invalid_day_year_hours: 'Date must include day, year, and hours.',
+        invalid_day_month_year: 'Date must include day, month, and year.',
+        invalid_day_month_year_hours:
+          'Date must include day, month, year, and hours.',
         invalid_day_year: 'Date must include day and year.',
+        invalid_day_month_minutes: 'Date must include day, month, and minutes.',
+        invalid_day_month_hours: 'Date must include day, month, and hours.',
         invalid_day_month: 'Date must include day and month.',
-        invalid_day: 'Date must include day.',
-        invalid_month: 'Date must include month.',
+        invalid_year_minutes: 'Date must include year and minutes.',
+        invalid_year_hours: 'Date must include year and hours.',
         invalid_year: 'Date must include year.',
-        invalid_hours: 'Please enter valid hours.',
-        invalid_minutes: 'Please enter valid minutes.',
+        invalid_month_minutes: 'Date must include month and minutes.',
+        invalid_month_hours: 'Date must include month and hours.',
+        invalid_month: 'Date must include month.',
+        invalid_day_minutes: 'Date must include day and minutes.',
+        invalid_day_hours: 'Date must include day and hours.',
+        invalid_day: 'Date must include day.',
+        invalid_day_month_year_minutes:
+          'Date must include day, month,year and minutes.',
+        invalid_hours_minutes: 'Date must include hours and minutes.',
         invalid_hours_range: 'Hours must be between 0 and 23.',
         invalid_minutes_range: 'Minutes must be between 0 and 59.',
+        invalid_day_range: 'Day must be between 1 and {{maxDay}}.',
+        invalid_month_range: 'Month must be between 1 and 12.',
         earlier_than: 'The date and time must be earlier than {{maxDateTime}}.',
-        later_than: 'The date and time must be later than {{minDateTime}}',
+        later_than: 'The date and time must be later than {{minDateTime}}.',
       },
       text: {
         more_than: 'You have surpass the {{max}} characters limit.',