@digigov/ui 0.28.0 → 0.28.2

package/src/admin/Drawer/__stories__/Default.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import Drawer from '@digigov/ui/admin/Drawer';
+import { List, ListItem, BurgerIcon } from '@digigov/react-core';
+import { Button, Title } from '@digigov/ui';
+import {
+  AdminAside,
+  AdminContainer,
+  AdminLayout,
+  AdminMain,
+  AdminTopSection,
+  AdminHeader,
+  AdminHeaderSection,
+  DrawerHeading,
+} from '@digigov/react-extensions/admin';
+import { GovGRLogo } from '@digigov/react-core';
+import { Card, CardHeading, CardText } from '@digigov/react-core';
+import Grid from '@digigov/react-core/Grid';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+
+function useDrawer() {
+  const [open, setOpen] = useState(true);
+  function toggleDrawer() {
+    setOpen(!open);
+  }
+  return [open, toggleDrawer] as const;
+}
+
+export const Default = () => {
+  const [open, toggleDrawer] = useDrawer();
+
+  return (
+    <>
+      <AdminLayout>
+        <AdminHeader>
+          <AdminHeaderSection>
+            <GovGRLogo></GovGRLogo>
+            <Button
+              className="govgr-drawer__burger-icon"
+              onClick={() => toggleDrawer()}
+              color="secondary"
+            >
+              <BurgerIcon />
+            </Button>
+          </AdminHeaderSection>
+        </AdminHeader>
+        <AdminContainer>
+          <AdminAside>
+            <AdminTopSection></AdminTopSection>
+            <Drawer direction="left" open={open}>
+              <DrawerHeading onClick={() => toggleDrawer()}>
+                <Title size="md">Menu</Title>
+              </DrawerHeading>
+              <List spaced>
+                <ListItem>Menu option 1</ListItem>
+                <ListItem>Menu option 2</ListItem>
+              </List>
+            </Drawer>
+          </AdminAside>
+          <AdminMain>
+            <Grid container spacing={4}>
+              <Grid item xs={12} lg={6}>
+                <Card>
+                  <CardHeading>This is a Card</CardHeading>
+                  <CardText>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </CardText>
+                </Card>
+              </Grid>
+              <Grid item xs={12} lg={6}>
+                <Card>
+                  <CardHeading>This is a Card</CardHeading>
+                  <CardText>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </CardText>
+                </Card>
+              </Grid>
+              <Grid item xs={12} lg={6}>
+                <Card>
+                  <CardHeading>This is a Card</CardHeading>
+                  <CardText>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </CardText>
+                </Card>
+              </Grid>
+              <Grid item xs={12} lg={6}>
+                <Card>
+                  <CardHeading>This is a Card</CardHeading>
+                  <CardText>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </CardText>
+                </Card>
+              </Grid>
+            </Grid>
+          </AdminMain>
+        </AdminContainer>
+        <GovGRFooter />
+      </AdminLayout>
+    </>
+  );
+};
+export default Default;

package/src/admin/Drawer/index.tsx

@@ -0,0 +1,5 @@
+export * from '@digigov/react-extensions/admin/Drawer';
+export * from '@digigov/react-extensions/admin/DrawerHeading';
+
+import Drawer from '@digigov/react-extensions/admin/Drawer';
+export default Drawer;

package/src/admin/Dropdown/Dropdown.stories.js

@@ -0,0 +1,10 @@
+/* eslint-disable digigov/no-relative-imports */
+
+import Dropdown from '@digigov/ui/admin/Dropdown';
+export default {
+  title: 'Digigov UI/admin/Dropdown',
+  component: Dropdown,
+};
+export * from './__stories__/Default';
+export * from './__stories__/AlignRight';
+export * from './__stories__/PlacementTop';

