@digigov/react-core 0.25.4 → 0.25.5

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

package/src/AccordionSectionHeader/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 AccordionSectionHeaderProps extends BaseProps<'summary'> {}
 /**
@@ -9,14 +9,14 @@ export interface AccordionSectionHeaderProps extends BaseProps<'summary'> {}
 export const AccordionSectionHeader = React.forwardRef<
   HTMLElement,
   AccordionSectionHeaderProps
->(function AccordionSectionHeader({ children, className, ...props }, ref) {
+>(function AccordionSectionHeader({ className, children, ...props }, ref) {
   return (
     <Base
       as="summary"
+      ref={ref}
       className={clsx(className, {
         'govgr-accordion__section-header': true,
       })}
-      ref={ref}
       {...props}
     >
       <h2

package/src/AccordionSectionSummary/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 AccordionSectionSummaryProps extends BaseProps<'summary'> {}
 /**
@@ -9,14 +9,14 @@ export interface AccordionSectionSummaryProps extends BaseProps<'summary'> {}
 export const AccordionSectionSummary = React.forwardRef<
   HTMLDivElement,
   AccordionSectionSummaryProps
->(function AccordionSectionSummary({ children, className, ...props }, ref) {
+>(function AccordionSectionSummary({ className, children, ...props }, ref) {
   return (
     <Base
       as="summary"
+      ref={ref}
       className={clsx(className, {
         'govgr-accordion__section-summary': true,
       })}
-      ref={ref}
       role="heading"
       {...props}
     >

package/src/AccordionSectionSummaryHeading/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 AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> {}
 /**
@@ -10,18 +10,19 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
   HTMLHeadingElement,
   AccordionSectionSummaryHeadingProps
 >(function AccordionSectionSummaryHeading(
-  { children, className, ...props },
+  { className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="h2"
+      ref={ref}
       className={clsx(className, {
         'govgr-accordion__section-heading': true,
       })}
-      ref={ref}
+      {...props}
       role="button"
-      {...props}>
+    >
       <span
         className={clsx({
           'govgr-accordion__section-button': true,

package/src/ArrowIcon/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
 export interface ArrowIconProps extends SvgIconProps {
   direction?: 'up' | 'right' | 'down' | 'left';
 }
@@ -12,11 +12,13 @@ export const ArrowIcon: React.FC<ArrowIconProps> = React.forwardRef<
   SVGSVGElement,
   ArrowIconProps
 >(function ArrowIcon(
-  { className, direction = 'right', size, variant, ...props },
+  { size, variant, direction = 'right', className, ...props },
   ref
 ) {
   return (
     <SvgIcon
+      size={size}
+      variant={variant}
       className={clsx(className, {
         'govgr-arrow--right': direction === 'right',
         'govgr-arrow--left': direction === 'left',
@@ -24,8 +26,6 @@ export const ArrowIcon: React.FC<ArrowIconProps> = React.forwardRef<
         'govgr-arrow--down': direction === 'down',
       })}
       ref={ref}
-      size={size}
-      variant={variant}
       {...props}
     >
       {direction === 'left' && (

package/src/Aside/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 AsideProps extends BaseProps<'aside'> {}
 /**
@@ -8,16 +8,16 @@ export interface AsideProps extends BaseProps<'aside'> {}
  * that will be shown on the left one third of the page
  */
 export const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(
-  { children, className, ...props },
+  { className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="aside"
+      ref={ref}
       className={clsx(className, {
         'govgr-grid-column-one-third': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/BackLink/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';
 import CaretIcon from '@digigov/react-core/CaretIcon';
 export interface BackLinkProps extends BaseProps<'a'> {}
 /**
@@ -8,21 +8,21 @@ export interface BackLinkProps extends BaseProps<'a'> {}
  */
 export const BackLink = React.forwardRef<HTMLAnchorElement, BackLinkProps>(
   function BackLink(
-    { children, className, href, printHidden = true, tabIndex = 0, ...props },
+    { href, tabIndex = 0, printHidden = true, className, children, ...props },
     ref
   ) {
     return (
       <Base
         as="a"
-        className={clsx(className, {
-          'govgr-back-link': true,
-        })}
+        printHidden={printHidden}
         href={href}
         onClick={() => {
           !href && window.history.back();
         }}
-        printHidden={printHidden}
         ref={ref}
+        className={clsx(className, {
+          'govgr-back-link': true,
+        })}
         tabIndex={tabIndex}
         {...props}
       >

package/src/Base/index.tsx

@@ -143,30 +143,30 @@ export const Base: BaseComponent = React.forwardRef(function Base<
 >(
   {
     as,
-    children,
-    className,
-    lgHidden,
-    lgUpHidden,
     margin,
+    marginTop,
     marginBottom,
     marginLeft,
     marginRight,
-    marginTop,
-    mdHidden,
-    mdUpHidden,
     padding,
+    paddingTop,
     paddingBottom,
     paddingLeft,
     paddingRight,
-    paddingTop,
     printHidden,
     printVisible,
-    smHidden,
+    xsUpHidden,
     smUpHidden,
-    xlHidden,
+    mdUpHidden,
+    lgUpHidden,
     xlUpHidden,
     xsHidden,
-    xsUpHidden,
+    smHidden,
+    mdHidden,
+    lgHidden,
+    xlHidden,
+    children,
+    className,
     ...props
   }: BaseProps<C>,
   ref?: PolymorphicRef<C>
@@ -175,6 +175,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
 
   return (
     <Component
+      ref={ref}
       className={clsx(
         className,
         calculateClasses(
@@ -202,7 +203,6 @@ export const Base: BaseComponent = React.forwardRef(function Base<
           xlHidden
         )
       )}
-      ref={ref}
       {...props}
     >
       {children}

package/src/Blockquote/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 BlockquoteProps extends BaseProps<'blockquote'> {}
 /**
  * Use Blockquote to differentiate a block of text from the content that surrounds it.
  */
 export const Blockquote = React.forwardRef<HTMLElement, BlockquoteProps>(
-  function Blockquote({ children, className, ...props }, ref) {
+  function Blockquote({ className, children, ...props }, ref) {
     return (
       <Base
         as="blockquote"
+        ref={ref}
         className={clsx(className, {
           'govgr-blockquote': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/Bottom/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 BottomProps extends BaseProps<'div'> {}
 /**
  * Bottom is used inside the Layout component and it must be the last component in order.
  */
 export const Bottom = React.forwardRef<HTMLDivElement, BottomProps>(
-  function Bottom({ children, className, ...props }, ref) {
+  function Bottom({ className, children, ...props }, ref) {
     return (
       <Base
         as="div"
+        ref={ref}
         className={clsx(className, {
           'govgr-bottom': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/Breadcrumbs/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 BreadcrumbsProps extends BaseProps<'div'> {}
 /**
@@ -8,14 +8,14 @@ export interface BreadcrumbsProps extends BaseProps<'div'> {}
  * The breadcrumb should start with your ‘home’ page and end with the parent section of the current page.
  */
 export const Breadcrumbs = React.forwardRef<HTMLDivElement, BreadcrumbsProps>(
-  function Breadcrumbs({ children, className, ...props }, ref) {
+  function Breadcrumbs({ className, children, ...props }, ref) {
     return (
       <Base
         as="nav"
+        ref={ref}
         className={clsx(className, {
           'govgr-breadcrumbs': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/BreadcrumbsList/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 BreadcrumbsListProps extends BaseProps<'ol'> {}
 /**
@@ -9,14 +9,14 @@ export interface BreadcrumbsListProps extends BaseProps<'ol'> {}
 export const BreadcrumbsList = React.forwardRef<
   HTMLOListElement,
   BreadcrumbsListProps
->(function BreadcrumbsList({ children, className, ...props }, ref) {
+>(function BreadcrumbsList({ className, children, ...props }, ref) {
   return (
     <Base
       as="ol"
+      ref={ref}
       className={clsx(className, {
         'govgr-breadcrumbs__list': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/BreadcrumbsListItem/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 BreadcrumbsListItemProps extends BaseProps<'li'> {
   /**
@@ -15,21 +15,21 @@ export interface BreadcrumbsListItemProps extends BaseProps<'li'> {
 export const BreadcrumbsListItem = React.forwardRef<
   HTMLLIElement,
   BreadcrumbsListItemProps
->(function BreadcrumbsListItem({ children, className, href, ...props }, ref) {
+>(function BreadcrumbsListItem({ href, className, children, ...props }, ref) {
   return (
     <Base
       as="li"
+      ref={ref}
       className={clsx(className, {
         'govgr-breadcrumbs__list-item': true,
       })}
-      ref={ref}
       {...props}
     >
       <a
+        href={href}
         className={clsx({
           'govgr-breadcrumbs__link': true,
         })}
-        href={href}
       >
         {children}
       </a>

package/src/BurgerIcon/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
 export interface BurgerIconProps extends SvgIconProps {
   /**
    * active is optional.
@@ -16,21 +16,21 @@ export interface BurgerIconProps extends SvgIconProps {
 export const BurgerIcon: React.FC<BurgerIconProps> = React.forwardRef<
   SVGSVGElement,
   BurgerIconProps
->(function BurgerIcon({ active, className, size, variant, ...props }, ref) {
+>(function BurgerIcon({ variant, size, active, className, ...props }, ref) {
   return (
     <SvgIcon
+      variant={variant}
+      size={size}
       className={clsx(className, {
         'govgr-burger-icon': true,
         'govgr-burger-icon--active': active === true,
       })}
       ref={ref}
-      size={size}
-      variant={variant}
       {...props}
     >
-      <rect height="3.3" id="govgr-burger-icon__line-1" width="20" />
-      <rect height="3.3" id="govgr-burger-icon__line-2" width="20" />
-      <rect height="3.3" id="govgr-burger-icon__line-3" width="20" />
+      <rect id="govgr-burger-icon__line-1" width="20" height="3.3" />
+      <rect id="govgr-burger-icon__line-2" width="20" height="3.3" />
+      <rect id="govgr-burger-icon__line-3" width="20" height="3.3" />
     </SvgIcon>
   );
 });

package/src/Button/index.test.tsx

@@ -24,7 +24,7 @@ it('renders the Button with disabled=false', () => {
 it('renders the Button with color=primary with disabled=true', () => {
   expect(
     mount(
-      <Button color={'primary'} disabled={true}>
+      <Button disabled={true} color={'primary'}>
         hello
       </Button>
     )
@@ -33,7 +33,7 @@ it('renders the Button with color=primary with disabled=true', () => {
 it('renders the Button with color=secondary with disabled=true', () => {
   expect(
     mount(
-      <Button color={'secondary'} disabled={true}>
+      <Button disabled={true} color={'secondary'}>
         hello
       </Button>
     )
@@ -42,7 +42,7 @@ it('renders the Button with color=secondary with disabled=true', () => {
 it('renders the Button with color=warning with disabled=true', () => {
   expect(
     mount(
-      <Button color={'warning'} disabled={true}>
+      <Button disabled={true} color={'warning'}>
         hello
       </Button>
     )

package/src/Button/index.tsx

@@ -22,12 +22,12 @@ export interface ButtonProps extends BaseProps<'button'> {
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(
     {
-      children,
-      className,
       color = 'primary',
+      variant = 'button',
       disabled,
       printHidden = true,
-      variant = 'button',
+      className,
+      children,
       ...props
     },
     ref
@@ -35,6 +35,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Base
         as="button"
+        disabled={disabled}
+        printHidden={printHidden}
+        ref={ref}
         className={clsx(className, {
           'govgr-link': variant === 'link',
           'govgr-btn': variant === 'button',
@@ -43,9 +46,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           'govgr-btn-warning': variant === 'button' && color === 'warning',
           'govgr-btn-disabled': variant === 'button' && disabled === true,
         })}
-        disabled={disabled}
-        printHidden={printHidden}
-        ref={ref}
         {...props}
       >
         {children}

package/src/ButtonGroup/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 ButtonGroupProps extends BaseProps<'div'> {}
 /**
  * Use a button group when two or more buttons are placed together.
  */
 export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-  function ButtonGroup({ children, className, ...props }, ref) {
+  function ButtonGroup({ className, children, ...props }, ref) {
     return (
       <Base
         as="div"
+        ref={ref}
         className={clsx(className, {
           'govgr-button-group': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/ButtonLink/index.test.tsx

@@ -30,7 +30,7 @@ it('renders the ButtonLink with disabled=false', () => {
 it('renders the ButtonLink with color=primary with href=#', () => {
   expect(
     mount(
-      <ButtonLink color={'primary'} href={'#'}>
+      <ButtonLink href={'#'} color={'primary'}>
         hello
       </ButtonLink>
     )
@@ -39,7 +39,7 @@ it('renders the ButtonLink with color=primary with href=#', () => {
 it('renders the ButtonLink with color=secondary with href=#', () => {
   expect(
     mount(
-      <ButtonLink color={'secondary'} href={'#'}>
+      <ButtonLink href={'#'} color={'secondary'}>
         hello
       </ButtonLink>
     )
@@ -48,7 +48,7 @@ it('renders the ButtonLink with color=secondary with href=#', () => {
 it('renders the ButtonLink with color=warning with href=#', () => {
   expect(
     mount(
-      <ButtonLink color={'warning'} href={'#'}>
+      <ButtonLink href={'#'} color={'warning'}>
         hello
       </ButtonLink>
     )

package/src/ButtonLink/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 ButtonLinkProps extends BaseProps<'a'> {
   /**
@@ -17,19 +17,19 @@ export interface ButtonLinkProps extends BaseProps<'a'> {
  */
 export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
   function ButtonLink(
-    { children, className, color = 'primary', ...props },
+    { color = 'primary', className, children, ...props },
     ref
   ) {
     return (
       <Base
         as="a"
+        ref={ref}
         className={clsx(className, {
           'govgr-btn': true,
           'govgr-btn-primary': color === 'primary',
           'govgr-btn-secondary': color === 'secondary',
           'govgr-btn-warning': color === 'warning',
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/CallToAction/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
-import ArrowIcon from '@digigov/react-core/ArrowIcon';
 import ButtonLink, { ButtonLinkProps } from '@digigov/react-core/ButtonLink';
+import ArrowIcon from '@digigov/react-core/ArrowIcon';
 
 export interface CallToActionProps extends ButtonLinkProps {}
 /**
@@ -11,16 +11,16 @@ export const CallToAction = React.forwardRef<
   HTMLAnchorElement,
   CallToActionProps
 >(function CallToAction(
-  { children, className, printHidden = true, ...props },
+  { printHidden = true, className, children, ...props },
   ref
 ) {
   return (
     <ButtonLink
+      ref={ref}
+      printHidden={printHidden}
       className={clsx(className, {
         'govgr-btn-cta': true,
       })}
-      printHidden={printHidden}
-      ref={ref}
       {...props}
     >
       {children}

package/src/Card/index.test.tsx

@@ -22,7 +22,7 @@ it('renders the Card with variant="border-top" props', () => {
 it('renders the Card with variant="border" and borderColor="dark" props', () => {
   expect(
     mount(
-      <Card borderColor="dark" variant="border">
+      <Card variant="border" borderColor="dark">
         hello
       </Card>
     )
@@ -31,7 +31,7 @@ it('renders the Card with variant="border" and borderColor="dark" props', () =>
 it('renders the Card with variant="border" and borderColor="gray" props', () => {
   expect(
     mount(
-      <Card borderColor="gray" variant="border">
+      <Card variant="border" borderColor="gray">
         hello
       </Card>
     )
@@ -40,7 +40,7 @@ it('renders the Card with variant="border" and borderColor="gray" props', () =>
 it('renders the Card with variant="border-top" and borderColor="dark" props', () => {
   expect(
     mount(
-      <Card borderColor="dark" variant="border-top">
+      <Card variant="border-top" borderColor="dark">
         hello
       </Card>
     )
@@ -49,7 +49,7 @@ it('renders the Card with variant="border-top" and borderColor="dark" props', ()
 it('renders the Card with variant="border-top" and borderColor="gray" props', () => {
   expect(
     mount(
-      <Card borderColor="gray" variant="border-top">
+      <Card variant="border-top" borderColor="gray">
         hello
       </Card>
     )
@@ -58,7 +58,7 @@ it('renders the Card with variant="border-top" and borderColor="gray" props', ()
 it('renders the Card with variant="border-top" and borderColor="dark" callToAction props', () => {
   expect(
     mount(
-      <Card borderColor="dark" callToAction variant="border-top">
+      <Card variant="border-top" borderColor="dark" callToAction>
         hello
       </Card>
     )