@digigov/react-core 0.25.4 → 0.26.0

package/src/Nav/index.tsx

@@ -1,34 +1,34 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NavProps extends BaseProps<'nav'> {
   /**
-   * border is optional.
-   * border prop contains border-bottom styling.
+   * active is optional.
+   * active prop add background color to navigation link.
+   * use this prop only for header navigation;
    */
-  border?: boolean;
+  open?: boolean;
   /**
-   * fixed is optional.
-   * fixed prop allows element to be positioned relative to the viewport
+   * layout prop sets the display layout for the nav list
+   * layout is horizontal by default.
    */
-  fixed?: boolean;
+  layout?: 'vertical' | 'horizontal';
   /**
    * hidden is optional.
    * hidden prop hides the nav element when it is called from a navItem.
    */
   hidden?: boolean;
   /**
-   * layout prop sets the display layout for the nav list
-   * layout is horizontal by default.
+   * fixed is optional.
+   * fixed prop allows element to be positioned relative to the viewport
    */
-  layout?: 'vertical' | 'horizontal';
+  fixed?: boolean;
   /**
-   * active is optional.
-   * active prop add background color to navigation link.
-   * use this prop only for header navigation;
+   * border is optional.
+   * border prop contains border-bottom styling.
    */
-  open?: boolean;
+  border?: boolean;
 }
 /**
  * Nav is mainly used under the Header.
@@ -36,13 +36,13 @@ export interface NavProps extends BaseProps<'nav'> {
  */
 export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
   {
-    border = true,
-    children,
     className,
-    fixed = true,
-    hidden = false,
-    layout = 'horizontal',
     open = false,
+    layout = 'horizontal',
+    hidden = false,
+    fixed = true,
+    border = true,
+    children,
     ...props
   },
   ref
