@digigov/ui 2.0.0-d57821ba → 2.0.0-daaf7bdf

package/src/app/Modal/__stories__/Auto.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
 import {
-  ModalAuto,
   ModalHeading,
   ModalContent,
   ModalAction,
+} from '@digigov/ui/app/Modal';
+import {
+  ModalAuto,
   ModalButtonAuto,
   ModalProvider,
-} from '@digigov/ui/app/Modal';
+} from '@digigov/ui/app/Modal/auto';
 
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';

package/src/app/Modal/index.tsx

@@ -4,7 +4,6 @@ export * from '@digigov/react-core/ModalContent';
 export * from '@digigov/react-core/ModalAction';
 export * from '@digigov/ui/app/Modal/hooks';
 export * from '@digigov/ui/app/Modal/hooks';
-export * from '@digigov/ui/app/Modal/auto';
 
 export * from '@digigov/ui/app/Modal/Modal';
 import Modal from '@digigov/ui/app/Modal/Modal';

package/src/content/Accordion/__stories__/Auto.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 
 import {
-  AccordionAuto,
   AccordionControls,
-  AccordionSectionAuto,
   AccordionSectionContent,
   AccordionSectionSummary,
   AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+import { 
+  AccordionAuto,
+  AccordionSectionAuto,
   AccordionCloseAllButtonAuto,
   AccordionOpenAllButtonAuto,
-} from '@digigov/ui/content/Accordion';
+} from '@digigov/ui/content/Accordion/auto';
 
 import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';

package/src/content/Accordion/index.tsx

@@ -8,6 +8,5 @@ export * from '@digigov/react-core/AccordionSectionContent';
 export * from '@digigov/react-core/AccordionSectionSummary';
 export * from '@digigov/react-core/AccordionSectionSummaryHeading';
 export * from '@digigov/ui/content/Accordion/hooks';
-export * from '@digigov/ui/content/Accordion/auto';
 
 export default Accordion;

