@digigov/ui 2.0.0-555d1027 → 2.0.0-5701c39b

package/src/app/BannerContainer/__stories__/CookiesBanner.tsx

@@ -1,31 +1,11 @@
 import React from 'react';
-
 import BannerContainer from '@digigov/ui/app/BannerContainer';
-import Button, { ButtonGroup } from '@digigov/ui/form/Button';
-import { Container } from '@digigov/ui/layouts/Basic/Container';
-import { Main } from '@digigov/ui/layouts/Basic/Main';
-import { Heading } from '@digigov/ui/typography/Heading';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const CookiesBanner = (_: any) => {
   return (
     <BannerContainer>
-      <Container>
-        <Main>
-          <Heading size="md">Cookies στο GOV.GR</Heading>
-          <Paragraph>
-            Επιλέξτε «Αποδοχή» για να συμφωνήσετε με τη χρήση των cookies και
-            την επεξεργασία των προσωπικών σας δεδομένων.
-          </Paragraph>
-          <Paragraph>
-            <Button variant="link">Όροι και Προϋποθέσεις</Button>
-          </Paragraph>
-          <ButtonGroup>
-            <Button>Αποδοχή</Button>
-            <Button>Απόρριψη</Button>
-          </ButtonGroup>
-        </Main>
-      </Container>
+      <Paragraph p={4}>A text inside the BannerContainer.</Paragraph>
     </BannerContainer>
   );
 };

package/src/app/Header/doc.mdx

@@ -9,15 +9,15 @@ title: Header
 
 <code src="@digigov/ui/app/Header/__stories__/Default.tsx" />
 
-### Header with service name
+### With service name
 
 <code src="@digigov/ui/app/Header/__stories__/WithServiceName.tsx" />
 
-### Header with service logo and service name
+### With service logo and service name
 
 <code src="@digigov/ui/app/Header/__stories__/WithServiceNameAndLogo.tsx" />
 
-### Default header with navigation
+### With responsive navigation
 
 <code src="@digigov/ui/app/Header/__stories__/WithNavigation.tsx" />
 

package/src/app/Loader/Loader.stories.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { LoaderContainer, CircularProgress } from '@digigov/ui/app/Loader';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/app/CircularProgress',
+  component: CircularProgress,
+  displayName: 'CircularProgress',
+  tags: ['autodocs'],
+  markdown: doc,
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <LoaderContainer>
+        <CircularProgress
+          loadingText={args.loadingText}
+          loadingFinishedText={args.loadingFinishedText}
+          color={args.color}
+          size={args.size}
+        />
+      </LoaderContainer>
+    );
+  },
+  args: {
+    loadingText: 'Γίνεται φόρτωση',
+    loadingFinishedText: 'Η φόρτωση ολοκληρώθηκε',
+    color: 'primary',
+    size: 'md',
+  },
+  argsTypes: {
+    loadingText: {
+      control: 'text',
+    },
+    loadingFinishedText: {
+      control: 'text',
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/app/Loader/__stories__/Default';
+export { Secondary } from '@digigov/ui/app/Loader/__stories__/Secondary';
+export { Sizes } from '@digigov/ui/app/Loader/__stories__/Sizes';
+export { FullPageLoader } from '@digigov/ui/app/Loader/__stories__/FullPageLoader';
+export { AccessibilityLoader } from '@digigov/ui/app/Loader/__stories__/AccessibilityLoader';

package/src/app/Loader/__stories__/FullPageLoader.tsx

@@ -7,10 +7,14 @@ import {
 
 export const FullPageLoader = (_: any) => {
   return (
-    <FullPageBackground>
-      <LoaderContainer>
-        <CircularProgress />
-      </LoaderContainer>
-    </FullPageBackground>
+    <div style={{ minHeight: '100px' }}>
+      <FullPageBackground>
+        <LoaderContainer>
+          <CircularProgress />
+        </LoaderContainer>
+      </FullPageBackground>
+    </div>
   );
 };
+
+export default FullPageLoader;

package/src/app/Loader/__stories__/Secondary.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LoaderContainer, CircularProgress } from '@digigov/ui/app/Loader';
+
+export const Secondary = (_: any) => {
+  return (
+    <LoaderContainer>
+      <CircularProgress color="secondary" />
+    </LoaderContainer>
+  );
+};
+export default Secondary;

package/src/app/Loader/__stories__/Sizes.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Stack } from '@digigov/react-core';
+import { LoaderContainer, CircularProgress } from '@digigov/ui/app/Loader';
+
+export const Sizes = (_: any) => {
+  return (
+    <>
+      <LoaderContainer>
+        <Stack direction="row" alignItems="center" spacing={4}>
+          <CircularProgress size="sm" />
+          <CircularProgress size="md" />
+          <CircularProgress size="lg" />
+        </Stack>
+      </LoaderContainer>
+    </>
+  );
+};
+export default Sizes;

package/src/app/Loader/doc.mdx

@@ -0,0 +1,39 @@
+---
+id: loader
+title: Loader
+---
+
+# Loader
+
+Loading spinner is used for notifying users that their action is being processed or data retrieved from server.
+
+## How to use
+
+
+<code src="@digigov/ui/app/Loader/__stories__/Default.tsx" />
+
+
+### Secondary color
+
+<code src="@digigov/ui/app/Loader/__stories__/Secondary.tsx" />
+
+
+### Different sizes
+
+<code src="@digigov/ui/app/Loader/__stories__/Sizes.tsx" />
+
+### Full page loader
+
+<code src="@digigov/ui/app/Loader/__stories__/FullPageLoader.tsx" />
+
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "CircularProgress",
+  "Loader",
+]} 
+/> 
+