@@ -50,6 +50,7 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
   return (
     <Base
       as="nav"
+      ref={ref}
       className={clsx(className, {
         'govgr-nav': true,
         'govgr-nav--horizontal': layout === 'horizontal',
@@ -59,7 +60,6 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
         'govgr-nav--open': open,
         'govgr-nav--hidden': hidden,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/NavList/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NavListProps extends BaseProps<'ul'> {
   /**
@@ -14,15 +14,15 @@ export interface NavListProps extends BaseProps<'ul'> {
  * This component has a list of NavListItem component inside.
  */
 export const NavList = React.forwardRef<HTMLUListElement, NavListProps>(
-  function NavList({ active = false, children, className, ...props }, ref) {
+  function NavList({ className, active = false, children, ...props }, ref) {
     return (
       <Base
         as="ul"
+        ref={ref}
         className={clsx(className, {
           'govgr-nav__list': true,
           'govgr-nav__list--active': active,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/NavListItem/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NavListItemProps extends BaseProps<'li'> {}
 /**
@@ -8,14 +8,14 @@ export interface NavListItemProps extends BaseProps<'li'> {}
  * This component has a items of NavListItemLink component inside.
  */
 export const NavListItem = React.forwardRef<HTMLLIElement, NavListItemProps>(
-  function NavHeaderListItem({ children, className, ...props }, ref) {
+  function NavHeaderListItem({ className, children, ...props }, ref) {
     return (
       <Base
         as="li"
+        ref={ref}
         className={clsx(className, {
           'govgr-nav__list-item': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/NavListItemButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
-import ArrowIcon from '@digigov/react-core/ArrowIcon';
 import Button, { ButtonProps } from '@digigov/react-core/Button';
+import ArrowIcon from '@digigov/react-core/ArrowIcon';
 
 export interface NavListItemButtonProps extends ButtonProps {
   /**
@@ -25,18 +25,18 @@ export const NavListItemButton = React.forwardRef<
   HTMLButtonElement,
   NavListItemButtonProps
 >(function NavListItemButton(
-  { active, arrow = true, children, className, ...props },
+  { active, className, arrow = true, children, ...props },
   ref
 ) {
   return (
     <Button
+      variant="link"
+      ref={ref}
       aria-selected={active}
       className={clsx(className, {
         'govgr-nav__list-item-btn': true,
         'govgr-nav__list-item-btn--active': active === true,
       })}
-      ref={ref}
-      variant="link"
       {...props}
     >
       {children}

package/src/NavListItemLink/index.test.tsx

@@ -20,7 +20,7 @@ it('renders the NavListItemLink with active=false', () => {
 it('renders the NavListItemLink with href and active=false', () => {
   expect(
     mount(
-      <NavListItemLink active={false} href="/">
+      <NavListItemLink href="/" active={false}>
         hello
       </NavListItemLink>
     )
@@ -29,7 +29,7 @@ it('renders the NavListItemLink with href and active=false', () => {
 it('renders the NavListItemLink with href and active=true', () => {
   expect(
     mount(
-      <NavListItemLink active={false} href="/">
+      <NavListItemLink href="/" active={false}>
         hello
       </NavListItemLink>
     )

package/src/NavListItemLink/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 import Link from '@digigov/react-core/LinkBase';
 
 export interface NavListItemLinkProps extends BaseProps<'a'> {
@@ -18,17 +18,17 @@ export const NavListItemLink = React.forwardRef<
   HTMLAnchorElement,
   NavListItemLinkProps
 >(function NavListItemLink(
-  { active, children, className, href, ...props },
+  { active, href, className, children, ...props },
   ref
 ) {
   return (
     <Link
+      href={href}
+      ref={ref}
       className={clsx(className, {
         'govgr-nav__list-item-link': true,
         'govgr-nav__list-item-link--active': active === true,
       })}
-      href={href}
-      ref={ref}
       {...props}
     >
       {children}

package/src/NavMenu/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NavMenuProps extends BaseProps<'div'> {
   /**
@@ -21,20 +21,20 @@ export interface NavMenuProps extends BaseProps<'div'> {
  */
 export const NavMenu = React.forwardRef<HTMLDivElement, NavMenuProps>(
   function NavMenu(
-    { active, children, className, layout = 'horizontal', ...props },
+    { active, layout = 'horizontal', className, children, ...props },
     ref
   ) {
     return (
       <Base
-        aria-hidden={!active}
         as="div"
+        ref={ref}
+        aria-hidden={!active}
         className={clsx(className, {
           'govgr-nav-menu': true,
           'govgr-nav-menu--horizontal': layout === 'horizontal',
           'govgr-nav-menu--vertical': layout === 'vertical',
           'govgr-nav-menu--hidden': !active,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/NavMenuContainer/index.tsx

@@ -17,14 +17,14 @@ export const NavMenuContainer = React.forwardRef<
   HTMLDivElement,
   NavMenuContainerProps
 >(function NavMenuContainer(
-  { children, className, layout = 'horizontal', ...props },
+  { className, layout = 'horizontal', children, ...props },
   ref
 ) {
   return (
     <Container
-      className={className}
       cols={layout === 'horizontal'}
       ref={ref}
+      className={className}
       {...props}
     >
       {children}

package/src/NavMenuContainerContent/index.tsx

@@ -11,9 +11,9 @@ export interface NavMenuContainerContentProps extends BaseProps<'div'> {}
 export const NavMenuContainerContent = React.forwardRef<
   HTMLDivElement,
   NavMenuContainerContentProps
->(function NavMenuContainerContent({ children, className, ...props }, ref) {
+>(function NavMenuContainerContent({ className, children, ...props }, ref) {
   return (
-    <Grid className={className} item md={2} ref={ref} {...props}>
+    <Grid item md={2} ref={ref} className={className} {...props}>
       {children}
     </Grid>
   );

package/src/NavMenuContainerContentList/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NavMenuContainerContentListProps extends BaseProps<'ul'> {}
 /**
@@ -10,14 +10,14 @@ export interface NavMenuContainerContentListProps extends BaseProps<'ul'> {}
 export const NavMenuContainerContentList = React.forwardRef<
   HTMLUListElement,
   NavMenuContainerContentListProps
->(function NavMenuContainerContentList({ children, className, ...props }, ref) {
+>(function NavMenuContainerContentList({ className, children, ...props }, ref) {
   return (
     <Base
       as="ul"
+      ref={ref}
       className={clsx(className, {
         'govgr-nav-menu__content-list': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/NavMenuContainerContentListItem/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NavMenuContainerContentListItemProps extends BaseProps<'li'> {}
 /**
@@ -11,16 +11,16 @@ export const NavMenuContainerContentListItem = React.forwardRef<
   HTMLLIElement,
   NavMenuContainerContentListItemProps
 >(function NavMenuContainerContentListItem(
-  { children, className, ...props },
+  { className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="li"
+      ref={ref}
       className={clsx(className, {
         'govgr-nav-menu__content-list-item': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/NavMenuContainerTitle/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 import Grid from '@digigov/react-core/Grid';
 import Heading from '@digigov/react-core/Heading';
 
@@ -13,23 +13,23 @@ export interface NavMenuContainerTitleProps extends BaseProps<'div'> {}
 export const NavMenuContainerTitle = React.forwardRef<
   HTMLDivElement,
   NavMenuContainerTitleProps
->(function NavMenuContainerTitle({ children, className, ...props }, ref) {
+>(function NavMenuContainerTitle({ className, children, ...props }, ref) {
   return (
     <Grid
-      className={clsx(className, {
-        'govgr-nav-menu__container-title': true,
-      })}
       item
       md={1}
       ref={ref}
+      className={clsx(className, {
+        'govgr-nav-menu__container-title': true,
+      })}
       {...props}
     >
       <Heading
+        element="h3"
+        size="m"
         className={clsx({
           'govgr-nav-menu__container-title-heading': true,
         })}
-        element="h3"
-        size="m"
       >
         {children}
       </Heading>

package/src/NavVertical/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NavVerticalProps extends BaseProps<'nav'> {}
 /**
@@ -9,14 +9,14 @@ export interface NavVerticalProps extends BaseProps<'nav'> {}
  * It has no props.
  */
 export const NavVertical = React.forwardRef<HTMLElement, NavVerticalProps>(
-  function NavVertical({ children, className, ...props }, ref) {
+  function NavVertical({ className, children, ...props }, ref) {
     return (
       <Base
         as="nav"
+        ref={ref}
         className={clsx(className, {
           'govgr-vertical-nav': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/NavVerticalItem/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NavVerticalItemProps extends BaseProps<'a'> {
   /**
@@ -15,16 +15,16 @@ export interface NavVerticalItemProps extends BaseProps<'a'> {
 export const NavVerticalItem = React.forwardRef<
   HTMLAnchorElement,
   NavVerticalItemProps
->(function NavVerticalItem({ active, children, className, ...props }, ref) {
+>(function NavVerticalItem({ active, className, children, ...props }, ref) {
   return (
     <Base
       as="a"
+      ref={ref}
       className={clsx(className, {
         'govgr-link': true,
         'govgr-vertical-nav__item': true,
         'govgr-vertical-nav__item--active': active === true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/NormalText/index.test.tsx

@@ -88,7 +88,7 @@ it('renders the NormalText with fontSize=72', () => {
 it('renders the NormalText with variant=lead and fontSize=14', () => {
   expect(
     mount(
-      <NormalText fontSize={'14'} variant={'lead'}>
+      <NormalText variant={'lead'} fontSize={'14'}>
         hello
       </NormalText>
     )
@@ -98,7 +98,7 @@ it('renders the NormalText with variant=lead and fontSize=14', () => {
 it('renders the NormalText with variant=lead and ontSize=16', () => {
   expect(
     mount(
-      <NormalText fontSize={'16'} variant={'lead'}>
+      <NormalText variant={'lead'} fontSize={'16'}>
         hello
       </NormalText>
     )
@@ -108,7 +108,7 @@ it('renders the NormalText with variant=lead and ontSize=16', () => {
 it('renders the NormalText with variant=lead and fontSize=19', () => {
   expect(
     mount(
-      <NormalText fontSize={'19'} variant={'lead'}>
+      <NormalText variant={'lead'} fontSize={'19'}>
         hello
       </NormalText>
     )
@@ -118,7 +118,7 @@ it('renders the NormalText with variant=lead and fontSize=19', () => {
 it('renders the NormalText with variant=lead and fontSize=24', () => {
   expect(
     mount(
-      <NormalText fontSize={'24'} variant={'lead'}>
+      <NormalText variant={'lead'} fontSize={'24'}>
         hello
       </NormalText>
     )
@@ -128,7 +128,7 @@ it('renders the NormalText with variant=lead and fontSize=24', () => {
 it('renders the NormalText with variant=lead and fontSize=30', () => {
   expect(
     mount(
-      <NormalText fontSize={'30'} variant={'lead'}>
+      <NormalText variant={'lead'} fontSize={'30'}>
         hello
       </NormalText>
     )
@@ -138,7 +138,7 @@ it('renders the NormalText with variant=lead and fontSize=30', () => {
 it('renders the NormalText with variant=lead and fontSize=36', () => {
   expect(
     mount(
-      <NormalText fontSize={'36'} variant={'lead'}>
+      <NormalText variant={'lead'} fontSize={'36'}>
         hello
       </NormalText>
     )
@@ -148,7 +148,7 @@ it('renders the NormalText with variant=lead and fontSize=36', () => {
 it('renders the NormalText with variant=lead and font size fontSize=48', () => {
   expect(
     mount(
-      <NormalText fontSize={'48'} variant={'lead'}>
+      <NormalText variant={'lead'} fontSize={'48'}>
         hello
       </NormalText>
     )
@@ -158,7 +158,7 @@ it('renders the NormalText with variant=lead and font size fontSize=48', () => {
 it('renders the NormalText with variant=lead and font size fontSize=72', () => {
   expect(
     mount(
-      <NormalText fontSize={'72'} variant={'lead'}>
+      <NormalText variant={'lead'} fontSize={'72'}>
         hello
       </NormalText>
     )
@@ -168,7 +168,7 @@ it('renders the NormalText with variant=lead and font size fontSize=72', () => {
 it('renders the NormalText with variant=normal and fontSize=14', () => {
   expect(
     mount(
-      <NormalText fontSize={'14'} variant={'normal'}>
+      <NormalText variant={'normal'} fontSize={'14'}>
         hello
       </NormalText>
     )
@@ -178,7 +178,7 @@ it('renders the NormalText with variant=normal and fontSize=14', () => {
 it('renders the NormalText with variant=normal and ontSize=16', () => {
   expect(
     mount(
-      <NormalText fontSize={'16'} variant={'normal'}>
+      <NormalText variant={'normal'} fontSize={'16'}>
         hello
       </NormalText>
     )
@@ -188,7 +188,7 @@ it('renders the NormalText with variant=normal and ontSize=16', () => {
 it('renders the NormalText with variant=normal and fontSize=19', () => {
   expect(
     mount(
-      <NormalText fontSize={'19'} variant={'normal'}>
+      <NormalText variant={'normal'} fontSize={'19'}>
         hello
       </NormalText>
     )
@@ -198,7 +198,7 @@ it('renders the NormalText with variant=normal and fontSize=19', () => {
 it('renders the NormalText with variant=normal and fontSize=24', () => {
   expect(
     mount(
-      <NormalText fontSize={'24'} variant={'normal'}>
+      <NormalText variant={'normal'} fontSize={'24'}>
         hello
       </NormalText>
     )
@@ -208,7 +208,7 @@ it('renders the NormalText with variant=normal and fontSize=24', () => {
 it('renders the NormalText with variant=normal and fontSize=30', () => {
   expect(
     mount(
-      <NormalText fontSize={'30'} variant={'normal'}>
+      <NormalText variant={'normal'} fontSize={'30'}>
         hello
       </NormalText>
     )
@@ -218,7 +218,7 @@ it('renders the NormalText with variant=normal and fontSize=30', () => {
 it('renders the NormalText with variant=normal and fontSize=36', () => {
   expect(
     mount(
-      <NormalText fontSize={'36'} variant={'normal'}>
+      <NormalText variant={'normal'} fontSize={'36'}>
         hello
       </NormalText>
     )
@@ -228,7 +228,7 @@ it('renders the NormalText with variant=normal and fontSize=36', () => {
 it('renders the NormalText with variant=normal and font size fontSize=48', () => {
   expect(
     mount(
-      <NormalText fontSize={'48'} variant={'normal'}>
+      <NormalText variant={'normal'} fontSize={'48'}>
         hello
       </NormalText>
     )
@@ -238,7 +238,7 @@ it('renders the NormalText with variant=normal and font size fontSize=48', () =>
 it('renders the NormalText with variant=normal and font size fontSize=72', () => {
   expect(
     mount(
-      <NormalText fontSize={'72'} variant={'normal'}>
+      <NormalText variant={'normal'} fontSize={'72'}>
         hello
       </NormalText>
     )
@@ -248,7 +248,7 @@ it('renders the NormalText with variant=normal and font size fontSize=72', () =>
 it('renders the NormalText with variant=small and fontSize=14', () => {
   expect(
     mount(
-      <NormalText fontSize={'14'} variant={'small'}>
+      <NormalText variant={'small'} fontSize={'14'}>
         hello
       </NormalText>
     )
@@ -258,7 +258,7 @@ it('renders the NormalText with variant=small and fontSize=14', () => {
 it('renders the NormalText with variant=small and ontSize=16', () => {
   expect(
     mount(
-      <NormalText fontSize={'16'} variant={'small'}>
+      <NormalText variant={'small'} fontSize={'16'}>
         hello
       </NormalText>
     )
@@ -268,7 +268,7 @@ it('renders the NormalText with variant=small and ontSize=16', () => {
 it('renders the NormalText with variant=small and fontSize=19', () => {
   expect(
     mount(
-      <NormalText fontSize={'19'} variant={'small'}>
+      <NormalText variant={'small'} fontSize={'19'}>
         hello
       </NormalText>
     )
@@ -278,7 +278,7 @@ it('renders the NormalText with variant=small and fontSize=19', () => {
 it('renders the NormalText with variant=small and fontSize=24', () => {
   expect(
     mount(
-      <NormalText fontSize={'24'} variant={'small'}>
+      <NormalText variant={'small'} fontSize={'24'}>
         hello
       </NormalText>
     )
@@ -288,7 +288,7 @@ it('renders the NormalText with variant=small and fontSize=24', () => {
 it('renders the NormalText with variant=small and fontSize=30', () => {
   expect(
     mount(
-      <NormalText fontSize={'30'} variant={'small'}>
+      <NormalText variant={'small'} fontSize={'30'}>
         hello
       </NormalText>
     )
@@ -298,7 +298,7 @@ it('renders the NormalText with variant=small and fontSize=30', () => {
 it('renders the NormalText with variant=lead and fontSize=36', () => {
   expect(
     mount(
-      <NormalText fontSize={'36'} variant={'lead'}>
+      <NormalText variant={'lead'} fontSize={'36'}>
         hello
       </NormalText>
     )
@@ -308,7 +308,7 @@ it('renders the NormalText with variant=lead and fontSize=36', () => {
 it('renders the NormalText with variant=small and font size fontSize=48', () => {
   expect(
     mount(
-      <NormalText fontSize={'48'} variant={'small'}>
+      <NormalText variant={'small'} fontSize={'48'}>
         hello
       </NormalText>
     )
@@ -318,7 +318,7 @@ it('renders the NormalText with variant=small and font size fontSize=48', () =>
 it('renders the NormalText with variant=small and font size fontSize=72', () => {
   expect(
     mount(
-      <NormalText fontSize={'72'} variant={'small'}>
+      <NormalText variant={'small'} fontSize={'72'}>
         hello
       </NormalText>
     )
@@ -328,7 +328,7 @@ it('renders the NormalText with variant=small and font size fontSize=72', () =>
 it('renders the NormalText with variant=small, font size fontSize=72 and fontWeight=regular', () => {
   expect(
     mount(
-      <NormalText fontSize={'72'} fontWeight={'regular'} variant={'small'}>
+      <NormalText variant={'small'} fontSize={'72'} fontWeight={'regular'}>
         hello
       </NormalText>
     )
@@ -338,7 +338,7 @@ it('renders the NormalText with variant=small, font size fontSize=72 and fontWei
 it('renders the NormalText with variant=small, font size fontSize=72 and fontWeight=bold', () => {
   expect(
     mount(
-      <NormalText fontSize={'72'} fontWeight={'bold'} variant={'small'}>
+      <NormalText variant={'small'} fontSize={'72'} fontWeight={'bold'}>
         hello
       </NormalText>
     )