@digigov/react-core 1.0.0-rc.3 → 1.0.0-rc.5

package/src/NavListItemAction/index.tsx

@@ -1,27 +1,46 @@
 import React, { ForwardedRef } from 'react';
-import NavListItemLink, { NavListItemLinkProps } from '@digigov/react-core/NavListItemLink';
-import NavListItemButton, { NavListItemButtonProps } from '@digigov/react-core/NavListItemButton';
 import NavListItemActionContainer from '@digigov/react-core/NavListItemActionContainer';
+import NavListItemButton, {
+  NavListItemButtonProps,
+} from '@digigov/react-core/NavListItemButton';
+import NavListItemLink, {
+  NavListItemLinkProps,
+} from '@digigov/react-core/NavListItemLink';
 
 export type LinkButtonJoinProps = NavListItemLinkProps & NavListItemButtonProps;
 export interface NavListItemActionProps extends LinkButtonJoinProps {
   label?: string;
   arrow?: boolean;
-};
+}
 /**
  * NavListItemAction must be inside the NavList.
  * This component has a items of NavListItemLink component inside.
  */
-export const NavListItemAction = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, NavListItemActionProps>(
-  function NavListItemAction({ className, children, ...props }, ref) {
-    return (<NavListItemActionContainer>
-      {props.href ?
-        <NavListItemLink {...props} className={className} ref={ref as ForwardedRef<HTMLAnchorElement>}>{children || props.label}</NavListItemLink>
-        :
-        <NavListItemButton {...props} className={className} ref={ref as ForwardedRef<HTMLButtonElement>}>{children || props.label}</NavListItemButton>}
+export const NavListItemAction = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  NavListItemActionProps
+>(function NavListItemAction({ className, children, ...props }, ref) {
+  return (
+    <NavListItemActionContainer>
+      {props.href ? (
+        <NavListItemLink
+          {...props}
+          className={className}
+          ref={ref as ForwardedRef<HTMLAnchorElement>}
+        >
+          {children || props.label}
+        </NavListItemLink>
+      ) : (
+        <NavListItemButton
+          {...props}
+          className={className}
+          ref={ref as ForwardedRef<HTMLButtonElement>}
+        >
+          {children || props.label}
+        </NavListItemButton>
+      )}
     </NavListItemActionContainer>
-    );
-  }
-);
+  );
+});
 
 export default NavListItemAction;

package/src/NavListItemActionContainer/index.test.tsx

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

package/src/NavListItemActionContainer/index.tsx

@@ -7,21 +7,22 @@ export interface NavListItemActionContainerProps extends BaseProps<'li'> {}
  * NavListItemActionContainer must be inside the NavList.
  * This component has a items of NavListItemLink component inside.
  */
