@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-a131264d

package/src/navigation/Pagination/__stories__/WithHook.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  Pagination,
+  PaginationList,
+  PaginationLabel,
+  PaginationResultsPerPageSelect,
+  PaginationListItemButton,
+} from '@digigov/ui/navigation/Pagination';
+import usePagination from '../hooks';
+import Grid from '@digigov/ui/layouts/Grid';
+import Card from '@digigov/ui/content/Card';
+
+const data: { id: number }[] = [];
+const dataLength = 245;
+for (let i = 0; i < dataLength; i++) {
+  data.push({ id: i });
+}
+
+export const WithHook = () => {
+  const resultsPerPageOptions: number[] = [10, 25, 40];
+  const previousLabel = 'Προηγούμενη';
+  const nextLabel = 'Επόμενη';
+  const {
+    registerPaginationLabel,
+    registerPaginationResultsPerPageSelect,
+    items,
+    offset,
+    limit,
+  } = usePagination({
+    total: data.length,
+    resultsPerPageOptions: resultsPerPageOptions, // limitOptions
+    previousLabel: previousLabel,
+    nextLabel: nextLabel,
+  });
+
+  const filteredData = data.filter(
+    (item, index) => {
+      console.log(item);
+      return index > offset && index < offset + limit
+
+    }
+  );
+
+  return (
+    <>
+      <Grid container spacing={4} marginBottom={8}>
+        {filteredData.map((item, index) => {
+          return (
+            <Grid item xs={4} md={2} key={index}>
+              <Card variant="border"> {item.id}</Card>
+            </Grid>
+          );
+        })}
+      </Grid>
+
+      <Pagination>
+        <PaginationLabel {...registerPaginationLabel()}></PaginationLabel>
+        <PaginationResultsPerPageSelect
+          {...registerPaginationResultsPerPageSelect()}
+        >
+          Αποτελέσματα ανά σελίδα{' '}
+        </PaginationResultsPerPageSelect>
+        <PaginationList>
+          {items.map((item, index) => {
+            return <PaginationListItemButton {...item} key={index} />;
+          })}
+        </PaginationList>
+      </Pagination>
+    </>
+  );
+};
+export default WithHook;

package/src/navigation/Pagination/__stories__/WithInactiveValues.tsx

@@ -9,7 +9,7 @@ import {
   PaginationListItem,
   PaginationLabel,
 } from '@digigov/ui/navigation/Pagination';
