@digigov/ui 0.28.2 → 0.28.3

package/src/admin/Modal/index.tsx

@@ -1,87 +0,0 @@
-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

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

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

@@ -1,186 +0,0 @@
-import React from 'react';
-import Pagination, {
-  PaginationList,
-  PaginationListItem,
-  PaginationLabel,
-} from '@digigov/ui/admin/Pagination';
-import ArrowIcon from '@digigov/react-core/ArrowIcon';
-import Link from '@digigov/ui/core/Link';
-import Divider from '@digigov/ui/core/Divider';
-import { I18NProvider } from '@digigov/ui/app';
-
-export const Default = () => (
-  <div className="example">
-    <I18NProvider t={(str: string) => str}>
-      <Pagination>
-        <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
-        <PaginationList>
-          <PaginationListItem>
-            <Link>
-              <ArrowIcon direction="left" />
-              Προηγούμενο
-            </Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page1">1</Link>
-          </PaginationListItem>
-          <PaginationListItem currentPage>2</PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page3">3</Link>
-          </PaginationListItem>
-          <PaginationListItem variant="dots" />
-          <PaginationListItem>
-            <Link href="/page5">5</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page6">6</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page7">7</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link>
-              Επόμενο
-              <ArrowIcon direction="right" />
-            </Link>
-          </PaginationListItem>
-        </PaginationList>
-      </Pagination>
-
-      <Divider visible size="l" />
-
-      <Pagination>
-        <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
-        <PaginationList>
-          <PaginationListItem inactive>
-            <Link>
-              <ArrowIcon direction="left" />
-              Προηγούμενο
-            </Link>
-          </PaginationListItem>
-          <PaginationListItem currentPage>1</PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page2">2</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page3">3</Link>
-          </PaginationListItem>
-          <PaginationListItem variant="dots"></PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page5">5</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page6">6</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page7">7</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link>
-              Επόμενο
-              <ArrowIcon direction="right" />
-            </Link>
-          </PaginationListItem>
-        </PaginationList>
-      </Pagination>
-
-      <Divider visible size="l" />
-
-      <Pagination>
-        <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
-        <PaginationList>
-          <PaginationListItem>
-            <Link>
-              <ArrowIcon direction="left" />
-              Προηγούμενο
-            </Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page1">1</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link>2</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page3">3</Link>
-          </PaginationListItem>
-          <PaginationListItem variant="dots"></PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page5">5</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page6">6</Link>
-          </PaginationListItem>
-          <PaginationListItem currentPage>7</PaginationListItem>
-          <PaginationListItem inactive>
-            <Link>
-              Επόμενο
-              <ArrowIcon direction="right" />
-            </Link>
-          </PaginationListItem>
-        </PaginationList>
-      </Pagination>
-
-      <Divider visible size="l" />
-
-      <Pagination>
-        <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
-        <PaginationList>
-          <PaginationListItem>
-            <Link>
-              <ArrowIcon direction="left" />
-              Προηγούμενο
-            </Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page1">1</Link>
-          </PaginationListItem>
-          <PaginationListItem variant="dots"></PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page7">2</Link>
-          </PaginationListItem>
-          <PaginationListItem currentPage>8</PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page9">9</Link>
-          </PaginationListItem>
-          <PaginationListItem variant="dots"></PaginationListItem>
-          <PaginationListItem>
-            <Link href="/page20">20</Link>
-          </PaginationListItem>
-          <PaginationListItem>
-            <Link>
-              Επόμενο
-              <ArrowIcon direction="right" />
-            </Link>
-          </PaginationListItem>
-        </PaginationList>
-      </Pagination>
-
-      <Divider visible size="l" />
-      <Pagination>
-        <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
-        <PaginationList>
-          <PaginationListItem inactive>
-            <Link>
-              <ArrowIcon direction="left" />
-            </Link>
-          </PaginationListItem>
-          <PaginationListItem currentPage>1</PaginationListItem>
-
-          <PaginationListItem>
-            <Link href="/page7">2</Link>
-          </PaginationListItem>
-
-          <PaginationListItem>
-            <Link>
-              <ArrowIcon direction="right" />
-            </Link>
-          </PaginationListItem>
-        </PaginationList>
-      </Pagination>
-      <Divider visible size="l" />
-    </I18NProvider>
-  </div>
-);
-
-export default Default;