-export const NavListItemActionContainer = React.forwardRef<HTMLLIElement, NavListItemActionContainerProps>(
-  function NavListItemActionContainer({ className, children, ...props }, ref) {
-    return (
-      <Base
-        as="li"
-        ref={ref}
-        className={clsx(className, {
-          'govgr-nav__list-item': true,
-        })}
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
+export const NavListItemActionContainer = React.forwardRef<
+  HTMLLIElement,
+  NavListItemActionContainerProps
+>(function NavListItemActionContainer({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="li"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-nav__list-item': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
 
 export default NavListItemActionContainer;

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

@@ -20,7 +20,7 @@ exports[`renders the NavListItemButton with active=false 1`] = `
         className="govgr-nav__list-item-btn govgr-link govgr-print-hidden"
       >
         hello
-        <ArrowIcon
+        <ChevronIcon
           direction="down"
         >
           <ForwardRef(Icon)
@@ -54,7 +54,7 @@ exports[`renders the NavListItemButton with active=false 1`] = `
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>
           </ForwardRef(Icon)>
-        </ArrowIcon>
+        </ChevronIcon>
       </button>
     </ForwardRef(Base)>
   </ForwardRef(Button)>
@@ -81,7 +81,7 @@ exports[`renders the NavListItemButton with active=true 1`] = `
         className="govgr-nav__list-item-btn--active govgr-nav__list-item-btn govgr-link govgr-print-hidden"
       >
         hello
-        <ArrowIcon
+        <ChevronIcon
           direction="up"
         >
           <ForwardRef(Icon)
@@ -115,7 +115,7 @@ exports[`renders the NavListItemButton with active=true 1`] = `
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>
           </ForwardRef(Icon)>
-        </ArrowIcon>
+        </ChevronIcon>
       </button>
     </ForwardRef(Base)>
   </ForwardRef(Button)>
@@ -137,7 +137,7 @@ exports[`renders the NavListItemButton with no props 1`] = `
         className="govgr-nav__list-item-btn govgr-link govgr-print-hidden"
       >
         hello
-        <ArrowIcon
+        <ChevronIcon
           direction="down"
         >
           <ForwardRef(Icon)
@@ -171,7 +171,7 @@ exports[`renders the NavListItemButton with no props 1`] = `
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>
           </ForwardRef(Icon)>
-        </ArrowIcon>
+        </ChevronIcon>
       </button>
     </ForwardRef(Base)>
   </ForwardRef(Button)>

package/src/NavListItemButton/index.tsx

@@ -1,26 +1,26 @@
 import React from 'react';
 import clsx from 'clsx';
 import Button, { ButtonProps } from '@digigov/react-core/Button';
-import { ArrowIcon } from '@digigov/react-icons';
+import { ChevronIcon } from '@digigov/react-icons';
 
 export interface NavListItemButtonProps extends ButtonProps {
   /**
-  * When the NavListItemButton is active, that means that we are in this option / page of the Nav.
-  * NavListItemButton for nav menu.
-  * active is optional.
-  *
-  * @value true
-  * @value false
-  */
+   * When the NavListItemButton is active, that means that we are in this option / page of the Nav.
+   * NavListItemButton for nav menu.
+   * active is optional.
+   *
+   * @value true
+   * @value false
+   */
   active?: boolean;
   /**
-  * use arrow prop if you want to have arrows in navigation buttons.
-  * arrow is optional.
-  *
-  * @value true
-  * @value false
-  * @default true
-  */
+   * use arrow prop if you want to have arrows in navigation buttons.
+   * arrow is optional.
+   *
+   * @value true
+   * @value false
+   * @default true
+   */
   arrow?: boolean;
 }
 /**
@@ -45,7 +45,7 @@ export const NavListItemButton = React.forwardRef<
       {...props}
     >
       {children}
-      {arrow && <ArrowIcon direction={active ? 'up' : 'down'} />}
+      {arrow && <ChevronIcon direction={active ? 'up' : 'down'} />}
     </Button>
   );
 });

package/src/NavListItemLink/index.tsx

@@ -5,12 +5,12 @@ import Link from '@digigov/react-core/LinkBase';
 
 export interface NavListItemLinkProps extends BaseProps<'a'> {
   /**
-  * When the NavListItemLink is active, that means that we are in this option / page of the Nav.
-  * active is optional.
-  *
-  * @value true
-  * @value false
-  */
+   * When the NavListItemLink is active, that means that we are in this option / page of the Nav.
+   * active is optional.
+   *
+   * @value true
+   * @value false
+   */
   active?: boolean;
 }
 /**

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

@@ -15,21 +15,24 @@ exports[`renders the NavMenuContainer with active prop 1`] = `
     >
       <ForwardRef(Container)
         grid={true}
+        spacing={4}
       >
-        <ForwardRef(Base)
-          as="div"
+        <ForwardRef(Grid)
           className="govgr-container"
+          container={true}
+          spacing={4}
         >
-          <div
-            className="govgr-container"
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-container govgr-gap-4 govgr-grid"
           >
             <div
-              className="govgr-main-wrapper"
+              className="govgr-container govgr-gap-4 govgr-grid"
             >
               hello
             </div>
-          </div>
-        </ForwardRef(Base)>
+          </ForwardRef(Base)>
+        </ForwardRef(Grid)>
       </ForwardRef(Container)>
     </div>
   </ForwardRef(Base)>
@@ -51,21 +54,24 @@ exports[`renders the NavMenuContainer with layout="horizontal" prop 1`] = `
     >
       <ForwardRef(Container)
         grid={true}
+        spacing={4}
       >
-        <ForwardRef(Base)
-          as="div"
+        <ForwardRef(Grid)
           className="govgr-container"
+          container={true}
+          spacing={4}
         >
-          <div
-            className="govgr-container"
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-container govgr-gap-4 govgr-grid"
           >
             <div
-              className="govgr-main-wrapper"
+              className="govgr-container govgr-gap-4 govgr-grid"
             >
               hello
             </div>
-          </div>
-        </ForwardRef(Base)>
+          </ForwardRef(Base)>
+        </ForwardRef(Grid)>
       </ForwardRef(Container)>
     </div>
   </ForwardRef(Base)>
@@ -87,17 +93,24 @@ exports[`renders the NavMenuContainer with layout="vertical" prop 1`] = `
     >
       <ForwardRef(Container)
         grid={false}
+        spacing={4}
       >
-        <ForwardRef(Base)
-          as="div"
+        <ForwardRef(Grid)
           className="govgr-container"
+          container={false}
+          spacing={4}
         >
-          <div
+          <ForwardRef(Base)
+            as="div"
             className="govgr-container"
           >
-            hello
-          </div>
-        </ForwardRef(Base)>
+            <div
+              className="govgr-container"
+            >
+              hello
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(Grid)>
       </ForwardRef(Container)>
     </div>
   </ForwardRef(Base)>

package/src/NavMenuContainer/index.test.tsx

@@ -6,11 +6,17 @@ it('renders the NavMenuContainer with no props', () => {
   expect(mount(<NavMenuContainer>hello</NavMenuContainer>)).toMatchSnapshot();
 });
 it('renders the NavMenuContainer with active prop', () => {
-  expect(mount(<NavMenuContainer active>hello</NavMenuContainer>)).toMatchSnapshot();
+  expect(
+    mount(<NavMenuContainer active>hello</NavMenuContainer>)
+  ).toMatchSnapshot();
 });
 it('renders the NavMenuContainer with layout="vertical" prop', () => {
-  expect(mount(<NavMenuContainer layout="vertical">hello</NavMenuContainer>)).toMatchSnapshot();
+  expect(
+    mount(<NavMenuContainer layout="vertical">hello</NavMenuContainer>)
+  ).toMatchSnapshot();
 });
 it('renders the NavMenuContainer with layout="horizontal" prop', () => {
-  expect(mount(<NavMenuContainer layout="horizontal">hello</NavMenuContainer>)).toMatchSnapshot();
+  expect(
+    mount(<NavMenuContainer layout="horizontal">hello</NavMenuContainer>)
+  ).toMatchSnapshot();
 });

package/src/NavMenuContainer/index.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
+import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import Container from '@digigov/react-core/Container';
-import clsx from 'clsx';
 
 export interface NavMenuContainerProps extends BaseProps<'div'> {
   /**
- * active is optional.
- * Exactly one NavMenu should be active every time.
- * This declares that this content is active and should depend of the 'selected' NavItem.
- * @value true
- * @value false
- */
+   * active is optional.
+   * Exactly one NavMenu should be active every time.
+   * This declares that this content is active and should depend of the 'selected' NavItem.
+   * @value true
+   * @value false
+   */
   active?: boolean;
   /**
-  * layout prop sets the display layout for the nav list.
-  * @value 'vertical'
-  * @value 'horizontal'
-  * @default 'horizontal'
-  */
+   * layout prop sets the display layout for the nav list.
+   * @value 'vertical'
+   * @value 'horizontal'
+   * @default 'horizontal'
+   */
   layout?: 'vertical' | 'horizontal';
 }
 /**

package/src/NavMenuContent/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import clsx from 'clsx';
 import { GridProps } from '@digigov/react-core/Grid';
 import Grid from '@digigov/react-core/Grid';
-import clsx from 'clsx';
 
 export interface NavMenuContentProps extends GridProps {}
 /**
@@ -14,9 +14,17 @@ export const NavMenuContent = React.forwardRef<
   NavMenuContentProps
 >(function NavMenuContent({ className, children, ...props }, ref) {
   return (
-    <Grid item xs={12} sm={8} spacing={2} ref={ref} className={clsx(className, {
-      'govgr-nav-menu__content': true
-    })} {...props}>
+    <Grid
+      item
+      xs={12}
+      sm={8}
+      spacing={2}
+      ref={ref}
+      className={clsx(className, {
+        'govgr-nav-menu__content': true,
+      })}
+      {...props}
+    >
       {children}
     </Grid>
   );

package/src/NavMenuContentListItem/index.test.tsx

@@ -4,8 +4,6 @@ import { mount } from 'enzyme';
 import NavMenuContentListItem from '@digigov/react-core/NavMenuContentListItem';
 it('renders the NavMenuContentListItem with no props', () => {
   expect(
-    mount(
-      <NavMenuContentListItem>hello</NavMenuContentListItem>
-    )
+    mount(<NavMenuContentListItem>hello</NavMenuContentListItem>)
   ).toMatchSnapshot();
 });

package/src/NavMenuContentListItem/index.tsx

@@ -10,10 +10,7 @@ export interface NavMenuContentListItemProps extends BaseProps<'li'> {}
 export const NavMenuContentListItem = React.forwardRef<
   HTMLLIElement,
   NavMenuContentListItemProps
->(function NavMenuContentListItem(
-  { className, children, ...props },
-  ref
-) {
+>(function NavMenuContentListItem({ className, children, ...props }, ref) {
   return (
     <Base
       as="li"

package/src/NavMenuTitle/index.test.tsx

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

package/src/NavMenuTitle/index.tsx

@@ -10,32 +10,31 @@ export interface NavMenuTitleProps extends BaseProps<'div'> {}
  * NavMenuTitle is the main Title for the nav list items.
  * NavMenuTitle  must be inside NavMenuContainer component.
  */
-export const NavMenuTitle = React.forwardRef<
-  HTMLDivElement,
-  NavMenuTitleProps
->(function NavMenuTitle({ className, children, ...props }, ref) {
-  return (
-    <Grid
-      item
-      xs={12}
-      sm={4}
-      ref={ref}
-      className={clsx(className, {
-        'govgr-nav-menu__title': true,
-      })}
-      {...props}
-    >
-      <Heading
-        element="h3"
-        size="md"
-        className={clsx({
-          'govgr-nav-menu__title-heading': true,
+export const NavMenuTitle = React.forwardRef<HTMLDivElement, NavMenuTitleProps>(
+  function NavMenuTitle({ className, children, ...props }, ref) {
+    return (
+      <Grid
+        item
+        xs={12}
+        sm={4}
+        ref={ref}
+        className={clsx(className, {
+          'govgr-nav-menu__title': true,
         })}
+        {...props}
       >
-        {children}
-      </Heading>
-    </Grid>
-  );
-});
+        <Heading
+          element="h3"
+          size="md"
+          className={clsx({
+            'govgr-nav-menu__title-heading': true,
+          })}
+        >
+          {children}
+        </Heading>
+      </Grid>
+    );
+  }
+);
 
 export default NavMenuTitle;

package/src/NormalText/index.test.tsx

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

package/src/NormalText/index.tsx

@@ -24,7 +24,7 @@ export const NormalText = React.forwardRef<
 ) {
   return (
     <Typography
-      as='span'
+      as="span"
       fontWeight={fontWeight}
       fontSize={fontSize}
       ref={ref}

package/src/NotificationBannerHeading/index.tsx

@@ -15,7 +15,7 @@ export const NotificationBannerHeading = React.forwardRef<
   return (
     <Heading
       element="h3"
-      size='md'
+      size="md"
       ref={ref}
       className={clsx(className, {
         'govgr-notification-banner__heading': true,

package/src/NotificationBannerLink/index.tsx

@@ -11,10 +11,7 @@ export interface NotificationBannerLinkProps extends LinkBaseProps {}
 export const NotificationBannerLink = React.forwardRef<
   HTMLAnchorElement,
   NotificationBannerLinkProps
->(function NotificationBannerLink(
-  { className, children, ...props },
-  ref
-) {
+>(function NotificationBannerLink({ className, children, ...props }, ref) {
   return (
     <LinkBase
       ref={ref}

package/src/PageTitleContainer/index.test.tsx

@@ -4,5 +4,7 @@ import { mount } from 'enzyme';
 import PageTitleContainer from '@digigov/react-core/PageTitleContainer';
 
 it('renders the PageTitleContainer with no props', () => {
-  expect(mount(<PageTitleContainer>hello</PageTitleContainer>)).toMatchSnapshot();
+  expect(
+    mount(<PageTitleContainer>hello</PageTitleContainer>)
+  ).toMatchSnapshot();
 });

package/src/Pagination/index.spec.tsx

@@ -7,5 +7,5 @@ it('renders the Pagination with no props', () => {
   expect(mount(<Pagination>hello</Pagination>)).toMatchSnapshot();
 });
 it('renders the Pagination with size=sm', () => {
-  expect(mount(<Pagination size='sm'>hello</Pagination>)).toMatchSnapshot();
+  expect(mount(<Pagination size="sm">hello</Pagination>)).toMatchSnapshot();
 });