@digigov/ui 0.12.2 → 0.13.0

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

@@ -0,0 +1,37 @@
+---
+title: Bottom
+parent: docs/ui/components
+---
+
+# Bottom
+
+import { Bottom } from '@digigov/ui/layouts/Basic';
+import PropsDoc from '@docs-components/propsDoc';
+
+```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
+
+### Properties
+
+<PropsDoc data={Bottom.__doc__} />

package/esm/layouts/Basic/Content/index.js

@@ -0,0 +1,18 @@
+import CoreContainer from '@digigov/react-core/Container';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Content = withDeprecation(CoreContainer, {
+  name: 'Content',
+  rename: 'Container',
+  props: {
+    maxWidth: {
+      error: true
+    },
+    flex: {
+      error: true
+    },
+    dense: {
+      error: true
+    }
+  }
+});
+export default Content;

package/esm/layouts/Basic/Content/index.mdx

@@ -0,0 +1,64 @@
+---
+title: Content
+parent: docs/ui/components
+---
+
+# Content
+
+import { Content } from '@digigov/ui/layouts/Basic';
+import PropsDoc from '@docs-components/propsDoc';
+import StylesDoc from '@docs-components/stylesDoc';
+
+```jsx live path=layouts/Basic/index.tsx
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+import Grid from '@digigov/react-core/Grid';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+
+function Side{
+ return (
+    <BasicLayout>
+    <Top>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>
+            <ServiceBadge />
+          </HeaderTitle>
+        </Header>
+      </Top>
+    <Content>
+        <Main>
+            <Title size="lg">Main</Title>
+            <Paragraph>Main content</Paragraph>
+        </Main>
+        <Side>
+          <Title size="lg">Side</Title>
+          <Paragraph>Side content</Paragraph>
+        </Side>
+      </Content>
+    </BasicLayout>
+ )
+}
+export Side
+
+
+
+```
+
+<br />
+
+## How it works
+
+The Content component is used as a wrapper for the Main and Side components.
+
+## API
+
+### Properties
+
+<PropsDoc data={Content.__doc__} />
+
+<br />
+
+### Styles
+
+<StylesDoc data={Content.__doc__} />

package/esm/layouts/Basic/Main/index.js

@@ -0,0 +1,3 @@
+import Main from '@digigov/react-core/Main';
+export { Main };
+export default Main;

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

@@ -0,0 +1,64 @@
+---
+title: Main
+parent: docs/ui/components
+---
+
+# Main
+
+import { Main } from '@digigov/ui/layouts/Basic';
+import PropsDoc from '@docs-components/propsDoc';
+import StylesDoc from '@docs-components/stylesDoc';
+
+```jsx live path=layouts/Basic/index.tsx
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+
+function Main{
+    return (
+      <>
+    <Top>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>
+            <ServiceBadge />
+          </HeaderTitle>
+        </Header>
+      </Top>
+    <Content>
+        <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>
+      </Content>
+      </>
+
+ )
+}
+export Main
+
+```
+
+<br />
+
+## How it works
+
+The Main component is used to include tha main information of the page,
+spanning two-thirds of the page width.
+
+## API
+
+### Properties
+
+<PropsDoc data={Main.__doc__} />
+
+### Styles
+
+<StylesDoc data={Main.__doc__} />

package/esm/layouts/Basic/Masthead/index.js

@@ -0,0 +1,4 @@
+import Masthead from '@digigov/react-core/Masthead';
+import MastheadBody from '@digigov/react-core/MastheadBody';
+export { Masthead, MastheadBody };
+export default Masthead;

package/esm/layouts/Basic/Masthead/index.mdx

@@ -0,0 +1,74 @@
+---
+title: Masthead
+parent: docs/ui/components
+---
+
+# Masthead
+
+import { Masthead } from '@digigov/ui/layouts/Basic';
+import PropsDoc from '@docs-components/propsDoc';
+import StylesDoc from '@docs-components/stylesDoc';
+
+```jsx live path=layouts/Basic/index.tsx
+import PropsDoc from '@docs-components/propsDoc';
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+import Grid from '@digigov/react-core/Grid';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+
+function Masthead{
+
+ return (
+   <BasicLayout>
+    <Top>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>
+            <ServiceBadge />
+          </HeaderTitle>
+        </Header>
+     </Top>
+    <Masthead>
+          <Caption>Powered by GRNET</Caption>
+            <Title size="xl">
+              Digigov creates tools that help teams build GOV.GR services
+            </Title>
+            <Paragraph>
+              Here you can find everything you&apos;d need to get started
+              building your shiny new service. We build and maintain libraries
+              SDKs that they help you create dynamic and responsive user
+              interface for a variety of devices.
+            </Paragraph>
+      </Masthead>
+      <Content>
+        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.
+      </Content>
+  </BasicLayout>
+ )
+}
+export Masthead
+
+```
+
+<br />
+
+## How it works
+
+The Masthead component is a set of features or layout that marks the page and delivers identifying information to web users.
+
+## API
+
+### Properties
+
+<PropsDoc data={Masthead.__doc__} />
+
+<br />
+
+### Styles
+
+<StylesDoc data={Masthead.__doc__} />

package/esm/layouts/Basic/Side/index.js

@@ -0,0 +1,7 @@
+import Aside from '@digigov/react-core/Aside';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Side = withDeprecation(Aside, {
+  name: 'Side',
+  rename: 'Aside'
+});
+export default Side;

package/esm/layouts/Basic/Side/index.mdx

@@ -0,0 +1,71 @@
+---
+title: Side
+parent: docs/ui/components
+---
+
+# Side
+
+import { Side } from '@digigov/ui/layouts/Basic';
+import PropsDoc from '@docs-components/propsDoc';
+import StylesDoc from '@docs-components/stylesDoc';
+
+```jsx live path=layouts/Basic/index.tsx
+
+function Side{
+ return (
+    <BasicLayout>
+    <Top>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>
+            <ServiceBadge />
+          </HeaderTitle>
+        </Header>
+      </Top>
+    <Content>
+        <Main>
+          <Title size="xl">Main</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>
+        <Side>
+          <Title size="md">Side 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>
+          </Side>
+      </Content>
+    </BasicLayout>
+ )
+}
+export Side
+
+```
+
+<br />
+
+## How it works
+
+The Side component covers the right one-third of the page width.
+Note that the Side component is optional, so there could be occasions that Side is empty.
+
+## API
+
+### Properties
+
+<PropsDoc data={Side.__doc__} />
+
+<br />
+
+### Styles
+
+<StylesDoc data={Side.__doc__} />

package/esm/layouts/Basic/Top/index.js

@@ -0,0 +1,11 @@
+import CoreTop from '@digigov/react-core/Top';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Top = withDeprecation(CoreTop, {
+  name: 'Top',
+  props: {
+    dense: {
+      error: true
+    }
+  }
+});
+export default Top;

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

@@ -0,0 +1,74 @@
+---
+title: Top
+parent: docs/ui/components
+---
+
+# Top
+
+import { Top } from '@digigov/ui/layouts/Basic';
+import PropsDoc from '@docs-components/propsDoc';
+import StylesDoc from '@docs-components/stylesDoc';
+
+### 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/Logo';
+
+
+function Top{
+ return (
+      <Top dense>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>
+            <ServiceBadge />
+          </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/Logo';
+
+
+function Top{
+ return (
+      <Top>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>
+            <ServiceBadge />
+          </HeaderTitle>
+        </Header>
+     </Top>
+ )
+}
+export Top
+
+```
+
+<br />
+
+## How it works
+
+The Top component is used to group the Header components.
+
+## API
+
+### Properties
+
+<PropsDoc data={Top.__doc__} />
+
+<br />
+
+### Styles
+
+<StylesDoc data={Top.__doc__} />