package/src/admin/Dropdown/__stories__/AlignRight.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Dropdown, {
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/admin/Dropdown';
+import Field from '@digigov/ui/core/Field';
+import LabelContainer from '@digigov/react-core/LabelContainer';
+import SectionBreak from '@digigov/ui/core/Divider';
+import NavVertical from '@digigov/react-core/NavVertical';
+import { LabelTitle } from '@digigov/react-core/LabelTitle';
+import TextInput from '@digigov/ui/core/TextInput';
+import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
+import Button from '@digigov/ui/core/Button';
+
+export const AlignRight = () => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Dropdown align="right">
+      <DropdownButton
+        role="button"
+        aria-haspopup="true"
+        aria-controls="menu2"
+        arrow
+      >
+        Αναζητηση
+      </DropdownButton>
+      <DropdownContent role="menu" id="menu2">
+        <Field role="menuitem">
+          <LabelContainer>
+            <LabelTitle>Όνομα πεδίου</LabelTitle>
+            <TextInput name="input-name" />
+          </LabelContainer>
+        </Field>
+        <SectionBreak visible role="separator" />
+        <NavVertical role="menu">
+          <NavVerticalItem role="menuitem" href="#">
+            Επεξεργασία
+          </NavVerticalItem>
+          <NavVerticalItem role="menuitem" href="#">
+            Μετακίνηση
+          </NavVerticalItem>
+          <NavVerticalItem role="menuitem" href="#">
+            Οριστική διαγραφή
+          </NavVerticalItem>
+        </NavVertical>
+        <SectionBreak visible role="separator" />
+        <Button role="menuitem">Ενέργεια</Button>
+      </DropdownContent>
+    </Dropdown>
+  </div>
+);
+
+export default AlignRight;

