@digigov/ui 2.0.0-d0adc9fb → 2.0.0-d2ffc726

package/src/layouts/Hidden/index.tsx

@@ -1 +1,4 @@
 export * from '@digigov/react-core/Hidden';
+import Hidden from '@digigov/react-core/Hidden';
+
+export default Hidden;

package/src/layouts/Screen/__stories__/Default.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Screen } from '@digigov/ui/layouts/Screen';
 
-export const Default = () => {
+export const Default = (_: any) => {
   return (
     <>
       <Screen size="mdUp">

package/src/layouts/Screen/__stories__/ScreenDown.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Screen } from '@digigov/ui/layouts/Screen';
 
-export const ScreenDown = () => {
+export const ScreenDown = (_: any) => {
   return (
     <Screen size="mdDown">
       <div>This is a mdDown screen</div>

package/src/layouts/Screen/__stories__/ScreenUp.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Screen } from '@digigov/ui/layouts/Screen';
 
-export const ScreenUp = () => {
+export const ScreenUp = (_: any) => {
   return (
     <Screen size="mdUp">
       <div>This is a mdUp screen</div>

package/src/layouts/Screen/__stories__/SpecificScreenSize.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Screen } from '@digigov/ui/layouts/Screen';
 
-export const SpecificScreenSize = () => {
+export const SpecificScreenSize = (_: any) => {
   return (
     <Screen size="md">
       <div>This is a md screen</div>

package/src/layouts/Screen/index.test.tsx

@@ -26,6 +26,10 @@ test('renders the All Screen 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/layouts/Stack/Stack.stories.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Stack from '@digigov/ui/layouts/Stack';
+import Card from '@digigov/ui/content/Card';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/layouts/Stack',
+  component: Stack,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Stack',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Stack
+        spacing={args.spacing}
+        alignItems={args.alignItems}
+        direction={args.direction}
+        justifyContent={args.justifyContent}
+        alignContent={args.alignContent}
+        flexWrap={args.flexWrap}
+      >
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+        <Card variant="border"> Item 5 </Card>
+        <Card variant="border"> Item 6 </Card>
+      </Stack>
+    );
+  },
+  args: {
+    spacing: 4,
+    direction: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    alignContent: 'center',
+    flexWrap: 'nowrap',
+  },
+  argsTypes: {
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+    },
+    justifyContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ],
+    },
+    alignItems: {
+      control: {
+        type: 'select',
+      },
+      options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'],
+    },
+    alignContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'stretch',
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+      ],
+    },
+    flexWrap: {
+      control: {
+        type: 'select',
+      },
+      options: ['nowrap', 'wrap'],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/layouts/Stack/__stories__/Default';
+export { Spacing } from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+export { Row } from '@digigov/ui/layouts/Stack/__stories__/Row';
+export { NoWrap } from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+export { JustifyContent } from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+export { AlignItems } from '@digigov/ui/layouts/Stack/__stories__/AlignItems';

package/src/layouts/Stack/__stories__/AlignItems.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Card from '@digigov/ui/content/Card';
-import Stack from '@digigov/ui/layouts/Stack';
+import { Stack } from '@digigov/ui/layouts/Stack';
 
-export const AlignItems = () => {
+export const AlignItems = (_: any) => {
   return (
     <Stack spacing={4}>
       <Stack direction="row" spacing={2} alignItems="flex-start">

package/src/layouts/Stack/__stories__/Default.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Card from '@digigov/ui/content/Card';
-import Stack from '@digigov/ui/layouts/Stack';
+import { Stack } from '@digigov/ui/layouts/Stack';
 
-export const Default = () => {
+export const Default = (_: any) => {
   return (
     <Stack spacing={2}>
       <Card variant="border"> Item 1 </Card>

package/src/layouts/Stack/__stories__/JustifyContent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Card from '@digigov/ui/content/Card';
-import Stack from '@digigov/ui/layouts/Stack';
+import { Stack } from '@digigov/ui/layouts/Stack';
 
-export const JustifyContent = () => {
+export const JustifyContent = (_: any) => {
   return (
     <Stack spacing={4}>
       <Stack direction="row" spacing={2} justifyContent="flex-start">

package/src/layouts/Stack/__stories__/NoWrap.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Card from '@digigov/ui/content/Card';
-import Stack from '@digigov/ui/layouts/Stack';
+import { Stack } from '@digigov/ui/layouts/Stack';
 
-export const NoWrap = () => {
+export const NoWrap = (_: any) => {
   return (
     <Stack spacing={4} direction="row" flexWrap="nowrap">
       <Card variant="border"> Longer Item 1 </Card>

package/src/layouts/Stack/__stories__/Row.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Card from '@digigov/ui/content/Card';
-import Stack from '@digigov/ui/layouts/Stack';
+import { Stack } from '@digigov/ui/layouts/Stack';
 
-export const Row = () => {
+export const Row = (_: any) => {
   return (
     <Stack spacing={2} direction="row">
       <Card variant="border"> Item 1 </Card>

package/src/layouts/Stack/__stories__/Spacing.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Card from '@digigov/ui/content/Card';
-import Stack from '@digigov/ui/layouts/Stack';
+import { Stack } from '@digigov/ui/layouts/Stack';
 
-export const Spacing = () => {
+export const Spacing = (_: any) => {
   return (
     <Stack spacing={6}>
       <Stack direction="row">

package/src/layouts/Stack/index.test.tsx

@@ -34,6 +34,10 @@ test('renders the All Stack 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/layouts/Stack/index.tsx

@@ -1,3 +1,4 @@
 import Stack from '@digigov/react-core/Stack';
 
+export * from '@digigov/react-core/Stack';
 export default Stack;

package/src/lazy.js

@@ -23,23 +23,28 @@ export default {
   'FooterContentLogos': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterContentLogos'] }))),
   'FooterHeading': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterHeading'] }))),
   'FooterImage': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterImage'] }))),
-  'FooterLink': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterLink'] }))),
   'FooterList': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterList'] }))),
   'FooterListItem': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterListItem'] }))),
   'FooterInfo': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterInfo'] }))),
   'FooterInfoSection': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterInfoSection'] }))),
   'FooterNavigation': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterNavigation'] }))),
   'FooterNavigationSection': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterNavigationSection'] }))),
+  'FooterLink': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterLink'] }))),
+  'FooterLinkBase': lazy(() => import('@digigov/ui/app/Footer').then((module) => ({ default: module['FooterLinkBase'] }))),
   'Header': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['Header'] }))),
   'HeaderTitle': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['HeaderTitle'] }))),
+  'HeaderTitleBase': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['HeaderTitleBase'] }))),
   'HeaderLogo': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['HeaderLogo'] }))),
+  'HeaderLogoBase': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['HeaderLogoBase'] }))),
   'HeaderSection': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['HeaderSection'] }))),
   'HeaderContent': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['HeaderContent'] }))),
   'HeaderNavMenuContent': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['HeaderNavMenuContent'] }))),
   'HeaderSecondaryLogo': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['HeaderSecondaryLogo'] }))),
