@digigov/ui 2.0.0-85c27c19 → 2.0.0-aefd0709

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { AlignRight } from '@digigov/ui/navigation/Dropdown/__stories__/AlignRight';
 import { ContentPosition } from '@digigov/ui/navigation/Dropdown/__stories__/ContentPosition';
 import { Default } from '@digigov/ui/navigation/Dropdown/__stories__/Default';
@@ -12,49 +11,51 @@ import { Secondary } from '@digigov/ui/navigation/Dropdown/__stories__/Secondary
 import { VariantLink } from '@digigov/ui/navigation/Dropdown/__stories__/VariantLink';
 import { Warning } from '@digigov/ui/navigation/Dropdown/__stories__/Warning';
 import { WithIcons } from '@digigov/ui/navigation/Dropdown/__stories__/WithIcons';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Dropdown variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="AlignRight">
-      <AlignRight />
-    </TestVariant>
-    <TestVariant title="ContentPosition">
-      <ContentPosition />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="Disabled">
-      <Disabled />
-    </TestVariant>
-    <TestVariant title="PlacementTop">
-      <PlacementTop />
-    </TestVariant>
-    <TestVariant title="ScrollableContent">
-      <ScrollableContent />
-    </TestVariant>
-    <TestVariant title="Secondary">
-      <Secondary />
-    </TestVariant>
-    <TestVariant title="VariantLink">
-      <VariantLink />
-    </TestVariant>
-    <TestVariant title="Warning">
-      <Warning />
-    </TestVariant>
-    <TestVariant title="WithIcons">
-      <WithIcons />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="AlignRight">
+        <AlignRight />
+      </TestVariant>
+      <TestVariant title="ContentPosition">
+        <ContentPosition />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="Disabled">
+        <Disabled />
+      </TestVariant>
+      <TestVariant title="PlacementTop">
+        <PlacementTop />
+      </TestVariant>
+      <TestVariant title="ScrollableContent">
+        <ScrollableContent />
+      </TestVariant>
+      <TestVariant title="Secondary">
+        <Secondary />
+      </TestVariant>
+      <TestVariant title="VariantLink">
+        <VariantLink />
+      </TestVariant>
+      <TestVariant title="Warning">
+        <Warning />
+      </TestVariant>
+      <TestVariant title="WithIcons">
+        <WithIcons />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -8,60 +8,59 @@ import { PlacementTop } from '@digigov/ui/navigation/Dropdown/__stories__/Placem
 import { ScrollableContent } from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
 
 test('renders the AlignRight Align right action', async ({ mount, page }) => {
-  await mount(
-    <AlignRight />
-  )
+  await mount(<AlignRight />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>div>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Default Open dropdown action', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Dense Open dropdown action', async ({ mount, page }) => {
-  await mount(
-    <Dense />
-  )
+  await mount(<Dense />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
 
-
-test('renders the PlacementTop Placement top action', async ({ mount, page }) => {
-  await mount(
-    <PlacementTop />
-  )
+test('renders the PlacementTop Placement top action', async ({
+  mount,
+  page,
+}) => {
+  await mount(<PlacementTop />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>div>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the ScrollableContent open content', async ({ mount, page }) => {
-  await mount(
-    <ScrollableContent />
-  )
+  await mount(<ScrollableContent />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/Link/__snapshots__/index.spec.tsx.snap

@@ -1,38 +1,24 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Provider 1`] = `
-<LinkProvider
-  component={[Function]}
->
-  <Link>
-    <CustomLink
-      href=""
-    >
-      <div>
-        hello
-      </div>
-    </CustomLink>
-  </Link>
-</LinkProvider>
+<body>
+  <div>
+    <div>
+      hello
+    </div>
+  </div>
+</body>
 `;
 
 exports[`renders the Link 1`] = `
-<Link>
-  <ForwardRef(LinkBase)
-    href=""
-  >
-    <ForwardRef(Base)
-      as="a"
-      className="ds-link"
+<body>
+  <div>
+    <a
+      class="ds-link"
       href=""
     >
-      <a
-        className="ds-link"
-        href=""
-      >
-        hello
-      </a>
-    </ForwardRef(Base)>
-  </ForwardRef(LinkBase)>
-</Link>
+      hello
+    </a>
+  </div>
+</body>
 `;

package/src/navigation/Link/__stories__/DarkBackground.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
+import { Masthead } from '@digigov/ui/app/Masthead';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Link } from '@digigov/ui/navigation/Link';
 export const DarkBackground = () => (

package/src/navigation/Link/__stories__/DarkBackgroundNoUnderline.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
+import { Masthead } from '@digigov/ui/app/Masthead';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Link } from '@digigov/ui/navigation/Link';
 export const DarkBackgroundNoUnderline = () => (

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

@@ -7,7 +7,11 @@ const CustomLink: React.FC<any> = (props) => {
 
 export const WithProvider = () => (
   <LinkProvider component={CustomLink}>
-    <Link aria-label="πλοηγηθείτε στην ιστοσελίδα το govgr" role="link" href="#">
+    <Link
+      aria-label="πλοηγηθείτε στην ιστοσελίδα το govgr"
+      role="link"
+      href="#"
+    >
       Σύνδεσμος
     </Link>
   </LinkProvider>

package/src/navigation/Link/{index.mdx → doc.mdx}

@@ -3,39 +3,27 @@ id: link
 title: Link
 ---
 
-## How to use
+# Link
 
-### Default
+## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/Link/__stories__/Default.tsx" />
 
 ### No Underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="NoUnderline.tsx"
-/>
+<code src="@digigov/ui/navigation/Link/__stories__/NoUnderline.tsx" />
 
 ### Opens in a new tab
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="OpensInNewTab.tsx"
-/>
+<code src="@digigov/ui/navigation/Link/__stories__/OpensInNewTab.tsx" />
 
 ### At dark background
 
-<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackground.tsx" />
+<code src="@digigov/ui/navigation/Link/__stories__/DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackgroundNoUnderline.tsx" />
+<code src="@digigov/ui/navigation/Link/__stories__/DarkBackgroundNoUnderline.tsx" />
 
 ### Accessibility
 

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { DarkBackground } from '@digigov/ui/navigation/Link/__stories__/DarkBackground';
 import { DarkBackgroundNoUnderline } from '@digigov/ui/navigation/Link/__stories__/DarkBackgroundNoUnderline';
 import { Default } from '@digigov/ui/navigation/Link/__stories__/Default';
@@ -8,37 +7,39 @@ import { ExternalLink } from '@digigov/ui/navigation/Link/__stories__/ExternalLi
 import { NoUnderline } from '@digigov/ui/navigation/Link/__stories__/NoUnderline';
 import { OpensInNewTab } from '@digigov/ui/navigation/Link/__stories__/OpensInNewTab';
 import { WithProvider } from '@digigov/ui/navigation/Link/__stories__/WithProvider';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Link variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="DarkBackground">
-      <DarkBackground />
-    </TestVariant>
-    <TestVariant title="DarkBackgroundNoUnderline">
-      <DarkBackgroundNoUnderline />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="ExternalLink">
-      <ExternalLink />
-    </TestVariant>
-    <TestVariant title="NoUnderline">
-      <NoUnderline />
-    </TestVariant>
-    <TestVariant title="OpensInNewTab">
-      <OpensInNewTab />
-    </TestVariant>
-    <TestVariant title="WithProvider">
-      <WithProvider />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="DarkBackground">
+        <DarkBackground />
+      </TestVariant>
+      <TestVariant title="DarkBackgroundNoUnderline">
+        <DarkBackgroundNoUnderline />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="ExternalLink">
+        <ExternalLink />
+      </TestVariant>
+      <TestVariant title="NoUnderline">
+        <NoUnderline />
+      </TestVariant>
+      <TestVariant title="OpensInNewTab">
+        <OpensInNewTab />
+      </TestVariant>
+      <TestVariant title="WithProvider">
+        <WithProvider />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -6,40 +6,38 @@ import { Default } from '@digigov/ui/navigation/Link/__stories__/Default';
 import { NoUnderline } from '@digigov/ui/navigation/Link/__stories__/NoUnderline';
 
 test('renders the DarkBackground Hover and focus', async ({ mount, page }) => {
-  await mount(
-    <DarkBackground />
-  )
+  await mount(<DarkBackground />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>section>a").hover();
- await page.locator("#root>section>a").click();
+  await page.locator('#root>section>a').hover();
+  await page.locator('#root>section>a').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Default Focus', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.keyboard.press("Tab");
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.keyboard.press('Tab');
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the NoUnderline Hover and focus', async ({ mount, page }) => {
-  await mount(
-    <NoUnderline />
-  )
+  await mount(<NoUnderline />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>a").hover();
- await page.locator("#root>a").click();
+  await page.locator('#root>a').hover();
+  await page.locator('#root>a').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/NavList/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(NavList)>
+<ForwardRef(NavList2)>
   this is some random warning text
-</ForwardRef(NavList)>
+</ForwardRef(NavList2)>
 `;

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

@@ -8,21 +8,21 @@ import {
 
 const links = [
   {
-    "name": "home",
-    "href": "#home",
-    "label": "Αρχική"
+    name: 'home',
+    href: '#home',
+    label: 'Αρχική',
   },
   {
-    "name": "educational",
-    "label": "Εκπαιδευτικό υλικό",
-    "href": "#educational"
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    href: '#educational',
   },
   {
-    "name": "news",
-    "href": "#news",
-    "label": "Νέα"
-  }
-]
+    name: 'news',
+    href: '#news',
+    label: 'Νέα',
+  },
+];
 
 export const Default = () => {
   const { registerNavItem } = useNavList();

package/src/navigation/NavList/__stories__/HorizontalWithDrawer.tsx

@@ -16,41 +16,41 @@ import {
 } from '@digigov/ui/navigation/NavList';
 
 const links = [
-  { "name": "home", "href": "#home", "label": "Αρχική" },
+  { name: 'home', href: '#home', label: 'Αρχική' },
   {
-    "name": "educational",
-    "label": "Εκπαιδευτικό υλικό",
-    "subMenuHeading": "Εκπαιδευτικό υλικό",
-    "subMenu": [
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    subMenuHeading: 'Εκπαιδευτικό υλικό',
+    subMenu: [
       {
-        "name": "elearning",
-        "href": "#elearning",
-        "label": "Εκπαιδευτική πλατφόρμα"
+        name: 'elearning',
+        href: '#elearning',
+        label: 'Εκπαιδευτική πλατφόρμα',
       },
       {
-        "name": "videos",
-        "href": "#videos",
-        "label": "Βίντεο"
+        name: 'videos',
+        href: '#videos',
+        label: 'Βίντεο',
       },
       {
-        "name": "presentations",
-        "href": "#presentations",
-        "label": "Παρουσιάσεις"
+        name: 'presentations',
+        href: '#presentations',
+        label: 'Παρουσιάσεις',
       },
       {
-        "name": "promoting",
-        "href": "#promoting",
-        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+        name: 'promoting',
+        href: '#promoting',
+        label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
       },
       {
-        "name": "other-texts",
-        "href": "#other-texts",
-        "label": "Άλλα κείμενα"
-      }
-    ]
+        name: 'other-texts',
+        href: '#other-texts',
+        label: 'Άλλα κείμενα',
+      },
+    ],
   },
-  { "name": "news", "href": "#news", "label": "Νέα" }
-]
+  { name: 'news', href: '#news', label: 'Νέα' },
+];
 
 export const HorizontalWithDrawer = () => {
   const layout = 'horizontal';

package/src/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx

@@ -13,41 +13,41 @@ import {
 } from '@digigov/ui/navigation/NavList';
 
 const links = [
-  { "name": "home", "href": "#home", "label": "Αρχική" },
+  { name: 'home', href: '#home', label: 'Αρχική' },
   {
-    "name": "educational",
-    "label": "Εκπαιδευτικό υλικό",
-    "subMenuHeading": "Εκπαιδευτικό υλικό",
-    "subMenu": [
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    subMenuHeading: 'Εκπαιδευτικό υλικό',
+    subMenu: [
       {
-        "name": "elearning",
-        "href": "#elearning",
-        "label": "Εκπαιδευτική πλατφόρμα"
+        name: 'elearning',
+        href: '#elearning',
+        label: 'Εκπαιδευτική πλατφόρμα',
       },
       {
-        "name": "videos",
-        "href": "#videos",
-        "label": "Βίντεο"
+        name: 'videos',
+        href: '#videos',
+        label: 'Βίντεο',
       },
       {
-        "name": "presentations",
-        "href": "#presentations",
-        "label": "Παρουσιάσεις"
+        name: 'presentations',
+        href: '#presentations',
+        label: 'Παρουσιάσεις',
       },
       {
-        "name": "promoting",
-        "href": "#promoting",
-        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+        name: 'promoting',
+        href: '#promoting',
+        label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
       },
       {
-        "name": "other-texts",
-        "href": "#other-texts",
-        "label": "Άλλα κείμενα"
-      }
-    ]
+        name: 'other-texts',
+        href: '#other-texts',
+        label: 'Άλλα κείμενα',
+      },
+    ],
   },
-  { "name": "news", "href": "#news", "label": "Νέα" }
-]
+  { name: 'news', href: '#news', label: 'Νέα' },
+];
 
 export const HorizontalWithoutDrawer = () => {
   const layout = 'horizontal';