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

package/src/form/SingleCharacterInputs/index.test.tsx

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { TextArea } from '@digigov/ui/form/TextArea';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export default {
+  title: 'Digigov UI/form/TextArea',
+  description:
+    'Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.',
+  link: 'https://guide.services.gov.gr/docs/components/textarea',
+  component: TextArea,
+  displayName: 'TextArea',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <FieldContainer error={args.error}>
+        <LabelContainer>
+          <LabelTitle size="md">{args.label}</LabelTitle>
+          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}
+          {args.error && (
+            <ErrorMessage id={args.errorId}>
+              <VisuallyHidden>Λάθος:</VisuallyHidden>
+              {args.errorMessage}
+            </ErrorMessage>
+          )}
+          <TextArea
+            dense={args.dense}
+            name={args.name}
+            disabled={args.disabled}
+            aria-describedby={args.hintId}
+          ></TextArea>
+          {args.bottomHint && (
+            <Hint id={args.bottomHintId}>{args.bottomHintMessage}</Hint>
+          )}
+        </LabelContainer>
+      </FieldContainer>
+    );
+  },
+  args: {
+    label: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;',
+    name: 'textarea',
+    hint: true,
+    hintMessage: 'Προαιρετικό',
+    hintId: 'hintId',
+    error: false,
+    errorMessage: 'Εισάγετε περιεχόμενο.',
+    errorId: 'errorId',
+    bottomHint: true,
+    bottomHintMessage: 'Μπορείτε να πληκτρολογήσετε μέχρι 500 χαρακτήρες.',
+    bottomHintId: 'bottomHintId',
+    dense: false,
+    disabled: false,
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    hint: {
+      control: 'boolean',
+    },
+    hintMessage: {
+      control: 'text',
+      if: { arg: 'hint', eq: true },
+    },
+    hintId: {
+      control: 'text',
+      if: { arg: 'hint', eq: true },
+    },
+    error: {
+      control: 'boolean',
+    },
+    errorMessage: {
+      control: 'text',
+      if: { arg: 'error', eq: true },
+    },
+    errorId: {
+      control: 'text',
+      if: { arg: 'error', eq: true },
+    },
+    bottomHint: {
+      control: 'boolean',
+    },
+    bottomHintMessage: {
+      control: 'text',
+    },
+    bottomHintId: {
+      control: 'text',
+    },
+    dense: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: ['ref', 'type'],
+    },
+  },
+};
+export { Default } from '@digigov/ui/form/TextArea/__stories__/Default';
+export { WithHint } from '@digigov/ui/form/TextArea/__stories__/WithHint';
+export { WithDeclaredRows } from '@digigov/ui/form/TextArea/__stories__/WithDeclaredRows';
+export { MultipleQuestions } from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
+export { LimitedCharacters } from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
+export { WithErrorMessage } from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
+export { DisabledInput } from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
+export { Dense } from '@digigov/ui/form/TextArea/__stories__/Dense';

package/src/form/TextArea/index.test.tsx