+  'HeaderSecondaryLogoBase': lazy(() => import('@digigov/ui/app/Header').then((module) => ({ default: module['HeaderSecondaryLogoBase'] }))),
   'LoaderContainer': lazy(() => import('@digigov/ui/app/Loader').then((module) => ({ default: module['LoaderContainer'] }))),
   'FullPageBackground': lazy(() => import('@digigov/ui/app/Loader').then((module) => ({ default: module['FullPageBackground'] }))),
   'CircularProgress': lazy(() => import('@digigov/ui/app/Loader/index.web').then((module) => ({ default: module['CircularProgress'] }))),
+  'CircularProgressBase': lazy(() => import('@digigov/ui/app/Loader/index.web').then((module) => ({ default: module['CircularProgressBase'] }))),
   'Masthead': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['Masthead'] }))),
   'MastheadBody': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['MastheadBody'] }))),
   'MastheadLogo': lazy(() => import('@digigov/ui/app/Masthead').then((module) => ({ default: module['MastheadLogo'] }))),
@@ -136,7 +141,6 @@ export default {
   'WarningText': lazy(() => import('@digigov/ui/feedback/WarningText').then((module) => ({ default: module['WarningText'] }))),
   'AutoComplete': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoComplete'] }))),
   'AutoCompleteInputBase': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteInputBase'] }))),
-  'AutoCompleteInputTypeahead': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteInputTypeahead'] }))),
   'AutoCompleteResultList': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteResultList'] }))),
   'AutoCompleteResultListItem': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteResultListItem'] }))),
   'AutoCompleteContainer': lazy(() => import('@digigov/ui/form/AutoComplete').then((module) => ({ default: module['AutoCompleteContainer'] }))),
@@ -146,7 +150,9 @@ export default {
   'ContinueButton': lazy(() => import('@digigov/ui/form/Button').then((module) => ({ default: module['ContinueButton'] }))),
   'Button': lazy(() => import('@digigov/ui/form/Button').then((module) => ({ default: module['Button'] }))),
   'CallToAction': lazy(() => import('@digigov/ui/form/Button').then((module) => ({ default: module['CallToAction'] }))),
+  'CallToActionBase': lazy(() => import('@digigov/ui/form/Button').then((module) => ({ default: module['CallToActionBase'] }))),
   'ButtonLink': lazy(() => import('@digigov/ui/form/Button').then((module) => ({ default: module['ButtonLink'] }))),
+  'ButtonLinkBase': lazy(() => import('@digigov/ui/form/Button').then((module) => ({ default: module['ButtonLinkBase'] }))),
   'ThemeToggleButton': lazy(() => import('@digigov/ui/form/Button').then((module) => ({ default: module['ThemeToggleButton'] }))),
   'ButtonGroup': lazy(() => import('@digigov/ui/form/Button').then((module) => ({ default: module['ButtonGroup'] }))),
   'Checkbox': lazy(() => import('@digigov/ui/form/Checkbox').then((module) => ({ default: module['Checkbox'] }))),
@@ -182,6 +188,7 @@ export default {
   'CopyrightContainer': lazy(() => import('@digigov/ui/govgr/Footer/Copyright').then((module) => ({ default: module['CopyrightContainer'] }))),
   'LicenseCCSA': lazy(() => import('@digigov/ui/govgr/Footer/LicenseCCSA').then((module) => ({ default: module['LicenseCCSA'] }))),
   'GovGRLogo': lazy(() => import('@digigov/ui/govgr/GovGRLogo').then((module) => ({ default: module['GovGRLogo'] }))),
+  'GovGRLogoBase': lazy(() => import('@digigov/ui/govgr/GovGRLogo').then((module) => ({ default: module['GovGRLogoBase'] }))),
   'I18NContext': lazy(() => import('@digigov/ui/i18n').then((module) => ({ default: module['I18NContext'] }))),
   'I18NProvider': lazy(() => import('@digigov/ui/i18n').then((module) => ({ default: module['I18NProvider'] }))),
   'ArrowIcon': lazy(() => import('@digigov/ui/icons/Icon').then((module) => ({ default: module['ArrowIcon'] }))),
@@ -213,7 +220,7 @@ export default {
   'BasicLayout': lazy(() => import('@digigov/ui/layouts').then((module) => ({ default: module['BasicLayout'] }))),
   'SectionBreak': lazy(() => import('@digigov/ui/layouts/SectionBreak').then((module) => ({ default: module['SectionBreak'] }))),
   'Grid': lazy(() => import('@digigov/ui/layouts/Grid').then((module) => ({ default: module['Grid'] }))),
-  'Stack': lazy(() => import('@digigov/ui/layouts').then((module) => ({ default: module['Stack'] }))),
+  'Stack': lazy(() => import('@digigov/ui/layouts/Stack').then((module) => ({ default: module['Stack'] }))),
   'AdminContainer': lazy(() => import('@digigov/ui/layouts/Admin').then((module) => ({ default: module['AdminContainer'] }))),
   'AdminMain': lazy(() => import('@digigov/ui/layouts/Admin').then((module) => ({ default: module['AdminMain'] }))),
   'AdminAside': lazy(() => import('@digigov/ui/layouts/Admin').then((module) => ({ default: module['AdminAside'] }))),
@@ -228,10 +235,12 @@ export default {
   'Bottom': lazy(() => import('@digigov/ui/layouts/Basic/Bottom').then((module) => ({ default: module['Bottom'] }))),
   'Hidden': lazy(() => import('@digigov/ui/layouts/Hidden').then((module) => ({ default: module['Hidden'] }))),
   'BackLink': lazy(() => import('@digigov/ui/navigation/BackLink').then((module) => ({ default: module['BackLink'] }))),
+  'BackLinkBase': lazy(() => import('@digigov/ui/navigation/BackLink').then((module) => ({ default: module['BackLinkBase'] }))),
   'Breadcrumbs': lazy(() => import('@digigov/ui/navigation/Breadcrumbs').then((module) => ({ default: module['Breadcrumbs'] }))),
   'BreadcrumbsList': lazy(() => import('@digigov/ui/navigation/Breadcrumbs').then((module) => ({ default: module['BreadcrumbsList'] }))),
-  'BreadcrumbsListItemBase': lazy(() => import('@digigov/ui/navigation/Breadcrumbs').then((module) => ({ default: module['BreadcrumbsListItemBase'] }))),
+  'BreadcrumbsListItemWrapper': lazy(() => import('@digigov/ui/navigation/Breadcrumbs').then((module) => ({ default: module['BreadcrumbsListItemWrapper'] }))),
   'BreadcrumbsListItemLink': lazy(() => import('@digigov/ui/navigation/Breadcrumbs').then((module) => ({ default: module['BreadcrumbsListItemLink'] }))),
+  'BreadcrumbsListItemLinkBase': lazy(() => import('@digigov/ui/navigation/Breadcrumbs').then((module) => ({ default: module['BreadcrumbsListItemLinkBase'] }))),
   'BreadcrumbsListItem': lazy(() => import('@digigov/ui/navigation/Breadcrumbs').then((module) => ({ default: module['BreadcrumbsListItem'] }))),
   'Drawer': lazy(() => import('@digigov/ui/navigation/Drawer').then((module) => ({ default: module['Drawer'] }))),
   'DrawerHeading': lazy(() => import('@digigov/ui/navigation/Drawer').then((module) => ({ default: module['DrawerHeading'] }))),
@@ -254,9 +263,11 @@ export default {
   'NavMenuTitle': lazy(() => import('@digigov/ui/navigation/NavList').then((module) => ({ default: module['NavMenuTitle'] }))),
   'NavListItemActionContainer': lazy(() => import('@digigov/ui/navigation/NavList').then((module) => ({ default: module['NavListItemActionContainer'] }))),
   'NavListItemAction': lazy(() => import('@digigov/ui/navigation/NavList').then((module) => ({ default: module['NavListItemAction'] }))),
+  'NavListItemActionBase': lazy(() => import('@digigov/ui/navigation/NavList').then((module) => ({ default: module['NavListItemActionBase'] }))),
   'NavListItemBadge': lazy(() => import('@digigov/ui/navigation/NavList').then((module) => ({ default: module['NavListItemBadge'] }))),
   'NavListItemButton': lazy(() => import('@digigov/ui/navigation/NavList').then((module) => ({ default: module['NavListItemButton'] }))),
   'NavListItemLink': lazy(() => import('@digigov/ui/navigation/NavList').then((module) => ({ default: module['NavListItemLink'] }))),
+  'NavListItemLinkBase': lazy(() => import('@digigov/ui/navigation/NavList').then((module) => ({ default: module['NavListItemLinkBase'] }))),
   'PaginationLabelContainer': lazy(() => import('@digigov/ui/navigation/Pagination').then((module) => ({ default: module['PaginationLabelContainer'] }))),
   'PaginationLabel': lazy(() => import('@digigov/ui/navigation/Pagination').then((module) => ({ default: module['PaginationLabel'] }))),
   'PaginationResultsPerPageSelect': lazy(() => import('@digigov/ui/navigation/Pagination').then((module) => ({ default: module['PaginationResultsPerPageSelect'] }))),

package/src/navigation/BackLink/BackLink.stories.js

@@ -1,7 +1,10 @@
 import BackLink from '@digigov/ui/navigation/BackLink';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov UI/navigation/BackLink',
   component: BackLink,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'BackLink',
 };
 export { Default } from '@digigov/ui/navigation/BackLink/__stories__/Default';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BackLink } from '@digigov/ui/navigation/BackLink';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <BackLink href="#" aria-label="Πίσω στην προηγούμενη σελίδα">
     Πίσω
   </BackLink>

package/src/navigation/BackLink/doc.mdx

@@ -15,5 +15,5 @@ Use the back link component to help users go back to the previous page in a mult
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["BackLink"]} />
+<ComponentProps componentName={["BackLink", "BackLinkBase"]} />
 

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

@@ -14,6 +14,10 @@ test('renders the All BackLink 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/navigation/BackLink/index.tsx

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

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

@@ -6,6 +6,10 @@ import { Default } from '@digigov/ui/navigation/BackLink/__stories__/Default';
 test('renders the Default Click link', 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>a').click();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/navigation/BackToTopLink/BackToTopLink.stories.js

@@ -1,8 +1,12 @@
 import BackToTopLink from '@digigov/ui/navigation/BackToTopLink';
+import doc from './doc.mdx?raw';
+
 export default {
   title: 'Digigov UI/navigation/BackToTopLink',
   component: BackToTopLink,
   displayName: 'BackToTopLink',
+  tags: ['autodocs'],
+  markdown: doc,
 };
 export { Default } from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
 export { InMain } from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BackToTopLink } from '@digigov/ui/navigation/BackToTopLink';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <BackToTopLink href="#" aria-label="Επιστροφή στην αρχή της σελίδας">
     Επιστροφή στην αρχή της σελίδας
   </BackToTopLink>

package/src/navigation/BackToTopLink/__stories__/InMain.tsx

@@ -5,7 +5,7 @@ import BackToTopLink, {
   BackToTopContainer,
 } from '@digigov/ui/navigation/BackToTopLink';
 
-export const InMain = () => (
+export const InMain = (_: any) => (
   <Container>
     <Main>
       <BackToTopContainer persistent>

package/src/navigation/BackToTopLink/doc.mdx

@@ -0,0 +1,22 @@
+---
+id: back-to-top
+title: BackToTop
+---
+
+# BackToTop
+
+Use the BackToTopLink component to allow users to quickly navigate to the top of the page.
+
+## How to use
+
+<code src="@digigov/ui/navigation/BackToTopLink/__stories__/Default.tsx" />
+
+### Display in main content
+
+<code src="@digigov/ui/navigation/BackToTopLink/__stories__/InMain.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["BackToTopLink", "BackToTopContainer"]} /> 

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

@@ -18,6 +18,10 @@ test('renders the All BackToTopLink 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/navigation/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,10 +1,13 @@
 import Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov UI/navigation/Breadcrumbs',
   description:
     'Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website',
   link: 'https://guide.services.gov.gr/docs/components/breadcrumbs',
   component: Breadcrumbs,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Breadcrumbs',
 };
 export { Default } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Default';

package/src/navigation/Breadcrumbs/BreadcrumbsListItem.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import clsx from 'clsx';
-import BreadcrumbsListItemBase, {
-  BreadcrumbsListItemBaseProps,
-} from '@digigov/react-core/BreadcrumbsListItem';
+import {
+  BreadcrumbsListItemWrapper,
+  BreadcrumbsListItemWrapperProps,
+} from '@digigov/react-core/BreadcrumbsListItemWrapper';
 import Link from '@digigov/ui/navigation/Link';
 
-export interface BreadcrumbsListItemProps extends BreadcrumbsListItemBaseProps {
+export interface BreadcrumbsListItemProps
+  extends BreadcrumbsListItemWrapperProps {
   href?: string;
 }
 
@@ -15,7 +17,7 @@ const BreadcrumbsListItem: React.FC<BreadcrumbsListItemProps> = ({
   ...props
 }) => {
   return (
-    <BreadcrumbsListItemBase {...props}>
+    <BreadcrumbsListItemWrapper {...props}>
       <Link
         href={href}
         defaultStyle={false}
@@ -26,7 +28,7 @@ const BreadcrumbsListItem: React.FC<BreadcrumbsListItemProps> = ({
       >
         {children}
       </Link>
-    </BreadcrumbsListItemBase>
+    </BreadcrumbsListItemWrapper>
   );
 };
 

package/src/navigation/Breadcrumbs/BreadcrumbsListItemLink.tsx

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

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

@@ -171,7 +171,7 @@ const getListChild = (item, setActive) => {
   );
 };
 
-export const Auto = () => {
+export const Auto = (_: any) => {
   return (
     <BreadcrumbsAuto
       items={items}

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

@@ -6,7 +6,7 @@ import {
   BreadcrumbsListItem,
 } from '@digigov/ui/navigation/Breadcrumbs';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <Breadcrumbs role="navigation">
     <BreadcrumbsList>
       <BreadcrumbsListItem href="#">Αρχική</BreadcrumbsListItem>

package/src/navigation/Breadcrumbs/__stories__/WithHook.tsx

@@ -179,7 +179,7 @@ const getListChild = (item, setActive) => {
   );
 };
 
-export const WithHook = () => {
+export const WithHook = (_: any) => {
   // initialUrlRoute: '/nomothesia-pyroprostasias/odigies-epi-protypon-pyroprostasias'
   // is to simulate that the user lands to a specific url
   const { breadcrumbs, setActiveItem } = useBreadcrumbs(

package/src/navigation/Breadcrumbs/__stories__/WithProvider.tsx

@@ -10,7 +10,7 @@ const CustomLink: React.FC<any> = (props) => {
   return <div>custom link: {props.children}</div>;
 };
 
-export const WithProvider = () => (
+export const WithProvider = (_: any) => (
   <LinkProvider component={CustomLink}>
     <Breadcrumbs role="navigation">
       <BreadcrumbsList>

package/src/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx

@@ -6,7 +6,7 @@ import {
   BreadcrumbsListItem,
 } from '@digigov/ui/navigation/Breadcrumbs';
 
-export const WithoutCurrentPage = () => (
+export const WithoutCurrentPage = (_: any) => (
   <Breadcrumbs role="navigation">
     <BreadcrumbsList>
       <BreadcrumbsListItem href="#">Αρχική</BreadcrumbsListItem>

package/src/navigation/Breadcrumbs/doc.mdx

@@ -17,6 +17,10 @@ The Breadcrumbs component lets users show and hide sections of related content o
 
 <code src="@digigov/ui/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx" />
 
+### With hook
+
+<code src="@digigov/ui/navigation/Breadcrumbs/__stories__/WithHook.tsx" />
+
 ## Accessibility
 
 You can read more about the accessibility patterns used in our Breadcrumbs