package/src/app/Loader/index.test.tsx

@@ -4,6 +4,8 @@ import TestVariant from '@digigov/ui/utils/TestVariant'
 import { AccessibilityLoader } from '@digigov/ui/app/Loader/__stories__/AccessibilityLoader';
 import { Default } from '@digigov/ui/app/Loader/__stories__/Default';
 import { FullPageLoader } from '@digigov/ui/app/Loader/__stories__/FullPageLoader';
+import { Secondary } from '@digigov/ui/app/Loader/__stories__/Secondary';
+import { Sizes } from '@digigov/ui/app/Loader/__stories__/Sizes';
 
 test('renders the All Loader variants', async ({ mount, page }) => {
   await mount(
@@ -18,6 +20,12 @@ test('renders the All Loader variants', async ({ mount, page }) => {
     <TestVariant title="FullPageLoader">
       <FullPageLoader />
     </TestVariant>
+    <TestVariant title="Secondary">
+      <Secondary />
+    </TestVariant>
+    <TestVariant title="Sizes">
+      <Sizes />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);

package/src/app/Masthead/Masthead.stories.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import doc from './doc.mdx?raw';
+
+import { Masthead, MastheadBody } from '@digigov/ui/app/Masthead';
+import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export default {
+  title: 'Digigov UI/app/Masthead',
+  description:
+    'You can use the masthead at the top of the first page of a GOV.GR service, not at internal pages.',
+  link: 'https://guide.services.gov.gr/docs/components/masthead',
+  defaultWidth: 'lg',
+  component: Masthead,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Masthead',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Masthead color={args.color}>
+        <Container>
+          <Main as="div">
+            <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
+            <MastheadBody>
+              Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία
+              συνεπή στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και
+              την εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που
+              έχουν ήδη γίνει.
+            </MastheadBody>
+            {args.showHint && <Hint>Τελευταία ενημέρωση: 08/12/2021</Hint>}
+            <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
+          </Main>
+        </Container>
+      </Masthead>
+    );
+  },
+  args: {
+    color: 'primary',
+    showHint: false,
+  },
+  argTypes: {
+    color: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['primary', 'secondary'],
+    },
+    showHint: {
+      control: 'boolean',
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/app/Masthead/__stories__/Default';
+export { Secondary } from '@digigov/ui/app/Masthead/__stories__/Secondary';
+export { WithLogo } from '@digigov/ui/app/Masthead/__stories__/WithLogo';
+export { WithElements } from '@digigov/ui/app/Masthead/__stories__/WithElements';

package/src/app/Masthead/doc.mdx

@@ -11,15 +11,15 @@ The Masthead component is a set of features or layout that marks the page and de
 
 <code src="@digigov/ui/app/Masthead/__stories__/Default.tsx" />
 
-## With secondary color
+### With secondary color
 
 <code src="@digigov/ui/app/Masthead/__stories__/Secondary.tsx" />
 
-## With logo
+### With logo
 
 <code src="@digigov/ui/app/Masthead/__stories__/WithLogo.tsx" />
 
-## With elements
+### With elements
 
 <code src="@digigov/ui/app/Masthead/__stories__/WithElements.tsx" />
 

package/src/app/Modal/Modal.stories.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import doc from './doc.mdx?raw';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import {
+  Modal,
+  ModalHeading,
+  ModalContent,
+  ModalAction,
+} from '@digigov/ui/app/Modal';
+import Button from '@digigov/ui/form/Button';
+
+export default {
+  title: 'Digigov UI/app/Modal',
+  description:
+    'Use the modal component with caution when you need to provide critical information or ask for a decision.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
+  component: Modal,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Modal',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Modal
+        open={true}
+        aria-labelledby="modal-label"
+        dense={args.dense}
+        gaps={args.gaps}
+      >
+        <ModalHeading id="modal-label">Διαγραφή τηλεφώνου</ModalHeading>
+        <ModalContent>
+          <Paragraph mb={args.gaps ? 0 : 4}>
+            Είστε σίγουροι ότι θέλετε να διαγράψετε τον αριθμό τηλεφώνου; Αυτή η
+            ενέργεια είναι οριστική.
+          </Paragraph>
+        </ModalContent>
+        <ModalAction>
+          <Button>Διαγραφή</Button>
+          <Button variant="link">Ακύρωση</Button>
+        </ModalAction>
+      </Modal>
+    );
+  },
+  args: {
+    dense: false,
+    gaps: true,
+  },
+  argsTypes: {
+    dense: {
+      control: 'boolean',
+    },
+    gaps: {
+      control: 'boolean',
+    },
+  },
+};
+export { Default } from '@digigov/ui/app/Modal/__stories__/Default';
+export { AlertDialog } from '@digigov/ui/app/Modal/__stories__/AlertDialog';
+export { Dense } from '@digigov/ui/app/Modal/__stories__/Dense';
+export { WithHooks } from '@digigov/ui/app/Modal/__stories__/WithHooks';
+export { Auto } from '@digigov/ui/app/Modal/__stories__/Auto';
+export { WithoutModalGaps } from '@digigov/ui/app/Modal/__stories__/WithoutModalGaps';

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

@@ -13,7 +13,7 @@ import { Paragraph } from '@digigov/ui/typography/Paragraph';
 export const AlertDialog = (_: any) => {
   const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button
         color="warning"
         onClick={() => {

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

@@ -13,7 +13,7 @@ import { LabelContainer } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 export const Auto = (_: any) => {
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <ModalProvider>
         <ModalButtonAuto open modal="modal-1">
           Προσθήκη τηλεφώνου

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

@@ -15,7 +15,7 @@ import { TextInput } from '@digigov/ui/form/TextInput';
 export const Default = (_: any) => {
   const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button
         onClick={() => {
           setOpen(!open);

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

@@ -15,7 +15,7 @@ import { TextInput } from '@digigov/ui/form/TextInput';
 export const Dense = (_: any) => {
   const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button
         onClick={() => {
           setOpen(!open);

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

@@ -14,7 +14,7 @@ import { TextInput } from '@digigov/ui/form/TextInput';
 export const WithHooks = (_: any) => {
   const { registerModal, registerAction } = useModal();
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button {...registerAction('modal-1', 'open')}>Προσθήκη τηλεφώνου</Button>
       <Modal
         {...registerModal('modal-1', {

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

@@ -15,7 +15,7 @@ import { TextInput } from '@digigov/ui/form/TextInput';
 export const WithoutModalGaps = (_: any) => {
   const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button
         onClick={() => {
           setOpen(!open);

package/src/app/Modal/index.web.tsx

@@ -43,9 +43,9 @@ export const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(
         aria-modal="true"
         {...props}
       >
-        <span tabIndex={-1} ref={firstModalElement} aria-hidden="true" />
+        <span tabIndex={-1} ref={firstModalElement} />
         {open && children}
-        <span tabIndex={0} ref={lastModalElement} aria-hidden="true" />
+        <span tabIndex={0} ref={lastModalElement} />
       </ModalContainer>
     );
   }

package/src/content/Accordion/Accordion.stories.jsx

@@ -9,6 +9,7 @@ import {
   AccordionSectionSummaryHeading,
 } from '@digigov/ui/content/Accordion';
 import { Hint } from '@digigov/ui/typography/Hint';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export default {
   title: 'Digigov UI/content/Accordion',
@@ -31,13 +32,16 @@ export const WithControls = {
       >
         <AccordionSection open>
           <AccordionSectionSummary>
-            <AccordionSectionSummaryHeading aria-controls="content1">
+            <AccordionSectionSummaryHeading
+              aria-controls="content1"
+              variant={args.variant}
+            >
               {args.title}
             </AccordionSectionSummaryHeading>
             {args.hint > 0 && <Hint>{args.hintMessage}</Hint>}
           </AccordionSectionSummary>
           <AccordionSectionContent id="content1">
-            {args.content}
+            <Paragraph>{args.content}</Paragraph>
           </AccordionSectionContent>
         </AccordionSection>
       </Accordion>
@@ -45,6 +49,7 @@ export const WithControls = {
   },
   args: {
     title: 'Διαφορές με το δημόσιο',
+    variant: 'default',
     hint: true,
     hintMessage:
       'Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση δικαστικών δαπανών κ.ά.',
@@ -58,6 +63,10 @@ export const WithControls = {
     title: {
       control: { type: 'text' },
     },
+    variant: {
+      options: ['default', 'arrows'],
+      control: { type: 'select' },
+    },
     hint: {
       control: { type: 'boolean' },
     },
@@ -83,6 +92,8 @@ export const WithControls = {
 };
 
 export { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
+export { SummaryColorSecondary } from '@digigov/ui/content/Accordion/__stories__/SummaryColorSecondary';
+export { UsingArrowIcons } from '@digigov/ui/content/Accordion/__stories__/UsingArrowIcons';
 export { WithHints } from '@digigov/ui/content/Accordion/__stories__/WithHints';
 export { WithHook } from '@digigov/ui/content/Accordion/__stories__/WithHook';
 export { Auto } from '@digigov/ui/content/Accordion/__stories__/Auto';

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

@@ -100,30 +100,6 @@ export const Auto = (_: any) => {
           </List>
         </AccordionSectionContent>
       </AccordionSectionAuto>
-      <AccordionSectionAuto id="4">
-        <AccordionSectionSummary>
-          <AccordionSectionSummaryHeading aria-controls="content4">
-            Καταστήματα κράτησης
-          </AccordionSectionSummaryHeading>
-          <Hint>
-            Επανένταξη αποφυλακισμένων, πιστοποιητικά, επισκεπτήρια κ.ά.
-          </Hint>
-        </AccordionSectionSummary>
-        <AccordionSectionContent id="content4">
-          <Paragraph>
-            Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
-            επιλεγμένο γεγονός ζωής.
-          </Paragraph>
-          <List>
-            <ListItem>
-              <Link>Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων</Link>
-            </ListItem>
-            <ListItem>
-              <Link>Εκπαίδευση αποφυλακισμένων</Link>
-            </ListItem>
-          </List>
-        </AccordionSectionContent>
-      </AccordionSectionAuto>
     </AccordionAuto>
   );
 };

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

@@ -83,27 +83,6 @@ export const Default = (_: any) => (
         </List>
       </AccordionSectionContent>
     </AccordionSection>
-    <AccordionSection>
-      <AccordionSectionSummary>
-        <AccordionSectionSummaryHeading aria-controls="content4">
-          Καταστήματα κράτησης
-        </AccordionSectionSummaryHeading>
-      </AccordionSectionSummary>
-      <AccordionSectionContent id="content4">
-        <Paragraph>
-          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
-          επιλεγμένο γεγονός ζωής.
-        </Paragraph>
-        <List>
-          <ListItem>
-            <Link>Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων</Link>
-          </ListItem>
-          <ListItem>
-            <Link>Εκπαίδευση αποφυλακισμένων</Link>
-          </ListItem>
-        </List>
-      </AccordionSectionContent>
-    </AccordionSection>
   </Accordion>
 );
 

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

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+
+import { List } from '@digigov/ui/content/List/List';
+import { ListItem } from '@digigov/ui/content/List/ListItem';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const SummaryColorSecondary = (_: any) => (
+  <Accordion summaryColor="secondary">
+    <AccordionSection open>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content1">
+          Διαφορές με το δημόσιο
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content1">
+        <Paragraph>
+          Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά
+          το επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>
+              Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης
+              διαφορών με το Δημόσιο
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content2">
+          Δικαστήρια
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content2">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Ηλεκτρονικές δικαστικές αποφάσεις</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Πιστοποιητικά δικαστηρίων</Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content3">
+          Δικόγραφα
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content3">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Αντίγραφο πρακτικών υπόθεσης</Link>
+          </ListItem>
+          <ListItem>
+            <Link>
+              Ηλεκτρονική κατάθεση δικογράφων (Πολιτικά / Ποινικά Δικαστήρια)
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+  </Accordion>
+);
+
+export default SummaryColorSecondary;