@digigov/react-core 0.25.2 → 0.25.4

package/src/PageTitleCaption/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 PageTitleCaptionProps extends BaseProps<'span'> {
   /**
@@ -16,18 +16,18 @@ export const PageTitleCaption = React.forwardRef<
   HTMLSpanElement,
   PageTitleCaptionProps
 >(function PageTitleCaption(
-  { size = 'l', className, children, ...props },
+  { children, className, size = 'l', ...props },
   ref
 ) {
   return (
     <Base
       as="span"
-      ref={ref}
       className={clsx(className, {
         'govgr-caption-xl': size === 'xl',
         'govgr-caption-l': size === 'l',
         'govgr-caption-m': size === 'm',
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/PageTitleHeading/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 PageTitleHeadingProps extends BaseProps<'h1'> {
   /**
@@ -15,19 +15,19 @@ export const PageTitleHeading = React.forwardRef<
   HTMLHeadingElement,
   PageTitleHeadingProps
 >(function PageTitleHeading(
-  { size = 'xl', className, children, ...props },
+  { children, className, size = 'xl', ...props },
   ref
 ) {
   return (
     <Base
       as="h1"
-      ref={ref}
       className={clsx(className, {
         'govgr-heading-xl': size === 'xl',
         'govgr-heading-l': size === 'l',
         'govgr-heading-m': size === 'm',
         'govgr-heading-s': size === 's',
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/PageTitleSection/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 PageTitleSectionProps extends BaseProps<'div'> {}
 /**
@@ -10,9 +10,9 @@ export interface PageTitleSectionProps extends BaseProps<'div'> {}
 export const PageTitleSection = React.forwardRef<
   HTMLDivElement,
   PageTitleSectionProps
->(function PageTitleSection({ className, children, ...props }, ref) {
+>(function PageTitleSection({ 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>
   );

package/src/Paragraph/index.test.tsx

@@ -75,7 +75,7 @@ it('renders the Paragraph with fontWeight=bold', () => {
 it('renders the Paragraph with variant=lead and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph variant={'lead'} fontSize={'14'}>
+      <Paragraph fontSize={'14'} variant={'lead'}>
         hello
       </Paragraph>
     )
@@ -85,7 +85,7 @@ it('renders the Paragraph with variant=lead and fontSize=14', () => {
 it('renders the Paragraph with variant=lead and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph variant={'lead'} fontSize={'16'}>
+      <Paragraph fontSize={'16'} variant={'lead'}>
         hello
       </Paragraph>
     )
@@ -95,7 +95,7 @@ it('renders the Paragraph with variant=lead and fontSize=16', () => {
 it('renders the Paragraph with variant=lead and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph variant={'lead'} fontSize={'19'}>
+      <Paragraph fontSize={'19'} variant={'lead'}>
         hello
       </Paragraph>
     )
@@ -105,7 +105,7 @@ it('renders the Paragraph with variant=lead and fontSize=19', () => {
 it('renders the Paragraph with variant=lead and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph variant={'lead'} fontSize={'14'}>
+      <Paragraph fontSize={'14'} variant={'lead'}>
         hello
       </Paragraph>
     )
@@ -115,7 +115,7 @@ it('renders the Paragraph with variant=lead and fontSize=24', () => {
 it('renders the Paragraph with variant=lead and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph variant={'lead'} fontSize={'30'}>
+      <Paragraph fontSize={'30'} variant={'lead'}>
         hello
       </Paragraph>
     )
@@ -125,7 +125,7 @@ it('renders the Paragraph with variant=lead and fontSize=30', () => {
 it('renders the Paragraph with variant=lead and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph variant={'lead'} fontSize={'36'}>
+      <Paragraph fontSize={'36'} variant={'lead'}>
         hello
       </Paragraph>
     )
@@ -135,7 +135,7 @@ it('renders the Paragraph with variant=lead and fontSize=36', () => {
 it('renders the Paragraph with variant=lead and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph variant={'lead'} fontSize={'48'}>
+      <Paragraph fontSize={'48'} variant={'lead'}>
         hello
       </Paragraph>
     )
@@ -145,7 +145,7 @@ it('renders the Paragraph with variant=lead and fontSize=48', () => {
 it('renders the Paragraph with variant=lead and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph variant={'lead'} fontSize={'72'}>
+      <Paragraph fontSize={'72'} variant={'lead'}>
         hello
       </Paragraph>
     )
@@ -155,7 +155,7 @@ it('renders the Paragraph with variant=lead and fontSize=72', () => {
 it('renders the Paragraph with variant=small and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph variant={'small'} fontSize={'14'}>
+      <Paragraph fontSize={'14'} variant={'small'}>
         hello
       </Paragraph>
     )
@@ -165,7 +165,7 @@ it('renders the Paragraph with variant=small and fontSize=14', () => {
 it('renders the Paragraph with variant=small and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph variant={'small'} fontSize={'16'}>
+      <Paragraph fontSize={'16'} variant={'small'}>
         hello
       </Paragraph>
     )
@@ -175,7 +175,7 @@ it('renders the Paragraph with variant=small and fontSize=16', () => {
 it('renders the Paragraph with variant=small and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph variant={'small'} fontSize={'19'}>
+      <Paragraph fontSize={'19'} variant={'small'}>
         hello
       </Paragraph>
     )
@@ -185,7 +185,7 @@ it('renders the Paragraph with variant=small and fontSize=19', () => {
 it('renders the Paragraph with variant=small and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph variant={'small'} fontSize={'14'}>
+      <Paragraph fontSize={'14'} variant={'small'}>
         hello
       </Paragraph>
     )
@@ -195,7 +195,7 @@ it('renders the Paragraph with variant=small and fontSize=24', () => {
 it('renders the Paragraph with variant=small and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph variant={'small'} fontSize={'30'}>
+      <Paragraph fontSize={'30'} variant={'small'}>
         hello
       </Paragraph>
     )
@@ -205,7 +205,7 @@ it('renders the Paragraph with variant=small and fontSize=30', () => {
 it('renders the Paragraph with variant=small and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph variant={'small'} fontSize={'36'}>
+      <Paragraph fontSize={'36'} variant={'small'}>
         hello
       </Paragraph>
     )
@@ -215,7 +215,7 @@ it('renders the Paragraph with variant=small and fontSize=36', () => {
 it('renders the Paragraph with variant=small and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph variant={'small'} fontSize={'48'}>
+      <Paragraph fontSize={'48'} variant={'small'}>
         hello
       </Paragraph>
     )
@@ -225,7 +225,7 @@ it('renders the Paragraph with variant=small and fontSize=48', () => {
 it('renders the Paragraph with variant=small and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph variant={'small'} fontSize={'72'}>
+      <Paragraph fontSize={'72'} variant={'small'}>
         hello
       </Paragraph>
     )
@@ -235,7 +235,7 @@ it('renders the Paragraph with variant=small and fontSize=72', () => {
 it('renders the Paragraph with variant=normal and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'14'}>
+      <Paragraph fontSize={'14'} variant={'normal'}>
         hello
       </Paragraph>
     )
@@ -245,7 +245,7 @@ it('renders the Paragraph with variant=normal and fontSize=14', () => {
 it('renders the Paragraph with variant=normal and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'16'}>
+      <Paragraph fontSize={'16'} variant={'normal'}>
         hello
       </Paragraph>
     )
@@ -255,7 +255,7 @@ it('renders the Paragraph with variant=normal and fontSize=16', () => {
 it('renders the Paragraph with variant=normal and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'19'}>
+      <Paragraph fontSize={'19'} variant={'normal'}>
         hello
       </Paragraph>
     )
@@ -265,7 +265,7 @@ it('renders the Paragraph with variant=normal and fontSize=19', () => {
 it('renders the Paragraph with variant=normal and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'14'}>
+      <Paragraph fontSize={'14'} variant={'normal'}>
         hello
       </Paragraph>
     )
@@ -275,7 +275,7 @@ it('renders the Paragraph with variant=normal and fontSize=24', () => {
 it('renders the Paragraph with variant=normal and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'30'}>
+      <Paragraph fontSize={'30'} variant={'normal'}>
         hello
       </Paragraph>
     )
@@ -285,7 +285,7 @@ it('renders the Paragraph with variant=normal and fontSize=30', () => {
 it('renders the Paragraph with variant=normal and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'36'}>
+      <Paragraph fontSize={'36'} variant={'normal'}>
         hello
       </Paragraph>
     )
@@ -295,7 +295,7 @@ it('renders the Paragraph with variant=normal and fontSize=36', () => {
 it('renders the Paragraph with variant=normal and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'48'}>
+      <Paragraph fontSize={'48'} variant={'normal'}>
         hello
       </Paragraph>
     )
@@ -305,7 +305,7 @@ it('renders the Paragraph with variant=normal and fontSize=48', () => {
 it('renders the Paragraph with variant=normal and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'72'}>
+      <Paragraph fontSize={'72'} variant={'normal'}>
         hello
       </Paragraph>
     )
@@ -314,7 +314,7 @@ it('renders the Paragraph with variant=normal and fontSize=72', () => {
 it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="regular', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'72'} fontWeight="regular">
+      <Paragraph fontSize={'72'} fontWeight="regular" variant={'normal'}>
         hello
       </Paragraph>
     )
@@ -323,7 +323,7 @@ it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="regul
 it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="bold', () => {
   expect(
     mount(
-      <Paragraph variant={'normal'} fontSize={'72'} fontWeight="bold">
+      <Paragraph fontSize={'72'} fontWeight="bold" variant={'normal'}>
         hello
       </Paragraph>
     )

package/src/Paragraph/index.tsx

@@ -1,16 +1,8 @@
 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 ParagraphProps extends BaseProps<'p'> {
-  /**
-   * variant is optional.
-   * Use 'lead' when a lead paragraph 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 paragraph font size smaller: 16px on larger screens and 14px on smaller screens.
-   */
-  variant?: 'lead' | 'normal' | 'small';
-
   /**
    * fontSize is optional.
    * You can add this fontSize override prop in order to change the font size.
@@ -22,19 +14,26 @@ export interface ParagraphProps extends BaseProps<'p'> {
    * 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 paragraph 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 paragraph font size smaller: 16px on larger screens and 14px on smaller screens.
+   */
+  variant?: 'lead' | 'normal' | 'small';
 }
 /**
  * Paragraph component is used for text formatting.
  */
 export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
   function Paragraph(
-    { variant = 'normal', fontSize, fontWeight, className, children, ...props },
+    { children, className, fontSize, fontWeight, variant = 'normal', ...props },
     ref
   ) {
     return (
       <Base
         as="p"
-        ref={ref}
         className={clsx(className, {
           'govgr-body': true,
           'govgr-body-l': variant === 'lead',
@@ -50,6 +49,7 @@ export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
           'govgr-!-font-weight-regular': fontWeight == 'regular',
           'govgr-!-font-weight-bold': fontWeight == 'bold',
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/PhaseBanner/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 PhaseBannerProps extends BaseProps<'div'> {
   /**
@@ -15,17 +15,17 @@ export interface PhaseBannerProps extends BaseProps<'div'> {
  */
 export const PhaseBanner = React.forwardRef<HTMLDivElement, PhaseBannerProps>(
   function PhaseBanner(
-    { className, underline = false, children, ...props },
+    { children, className, underline = false, ...props },
     ref
   ) {
     return (
       <Base
         as="div"
-        ref={ref}
         className={clsx(className, {
           'govgr-phase-banner': true,
           'govgr-phase-banner__underline': underline,
         })}
+        ref={ref}
         {...props}
       >
         <p

package/src/PhaseBannerHeaderContainer/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 PhaseBannerHeaderContainerProps extends BaseProps<'div'> {}
 
@@ -11,12 +11,11 @@ export const PhaseBannerHeaderContainer = React.forwardRef<
   return (
     <Base
       as="div"
-      ref={ref}
-      {...props}
       className={clsx({
         'govgr-phase-banner_header': true,
       })}
-    >
+      ref={ref}
+      {...props}>
       {children}
     </Base>
   );

package/src/PhaseBannerTag/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 PhaseBannerTagProps extends BaseProps<'strong'> {}
 /**
@@ -9,15 +9,15 @@ export interface PhaseBannerTagProps extends BaseProps<'strong'> {}
 export const PhaseBannerTag = React.forwardRef<
   HTMLElement,
   PhaseBannerTagProps
->(function PhaseBannerTag({ className, children, ...props }, ref) {
+>(function PhaseBannerTag({ children, className, ...props }, ref) {
   return (
     <Base
       as="strong"
-      ref={ref}
       className={clsx(className, {
         'govgr-tag': true,
         'govgr-phase-banner__content__tag': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

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

package/src/RadioConditional/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-import LabelContainer from '@digigov/react-core/LabelContainer';
 import FieldContainer from '@digigov/react-core/FieldContainer';
-import clsx from 'clsx';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 
 export interface RadioConditionalProps extends BaseProps<'div'> {}
 /**
@@ -13,14 +13,14 @@ export interface RadioConditionalProps extends BaseProps<'div'> {}
 export const RadioConditional = React.forwardRef<
   HTMLDivElement,
   RadioConditionalProps
->(function RadioConditional({ className, children, ...props }, ref) {
+>(function RadioConditional({ children, className, ...props }, ref) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-radios__conditional': true,
       })}
+      ref={ref}
       {...props}
     >
       <FieldContainer>

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

package/src/RadioItem/index.test.tsx

@@ -34,7 +34,7 @@ it('renders the RadioItem with disabled prop', () => {
 it('renders the RadioItem with name disabled and value props', () => {
   expect(
     mount(
-      <RadioItem name={'name'} value={'someValue'} disabled>
+      <RadioItem disabled name={'name'} value={'someValue'}>
         hello
       </RadioItem>
     )

package/src/RadioItem/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import LabelContainer from '@digigov/react-core/LabelContainer';
-import clsx from 'clsx';
 
 export interface RadioItemProps extends BaseProps<'input'> {}
 /**
@@ -10,7 +10,7 @@ export interface RadioItemProps extends BaseProps<'input'> {}
  */
 export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
   function RadioItem(
-    { name, value, className, disabled = false, children, ...props },
+    { children, className, disabled = false, name, value, ...props },
     ref
   ) {
     return (
@@ -28,14 +28,14 @@ export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
           {children}
           <Base
             as="input"
-            ref={ref}
-            type="radio"
-            name={name}
-            value={value}
             className={clsx({
               'govgr-radios__input': true,
             })}
             disabled={disabled}
+            name={name}
+            ref={ref}
+            type="radio"
+            value={value}
             {...props}
           />
         </LabelContainer>

package/src/SectionBreak/index.tsx

@@ -1,31 +1,30 @@
 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 SectionBreakProps extends BaseProps<'hr'> {
   /**
-   * visible is optional.
-   * By default, SectionBreak only visible by its margin. You can add the 'visible' prop to make it visible with a separator line.
+   * size is optional and it is about the different size margins.
    */
-  visible?: boolean;
+  size?: 'xl' | 'l' | 'm' | 's';
 
   /**
-   * size is optional and it is about the different size margins.
+   * visible is optional.
+   * By default, SectionBreak only visible by its margin. You can add the 'visible' prop to make it visible with a separator line.
    */
-  size?: 'xl' | 'l' | 'm' | 's';
+  visible?: boolean;
 }
 /**
  * SectionBreak is used to create a thematic break between sections of content.
  */
 export const SectionBreak = React.forwardRef<HTMLHRElement, SectionBreakProps>(
   function SectionBreak(
-    { visible = true, size = 's', className, ...props },
+    { className, size = 's', visible = true, ...props },
     ref
   ) {
     return (
       <Base
         as="hr"
-        ref={ref}
         className={clsx(className, {
           'govgr-section-break': true,
           'govgr-section-break--visible': visible === true,
@@ -33,6 +32,7 @@ export const SectionBreak = React.forwardRef<HTMLHRElement, SectionBreakProps>(
           'govgr-section-break--l': size === 'l',
           'govgr-section-break--m': size === 'm',
         })}
+        ref={ref}
         {...props}
       />
     );

package/src/SelectContainer/index.test.tsx

@@ -16,7 +16,7 @@ it('renders the SelectContainer with name props', () => {
 it('renders the SelectContainer with name and defaultValue', () => {
   expect(
     mount(
-      <SelectContainer name={'some-name'} defaultValue={'some-value'}>
+      <SelectContainer defaultValue={'some-value'} name={'some-name'}>
         hello
       </SelectContainer>
     )

package/src/SelectContainer/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 SelectContainerProps extends BaseProps<'select'> {}
 /**
@@ -10,15 +10,15 @@ export interface SelectContainerProps extends BaseProps<'select'> {}
 export const SelectContainer = React.forwardRef<
   HTMLSelectElement,
   SelectContainerProps
->(function SelectContainer({ name, className, children, ...props }, ref) {
+>(function SelectContainer({ children, className, name, ...props }, ref) {
   return (
     <Base
       as="select"
-      name={name}
-      ref={ref}
       className={clsx(className, {
         'govgr-select': true,
       })}
+      name={name}
+      ref={ref}
       {...props}
     >
       {children}