@digigov/ui 2.0.0-85c27c19 → 2.0.0-87b6232d

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,28 +1,32 @@
-
 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 { Top } from '@digigov/ui/layouts/Basic/Top';
 import { Heading, Paragraph } from '@digigov/ui/typography';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
-import Bottom from '@digigov/ui/layouts/Basic/Bottom';
 
 export const Default = () => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Τίτλος σελίδας</Heading>
         <Paragraph>
-          Σε αυτό το παράδειγμα το Footer εσωκλείεται μέσα στο
-          Bottom component
+          Σε αυτό το παράδειγμα το Footer εσωκλείεται μέσα στο Bottom component
         </Paragraph>
       </Main>
     </Container>
@@ -32,4 +36,4 @@ export const Default = () => (
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Bottom/{index.mdx → doc.mdx}

@@ -9,11 +9,7 @@ Use the Bottom component in order to wrap the Footer's components.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Bottom"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/Bottom/__stories__/Default.tsx" />
 
 ## API
 

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

@@ -1,30 +1,37 @@
 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 { 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';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
 
 export const Default = () => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Περιεχόμενο μέσα σε Container</Heading>
         <Paragraph>
-          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών,
-          Μελών Ειδικού Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
-          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν διδακτικό έργο.
+          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών, Μελών Ειδικού
+          Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
+          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν
+          διδακτικό έργο.
         </Paragraph>
       </Main>
     </Container>
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Container/{index.mdx → doc.mdx}

@@ -9,12 +9,7 @@ Container compoment wraps around other elements, grouping them together. Contain
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Container"
-  story="Default.tsx"
-/>
-
+<code src="@digigov/ui/layouts/Basic/Container/__stories__/Default.tsx" />
 
 ## API
 

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

@@ -1,30 +1,37 @@
 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 { 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';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
 
 export const Default = () => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Τίτλος Main</Heading>
         <Paragraph>
-          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών,
-          Μελών Ειδικού Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
-          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν διδακτικό έργο.
+          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών, Μελών Ειδικού
+          Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
+          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν
+          διδακτικό έργο.
         </Paragraph>
       </Main>
     </Container>
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Main/{index.mdx → doc.mdx}

@@ -3,16 +3,14 @@ id: main
 title: Main
 ---
 
+# Main
+
 # How to use
 
 The Main component is used to include tha main information of the page,
 spanning two-thirds of the page width.
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Main"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/Main/__stories__/Default.tsx" />
 
 ## API
 

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

@@ -1,28 +1,35 @@
 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 { 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';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
 
 export const Default = () => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Τίτλος σελίδας</Heading>
         <Paragraph>
-          Σε αυτό το παράδειγμα το περιεχόμενο του Header εσωκλείεται μέσα στο Top component
+          Σε αυτό το παράδειγμα το περιεχόμενο του Header εσωκλείεται μέσα στο
+          Top component
         </Paragraph>
       </Main>
     </Container>
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Top/doc.mdx

@@ -0,0 +1,19 @@
+---
+id: top
+title: Top
+parent: docs/ui/components
+---
+
+# Top
+
+The Top component is used to group the Header components.
+
+## How to use
+
+<code src="@digigov/ui/layouts/Basic/Top/__stories__/Default.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["Top"]} /> 

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

@@ -1,109 +1,37 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside
-children  1`] = `
-<ForwardRef(Layout)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-layout--full-height ds-layout"
-  >
+exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside children 1`] = `
+<body>
+  <div>
     <div
-      className="ds-layout--full-height ds-layout"
+      class="ds-layout ds-layout--full-height"
     >
-      <ForwardRef(Top)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-top"
+      <div
+        class="ds-top"
+      >
+        Header content
+      </div>
+      <div
+        class="ds-container ds-grid ds-grid-item ds-gap-sm-12"
+      >
+        <main
+          class="ds-main ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
+          id="main-content"
         >
-          <div
-            className="ds-top"
-          >
-            Header content
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(Top)>
-      <withDeprecationComponent>
-        <ForwardRef(Container)>
-          <ForwardRef(Grid)
-            className="ds-container"
-            container={true}
-            spacing={
-              Object {
-                "sm": 12,
-              }
-            }
-          >
-            <ForwardRef(Base)
-              as="div"
-              className="ds-container ds-gap-sm-12 ds-grid"
-            >
-              <div
-                className="ds-container ds-gap-sm-12 ds-grid"
-              >
-                <ForwardRef(Main)>
-                  <ForwardRef(Grid)
-                    as="main"
-                    className="ds-main"
-                    id="main-content"
-                    item={true}
-                    md={8}
-                    xs={12}
-                  >
-                    <ForwardRef(Base)
-                      as="main"
-                      className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
-                      id="main-content"
-                    >
-                      <main
-                        className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
-                        id="main-content"
-                      >
-                        Main content
-                      </main>
-                    </ForwardRef(Base)>
-                  </ForwardRef(Grid)>
-                </ForwardRef(Main)>
-                <withDeprecationComponent>
-                  <ForwardRef(Aside)>
-                    <ForwardRef(Grid)
-                      as="aside"
-                      className="ds-aside"
-                      item={true}
-                      md={4}
-                      spacing={4}
-                      xs={12}
-                    >
-                      <ForwardRef(Base)
-                        as="aside"
-                        className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
-                      >
-                        <aside
-                          className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
-                        >
-                          Side content
-                        </aside>
-                      </ForwardRef(Base)>
-                    </ForwardRef(Grid)>
-                  </ForwardRef(Aside)>
-                </withDeprecationComponent>
-              </div>
-            </ForwardRef(Base)>
-          </ForwardRef(Grid)>
-        </ForwardRef(Container)>
-      </withDeprecationComponent>
-      <ForwardRef(Bottom)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-bottom"
+          Main content
+        </main>
+        <aside
+          class="ds-aside ds-aside--sticky ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
         >
-          <div
-            className="ds-bottom"
-          >
-            Bottom content
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(Bottom)>
+          Side content
+        </aside>
+      </div>
+      <div
+        class="ds-bottom"
+      >
+        Bottom content
+      </div>
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(Layout)>
+  </div>
+</body>
 `;

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.mdx → doc.mdx}

@@ -12,26 +12,15 @@ Content and Bottom components.
 
 ### Default layout
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/__stories__/Default.tsx" />
 
 ### Two thirds one third columns layout
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="TwoThirdsOneThirdColumns.tsx"
-/>
-
-  ### Multiple rows lyout
-
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="MultipleRowsLayout.tsx"
-/>
+
+<code src="@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.tsx" />
+
+### Multiple rows layout
+
+<code src="@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout.tsx" />
 
 ## API
 

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;

package/src/layouts/Grid/doc.mdx

@@ -0,0 +1,26 @@
+---
+id: grid
+title: Grid
+---
+
+# Grid
+
+## How to use
+
+Grid component is a  layout system that allows you to design complex web page layouts with rows and columns.
+
+<code src="@digigov/ui/layouts/Grid/__stories__/Default.tsx" />
+
+### Responsive spacing Grid
+
+<code src="@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing.tsx" />
+
+### Inline Grid
+
+<code src="@digigov/ui/layouts/Grid/__stories__/Inline.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Grid"]} /> 

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/Screen.stories.js

@@ -7,4 +7,4 @@ export default {
 export { Default } from '@digigov/ui/layouts/Screen/__stories__/Default';
 export { SpecificScreenSize } from '@digigov/ui/layouts/Screen/__stories__/SpecificScreenSize';
 export { ScreenDown } from '@digigov/ui/layouts/Screen/__stories__/ScreenDown';
-export { ScreenUp } from '@digigov/ui/layouts/Screen/__stories__/ScreenUp';
+export { ScreenUp } from '@digigov/ui/layouts/Screen/__stories__/ScreenUp';

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

@@ -4,16 +4,16 @@ import { Screen } from '@digigov/ui/layouts/Screen';
 export const Default = () => {
   return (
     <>
-      <Screen size='mdUp'>
+      <Screen size="mdUp">
         <div>This is a mdUp screen</div>
       </Screen>
-      <Screen size='mdDown'>
+      <Screen size="mdDown">
         <div>This is a mdDown screen</div>
       </Screen>
-      <Screen size='xs'>
+      <Screen size="xs">
         <div>This is a xs screen</div>
       </Screen>
-      <Screen size='sm'>
+      <Screen size="sm">
         <div>This is a sm screen</div>
       </Screen>
     </>

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

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