@digigov/react-core 2.0.0-6452adf3 → 2.0.0-66d7c5e2

package/src/NavListItemActionBase/index.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import NavListItemActionBase from '@digigov/react-core/NavListItemActionBase';
+
+it('renders the NavListItemActionBase with no props', () => {
+  expect(
+    render(<NavListItemActionBase>hello</NavListItemActionBase>).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the NavListItemActionBase with href prop', () => {
+  expect(
+    render(<NavListItemActionBase href="/#">hello</NavListItemActionBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the NavListItemActionBase with label prop', () => {
+  expect(
+    render(<NavListItemActionBase label="hello"></NavListItemActionBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the NavListItemActionBase with arrow and label props', () => {
+  expect(
+    render(<NavListItemActionBase arrow label="hello"></NavListItemActionBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the NavListItemActionBase with arrow, badgeText and label props', () => {
+  expect(
+    render(
+      <NavListItemActionBase
+        badgeText="hello"
+        label="hello"
+      ></NavListItemActionBase>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/{NavListItemAction → NavListItemActionBase}/index.tsx

@@ -1,18 +1,19 @@
 import React, { ForwardedRef } from 'react';
 import NavListItemActionContainer from '@digigov/react-core/NavListItemActionContainer';
+import NavListItemBadge from '@digigov/react-core/NavListItemBadge';
 import NavListItemButton, {
   NavListItemButtonProps,
 } from '@digigov/react-core/NavListItemButton';
-import NavListItemLink, {
-  NavListItemLinkProps,
-} from '@digigov/react-core/NavListItemLink';
-import NavListItemBadge from '@digigov/react-core/NavListItemBadge';
+import NavListItemLinkBase, {
+  NavListItemLinkBaseProps,
+} from '@digigov/react-core/NavListItemLinkBase';
 
-export type LinkButtonJoinProps = NavListItemLinkProps & NavListItemButtonProps;
-export interface NavListItemActionProps extends LinkButtonJoinProps {
+export type LinkButtonJoinProps = NavListItemLinkBaseProps &
+  NavListItemButtonProps;
+export interface NavListItemActionBaseProps extends LinkButtonJoinProps {
   /**
    * label is optional.
-   * The label for the NavListItemAction.
+   * The label for the NavListItemActionBase.
    */
   label?: string;
 
@@ -30,24 +31,24 @@ export interface NavListItemActionProps extends LinkButtonJoinProps {
  * NavListItemAction must be inside the NavList.
  * This component has a items of NavListItemLink component inside.
  */
-export const NavListItemAction = React.forwardRef<
+export const NavListItemActionBase = React.forwardRef<
   HTMLButtonElement | HTMLAnchorElement,
-  NavListItemActionProps
->(function NavListItemAction(
+  NavListItemActionBaseProps
+>(function NavListItemActionBase(
   { label, arrow = false, href, className, children, ...props },
   ref
 ) {
   return (
     <NavListItemActionContainer>
       {href ? (
-        <NavListItemLink
+        <NavListItemLinkBase
           {...props}
           href={href}
           className={className}
           ref={ref as ForwardedRef<HTMLAnchorElement>}
         >
           {children || label}
-        </NavListItemLink>
+        </NavListItemLinkBase>
       ) : (
         <NavListItemButton
           {...props}
@@ -58,11 +59,9 @@ export const NavListItemAction = React.forwardRef<
           {children || label}
         </NavListItemButton>
       )}
-      {props.badgeText && (
-        <NavListItemBadge text={props.badgeText} />
-      )}
+      {props.badgeText && <NavListItemBadge text={props.badgeText} />}
     </NavListItemActionContainer>
   );
 });
 
-export default NavListItemAction;
+export default NavListItemActionBase;

package/src/NavListItemActionContainer/index.native.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import CoreNavListItemActionContainer, {
   NavListItemActionContainerProps,
 } from '@digigov/react-core/NavListItemActionContainer/index.web';
-import extend from '@digigov/react-core/utils/extend.native';
+import extend from '@digigov/react-core/utils/index.native';
 
 export const NavListItemActionContainer = extend<
   NavListItemActionContainerProps,

package/src/NavListItemActionContainer/index.test.tsx

@@ -5,6 +5,7 @@ import NavListItemActionContainer from '@digigov/react-core/NavListItemActionCon
 
 it('renders the NavListItemActionContainer with no props', () => {
   expect(
-    render(<NavListItemActionContainer>hello</NavListItemActionContainer>).baseElement
+    render(<NavListItemActionContainer>hello</NavListItemActionContainer>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/NavListItemActionContainer/index.web.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface NavListItemActionContainerProps extends BaseProps<'li'> { }
+export interface NavListItemActionContainerProps extends BaseProps<'li'> {}
 /**
  * NavListItemActionContainer must be inside the NavList.
  * This component has a items of NavListItemLink component inside.

package/src/NavListItemBadge/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface NavListItemBadgeProps extends BaseProps<'span'> {
   /**

package/src/NavListItemButton/index.test.tsx

@@ -3,17 +3,21 @@ import { render } from '@testing-library/react';
 import NavListItemButton from '@digigov/react-core/NavListItemButton';
 
 it('renders the NavListItemButton with no props', () => {
-  expect(render(<NavListItemButton>hello</NavListItemButton>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NavListItemButton>hello</NavListItemButton>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NavListItemButton with active=true', () => {
   expect(
-    render(<NavListItemButton active={true}>hello</NavListItemButton>).baseElement
+    render(<NavListItemButton active={true}>hello</NavListItemButton>)
+      .baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the NavListItemButton with active=false', () => {
   expect(
-    render(<NavListItemButton active={false}>hello</NavListItemButton>).baseElement
+    render(<NavListItemButton active={false}>hello</NavListItemButton>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/{NavListItemLink → NavListItemLinkBase}/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the NavListItemLink with active=false 1`] = `
+exports[`renders the NavListItemLinkBase with active=false 1`] = `
 <body>
   <div>
     <a
@@ -12,7 +12,7 @@ exports[`renders the NavListItemLink with active=false 1`] = `
 </body>
 `;
 
-exports[`renders the NavListItemLink with active=true 1`] = `
+exports[`renders the NavListItemLinkBase with active=true 1`] = `
 <body>
   <div>
     <a
@@ -24,7 +24,7 @@ exports[`renders the NavListItemLink with active=true 1`] = `
 </body>
 `;
 
-exports[`renders the NavListItemLink with href and active=false 1`] = `
+exports[`renders the NavListItemLinkBase with href and active=false 1`] = `
 <body>
   <div>
     <a
@@ -37,7 +37,7 @@ exports[`renders the NavListItemLink with href and active=false 1`] = `
 </body>
 `;
 
-exports[`renders the NavListItemLink with href and active=true 1`] = `
+exports[`renders the NavListItemLinkBase with href and active=true 1`] = `
 <body>
   <div>
     <a
@@ -50,7 +50,7 @@ exports[`renders the NavListItemLink with href and active=true 1`] = `
 </body>
 `;
 
-exports[`renders the NavListItemLink with no props 1`] = `
+exports[`renders the NavListItemLinkBase with no props 1`] = `
 <body>
   <div>
     <a

package/src/NavListItemLinkBase/index.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { NavListItemLinkBase } from '@digigov/react-core/NavListItemLinkBase';
+
+it('renders the NavListItemLinkBase with no props', () => {
+  expect(
+    render(<NavListItemLinkBase>hello</NavListItemLinkBase>).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the NavListItemLinkBase with active=true', () => {
+  expect(
+    render(<NavListItemLinkBase active={true}>hello</NavListItemLinkBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the NavListItemLinkBase with active=false', () => {
+  expect(
+    render(<NavListItemLinkBase active={false}>hello</NavListItemLinkBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+it('renders the NavListItemLinkBase with href and active=false', () => {
+  expect(
+    render(
+      <NavListItemLinkBase href="/" active={false}>
+        hello
+      </NavListItemLinkBase>
+    ).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the NavListItemLinkBase with href and active=true', () => {
+  expect(
+    render(
+      <NavListItemLinkBase href="/" active={false}>
+        hello
+      </NavListItemLinkBase>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/{NavListItemLink → NavListItemLinkBase}/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
-import { BaseProps } from '@digigov/react-core/Base';
-import Link from '@digigov/react-core/LinkBase';
+import { LinkBase, LinkBaseProps } from '@digigov/react-core/LinkBase';
 
-export interface NavListItemLinkProps extends BaseProps<'a'> {
+export interface NavListItemLinkBaseProps extends LinkBaseProps {
   /**
    * When the NavListItemLink is active, that means that we are in this option / page of the Nav.
    * active is optional.
@@ -16,15 +15,15 @@ export interface NavListItemLinkProps extends BaseProps<'a'> {
 /**
  * NavListItemLink is an <a> element. It should be inside the NavListItem component.
  */
-export const NavListItemLink = React.forwardRef<
+export const NavListItemLinkBase = React.forwardRef<
   HTMLAnchorElement,
-  NavListItemLinkProps
->(function NavListItemLink(
+  NavListItemLinkBaseProps
+>(function NavListItemLinkBase(
   { active, href, className, children, ...props },
   ref
 ) {
   return (
-    <Link
+    <LinkBase
       href={href}
       ref={ref}
       className={clsx(className, {
@@ -34,8 +33,8 @@ export const NavListItemLink = React.forwardRef<
       {...props}
     >
       {children}
-    </Link>
+    </LinkBase>
   );
 });
 
-export default NavListItemLink;
+export default NavListItemLinkBase;

package/src/NavMenuContainer/__snapshots__/index.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`renders the NavMenuContainer with active prop 1`] = `
       class="ds-nav-menu ds-nav-menu--horizontal"
     >
       <div
-        class="ds-container ds-grid ds-gap-4"
+        class="ds-container ds-grid ds-grid-item ds-gap-4"
       >
         hello
       </div>
@@ -25,7 +25,7 @@ exports[`renders the NavMenuContainer with layout="horizontal" prop 1`] = `
       class="ds-nav-menu ds-nav-menu--horizontal ds-nav-menu--hidden"
     >
       <div
-        class="ds-container ds-grid ds-gap-4"
+        class="ds-container ds-grid ds-grid-item ds-gap-4"
       >
         hello
       </div>
@@ -42,7 +42,7 @@ exports[`renders the NavMenuContainer with layout="vertical" prop 1`] = `
       class="ds-nav-menu ds-nav-menu--vertical ds-nav-menu--hidden"
     >
       <div
-        class="ds-container"
+        class="ds-container ds-grid-item"
       >
         hello
       </div>
@@ -59,7 +59,7 @@ exports[`renders the NavMenuContainer with no props 1`] = `
       class="ds-nav-menu ds-nav-menu--horizontal ds-nav-menu--hidden"
     >
       <div
-        class="ds-container ds-grid ds-gap-4"
+        class="ds-container ds-grid ds-grid-item ds-gap-4"
       >
         hello
       </div>

package/src/NavMenuContainer/index.test.tsx

@@ -3,7 +3,9 @@ import { render } from '@testing-library/react';
 
 import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
 it('renders the NavMenuContainer with no props', () => {
-  expect(render(<NavMenuContainer>hello</NavMenuContainer>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NavMenuContainer>hello</NavMenuContainer>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the NavMenuContainer with active prop', () => {
   expect(
@@ -12,11 +14,13 @@ it('renders the NavMenuContainer with active prop', () => {
 });
 it('renders the NavMenuContainer with layout="vertical" prop', () => {
   expect(
-    render(<NavMenuContainer layout="vertical">hello</NavMenuContainer>).baseElement
+    render(<NavMenuContainer layout="vertical">hello</NavMenuContainer>)
+      .baseElement
   ).toMatchSnapshot();
 });
 it('renders the NavMenuContainer with layout="horizontal" prop', () => {
   expect(
-    render(<NavMenuContainer layout="horizontal">hello</NavMenuContainer>).baseElement
+    render(<NavMenuContainer layout="horizontal">hello</NavMenuContainer>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/NavMenuContent/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the NavMenuContainerContent with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-nav-menu__content xs:ds-grid__col-span-12 sm:ds-grid__col-span-8"
+      class="ds-nav-menu__content ds-grid-item xs:ds-grid__col-span-12 sm:ds-grid__col-span-8"
     >
       hello
     </div>

package/src/NavMenuContent/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
-import { GridProps } from '@digigov/react-core/Grid';
-import Grid from '@digigov/react-core/Grid';
+import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface NavMenuContentProps extends GridProps { }
+export interface NavMenuContentProps extends GridProps {}
 /**
  *
  * NavMenuContent is the content menu component.

package/src/NavMenuContentListBase/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface NavMenuContentListProps extends BaseProps<'ul'> { }
+export interface NavMenuContentListProps extends BaseProps<'ul'> {}
 /**
  * NavMenuContentListBase contains the ul list nav menu.
  * Inside this component must be NavMenuContentListItem component.

package/src/NavMenuContentListItem/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface NavMenuContentListItemProps extends BaseProps<'li'> { }
+export interface NavMenuContentListItemProps extends BaseProps<'li'> {}
 /**
  * NavMenuContentListItem contains all li items nav menu.
  *

package/src/NavMenuTitle/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the NavMenuTitle with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-nav-menu__title xs:ds-grid__col-span-12 sm:ds-grid__col-span-4"
+      class="ds-nav-menu__title ds-grid-item xs:ds-grid__col-span-12 sm:ds-grid__col-span-4"
     >
       <h3
         class="ds-nav-menu__title-heading ds-heading-md"

package/src/NavMenuTitle/index.test.tsx

@@ -3,5 +3,7 @@ import { render } from '@testing-library/react';
 
 import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
 it('renders the NavMenuTitle with no props', () => {
-  expect(render(<NavMenuTitle>hello</NavMenuTitle>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NavMenuTitle>hello</NavMenuTitle>).baseElement
+  ).toMatchSnapshot();
 });

package/src/NavMenuTitle/index.tsx

@@ -4,7 +4,7 @@ import { BaseProps } from '@digigov/react-core/Base';
 import Grid from '@digigov/react-core/Grid';
 import Heading from '@digigov/react-core/Heading';
 
-export interface NavMenuTitleProps extends BaseProps<'div'> { }
+export interface NavMenuTitleProps extends BaseProps<'div'> {}
 /**
  *
  * NavMenuTitle is the main Title for the nav list items.

package/src/NormalText/__snapshots__/index.test.tsx.snap

@@ -228,18 +228,6 @@ exports[`renders the NormalText with size=lead and fontSize=36 1`] = `
 </body>
 `;
 
-exports[`renders the NormalText with size=lead and fontSize=36 2`] = `
-<body>
-  <div>
-    <span
-      class="ds-body ds-body--lg ds-!-font-size-36"
-    >
-      hello
-    </span>
-  </div>
-</body>
-`;
-
 exports[`renders the NormalText with size=lead and ontSize=16 1`] = `
 <body>
   <div>

package/src/NormalText/index.test.tsx

@@ -8,15 +8,21 @@ it('renders the NormalText with no props', () => {
 });
 
 it('renders the NormalText with size=lead', () => {
-  expect(render(<NormalText size={'lg'}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText size={'lg'}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with size=normal', () => {
-  expect(render(<NormalText size={'md'}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText size={'md'}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with size=small', () => {
-  expect(render(<NormalText size={'sm'}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText size={'sm'}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with fontWeight=regular', () => {
@@ -32,35 +38,51 @@ it('renders the NormalText with fontWeight=bold', () => {
 });
 
 it('renders the NormalText with fontSize=14', () => {
-  expect(render(<NormalText fontSize={14}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText fontSize={14}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with fontSize=16', () => {
-  expect(render(<NormalText fontSize={16}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText fontSize={16}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with fontSize=19', () => {
-  expect(render(<NormalText fontSize={19}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText fontSize={19}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with fontSize=24', () => {
-  expect(render(<NormalText fontSize={24}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText fontSize={24}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with fontSize=30', () => {
-  expect(render(<NormalText fontSize={30}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText fontSize={30}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with fontSize=36', () => {
-  expect(render(<NormalText fontSize={36}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText fontSize={36}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with fontSize=48', () => {
-  expect(render(<NormalText fontSize={48}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText fontSize={48}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with fontSize=72', () => {
-  expect(render(<NormalText fontSize={72}>hello</NormalText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<NormalText fontSize={72}>hello</NormalText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the NormalText with size=lead and fontSize=14', () => {
@@ -273,16 +295,6 @@ it('renders the NormalText with size=small and fontSize=30', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the NormalText with size=lead and fontSize=36', () => {
-  expect(
-    render(
-      <NormalText size={'lg'} fontSize={36}>
-        hello
-      </NormalText>
-    ).baseElement
-  ).toMatchSnapshot();
-});
-
 it('renders the NormalText with size=small and font size fontSize=48', () => {
   expect(
     render(

package/src/NotificationBannerContainer/index.test.tsx

@@ -5,7 +5,8 @@ import NotificationBannerContainer from '@digigov/react-core/NotificationBannerC
 
 it('renders the NotificationBannerContainer with no props', () => {
   expect(
-    render(<NotificationBannerContainer>hello</NotificationBannerContainer>).baseElement
+    render(<NotificationBannerContainer>hello</NotificationBannerContainer>)
+      .baseElement
   ).toMatchSnapshot();
 });
 

package/src/NotificationBannerContainer/index.tsx

@@ -9,9 +9,10 @@ export interface NotificationBannerContainerProps extends BaseProps<'div'> {
    * @value 'info'
    * @value 'success'
    * @value 'error'
+   * @value 'error-group'
    * @default 'info'.
    */
-  variant?: 'info' | 'success' | 'error';
+  variant?: 'info' | 'success' | 'error' | 'error-group';
   /**
    * dense is optional.
    * @value true NotificationBannerContainer will be dense.

package/src/NotificationBannerContent/index.test.tsx

@@ -5,6 +5,7 @@ import NotificationBannerContent from '@digigov/react-core/NotificationBannerCon
 
 it('renders the NotificationBannerContent with no props', () => {
   expect(
-    render(<NotificationBannerContent>hello</NotificationBannerContent>).baseElement
+    render(<NotificationBannerContent>hello</NotificationBannerContent>)
+      .baseElement
   ).toMatchSnapshot();
 });