package/src/content/Card/interaction.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { WithClickableContent } from '@digigov/ui/content/Card/__stories__/WithClickableContent';
+
+test('renders the WithClickableContent Click card', async ({ mount, page }) => {
+  await mount(
+    <WithClickableContent />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>div>div:nth-child(1)>a").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/Markdown/Markdown.stories.js

@@ -0,0 +1,9 @@
+import Markdown from '@digigov/ui/content/Markdown';
+export default {
+  title: 'Digigov UI/content/Markdown',
+  description:
+    'Display markdown content',
+  component: Markdown,
+  displayName: 'Markdown',
+};
+export { Default } from '@digigov/ui/content/Markdown/__stories__/Default';

package/src/content/Markdown/__stories__/Default.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Grid from '@digigov/ui/layouts/Grid';
+import Markdown from '@digigov/ui/content/Markdown';
+import { SectionBreak } from '@digigov/ui/layouts';
+
+const markdownExamples = [
+  '## Παράδειγμα h2',
+  'Προς:<sup>(1)</sup>',
+  '[εδώ](http://www.astynomia.gr/index.php?option=ozo_content&perform=view&id=139&Itemid=132&lang)',
+  '[https://pki.aped.gov.gr/repository](https://pki.aped.gov.gr/repository)',
+  '**Σημαντικό:**',
+  `Μπορείτε να αιτηθείτε για απόσπασμα Ληξιαρχικής Πράξης που:
+  * εκδόθηκε μετά τις 08/05/2013
+  * μεταβλήθηκε ή εκδόθηκε απόσπασμά της μετά το 2018
+  * εκδόθηκε από το Ειδικό Ληξιαρχείο Αθηνών μετά τις 22/01/2018 και αφορά γεγονότα που τελέστηκαν στο εξωτερικό\n\n`,
+  `Εάν είστε εκπαιδευτική κατηγορία ατόμων που πρέπει να προσκομίσουν δήλωση
+  αποτελέσματος για ευτικός (δημοσίου ή ιδιωτικού σχολείου) ή ανήκετε
+  σε κάποια άλλη κα την πρόσβαση σε σχολική μονάδα,
+  συμπληρώστε το πεδίο <b>Όνομα σχολείου</b>, διαφορετικά αφήστε το κενό.`,
+];
+
+export const Default = () => {
+  return (
+    <>
+      {markdownExamples.map((markdown, index) => (
+        <Grid container key={index} spacing={4}>
+          <Grid item xs={12} sm={6}>
+            {markdown}
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <Markdown content={markdown} />
+          </Grid>
+          <Grid item xs={12}>
+            <SectionBreak />
+          </Grid>
+        </Grid>
+      ))}
+    </>);
+};
+
+export default Default;

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

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

package/src/content/SafeHTML/SafeHTML.stories.js

@@ -0,0 +1,9 @@
+import SafeHTML from '@digigov/ui/content/SafeHTML';
+export default {
+  title: 'Digigov UI/content/SafeHTML',
+  description:
+    'Display html content',
+  component: SafeHTML,
+  displayName: 'SafeHTML',
+};
+export { Default } from '@digigov/ui/content/SafeHTML/__stories__/Default';

package/src/content/SafeHTML/__stories__/Default.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Grid from '@digigov/ui/layouts/Grid';
+import SafeHTML from '@digigov/ui/content/SafeHTML';
+import { SectionBreak } from '@digigov/ui/layouts';
+
+const htmlExamples = [
+  '<h1>Παράδειγμα h1</h1>',
+  'Προς:<sup>(1)</sup>',
+  '<a target="_blank" href="http://www.astynomia.gr/index.php?option=ozo_content&perform=view&id=139&Itemid=132&lang">εδώ</a>',
+  `Μπορείτε να αιτηθείτε για απόσπασμα Ληξιαρχικής Πράξης που:<br/><br/>
+  • εκδόθηκε μετά τις 08/05/2013<br/>
+  • μεταβλήθηκε ή εκδόθηκε απόσπασμά της μετά το 2018<br/>
+  • εκδόθηκε από το Ειδικό Ληξιαρχείο Αθηνών μετά τις 22/01/2018 και αφορά γεγονότα που τελέστηκαν στο εξωτερικό<br/><br/>`,
+  `Εάν είστε εκπαιδευτικός (δημοσίου ή ιδιωτικού σχολείου) ή ανήκετε
+    σε κάποια άλλη κατηγορία ατόμων που πρέπει να προσκομίσουν δήλωση
+    αποτελέσματος για την πρόσβαση σε σχολική μονάδα,
+    συμπληρώστε το πεδίο <b>Όνομα σχολείου</b>, διαφορετικά αφήστε το κενό.`,
+  'Μπορείτε να εκδώσετε τα παρακάτω έγγραφα: <ul><li>Πιστοποιητικό γάμου</li><li>Βεβαίωση οικογενειακής κατάστασης</li></ul>',
+  'Μπορείτε να εκδώσετε τα παρακάτω έγγραφα: <ol><li>Πιστοποιητικό γάμου</li><li>Βεβαίωση οικογενειακής κατάστασης</li></ol>',
+];
+
+export const Default = () => {
+  return (
+    <>
+      {htmlExamples.map((html, index) => (
+        <Grid container key={index} spacing={4}>
+          <Grid item xs={12} sm={6}>
+            {html}
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <SafeHTML content={html} />
+          </Grid>
+          <Grid item xs={12}>
+            <SectionBreak />
+          </Grid>
+        </Grid>
+      ))}
+    </>);
+};
+
+export default Default;

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

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

package/src/content/StepNav/__stories__/Auto.tsx

@@ -9,11 +9,14 @@ import {
   StepNavAccordionSummaryHeading,
   StepNavAccordionHeadingTitle,
   StepNavAccordionHeadingText,
+
+} from '@digigov/ui/content/StepNav';
+import {
   StepNavAuto,
   StepNavAccordionAuto,
   StepNavCloseAllButtonAuto,
   StepNavOpenAllButtonAuto,
-} from '@digigov/ui/content/StepNav';
+} from '@digigov/ui/content/StepNav/auto';
 
 import {
   SummaryList,

package/src/content/StepNav/index.tsx

@@ -9,7 +9,6 @@ import StepNavControls from '@digigov/react-core/StepNavControls';
 import StepNavList from '@digigov/react-core/StepNavList';
 import StepNavListItem from '@digigov/react-core/StepNavListItem';
 export * from '@digigov/ui/content/Accordion/hooks';
-export * from '@digigov/ui/content/StepNav/auto';
 export { useAccordion as useStepNav } from '@digigov/ui/content/Accordion/hooks';
 export * from '@digigov/react-core/StepNavAccordion';
 export {

package/src/content/SummaryList/SummaryList.stories.js

@@ -1,15 +1,22 @@
-import SummaryList from '@digigov/ui/content/SummaryList';
 export default {
   title: 'Digigov UI/content/SummaryList',
-  description: 'Use the summary list to summarise information.',
+  description: 'Use the summary list to summarize information.',
   link: 'https://guide.services.gov.gr/docs/components/summary-list',
-  component: SummaryList,
   displayName: 'SummaryList',
+  component: SummaryListExample,
+};
+import { SummaryListExample } from '@digigov/ui/content/SummaryList/__stories__/SummaryListExample';
+
+export const Default = {
+  args: {
+    sm: 5,
+    md: 4,
+    lg: 3,
+    border: true,
+    noLastBorder: false,
+    itemBorder: true,
+    showKey: true,
+    showValue: true,
+    showActions: true,
+  },
 };
-export { Default } from '@digigov/ui/content/SummaryList/__stories__/Default';
-export { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
-export { WithoutActions } from '@digigov/ui/content/SummaryList/__stories__/WithoutActions';
-export { WithNoLastBorder } from '@digigov/ui/content/SummaryList/__stories__/WithNoLastBorder';
-export { WithoutBorders } from '@digigov/ui/content/SummaryList/__stories__/WithoutBorders';
-export { WithKeyAndAction } from '@digigov/ui/content/SummaryList/__stories__/WithKeyAndAction';
-export { RowVariations } from '@digigov/ui/content/SummaryList/__stories__/RowVariations';

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

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  WidthValues,
+} from '@digigov/ui/content/SummaryList';
+
+import { Link } from '@digigov/ui/navigation/Link';
+
+const data = [
+  {
+    key: 'Όνομα',
+    value: 'Γιώργος Παπαδόπουλος',
+    action: 'Αλλαγή',
+  },
+  {
+    key: 'Ημερομηνία Γέννησης',
+    value: '11 Μαϊου 1990',
+    action: 'Αλλαγή Ημερομηνίας',
+  },
+  {
+    key: 'Κινητό τηλέφωνο επικοινωνίας',
+    value: '6941234567',
+    action: 'Αλλαγή',
+  },
+];
+
+export const SummaryListExample = ({
+  sm,
+  md,
+  lg,
+  border = true,
+  noLastBorder = false,
+  itemBorder = true,
+  showKey = true,
+  showValue = true,
+  showActions = true,
+}: {
+  sm?: WidthValues;
+  md?: WidthValues;
+  lg?: WidthValues;
+  border?: boolean;
+  noLastBorder?: boolean;
+  itemBorder?: boolean;
+  showKey?: boolean;
+  showValue?: boolean;
+  showActions?: boolean;
+}) => (
+  <SummaryList border={border} noLastBorder={noLastBorder}>
+    {data &&
+      data.map((item, index) => (
+        <SummaryListItem key={index} border={itemBorder}>
+          {showKey && (
+            <SummaryListItemKey sm={sm} md={md} lg={lg}>
+              {item.key}
+            </SummaryListItemKey>
+          )}
+          {showValue && (
+            <SummaryListItemValue>{item.value}</SummaryListItemValue>
+          )}
+          {showActions && (
+            <SummaryListItemAction>
+              <Link href="#">{item.action}</Link>
+            </SummaryListItemAction>
+          )}
+        </SummaryListItem>
+      ))}
+  </SummaryList>
+);
+
+export default SummaryListExample;

package/src/content/SummaryList/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/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 { WithKeyAndAction } from '@digigov/ui/content/SummaryList/__stories__/WithKeyAndAction';
 import { WithNoLastBorder } from '@digigov/ui/content/SummaryList/__stories__/WithNoLastBorder';
@@ -19,6 +20,9 @@ test('renders the All SummaryList variants', async ({ mount, page }) => {
     <TestVariant title="RowVariations">
       <RowVariations />
     </TestVariant>
+    <TestVariant title="SummaryListExample">
+      <SummaryListExample />
+    </TestVariant>
     <TestVariant title="WithActions">
       <WithActions />
     </TestVariant>

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
 import { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
+import { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
 const SCREENSHOT_DELAY = 2_000;
 const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
 
@@ -16,3 +17,16 @@ test('renders the WithLoader Toggle Loading', async ({ mount, page }) => {
   expect(screenshot).toMatchSnapshot();
 });
   
+
+
+test('renders the WithSortFilters Click on header cell', async ({ mount, page }) => {
+  await mount(
+    <WithSortFilters />
+  )
+  await page.evaluate(() => document.fonts.ready);
+  await delay(SCREENSHOT_DELAY);
+ await page.locator("#root>div>table>thead>tr>th:nth-child(1)>details>summary").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/ErrorSummary/interaction.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+
+test('renders the LinkedToCheckbox Go to checkbox', async ({ mount, page }) => {
+  await mount(
+    <LinkedToCheckbox />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.keyboard.press("Tab");
+ await page.keyboard.press("Enter");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/WarningText/index.tsx

@@ -1,3 +1,4 @@
 export * from '@digigov/react-core/WarningText';
 import WarningText from '@digigov/react-core/WarningText';
+export { WarningTextAssistive } from '@digigov/react-core/WarningTextAssistive';
 export default WarningText;

package/src/form/AutoComplete/index.tsx

@@ -8,7 +8,7 @@ import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultLi
 import AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
 import AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
 import AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
-
+import { Base } from '@digigov/react-core/Base';
 import { CaretIcon } from '@digigov/react-icons/CaretIcon';
 import Status from '@digigov/ui/form/AutoComplete/Status';
 import {
@@ -558,7 +558,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           const showFocused =
             focused === -1 ? selected === index : focused === index;
           const iosPosinsetHtml = isIosDevice() ? (
-            <span
+            <Base as='span'
               id={`${id}__option-suffix--${index}`}
               style={{
                 border: '0',
@@ -574,7 +574,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               }}
             >
               {index + 1} από {options.length}
-            </span>
+            </Base>
           ) : (
             ''
           );

package/src/form/AutoComplete/utils.ts

@@ -10,8 +10,8 @@ export function isIosDevice(): boolean | undefined {
   return (
     typeof navigator !== 'undefined' &&
     !!(
-      navigator.userAgent.match(/(iPod|iPhone|iPad)/g) &&
-      navigator.userAgent.match(/AppleWebKit/g)
+      navigator.userAgent?.match(/(iPod|iPhone|iPad)/g) &&
+      navigator.userAgent?.match(/AppleWebKit/g)
     )
   );
 }

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

@@ -1,11 +1,26 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
+import { GroupingButtonsAndLinks } from '@digigov/ui/form/Button/__stories__/GroupingButtonsAndLinks';
 import { Primary } from '@digigov/ui/form/Button/__stories__/Primary';
 import { Secondary } from '@digigov/ui/form/Button/__stories__/Secondary';
 import { ThemeToggle } from '@digigov/ui/form/Button/__stories__/ThemeToggle';
 import { Warning } from '@digigov/ui/form/Button/__stories__/Warning';
 
+test('renders the GroupingButtonsAndLinks Keyboard navigation', async ({ mount, page }) => {
+  await mount(
+    <GroupingButtonsAndLinks />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.keyboard.press("Tab");
+ await page.keyboard.press("Tab");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
 test('renders the Primary Hover and click', async ({ mount, page }) => {
   await mount(
     <Primary />

package/src/form/Checkbox/index.tsx

@@ -1,5 +1,6 @@
 export * from '@digigov/react-core/Checkbox';
 export * from '@digigov/react-core/CheckboxItem';
+export * from '@digigov/react-core/CheckboxItemInput';
 export * from '@digigov/react-core/CheckboxConditional';
 import Checkbox from '@digigov/react-core/Checkbox';
 export default Checkbox;

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

@@ -2,16 +2,37 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
 import { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';
+import { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
 
 test('renders the Default Actions with mouse', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>fieldset>div>div:nth-child(1)>label>input").click();
- await page.keyboard.insertText("undefined");
+  await page
+    .locator('#root>div>fieldset>div>div:nth-child(1)>label>input')
+    .click();
+  await page.keyboard.insertText('11');
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the WithErrorMessageForSingleField Actions with keyboard', async ({
+  mount,
+  page,
+}) => {
+  await mount(<WithErrorMessageForSingleField />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Tab');
+  await page.keyboard.insertText('2022');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -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;