@digigov/ui 2.0.0-113e6661 → 2.0.0-2177f152

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

@@ -1,11 +1,8 @@
 import React from 'react';
 import Card from '@digigov/ui/content/Card';
-import Container from '@digigov/ui/layouts/Basic';
-import Main from '@digigov/ui/layouts/Basic';
+import Container from '@digigov/ui/layouts/Basic/Container';
 import Grid from '@digigov/ui/layouts/Grid';
-import {
-  Pagination,
-} from '@digigov/ui/navigation/Pagination';
+import { Pagination } from '@digigov/ui/navigation/Pagination';
 import {
   PaginationContextAuto,
   PaginationLabelAuto,
@@ -20,21 +17,26 @@ for (let i = 0; i < 78; i++) {
   fetchedData.push({ id: i });
 }
 
-const MyContainer = ({ data }) => {
+const DataGrid = ({ data }) => {
   const { offset, limit } = usePaginationContext();
 
-  return data
-    .filter((item, index) => {
-      index > offset && index < offset + limit;
-      console.log(item);
-    })
-    .map((item, index) => {
-      return (
-        <Grid item xs={4} md={2} key={index}>
-          <Card variant="border"> {item.id}</Card>
-        </Grid>
-      );
-    });
+  return (
+    <Grid container spacing={4} mb={{ xs: 4, md: 8 }}>
+      {data
+        .filter((_item, index) => {
+          return index > offset && index < offset + limit;
+        })
+        .map((item, index) => {
+          return (
+            <Grid item xs={4} md={2} key={index}>
+              <Card variant="border" borderColor="light" dense>
+                {item.id}
+              </Card>
+            </Grid>
+          );
+        })}
+    </Grid>
+  );
 };
 
 export const Auto = () => {
@@ -45,19 +47,15 @@ export const Auto = () => {
       previousLabel="Προηγούμενη"
       nextLabel="Επόμενη"
     >
-      <Container>
-        <Main>
-          <Grid container spacing={4}>
-            <MyContainer data={fetchedData} />
-          </Grid>
-          <Pagination>
-            <PaginationLabelAuto />
-            <PaginationResultsPerPageSelectAuto>
-              Αποτελέσματα ανά σελίδα
-            </PaginationResultsPerPageSelectAuto>
-            <PaginationListAuto />
-          </Pagination>
-        </Main>
+      <Container grid={false}>
+        <DataGrid data={fetchedData} />
+        <Pagination>
+          <PaginationLabelAuto />
+          <PaginationResultsPerPageSelectAuto>
+            Αποτελέσματα ανά σελίδα
+          </PaginationResultsPerPageSelectAuto>
+          <PaginationListAuto />
+        </Pagination>
       </Container>
     </PaginationContextAuto>
   );

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

@@ -6,6 +6,7 @@ import {
   SelectOption,
 } from '@digigov/ui/form/SelectContainer';
 import { I18NProvider } from '@digigov/ui/i18n';
+import { ChevronIcon } from '@digigov/ui/icons';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
   Pagination,
@@ -14,8 +15,6 @@ import {
   PaginationLabel,
 } from '@digigov/ui/navigation/Pagination';
 
-import { ChevronIcon } from '@digigov/ui/utils/SvgIcon';
-
 export const PaginationWithSmallFont = () => (
   <div className="example">
     <I18NProvider t={(str: string) => str}>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { I18NProvider } from '@digigov/ui/i18n';
+import { ChevronIcon } from '@digigov/ui/icons';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
@@ -9,7 +10,6 @@ import {
   PaginationListItem,
   PaginationLabel,
 } from '@digigov/ui/navigation/Pagination';
-import { ChevronIcon } from '@digigov/ui/utils/SvgIcon';
 
 export const WithInactiveValues = () => (
   <I18NProvider t={(str: string) => str}>

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

@@ -6,6 +6,7 @@ import {
   SelectOption,
 } from '@digigov/ui/form/SelectContainer';
 import { I18NProvider } from '@digigov/ui/i18n';
+import { ChevronIcon } from '@digigov/ui/icons';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
   Pagination,
@@ -14,8 +15,6 @@ import {
   PaginationLabel,
 } from '@digigov/ui/navigation/Pagination';
 
-import { ChevronIcon } from '@digigov/ui/utils/SvgIcon';
-
 export const WithResultsPerPage = () => (
   <I18NProvider t={(str: string) => str}>
     <Pagination>

package/src/navigation/Pagination/doc.mdx

@@ -0,0 +1,32 @@
+---
+id: pagination
+title: Pagination
+---
+
+## How to use
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/Default.tsx" />
+
+### With inactive values
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues.tsx" />
+
+### With small fonts
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx" />
+
+### With results per page
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [
+  "Pagination",
+  "PaginationLabel",
+  "PaginationList",
+  "PaginationListItem",
+  ]} /> 

package/src/navigation/Pagination/index.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Auto } from '@digigov/ui/navigation/Pagination/__stories__/Auto';
 import { Default } from '@digigov/ui/navigation/Pagination/__stories__/Default';
 import { PaginationSmall } from '@digigov/ui/navigation/Pagination/__stories__/PaginationSmall';
@@ -8,37 +7,39 @@ import { PaginationWithSmallFont } from '@digigov/ui/navigation/Pagination/__sto
 import { WithHook } from '@digigov/ui/navigation/Pagination/__stories__/WithHook';
 import { WithInactiveValues } from '@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues';
 import { WithResultsPerPage } from '@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Pagination variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Auto">
-      <Auto />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="PaginationSmall">
-      <PaginationSmall />
-    </TestVariant>
-    <TestVariant title="PaginationWithSmallFont">
-      <PaginationWithSmallFont />
-    </TestVariant>
-    <TestVariant title="WithHook">
-      <WithHook />
-    </TestVariant>
-    <TestVariant title="WithInactiveValues">
-      <WithInactiveValues />
-    </TestVariant>
-    <TestVariant title="WithResultsPerPage">
-      <WithResultsPerPage />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Auto">
+        <Auto />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="PaginationSmall">
+        <PaginationSmall />
+      </TestVariant>
+      <TestVariant title="PaginationWithSmallFont">
+        <PaginationWithSmallFont />
+      </TestVariant>
+      <TestVariant title="WithHook">
+        <WithHook />
+      </TestVariant>
+      <TestVariant title="WithInactiveValues">
+        <WithInactiveValues />
+      </TestVariant>
+      <TestVariant title="WithResultsPerPage">
+        <WithResultsPerPage />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/Pagination/interaction.test.tsx

@@ -4,14 +4,14 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/navigation/Pagination/__stories__/Default';
 
 test('renders the Default Hover and click no3', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>nav:nth-child(1)>ul>li:nth-child(4)>a").hover();
- await page.locator("#root>nav:nth-child(1)>ul>li:nth-child(4)>a").click();
+  await page.locator('#root>nav:nth-child(1)>ul>li:nth-child(4)>a').hover();
+  await page.locator('#root>nav:nth-child(1)>ul>li:nth-child(4)>a').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/SkipLink/index.test.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/navigation/SkipLink/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All SkipLink variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -8,11 +8,7 @@ import {
   SummaryListItemAction,
 } from '@digigov/ui/content/SummaryList';
 import { Link } from '@digigov/ui/navigation/Link';
-import {
-  TabsHeading,
-  TabsList,
-
-} from '@digigov/ui/navigation/Tabs';
+import { TabsHeading, TabsList } from '@digigov/ui/navigation/Tabs';
 import {
   TabsAuto,
   TabsListItem,

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

@@ -13,10 +13,7 @@ import {
   TabsList,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
-import {
-  TabsListItem,
-  TabsPanel,
-} from '@digigov/ui/navigation/Tabs/auto';
+import { TabsListItem, TabsPanel } from '@digigov/ui/navigation/Tabs/auto';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

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

@@ -14,10 +14,7 @@ import {
   TabsList,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
-import {
-  TabsListItem,
-  TabsPanel,
-} from '@digigov/ui/navigation/Tabs/auto';
+import { TabsListItem, TabsPanel } from '@digigov/ui/navigation/Tabs/auto';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 

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

@@ -1,4 +1,11 @@
 import React from 'react';
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
 import {
   SummaryList,
   SummaryListItem,
@@ -6,6 +13,7 @@ import {
   SummaryListItemValue,
   SummaryListItemAction,
 } from '@digigov/ui/content/SummaryList';
+import { Hidden } from '@digigov/ui/layouts/Hidden';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
   Tabs,
@@ -13,21 +21,10 @@ import {
   TabsList,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
-import {
-  TabsListItem,
-  TabsPanel,
-} from '@digigov/ui/navigation/Tabs/auto';
+import { TabsListItem, TabsPanel } from '@digigov/ui/navigation/Tabs/auto';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
-import { Hidden } from '@digigov/ui/layouts/Hidden';
-import {
-  Accordion,
-  AccordionSection,
-  AccordionSectionContent,
-  AccordionSectionSummary,
-  AccordionSectionSummaryHeading,
-} from '@digigov/ui/content/Accordion';
 
 export function UsingAccordion() {
   const { register, panel } = useTabs({ defaultOpen: 'a' });
@@ -140,7 +137,7 @@ export function UsingAccordion() {
         </Tabs>
       </Hidden>
       <Hidden mdUp>
-        <Accordion summaryColor='secondary' dense>
+        <Accordion summaryColor="secondary" dense>
           <AccordionSection open>
             <AccordionSectionSummary>
               <AccordionSectionSummaryHeading aria-controls="content1">

package/src/navigation/Tabs/doc.mdx

@@ -0,0 +1,47 @@
+---
+id: tabs
+title: Tabs
+---
+
+import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
+
+# Tabs
+
+## How to use
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/Default.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/Dense.tsx" />
+
+### Using Accordion
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+
+### Auto
+
+This is an implementation of the Tabs collection, encapsulated within a `TabsContext` provider, designed to facilitate and manage Tabs functionality effectively.
+
+<PhaseBanner>
+    <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
+</PhaseBanner>
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Tabs
+implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) section.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["Tabs",
+  "TabsHeading",
+  "TabsList",
+  "TabsListItem",
+  "TabsPanel",]} /> 
+

package/src/navigation/Tabs/hooks.ts

@@ -1,5 +1,5 @@
-import { useScreenSize } from '@digigov/ui/utils/hooks/useScreen';
 import React, { useState, useRef, useCallback } from 'react';
+import { useScreenSize } from '@digigov/ui/utils/hooks/useScreen';
 
 export type TabId = string | number | null;
 
@@ -8,9 +8,7 @@ export interface UseTabsProps {
 }
 
 export interface UseTabsReturn {
-  register: (
-    id: TabId
-  ) => {
+  register: (id: TabId) => {
     role: string;
     href: string;
     id: string;
@@ -21,9 +19,7 @@ export interface UseTabsReturn {
     onKeyDown: (e: React.KeyboardEvent) => void;
     ref?: React.RefObject<HTMLAnchorElement>;
   };
-  panel: (
-    id: TabId
-  ) => {
+  panel: (id: TabId) => {
     tab: TabId;
     role: string;
     'aria-labelledby': string;
@@ -79,12 +75,11 @@ export const useTabs = ({
         'aria-controls': `panel-${id}`,
         tabIndex: currentOpen === id ? 0 : -1,
         onClick: (e) => {
-
           // If the screen is mobile, we don't want to prevent the default behavior of the anchor tag,
           // which is to navigate to the href.
-          if (screenSize != 'xs' && screenSize !='sm') {
+          if (screenSize != 'xs' && screenSize != 'sm') {
             e.preventDefault();
-          }        
+          }
           open(id);
         },
         onKeyDown: (e: React.KeyboardEvent) => {

package/src/navigation/Tabs/index.test.tsx

@@ -1,32 +1,33 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Auto } from '@digigov/ui/navigation/Tabs/__stories__/Auto';
 import { Default } from '@digigov/ui/navigation/Tabs/__stories__/Default';
 import { Dense } from '@digigov/ui/navigation/Tabs/__stories__/Dense';
 import { UsingAccordion } from '@digigov/ui/navigation/Tabs/__stories__/UsingAccordion';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Tabs variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Auto">
-      <Auto />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="UsingAccordion">
-      <UsingAccordion />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Auto">
+        <Auto />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="UsingAccordion">
+        <UsingAccordion />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/Tabs/interaction.test.tsx

@@ -4,14 +4,14 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/navigation/Tabs/__stories__/Default';
 
 test('renders the Default Click second tab', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>ul>li:nth-child(2)>a").hover();
- await page.locator("#root>div>ul>li:nth-child(2)>a").click();
+  await page.locator('#root>div>ul>li:nth-child(2)>a').hover();
+  await page.locator('#root>div>ul>li:nth-child(2)>a').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-