package/src/admin/Pagination/index.mdx

@@ -1,12 +0,0 @@
----
-id: pagination
-title: Pagination
----
-
-```bash
-import Pagination from '@digigov/ui/app/Pagination';
-``` 
-
-## How to use
-
-<Story packageName="@digigov/ui" component="admin/Pagination" story="Default.tsx" />

package/src/admin/Pagination/index.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import PaginationLabelContainer, {
-  PaginationLabelContainerProps,
-} from '@digigov/react-extensions/admin/PaginationLabelContainer';
-import { I18nText } from '@digigov/ui/app/I18nText';
-export interface PaginationLabelProps extends PaginationLabelContainerProps {
-  /**
-   * Use start to set the value of the start point of the results shown.
-   */
-  start: number;
-  /**
-   * Use end to set the value of the end point of the results shown.
-   */
-  end: number;
-  /**
-   * Use total to set the value of the total results.
-   */
-  total: number;
-}
-/**
- * PaginationLabel component is used for placing the pagination results label.
- */
-export const PaginationLabel = React.forwardRef<
-  HTMLParagraphElement,
-  PaginationLabelProps
->(function PaginationLabel(
-  { start, end, total },
-  ref: React.Ref<HTMLParagraphElement>
-) {
-  return (
-    <PaginationLabelContainer ref={ref}>
-      <I18nText i18nKey="pagination.label">
-        Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> results.
-      </I18nText>
-    </PaginationLabelContainer>
-  );
-});
-
-export * from '@digigov/react-extensions/admin/Pagination';
-export * from '@digigov/react-extensions/admin/PaginationList';
-export * from '@digigov/react-extensions/admin/PaginationListItem';
-export { PaginationLabelContainer };
-
-import Pagination from '@digigov/react-extensions/admin/Pagination';
-export default Pagination;

package/src/admin/ResultsHeading/index.tsx

@@ -1,6 +0,0 @@
-export * from '@digigov/react-extensions/admin/ResultsHeading';
-export * from '@digigov/react-extensions/admin/ResultsActionBar';
-export * from '@digigov/react-extensions/admin/ResultsHeadingActions';
-
-import ResultsHeading from '@digigov/react-extensions/admin/ResultsHeading';
-export default ResultsHeading;

package/src/admin/SearchSection/index.tsx

@@ -1,6 +0,0 @@
-export * from '@digigov/react-extensions/admin/SearchSection';
-export * from '@digigov/react-extensions/admin/SearchButton';
-export * from '@digigov/react-extensions/admin/SearchIcon';
-
-import SearchSection from '@digigov/react-extensions/admin/SearchSection';
-export default SearchSection;

package/src/admin/StepNav/StepNav.stories.js

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

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

