@digigov/react-core 2.0.0-rc.24 → 2.0.0-rc.25

package/src/{AutoCompleteInput → AutoCompleteInputBase}/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-export interface AutoCompleteInputProps extends BaseProps<'input'> {
+export interface AutoCompleteInputBaseProps extends BaseProps<'input'> {
   /**
    * isFocused is optional. The default value is false.
    * isFocused prop is used to focus the list element.
@@ -9,16 +9,15 @@ export interface AutoCompleteInputProps extends BaseProps<'input'> {
    * @value false
    */
   isFocused?: boolean;
-
 }
 /**
- * AutoCompleteInput component is used to display the value that the user is typing.
+ * AutoCompleteInputBase component is used to display the value that the user is typing.
  *
  */
-export const AutoCompleteInput = React.forwardRef<
+export const AutoCompleteInputBase = React.forwardRef<
   HTMLInputElement,
-  AutoCompleteInputProps
->(function AutoCompleteInput(
+  AutoCompleteInputBaseProps
+>(function AutoCompleteInputBase(
   { name, isFocused, className, ...props },
   ref
 ) {
@@ -37,4 +36,4 @@ export const AutoCompleteInput = React.forwardRef<
   );
 });
 
-export default AutoCompleteInput;
+export default AutoCompleteInputBase;

package/src/AutoCompleteInputTypeahead/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AutoCompleteInputTypeaheadProps extends BaseProps<'input'> { }
+export interface AutoCompleteInputTypeaheadProps extends BaseProps<'input'> {}
 /**
  * AutoCompleteInputTypeahead component is used to display the hole search value
  * in the background.

package/src/AutoCompleteMultipleInputContainer/index.tsx

@@ -6,7 +6,7 @@ export interface AutoCompleteMultipleInputContainerProps
   extends BaseProps<'div'> {
   open?: boolean;
   isFocused?: boolean;
-  numberOfSelected?: 1 | 2 | 3 | 'all';  
+  numberOfSelected?: 1 | 2 | 3 | 'all';
 }
 /**
  * Use AutoCompleteMultipleInputContainer to accept multiple values input.
@@ -15,7 +15,7 @@ export const AutoCompleteMultipleInputContainer = React.forwardRef<
   HTMLDivElement,
   AutoCompleteMultipleInputContainerProps
 >(function AutoCompleteMultipleInputContainer(
-  { numberOfSelected = 'all', open, children, isFocused, className, ...props },
+  { numberOfSelected = 'all', children, isFocused, className, ...props },
   ref
 ) {
   return (
@@ -25,8 +25,8 @@ export const AutoCompleteMultipleInputContainer = React.forwardRef<
       className={clsx(className, {
         'ds-autocomplete__multi-input-container': true,
         'ds-autocomplete__multi-input-container--focused': isFocused,
-        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]: typeof(numberOfSelected) === 'number' 
-        
+        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]:
+          typeof numberOfSelected === 'number',
       })}
       {...props}
     >

package/src/AutoCompleteResultList/index.test.tsx

@@ -11,6 +11,7 @@ it('renders the AutoCompleteResultList with no props', () => {
 
 it('renders the AutoCompleteResultList with isVisible props', () => {
   expect(
-    render(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>).baseElement
+    render(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/AutoCompleteResultList/index.tsx

@@ -21,10 +21,7 @@ export interface AutoCompleteResultListProps extends BaseProps<'ul'> {
 export const AutoCompleteResultList = React.forwardRef<
   HTMLUListElement,
   AutoCompleteResultListProps
->(function List(
-  { isVisible = false, className, children, ...props },
-  ref
-) {
+>(function List({ isVisible = false, className, children, ...props }, ref) {
   return (
     <Base
       as="ul"

package/src/AutoCompleteResultListItem/index.test.tsx

@@ -5,7 +5,8 @@ import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultLi
 
 it('renders the AutoCompleteResultList with no props', () => {
   expect(
-    render(<AutoCompleteResultListItem>Hello</AutoCompleteResultListItem>).baseElement
+    render(<AutoCompleteResultListItem>Hello</AutoCompleteResultListItem>)
+      .baseElement
   ).toMatchSnapshot();
 });
 

package/src/AutoCompleteStatus/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AutoCompleteStatusProps extends BaseProps<'div'> { }
+export interface AutoCompleteStatusProps extends BaseProps<'div'> {}
 /**
  * AutoCompleteStatus is a div element for displaying the autocomplete status.
  * Use AutoCompleteStatus inside AutoCompleteStatusContainer wrapper.

package/src/AutoCompleteStatusContainer/index.test.tsx

@@ -5,6 +5,7 @@ import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusC
 
 it('renders the AdminContainer with no props', () => {
   expect(
-    render(<AutoCompleteStatusContainer>hello</AutoCompleteStatusContainer>).baseElement
+    render(<AutoCompleteStatusContainer>hello</AutoCompleteStatusContainer>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/BackLink/index.test.tsx

@@ -7,5 +7,7 @@ it('renders the BackLink with no props', () => {
   expect(render(<BackLink>hello</BackLink>).baseElement).toMatchSnapshot();
 });
 it('renders the BackLink with href="#"', () => {
-  expect(render(<BackLink href="#">hello</BackLink>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BackLink href="#">hello</BackLink>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BackLink/index.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import { CaretIcon } from '@digigov/react-icons';
 
-export interface BackLinkProps extends BaseProps<'a'> { }
+export interface BackLinkProps extends BaseProps<'a'> {}
 /**
  * Use BackLink component to help users go back to the previous page in a multi-page transaction.
  */
@@ -17,9 +17,7 @@ export const BackLink = React.forwardRef<HTMLAnchorElement, BackLinkProps>(
         as="a"
         printHidden={printHidden}
         href={href}
-        onClick={() => {
-          !href && window.history.back();
-        }}
+        onClick={() => !href && window.history.back()}
         ref={ref}
         className={clsx(className, {
           'ds-back-link': true,

package/src/BackToTopLink/index.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import { ArrowIcon } from '@digigov/react-icons';
 
-export interface BackToTopLinkProps extends BaseProps<'a'> { }
+export interface BackToTopLinkProps extends BaseProps<'a'> {}
 /**
  * Use BackToTopLink component to help users go to the top of the page.
  */

package/src/BannerContainer/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BannerContainer from '@digigov/react-core/BannerContainer';
 
 it('renders the BannerContainer with no props', () => {
-  expect(render(<BannerContainer>hello</BannerContainer>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BannerContainer>hello</BannerContainer>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BannerContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Base, BaseProps } from '@digigov/react-core/Base';
 
-export interface BannerContainerProps extends BaseProps<'div'> { }
+export interface BannerContainerProps extends BaseProps<'div'> {}
 
 export const BannerContainer = React.forwardRef<
   HTMLDivElement,

package/src/Base/compat/button.native.tsx

@@ -21,7 +21,7 @@ export const FormButton = React.forwardRef<unknown, ButtonProps>(
         ref={ref}
         {...props}
         onClick={() => {
-          onClick && onClick({} as React.MouseEvent<HTMLButtonElement>);
+          if (onClick) onClick({} as React.MouseEvent<HTMLButtonElement>);
           if (props.type) formContext?.[props.type]();
         }}
       />

package/src/Base/compat/li.native.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 // TODO: Fix `props` type
-interface LiProps {
-  [key: string]: any;
-}
+type LiProps = Record<string, any>;
 
 export const Li = (props: LiProps) => {
   return <View {...props} />;

package/src/Base/index.native.tsx

@@ -72,7 +72,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
   ref: React.ComponentPropsWithRef<C>['ref']
 ) {
   const classNames = className?.split(' ') || [];
-  let applyBasePropsToWrapper: boolean = true;
+  let applyBasePropsToWrapper = true;
 
   const basePropToClassName = basePropGenerator({
     display,

package/src/Base/index.web.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
 import { basePropGenerator } from '@digigov/react-core/Base/utils';
-type AsProp<C extends React.ElementType> = {
+interface AsProp<C extends React.ElementType> {
   as?: C;
-};
+}
 
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 
@@ -146,13 +146,13 @@ export type SpacingValues =
   | 80
   | 96;
 
-export type SpacingMediaValues = {
+export interface SpacingMediaValues {
   xs?: SpacingValues;
   sm?: SpacingValues;
   md?: SpacingValues;
   lg?: SpacingValues;
   xl?: SpacingValues;
-};
+}
 
 /**
  * This is the type used in the type annotation for the component

package/src/Base/mapping.native.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Link } from 'expo-router';
+import { cssInterop } from 'nativewind';
 import { Image, View } from 'react-native';
 import Svg, { Path, Circle, Rect, G, Polygon } from 'react-native-svg';
 import { Button } from '@digigov/react-core/Base/compat/button.native';
 import CompatDetails from '@digigov/react-core/Base/compat/details.native';
 import BaseInput from '@digigov/react-core/Base/compat/Input/index.native';
 import { Ol } from '@digigov/react-core/Base/compat/ol.native';
-import { cssInterop } from 'nativewind'
 export type MapProps<T extends keyof JSX.IntrinsicElements> =
   React.ComponentPropsWithoutRef<T>;
 
@@ -19,7 +19,11 @@ export type MappingType = {
 };
 
 export const mapping: MappingType = {
-  a: ({ children, ...props }) => <Link {...props} asChild ><View>{children}</View></Link>,
+  a: ({ children, ...props }) => (
+    <Link {...props} asChild>
+      <View>{children}</View>
+    </Link>
+  ),
   img: (props) => <Image {...props} />,
   button: Button,
   input: BaseInput,
@@ -30,8 +34,8 @@ export const mapping: MappingType = {
   // @ts-ignore
   svg: cssInterop(Svg, {
     className: {
-      target: "style",
-      nativeStyleToProp: { width: true, height: true }
+      target: 'style',
+      nativeStyleToProp: { width: true, height: true },
     },
   }),
   rect: (props) => <Rect {...props} />,

package/src/Base/wrap.native.tsx

@@ -1,9 +1,7 @@
 import React, { useContext, useMemo, useState } from 'react';
 import { View } from 'react-native';
 
-interface WrapperContextType {
-  (cls: string): void;
-}
+type WrapperContextType = (cls: string) => void;
 
 const WrapperContext = React.createContext<WrapperContextType>(
   (cls: string) => {
@@ -11,7 +9,11 @@ const WrapperContext = React.createContext<WrapperContextType>(
   }
 );
 
-const Wrapper = React.memo(({ children }: { children?: React.ReactNode }) => {
+const Wrapper = React.memo(function Wrapper({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
   const [className, setClassName] = useState('');
   return (
     <WrapperContext.Provider value={setClassName}>
@@ -21,6 +23,7 @@ const Wrapper = React.memo(({ children }: { children?: React.ReactNode }) => {
     </WrapperContext.Provider>
   );
 });
+Wrapper.displayName = 'Wrapper';
 
 interface WrappedComponentProps {
   className?: string;
@@ -67,11 +70,11 @@ export const wrap = (Component: React.ElementType) => {
           ref={ref}
           onFocus={(e: unknown) => {
             setClassName(focusedWrapperClassNames.join(' '));
-            onFocus && onFocus(e);
+            if (onFocus) onFocus(e);
           }}
           onBlur={(e: unknown) => {
             setClassName(wrapperClassNames.join(' '));
-            onBlur && onBlur(e);
+            if (onBlur) onBlur(e);
           }}
           className={classNames.join(' ')}
           {...props}

package/src/Blockquote/index.test.tsx

@@ -8,5 +8,7 @@ it('renders the Blockquote with no props', () => {
 });
 
 it('renders the Blockquote with dense props', () => {
-  expect(render(<Blockquote dense>hello</Blockquote>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Blockquote dense>hello</Blockquote>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Bottom/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BottomProps extends BaseProps<'div'> { }
+export interface BottomProps extends BaseProps<'div'> {}
 /**
  * Bottom is used inside the Layout component and it must be the last component in order.
  */

package/src/BottomInfo/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface BottomInfoProps extends ContainerProps { }
+export interface BottomInfoProps extends ContainerProps {}
 /**
  * Bottom BottomInfo is used inside the Bottom component and it must be the first component in order.
  */

package/src/BottomInfoContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface BottomInfoContainerProps extends ContainerProps { }
+export interface BottomInfoContainerProps extends ContainerProps {}
 /**
  * Bottom BottomInfoContainer is used inside the Bottom component and it must be the first component in order.
  */

package/src/BottomInfoContent/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BottomInfoContent from '@digigov/react-core/BottomInfoContent';
 
 it('renders the BottomInfoContent with no props', () => {
-  expect(render(<BottomInfoContent>hello</BottomInfoContent>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BottomInfoContent>hello</BottomInfoContent>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BottomInfoContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface BottomInfoContentProps extends GridProps { }
+export interface BottomInfoContentProps extends GridProps {}
 /**
  * BottomInfoContent is used inside the BottomInfoContainer component.
  */

package/src/Breadcrumbs/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
 
 it('renders the Breadcrumbs with no props', () => {
-  expect(render(<Breadcrumbs>hello</Breadcrumbs>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Breadcrumbs>hello</Breadcrumbs>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Breadcrumbs/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsProps extends BaseProps<'div'> { }
+export interface BreadcrumbsProps extends BaseProps<'div'> {}
 /**
  * Use Breadcrumbs component when you need to help users understand and move between the multiple levels of a website.
  * The breadcrumb should start with your ‘home’ page and end with the parent section of the current page.

package/src/BreadcrumbsList/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BreadcrumbsList from '@digigov/react-core/BreadcrumbsList';
 
 it('renders the BreadcrumbsList with no props', () => {
-  expect(render(<BreadcrumbsList>hello</BreadcrumbsList>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BreadcrumbsList>hello</BreadcrumbsList>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BreadcrumbsList/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsListProps extends BaseProps<'ol'> { }
+export interface BreadcrumbsListProps extends BaseProps<'ol'> {}
 /**
  * BreadcrumbsList is used for providing the items inside Breadcrumbs.
  */

package/src/BreadcrumbsListItemLink/index.test.tsx

@@ -10,6 +10,7 @@ it('renders the BreadcrumbsListItemLink with no props', () => {
 });
 it('renders the BreadcrumbsListItemLink with href', () => {
   expect(
-    render(<BreadcrumbsListItemLink href="#">hello</BreadcrumbsListItemLink>).baseElement
+    render(<BreadcrumbsListItemLink href="#">hello</BreadcrumbsListItemLink>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/BreadcrumbsListItemLink/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Link, { LinkBaseProps } from '@digigov/react-core/LinkBase';
 
-export interface BreadcrumbsListItemLinkProps extends LinkBaseProps { }
+export interface BreadcrumbsListItemLinkProps extends LinkBaseProps {}
 /**
  * BreadcrumbsListItemLink creates an anchor link to navigate in different
  * parts of the breadcrumbs.

package/src/Button/index.test.tsx

@@ -7,22 +7,34 @@ it('renders the Button with no props', () => {
   expect(render(<Button>hello</Button>).baseElement).toMatchSnapshot();
 });
 it('renders the Button with color=primary', () => {
-  expect(render(<Button color={'primary'}>hello</Button>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Button color={'primary'}>hello</Button>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Button with color=secondary', () => {
-  expect(render(<Button color={'secondary'}>hello</Button>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Button color={'secondary'}>hello</Button>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Button with color=warning', () => {
-  expect(render(<Button color={'warning'}>hello</Button>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Button color={'warning'}>hello</Button>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Button with disabled=true', () => {
-  expect(render(<Button disabled={true}>hello</Button>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Button disabled={true}>hello</Button>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Button with disabled=false', () => {
-  expect(render(<Button disabled={false}>hello</Button>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Button disabled={false}>hello</Button>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Button with dense=true', () => {
-  expect(render(<Button dense={true}>hello</Button>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Button dense={true}>hello</Button>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Button with color=primary with disabled=true', () => {
   expect(
@@ -53,9 +65,12 @@ it('renders the Button with color=warning with disabled=true', () => {
 });
 it('renders the Button with ariaLabel prop', () => {
   expect(
-    render(<Button aria-label="button for opening menu">Menu</Button>).baseElement
+    render(<Button aria-label="button for opening menu">Menu</Button>)
+      .baseElement
   ).toMatchSnapshot();
 });
 it('renders the Button with tabIndex prop', () => {
-  expect(render(<Button tabIndex={0}>Menu</Button>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Button tabIndex={0}>Menu</Button>).baseElement
+  ).toMatchSnapshot();
 });

package/src/ButtonGroup/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import ButtonGroup from '@digigov/react-core/ButtonGroup';
 
 it('renders the ButtonGroup with no props', () => {
-  expect(render(<ButtonGroup>hello</ButtonGroup>).baseElement).toMatchSnapshot();
+  expect(
+    render(<ButtonGroup>hello</ButtonGroup>).baseElement
+  ).toMatchSnapshot();
 });

package/src/ButtonGroup/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface ButtonGroupProps extends BaseProps<'div'> { }
+export interface ButtonGroupProps extends BaseProps<'div'> {}
 /**
  * Use a button group when two or more buttons are placed together.
  */

package/src/ButtonLink/index.test.tsx

@@ -22,7 +22,9 @@ it('renders the ButtonLink with color=warning', () => {
   ).toMatchSnapshot();
 });
 it('renders the ButtonLink with href=#', () => {
-  expect(render(<ButtonLink href={'#'}>hello</ButtonLink>).baseElement).toMatchSnapshot();
+  expect(
+    render(<ButtonLink href={'#'}>hello</ButtonLink>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the ButtonLink with disabled=false', () => {
   expect(render(<ButtonLink>hello</ButtonLink>).baseElement).toMatchSnapshot();
@@ -56,9 +58,12 @@ it('renders the ButtonLink with color=warning with href=#', () => {
 });
 it('renders the ButtonLink with ariaLabel prop', () => {
   expect(
-    render(<ButtonLink aria-label="button for opening menu">Menu</ButtonLink>).baseElement
+    render(<ButtonLink aria-label="button for opening menu">Menu</ButtonLink>)
+      .baseElement
   ).toMatchSnapshot();
 });
 it('renders the Button with tabIndex prop', () => {
-  expect(render(<ButtonLink tabIndex={0}>Menu</ButtonLink>).baseElement).toMatchSnapshot();
+  expect(
+    render(<ButtonLink tabIndex={0}>Menu</ButtonLink>).baseElement
+  ).toMatchSnapshot();
 });

package/src/ButtonLink/index.tsx

@@ -17,11 +17,11 @@ export interface ButtonLinkProps extends BaseProps<'a'> {
   color?: 'primary' | 'secondary' | 'warning';
 
   /**
- * dense is optional.
- * @value true Button will be dense.
- * @value false
- * @default false
- */
+   * dense is optional.
+   * @value true Button will be dense.
+   * @value false
+   * @default false
+   */
   dense?: boolean;
 }
 /**

package/src/CallToAction/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import CallToAction from '@digigov/react-core/CallToAction';
 
 it('renders the CallToAction with no props', () => {
-  expect(render(<CallToAction>hello</CallToAction>).baseElement).toMatchSnapshot();
+  expect(
+    render(<CallToAction>hello</CallToAction>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Card/index.test.tsx

@@ -14,13 +14,19 @@ it('renders the Card with dense props', () => {
   expect(render(<Card dense>hello</Card>).baseElement).toMatchSnapshot();
 });
 it('renders the Card with variant="border" props', () => {
-  expect(render(<Card variant="border">hello</Card>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Card variant="border">hello</Card>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Card with variant="divider" props', () => {
-  expect(render(<Card variant="divider">hello</Card>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Card variant="divider">hello</Card>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Card with variant="border-top" props', () => {
-  expect(render(<Card variant="border-top">hello</Card>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Card variant="border-top">hello</Card>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Card with dense" prop', () => {
   expect(render(<Card dense>hello</Card>).baseElement).toMatchSnapshot();

package/src/Card/index.tsx

@@ -51,7 +51,16 @@ export interface CardProps extends BaseProps<'div'> {
  * Use Card as parent component to wrap CardHeading, CardContent and CartAction components
  */
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
-  { variant, borderColor, callToAction, dense, fullHeight, className, children, ...props },
+  {
+    variant,
+    borderColor,
+    callToAction,
+    dense,
+    fullHeight,
+    className,
+    children,
+    ...props
+  },
   ref
 ) {
   return (

package/src/CardAction/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CardActionProps extends BaseProps<'div'> { }
+export interface CardActionProps extends BaseProps<'div'> {}
 /**
  * CardAction contains the action behavior for Card Component.
  * We can use links, Buttons or ButtonGroup with max of two buttons