@digigov/react-core 0.25.2 → 0.25.4

package/src/Card/index.tsx

@@ -1,15 +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 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.
    *
@@ -23,6 +16,13 @@ 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,13 +30,12 @@ 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(
-  { variant, borderColor, callToAction, className, children, ...props },
+  { borderColor, callToAction, children, className, variant, ...props },
   ref
 ) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-card': true,
         'govgr-card--border': variant === 'border',
@@ -46,6 +45,7 @@ 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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+  function CardText({ children, className, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+  function CardHeading({ children, className, ...props }, ref) {
     return (
       <Base
-        as="div"
-        ref={ref}
-        role="heading"
         aria-level={2}
+        as="div"
         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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+  function CardText({ children, className, ...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({ className, children, ...props }, ref) {
+>(function CaretContainer({ children, className, ...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 SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 export interface CaretIconProps extends SvgIconProps {
   /**
    * direction is optional.
@@ -16,13 +16,11 @@ export const CaretIcon: React.FC<CaretIconProps> = React.forwardRef<
   SVGSVGElement,
   CaretIconProps
 >(function CaretIcon(
-  { size, variant, direction = 'left', className, ...props },
+  { className, direction = 'left', size, variant, ...props },
   ref
 ) {
   return (
     <SvgIcon
-      size={size}
-      variant={variant}
       className={clsx(className, {
         'govgr-caret--right': direction === 'right',
         'govgr-caret--left': direction === 'left',
@@ -30,6 +28,8 @@ 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 variant="warning" size="s" />)).toMatchSnapshot();
+  expect(mount(<CheckIcon size="s" variant="warning" />)).toMatchSnapshot();
 });
 it('renders the CheckIcon with prop variant=error and size= xl', () => {
-  expect(mount(<CheckIcon variant="warning" size="xl" />)).toMatchSnapshot();
+  expect(mount(<CheckIcon size="xl" variant="warning" />)).toMatchSnapshot();
 });

package/src/CheckIcon/index.tsx

@@ -1,23 +1,29 @@
 import React from 'react';
-import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
-
-export interface CheckIconProps extends SvgIconProps {}
+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>;
+}
 /**
  * Use CheckIcon component when you need a check icon.
  */
 export const CheckIcon: React.FC<CheckIconProps> = React.forwardRef<
   SVGSVGElement,
   CheckIconProps
->(function CheckIcon({ size, variant, className, ...props }, ref) {
+>(function CheckIcon({ className, size, variant, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+  function Checkbox({ children, className, ...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 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 CheckboxConditionalProps extends BaseProps<'div'> {}
 /**
@@ -13,14 +13,14 @@ export interface CheckboxConditionalProps extends BaseProps<'div'> {}
 export const CheckboxConditional = React.forwardRef<
   HTMLDivElement,
   CheckboxConditionalProps
->(function CheckboxConditional({ className, children, ...props }, ref) {
+>(function CheckboxConditional({ children, className, ...props }, ref) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-checkboxes__conditional': true,
       })}
+      ref={ref}
       {...props}
     >
       <FieldContainer>

package/src/CheckboxItem/index.test.tsx

@@ -25,7 +25,7 @@ it('renders the CheckboxItem with `disabled` prop', () => {
 it('renders the CheckboxItem with `value` `name` and `disabled` props', () => {
   expect(
     mount(
-      <CheckboxItem value="example" name="example" disabled>
+      <CheckboxItem disabled name="example" value="example">
         hello
       </CheckboxItem>
     )

package/src/CheckboxItem/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 CheckboxItemProps extends BaseProps<'input'> {}
 /**
@@ -13,7 +13,7 @@ export const CheckboxItem = React.forwardRef<
   HTMLInputElement,
   CheckboxItemProps
 >(function CheckboxItem(
-  { name, value, className, disabled, children, ...props },
+  { children, className, disabled, name, value, ...props },
   ref
 ) {
   return (
@@ -31,14 +31,14 @@ export const CheckboxItem = React.forwardRef<
         {children}
         <Base
           as="input"
-          ref={ref}
-          type="checkbox"
-          name={name}
-          value={value}
           className={clsx({
             'govgr-checkboxes__input': true,
           })}
           disabled={disabled}
+          name={name}
+          ref={ref}
+          type="checkbox"
+          value={value}
           {...props}
         />
       </LabelContainer>

package/src/CloseIcon/index.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
-import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
-
-export interface CloseIconProps extends SvgIconProps {}
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+export interface CloseIconProps 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>;
+}
 /**
  * CloseIcon component is used to add close icon.
  * CloseIcon component can be used for dismissing contents
@@ -10,15 +16,15 @@ export interface CloseIconProps extends SvgIconProps {}
 export const CloseIcon: React.FC<CloseIconProps> = React.forwardRef<
   SVGSVGElement,
   CloseIconProps
->(function CloseIcon({ size, variant, className, ...props }, ref) {
+>(function CloseIcon({ className, size, variant, ...props }, ref) {
   return (
     <SvgIcon
-      size={size}
-      variant={variant}
       className={clsx(className, {
         'govgr-close-icon': true,
       })}
       ref={ref}
+      size={size}
+      variant={variant}
       {...props}
     >
       <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " />

package/src/Confirmation/index.tsx

@@ -1,21 +1,21 @@
 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 ConfirmationProps extends BaseProps<'div'> {}
 /**
  * You should use Conformation in a confirmation page at the end of a transaction.
  */
 export const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
-  function Confirmation({ className, children, ...props }, ref) {
+  function Confirmation({ children, className, ...props }, ref) {
     return (
       <Base
         as="div"
-        ref={ref}
         className={clsx(className, {
           'govgr-panel': true,
           'govgr-panel--confirmation': true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

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

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

package/src/Container/index.test.tsx

@@ -12,7 +12,7 @@ it('renders the Container with fullWidth prop', () => {
 it('renders the Container with cols={false} prop', () => {
   expect(
     mount(
-      <Container fullWidth cols={false}>
+      <Container cols={false} fullWidth>
         hello
       </Container>
     )

package/src/Container/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 ContainerProps extends BaseProps<'div'> {
   /**
@@ -17,17 +17,17 @@ export interface ContainerProps extends BaseProps<'div'> {
  */
 export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
   function Container(
-    { cols = true, fullWidth = false, className, children, ...props },
+    { children, className, cols = true, fullWidth = false, ...props },
     ref
   ) {
     return (
       <Base
         as="div"
-        ref={ref}
         className={clsx(className, {
           'govgr-width-container': !fullWidth,
           'govgr-full-width-container': fullWidth,
         })}
+        ref={ref}
         {...props}
       >
         <Base

package/src/CopyrightContainer/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 CopyrightContainerProps extends BaseProps<'p'> {}
 /**
@@ -10,14 +10,14 @@ export interface CopyrightContainerProps extends BaseProps<'p'> {}
 export const CopyrightContainer = React.forwardRef<
   HTMLParagraphElement,
   CopyrightContainerProps
->(function CopyrightContainer({ className, children, ...props }, ref) {
+>(function CopyrightContainer({ children, className, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+>(function DateInputContainer({ children, className, ...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 width={4} name={'date-input'}>
+      <DateInputItem name={'date-input'} width={4}>
         hello
       </DateInputItem>
     )

package/src/DateInputItem/index.tsx

@@ -1,18 +1,18 @@
 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 DateInputItemProps extends BaseProps<'input'> {
-  /**
-   * 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;
+  /**
+   * Width property is optional.
+   * Use this property for year field to grow width.
+   */
+  width?: 2 | 4;
 }
 /**
  * Details for the DateInputItem.
@@ -23,7 +23,7 @@ export const DateInputItem = React.forwardRef<
   HTMLInputElement,
   DateInputItemProps
 >(function DateInputItem(
-  { name, width = 2, error, className, children, ...props },
+  { children, className, error, name, width = 2, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+  function Details({ children, className, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+>(function DetailsContent({ children, className, ...props }, ref) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-details__summary-text': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}