@digigov/react-core 2.0.0-834daea4 → 2.0.0-87b6232d

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

@@ -5,10 +5,10 @@ exports[`renders the NavMenuContainer with active prop 1`] = `
   <div>
     <div
       aria-hidden="false"
-      class=" ds-nav-menu ds-nav-menu--horizontal"
+      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>
@@ -22,10 +22,10 @@ exports[`renders the NavMenuContainer with layout="horizontal" prop 1`] = `
   <div>
     <div
       aria-hidden="true"
-      class=" ds-nav-menu ds-nav-menu--horizontal ds-nav-menu--hidden"
+      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>
@@ -39,10 +39,10 @@ exports[`renders the NavMenuContainer with layout="vertical" prop 1`] = `
   <div>
     <div
       aria-hidden="true"
-      class=" ds-nav-menu ds-nav-menu--vertical ds-nav-menu--hidden"
+      class="ds-nav-menu ds-nav-menu--vertical ds-nav-menu--hidden"
     >
       <div
-        class=" ds-container"
+        class="ds-container ds-grid-item"
       >
         hello
       </div>
@@ -56,10 +56,10 @@ exports[`renders the NavMenuContainer with no props 1`] = `
   <div>
     <div
       aria-hidden="true"
-      class=" ds-nav-menu ds-nav-menu--horizontal ds-nav-menu--hidden"
+      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/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the NavMenuContentListBase with no props 1`] = `
 <body>
   <div>
     <ul
-      class=" ds-nav-menu__content-list"
+      class="ds-nav-menu__content-list"
     >
       hello
     </ul>

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/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the NavMenuContentListItem with no props 1`] = `
 <body>
   <div>
     <li
-      class=" ds-nav-menu__content-list-item"
+      class="ds-nav-menu__content-list-item"
     >
       hello
     </li>

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,10 +4,10 @@ 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"
+        class="ds-nav-menu__title-heading ds-heading-md"
       >
         hello
       </h3>

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