package/src/admin/Dropdown/__stories__/Default.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Dropdown, {
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/admin/Dropdown';
+import Field from '@digigov/ui/core/Field';
+import LabelContainer from '@digigov/react-core/LabelContainer';
+import SectionBreak from '@digigov/ui/core/Divider';
+import NavVertical from '@digigov/react-core/NavVertical';
+import { LabelTitle } from '@digigov/react-core/LabelTitle';
+import TextInput from '@digigov/ui/core/TextInput';
+import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
+import Button from '@digigov/ui/core/Button';
+
+export const Default = () => (
+  <Dropdown>
+    <DropdownButton
+      role="button"
+      aria-haspopup="true"
+      aria-controls="menu2"
+      arrow
+    >
+      Αναζητηση
+    </DropdownButton>
+    <DropdownContent role="menu" id="menu2">
+      <Field role="menuitem">
+        <LabelContainer>
+          <LabelTitle>Όνομα πεδίου</LabelTitle>
+          <TextInput name="input-name" />
+        </LabelContainer>
+      </Field>
+      <SectionBreak visible role="separator" />
+      <NavVertical role="menu">
+        <NavVerticalItem role="menuitem" href="#">
+          Επεξεργασία
+        </NavVerticalItem>
+        <NavVerticalItem role="menuitem" href="#">
+          Μετακίνηση
+        </NavVerticalItem>
+        <NavVerticalItem role="menuitem" href="#">
+          Οριστική διαγραφή
+        </NavVerticalItem>
+      </NavVertical>
+      <SectionBreak visible role="separator" />
+      <Button role="menuitem">Ενέργεια</Button>
+    </DropdownContent>
+  </Dropdown>
+);
+
+export default Default;

package/src/admin/Dropdown/__stories__/PlacementTop.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Dropdown, {
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/admin/Dropdown';
+import Field from '@digigov/ui/core/Field';
+import LabelContainer from '@digigov/react-core/LabelContainer';
+import SectionBreak from '@digigov/ui/core/Divider';
+import NavVertical from '@digigov/react-core/NavVertical';
+import { LabelTitle } from '@digigov/react-core/LabelTitle';
+import TextInput from '@digigov/ui/core/TextInput';
+import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
+import Button from '@digigov/ui/core/Button';
+
+export const PlacementTop = () => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Dropdown placement="top">
+      <DropdownButton
+        role="button"
+        aria-haspopup="true"
+        aria-controls="menu2"
+        arrow
+      >
+        Αναζητηση
+      </DropdownButton>
+      <DropdownContent role="menu" id="menu2">
+        <Field role="menuitem">
+          <LabelContainer>
+            <LabelTitle>Όνομα πεδίου</LabelTitle>
+            <TextInput name="input-name" />
+          </LabelContainer>
+        </Field>
+        <SectionBreak visible role="separator" />
+        <NavVertical role="menu">
+          <NavVerticalItem role="menuitem" href="#">
+            Επεξεργασία
+          </NavVerticalItem>
+          <NavVerticalItem role="menuitem" href="#">
+            Μετακίνηση
+          </NavVerticalItem>
+          <NavVerticalItem role="menuitem" href="#">
+            Οριστική διαγραφή
+          </NavVerticalItem>
+        </NavVertical>
+        <SectionBreak visible role="separator" />
+        <Button role="menuitem">Ενέργεια</Button>
+      </DropdownContent>
+    </Dropdown>
+  </div>
+);
+
+export default PlacementTop;

package/src/admin/Dropdown/index.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useRef } from 'react';
+import DropdownBase, {
+  DropdownBaseProps,
+} from '@digigov/react-extensions/admin/DropdownBase';
+
+export * from '@digigov/react-extensions/admin/DropdownButton';
+export * from '@digigov/react-extensions/admin/DropdownContent';
+
+export interface DropdownProps extends DropdownBaseProps {
+  /**
+   * Use closeBehaviour to set the way that the Dropdown will close.
+   */
+  closeBehaviour?: 'clickButton' | 'clickOutside';
+  /**
+   * Use float dropdown to set the dropdown to float over
+   * scroll bars and stay on a static position.
+   * This is mainly used to show actions in a long table.
+   */
+  float?: boolean;
+}
+/**
+ * Dropdown component is used for showing more options with a button.
+ */
+export const Dropdown = ({
+  closeBehaviour = 'clickOutside',
+  float = false,
+  ...props
+}: DropdownProps): React.ReactElement => {
+  const innerRef = useRef() as React.MutableRefObject<HTMLDetailsElement>;
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (innerRef.current && !innerRef.current.contains(event.target)) {
+        innerRef.current.open = false;
+      }
+    };
+    if (closeBehaviour === 'clickOutside') {
+      document.addEventListener('click', handleClickOutside, true);
+    }
+    const toggleFloat = () => {
+      const tbody = innerRef.current.closest('tbody') as HTMLElement;
+      const parentElement = innerRef.current?.parentElement as HTMLElement;
+      if (innerRef.current.open) {
+        tbody.style.position = 'static';
+        const rect = innerRef.current?.getBoundingClientRect();
+        const parentRect = parentElement.getBoundingClientRect();
+        innerRef.current.style.position = 'static';
+        // arbitrary spacing of 12 pixels because CSS
+        const top = rect.top + window.pageYOffset;
+        const left = rect.left + window.pageXOffset;
+        parentElement.style.height = `${parentRect.height}px`;
+        parentElement.style.width = `${parentRect.width}px`;
+        innerRef.current.style.top = `${top}px`;
+        innerRef.current.style.left = `${left}px`;
+        innerRef.current.style.position = `absolute`;
+        innerRef.current.style.display = `block`;
+        innerRef.current.style.background = 'white';
+      } else {
+        tbody.style.position = 'relative';
+        parentElement.style.height = '';
+        parentElement.style.width = '';
+        innerRef.current.style.top = `0`;
+        innerRef.current.style.left = `0`;
+        innerRef.current.style.position = `relative`;
+        innerRef.current.style.display = `table-cell`;
+        innerRef.current.style.background = 'transparent';
+      }
+    };
+    if (float) {
+      innerRef.current.addEventListener('toggle', toggleFloat);
+    }
+    return () => {
+      if (closeBehaviour === 'clickOutside') {
+        document.removeEventListener('click', handleClickOutside, true);
+      }
+      if (float) {
+        innerRef.current.removeEventListener('toggle', toggleFloat);
+      }
+    };
+  }, []);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return <DropdownBase ref={innerRef} {...props} />;
+};
+
+export { DropdownBase };
+export default Dropdown;

package/src/admin/DropdownArrowDown/index.tsx

