@digigov/react-core 0.25.2 → 0.25.4

package/src/DetailsSummary/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 DetailsSummaryProps extends BaseProps<'summary'> {
   /*
@@ -14,15 +14,15 @@ export interface DetailsSummaryProps extends BaseProps<'summary'> {
 export const DetailsSummary = React.forwardRef<
   HTMLElement,
   DetailsSummaryProps
->(function DetailsSummary({size, className, children, ...props }, ref) {
+>(function DetailsSummary({children, className, size, ...props }, ref) {
   return (
     <Base
       as="summary"
-      ref={ref}
       className={clsx(className, {
         'govgr-details__summary': true,
         'govgr-details__summary--l': size==='l',
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/ErrorMessage/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 ErrorMessageProps extends BaseProps<'p'> {}
 /**
@@ -11,14 +11,14 @@ export interface ErrorMessageProps extends BaseProps<'p'> {}
 export const ErrorMessage = React.forwardRef<
   HTMLParagraphElement,
   ErrorMessageProps
->(function ErrorMessage({ className, children, ...props }, ref) {
+>(function ErrorMessage({ children, className, ...props }, ref) {
   return (
     <Base
       as="p"
-      ref={ref}
       className={clsx(className, {
         'govgr-error-message': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/ErrorSummary/index.tsx

@@ -1,20 +1,20 @@
 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 ErrorSummaryProps extends BaseProps<'div'> {}
 /**
  * Use this component at the top of a page to summarise any errors a user has made.
  */
 export const ErrorSummary = React.forwardRef<HTMLDivElement, ErrorSummaryProps>(
-  function ErrorSummary({ className, children, ...props }, ref) {
+  function ErrorSummary({ children, className, ...props }, ref) {
     return (
       <Base
         as="div"
-        ref={ref}
         className={clsx(className, {
           'govgr-error-summary': true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/FieldContainer/index.tsx

@@ -15,21 +15,21 @@ export const FieldContainer = React.forwardRef<
   HTMLDivElement,
   FieldContainerProps
 >(function FieldContainer(
-  { error, className, children, xs = 12, md = 12, lg = 12, xl = 12, ...props },
+  { children, className, error, lg = 12, md = 12, xl = 12, xs = 12, ...props },
   ref
 ) {
   return (
     <Grid
-      ref={ref}
       className={clsx(className, {
         'govgr-field': true,
         'govgr-field__error': error === true,
       })}
       item
-      xs={xs}
-      md={md}
       lg={lg}
+      md={md}
+      ref={ref}
       xl={xl}
+      xs={xs}
       {...props}
     >
       {children}

package/src/Fieldset/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 FieldsetProps extends BaseProps<'fieldset'> { }
 /**
@@ -8,14 +8,14 @@ export interface FieldsetProps extends BaseProps<'fieldset'> { }
  * Fieldset component is used to group related elements in a form.
  */
 export const Fieldset = React.forwardRef<HTMLFieldSetElement, FieldsetProps>(
-  function Fieldset({ className, children, ...props }, ref) {
+  function Fieldset({ children, className, ...props }, ref) {
     return (
       <Base
         as="fieldset"
-        ref={ref}
         className={clsx(className, {
           'govgr-fieldset': true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/FieldsetLegend/index.tsx

@@ -1,19 +1,19 @@
 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 FieldsetLegendProps extends BaseProps<'legend'> {
-  /**
-   * size is optional. The default value is 'l'
-   */
-  size?: 'xl' | 'l' | 'm' | 's';
-
   /**
    * heading is optional.
    * Add this prop if this Fieldset component is the only one in this page.
    * The default value is false.
    */
   heading?: boolean;
+
+  /**
+   * size is optional. The default value is 'l'
+   */
+  size?: 'xl' | 'l' | 'm' | 's';
 }
 /**
  * FieldsetLegend component is the title within a Fieldset component.
@@ -22,27 +22,25 @@ export const FieldsetLegend = React.forwardRef<
   HTMLLegendElement,
   FieldsetLegendProps
 >(function FieldsetLegend(
-  { size = 'l', heading = false, className, children, ...props },
+  { children, className, heading = false, size = 'l', ...props },
   ref
 ) {
   return (
-    <>
-      <Base
-        as="legend"
-        ref={ref}
-        className={clsx(className, {
-          'govgr-fieldset__legend': true,
-          'govgr-heading-xl': size === 'xl',
-          'govgr-heading-l': size === 'l',
-          'govgr-heading-m': size === 'm',
-          'govgr-heading-s': size === 's',
-        })}
-        {...(heading && { role: 'heading', 'aria-level': 1 })}
-        {...props}
-      >
-        {children}
-      </Base>
-    </>
+    <Base
+      as="legend"
+      className={clsx(className, {
+        'govgr-fieldset__legend': true,
+        'govgr-heading-xl': size === 'xl',
+        'govgr-heading-l': size === 'l',
+        'govgr-heading-m': size === 'm',
+        'govgr-heading-s': size === 's',
+      })}
+      ref={ref}
+      {...(heading && { role: 'heading', 'aria-level': 1 })}
+      {...props}
+    >
+      {children}
+    </Base>
   );
 });
 

package/src/FileUpload/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 FileUploadProps extends BaseProps<'input'> {
   /**
@@ -14,30 +14,30 @@ export interface FileUploadProps extends BaseProps<'input'> {
  */
 export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
   function FileUpload(
-    { name, className, children, disabled, hasFiles = false, ...props },
+    { children, className, disabled, hasFiles = false, name, ...props },
     ref
   ) {
     return (
       <Base
         as="label"
-        tabIndex={0}
-        role="button"
         className={clsx(className, {
           'govgr-label-file': true,
           'govgr-btn': !hasFiles,
           'govgr-btn-secondary': !hasFiles,
           'govgr-link': hasFiles,
         })}
+        role="button"
+        tabIndex={0}
       >
         <Base
           as="input"
-          ref={ref}
-          type="file"
-          name={name}
-          disabled={disabled}
           className={clsx({
             'govgr-file-input': true,
           })}
+          disabled={disabled}
+          name={name}
+          ref={ref}
+          type="file"
           {...props}
         />
         {children}

package/src/FileUploadContainer/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 FileUploadContainerProps extends BaseProps<'div'> {
   /**
@@ -16,16 +16,16 @@ export const FileUploadContainer = React.forwardRef<
   HTMLDivElement,
   FileUploadContainerProps
 >(function FileUploadContainer(
-  { className, children, hasUploadedFile = false, ...props },
+  { children, className, hasUploadedFile = false, ...props },
   ref
 ) {
   return (
     <Base
-      ref={ref}
       as="div"
       className={clsx(className, {
         'govgr-uploaded-file': hasUploadedFile,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/Footer/index.tsx

@@ -1,20 +1,20 @@
 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 FooterProps extends BaseProps<'footer'> {}
 /**
  * Footer is used always at the end of the page, in the Layout component.
  */
 export const Footer = React.forwardRef<HTMLElement, FooterProps>(
-  function Footer({ className, children, ...props }, ref) {
+  function Footer({ children, className, ...props }, ref) {
     return (
       <Base
         as="footer"
-        ref={ref}
         className={clsx(className, {
           'govgr-footer': true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/FooterContainer/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 FooterContainerProps extends BaseProps<'div'> {
   /**
@@ -18,17 +18,17 @@ export const FooterContainer = React.forwardRef<
   HTMLDivElement,
   FooterContainerProps
 >(function FooterContainer(
-  { className, fullWidth = false, children, ...props },
+  { children, className, fullWidth = false, ...props },
   ref
 ) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-width-container': fullWidth === false,
         'govgr-full-width-container': fullWidth === true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

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

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

package/src/FooterHeading/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 FooterHeadingProps extends BaseProps<'h2'> {
   /**
@@ -16,16 +16,16 @@ export interface FooterHeadingProps extends BaseProps<'h2'> {
 export const FooterHeading = React.forwardRef<
   HTMLHeadingElement,
   FooterHeadingProps
->(function FooterHeading({ size = 's', className, children, ...props }, ref) {
+>(function FooterHeading({ children, className, size = 's', ...props }, ref) {
   return (
     <Base
       as="h2"
-      ref={ref}
       className={clsx(className, {
         'govgr-footer__heading': true,
         'govgr-heading-m': size === 'm',
         'govgr-heading-s': size === 's',
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/FooterImage/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 FooterImageProps extends BaseProps<'img'> {}
 /**
@@ -10,19 +10,18 @@ export interface FooterImageProps extends BaseProps<'img'> {}
  */
 export const FooterImage = React.forwardRef<HTMLImageElement, FooterImageProps>(
   function FooterImage(
-    { className, children, alt = 'footer logo', ...props },
+    { alt = 'footer logo', children, className, ...props },
     ref
   ) {
     return (
       <Base
+        alt={alt}
         as="img"
-        ref={ref}
         className={clsx(className, {
           'govgr-footer__logo': true,
         })}
-        {...props}
-        alt={alt}
-      >
+        ref={ref}
+        {...props}>
         {children}
       </Base>
     );

package/src/FooterInlineList/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 FooterInlineListProps extends BaseProps<'ul'> {}
 /**
@@ -11,14 +11,14 @@ export interface FooterInlineListProps extends BaseProps<'ul'> {}
 export const FooterInlineList = React.forwardRef<
   HTMLUListElement,
   FooterInlineListProps
->(function FooterInlineList({ className, children, ...props }, ref) {
+>(function FooterInlineList({ children, className, ...props }, ref) {
   return (
     <Base
       as="ul"
-      ref={ref}
       className={clsx(className, {
         'govgr-footer__inline-list': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/FooterInlineListItem/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 FooterInlineListItemProps extends BaseProps<'li'> {}
 /**
@@ -9,14 +9,14 @@ export interface FooterInlineListItemProps extends BaseProps<'li'> {}
 export const FooterInlineListItem = React.forwardRef<
   HTMLLIElement,
   FooterInlineListItemProps
->(function FooterInlineListItem({ className, children, ...props }, ref) {
+>(function FooterInlineListItem({ children, className, ...props }, ref) {
   return (
     <Base
       as="li"
-      ref={ref}
       className={clsx(className, {
         'govgr-footer__inline-list-item': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/FooterLink/index.tsx

@@ -1,20 +1,20 @@
 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 FooterLinkProps extends BaseProps<'a'> { }
 /**
  * FooterLink in used inside the Footer component.
  */
 export const FooterLink = React.forwardRef<HTMLAnchorElement, FooterLinkProps>(
-  function FooterLink({ className, children, ...props }, ref) {
+  function FooterLink({ children, className, ...props }, ref) {
     return (
       <Base
         as="a"
-        ref={ref}
         className={clsx(className, {
           'govgr-footer__link': true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/FooterList/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 FooterListProps extends BaseProps<'ul'> {
   /**
@@ -14,15 +14,15 @@ export interface FooterListProps extends BaseProps<'ul'> {
  * This component takes a list of FooterListItem component as its children.
  */
 export const FooterList = React.forwardRef<HTMLUListElement, FooterListProps>(
-  function FooterList({ columns, className, children, ...props }, ref) {
+  function FooterList({ children, className, columns, ...props }, ref) {
     return (
       <Base
         as="ul"
-        ref={ref}
         className={clsx(className, {
           'govgr-footer__list': true,
           'govgr-footer__list--columns-2': columns === 2,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/FooterListItem/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 FooterListItemProps extends BaseProps<'li'> {}
 /**
@@ -10,14 +10,14 @@ export interface FooterListItemProps extends BaseProps<'li'> {}
 export const FooterListItem = React.forwardRef<
   HTMLLIElement,
   FooterListItemProps
->(function FooterListItem({ className, children, ...props }, ref) {
+>(function FooterListItem({ children, className, ...props }, ref) {
   return (
     <Base
       as="li"
-      ref={ref}
       className={clsx(className, {
         'govgr-footer__list-item': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/FooterMeta/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 FooterMetaProps extends BaseProps<'div'> {}
 /**
@@ -9,14 +9,14 @@ export interface FooterMetaProps extends BaseProps<'div'> {}
  * Semantically, in this component we include the very basic elements of a govgr footer.
  */
 export const FooterMeta = React.forwardRef<HTMLDivElement, FooterMetaProps>(
-  function FooterMeta({ className, children, ...props }, ref) {
+  function FooterMeta({ children, className, ...props }, ref) {
     return (
       <Base
         as="div"
-        ref={ref}
         className={clsx(className, {
           'govgr-footer__meta': true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/FooterMetaItem/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 FooterMetaItemProps extends BaseProps<'div'> {
   /**
@@ -15,15 +15,15 @@ export interface FooterMetaItemProps extends BaseProps<'div'> {
 export const FooterMetaItem = React.forwardRef<
   HTMLDivElement,
   FooterMetaItemProps
->(function FooterMetaItem({ grow, className, children, ...props }, ref) {
+>(function FooterMetaItem({ children, className, grow, ...props }, ref) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-footer__meta-item': true,
         'govgr-footer__meta-item--grow': grow === true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

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

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