@@ -4,7 +4,7 @@ exports[`renders the NormalText with fontSize=14 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-14"
+      class="ds-body ds-!-font-size-14"
     >
       hello
     </span>
@@ -16,7 +16,7 @@ exports[`renders the NormalText with fontSize=16 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-16"
+      class="ds-body ds-!-font-size-16"
     >
       hello
     </span>
@@ -28,7 +28,7 @@ exports[`renders the NormalText with fontSize=19 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-19"
+      class="ds-body ds-!-font-size-19"
     >
       hello
     </span>
@@ -40,7 +40,7 @@ exports[`renders the NormalText with fontSize=24 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-24"
+      class="ds-body ds-!-font-size-24"
     >
       hello
     </span>
@@ -52,7 +52,7 @@ exports[`renders the NormalText with fontSize=30 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-30"
+      class="ds-body ds-!-font-size-30"
     >
       hello
     </span>
@@ -64,7 +64,7 @@ exports[`renders the NormalText with fontSize=36 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-36"
+      class="ds-body ds-!-font-size-36"
     >
       hello
     </span>
@@ -76,7 +76,7 @@ exports[`renders the NormalText with fontSize=48 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-48"
+      class="ds-body ds-!-font-size-48"
     >
       hello
     </span>
@@ -88,7 +88,7 @@ exports[`renders the NormalText with fontSize=72 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-72"
+      class="ds-body ds-!-font-size-72"
     >
       hello
     </span>
@@ -100,7 +100,7 @@ exports[`renders the NormalText with fontWeight=bold 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-weight-bold"
+      class="ds-body ds-!-font-weight-bold"
     >
       hello
     </span>
@@ -112,7 +112,7 @@ exports[`renders the NormalText with fontWeight=regular 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-weight-regular"
+      class="ds-body ds-!-font-weight-regular"
     >
       hello
     </span>
@@ -124,7 +124,7 @@ exports[`renders the NormalText with no props 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body"
+      class="ds-body"
     >
       hello
     </span>
@@ -136,7 +136,7 @@ exports[`renders the NormalText with size=lead 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--lg"
+      class="ds-body ds-body--lg"
     >
       hello
     </span>
@@ -148,7 +148,7 @@ exports[`renders the NormalText with size=lead and font size fontSize=48 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--lg ds-!-font-size-48"
+      class="ds-body ds-body--lg ds-!-font-size-48"
     >
       hello
     </span>
@@ -160,7 +160,7 @@ exports[`renders the NormalText with size=lead and font size fontSize=72 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--lg ds-!-font-size-72"
+      class="ds-body ds-body--lg ds-!-font-size-72"
     >
       hello
     </span>
@@ -172,7 +172,7 @@ exports[`renders the NormalText with size=lead and fontSize=14 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--lg ds-!-font-size-14"
+      class="ds-body ds-body--lg ds-!-font-size-14"
     >
       hello
     </span>
@@ -184,7 +184,7 @@ exports[`renders the NormalText with size=lead and fontSize=19 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--lg ds-!-font-size-19"
+      class="ds-body ds-body--lg ds-!-font-size-19"
     >
       hello
     </span>
@@ -196,7 +196,7 @@ exports[`renders the NormalText with size=lead and fontSize=24 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--lg ds-!-font-size-24"
+      class="ds-body ds-body--lg ds-!-font-size-24"
     >
       hello
     </span>
@@ -208,7 +208,7 @@ exports[`renders the NormalText with size=lead and fontSize=30 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--lg ds-!-font-size-30"
+      class="ds-body ds-body--lg ds-!-font-size-30"
     >
       hello
     </span>
@@ -220,19 +220,7 @@ exports[`renders the NormalText with size=lead and fontSize=36 1`] = `
 <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 fontSize=36 2`] = `
-<body>
-  <div>
-    <span
-      class=" ds-body ds-body--lg ds-!-font-size-36"
+      class="ds-body ds-body--lg ds-!-font-size-36"
     >
       hello
     </span>
@@ -244,7 +232,7 @@ exports[`renders the NormalText with size=lead and ontSize=16 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--lg ds-!-font-size-16"
+      class="ds-body ds-body--lg ds-!-font-size-16"
     >
       hello
     </span>
@@ -256,7 +244,7 @@ exports[`renders the NormalText with size=normal 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body"
+      class="ds-body"
     >
       hello
     </span>
@@ -268,7 +256,7 @@ exports[`renders the NormalText with size=normal and font size fontSize=48 1`] =
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-48"
+      class="ds-body ds-!-font-size-48"
     >
       hello
     </span>
@@ -280,7 +268,7 @@ exports[`renders the NormalText with size=normal and font size fontSize=72 1`] =
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-72"
+      class="ds-body ds-!-font-size-72"
     >
       hello
     </span>
@@ -292,7 +280,7 @@ exports[`renders the NormalText with size=normal and fontSize=14 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-14"
+      class="ds-body ds-!-font-size-14"
     >
       hello
     </span>
@@ -304,7 +292,7 @@ exports[`renders the NormalText with size=normal and fontSize=19 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-19"
+      class="ds-body ds-!-font-size-19"
     >
       hello
     </span>
@@ -316,7 +304,7 @@ exports[`renders the NormalText with size=normal and fontSize=24 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-24"
+      class="ds-body ds-!-font-size-24"
     >
       hello
     </span>
@@ -328,7 +316,7 @@ exports[`renders the NormalText with size=normal and fontSize=30 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-30"
+      class="ds-body ds-!-font-size-30"
     >
       hello
     </span>
@@ -340,7 +328,7 @@ exports[`renders the NormalText with size=normal and fontSize=36 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-36"
+      class="ds-body ds-!-font-size-36"
     >
       hello
     </span>
@@ -352,7 +340,7 @@ exports[`renders the NormalText with size=normal and ontSize=16 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-!-font-size-16"
+      class="ds-body ds-!-font-size-16"
     >
       hello
     </span>
@@ -364,7 +352,7 @@ exports[`renders the NormalText with size=small 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm"
+      class="ds-body ds-body--sm"
     >
       hello
     </span>
@@ -376,7 +364,7 @@ exports[`renders the NormalText with size=small and font size fontSize=48 1`] =
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm ds-!-font-size-48"
+      class="ds-body ds-body--sm ds-!-font-size-48"
     >
       hello
     </span>
@@ -388,7 +376,7 @@ exports[`renders the NormalText with size=small and font size fontSize=72 1`] =
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm ds-!-font-size-72"
+      class="ds-body ds-body--sm ds-!-font-size-72"
     >
       hello
     </span>
@@ -400,7 +388,7 @@ exports[`renders the NormalText with size=small and fontSize=14 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm ds-!-font-size-14"
+      class="ds-body ds-body--sm ds-!-font-size-14"
     >
       hello
     </span>
@@ -412,7 +400,7 @@ exports[`renders the NormalText with size=small and fontSize=19 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm ds-!-font-size-19"
+      class="ds-body ds-body--sm ds-!-font-size-19"
     >
       hello
     </span>
@@ -424,7 +412,7 @@ exports[`renders the NormalText with size=small and fontSize=24 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm ds-!-font-size-24"
+      class="ds-body ds-body--sm ds-!-font-size-24"
     >
       hello
     </span>
@@ -436,7 +424,7 @@ exports[`renders the NormalText with size=small and fontSize=30 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm ds-!-font-size-30"
+      class="ds-body ds-body--sm ds-!-font-size-30"
     >
       hello
     </span>
@@ -448,7 +436,7 @@ exports[`renders the NormalText with size=small and ontSize=16 1`] = `
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm ds-!-font-size-16"
+      class="ds-body ds-body--sm ds-!-font-size-16"
     >
       hello
     </span>
@@ -460,7 +448,7 @@ exports[`renders the NormalText with size=small, font size fontSize=72 and fontW
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm ds-!-font-size-72 ds-!-font-weight-bold"
+      class="ds-body ds-body--sm ds-!-font-size-72 ds-!-font-weight-bold"
     >
       hello
     </span>
@@ -472,7 +460,7 @@ exports[`renders the NormalText with size=small, font size fontSize=72 and fontW
 <body>
   <div>
     <span
-      class=" ds-body ds-body--sm ds-!-font-size-72 ds-!-font-weight-regular"
+      class="ds-body ds-body--sm ds-!-font-size-72 ds-!-font-weight-regular"
     >
       hello
     </span>

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(