@@ -42,6 +42,10 @@ test('renders the All TextArea 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/form/TextArea/interaction.test.tsx

@@ -8,6 +8,10 @@ import { WithHint } from '@digigov/ui/form/TextArea/__stories__/WithHint';
 test('renders the Default click textarea', 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>div>label>textarea').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -19,6 +23,10 @@ test('renders the Default click textarea', async ({ mount, page }) => {
 test('renders the WithErrorMessage Click textarea', async ({ mount, page }) => {
   await mount(<WithErrorMessage />);
   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>label>textarea').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -30,6 +38,10 @@ test('renders the WithErrorMessage Click textarea', async ({ mount, page }) => {
 test('renders the WithHint Navigate with keyboard', async ({ mount, page }) => {
   await mount(<WithHint />);
   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.insertText('Πληροφορίες');
 

package/src/form/TextInput/TextInput.stories.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import TextInput from '@digigov/ui/form/TextInput';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export default {
+  title: 'Digigov UI/form/TextInput',
+  description:
+    'Use the text input component when you need to let users enter text that’s no longer than a single line.',
+  link: 'https://guide.services.gov.gr/docs/components/TextInput',
+  component: TextInput,
+  displayName: 'TextInput',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <FieldContainer error={args.error}>
+        <LabelContainer>
+          <LabelTitle size="md">{args.label}</LabelTitle>
+          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}
+          {args.error && (
+            <ErrorMessage id={args.errorId}>
+              <VisuallyHidden>Λάθος:</VisuallyHidden>
+              {args.errorMessage}
+            </ErrorMessage>
+          )}
+          <TextInput
+            dense={args.dense}
+            name={args.name}
+            maxWidth={args.maxWidth === 'full' ? undefined : args.maxWidth}
+            width={args.width}
+            disabled={args.disabled}
+            aria-describedby={args.hintId}
+          ></TextInput>
+        </LabelContainer>
+      </FieldContainer>
+    );
+  },
+  args: {
+    label: 'Όνομα επιχείρησης',
+    name: 'textarea',
+    width: '100%',
+    maxWidth: 'full',
+    hint: true,
+    hintMessage: 'Ποιο είναι το όνομα που εμφανίζεται στην εφορία;',
+    hintId: 'hintId',
+    error: false,
+    errorMessage: 'Πρέπει να συμπληρώσετε το πεδίο.',
+    errorId: 'errorId',
+    dense: false,
+    disabled: false,
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    maxWidth: {
+      options: [
+        '2-char',
+        '3-char',
+        '4-char',
+        '5-char',
+        '10-char',
+        '20-char',
+        'full',
+      ],
+      control: { type: 'select' },
+    },
+    width: {
+      options: ['25%', '33.3%', '50%', '66.6%', '75%', '100%', 'full'],
+      control: { type: 'select' },
+    },
+    hint: {
+      control: 'boolean',
+    },
+    hintMessage: {
+      control: 'text',
+      if: { arg: 'hint', eq: true },
+    },
+    hintId: {
+      control: 'text',
+      if: { arg: 'hint', eq: true },
+    },
+    error: {
+      control: 'boolean',
+    },
+    errorMessage: {
+      control: 'text',
+      if: { arg: 'error', eq: true },
+    },
+    errorId: {
+      control: 'text',
+      if: { arg: 'error', eq: true },
+    },
+    dense: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: ['ref', 'type'],
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/form/TextInput/__stories__/Default';
+export { MultipleQuestions } from '@digigov/ui/form/TextInput/__stories__/MultipleQuestions';
+export { FixedWidths } from '@digigov/ui/form/TextInput/__stories__/FixedWidths';
+export { FluidWidths } from '@digigov/ui/form/TextInput/__stories__/FluidWidths';
+export { WithHint } from '@digigov/ui/form/TextInput/__stories__/WithHint';
+export { AskingForNumbers } from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
+export { WithErrorMessage } from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
+export { DisabledInput } from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+export { DisabledInputWithValue } from '@digigov/ui/form/TextInput/__stories__/DisabledInputWithValue';
+export { Dense } from '@digigov/ui/form/TextInput/__stories__/Dense';

package/src/form/TextInput/index.test.tsx

@@ -50,6 +50,10 @@ test('renders the All TextInput 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/form/TextInput/interaction.test.tsx

@@ -7,6 +7,10 @@ import { WithErrorMessage } from '@digigov/ui/form/TextInput/__stories__/WithErr
 test('renders the Default Click and write', 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>div>label>input').click();
   await page.keyboard.insertText('όνομα');
 
@@ -23,6 +27,10 @@ test('renders the WithErrorMessage Keyboard navigation', async ({
 }) => {
   await mount(<WithErrorMessage />);
   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');
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/govgr/GovGRLogo/index.tsx

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

package/src/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -12,16 +12,16 @@ exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside chi
         Header content
       </div>
       <div
-        class="ds-container ds-grid ds-gap-sm-12"
+        class="ds-container ds-grid ds-grid-item ds-gap-sm-12"
       >
         <main
-          class="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
+          class="ds-main ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
           id="main-content"
         >
           Main content
         </main>
         <aside
-          class="ds-aside ds-aside--sticky xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
+          class="ds-aside ds-aside--sticky ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
         >
           Side content
         </aside>

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

@@ -26,6 +26,10 @@ test('renders the All Basic 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/Grid/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All Grid 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/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/__stories__/AlignItems.tsx

@@ -1,6 +1,6 @@
 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 = () => {
   return (

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

@@ -1,6 +1,6 @@
 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 = () => {
   return (

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

@@ -1,6 +1,6 @@
 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 = () => {
   return (

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

@@ -1,6 +1,6 @@
 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 = () => {
   return (

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

@@ -1,6 +1,6 @@
 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 = () => {
   return (

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

@@ -1,6 +1,6 @@
 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 = () => {
   return (

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,20 +23,24 @@ 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'] }))),
@@ -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'] }))),
   '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/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/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();
 });