@digigov/react-core 0.25.4 → 0.26.0

package/src/Accordion/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 AccordionProps extends BaseProps<'div'> {}
 /**
@@ -8,14 +8,14 @@ export interface AccordionProps extends BaseProps<'div'> {}
  * Inside this component must be a list of AccordionSection components.
  */
 export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-  function Accordion({ children, className, ...props }, ref) {
+  function Accordion({ className, children, ...props }, ref) {
     return (
       <Base
         as="div"
+        ref={ref}
         className={clsx(className, {
           'govgr-accordion': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

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

package/src/AccordionSection/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 AccordionSectionProps extends BaseProps<'details'> {
   /*
    * border is optional. The default value is true.
@@ -18,17 +18,17 @@ export const AccordionSection = React.forwardRef<
   HTMLDetailsElement,
   AccordionSectionProps
 >(function AccordionSection(
-  { border = true, children, className, ...props },
+  { className, border = true, children, ...props },
   ref
 ) {
   return (
     <Base
       as="details"
+      ref={ref}
       className={clsx(className, {
         'govgr-accordion__section': true,
         'govgr-accordion__section--no-border': !border,
       })}
-      ref={ref}
       {...props}
     >
       {children}

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

@@ -55,6 +55,7 @@ export type BaseProps<
     paddingRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
     printHidden?: boolean;
+    printVisible?: 'block' | 'inline';
     /** Components will be hidden from 'xs' screen size and up. */
     xsUpHidden?: boolean;
     /** Components will be hidden from 'sm' screen size and up. */
@@ -85,88 +86,35 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
   props: BaseProps<C>
 ) => React.ReactElement | null;
 
-function calculateClasses(
-  margin?: number,
-  marginTop?: number,
-  marginBottom?: number,
-  marginRight?: number,
-  marginLeft?: number,
-  padding?: number,
-  paddingTop?: number,
-  paddingBottom?: number,
-  paddingRight?: number,
-  paddingLeft?: number,
-  printHidden?: boolean,
-  printVisible?: 'block' | 'inline',
-  xsUpHidden?: boolean,
-  smUpHidden?: boolean,
-  mdUpHidden?: boolean,
-  lgUpHidden?: boolean,
-  xlUpHidden?: boolean,
-  xsHidden?: boolean,
-  smHidden?: boolean,
-  mdHidden?: boolean,
-  lgHidden?: boolean,
-  xlHidden?: boolean
-) {
-  const classList = {} as Record<string, boolean>;
-  for (let i = 0; i <= 12; i++) {
-    classList[`govgr-m-${i}`] = margin === i;
-    classList[`govgr-mt-${i}`] = marginTop === i;
-    classList[`govgr-mb-${i}`] = marginBottom === i;
-    classList[`govgr-mr-${i}`] = marginRight === i;
-    classList[`govgr-ml-${i}`] = marginLeft === i;
-    classList[`govgr-p-${i}`] = padding === i;
-    classList[`govgr-pt-${i}`] = paddingTop === i;
-    classList[`govgr-pb-${i}`] = paddingBottom === i;
-    classList[`govgr-pr-${i}`] = paddingRight === i;
-    classList[`govgr-pl-${i}`] = paddingLeft === i;
-  }
-  classList['govgr-print-hidden'] = !!printHidden;
-  classList['govgr-print-visible-block'] = printVisible === 'block';
-  classList['govgr-print-visible-inline'] = printVisible === 'inline';
-  classList['govgr-hidden-xs--up'] = xsUpHidden === true;
-  classList['govgr-hidden-sm--up'] = smUpHidden === true;
-  classList['govgr-hidden-md--up'] = mdUpHidden === true;
-  classList['govgr-hidden-lg--up'] = lgUpHidden === true;
-  classList['govgr-hidden-xl--up'] = xlUpHidden === true;
-  classList['govgr-hidden-xs'] = xsHidden === true;
-  classList['govgr-hidden-sm'] = smHidden === true;
-  classList['govgr-hidden-md'] = mdHidden === true;
-  classList['govgr-hidden-lg'] = lgHidden === true;
-  classList['govgr-hidden-xl'] = xlHidden === true;
-  return classList;
-}
-
 export const Base: BaseComponent = React.forwardRef(function Base<
   C extends React.ElementType = 'span'
 >(
   {
     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,33 +123,36 @@ export const Base: BaseComponent = React.forwardRef(function Base<
 
   return (
     <Component
-      className={clsx(
-        className,
-        calculateClasses(
-          margin,
-          marginTop,
-          marginBottom,
-          marginRight,
-          marginLeft,
-          padding,
-          paddingTop,
-          paddingBottom,
-          paddingRight,
-          paddingLeft,
-          printHidden,
-          printVisible,
-          xsUpHidden,
-          smUpHidden,
-          mdUpHidden,
-          lgUpHidden,
-          xlUpHidden,
-          xsHidden,
-          smHidden,
-          mdHidden,
-          lgHidden,
-          xlHidden
-        )
-      )}
+      className={clsx(className, {
+        [`govgr-m-${margin}`]: margin !== undefined ? true : undefined,
+        [`govgr-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,
+        [`govgr-mb-${marginBottom}`]:
+          marginBottom !== undefined ? true : undefined,
+        [`govgr-mr-${marginRight}`]:
+          marginRight !== undefined ? true : undefined,
+        [`govgr-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,
+        [`govgr-p-${padding}`]: padding !== undefined ? true : undefined,
+        [`govgr-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,
+        [`govgr-pb-${paddingBottom}`]:
+          paddingBottom !== undefined ? true : undefined,
+        [`govgr-pr-${paddingRight}`]:
+          paddingRight !== undefined ? true : undefined,
+        [`govgr-pl-${paddingLeft}`]:
+          paddingLeft !== undefined ? true : undefined,
+        'govgr-print-hidden': !!printHidden,
+        'govgr-print-visible-block': printVisible === 'block',
+        'govgr-print-visible-inline': printVisible === 'inline',
+        'govgr-hidden-xs--up': !!xsUpHidden,
+        'govgr-hidden-sm--up': !!smUpHidden,
+        'govgr-hidden-md--up': !!mdUpHidden,
+        'govgr-hidden-lg--up': !!lgUpHidden,
+        'govgr-hidden-xl--up': !!xlUpHidden,
+        'govgr-hidden-xs': !!xsHidden,
+        'govgr-hidden-sm': !!smHidden,
+        'govgr-hidden-md': !!mdHidden,
+        'govgr-hidden-lg': !!lgHidden,
+        'govgr-hidden-xl': !!xlHidden,
+      })}
       ref={ref}
       {...props}
     >

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>
     )