@digigov/ui 2.0.0-834daea4 → 2.0.0-87b6232d

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/__stories__/AskingForNumbers.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextInput/__stories__/Default.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const Default = () => (

package/src/form/TextInput/__stories__/DisabledInput.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextInput/__stories__/DisabledInputWithValue.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
+import { LockIcon } from '@digigov/react-icons';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
-import { LockIcon } from '@digigov/react-icons';
 
 export const DisabledInputWithValue = () => (
   <FieldContainer>
@@ -16,9 +15,9 @@ export const DisabledInputWithValue = () => (
         value={'Μάριος'}
         disabled
       ></TextInput>
-      <Hint id="input-hint" size='sm'>
+      <Hint id="input-hint" size="sm">
         <LockIcon mr={1} mb={1} />
-       Πεδίο μόνο για προβολή
+        Πεδίο μόνο για προβολή
       </Hint>
     </LabelContainer>
   </FieldContainer>

package/src/form/TextInput/__stories__/FixedWidths.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FixedWidths = () => (

package/src/form/TextInput/__stories__/FluidWidths.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FluidWidths = () => (

package/src/form/TextInput/__stories__/WithErrorMessage.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextInput/__stories__/WithHint.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

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

@@ -10,6 +10,9 @@ export const defaultTranslate = (
   key: string,
   context?: Record<string, any>
 ): string => {
+  if (typeof key !== 'string') {
+    return key;
+  }
   try {
     if (key.split('.').length > 0) {
       return key.split('.').reduce((locale, path) => {
@@ -33,7 +36,7 @@ export const defaultTranslate = (
     } else {
       return key;
     }
-  } catch (err) {
+  } catch {
     console.error(`Translation key \`${key}\` not found`);
     return key;
   }
@@ -48,7 +51,17 @@ export const I18NProvider: React.FC<I18NContextProps> = ({
   ...props
 }: I18NContextProps) => {
   return (
-    <I18NContext.Provider value={{ t, ...props }}>
+    <I18NContext.Provider
+      value={{
+        t: (...args) => {
+          if (typeof args[0] !== 'string') {
+            return args[0];
+          }
+          return t(...args);
+        },
+        ...props,
+      }}
+    >
       {children}
     </I18NContext.Provider>
   );

package/src/i18n/locales/el.ts

@@ -4,6 +4,8 @@ export default {
       day: 'Ημέρα',
       month: 'Μήνας',
       year: 'Έτος',
+      hours: 'Ώρα',
+      minutes: 'Λεπτά',
     },
     error: {
       required: 'Το πεδίο είναι υποχρεωτικό.',
@@ -12,10 +14,11 @@ export default {
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
+      amka: 'Ο ΑΜΚΑ που συμπληρώσατε δεν είναι έγκυρος.',
       file_size:
-        'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}}).',
       image_size:
-        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}}).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',
@@ -43,6 +46,26 @@ export default {
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
       },
+      datetime: {
+        invalid: 'Η ημερομηνία και ώρα πρέπει να είναι έγκυρη.',
+        invalid_month_year:
+          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα και το έτος.',
+        invalid_day_year:
+          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και το έτος.',
+        invalid_day_month:
+          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και τον μήνα.',
+        invalid_day: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα',
+        invalid_month: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα.',
+        invalid_year: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει το έτος.',
+        invalid_hours: 'Συμπληρώστε έγκυρη ώρα.',
+        invalid_minutes: 'Συμπληρώστε έγκυρα λεπτά.',
+        invalid_hours_range: 'Η ώρα πρέπει να είναι μεταξύ 0 και 23.',
+        invalid_minutes_range: 'Τα λεπτά πρέπει να είναι μεταξύ 0 και 59.',
+        earlier_than:
+          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}',
+        later_than:
+          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}',
+      },
       otp: {
         invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
         less_than: 'Έχετε συμπληρώσει λιγότερα από {{maxLength}} ψηφία.',

package/src/i18n/locales/en.ts

@@ -4,6 +4,8 @@ export default {
       day: 'Day',
       month: 'Month',
       year: 'Year',
+      hours: 'Hours',
+      minutes: 'Minutes',
     },
     error: {
       required: 'This field is required.',
@@ -12,8 +14,9 @@ export default {
       string: 'This field must be a string',
       email: 'Please enter a valid email address (e-mail).',
       afm: 'The VAT number you entered is incorrect.',
-      file_size: 'File size is larger than allowed ({{maxSizeToMb}}Mb).',
-      image_size: 'Image size is larger than allowed ({{maxSizeToMb}}Mb).',
+      amka: 'The SSN you entered is incorrect.',
+      file_size: 'File size is larger than allowed ({{maxSize}}).',
+      image_size: 'Image size is larger than allowed ({{maxSize}}).',
       mobile_phone: 'Fill in a valid mobile phone number.',
       landline: 'Fill in a valid landline phone number.',
       phone_number: 'Fill in a valid phone number.',
@@ -21,16 +24,35 @@ export default {
       iban: 'Fill in a valid IBAN number',
       postalCode: 'Fill in a valid postal code number.',
       array: {
-        min:
-          'This field should have at least {{min}} records. Add one more by selecting the answer “Yes“ in the next question.',
-        max:
-          'You have reached the maximum limit of {{max}} records. If you want to add one more, please remove one of the answers above. Otherwise, select “No“ as an answer.',
+        min: 'This field should have at least {{min}} records. Add one more by selecting the answer “Yes“ in the next question.',
+        max: 'You have reached the maximum limit of {{max}} records. If you want to add one more, please remove one of the answers above. Otherwise, select “No“ as an answer.',
         length: 'This field should have exactly {{length}} records',
       },
       date: {
         invalid: 'Date must be a real date.',
         earlier_than: 'The date must be earlier than {{maxDate}}.',
         later_than: 'The date must be later than {{minDate}}',
+        invalid_month_year: 'Date must include month and year.',
+        invalid_day_year: 'Date must include day and year.',
+        invalid_day_month: 'Date must include day and month.',
+        invalid_day: 'Date must include day.',
+        invalid_month: 'Date must include month.',
+        invalid_year: 'Date must include year.',
+      },
+      datetime: {
+        invalid: 'Date and time must be valid.',
+        invalid_month_year: 'Date must include month and year.',
+        invalid_day_year: 'Date must include day and year.',
+        invalid_day_month: 'Date must include day and month.',
+        invalid_day: 'Date must include day.',
+        invalid_month: 'Date must include month.',
+        invalid_year: 'Date must include year.',
+        invalid_hours: 'Please enter valid hours.',
+        invalid_minutes: 'Please enter valid minutes.',
+        invalid_hours_range: 'Hours must be between 0 and 23.',
+        invalid_minutes_range: 'Minutes must be between 0 and 59.',
+        earlier_than: 'The date and time must be earlier than {{maxDateTime}}.',
+        later_than: 'The date and time must be later than {{minDateTime}}',
       },
       text: {
         more_than: 'You have surpass the {{max}} characters limit.',
@@ -84,8 +106,7 @@ export default {
   outdated: {
     mobile:
       'This site may not work properly because your browser is either not supported or outdated. Please update your browser',
-    web:
-      'This site may not work properly because your browser outdated. To update your browser visit: ',
+    web: 'This site may not work properly because your browser outdated. To update your browser visit: ',
   },
   pagination: {
     show: 'Showing',

package/src/icons/IconBase/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-icons/IconBase';
+
+import IconBase from '@digigov/react-icons/IconBase';
+export default IconBase;

package/src/icons/SvgIcon/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-icons/SvgIcon';
+
+import SvgIcon from '@digigov/react-icons/SvgIcon';
+export default SvgIcon;

package/src/icons/index.tsx

@@ -1,4 +1,6 @@
 export * from '@digigov/ui/icons/Icon';
+export * from '@digigov/ui/icons/IconBase';
+export * from '@digigov/ui/icons/SvgIcon';
 export {
   ArrowIcon,
   CaretIcon,
@@ -22,4 +24,4 @@ export {
   ExclamationIcon,
   PrintIcon,
   GlobeIcon,
-} from '@digigov/react-icons';
+} from '@digigov/react-icons';

package/src/layouts/Basic/Basic.stories.js

@@ -8,4 +8,4 @@ export default {
 export { Default } from '@digigov/ui/layouts/Basic/__stories__/Default';
 export { TwoThirdsOneThirdColumns } from '@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns';
 export { MultipleRowsLayout } from '@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout';
-export { WithBasicLayout } from '@digigov/ui/layouts/Basic/__stories__/WithBasicLayout';
+export { WithBasicLayout } from '@digigov/ui/layouts/Basic/__stories__/WithBasicLayout';

package/src/layouts/Basic/Bottom/__stories__/Default.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRFooter } from '@digigov/ui/govgr/Footer';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Layout } from '@digigov/ui/layouts/Basic';
+import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
-import { Heading, Paragraph } from '@digigov/ui/typography';
-import { Header } from '@digigov/ui/app/Header';
-import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
-import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
-import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Top } from '@digigov/ui/layouts/Basic/Top';
-import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
+import { Heading, Paragraph } from '@digigov/ui/typography';
 
 export const Default = () => (
   <Layout>

package/src/layouts/Basic/Container/__stories__/Default.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Layout } from '@digigov/ui/layouts/Basic';
-import { Container } from '@digigov/ui/layouts/Basic/Container';
-import { Main } from '@digigov/ui/layouts/Basic/Main';
-import { Heading, Paragraph } from '@digigov/ui/typography';
 import { Header } from '@digigov/ui/app/Header';
-import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
 import { Top } from '@digigov/ui/layouts/Basic/Top';
+import { Heading, Paragraph } from '@digigov/ui/typography';
 
 export const Default = () => (
   <Layout>

package/src/layouts/Basic/Main/__stories__/Default.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Layout } from '@digigov/ui/layouts/Basic';
-import { Container } from '@digigov/ui/layouts/Basic/Container';
-import { Main } from '@digigov/ui/layouts/Basic/Main';
-import { Heading, Paragraph } from '@digigov/ui/typography';
 import { Header } from '@digigov/ui/app/Header';
-import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
 import { Top } from '@digigov/ui/layouts/Basic/Top';
+import { Heading, Paragraph } from '@digigov/ui/typography';
 
 export const Default = () => (
   <Layout>

package/src/layouts/Basic/Top/__stories__/Default.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Layout } from '@digigov/ui/layouts/Basic';
-import { Container } from '@digigov/ui/layouts/Basic/Container';
-import { Main } from '@digigov/ui/layouts/Basic/Main';
-import { Heading, Paragraph } from '@digigov/ui/typography';
 import { Header } from '@digigov/ui/app/Header';
-import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
+import { Layout } from '@digigov/ui/layouts/Basic';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
 import { Top } from '@digigov/ui/layouts/Basic/Top';
+import { Heading, Paragraph } from '@digigov/ui/typography';
 
 export const Default = () => (
   <Layout>

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

@@ -1,33 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside children  1`] = `
+exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside children 1`] = `
 <body>
   <div>
     <div
-      class=" ds-layout ds-layout--full-height"
+      class="ds-layout ds-layout--full-height"
     >
       <div
-        class=" ds-top"
+        class="ds-top"
       >
         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>
       </div>
       <div
-        class=" ds-bottom"
+        class="ds-bottom"
       >
         Bottom content
       </div>

package/src/layouts/Basic/__stories__/WithBasicLayout.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import BasicLayout from '@digigov/ui/layouts/Basic';
 import { Aside } from '@digigov/ui/layouts/Basic/Aside';
+import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
-import BasicLayout from '@digigov/ui/layouts/Basic';
 import { Top } from '@digigov/ui/layouts/Basic/Top';
-import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 
 export const WithBasicLayout = () => (
   <BasicLayout>

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

@@ -9,7 +9,7 @@ import BasicLayout, {
   Bottom,
 } from '@digigov/ui/layouts/Basic';
 
-it('renders the BasicLayout with Top, Container, Bottom, Main and Aside children ', () => {
+it('renders the BasicLayout with Top, Container, Bottom, Main and Aside children', () => {
   const jsx = (
     <BasicLayout>
       <Top>Header content</Top>

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

@@ -4,7 +4,6 @@ export * from '@digigov/ui/layouts/Basic/Aside';
 export * from '@digigov/ui/layouts/Basic/Main';
 export * from '@digigov/ui/layouts/Basic/Container';
 export * from '@digigov/ui/layouts/Basic/Bottom';
-export * from '@digigov/ui/layouts/Basic/Masthead';
 
 import Layout from '@digigov/react-core/Layout';
 export default Layout;