-import { ArrowIcon } from '@digigov/ui/utils/SvgIcon';
+import { ChevronIcon } from '@digigov/ui/utils/SvgIcon';
 
 export const WithInactiveValues = () => (
   <I18NProvider t={(str: string) => str}>
@@ -18,7 +18,7 @@ export const WithInactiveValues = () => (
       <PaginationList>
         <PaginationListItem active={false}>
           <Link>
-            <ArrowIcon direction="left" />
+            <ChevronIcon direction="left" />
             Προηγούμενο
           </Link>
         </PaginationListItem>
@@ -42,7 +42,7 @@ export const WithInactiveValues = () => (
         <PaginationListItem>
           <Link>
             Επόμενο
-            <ArrowIcon direction="right" />
+            <ChevronIcon direction="right" />
           </Link>
         </PaginationListItem>
       </PaginationList>
@@ -53,7 +53,7 @@ export const WithInactiveValues = () => (
       <PaginationList>
         <PaginationListItem>
           <Link>
-            <ArrowIcon direction="left" />
+            <ChevronIcon direction="left" />
             Προηγούμενο
           </Link>
         </PaginationListItem>
@@ -77,7 +77,7 @@ export const WithInactiveValues = () => (
         <PaginationListItem active={false}>
           <Link>
             Επόμενο
-            <ArrowIcon direction="right" />
+            <ChevronIcon direction="right" />
           </Link>
         </PaginationListItem>
       </PaginationList>

package/src/navigation/Pagination/__stories__/WithResultsPerPage.tsx

@@ -14,7 +14,7 @@ import {
   PaginationLabel,
 } from '@digigov/ui/navigation/Pagination';
 
-import { ArrowIcon } from '@digigov/ui/utils/SvgIcon';
+import { ChevronIcon } from '@digigov/ui/utils/SvgIcon';
 
 export const WithResultsPerPage = () => (
   <I18NProvider t={(str: string) => str}>
@@ -31,7 +31,7 @@ export const WithResultsPerPage = () => (
       <PaginationList>
         <PaginationListItem>
           <Link>
-            <ArrowIcon direction="left" />
+            <ChevronIcon direction="left" />
             Προηγούμενο
           </Link>
         </PaginationListItem>
@@ -53,7 +53,7 @@ export const WithResultsPerPage = () => (
         <PaginationListItem>
           <Link>
             Επόμενο
-            <ArrowIcon direction="right" />
+            <ChevronIcon direction="right" />
           </Link>
         </PaginationListItem>
       </PaginationList>

package/src/navigation/Pagination/auto.tsx

@@ -0,0 +1,141 @@
+import React, { useContext } from 'react';
+import {
+  Pagination,
+  PaginationList,
+  PaginationListItemButton,
+  PaginationLabel,
+  usePagination,
+  usePaginationReturn,
+  PaginationResultsPerPageSelect,
+  PaginationLabelProps,
+  PaginationResultsPerPageSelectProps,
+  PaginationListProps,
+  PaginationProps,
+} from '@digigov/ui/navigation/Pagination';
+
+export interface PaginationLabelAutoProps
+  extends Omit<PaginationLabelProps, 'start' | 'end' | 'total'> {
+  start?: number;
+  end?: number;
+  total?: number;
+}
+
+export interface PaginationResultsPerPageSelectAutoProps
+  extends Omit<
+    PaginationResultsPerPageSelectProps,
+    'resultsPerPageOptions' | 'currentResultsPerPage' | 'handleOnChange'
+  > {
+  resultsPerPageOptions?: number[];
+  currentResultsPerPage?: number;
+  handleOnChange?: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const PaginationContext = React.createContext<usePaginationReturn | null>(null);
+
+export const usePaginationContext = (): usePaginationReturn => {
+  const context = useContext(PaginationContext);
+  if (!context) {
+    throw new Error(
+      'usePaginationContext must be used within an PaginationProvider'
+    );
+  }
+  return context;
+};
+
+export const PaginationContextAuto = ({
+  total,
+  resultsPerPageOptions,
+  previousLabel,
+  nextLabel,
+  children,
+  ...props
+}: {
+  total: number;
+  resultsPerPageOptions: number[];
+  previousLabel?: string;
+  nextLabel?: string;
+  children: React.ReactNode;
+}) => {
+  const pagination = usePagination({
+    total,
+    resultsPerPageOptions,
+    previousLabel,
+    nextLabel,
+  });
+
+  return (
+    <PaginationContext.Provider value={pagination} {...props}>
+      {children}
+    </PaginationContext.Provider>
+  );
+};
+
+export const PaginationAuto = React.forwardRef<HTMLElement, PaginationProps>(
+  function PaginationAuto({ children, ...props }, ref) {
+    const context = usePaginationContext();
+    if (!context) {
+      throw new Error('PaginationAuto must be used within PaginationProvider');
+    }
+    return (
+      <Pagination {...props} ref={ref}>
+        {children}
+      </Pagination>
+    );
+  }
+);
+export const PaginationLabelAuto = React.forwardRef<
+  HTMLParagraphElement,
+  PaginationLabelAutoProps
+>(function PaginationLabelAuto({ ...props }, ref) {
+  const context = usePaginationContext();
+  if (!context) {
+    throw new Error(
+      'PaginationLabelAuto must be used within PaginationProvider'
+    );
+  }
+  return (
+    <PaginationLabel
+      {...context.registerPaginationLabel()}
+      {...props}
+      ref={ref}
+    ></PaginationLabel>
+  );
+});
+
+export const PaginationResultsPerPageSelectAuto = React.forwardRef<
+  HTMLLabelElement,
+  PaginationResultsPerPageSelectAutoProps
+>(function PaginationResultsPerPageSelectAuto(props, ref) {
+  const context = usePaginationContext();
+  if (!context) {
+    throw new Error(
+      'PaginationResultsPerPageSelectAuto must be used within PaginationProvider'
+    );
+  }
+  return (
+    <PaginationResultsPerPageSelect
+      {...context.registerPaginationResultsPerPageSelect()}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export const PaginationListAuto = React.forwardRef<
+  HTMLUListElement,
+  PaginationListProps
+>(function PaginationListAuto(props, ref) {
+  const context = usePaginationContext();
+  if (!context) {
+    throw new Error(
+      'PaginationListAuto must be used within PaginationProvider'
+    );
+  }
+  return (
+    <PaginationList {...props} ref={ref}>
+      {context.items.map((item, index) => {
+        return <PaginationListItemButton {...item} key={index} />;
+      })}
+    </PaginationList>
+  );
+});

package/src/navigation/Pagination/hooks.ts

@@ -0,0 +1,136 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { PaginationListItemButtonProps } from '@digigov/ui/navigation/Pagination/';
+
+export interface usePaginationProps {
+  total: number;
+  resultsPerPageOptions: number[];
+  previousLabel?: string;
+  nextLabel?: string;
+}
+
+export interface usePaginationReturn {
+  registerPaginationLabel: () => {
+    start: number;
+    end: number;
+    total: number;
+    ref: React.RefObject<HTMLDivElement> | undefined;
+  };
+  registerPaginationResultsPerPageSelect: () => {
+    resultsPerPageOptions: number[];
+    currentResultsPerPage: number;
+    handleOnChange: React.Dispatch<React.SetStateAction<number>>;
+    ref: React.RefObject<HTMLLabelElement> | undefined;
+  };
+  setTotal: (total: number) => void;
+  setCurrentPage: (page: number) => void;
+  items: PaginationListItemButtonProps[];
+  currentPage: number;
+  offset: number;
+  limit: number;
+}
+
+
+export const usePagination = ({
+  total: totalLength,
+  resultsPerPageOptions,
+  previousLabel, nextLabel
+}: usePaginationProps): usePaginationReturn => {
+  const [total, setTotal] = useState(totalLength);
+  useEffect(() => {
+    setTotal(totalLength);
+  }, [totalLength]);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentResultsPerPage, setCurrentResultsPerPage] = useState(
+    resultsPerPageOptions[0]
+  );
+  const totalPages = Math.ceil(total / currentResultsPerPage) - 1
+
+  const currentPageResultsStart = (currentPage - 1) * currentResultsPerPage + 1
+ 
+  const currentPageResultsEnd = currentPage * currentResultsPerPage < total
+      ? currentPage * currentResultsPerPage
+      : total
+  
+
+  const labelRef = useRef<React.RefObject<HTMLDivElement>>();
+  const selectLabelRef = useRef<React.RefObject<HTMLLabelElement>>();
+
+  useEffect(() => {
+    setCurrentPage(totalPages < currentPage ? totalPages : currentPage);
+  }, [currentPage, totalPages]);
+
+  const registerPaginationLabel = () => {
+    return {
+      start: currentPageResultsStart,
+      end: currentPageResultsEnd,
+      total: total,
+      ref: labelRef.current,
+    };
+  };
+  const registerPaginationResultsPerPageSelect = () => {
+    return {
+      resultsPerPageOptions: resultsPerPageOptions,
+      currentResultsPerPage: currentResultsPerPage,
+      handleOnChange: setCurrentResultsPerPage,
+      ref: selectLabelRef.current,
+    };
+  };
+
+  const items = useMemo(() => {
+    let content: PaginationListItemButtonProps[] = [];
+    let countingDots = false;
+    content.push({
+      children: previousLabel,
+      arrow:'left',
+      onClick: () => currentPage !== 1 && setCurrentPage(currentPage - 1),
+      active: currentPage !== 1,
+    });
+    for (let page = 1; page <= totalPages; page++) {
+      if (
+        page <= 1 ||
+        page >= totalPages ||
+        (page <= currentPage + 1 && page >= currentPage - 1)
+      ) {
+        if (countingDots) {
+          countingDots = false;
+        }
+        console.log(page, currentPage);
+        
+        content.push({
+          children: page,
+          variant: 'number',
+          onClick: () => setCurrentPage(page),
+          isCurrentPage: currentPage === page,
+        });
+      } else {
+        if (!countingDots) {
+          countingDots = true;
+          content.push({
+            variant: 'dots',
+          });
+        }
+      }
+    }
+    content.push({
+      children: nextLabel,
+      arrow:'right',
+      onClick: () => currentPage !== totalPages && setCurrentPage(currentPage + 1),
+      active: currentPage !== totalPages,
+    });
+    return content;
+  }, [currentPage, totalPages]);
+
+  return {
+    registerPaginationLabel,
+    registerPaginationResultsPerPageSelect,
+    items,
+    currentPage,
+    setCurrentPage,
+    offset: (currentPage - 1) * currentResultsPerPage,
+    limit: currentResultsPerPage + 1,
+    setTotal
+  };
+};
+
+export default usePagination;

package/src/navigation/Pagination/index.tsx

@@ -17,6 +17,22 @@ export interface PaginationLabelProps extends PaginationLabelContainerProps {
    */
   total: number;
 }
+export interface PaginationResultsPerPageSelectProps
+  extends LabelContainerProps {
+  resultsPerPageOptions: number[];
+  currentResultsPerPage: number;
+  handleOnChange: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export interface PaginationListItemButtonProps {
+  arrow?: 'left' | 'right';
+  children?: string | number;
+  variant?: 'number' | 'dots';
+  active?: boolean;
+  onClick?: (e: any) => void;
+  isCurrentPage?: boolean;
+  tabIndex?: number;
+}
 /**
  * PaginationLabel component is used for placing the pagination results label.
  */
@@ -36,10 +52,77 @@ export const PaginationLabel = React.forwardRef<
   );
 });
 
+export const PaginationResultsPerPageSelect = React.forwardRef<
+  HTMLLabelElement,
+  PaginationResultsPerPageSelectProps
+>(function PaginationResultsPerPageSelect(
+  { resultsPerPageOptions, currentResultsPerPage, handleOnChange, children },
+  ref: React.Ref<HTMLLabelElement>
+) {
+  return (
+    <LabelContainer ref={ref}>
+      {children}
+      <SelectContainer
+        dense
+        value={currentResultsPerPage}
+        onChange={(e) => {
+          handleOnChange(Number(e.target.value));
+        }}
+      >
+        {resultsPerPageOptions.map((option) => (
+          <SelectOption key={option}>{option}</SelectOption>
+        ))}
+      </SelectContainer>
+    </LabelContainer>
+  );
+});
+
+export const PaginationListItemButton = React.forwardRef<
+  HTMLLIElement,
+  PaginationListItemButtonProps
+>(function PaginationListItemButton(
+  { onClick, arrow, children, variant, active, isCurrentPage, tabIndex },
+  ref: React.Ref<HTMLLIElement>
+) {
+  return (
+    <>
+      <PaginationListItem
+        tabIndex={tabIndex}
+        active={active} //disabled
+        currentPage={isCurrentPage}
+        ref={ref}
+        variant={variant}
+      >
+        {isCurrentPage ? (
+          children
+        ) : (
+          <Button variant="link" onClick={onClick}>
+            {arrow === 'left' && <ChevronIcon direction={arrow} />}
+            {children}
+            {arrow === 'right' && <ChevronIcon direction={arrow} />}
+          </Button>
+        )}
+      </PaginationListItem>
+    </>
+  );
+});
+
 export * from '@digigov/react-core/Pagination';
 export * from '@digigov/react-core/PaginationList';
 export * from '@digigov/react-core/PaginationListItem';
+export * from '@digigov/ui/navigation/Pagination/hooks';
+export * from '@digigov/ui/navigation/Pagination/auto';
 export { PaginationLabelContainer };
 
 import Pagination from '@digigov/react-core/Pagination';
+import LabelContainer, {
+  LabelContainerProps,
+} from '@digigov/ui/form/LabelContainer';
+import SelectContainer, {
+  SelectOption,
+} from '@digigov/ui/form/SelectContainer';
+import PaginationListItem, {
+} from '@digigov/react-core/PaginationListItem';
+import Button from '@digigov/ui/form/Button';
+import ChevronIcon from '@digigov/react-icons/ChevronIcon';
 export default Pagination;

package/src/navigation/Tabs/Tabs.stories.js

@@ -1,11 +1,13 @@
-import Tabs from '@digigov/ui/navigation/Tabs';
+import TabsBase from '@digigov/ui/navigation/Tabs';
 export default {
   title: 'Digigov UI/navigation/Tabs',
   tags: ['Experimental'],
   description:
     'The tabs component lets users navigate between related sections of content, displaying one section at a time.',
   link: 'https://guide.services.gov.gr/docs/components/tabs',
-  component: Tabs,
+  component: TabsBase,
   displayName: 'Tabs',
 };
 export * from '@digigov/ui/navigation/Tabs/__stories__/Default';
+export * from '@digigov/ui/navigation/Tabs/__stories__/Dense';
+export * from '@digigov/ui/navigation/Tabs/__stories__/Auto';

package/src/navigation/Tabs/Tabs.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
               }
             }
           ],

package/src/navigation/Tabs/__stories__/Auto.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  SummaryListItemAction,
+} from '@digigov/ui/content/SummaryList';
+import { Link } from '@digigov/ui/navigation/Link';
+import {
+  TabsAuto,
+  TabsHeading,
+  TabsList,
+  TabsListItem,
+  TabsPanel,
+} from '@digigov/ui/navigation/Tabs';
+
+import { Heading } from '@digigov/ui/typography/Heading';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export function Auto() {
+  return (
+    <TabsAuto defaultOpen={'b'}>
+      <TabsHeading size='md'>Περιεχόμενα</TabsHeading>
+      <TabsList>
+        <TabsListItem id="a">Στοιχεία πολίτη</TabsListItem>
+        <TabsListItem id="b">Yποθέσεις</TabsListItem>
+      </TabsList>
+      <TabsPanel tab='a'>
+        <Heading size="md" element="h3">
+          Στοιχεία πολίτη
+        </Heading>
+        <SummaryList>
+          <SummaryListItem>
+            <SummaryListItemKey>Όνομα</SummaryListItemKey>
+            <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
+            <SummaryListItemAction>
+              {' '}
+              <Link href="#">
+                Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
+              </Link>
+            </SummaryListItemAction>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ημ. Γέννησης</SummaryListItemKey>
+            <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
+            <SummaryListItemValue>6941234567</SummaryListItemValue>
+            <SummaryListItemAction>
+              {' '}
+              <Link>
+                {' '}
+                Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden>
+              </Link>
+            </SummaryListItemAction>
+          </SummaryListItem>
+        </SummaryList>
+      </TabsPanel>
+      <TabsPanel tab="b">
+        <Heading size="md" element="h3">
+          Yποθέσεις
+        </Heading>
+        Περιεχόμενα υποθέσεων
+      </TabsPanel>
+    </TabsAuto>
+  );
+}
+
+export default Auto;