@@ -0,0 +1,4 @@
+import DropdownArrowDown from '@digigov/react-extensions/admin/DropdownArrowDown';
+
+export default DropdownArrowDown;
+export { DropdownArrowDown };

package/src/admin/FillableText/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-extensions/admin/FillableText';
+
+import FillableText from '@digigov/react-extensions/admin/FillableText';
+export default FillableText;

package/src/admin/FilterSection/index.tsx

@@ -0,0 +1,10 @@
+export * from '@digigov/react-extensions/admin/FilterSection';
+export * from '@digigov/react-extensions/admin/FilterSectionHorizontal';
+export * from '@digigov/react-extensions/admin/FilterHeadingSection';
+export * from '@digigov/react-extensions/admin/FilterContent';
+export * from '@digigov/react-extensions/admin/FilterOptionsSection';
+export * from '@digigov/react-extensions/admin/FilterSelectedHeading';
+export * from '@digigov/react-extensions/admin/FilterSelectedSection';
+
+import FilterSection from '@digigov/react-extensions/admin/FilterSection';
+export default FilterSection;

package/src/admin/FullPageBackground/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-extensions/admin/FullPageBackground';
+
+import FullPageBackground from '@digigov/react-extensions/admin/FullPageBackground';
+export default FullPageBackground;

package/src/admin/LabeledText/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-extensions/admin/LabeledText';
+
+import LabeledText from '@digigov/react-extensions/admin/LabeledText';
+export default LabeledText;

package/src/admin/LoaderContainer/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-extensions/admin/LoaderContainer';
+
+import LoaderContainer from '@digigov/react-extensions/admin/LoaderContainer';
+export default LoaderContainer;

package/src/admin/Modal/Modal.stories.js

@@ -0,0 +1,9 @@
+
+import Modal from "@digigov/ui/admin/Modal";
+export default {
+  title: 'Digigov UI/admin/Modal',
+  component: Modal,
+}
+export * from './__stories__/Default';
+export * from './__stories__/AlertDialog';
+  

package/src/admin/Modal/__stories__/AlertDialog.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import AlertDialog from '@digigov/ui/admin/Modal/__stories__/AlertDialog';
+
+import { test, expect } from '@playwright/experimental-ct-react';
+
+test('open modal', async ({ mount, page }) => {
+  const component = await mount(<AlertDialog />);
+  // As with any Playwright test, assert locator text.
+  await expect(component).toContainText('Διαγραφή');
+  // Perform locator click. This will trigger the event.
+  await page.click('#delete-button');
+  // Assert that respective events have been fired.
+  await expect(await page.screenshot()).toMatchSnapshot();
+});

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import Modal, {
+  ModalHeading,
+  ModalContent,
+  ModalAction,
+  useModal,
+} from '@digigov/ui/admin/Modal';
+import { Button } from '@digigov/ui/core';
+import { Paragraph } from '@digigov/ui/typography';
+
+export const AlertDialog = () => {
+  const { modalProps, toggleModal } = useModal();
+  return (
+    <div>
+      <Button color="warning" id="delete-button" onClick={() => toggleModal()}>
+        Διαγραφή
+      </Button>
+      <Modal
+        {...modalProps}
+        role="alertdialog"
+        aria-labelledby="modal-label"
+        aria-describedby="modal-content"
+      >
+        <ModalHeading id="modal-label">Επιβεβαίωση</ModalHeading>
+        <ModalContent id="modal-content">
+          <Paragraph>
+            Είστε σίγουροι ότι θέλετε να διαγράψετε την εγγραφή;
+          </Paragraph>
+        </ModalContent>
+        <ModalAction>
+          <Button onClick={() => toggleModal()}>Διαγραφή</Button>
+          <Button variant="link" onClick={() => toggleModal()}>
+            Ακύρωση
+          </Button>
+        </ModalAction>
+      </Modal>
+    </div>
+  );
+};
+
+export default AlertDialog;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import Modal, {
+  ModalHeading,
+  ModalContent,
+  ModalAction,
+  useModal,
+} from '@digigov/ui/admin/Modal';
+import { Button, TextInput } from '@digigov/ui/core';
+import Field from '@digigov/ui/core/Field';
+import LabelContainer from '@digigov/react-core/LabelContainer';
+
+export const Default = () => {
+  const { toggleModal, modalProps } = useModal();
+  return (
+    <div>
+      <Button onClick={() => toggleModal()}>Προσθήκη τηλεφώνου</Button>
+
+      <Modal {...modalProps} aria-labelledby="modal-label">
+        <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
+        <ModalContent>
+          <Field>
+            <LabelContainer>
+              Συμπληρώστε το τηλέφωνο επικοινωνίας
+              <TextInput name="inputext" characterWidth={10}></TextInput>
+            </LabelContainer>
+          </Field>
+        </ModalContent>
+        <ModalAction>
+          <Button>Υποβολή</Button>
+          <Button variant="link" onClick={() => toggleModal()}>
+            Ακύρωση
+          </Button>
+        </ModalAction>
+      </Modal>
+    </div>
+  );
+};
+
+export default Default;