package/esm/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side children  1`] = `
+<ForwardRef(Layout)>
+  <div
+    className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+  >
+    <withDeprecationComponent>
+      <ForwardRef(Top)>
+        <div
+          className="govgr-top"
+        >
+          Header content
+        </div>
+      </ForwardRef(Top)>
+    </withDeprecationComponent>
+    <withDeprecationComponent>
+      <ForwardRef(Container)>
+        <div
+          className="govgr-width-container"
+        >
+          <div
+            className="govgr-main-wrapper"
+          >
+            <ForwardRef(Main)>
+              <main
+                className="govgr-grid-column-two-thirds"
+              >
+                Main content
+              </main>
+            </ForwardRef(Main)>
+            <withDeprecationComponent>
+              <ForwardRef(Aside)>
+                <aside
+                  className="govgr-grid-column-one-third"
+                >
+                  Side content
+                </aside>
+              </ForwardRef(Aside)>
+            </withDeprecationComponent>
+          </div>
+        </div>
+      </ForwardRef(Container)>
+    </withDeprecationComponent>
+    <ForwardRef(Bottom)>
+      <div
+        className="govgr-bottom"
+      >
+        Bottom content
+      </div>
+    </ForwardRef(Bottom)>
+  </div>
+</ForwardRef(Layout)>
+`;

package/esm/layouts/Basic/index.js

@@ -0,0 +1,8 @@
+import Layout from '@digigov/react-core/Layout';
+export * from '@digigov/ui/layouts/Basic/Top';
+export * from '@digigov/ui/layouts/Basic/Side';
+export * from '@digigov/ui/layouts/Basic/Main';
+export * from '@digigov/ui/layouts/Basic/Content';
+export * from '@digigov/ui/layouts/Basic/Bottom';
+export * from '@digigov/ui/layouts/Basic/Masthead';
+export default Layout;

package/esm/layouts/Basic/index.mdx

@@ -0,0 +1,62 @@
+---
+title: Basic Layout
+parent: docs/ui/components
+---
+
+# BasicLayout
+
+import BasicLayout, {
+  Top,
+  Side,
+  Main,
+  Content,
+  Bottom,
+} from '@digigov/ui/layouts/Basic';
+import StylesDoc from '@docs-components/stylesDoc';
+
+Use the BasicLayout component to create a basic page layout.
+
+```jsx live path=layouts/Basic/index.tsx
+import BasicLayout, { Top, Side, Main , Content, Bottom } from '@digigov/ui/layouts/Basic';
+function CustomLayout (props){
+ return (
+    <BasicLayout>
+      <Top>Header content</Top>
+      <Content>
+        <Main>Main content</Main>
+        <Side>Side content</Side>
+      </Content>
+      <Bottom>Bottom content</Bottom>
+    </BasicLayout>
+ )
+}
+export CustomLayout
+
+```
+
+<br />
+
+## How it works
+
+The BasicLayout component is used in combination with the Top, Side, Main,
+Content and Bottom components.
+
+## API
+
+### Properties
+
+<br />
+
+### Styles
+
+<StylesDoc data={BasicLayout.__doc__} />
+<br />
+<StylesDoc data={Top.__doc__} />
+<br />
+<StylesDoc data={Content.__doc__} />
+<br />
+<StylesDoc data={Main.__doc__} />
+<br />
+<StylesDoc data={Side.__doc__} />
+<br />
+<StylesDoc data={Bottom.__doc__} />

package/esm/layouts/Basic/index.spec.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import BasicLayout, { Top, Side, Main, Content, Bottom } from '@digigov/ui/layouts/Basic';
+
+var _ref = /*#__PURE__*/React.createElement(BasicLayout, null, /*#__PURE__*/React.createElement(Top, null, "Header content"), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Main, null, "Main content"), /*#__PURE__*/React.createElement(Side, null, "Side content")), /*#__PURE__*/React.createElement(Bottom, null, "Bottom content"));
+
+it('renders the BasicLayout with Top, Content, Bottom, Main and Side children ', function () {
+  var jsx = _ref;
+  expect(mount(jsx)).toMatchSnapshot();
+});

package/esm/layouts/Grid/index.js

@@ -0,0 +1 @@
+export * from '@digigov/react-core/Grid';

package/esm/layouts/index.js

@@ -0,0 +1,2 @@
+export * from '@digigov/ui/layouts/Basic';
+export { default as BasicLayout } from '@digigov/ui/layouts/Basic';

package/esm/locales/el.js

@@ -0,0 +1,55 @@
+export default {
+  form: {
+    label: {
+      day: 'Ημέρα',
+      month: 'Μήνας',
+      year: 'Έτος'
+    },
+    error: {
+      required: 'Το πεδίο είναι υποχρεωτικό.',
+      number: 'Συμπληρώστε έναν έγκυρο αριθμό',
+      positive_number: 'Συμπληρώστε έναν θετικό αριθμό',
+      string: 'Το πεδίο πρέπει να είναι string',
+      email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
+      afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
+      file_size: 'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο.',
+      mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
+      uuid4: 'Ο κωδικός επιβεβαίωσης δεν είναι έγκυρος.',
+      date: {
+        invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
+        earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
+        later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}'
+      }
+    }
+  },
+  button: {
+    start: 'Ξεκινήστε εδώ',
+    login: 'Σύνδεση',
+    back: 'Πίσω',
+    "continue": 'Συνέχεια',
+    search_ref: 'Αναζητήστε',
+    scan: 'Σαρώστε QR Code',
+    save: 'Αποθήκευση',
+    logout: 'Εξοδος',
+    submit: 'Υποβολή',
+    "delete": 'Διαγραφή'
+  },
+  footer: {
+    created_by: 'Υλοποίηση από το',
+    grnet: 'ΕΔΥΤΕ',
+    mindigital: 'Υπουργείο Ψηφιακής Διακυβέρνησης',
+    using: 'με χρήση',
+    open_source: 'Ανοιχτού Λογισμικού',
+    creative_commons: 'Άδεια χρήσης περιεχομένου'
+  },
+  notfound: {
+    page_not_found: 'Η σελίδα δεν βρέθηκε',
+    wrong_key_address: 'Εάν έχετε πληκτρολογήσει τη διεύθυνση της σελίδας, ελέγξτε ότι είναι σωστή.',
+    wrong_cp_address: 'Εάν έχετε επικολλήσει τη διεύθυνση της σελίδας, ελέγξτε ότι έχετε αντιγράψει ολόκληρη τη διεύθυνση.',
+    service_contact: 'Εάν η διεύθυνση της σελίδας είναι σωστή ή έχετε επιλέξει κάποιον σύνδεσμο ή κουμπί, επικοινωνήστε με τη γραμμή εξυπηρέτησης σε περίπτωση που χρειαστείτε βοήθεια.'
+  },
+  outdated: {
+    mobile: 'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είτε δεν υποστηρίζεται είτε είναι μη επικαιροποιημένος. Παρακαλούμε επικαιροποιήστε τον browser σας.',
+    web: 'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είναι μη επικαιροποιημένος. Για να επικαιροποιήσετε τον browser σας επισκεφθείτε την ιστοσελίδα:  '
+  }
+};