@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-462194bf

package/src/form/AutoComplete/utils.ts

@@ -4,6 +4,7 @@ export const keyCodes = {
   32: 'space',
   38: 'up',
   40: 'down',
+  8: 'backspace',
 };
 export function isIosDevice(): boolean | undefined {
   return (
@@ -293,8 +294,8 @@ export function suggest(
   syncResults(
     query
       ? results.filter(function (result) {
-        return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;
-      })
+          return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+        })
       : results
   );
 }

package/src/form/Button/index.mdx

@@ -8,10 +8,6 @@ title: Button
 Use the button component to help users carry out an action like starting an
 application or saving their information.
 
-```bash
-import Button from '@digigov/ui/form/Button';
-```
-
 ## How to use
 
 ### Default buttons
@@ -110,4 +106,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Button" />
+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/index.mdx

@@ -5,10 +5,6 @@ title: Checkbox
 
 # Checkbox
 
-```bash
-import Checkbox from '@digigov/ui/form/Checkbox';
-```
-
 ## How to use
 
 <Story
@@ -82,4 +78,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https:/
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Checkbox" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Checkbox","CheckboxItem"]} /> 

package/src/form/DateInputContainer/index.mdx

@@ -5,10 +5,6 @@ title: DateInputContainer
 
 # DateInputContainer
 
-```bash
-import DateInputContainer from '@digigov/ui/form/DateInputContainer';
-```
-
 ## How to use
 
 <Story
@@ -45,4 +41,6 @@ If you’re highlighting just one field - either the day, month or year - only s
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="DateInputContainer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["DateInputContainer","DateInputItem"]} /> 

package/src/form/ErrorMessage/index.mdx

@@ -8,10 +8,6 @@ title: ErrorMessage
 Follow the validation pattern and show an error message when there is a validation error.
 In the error message explain what went wrong and how to fix it.
 
-```bash
-import ErrorMessage from '@digigov/ui/form/ErrorMessage';
-```
-
 ## How to use
 
 <Story
@@ -22,4 +18,6 @@ import ErrorMessage from '@digigov/ui/form/ErrorMessage';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="ErrorMessage" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["ErrorMessage"]} /> 

package/src/form/FileUpload/index.mdx

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

package/src/form/RadioContainer/index.mdx

@@ -5,10 +5,6 @@ title: RadioContainer
 
 # RadioContainer
 
-```bash
-import RadioContainer from '@digigov/ui/form/RadioContainer';
-```
-
 ## How to use
 
 <Story
@@ -83,14 +79,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://ww
 
 ## API
 
-### RadioContainer
-
-<PropTypes packageName="@digigov/ui" component="RadioContainer" />
-
-### RadioConditional
-
-<PropTypes packageName="@digigov/ui" component="RadioConditional" />
-
-### RadioItem
+See below for a complete reference to all of the props  available to the components mentioned here.
 
-<PropTypes packageName="@digigov/ui" component="RadioItem" />
+<ComponentProps componentName={["RadioItem","RadioContainer","RadioConditional","ChoiceDividerText"]} /> 

package/src/form/SelectContainer/index.mdx

@@ -45,4 +45,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SelectContainer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["SelectContainer","SelectOption"]} /> 

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/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/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/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/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"]} />