@digigov/ui 2.0.0-a402a664 → 2.0.0-aa380ec7

package/src/content/SummaryList/__stories__/WithError.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+  SummaryListItemValue,
+} from '@digigov/ui/content/SummaryList';
+
+import { Link } from '@digigov/ui/navigation/Link';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export const WithError = (_: any) => (
+  <SummaryList error>
+    <SummaryListItem>
+      <SummaryListItemKey>Όνομα</SummaryListItemKey>
+      <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey error>Ημερομηνία Γέννησης</SummaryListItemKey>
+      <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
+      <SummaryListItemValue error errorAssistiveText="το τηλέφωνο δεν βρέθηκε">
+        6941234567
+      </SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+  </SummaryList>
+);
+
+export default WithError;

package/src/content/SummaryList/index.test.tsx

@@ -5,6 +5,7 @@ import { Default } from '@digigov/ui/content/SummaryList/__stories__/Default';
 import { RowVariations } from '@digigov/ui/content/SummaryList/__stories__/RowVariations';
 import { SummaryListExample } from '@digigov/ui/content/SummaryList/__stories__/SummaryListExample';
 import { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
+import { WithError } from '@digigov/ui/content/SummaryList/__stories__/WithError';
 import { WithKeyAndAction } from '@digigov/ui/content/SummaryList/__stories__/WithKeyAndAction';
 import { WithNoLastBorder } from '@digigov/ui/content/SummaryList/__stories__/WithNoLastBorder';
 import { WithoutActions } from '@digigov/ui/content/SummaryList/__stories__/WithoutActions';
@@ -26,6 +27,9 @@ test('renders the All SummaryList variants', async ({ mount, page }) => {
     <TestVariant title="WithActions">
       <WithActions />
     </TestVariant>
+    <TestVariant title="WithError">
+      <WithError />
+    </TestVariant>
     <TestVariant title="WithKeyAndAction">
       <WithKeyAndAction />
     </TestVariant>

package/src/content/Table/Table.stories.jsx

@@ -94,13 +94,22 @@ export const WithControls = {
                   data.content.map((item, index) => (
                     <TableRow
                       key={index}
-                      highlight={index === 1 && args.tableRowHighlight}
+                      highlight={index === 1 && args.tableRowHighlight === true}
                       color={index === 1 && args.tableRowColor}
                     >
                       <TableDataCell data-label={data.labels.name}>
                         {item.name}
                       </TableDataCell>
-                      <TableDataCell data-label={data.labels.role}>
+                      <TableDataCell
+                        data-label={data.labels.role}
+                        highlight={
+                          index === 2 && args.tableCellHighlight === 'warning'
+                            ? 'warning'
+                            : index === 2 && args.tableCellHighlight === 'error'
+                              ? 'error'
+                              : undefined
+                        }
+                      >
                         {item.role}
                       </TableDataCell>
                       <TableDataCell data-label={data.labels.email}>
@@ -130,6 +139,7 @@ export const WithControls = {
     dense: false,
     tableCaptionSize: 'md',
     tableRowHighlight: false,
+    tableCellHighlight: undefined,
     tableRowColor: 'primary',
     firstTableHeadCellWidth: '25%',
     tableHeadCellDataType: 'text',
@@ -175,6 +185,12 @@ export const WithControls = {
         type: 'boolean',
       },
     },
+    tableCellHighlight: {
+      control: {
+        type: 'select',
+      },
+      options: [undefined, 'warning', 'error'],
+    },
     tableRowColor: {
       control: {
         type: 'inline-radio',
@@ -213,6 +229,7 @@ export { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
 export { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';
 export { Dense } from '@digigov/ui/content/Table/__stories__/Dense';
 export { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
+export { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHighlights';
 export { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
 export { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
 export { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';

package/src/content/Table/__stories__/UsingHighlights.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/content/Table';
+
+const data = {
+  title: 'Χρήστες',
+  labels: {
+    name: 'Ονοματεπώνυμο',
+    role: 'Ρόλος',
+    email: 'Email',
+  },
+  content: [
+    {
+      name: 'Μάριος Μενεξές',
+      role: 'Χειριστής',
+      email: 'marios@mail.com',
+    },
+    {
+      name: 'Καλλιόπη Παπαδοπούλου',
+      role: 'Χειριστής',
+      email: 'kalliopi@mail.com',
+    },
+    {
+      name: 'Μαρία Φλούπη',
+      role: 'Διαχειριστής',
+      email: 'maria@mail.com',
+    },
+  ],
+};
+
+export const UsingHighlights = (_: any) => {
+  return (
+    <TableContainer>
+      <Table stacked="sm">
+        {data && (
+          <>
+            <TableCaption>{data.title}</TableCaption>
+            <TableHead>
+              <TableRow>
+                {data.labels &&
+                  Object.keys(data.labels).map((key) => (
+                    <TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>
+                  ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.content &&
+                data.content.map((item, index) => (
+                  <TableRow key={index}>
+                    <TableDataCell
+                      data-label={data.labels.name}
+                      highlight={index === 2 ? 'error' : undefined}
+                    >
+                      {item.name}
+                    </TableDataCell>
+                    <TableDataCell
+                      data-label={data.labels.role}
+                      highlight={index === 1 ? 'warning' : undefined}
+                    >
+                      {item.role}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.email}>
+                      {item.email}
+                    </TableDataCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </>
+        )}
+      </Table>
+    </TableContainer>
+  );
+};
+export default UsingHighlights;

package/src/content/Table/index.test.tsx

@@ -13,6 +13,7 @@ import { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDa
 import { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
 import { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';
 import { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';
+import { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHighlights';
 import { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';
 import { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
 import { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
@@ -62,6 +63,9 @@ test('renders the All Table variants', async ({ mount, page }) => {
     <TestVariant title="TableCaptions">
       <TableCaptions />
     </TestVariant>
+    <TestVariant title="UsingHighlights">
+      <UsingHighlights />
+    </TestVariant>
     <TestVariant title="VerticalBorders">
       <VerticalBorders />
     </TestVariant>

package/src/content/TaskList/doc.mdx

@@ -11,7 +11,7 @@ TaskList is a component that displays number of steps required to complete a pro
 
 <code src="@digigov/ui/content/TaskList/__stories__/Default.tsx" />
 
-## With dense style
+### With dense style
 
 <code src="@digigov/ui/content/TaskList/__stories__/Dense.tsx" />
 

package/src/content/Timeline/doc.mdx

@@ -13,7 +13,7 @@ User can better understand what has happened and also understand what the next s
 
 <code src="@digigov/ui/content/Timeline/__stories__/Default.tsx" />
 
-## With dense style
+### With dense style
 
 <code src="@digigov/ui/content/Timeline/__stories__/Dense.tsx" />
 

package/src/feedback/CopyToClipboard/doc.mdx

@@ -21,4 +21,4 @@ title: CopyToClipboard
 
 See below for a complete reference to all of the props available to the components mentioned here.
 
-<ComponentProps componentName={['CopyToClipboardContainer']} />{' '}
+<ComponentProps componentName={['CopyToClipboardContainer']} />

package/src/feedback/ErrorSummary/doc.mdx

@@ -35,4 +35,4 @@ For questions that require a user to select one or more options from a list usin
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-{/* <ComponentProps componentName={["ErrorSummary"]} />  */}
+<ComponentProps componentName={["ErrorSummary"]} /> 

package/src/feedback/NotificationBanner/NotificationBanner.stories.js

@@ -15,16 +15,23 @@ export default {
 
 export const WithControls = {
   args: {
+    variant: 'info',
+    dense: false,
     title: 'Ειδοποίηση',
     children: ' Σε 7 ημέρες θα μπορείτε να υποβάλετε την αίτηση.',
     link: {
       label: 'Προβολή αίτησης',
       href: '#',
     },
-    variant: 'info',
-    dense: false,
   },
   argTypes: {
+    variant: {
+      options: ['info', 'success', 'error'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
     title: {
       control: { type: 'text' },
     },
@@ -34,13 +41,6 @@ export const WithControls = {
     link: {
       control: { type: 'object' },
     },
-    variant: {
-      options: ['info', 'success', 'error'],
-      control: { type: 'select' },
-    },
-    dense: {
-      control: { type: 'boolean' },
-    },
   },
   parameters: {
     controls: { exclude: ['ref'] },
@@ -50,3 +50,4 @@ export const WithControls = {
 export { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 export { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 export { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';
+export { Expanded } from '@digigov/ui/feedback/NotificationBanner/__stories__/Expanded';

package/src/feedback/NotificationBanner/__stories__/Expanded.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  NotificationBannerContainer,
+  NotificationBannerHeader,
+  NotificationBannerContent,
+  NotificationBannerHeading,
+  NotificationBannerLink,
+} from '@digigov/ui/feedback/NotificationBanner';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const Expanded = (_: any) => (
+  <NotificationBannerContainer>
+    <NotificationBannerHeader>Ειδοποίηση</NotificationBannerHeader>
+    <NotificationBannerContent>
+      <NotificationBannerHeading>
+        Μπορείτε να συμβάλλετε στη βελτίωση των δημοσίων υπηρεσιών.
+      </NotificationBannerHeading>
+      <Paragraph>
+        Συμπληρώστε έως 24/5 το ερωτηματολόγιο στο{' '}
+        <NotificationBannerLink> axiologisi.ypes.gov.gr</NotificationBannerLink>
+        .
+      </Paragraph>
+    </NotificationBannerContent>
+  </NotificationBannerContainer>
+);
+
+export default Expanded;

package/src/feedback/NotificationBanner/doc.mdx

@@ -13,9 +13,6 @@ Use a notification banner to tell the user about something they need to know abo
 
 Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
-Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
-
-## How to use
 
 <code src="@digigov/ui/feedback/NotificationBanner/__stories__/Default.tsx" />
 
@@ -29,8 +26,20 @@ You can also use a notification banner to tell the user about the outcome of som
 
 <code src="@digigov/ui/feedback/NotificationBanner/__stories__/Dense.tsx" />
 
-## API
+### Expanded
 
-See below for a complete reference to all of the props  available to the components mentioned here.
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Expanded.tsx" />
+
+## API
 
-<ComponentProps componentName={["NotificationBannerContainer","NotificationBannerContent","NotificationBannerHeader","NotificationBannerHeading","NotificationBannerLink"]} /> 
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps
+  componentName={[
+    'NotificationBannerContainer',
+    'NotificationBannerContent',
+    'NotificationBannerHeader',
+    'NotificationBannerHeading',
+    'NotificationBannerLink',
+  ]}
+/>

package/src/feedback/NotificationBanner/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/feedback/NotificationBanner/__stories__/Default';
 import { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';
+import { Expanded } from '@digigov/ui/feedback/NotificationBanner/__stories__/Expanded';
 import { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 
 test('renders the All NotificationBanner variants', async ({ mount, page }) => {
@@ -15,6 +16,9 @@ test('renders the All NotificationBanner variants', async ({ mount, page }) => {
     <TestVariant title="Dense">
       <Dense />
     </TestVariant>
+    <TestVariant title="Expanded">
+      <Expanded />
+    </TestVariant>
     <TestVariant title="Success">
       <Success />
     </TestVariant>

package/src/feedback/PhaseBanner/PhaseBanner.stories.jsx

@@ -31,8 +31,8 @@ export const WithControls = {
     );
   },
   args: {
-    tag: 'ALPHA',
     underline: true,
+    tag: 'ALPHA',
   },
   argTypes: {
     underline: {

package/src/form/AutoComplete/doc.mdx

@@ -30,7 +30,7 @@ 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" />
 
@@ -48,4 +48,4 @@ See below for a complete reference to all of the props available to the componen
     'AutoCompleteResultListItem',
     'AutoCompleteAssistiveHint',
   ]}
-/>{' '}
+/>

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/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

@@ -35,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: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',