@digigov/ui 2.0.0-298cfc51 → 2.0.0-2a26e869

package/src/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx

@@ -13,41 +13,41 @@ import {
 } from '@digigov/ui/navigation/NavList';
 
 const links = [
-  { "name": "home", "href": "#home", "label": "Αρχική" },
+  { name: 'home', href: '#home', label: 'Αρχική' },
   {
-    "name": "educational",
-    "label": "Εκπαιδευτικό υλικό",
-    "subMenuHeading": "Εκπαιδευτικό υλικό",
-    "subMenu": [
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    subMenuHeading: 'Εκπαιδευτικό υλικό',
+    subMenu: [
       {
-        "name": "elearning",
-        "href": "#elearning",
-        "label": "Εκπαιδευτική πλατφόρμα"
+        name: 'elearning',
+        href: '#elearning',
+        label: 'Εκπαιδευτική πλατφόρμα',
       },
       {
-        "name": "videos",
-        "href": "#videos",
-        "label": "Βίντεο"
+        name: 'videos',
+        href: '#videos',
+        label: 'Βίντεο',
       },
       {
-        "name": "presentations",
-        "href": "#presentations",
-        "label": "Παρουσιάσεις"
+        name: 'presentations',
+        href: '#presentations',
+        label: 'Παρουσιάσεις',
       },
       {
-        "name": "promoting",
-        "href": "#promoting",
-        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+        name: 'promoting',
+        href: '#promoting',
+        label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
       },
       {
-        "name": "other-texts",
-        "href": "#other-texts",
-        "label": "Άλλα κείμενα"
-      }
-    ]
+        name: 'other-texts',
+        href: '#other-texts',
+        label: 'Άλλα κείμενα',
+      },
+    ],
   },
-  { "name": "news", "href": "#news", "label": "Νέα" }
-]
+  { name: 'news', href: '#news', label: 'Νέα' },
+];
 
 export const HorizontalWithoutDrawer = () => {
   const layout = 'horizontal';

package/src/navigation/NavList/__stories__/NavListWithoutNav.tsx

@@ -7,21 +7,21 @@ import {
 
 const links = [
   {
-    "name": "home",
-    "href": "#home",
-    "label": "Αρχική"
+    name: 'home',
+    href: '#home',
+    label: 'Αρχική',
   },
   {
-    "name": "educational",
-    "label": "Εκπαιδευτικό υλικό",
-    "href": "#educational"
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    href: '#educational',
   },
   {
-    "name": "news",
-    "href": "#news",
-    "label": "Νέα"
-  }
-]
+    name: 'news',
+    href: '#news',
+    label: 'Νέα',
+  },
+];
 
 export const NavListWithoutNav = () => {
   const layout = 'vertical';

package/src/navigation/NavList/__stories__/UsingNavListAuto.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { BurgerIcon } from '@digigov/ui/icons';
 import { Button } from '@digigov/ui/form/Button';
+import { BurgerIcon } from '@digigov/ui/icons';
 import { NavListAuto } from '@digigov/ui/navigation/NavList';
 
 const links = [

package/src/navigation/NavList/__stories__/VerticalWithoutDrawer.tsx

@@ -13,41 +13,41 @@ import {
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 
 const links = [
-  { "name": "home", "href": "#home", "label": "Αρχική" },
+  { name: 'home', href: '#home', label: 'Αρχική' },
   {
-    "name": "educational",
-    "label": "Εκπαιδευτικό υλικό",
-    "subMenuHeading": "Εκπαιδευτικό υλικό",
-    "subMenu": [
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    subMenuHeading: 'Εκπαιδευτικό υλικό',
+    subMenu: [
       {
-        "name": "elearning",
-        "href": "#elearning",
-        "label": "Εκπαιδευτική πλατφόρμα"
+        name: 'elearning',
+        href: '#elearning',
+        label: 'Εκπαιδευτική πλατφόρμα',
       },
       {
-        "name": "videos",
-        "href": "#videos",
-        "label": "Βίντεο"
+        name: 'videos',
+        href: '#videos',
+        label: 'Βίντεο',
       },
       {
-        "name": "presentations",
-        "href": "#presentations",
-        "label": "Παρουσιάσεις"
+        name: 'presentations',
+        href: '#presentations',
+        label: 'Παρουσιάσεις',
       },
       {
-        "name": "promoting",
-        "href": "#promoting",
-        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+        name: 'promoting',
+        href: '#promoting',
+        label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
       },
       {
-        "name": "other-texts",
-        "href": "#other-texts",
-        "label": "Άλλα κείμενα"
-      }
-    ]
+        name: 'other-texts',
+        href: '#other-texts',
+        label: 'Άλλα κείμενα',
+      },
+    ],
   },
-  { "name": "news", "href": "#news", "label": "Νέα" }
-]
+  { name: 'news', href: '#news', label: 'Νέα' },
+];
 
 export const VerticalWithoutDrawer = () => {
   const layout = 'vertical';

package/src/navigation/NavList/__stories__/WithBadge.tsx

@@ -8,22 +8,22 @@ import {
 
 const links = [
   {
-    "name": "home",
-    "href": "#home",
-    "label": "Αρχική"
+    name: 'home',
+    href: '#home',
+    label: 'Αρχική',
   },
   {
-    "name": "educational",
-    "label": "Εκπαιδευτικό υλικό",
-    "href": "#educational"
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    href: '#educational',
   },
   {
-    "name": "news",
-    "href": "#news",
-    "label": "Νέα",
-    "badge": "2"
-  }
-]
+    name: 'news',
+    href: '#news',
+    label: 'Νέα',
+    badge: '2',
+  },
+];
 
 export const WithBadge = () => {
   const { registerNavItem } = useNavList();

package/src/navigation/NavList/hooks/useTogglableNav.tsx

@@ -68,7 +68,7 @@ export function useTogglableNav({
           );
         }
 
-        setOpened((_) => ({
+        setOpened(() => ({
           ...totalKeys.reduce((acc, cur) => {
             acc[cur] = cur === currentKey ? !selected : true;
             return acc;
@@ -165,7 +165,7 @@ export function useTogglableNav({
       ?.getAttribute('aria-orientation');
     const key = e.target.getAttribute('aria-controls');
     const keys = Object.entries(registered.current).map(
-      ([entryKey, _]) => entryKey
+      ([entryKey]) => entryKey
     );
 
     const handleArrowRight = () => {

package/src/navigation/Pagination/Pagination.stories.js

@@ -3,8 +3,7 @@ export default {
   title: 'Digigov UI/navigation/Pagination',
   description:
     'Use the pagination component to let users browse through a long list.',
-  link:
-    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/pagination',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/pagination',
   component: Pagination,
   displayName: 'Pagination',
 };

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/icons';
-
 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/icons';
 
 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/icons';
-
 export const WithResultsPerPage = () => (
   <I18NProvider t={(str: string) => str}>
     <Pagination>

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