@digigov/react-core 0.25.4 → 0.26.0

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

package/src/Card/index.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface CardProps extends BaseProps<'div'> {
+  /**
+   * By default, we recommend using Cards without border style. Card border increases the contrast to its background.
+   * divider
+   * `variant` property is optional.
+   */
+  variant?: 'border' | 'divider' | 'border-top';
+
   /**
    *borderColor property is optional and it is used to set the color of the Card's border.
    *
@@ -16,13 +23,6 @@ export interface CardProps extends BaseProps<'div'> {
    *
    */
   callToAction?: boolean;
-
-  /**
-   * By default, we recommend using Cards without border style. Card border increases the contrast to its background.
-   * divider
-   * `variant` property is optional.
-   */
-  variant?: 'border' | 'divider' | 'border-top';
 }
 /**
  * Cards can be used to divide and organise interface content for better understandability and readability.
@@ -30,12 +30,13 @@ export interface CardProps extends BaseProps<'div'> {
  * Use Card as parent component to wrap CardHeading, CardText and CartAction components
  */
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
-  { borderColor, callToAction, children, className, variant, ...props },
+  { variant, borderColor, callToAction, className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-card': true,
         'govgr-card--border': variant === 'border',
@@ -45,7 +46,6 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
         'govgr-card--border-gray': borderColor === 'gray',
         'govgr-card--border-dark': borderColor === 'dark',
       })}
-      ref={ref}
       {...props}
     >
       <div

package/src/CardAction/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 CardActionProps extends BaseProps<'div'> {}
 /**
@@ -9,14 +9,14 @@ export interface CardActionProps extends BaseProps<'div'> {}
  * Use CardAction inside Card component as childern
  */
 export const CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(
-  function CardText({ children, className, ...props }, ref) {
+  function CardText({ className, children, ...props }, ref) {
     return (
       <Base
         as="div"
+        ref={ref}
         className={clsx(className, {
           'govgr-card__action': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/CardHeading/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 CardHeadingProps extends BaseProps<'div'> {}
 /**
@@ -8,16 +8,16 @@ export interface CardHeadingProps extends BaseProps<'div'> {}
  * Use CardHeading inside Card component as children
  */
 export const CardHeading = React.forwardRef<HTMLDivElement, CardHeadingProps>(
-  function CardHeading({ children, className, ...props }, ref) {
+  function CardHeading({ className, children, ...props }, ref) {
     return (
       <Base
-        aria-level={2}
         as="div"
+        ref={ref}
+        role="heading"
+        aria-level={2}
         className={clsx(className, {
           'govgr-card__heading': true,
         })}
-        ref={ref}
-        role="heading"
         {...props}
       >
         {children}

package/src/CardText/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 CardTextProps extends BaseProps<'div'> {}
 /**
@@ -8,14 +8,14 @@ export interface CardTextProps extends BaseProps<'div'> {}
  * Use CardText inside Card component as children
  */
 export const CardText = React.forwardRef<HTMLDivElement, CardTextProps>(
-  function CardText({ children, className, ...props }, ref) {
+  function CardText({ className, children, ...props }, ref) {
     return (
       <Base
         as="div"
+        ref={ref}
         className={clsx(className, {
           'govgr-card__text': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/CaretContainer/index.tsx

@@ -11,14 +11,14 @@ export interface CaretContainerProps extends BaseProps<'div'> {}
 export const CaretContainer = React.forwardRef<
   HTMLDivElement,
   CaretContainerProps
->(function CaretContainer({ children, className, ...props }, ref) {
+>(function CaretContainer({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-caret-container': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/CaretIcon/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 CaretIconProps extends SvgIconProps {
   /**
    * direction is optional.
@@ -16,11 +16,13 @@ export const CaretIcon: React.FC<CaretIconProps> = React.forwardRef<
   SVGSVGElement,
   CaretIconProps
 >(function CaretIcon(
-  { className, direction = 'left', size, variant, ...props },
+  { size, variant, direction = 'left', className, ...props },
   ref
 ) {
   return (
     <SvgIcon
+      size={size}
+      variant={variant}
       className={clsx(className, {
         'govgr-caret--right': direction === 'right',
         'govgr-caret--left': direction === 'left',
@@ -28,8 +30,6 @@ export const CaretIcon: React.FC<CaretIconProps> = React.forwardRef<
         'govgr-caret--down': direction === 'down',
       })}
       ref={ref}
-      size={size}
-      variant={variant}
       {...props}
     >
       {direction === 'left' && <path d="M18,22V2L6,12L18,22z" />}

package/src/CheckIcon/index.test.tsx

@@ -43,8 +43,8 @@ it('renders the CheckIcon with prop variant=focus', () => {
   expect(mount(<CheckIcon variant="focus" />)).toMatchSnapshot();
 });
 it('renders the CheckIcon with prop variant=warning and size=s', () => {
-  expect(mount(<CheckIcon size="s" variant="warning" />)).toMatchSnapshot();
+  expect(mount(<CheckIcon variant="warning" size="s" />)).toMatchSnapshot();
 });
 it('renders the CheckIcon with prop variant=error and size= xl', () => {
-  expect(mount(<CheckIcon size="xl" variant="warning" />)).toMatchSnapshot();
+  expect(mount(<CheckIcon variant="warning" size="xl" />)).toMatchSnapshot();
 });

package/src/CheckIcon/index.tsx

@@ -1,29 +1,23 @@
 import React from 'react';
-import clsx from 'clsx';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
-export interface CheckIconProps extends SvgIconProps {
-  /**
-   * ref is optional.
-   * ref prop declares the reference of the svg icon component.
-   * It can be used to to access the DOM element and the React element.
-   */
-  ref?: React.Ref<SVGSVGElement>;
-}
+import clsx from 'clsx';
+
+export interface CheckIconProps extends SvgIconProps {}
 /**
  * Use CheckIcon component when you need a check icon.
  */
 export const CheckIcon: React.FC<CheckIconProps> = React.forwardRef<
   SVGSVGElement,
   CheckIconProps
->(function CheckIcon({ className, size, variant, ...props }, ref) {
+>(function CheckIcon({ size, variant, className, ...props }, ref) {
   return (
     <SvgIcon
+      size={size}
+      variant={variant}
       className={clsx(className, {
         'govgr-svg-icon--check': true,
       })}
       ref={ref}
-      size={size}
-      variant={variant}
       {...props}
     >
       <polygon points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94" />

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

package/src/CheckboxConditional/index.tsx

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