@@ -1,145 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import StepNav, {
-  StepNavCircleΝumber,
-  StepNavControls,
-  StepNavList,
-  StepNavListItem,
-  StepNavAccordionOpened,
-  StepNavAccordionClosed,
-  StepNavAccordion,
-  StepNavAccordionContent,
-  StepNavAccordionSummary,
-  StepNavAccordionSummaryHeading,
-  StepNavAccordionHeadingTitle,
-  StepNavAccordionHeadingText,
-} from '@digigov/ui/admin/StepNav';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import List, { ListItem } from '@digigov/ui/core/List';
-import Link from '@digigov/ui/core/Link';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import Button from '@digigov/ui/core/Button';
-
-const data = [
-  {
-    title: 'Title-1',
-    description: 'Some description here',
-    link: 'A link to navigate',
-  },
-  {
-    title: 'Title-2',
-    description: 'Some description here',
-    link: 'A link to navigate',
-  },
-  {
-    title: 'Title-3',
-    description: 'Some description here',
-    link: 'A link to navigate',
-  },
-  {
-    title: 'Title-4',
-    description: 'Some description here',
-    link: 'A link to navigate',
-  },
-];
-
-export const Default = () => {
-  const [open, SetOpen] = useState<boolean>(false);
-  const [openItem, setOpenItem] = useState<boolean[]>([
-    false,
-    false,
-    false,
-    false,
-  ]);
-  useEffect(() => {
-    const stateArray: boolean[] = [];
-    if (open === false) {
-      openItem.map(() => {
-        stateArray.push(false);
-      });
-      setOpenItem(stateArray);
-    } else {
-      openItem.map(() => {
-        stateArray.push(true);
-      });
-      setOpenItem(stateArray);
-    }
-  }, [open]);
-
-  function openCloseItem(index): void {
-    const statusOpenItem = [...openItem];
-    statusOpenItem[index] = !statusOpenItem[index];
-    setOpenItem(statusOpenItem);
-  }
-
-  function openCloseAll(): void {
-    SetOpen(!open);
-  }
-  return (
-    <StepNav>
-      <StepNavControls>
-        <Button
-          variant="link"
-          onClick={() => {
-            openCloseAll();
-          }}
-        >
-          {open === false ? 'Εμφάνιση όλων' : 'Απόκρυψη όλων'}
-        </Button>
-      </StepNavControls>
-      <StepNavList>
-        {data &&
-          data.map((dt, index) => {
-            return (
-              <StepNavListItem key={index}>
-                <StepNavAccordion open={open}>
-                  <StepNavAccordionSummary
-                    onClick={() => {
-                      openCloseItem(index);
-                    }}
-                  >
-                    <StepNavAccordionSummaryHeading aria-controls="content1">
-                      {index === 2 ? (
-                        <StepNavCircleΝumber border={false}>
-                          <VisuallyHidden>Step</VisuallyHidden>
-                          and
-                        </StepNavCircleΝumber>
-                      ) : (
-                        <StepNavCircleΝumber>
-                          <VisuallyHidden>Step</VisuallyHidden>
-                          {index + 1}
-                        </StepNavCircleΝumber>
-                      )}
-                      <StepNavAccordionHeadingTitle>
-                        <StepNavAccordionHeadingText>
-                          {dt.title}
-                        </StepNavAccordionHeadingText>
-                        {openItem[index] === true ? (
-                          <StepNavAccordionOpened>
-                            Απόκρυψη
-                          </StepNavAccordionOpened>
-                        ) : (
-                          <StepNavAccordionClosed>
-                            Εμφάνιση
-                          </StepNavAccordionClosed>
-                        )}
-                      </StepNavAccordionHeadingTitle>
-                    </StepNavAccordionSummaryHeading>
-                  </StepNavAccordionSummary>
-                  <StepNavAccordionContent id="content1">
-                    <Paragraph>{dt.description}</Paragraph>
-                    <List>
-                      <ListItem>
-                        <Link>{dt.link}</Link>
-                      </ListItem>
-                    </List>
-                  </StepNavAccordionContent>
-                </StepNavAccordion>
-              </StepNavListItem>
-            );
-          })}
-      </StepNavList>
-    </StepNav>
-  );
-};
-
-export default Default;

package/src/admin/StepNav/index.tsx

@@ -1,29 +0,0 @@
-import StepNavCircleΝumber from '@digigov/react-extensions/admin/StepNavCircleΝumber';
-import StepNav from '@digigov/react-extensions/admin/StepNav';
-import StepNavControls from '@digigov/react-extensions/admin/StepNavControls';
-import StepNavList from '@digigov/react-extensions/admin/StepNavList';
-import StepNavListItem from '@digigov/react-extensions/admin/StepNavListItem';
-import StepNavAccordion from '@digigov/react-extensions/admin/StepNavAccordion';
-import StepNavAccordionContent from '@digigov/react-extensions/admin/StepNavAccordionContent';
-import StepNavAccordionSummary from '@digigov/react-extensions/admin/StepNavAccordionSummary';
-import StepNavAccordionOpened from '@digigov/react-extensions/admin/StepNavAccordionOpened';
-import StepNavAccordionClosed from '@digigov/react-extensions/admin/StepNavAccordionClosed';
-import StepNavAccordionSummaryHeading from '@digigov/react-extensions/admin/StepNavAccordionSummaryHeading';
-import StepNavAccordionHeadingTitle from '@digigov/react-extensions/admin/StepNavAccordionHeadingTitle';
-import StepNavAccordionHeadingText from '@digigov/react-extensions/admin/StepNavAccordionHeadingText';
-export {
-  StepNavAccordion,
-  StepNavAccordionContent,
-  StepNavAccordionSummary,
-  StepNavAccordionSummaryHeading,
-  StepNavAccordionHeadingTitle,
-  StepNavAccordionHeadingText,
-  StepNavCircleΝumber,
-  StepNavAccordionOpened,
-  StepNavAccordionClosed,
-  StepNav,
-  StepNavControls,
-  StepNavList,
-  StepNavListItem,
-};
-export default StepNav;

