@digigov/ui 0.28.3 → 0.29.0

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

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/admin/Dropdown';
+
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { Button } from '@digigov/ui/core/Button';
+
+export const Default = () => (
+  <Dropdown open>
+    <DropdownButton
+      role="button"
+      aria-haspopup="true"
+      aria-controls="menu2"
+      arrow
+    >
+      Αναζητηση
+    </DropdownButton>
+    <DropdownContent role="menu" id="menu2">
+      <FieldContainer role="menuitem">
+        <LabelContainer>
+          <LabelTitle>Όνομα πεδίου</LabelTitle>
+          <TextInput name="input-name" />
+        </LabelContainer>
+      </FieldContainer>
+      <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,61 @@
+import React from 'react';
+
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/admin/Dropdown';
+
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { Button } from '@digigov/ui/core/Button';
+
+export const PlacementTop = () => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Dropdown placement="top" open>
+      <DropdownButton
+        role="button"
+        aria-haspopup="true"
+        aria-controls="menu2"
+        arrow
+      >
+        Αναζητηση
+      </DropdownButton>
+      <DropdownContent role="menu" id="menu2">
+        <FieldContainer role="menuitem">
+          <LabelContainer>
+            <LabelTitle>Όνομα πεδίου</LabelTitle>
+            <TextInput name="input-name" />
+          </LabelContainer>
+        </FieldContainer>
+        <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.mdx

@@ -0,0 +1,45 @@
+---
+id: dropdown
+title: Dropdown
+---
+
+# Dropdown
+
+```bash
+import Dropdown from '@digigov/ui/admin/Dropdown';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="admin/Dropdown"
+  story="Default.tsx"
+/>
+
+### Dropdown with align right
+
+You can display the dropdown menu to the right side of the `Dropdown` button.
+
+<Story
+  packageName="@digigov/ui"
+  component="admin/Dropdown"
+  story="AlignRight.tsx"
+/>
+
+### Dropdown with placement top
+
+You can display the dropdown menu to the top of the `Dropdown` button.
+
+<Story
+  packageName="@digigov/ui"
+  component="admin/Dropdown"
+  story="PlacementTop.tsx"
+/>
+
+You can read more about the accessibility patterns used in our Dropdown
+implementation in the ARIA Authoring Practices Guide (APG) at 
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Dropdown" />

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,12 @@
+import Modal from '@digigov/ui/admin/Modal';
+export default {
+  title: 'Digigov UI/admin/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,
+  displayName: 'Modal',
+};
+export * from '@digigov/ui/admin/Modal/__stories__/Default';
+export * from '@digigov/ui/admin/Modal/__stories__/AlertDialog';

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

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

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

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

package/src/admin/Modal/index.mdx

@@ -0,0 +1,33 @@
+---
+id: modal
+title: Modal
+---
+
+```bash
+import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/admin/Modal";
+```
+
+## How to use
+
+### As a Dialog
+
+<Story packageName="@digigov/ui" component="admin/Modal" story="Default.tsx" />
+
+### As an Alert Dialog
+
+<Story
+  packageName="@digigov/ui"
+  component="admin/Modal"
+  story="AlertDialog.tsx"
+/>
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Modal
+implementation in the ARIA Authoring Practices Guide (APG) at
+[Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/) and
+[Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) sections.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Modal" />

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,12 @@
+import Pagination from '@digigov/ui/admin/Pagination';
+export default {
+  title: 'Digigov UI/admin/Pagination',
+  description:
+    'Use the pagination component to let users browse through a long list.',
+  link:
+    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/pagination',
+  component: Pagination,
+  displayName: 'Pagination',
+};
+export * from '@digigov/ui/admin/Pagination/__stories__/Default';
+export * from '@digigov/ui/admin/Pagination/__stories__/PaginationSmall';

package/src/admin/Pagination/Pagination.stories.playwright.json

@@ -0,0 +1,27 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-admin-pagination--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>nav:nth-child(1)>ul>li:nth-child(4)>a"
+              }
+            },
+            {
+              "name": "focus",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>nav:nth-child(1)>ul>li:nth-child(4)>a"
+              }
+            }
+          ],
+          "id": "rXA1pwhPvkBZ",
+          "title": "Hover and click no3"
+        }
+      ]
+    }
+  }
+}