@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-0edebf87

package/src/form/SingleCharacterInputs/index.mdx

@@ -5,10 +5,6 @@ title: SingleCharacterInputs
 
 # SingleCharacterInput
 
-```bash
-import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
-```
-
 ## How to use
 
 <Story
@@ -29,4 +25,6 @@ If you’re highlighting the whole date, style all the fields like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SingleCharacterInputs" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["SingleCharacterInputs","SingleCharacterInput"]} /> 

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

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

package/src/form/TextArea/index.mdx

@@ -5,10 +5,6 @@ title: TextArea
 
 # TextArea
 
-```bash
-import TextArea from '@digigov/ui/form/TextArea';
-```
-
 ## How to use
 
 <Story
@@ -73,4 +69,6 @@ Error messages should be styled like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TextArea" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["TextArea"]} /> 

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

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

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

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

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

@@ -15,4 +15,5 @@ export * from '@digigov/ui/form/TextInput/__stories__/WithHint';
 export * from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
 export * from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextInput/__stories__/DisabledInputWithValue';
 export * from '@digigov/ui/form/TextInput/__stories__/Dense';

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

@@ -0,0 +1,27 @@
+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 { TextInput } from '@digigov/ui/form/TextInput';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { LockIcon } from '@digigov/react-icons';
+
+export const DisabledInputWithValue = () => (
+  <FieldContainer>
+    <LabelContainer>
+      <LabelTitle size="md">Όνομα</LabelTitle>
+      <TextInput
+        aria-describedby="input-hint"
+        name="inputext"
+        value={'Μάριος'}
+        disabled
+      ></TextInput>
+      <Hint id="input-hint" size='sm'>
+        <LockIcon mr={1} mb={1} />
+       Πεδίο μόνο για προβολή
+      </Hint>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default DisabledInputWithValue;

package/src/form/TextInput/index.mdx

@@ -5,10 +5,6 @@ title: TextInput
 
 # TextInput
 
-```bash
-import TextInput from '@digigov/ui/form/TextInput';
-```
-
 ## How to use
 
 <Story
@@ -89,4 +85,6 @@ Error messages should be styled like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TextInput" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["TextInput"]} /> 

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

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

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

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

package/src/govgr/Footer/index.mdx

@@ -98,4 +98,4 @@ import { Feedback } from '@digigov/ui/govgr/Footer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Footer" />
+See below for a complete reference to all of the props  available to the components mentioned here.

package/src/i18n/locales/el.ts

@@ -12,9 +12,9 @@ export default {
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
-      file_size: 'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο.',
+      file_size: 'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
       image_size:
-        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο.',
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',

package/src/i18n/locales/en.ts

@@ -12,8 +12,8 @@ export default {
       string: 'This field must be a string',
       email: 'Please enter a valid email address (e-mail).',
       afm: 'The VAT number you entered is incorrect.',
-      file_size: 'File size is larger than allowed.',
-      image_size: 'Image size is larger than allowed.',
+      file_size: 'File size is larger than allowed ({{maxSizeToMb}}Mb).',
+      image_size: 'Image size is larger than allowed ({{maxSizeToMb}}Mb).',
       mobile_phone: 'Fill in a valid mobile phone number.',
       landline: 'Fill in a valid landline phone number.',
       phone_number: 'Fill in a valid phone number.',

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

@@ -8,3 +8,4 @@ export default {
 export * from '@digigov/ui/layouts/Basic/__stories__/Default';
 export * from '@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns';
 export * from '@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout';
+export * from '@digigov/ui/layouts/Basic/__stories__/WithBasicLayout';

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

@@ -0,0 +1,35 @@
+
+import React from 'react';
+import { GovGRFooter } from '@digigov/ui/govgr/Footer';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading, Paragraph } from '@digigov/ui/typography';
+import Header from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import Top from '@digigov/ui/layouts/Basic/Top';
+import Bottom from '@digigov/ui/layouts/Basic/Bottom';
+
+export const Default = () => (
+  <Layout>
+    <Top>
+      <Header>
+        <GovGRLogo />
+      </Header>
+    </Top>
+    <Container>
+      <Main>
+        <Heading>Τίτλος σελίδας</Heading>
+        <Paragraph>
+          Σε αυτό το παράδειγμα το Footer εσωκλείεται μέσα στο
+          Bottom component
+        </Paragraph>
+      </Main>
+    </Container>
+    <Bottom>
+      <GovGRFooter></GovGRFooter>
+    </Bottom>
+  </Layout>
+);
+
+export default Default;

package/src/layouts/Basic/Bottom/index.mdx

@@ -1,41 +1,22 @@
 ---
 id: bottom
 title: Bottom
-parent: docs/ui/components
 ---
 
 # Bottom
 
-import { Bottom } from '@digigov/ui/layouts/Basic';
-
-```jsx live path=layouts/Basic/index.tsx
-import GovGRFooter from '@digigov/ui/govgr/Footer';
-
-function Bottom{
- return (
-    <Bottom>
-        <GovGRFooter />
-    </Bottom>
- )
-}
-export Bottom
-
-```
-
-<br />
-
-## How it works
-
 Use the Bottom component in order to wrap the Footer's components.
 
-<br />
-
-## API
+## How to use
 
-### Properties
-
-<PropsDoc data={Bottom.__doc__} />
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Bottom"
+  story="Default.tsx"
+/>
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Bottom" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Bottom"]} /> 

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading, Paragraph } from '@digigov/ui/typography';
+import Header from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import Top from '@digigov/ui/layouts/Basic/Top';
+
+export const Default = () => (
+  <Layout>
+    <Top>
+      <Header>
+        <GovGRLogo />
+      </Header>
+    </Top>
+    <Container>
+      <Main>
+        <Heading>Περιεχόμενο μέσα σε Container</Heading>
+        <Paragraph>
+          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών,
+          Μελών Ειδικού Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
+          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν διδακτικό έργο.
+        </Paragraph>
+      </Main>
+    </Container>
+  </Layout>
+);
+
+export default Default;