package/src/admin/Modal/index.tsx

@@ -0,0 +1,87 @@
+export * from '@digigov/react-extensions/admin/ModalContainer';
+export * from '@digigov/react-extensions/admin/ModalHeading';
+export * from '@digigov/react-extensions/admin/ModalContent';
+export * from '@digigov/react-extensions/admin/ModalAction';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ModalContainer, {
+  ModalContainerProps,
+} from '@digigov/react-extensions/admin/ModalContainer';
+import useKeypress from '@digigov/ui/hooks/useKeypress';
+
+export interface ModalProps extends ModalContainerProps {
+  onEscape?: () => void;
+}
+
+export const useModal = (): {
+  toggleModal: (x?: any) => void;
+  closeModal: () => void;
+  modalProps: ModalProps;
+  modalData: any;
+} => {
+  const [open, setOpen] = useState(false);
+  const [modalData, setModalData] = useState(false);
+  function toggleModal(data) {
+    setOpen(!open);
+    if (data) {
+      setModalData(data);
+    }
+  }
+  const closeModal = useCallback(function closeModal() {
+    setOpen(false);
+  }, []);
+  return {
+    toggleModal,
+    closeModal,
+    modalData,
+    modalProps: {
+      onEscape: closeModal,
+      open,
+      role: 'dialog',
+      'aria-modal': 'true',
+    },
+  };
+};
+
+export const Modal = (props: ModalProps): React.ReactElement | null => {
+  if (props.open) {
+    return <ModalBase {...props} />;
+  } else {
+    return null;
+  }
+};
+
+export const ModalBase = ({
+  open,
+  children,
+  onEscape,
+  ...props
+}: ModalProps): React.ReactElement => {
+  const firstModalElement = useRef() as React.MutableRefObject<HTMLSpanElement>;
+  const lastModalElement = useRef() as React.MutableRefObject<HTMLSpanElement>;
+  const handleFocus = useCallback(() => {
+    firstModalElement.current.focus();
+  }, []);
+  useKeypress('Escape', onEscape);
+  useEffect(() => {
+    handleFocus();
+    lastModalElement.current.addEventListener('focus', handleFocus);
+    return () => {
+      lastModalElement.current.removeEventListener('focus', handleFocus);
+    };
+  }, [open]);
+  return (
+    <ModalContainer
+      open={open}
+      role="dialog"
+      {...props}
+      aria-hidden="false"
+      aria-modal="true"
+    >
+      <span tabIndex={-1} ref={firstModalElement} aria-hidden="true" />
+      {open && children}
+      <span tabIndex={0} ref={lastModalElement} aria-hidden="true" />
+    </ModalContainer>
+  );
+};
+
+export default Modal;

package/src/admin/Pagination/Pagination.stories.js

@@ -0,0 +1,8 @@
+
+import Pagination from "@digigov/ui/admin/Pagination";
+export default {
+  title: 'Digigov UI/admin/Pagination',
+  component: Pagination,
+}
+export * from './__stories__/Default';
+