npm - @digigov/ui - Versions diffs - 2.0.0-834daea4 → 2.0.0-87b6232d - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1044) hide show

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

@@ -8,60 +8,79 @@ 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' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+  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' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+  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' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+  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' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+  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' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+  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 CHANGED Viewed

@@ -14,7 +14,7 @@ exports[`renders the Link 1`] = `
 <body>
   <div>
     <a
-      class=" ds-link"
+      class="ds-link"
       href=""
     >
       hello

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.test.tsx CHANGED Viewed

@@ -38,6 +38,10 @@ test('renders the All Link 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/Link/index.tsx CHANGED Viewed

@@ -1,17 +1,22 @@
 import React from 'react';
 import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
 export interface LinkComponentContextProps {
   component: React.ElementType<LinkProps>;
   children?: React.ReactNode;
 }
-export const CommonLink: React.FC<LinkProps> = (props) => (
-  <LinkBase {...props}>{props.children}</LinkBase>
-);
+export const CommonLink: React.FC<LinkProps> = (props) => {
+  const defaultStyle = !props.className;
+  const underline = props.className ? !defaultStyle : defaultStyle;
+  return (
+    <LinkBase defaultStyle={defaultStyle} underline={underline} {...props}>
+      {props.children}
+    </LinkBase>
+  );
+};
 const LinkComponentContext =
-  React.createContext<React.ElementType<LinkProps>>(LinkBase);
+  React.createContext<React.ElementType<LinkProps>>(CommonLink);
 export const LinkProvider: React.FC<LinkComponentContextProps> = (props) => {
   return (
     <LinkComponentContext.Provider value={props.component}>

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

@@ -6,40 +6,50 @@ 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();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+  await page.locator('#root>section>a').hover();
+  await page.locator('#root>section>a').click();
+  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' });
+  // 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,
+    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();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+  await page.locator('#root>a').hover();
+  await page.locator('#root>a').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/NavList/NavListAuto/index.tsx CHANGED Viewed

@@ -1,14 +1,16 @@
 import React from 'react';
-import NavList from '@digigov/react-core/NavList';
-import NavListItemAction from '@digigov/react-core/NavListItemAction';
-import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
-import NavMenuContent from '@digigov/react-core/NavMenuContent';
-import NavMenuContentListItem from '@digigov/react-core/NavMenuContentListItem';
-import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
 import { Link } from '@digigov/ui/navigation/Link';
+import {
+  NavList,
+  NavListItemAction,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuContent,
+  NavMenuContainer,
+  NavMenuTitle,
+} from '@digigov/ui/navigation/NavList';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
-import Nav from '@digigov/ui/navigation/NavList/Nav';
-import NavMenuContentList from '@digigov/ui/navigation/NavList/NavMenuContentList';
+import { Nav } from '@digigov/ui/navigation/NavList/Nav';
 import { NavListAutoProps } from '@digigov/ui/navigation/NavList/types';
 export const NavListAuto: React.FC<NavListAutoProps> = ({

package/src/navigation/NavList/NavListItemAction.tsx ADDED Viewed

@@ -0,0 +1,69 @@
+export * from '@digigov/react-core/NavListItemActionBase';
+import React, { ForwardedRef } from 'react';
+import {
+  NavListItemButton,
+  NavListItemButtonProps,
+  NavListItemBadge,
+  NavListItemActionContainer,
+} from '@digigov/ui/navigation/NavList';
+import {
+  NavListItemLink,
+  NavListItemLinkProps,
+} from '@digigov/ui/navigation/NavList/NavListItemLink';
+export type LinkButtonJoinProps = NavListItemLinkProps & NavListItemButtonProps;
+export interface NavListItemActionBaseProps extends LinkButtonJoinProps {
+  /**
+   * label is optional.
+   * The label for the NavListItemActionBase.
+   */
+  label?: string;
+  /**
+   * arrow is optional.
+   * use arrow prop if you want to have arrow at the nav list item.
+   * @value true
+   * @value false
+   * @default false
+   */
+  arrow?: boolean;
+  badgeText?: string;
+}
+/**
+ * NavListItemAction must be inside the NavList.
+ * This component has a items of NavListItemLink component inside.
+ */
+export const NavListItemAction = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  NavListItemActionBaseProps
+>(function NavListItemAction(
+  { label, arrow = false, href, className, children, ...props },
+  ref
+) {
+  return (
+    <NavListItemActionContainer>
+      {href ? (
+        <NavListItemLink
+          {...props}
+          href={href}
+          className={className}
+          ref={ref as ForwardedRef<HTMLAnchorElement>}
+        >
+          {children || label}
+        </NavListItemLink>
+      ) : (
+        <NavListItemButton
+          {...props}
+          arrow={arrow}
+          className={className}
+          ref={ref as ForwardedRef<HTMLButtonElement>}
+        >
+          {children || label}
+        </NavListItemButton>
+      )}
+      {props.badgeText && <NavListItemBadge text={props.badgeText} />}
+    </NavListItemActionContainer>
+  );
+});
+export default NavListItemAction;

package/src/navigation/NavList/NavListItemLink.tsx ADDED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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';

package/src/navigation/NavList/__stories__/NavListWithoutNav.tsx CHANGED Viewed

@@ -7,21 +7,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 NavListWithoutNav = () => {
   const layout = 'vertical';

package/src/navigation/NavList/__stories__/UsingNavListAuto.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import BurgerIcon from '@digigov/ui/utils/SvgIcon';
 import { Button } from '@digigov/ui/form/Button';
+import { BurgerIcon } from '@digigov/ui/icons';
 import { NavListAuto } from '@digigov/ui/navigation/NavList';
 const links = [