@digigov/react-core 0.25.2 → 0.25.4

package/src/NavMenu/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 NavMenuProps extends BaseProps<'div'> {
   /**
@@ -21,20 +21,20 @@ export interface NavMenuProps extends BaseProps<'div'> {
  */
 export const NavMenu = React.forwardRef<HTMLDivElement, NavMenuProps>(
   function NavMenu(
-    { active, layout = 'horizontal', className, children, ...props },
+    { active, children, className, layout = 'horizontal', ...props },
     ref
   ) {
     return (
       <Base
-        as="div"
-        ref={ref}
         aria-hidden={!active}
+        as="div"
         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(
-  { className, layout = 'horizontal', children, ...props },
+  { children, className, layout = 'horizontal', ...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({ className, children, ...props }, ref) {
+>(function NavMenuContainerContent({ children, className, ...props }, ref) {
   return (
-    <Grid item md={2} ref={ref} className={className} {...props}>
+    <Grid className={className} item md={2} ref={ref} {...props}>
       {children}
     </Grid>
   );

package/src/NavMenuContainerContentList/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 NavMenuContainerContentListProps extends BaseProps<'ul'> {}
 /**
@@ -10,14 +10,14 @@ export interface NavMenuContainerContentListProps extends BaseProps<'ul'> {}
 export const NavMenuContainerContentList = React.forwardRef<
   HTMLUListElement,
   NavMenuContainerContentListProps
->(function NavMenuContainerContentList({ className, children, ...props }, ref) {
+>(function NavMenuContainerContentList({ children, className, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface NavMenuContainerContentListItemProps extends BaseProps<'li'> {}
 /**
@@ -11,16 +11,16 @@ export const NavMenuContainerContentListItem = React.forwardRef<
   HTMLLIElement,
   NavMenuContainerContentListItemProps
 >(function NavMenuContainerContentListItem(
-  { className, children, ...props },
+  { children, className, ...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 { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import { BaseProps } from '@digigov/react-core/Base';
 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({ className, children, ...props }, ref) {
+>(function NavMenuContainerTitle({ children, className, ...props }, ref) {
   return (
     <Grid
-      item
-      md={1}
-      ref={ref}
       className={clsx(className, {
         'govgr-nav-menu__container-title': true,
       })}
+      item
+      md={1}
+      ref={ref}
       {...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+  function NavVertical({ children, className, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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, className, children, ...props }, ref) {
+>(function NavVerticalItem({ active, children, className, ...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 variant={'lead'} fontSize={'14'}>
+      <NormalText fontSize={'14'} variant={'lead'}>
         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 variant={'lead'} fontSize={'16'}>
+      <NormalText fontSize={'16'} variant={'lead'}>
         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 variant={'lead'} fontSize={'19'}>
+      <NormalText fontSize={'19'} variant={'lead'}>
         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 variant={'lead'} fontSize={'24'}>
+      <NormalText fontSize={'24'} variant={'lead'}>
         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 variant={'lead'} fontSize={'30'}>
+      <NormalText fontSize={'30'} variant={'lead'}>
         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 variant={'lead'} fontSize={'36'}>
+      <NormalText fontSize={'36'} variant={'lead'}>
         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 variant={'lead'} fontSize={'48'}>
+      <NormalText fontSize={'48'} variant={'lead'}>
         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 variant={'lead'} fontSize={'72'}>
+      <NormalText fontSize={'72'} variant={'lead'}>
         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 variant={'normal'} fontSize={'14'}>
+      <NormalText fontSize={'14'} variant={'normal'}>
         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 variant={'normal'} fontSize={'16'}>
+      <NormalText fontSize={'16'} variant={'normal'}>
         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 variant={'normal'} fontSize={'19'}>
+      <NormalText fontSize={'19'} variant={'normal'}>
         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 variant={'normal'} fontSize={'24'}>
+      <NormalText fontSize={'24'} variant={'normal'}>
         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 variant={'normal'} fontSize={'30'}>
+      <NormalText fontSize={'30'} variant={'normal'}>
         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 variant={'normal'} fontSize={'36'}>
+      <NormalText fontSize={'36'} variant={'normal'}>
         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 variant={'normal'} fontSize={'48'}>
+      <NormalText fontSize={'48'} variant={'normal'}>
         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 variant={'normal'} fontSize={'72'}>
+      <NormalText fontSize={'72'} variant={'normal'}>
         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 variant={'small'} fontSize={'14'}>
+      <NormalText fontSize={'14'} variant={'small'}>
         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 variant={'small'} fontSize={'16'}>
+      <NormalText fontSize={'16'} variant={'small'}>
         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 variant={'small'} fontSize={'19'}>
+      <NormalText fontSize={'19'} variant={'small'}>
         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 variant={'small'} fontSize={'24'}>
+      <NormalText fontSize={'24'} variant={'small'}>
         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 variant={'small'} fontSize={'30'}>
+      <NormalText fontSize={'30'} variant={'small'}>
         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 variant={'lead'} fontSize={'36'}>
+      <NormalText fontSize={'36'} variant={'lead'}>
         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 variant={'small'} fontSize={'48'}>
+      <NormalText fontSize={'48'} variant={'small'}>
         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 variant={'small'} fontSize={'72'}>
+      <NormalText fontSize={'72'} variant={'small'}>
         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 variant={'small'} fontSize={'72'} fontWeight={'regular'}>
+      <NormalText fontSize={'72'} fontWeight={'regular'} variant={'small'}>
         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 variant={'small'} fontSize={'72'} fontWeight={'bold'}>
+      <NormalText fontSize={'72'} fontWeight={'bold'} variant={'small'}>
         hello
       </NormalText>
     )

package/src/NormalText/index.tsx

@@ -1,27 +1,27 @@
 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 NormalTextProps extends BaseProps<'span'> {
-  /**
-   * variant is optional.
-   * Use 'lead' when a lead text is an introductory paragraph that you can use at the top of a page to summarise the content.
-   * The majority of your body should use the standard 'normal' variant. This is the default value.
-   * You can use the 'small' sparingly to make your text font size smaller: 16px on larger screens and 14px on smaller screens.
-   */
-  variant?: 'lead' | 'normal' | 'small';
-
   /**
    * fontSize is optional.
    * Add this fontSize override prop in order to change the font size.
 
    */
   fontSize?: '14' | '16' | '19' | '24' | '30' | '36' | '48' | '72';
+
   /**
    * fontWeight is optional.
    * You can add a fontWeight override prop to change the font weight to regular or bold.
    */
   fontWeight?: 'regular' | 'bold';
+  /**
+   * variant is optional.
+   * Use 'lead' when a lead text is an introductory paragraph that you can use at the top of a page to summarise the content.
+   * The majority of your body should use the standard 'normal' variant. This is the default value.
+   * You can use the 'small' sparingly to make your text font size smaller: 16px on larger screens and 14px on smaller screens.
+   */
+  variant?: 'lead' | 'normal' | 'small';
 }
 /**
  * NormalText component is used for text formatting.
@@ -29,13 +29,12 @@ export interface NormalTextProps extends BaseProps<'span'> {
  */
 export const NormalText = React.forwardRef<HTMLSpanElement, NormalTextProps>(
   function NormalText(
-    { variant = 'normal', fontSize, fontWeight, className, children, ...props },
+    { children, className, fontSize, fontWeight, variant = 'normal', ...props },
     ref
   ) {
     return (
       <Base
         as="span"
-        ref={ref}
         className={clsx(className, {
           'govgr-body': true,
           'govgr-body-l': variant === 'lead',
@@ -51,6 +50,7 @@ export const NormalText = React.forwardRef<HTMLSpanElement, NormalTextProps>(
           'govgr-!-font-weight-regular': fontWeight == 'regular',
           'govgr-!-font-weight-bold': fontWeight == 'bold',
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/NotificationBannerContainer/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 NotificationBannerContainerProps extends BaseProps<'div'> {
   /**
@@ -19,20 +19,20 @@ export const NotificationBannerContainer = React.forwardRef<
   HTMLDivElement,
   NotificationBannerContainerProps
 >(function NotificationBannerContainer(
-  { success, className, children, ...props },
+  { children, className, success, ...props },
   ref
 ) {
   return (
     <Base
-      as="div"
-      role="region"
       aria-labelledby="govgr-notification-banner-title"
-      data-module="govgr-notification-banner"
-      ref={ref}
+      as="div"
       className={clsx(className, {
         'govgr-notification-banner': true,
         'govgr-notification-banner--success': success === true,
       })}
+      data-module="govgr-notification-banner"
+      ref={ref}
+      role="region"
       {...props}
     >
       {children}

package/src/NotificationBannerContent/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 NotificationBannerContentProps extends BaseProps<'div'> {}
 /**
@@ -12,14 +12,14 @@ export interface NotificationBannerContentProps extends BaseProps<'div'> {}
 export const NotificationBannerContent = React.forwardRef<
   HTMLDivElement,
   NotificationBannerContentProps
->(function NotificationBannerContent({ className, children, ...props }, ref) {
+>(function NotificationBannerContent({ children, className, ...props }, ref) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-notification-banner__content': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/NotificationBannerHeader/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 NotificationBannerHeaderProps extends BaseProps<'div'> {}
 /**
@@ -11,14 +11,14 @@ export interface NotificationBannerHeaderProps extends BaseProps<'div'> {}
 export const NotificationBannerHeader = React.forwardRef<
   HTMLDivElement,
   NotificationBannerHeaderProps
->(function NotificationBannerHeader({ className, children, ...props }, ref) {
+>(function NotificationBannerHeader({ children, className, ...props }, ref) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-notification-banner__header': true,
       })}
+      ref={ref}
       {...props}
     >
       <h2

package/src/NotificationBannerHeading/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 NotificationBannerHeadingProps extends BaseProps<'h3'> {}
 /**
@@ -11,14 +11,14 @@ export interface NotificationBannerHeadingProps extends BaseProps<'h3'> {}
 export const NotificationBannerHeading = React.forwardRef<
   HTMLHeadingElement,
   NotificationBannerHeadingProps
->(function NotificationBannerHeading({ className, children, ...props }, ref) {
+>(function NotificationBannerHeading({ children, className, ...props }, ref) {
   return (
     <Base
       as="h3"
-      ref={ref}
       className={clsx(className, {
         'govgr-notification-banner__heading': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/NotificationBannerLink/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 NotificationBannerLinkProps extends BaseProps<'a'> {}
 /**
@@ -12,17 +12,17 @@ export const NotificationBannerLink = React.forwardRef<
   HTMLAnchorElement,
   NotificationBannerLinkProps
 >(function NotificationBannerLink(
-  { className, href = '#', children, ...props },
+  { children, className, href = '#', ...props },
   ref
 ) {
   return (
     <Base
       as="a"
-      ref={ref}
-      href={href}
       className={clsx(className, {
         'govgr-notification-banner__link': true,
       })}
+      href={href}
+      ref={ref}
       {...props}
     >
       {children}

package/src/PageTitle/index.tsx

@@ -1,15 +1,15 @@
 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 PageTitleProps extends BaseProps<'div'> {}
 /**
  * Details for the PageTitle.
  */
 export const PageTitle = React.forwardRef<HTMLDivElement, PageTitleProps>(
-  function PageTitle({ className, children, ...props }, ref) {
+  function PageTitle({ children, className, ...props }, ref) {
     return (
-      <Base as="div" ref={ref} className={clsx(className, {})} {...props}>
+      <Base as="div" className={clsx(className, {})} ref={ref} {...props}>
         {children}
       </Base>
     );