@digigov/ui 0.28.3 → 0.29.0

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

@@ -0,0 +1,165 @@
+import React from 'react';
+
+import {
+  Pagination,
+  PaginationList,
+  PaginationListItem,
+  PaginationLabel,
+} from '@digigov/ui/admin/Pagination';
+
+import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
+import { Link } from '@digigov/ui/core/Link';
+import { Divider } from '@digigov/ui/core/Divider';
+import { I18NProvider } from '@digigov/ui/app/i18n';
+
+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>
+    </I18NProvider>
+  </div>
+);
+
+export default Default;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {
+  Pagination,
+  PaginationList,
+  PaginationListItem,
+  PaginationLabel,
+} from '@digigov/ui/admin/Pagination';
+
+import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
+import { Link } from '@digigov/ui/core/Link';
+import { Divider } from '@digigov/ui/core/Divider';
+import { I18NProvider } from '@digigov/ui/app/i18n';
+
+export const PaginationSmall = () => (
+  <div className="example">
+    <I18NProvider t={(str: string) => str}>
+      <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 PaginationSmall;

package/src/admin/Pagination/index.mdx

@@ -0,0 +1,16 @@
+---
+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" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Pagination" />

package/src/admin/Pagination/index.tsx

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

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

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

@@ -0,0 +1,11 @@
+/* eslint-disable digigov/no-relative-imports */
+
+import StepNav from '@digigov/ui/admin/StepNav';
+export default {
+  title: 'Digigov UI/admin/StepNav',
+  description:
+    'The step by step navigation pattern presents an end to end journey in logical steps, with links to content that helps users complete each step.',
+  component: StepNav,
+  displayName: 'StepNav',
+};
+export * from './__stories__/Default';

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

@@ -0,0 +1,33 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-admin-stepnav--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>ol>li:nth-child(1)>details>summary>h2>div>span:nth-child(1)"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>ol>li:nth-child(1)>details>summary>h2>div>span:nth-child(1)"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>button"
+              }
+            }
+          ],
+          "id": "C735jJuFjJNe",
+          "title": "Click 1st and all"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,149 @@
+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 } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
+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

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

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

@@ -0,0 +1,9 @@
+import TaskList from '@digigov/ui/admin/TaskList';
+export default {
+  title: 'Digigov UI/admin/TaskList',
+  description:
+    'Only use a task list page for longer transactions involving multiple tasks that users may need to complete over a number of sessions.',
+  component: TaskList,
+  displayName: 'TaskList',
+};
+export * from '@digigov/ui/admin/TaskList/__stories__/Default';

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import { LinkBase } from '@digigov/ui/core/Link';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+} from '@digigov/ui/core/SummaryList';
+
+import {
+  TaskList,
+  TaskListItem,
+  TaskListItemHeading,
+  TaskListItemContent,
+  TaskListItemTag,
+} from '@digigov/ui/admin/TaskList';
+
+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

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

package/src/admin/Timeline/Timeline.stories.js

@@ -0,0 +1,9 @@
+import Timeline from '@digigov/ui/admin/Timeline';
+export default {
+  title: 'Digigov UI/admin/Timeline',
+  description:
+    'Use this pattern to show a list of entries in the order they happened.',
+  component: Timeline,
+  displayName: 'Timeline',
+};
+export * from '@digigov/ui/admin/Timeline/__stories__/Default';