@digigov/ui 2.0.0-af1b5f33 → 2.0.0-cbc56209

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

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

package/src/layouts/Basic/index.mdx

@@ -1,40 +1,42 @@
 ---
 id: basic
 title: Basic Layout
-parent: docs/ui/components
 ---
 
-# BasicLayout
+# Layout
 
-Use the BasicLayout component to create a basic page layout.
+The Layout component is used in combination with the Top, Side, Main,
+Content and Bottom components.
 
-```jsx live path=layouts/Basic/index.tsx
-import BasicLayout, { Top, Aside, Main , Container, Bottom } from '@digigov/ui/layouts/Basic';
-function CustomLayout (props){
- return (
-    <BasicLayout>
-      <Top>Header content</Top>
-      <Container>
-        <Main>Main content</Main>
-        <Aside>Side content</Aside>
-      </Container>
-      <Bottom>Bottom content</Bottom>
-    </BasicLayout>
- )
-}
-export CustomLayout
+## How to use
 
-```
+### Default layout
 
-<br />
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic"
+  story="Default.tsx"
+/>
 
-## How it works
+### Two thirds one third columns layout
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic"
+  story="TwoThirdsOneThirdColumns.tsx"
+/>
 
-The BasicLayout component is used in combination with the Top, Side, Main,
-Content and Bottom components.
+  ### Multiple rows lyout
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Basic"
+  story="MultipleRowsLayout.tsx"
+/>
 
 ## API
 
-### Properties
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Layout"]} /> 
+
 
-<br />

package/src/layouts/Grid/index.mdx

@@ -0,0 +1,39 @@
+---
+id: grid
+title: Grid
+---
+
+## How to use
+
+Grid compoment is a  layout system that allows you to design complex web page layouts with rows and columns.
+
+
+### Default Grid
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Grid"
+  story="Default.tsx"
+/>
+
+### Responsive spacing Grid
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Grid"
+  story="ResponsiveSpacing.tsx"
+/>
+
+### Inline Grid
+
+<Story
+  packageName="@digigov/ui"
+  component="layouts/Grid"
+  story="Inline.tsx"
+/>
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Grid"]} />