@digigov/ui 2.0.0-8e254888 → 2.0.0-a32ad9b2

package/src/app/Footer/Footer.stories.jsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import {
+  Footer,
+  FooterContainer,
+  FooterInfo,
+  FooterInfoSection,
+  FooterContent,
+  FooterNavigation,
+  FooterNavigationSection,
+  FooterHeading,
+  FooterList,
+  FooterListItem,
+  FooterLink,
+  FooterContentLogos,
+  FooterImage,
+} from '@digigov/ui/app/Footer';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import govgrBlueLogo from '@digigov/ui/govgr/images/govgr-logo-blue-base64';
+import mineduBlackLogo from '@digigov/ui/govgr/images/minedu-logo-black-base64';
+import SectionBreak from '@digigov/ui/layouts/SectionBreak';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
+
+export default {
+  title: 'Digigov UI/app/Footer',
+  description:
+    'The footer provides copyright, licensing and other information about your service and department.',
+  link: 'https://guide.services.gov.gr/docs/components/footer',
+  defaultWidth: 'lg',
+  component: Footer,
+  displayName: 'Footer',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Footer>
+        <FooterContainer>
+          {args.withSecondaryNav && (
+            <>
+              <FooterNavigation>
+                <FooterNavigationSection aria-label="footer navigation section">
+                  <FooterHeading>Επιλογές</FooterHeading>
+                  <FooterList columns={2}>
+                    <FooterListItem>
+                      <FooterLink href="#">Υπηρεσίες</FooterLink>
+                    </FooterListItem>
+                    <FooterListItem>
+                      <FooterLink href="#">Φορείς</FooterLink>
+                    </FooterListItem>
+                    <FooterListItem>
+                      <FooterLink href="#">Αρχές</FooterLink>
+                    </FooterListItem>
+                    <FooterListItem>
+                      <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
+                    </FooterListItem>
+                    <FooterListItem>
+                      <FooterLink href="#">Όροι χρήσης</FooterLink>
+                    </FooterListItem>
+                    <FooterListItem>
+                      <FooterLink href="#">Ιδιωτικό απόρρητο</FooterLink>
+                    </FooterListItem>
+                  </FooterList>
+                </FooterNavigationSection>
+                <FooterNavigationSection aria-label="footer navigation section">
+                  <FooterHeading>Εξωτερικές Υπηρεσίες</FooterHeading>
+                  <FooterList>
+                    <FooterListItem>
+                      <FooterLink href="#">ΕΜΔΔ - ΜΙΤΟΣ</FooterLink>
+                    </FooterListItem>
+                    <FooterListItem>
+                      <FooterLink href="#">EUGO</FooterLink>
+                    </FooterListItem>
+                  </FooterList>
+                </FooterNavigationSection>
+              </FooterNavigation>
+              <SectionBreak visible={false} size="md" />
+            </>
+          )}
+          <FooterInfo>
+            <FooterInfoSection grow aria-label="footer info section">
+              <FooterContent>
+                {args.withHorizontalNav && (
+                  <>
+                    <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
+                    <FooterList layout="horizontal">
+                      <FooterListItem>
+                        <FooterLink href="#">Όροι και Προϋποθέσεις</FooterLink>
+                      </FooterListItem>
+                      <FooterListItem>
+                        <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
+                      </FooterListItem>
+                    </FooterList>
+                  </>
+                )}
+                {args.withExtraLogos && (
+                  <FooterContentLogos>
+                    <FooterImage src={govgrBlueLogo} />
+                    <FooterImage src={mineduBlackLogo} />
+                  </FooterContentLogos>
+                )}
+                {args.withExtraText && (
+                  <Copyright>
+                    Η άντληση των απαραίτητων στοιχείων πραγματοποιείται μέσω
+                    του{' '}
+                    <Link href="https://gsis.gr/dimosia-dioikisi/ked">
+                      Κέντρου Διαλειτουργικότητας
+                    </Link>{' '}
+                    της{' '}
+                    <Link href="https://www.gsis.gr/">
+                      Γενικής Γραμματείας Πληροφοριακών Συστημάτων Δημόσιας
+                      Διοίκησης
+                    </Link>
+                    .
+                  </Copyright>
+                )}
+                <Copyright>
+                  {`Υλοποίηση από το `}
+                  <Link href="https://grnet.gr/" target="_blank">
+                    ΕΔΥΤΕ
+                    <VisuallyHidden>
+                      {` (ανοίγει σε καινούρια καρτέλα)`}
+                    </VisuallyHidden>
+                  </Link>
+                  {` για το `}
+                  <Link href="https://mindigital.gr/" target="_blank">
+                    Υπουργείο Ψηφιακής Διακυβέρνησης
+                    <VisuallyHidden>
+                      {` (ανοίγει σε καινούρια καρτέλα)`}
+                    </VisuallyHidden>
+                  </Link>
+                  {` και για το `}
+                  <Link href="https://www.minedu.gov.gr/" target="_blank">
+                    Υπουργείο Παιδείας και Θρησκευμάτων
+                    <VisuallyHidden>
+                      {` (ανοίγει σε καινούρια καρτέλα)`}
+                    </VisuallyHidden>
+                  </Link>
+                </Copyright>
+              </FooterContent>
+            </FooterInfoSection>
+            <FooterInfoSection>
+              <HellenicRepublicLogo />
+            </FooterInfoSection>
+          </FooterInfo>
+        </FooterContainer>
+      </Footer>
+    );
+  },
+  args: {
+    withSecondaryNav: false,
+    withHorizontalNav: false,
+    withExtraLogos: false,
+    withExtraText: false,
+  },
+  argTypes: {
+    withSecondaryNav: {
+      control: { type: 'boolean' },
+    },
+    withHorizontalNav: {
+      control: { type: 'boolean' },
+    },
+    withExtraLogos: {
+      control: { type: 'boolean' },
+    },
+    withExtraText: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+export { Default } from '@digigov/ui/app/Footer/__stories__/Default';
+export { FooterWithLogo } from '@digigov/ui/app/Footer/__stories__/FooterWithLogo';
+export { FooterWithLink } from '@digigov/ui/app/Footer/__stories__/FooterWithLink';
+export { DefaultCopyright } from '@digigov/ui/app/Footer/__stories__/DefaultCopyright';
+export { FooterWithSecondaryNavigation } from '@digigov/ui/app/Footer/__stories__/FooterWithSecondaryNavigation';
+export { FooterWithText } from '@digigov/ui/app/Footer/__stories__/FooterWithText';
+export { FooterAllInclusive } from '@digigov/ui/app/Footer/__stories__/FooterAllInclusive';
+export { YearCopyright } from '@digigov/ui/app/Footer/__stories__/YearCopyright';

package/src/app/Footer/FooterLink.tsx

@@ -0,0 +1,20 @@
+export * from '@digigov/react-core/FooterLinkBase';
+import React from 'react';
+import {
+  FooterLinkBase,
+  FooterLinkBaseProps,
+} from '@digigov/react-core/FooterLinkBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface FooterLinkProps extends FooterLinkBaseProps {}
+
+export const FooterLink = React.forwardRef<HTMLAnchorElement, FooterLinkProps>(
+  function FooterLink({ children, ...props }, ref) {
+    return (
+      <FooterLinkBase as={Link} ref={ref} {...props}>
+        {children}
+      </FooterLinkBase>
+    );
+  }
+);
+export default FooterLink;

package/src/app/Footer/index.test.tsx

@@ -42,6 +42,10 @@ test('renders the All Footer variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/Footer/index.tsx

@@ -4,13 +4,13 @@ export * from '@digigov/react-core/FooterContent';
 export * from '@digigov/react-core/FooterContentLogos';
 export * from '@digigov/react-core/FooterHeading';
 export * from '@digigov/react-core/FooterImage';
-export * from '@digigov/react-core/FooterLink';
 export * from '@digigov/react-core/FooterList';
 export * from '@digigov/react-core/FooterListItem';
 export * from '@digigov/react-core/FooterInfo';
 export * from '@digigov/react-core/FooterInfoSection';
 export * from '@digigov/react-core/FooterNavigation';
 export * from '@digigov/react-core/FooterNavigationSection';
+export * from '@digigov/ui/app/Footer/FooterLink';
 
 import Footer from '@digigov/react-core/Footer';
 export default Footer;

package/src/app/Footer/interaction.test.tsx

@@ -6,6 +6,10 @@ import { Default } from '@digigov/ui/app/Footer/__stories__/Default';
 test('renders the Default Hover and click', async ({ mount, page }) => {
   await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page
     .locator('#root>footer>div>div>section:nth-child(1)>p>a:nth-child(1)')
     .hover();

package/src/app/Header/Header.stories.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSecondaryLogo } from '@digigov/ui/app/Header/HeaderSecondaryLogo';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
+import { HeaderTitle } from '@digigov/ui/app/Header/HeaderTitle';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
+import minEduLogo from '@digigov/ui/govgr/images/minedu-logo-base64';
+import { MoreVertIcon } from '@digigov/ui/icons';
+
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/navigation/Dropdown';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
+
+export default {
+  title: 'Digigov UI/app/Header',
+  component: Header,
+  displayName: 'Header',
+  description:
+    'You must use the GOV.GR header at the top of every page if your service is being listed in the GOV.GR service catalog.',
+  link: 'https://guide.services.gov.gr/docs/components/header',
+  defaultWidth: 'lg',
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Header>
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo href="govgr.gr" />
+            {args.withSecondaryLogo && (
+              <HeaderSecondaryLogo src={minEduLogo} href="#" />
+            )}
+            {args.withServiceName && (
+              <HeaderTitle>{args.serviceNameTitle}</HeaderTitle>
+            )}
+          </HeaderSection>
+          {args.withUser && (
+            <Dropdown align="right">
+              <DropdownButton variant="link">
+                {args.userText}
+                <MoreVertIcon size="md" />
+              </DropdownButton>
+              <DropdownContent>
+                <NavList layout="vertical">
+                  <NavListItemAction href="#">Ρυθμίσεις</NavListItemAction>
+                  <NavListItemAction href="#">Έξοδος</NavListItemAction>
+                </NavList>
+              </DropdownContent>
+            </Dropdown>
+          )}
+        </HeaderContent>
+      </Header>
+    );
+  },
+  args: {
+    withSecondaryLogo: false,
+    withServiceName: false,
+    serviceNameTitle: 'Δηλώσεις',
+    withUser: false,
+    userText: 'Μάριος Μενεξές',
+  },
+  argTypes: {
+    withSecondaryLogo: {
+      control: 'boolean',
+    },
+    withServiceName: {
+      control: 'boolean',
+    },
+    serviceNameTitle: {
+      control: 'text',
+      if: {
+        arg: 'withServiceName',
+        truthy: true,
+      },
+    },
+    withUser: {
+      control: 'boolean',
+    },
+    userText: {
+      control: 'text',
+      if: {
+        arg: 'withUser',
+        truthy: true,
+      },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/app/Header/__stories__/Default';
+export { WithServiceName } from '@digigov/ui/app/Header/__stories__/WithServiceName';
+export { WithServiceNameAndLogo } from '@digigov/ui/app/Header/__stories__/WithServiceNameAndLogo';
+export { WithNavigation } from '@digigov/ui/app/Header/__stories__/WithNavigation';
+export { WithHeaderNavigation } from '@digigov/ui/app/Header/__stories__/WithHeaderNavigation';

package/src/app/Header/HeaderLogo.tsx

@@ -1,4 +1,20 @@
-import HeaderLogo from '@digigov/react-core/HeaderLogo';
+export * from '@digigov/react-core/HeaderLogoBase';
+import React from 'react';
+import {
+  HeaderLogoBase,
+  HeaderLogoBaseProps,
+} from '@digigov/react-core/HeaderLogoBase';
+import { Link } from '@digigov/ui/navigation/Link';
 
-export * from '@digigov/react-core/HeaderLogo';
+export interface HeaderLogoProps extends HeaderLogoBaseProps {}
+
+export const HeaderLogo = React.forwardRef<HTMLAnchorElement, HeaderLogoProps>(
+  function HeaderLogo({ children, ...props }, ref) {
+    return (
+      <HeaderLogoBase as={Link} ref={ref} {...props}>
+        {children}
+      </HeaderLogoBase>
+    );
+  }
+);
 export default HeaderLogo;

package/src/app/Header/HeaderSecondaryLogo.tsx

@@ -1,4 +1,22 @@
-import HeaderSecondaryLogo from '@digigov/react-core/HeaderSecondaryLogo';
+export * from '@digigov/react-core/HeaderSecondaryLogoBase';
+import React from 'react';
+import {
+  HeaderSecondaryLogoBase,
+  HeaderSecondaryLogoBaseProps,
+} from '@digigov/react-core/HeaderSecondaryLogoBase';
+import { Link } from '@digigov/ui/navigation/Link';
 
-export { HeaderSecondaryLogo };
+export interface HeaderSecondaryLogoProps
+  extends HeaderSecondaryLogoBaseProps {}
+
+export const HeaderSecondaryLogo = React.forwardRef<
+  HTMLAnchorElement,
+  HeaderSecondaryLogoProps
+>(function HeaderSecondaryLogo({ children, ...props }, ref) {
+  return (
+    <HeaderSecondaryLogoBase as={Link} ref={ref} {...props}>
+      {children}
+    </HeaderSecondaryLogoBase>
+  );
+});
 export default HeaderSecondaryLogo;

package/src/app/Header/HeaderTitle.tsx

@@ -1,4 +1,22 @@
-import HeaderTitle from '@digigov/react-core/HeaderTitle';
+export * from '@digigov/react-core/HeaderTitleBase';
+import React from 'react';
+import {
+  HeaderTitleBase,
+  HeaderTitleBaseProps,
+} from '@digigov/react-core/HeaderTitleBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface HeaderTitleProps extends HeaderTitleBaseProps {}
+
+export const HeaderTitle = React.forwardRef<
+  HTMLAnchorElement,
+  HeaderTitleProps
+>(function HeaderTitle({ children, ...props }, ref) {
+  return (
+    <HeaderTitleBase as={Link} ref={ref} {...props}>
+      {children}
+    </HeaderTitleBase>
+  );
+});
 
-export * from '@digigov/react-core/HeaderTitle';
 export default HeaderTitle;

package/src/app/Header/index.test.tsx

@@ -30,6 +30,10 @@ test('renders the All Header variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/Header/interaction.test.tsx

@@ -10,6 +10,10 @@ test('renders the WithHeaderNavigation Hover on dropdown', async ({
 }) => {
   await mount(<WithHeaderNavigation />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>div>header>div>div:nth-child(2)>button').hover();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -24,6 +28,10 @@ test('renders the WithServiceNameAndLogo Keyboard navigation', async ({
 }) => {
   await mount(<WithServiceNameAndLogo />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.keyboard.press('Tab');
   await page.keyboard.press('Tab');
   await page.keyboard.press('Tab');

package/src/app/Loader/index.test.tsx

@@ -18,6 +18,10 @@ test('renders the All Loader variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/Masthead/index.test.tsx

@@ -26,6 +26,10 @@ test('renders the All Masthead variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/Masthead/interaction.test.tsx

@@ -6,6 +6,10 @@ import { Default } from '@digigov/ui/app/Masthead/__stories__/Default';
 test('renders the Default Hover', async ({ mount, page }) => {
   await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>section>div>main>a').hover();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/app/Modal/hooks.ts

@@ -18,7 +18,7 @@ export interface UseModalReturn {
     id: string;
     'aria-modal': boolean;
     'aria-labelledby': string;
-    ref?: React.RefObject<HTMLDivElement>;
+    ref?: React.RefObject<HTMLDivElement | null>;
   };
   registerAction: (
     id: ModalId,
@@ -29,18 +29,18 @@ export interface UseModalReturn {
     }
   ) => {
     onClick: () => void;
-    ref?: React.RefObject<HTMLButtonElement>;
+    ref?: React.RefObject<HTMLButtonElement | null>;
   };
 }
 
 export const useModal = (): UseModalReturn => {
   const [currentOpen, setCurrentOpen] = useState<ModalId | null>(null);
-  const modalsRef = useRef<Map<ModalId, React.RefObject<HTMLDivElement>>>(
-    new Map()
-  );
-  const buttonsRef = useRef<Map<ModalId, React.RefObject<HTMLButtonElement>>>(
-    new Map()
-  );
+  const modalsRef = useRef<
+    Map<ModalId, React.RefObject<HTMLDivElement | null>>
+  >(new Map());
+  const buttonsRef = useRef<
+    Map<ModalId, React.RefObject<HTMLButtonElement | null>>
+  >(new Map());
   const open = useCallback((id: ModalId) => {
     setCurrentOpen(id);
   }, []);

package/src/app/Modal/index.test.tsx

@@ -34,6 +34,10 @@ test('renders the All Modal variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/Modal/index.web.tsx

@@ -20,20 +20,18 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
 
 export const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(
   function ModalBase({ open, children, onEscape, ...props }, ref) {
-    const firstModalElement =
-      useRef() as React.MutableRefObject<HTMLSpanElement>;
-    const lastModalElement =
-      useRef() as React.MutableRefObject<HTMLSpanElement>;
+    const firstModalElement = useRef<HTMLSpanElement>(null);
+    const lastModalElement = useRef<HTMLSpanElement>(null);
     const handleFocus = useCallback(() => {
-      firstModalElement.current.focus();
+      firstModalElement.current?.focus();
     }, []);
     useKeypress('Escape', onEscape);
     useEffect(() => {
       const lastModalElementInstance = lastModalElement.current;
       handleFocus();
-      lastModalElementInstance.addEventListener('focus', handleFocus);
+      lastModalElementInstance?.addEventListener('focus', handleFocus);
       return () => {
-        lastModalElementInstance.removeEventListener('focus', handleFocus);
+        lastModalElementInstance?.removeEventListener('focus', handleFocus);
       };
     }, []);
     return (

package/src/app/Modal/interaction.test.tsx

@@ -8,6 +8,10 @@ import { WithHooks } from '@digigov/ui/app/Modal/__stories__/WithHooks';
 test('renders the Auto Click modal', async ({ mount, page }) => {
   await mount(<Auto />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>div>button:nth-child(1)').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -19,6 +23,10 @@ test('renders the Auto Click modal', async ({ mount, page }) => {
 test('renders the Dense Open modal', async ({ mount, page }) => {
   await mount(<Dense />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>div>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -33,6 +41,10 @@ test('renders the WithHooks Click modal with hooks', async ({
 }) => {
   await mount(<WithHooks />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>div>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/app/NotFound/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All NotFound variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/OutdatedBrowserBanner/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { isMobile } from '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion';
 import useOutdatedBrowserCheck from '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck';
 import { WarningText } from '@digigov/ui/feedback/WarningText';

package/src/app/Panel/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Panel variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/PhaseBannerHeader/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All PhaseBannerHeader variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/PhaseBannerHeader/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import HeaderContent from '@digigov/react-core/HeaderContent';
 import PhaseBanner from '@digigov/react-core/PhaseBanner';
 import PhaseBannerHeaderContainer from '@digigov/react-core/PhaseBannerHeaderContainer';

package/src/app/QrCodeScanner/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-// @ts-ignore
 const QrReader = React.lazy(() => import('@uides/react-qr-reader'));
 
 export interface QrCodeScannerProps {