@digigov/ui 2.0.0-85c27c19 → 2.0.0-aefd0709

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/index.tsx

@@ -6,5 +6,4 @@ 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 } from '@digigov/react-core/PaginationLabelContainer';

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,14 +8,12 @@ import {
   SummaryListItemAction,
 } from '@digigov/ui/content/SummaryList';
 import { Link } from '@digigov/ui/navigation/Link';
+import { TabsHeading, TabsList } from '@digigov/ui/navigation/Tabs';
 import {
   TabsAuto,
-  TabsHeading,
-  TabsList,
   TabsListItem,
   TabsPanel,
-} from '@digigov/ui/navigation/Tabs';
-
+} 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__/Default.tsx

@@ -11,10 +11,9 @@ import {
   Tabs,
   TabsHeading,
   TabsList,
-  TabsListItem,
-  TabsPanel,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
+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

@@ -12,11 +12,9 @@ import {
   Tabs,
   TabsHeading,
   TabsList,
-  TabsListItem,
-  TabsPanel,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
-
+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,26 +13,18 @@ import {
   SummaryListItemValue,
   SummaryListItemAction,
 } from '@digigov/ui/content/SummaryList';
+import { Hidden } from '@digigov/ui/layouts/Hidden';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
   Tabs,
   TabsHeading,
   TabsList,
-  TabsListItem,
-  TabsPanel,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
+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' });
@@ -138,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/index.tsx

@@ -6,6 +6,5 @@ export * from '@digigov/react-core/TabsList';
 export * from '@digigov/react-core/TabsListItemBase';
 export * from '@digigov/react-core/TabsPanelBase';
 export * from '@digigov/react-core/TabsHeading';
-export * from '@digigov/ui/navigation/Tabs/auto';
 
 export default Tabs;

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();
 });
-