@digigov/ui 1.0.0-8ae63a77 → 1.0.0-8b33e4c8

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;

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

@@ -1,5 +1,5 @@
-import React from 'react';
 
+import React from 'react';
 import {
   SummaryList,
   SummaryListItem,
@@ -16,22 +16,22 @@ import {
   TabsPanel,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
-
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export function Default() {
-  const { register, opened, panel } = useTabs();
-
+  const { register, panel } = useTabs({ defaultOpen: 'a' });
   return (
     <Tabs>
       <TabsHeading size='md'>Περιεχόμενα</TabsHeading>
       <TabsList>
-        <TabsListItem {...register('citizen')} open={Object.keys(opened).length === 0 || opened['citizen']}>Στοιχεία πολίτη</TabsListItem>
-        <TabsListItem {...register('cases')}>Οι υποθέσεις τους</TabsListItem>
-        <TabsListItem {...register('history')}>Ιστορικό</TabsListItem>
+        <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
+        <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
+        <TabsListItem {...register('c')}>Μηνύματα</TabsListItem>
+        <TabsListItem {...register('d')}>Ιστορικό</TabsListItem>
       </TabsList>
-      <TabsPanel {...panel('citizen')} active={Object.keys(opened).length === 0 || opened['citizen']}>
+      <TabsPanel {...panel('a')}>
         <Heading size="md" element="h3">
           Στοιχεία πολίτη
         </Heading>
@@ -40,6 +40,7 @@ export function Default() {
             <SummaryListItemKey>Όνομα</SummaryListItemKey>
             <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
             <SummaryListItemAction>
+              {' '}
               <Link href="#">
                 Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
               </Link>
@@ -53,27 +54,54 @@ export function Default() {
             <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
             <SummaryListItemValue>6941234567</SummaryListItemValue>
             <SummaryListItemAction>
+              {' '}
               <Link>
+                {' '}
                 Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden>
               </Link>
             </SummaryListItemAction>
           </SummaryListItem>
         </SummaryList>
       </TabsPanel>
-      <TabsPanel {...panel('cases')}>
+      <TabsPanel {...panel('b')}>
         <Heading size="md" element="h3">
-          Οι υποθέσεις τους
+          Yποθέσεις
         </Heading>
         Περιεχόμενα υποθέσεων
       </TabsPanel>
-      <TabsPanel {...panel('history')}>
+      <TabsPanel {...panel('c')}>
+        <Heading size="md" element="h3">
+          Μηνύματα
+        </Heading>
+        {/* fill a random paragraph */}
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </Paragraph>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </Paragraph>
+
+      </TabsPanel>
+      <TabsPanel {...panel('d')}>
         <Heading size="md" element="h3">
           Ιστορικό
         </Heading>
-        Περιεχόμενο ιστορικού
+        {/* fill a random paragraph */}
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </Paragraph>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </Paragraph>
+
       </TabsPanel>
     </Tabs>
   );
 }
 
 export default Default;
+

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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  SummaryListItemAction,
+} from '@digigov/ui/content/SummaryList';
+import { Link } from '@digigov/ui/navigation/Link';
+import {
+  Tabs,
+  TabsHeading,
+  TabsList,
+  TabsListItem,
+  TabsPanel,
+  useTabs,
+} from '@digigov/ui/navigation/Tabs';
+
+import { Heading } from '@digigov/ui/typography/Heading';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export function Dense() {
+  const { register, panel } = useTabs();
+  return (
+    <Tabs dense>
+      <TabsHeading size="md">Περιεχόμενα</TabsHeading>
+      <TabsList>
+        <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
+        <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
+      </TabsList>
+      <TabsPanel {...panel('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 {...panel('b')}>
+        <Heading size="md" element="h3">
+          Yποθέσεις
+        </Heading>
+        Περιεχόμενα υποθέσεων
+      </TabsPanel>
+    </Tabs>
+  );
+}
+
+export default Dense;