package/src/admin/TableLoaderBackground/index.tsx

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

package/src/admin/TaskList/TaskList.stories.js

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

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

@@ -1,116 +0,0 @@
-import React from 'react';
-import LinkBase from '@digigov/react-core/LinkBase';
-import SummaryList, {
-  SummaryListItem,
-  SummaryListItemAction,
-  SummaryListItemKey,
-} from '@digigov/ui/core/SummaryList';
-import {
-  TaskList,
-  TaskListItem,
-  TaskListItemHeading,
-  TaskListItemContent,
-  TaskListItemTag,
-} from '@digigov/ui/admin';
-
-const fields = [
-  {
-    title: 'Check before you start',
-    tasks: [
-      {
-        text: 'Check eligibility',
-        status: 'Completed',
-      },
-      {
-        text: 'Read declaration',
-        status: 'Completed',
-      },
-    ],
-  },
-  {
-    title: 'Prepare application',
-    tasks: [
-      {
-        text: 'Company information',
-        status: 'Completed',
-      },
-      {
-        text: 'Your contact details',
-        status: 'In progress',
-      },
-      {
-        text: 'List convictions',
-        status: 'Not started',
-      },
-      {
-        text: 'Provide financial evidence',
-        status: 'Cannot start yet',
-      },
-      {
-        text: 'Give medical information',
-        status: 'Cannot start yet',
-      },
-    ],
-  },
-  {
-    title: 'Apply',
-    tasks: [
-      {
-        text: 'Submit and pay',
-        status: 'Cannot start yet',
-      },
-    ],
-  },
-];
-
-export const Default = () => (
-  <div>
-    <TaskList>
-      {fields &&
-        fields.map((field, index) => {
-          return (
-            <TaskListItem key={index}>
-              <TaskListItemHeading size="m">{`${index + 1}. ${
-                field.title
-              }`}</TaskListItemHeading>
-              <TaskListItemContent>
-                <SummaryList>
-                  {field.tasks.map((task, key) => {
-                    let tagColor;
-                    switch (task.status) {
-                      case 'Completed':
-                        tagColor = 'completed';
-                        break;
-                      case 'In progress':
-                        tagColor = 'in-progress';
-                        break;
-                      case 'Not started':
-                        tagColor = 'not-started';
-                        break;
-                      case 'Cannot start yet':
-                        tagColor = 'not-started';
-                        break;
-                    }
-                    return (
-                      <SummaryListItem key={key}>
-                        <SummaryListItemKey>
-                          <LinkBase>{task.text}</LinkBase>
-                        </SummaryListItemKey>
-                        <SummaryListItemAction>
-                          <TaskListItemTag status={tagColor}>
-                            {task.status}
-                          </TaskListItemTag>
-                        </SummaryListItemAction>
-                      </SummaryListItem>
-                    );
-                  })}
-                </SummaryList>
-              </TaskListItemContent>
-            </TaskListItem>
-          );
-        })}
-    </TaskList>
-  </div>
-);
-
-export default Default;

package/src/admin/TaskList/index.tsx

@@ -1,8 +0,0 @@
-export * from '@digigov/react-extensions/admin/TaskList';
-export * from '@digigov/react-extensions/admin/TaskListItem';
-export * from '@digigov/react-extensions/admin/TaskListItemContent';
-export * from '@digigov/react-extensions/admin/TaskListItemHeading';
-export * from '@digigov/react-extensions/admin/TaskListItemTag';
-
-import TaskList from '@digigov/react-extensions/admin/TaskList';
-export default TaskList;