package/src/layouts/Basic/Container/index.mdx

@@ -0,0 +1,23 @@
+---
+id: container
+title: Container
+---
+
+# Container
+
+Container compoment wraps around other elements, grouping them together. Containers are often used to structure and organize content on a web page.
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Container"
+  story="Default.tsx"
+/>
+
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Container"]} /> 

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading, Paragraph } from '@digigov/ui/typography';
+import Header from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import Top from '@digigov/ui/layouts/Basic/Top';
+
+export const Default = () => (
+  <Layout>
+    <Top>
+      <Header>
+        <GovGRLogo />
+      </Header>
+    </Top>
+    <Container>
+      <Main>
+        <Heading>Τίτλος Main</Heading>
+        <Paragraph>
+          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών,
+          Μελών Ειδικού Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
+          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν διδακτικό έργο.
+        </Paragraph>
+      </Main>
+    </Container>
+  </Layout>
+);
+
+export default Default;

package/src/layouts/Basic/Main/index.mdx

@@ -1,58 +1,21 @@
 ---
 id: main
 title: Main
-parent: docs/ui/components
 ---
 
-# Main
-
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
-
-function Main{
-    return (
-      <>
-    <Top>
-        <Header>
-          <GovGRLogo />
-          <HeaderTitle>
-            <PhaseBanner>
-              <PhaseBannerTag>ALPHA</PhaseBannerTag>
-            </PhaseBanner>
-          </HeaderTitle>
-        </Header>
-      </Top>
-    <Container>
-        <Main>
-          <Title size="xl">Main content</Title>
-            <Paragraph>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </Paragraph>
-        </Main>
-      </Container>
-      </>
-
- )
-}
-export Main
-
-```
-
-<br />
-
-## How it works
+# How to use
 
 The Main component is used to include tha main information of the page,
 spanning two-thirds of the page width.
 
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Main"
+  story="Default.tsx"
+/>
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Main" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Main"]} /> 

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading, Paragraph } from '@digigov/ui/typography';
+import Header from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import Top from '@digigov/ui/layouts/Basic/Top';
+
+export const Default = () => (
+  <Layout>
+    <Top>
+      <Header>
+        <GovGRLogo />
+      </Header>
+    </Top>
+    <Container>
+      <Main>
+        <Heading>Τίτλος σελίδας</Heading>
+        <Paragraph>
+          Σε αυτό το παράδειγμα το περιεχόμενο του Header εσωκλείεται μέσα στο Top component
+        </Paragraph>
+      </Main>
+    </Container>
+  </Layout>
+);
+
+export default Default;

package/src/layouts/Basic/Top/index.mdx

@@ -6,63 +6,18 @@ parent: docs/ui/components
 
 # Top
 
-### Example without bottom margin
-
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
-
-
-function Top{
- return (
-      <Top dense>
-        <Header>
-          <GovGRLogo />
-          <HeaderTitle>
-            <PhaseBanner>
-              <PhaseBannerTag>ALPHA</PhaseBannerTag>
-            </PhaseBanner>
-          </HeaderTitle>
-        </Header>
-     </Top>
- )
-}
-export Top
-
-```
-
-### Example with bottom margin
-
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-
-
-function Top{
- return (
-      <Top>
-        <Header>
-          <GovGRLogo />
-          <HeaderTitle>
-            <PhaseBanner>
-              <PhaseBannerTag>ALPHA</PhaseBannerTag>
-            </PhaseBanner>
-          </HeaderTitle>
-        </Header>
-     </Top>
- )
-}
-export Top
-
-```
-
-<br />
+The Top component is used to group the Header components.
 
-## How it works
+## How to use
 
-The Top component is used to group the Header components.
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic/Top"
+  story="Default.tsx"
+/>
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Top" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Top"]} />