@digigov/react-core 0.25.4 → 0.26.0

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

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

package/src/DateInputItem/index.test.tsx

@@ -16,7 +16,7 @@ it('renders the DateInputItem with name prop', () => {
 it('renders the DateInputItem with name and width===4 props', () => {
   expect(
     mount(
-      <DateInputItem name={'date-input'} width={4}>
+      <DateInputItem width={4} name={'date-input'}>
         hello
       </DateInputItem>
     )

package/src/DateInputItem/index.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface DateInputItemProps extends BaseProps<'input'> {
-  /**
-   * error is optional. The default value is false.
-   * Use this prop when there is an error at the input.
-   */
-  error?: boolean;
   /**
    * Width property is optional.
    * Use this property for year field to grow width.
    */
   width?: 2 | 4;
+  /**
+   * error is optional. The default value is false.
+   * Use this prop when there is an error at the input.
+   */
+  error?: boolean;
 }
 /**
  * Details for the DateInputItem.
@@ -23,7 +23,7 @@ export const DateInputItem = React.forwardRef<
   HTMLInputElement,
   DateInputItemProps
 >(function DateInputItem(
-  { children, className, error, name, width = 2, ...props },
+  { name, width = 2, error, className, children, ...props },
   ref
 ) {
   return (
@@ -40,17 +40,17 @@ export const DateInputItem = React.forwardRef<
         {children}
         <Base
           as="input"
+          ref={ref}
+          type="text"
+          pattern="[0-9]*"
+          inputMode="numeric"
+          name={name}
           className={clsx({
             'govgr-input': true,
             'govgr-input--width-2': width === 2,
             'govgr-input--width-4': width === 4,
             'govgr-error-input': error === true,
           })}
-          inputMode="numeric"
-          name={name}
-          pattern="[0-9]*"
-          ref={ref}
-          type="text"
           {...props}
         />
       </label>

package/src/Details/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 DetailsProps extends BaseProps<'details'> {}
 /**
@@ -8,14 +8,14 @@ export interface DetailsProps extends BaseProps<'details'> {}
  * Details component wraps DetailsSummary and DetailsContent as children components
  */
 export const Details = React.forwardRef<HTMLElement, DetailsProps>(
-  function Details({ children, className, ...props }, ref) {
+  function Details({ className, children, ...props }, ref) {
     return (
       <Base
         as="details"
+        ref={ref}
         className={clsx(className, {
           'govgr-details': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

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

package/src/DetailsSummary/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 DetailsSummaryProps extends BaseProps<'summary'> {
   /*
@@ -14,15 +14,15 @@ export interface DetailsSummaryProps extends BaseProps<'summary'> {
 export const DetailsSummary = React.forwardRef<
   HTMLElement,
   DetailsSummaryProps
->(function DetailsSummary({children, className, size, ...props }, ref) {
+>(function DetailsSummary({size, className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, ...props }, ref) {
+>(function ErrorMessage({ className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, ...props }, ref) {
+  function ErrorSummary({ className, children, ...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(
-  { children, className, error, lg = 12, md = 12, xl = 12, xs = 12, ...props },
+  { error, className, children, xs = 12, md = 12, lg = 12, xl = 12, ...props },
   ref
 ) {
   return (
     <Grid
+      ref={ref}
       className={clsx(className, {
         'govgr-field': true,
         'govgr-field__error': error === true,
       })}
       item
-      lg={lg}
+      xs={xs}
       md={md}
-      ref={ref}
+      lg={lg}
       xl={xl}
-      xs={xs}
       {...props}
     >
       {children}

package/src/Fieldset/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 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({ children, className, ...props }, ref) {
+  function Fieldset({ className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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,25 +22,27 @@ export const FieldsetLegend = React.forwardRef<
   HTMLLegendElement,
   FieldsetLegendProps
 >(function FieldsetLegend(
-  { children, className, heading = false, size = 'l', ...props },
+  { size = 'l', heading = false, className, children, ...props },
   ref
 ) {
   return (
-    <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>
+    <>
+      <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>
+    </>
   );
 });
 

package/src/FileUpload/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 FileUploadProps extends BaseProps<'input'> {
   /**
@@ -14,30 +14,30 @@ export interface FileUploadProps extends BaseProps<'input'> {
  */
 export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
   function FileUpload(
-    { children, className, disabled, hasFiles = false, name, ...props },
+    { name, className, children, disabled, hasFiles = false, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface FileUploadContainerProps extends BaseProps<'div'> {
   /**
@@ -16,16 +16,16 @@ export const FileUploadContainer = React.forwardRef<
   HTMLDivElement,
   FileUploadContainerProps
 >(function FileUploadContainer(
-  { children, className, hasUploadedFile = false, ...props },
+  { className, children, 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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, ...props }, ref) {
+  function Footer({ className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface FooterContainerProps extends BaseProps<'div'> {
   /**
@@ -18,17 +18,17 @@ export const FooterContainer = React.forwardRef<
   HTMLDivElement,
   FooterContainerProps
 >(function FooterContainer(
-  { children, className, fullWidth = false, ...props },
+  { className, fullWidth = false, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, ...props }, ref) {
+>(function FooterContent({ className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, ...props }, ref) {
+>(function FooterContentLogos({ className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, size = 's', ...props }, ref) {
+>(function FooterHeading({ size = 's', className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface FooterImageProps extends BaseProps<'img'> {}
 /**
@@ -10,18 +10,19 @@ export interface FooterImageProps extends BaseProps<'img'> {}
  */
 export const FooterImage = React.forwardRef<HTMLImageElement, FooterImageProps>(
   function FooterImage(
-    { alt = 'footer logo', children, className, ...props },
+    { className, children, alt = 'footer logo', ...props },
     ref
   ) {
     return (
       <Base
-        alt={alt}
         as="img"
+        ref={ref}
         className={clsx(className, {
           'govgr-footer__logo': true,
         })}
-        ref={ref}
-        {...props}>
+        {...props}
+        alt={alt}
+      >
         {children}
       </Base>
     );

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