@digigov/react-core 2.0.0-6452adf3 → 2.0.0-66d7c5e2

package/src/Checkbox/__snapshots__/index.test.tsx.snap

@@ -16,7 +16,6 @@ exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -30,7 +29,6 @@ exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -55,7 +53,6 @@ exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -69,7 +66,6 @@ exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -106,7 +102,6 @@ exports[`renders the Checkbox with no props and CheckboxItem 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>

package/src/CheckboxConditional/__snapshots__/index.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`renders the Blockquote with no props 1`] = `
       class="ds-checkboxes__conditional"
     >
       <div
-        class="ds-field xs:ds-grid__col-span-12"
+        class="ds-field ds-grid-item xs:ds-grid__col-span-12"
       >
         <label
           class="ds-label"

package/src/CheckboxConditional/index.tsx

@@ -4,7 +4,7 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 import FieldContainer from '@digigov/react-core/FieldContainer';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 
-export interface CheckboxConditionalProps extends BaseProps<'div'> { }
+export interface CheckboxConditionalProps extends BaseProps<'div'> {}
 /**
  * CheckboxConditional asks the user a related question when they select a particular checkbox,
  * so they only see the question when it’s relevant to them.

package/src/CheckboxItem/__snapshots__/index.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
           class="ds-checkboxes__input"
           disabled=""
           type="checkbox"
-          value=""
         />
       </label>
     </div>
@@ -40,7 +39,6 @@ exports[`renders the CheckboxItem with \`divider\` prop 1`] = `
         <input
           class="ds-checkboxes__input"
           type="checkbox"
-          value=""
         />
       </label>
     </div>
@@ -62,7 +60,6 @@ exports[`renders the CheckboxItem with \`name\` prop 1`] = `
           class="ds-checkboxes__input"
           name="example"
           type="checkbox"
-          value=""
         />
       </label>
     </div>
@@ -155,7 +152,6 @@ exports[`renders the CheckboxItem with no props 1`] = `
         <input
           class="ds-checkboxes__input"
           type="checkbox"
-          value=""
         />
       </label>
     </div>

package/src/CheckboxItem/index.test.tsx

@@ -4,7 +4,9 @@ import { render } from '@testing-library/react';
 import CheckboxItem from '@digigov/react-core/CheckboxItem';
 
 it('renders the CheckboxItem with no props', () => {
-  expect(render(<CheckboxItem>hello</CheckboxItem>).baseElement).toMatchSnapshot();
+  expect(
+    render(<CheckboxItem>hello</CheckboxItem>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the CheckboxItem with `name` prop', () => {
@@ -19,7 +21,9 @@ it('renders the CheckboxItem with `value` prop', () => {
 });
 
 it('renders the CheckboxItem with `disabled` prop', () => {
-  expect(render(<CheckboxItem disabled>hello</CheckboxItem>).baseElement).toMatchSnapshot();
+  expect(
+    render(<CheckboxItem disabled>hello</CheckboxItem>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the CheckboxItem with `divider` prop', () => {
   expect(

package/src/CheckboxItem/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-import ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
 import CheckboxItemInput from '@digigov/react-core/CheckboxItemInput';
+import ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 
 export interface CheckboxItemProps extends BaseProps<'input'> {
@@ -28,7 +28,8 @@ export const CheckboxItem = React.forwardRef<
   return (
     <>
       {dividerText && <ChoiceDividerText>{dividerText}</ChoiceDividerText>}
-      <Base as='div'
+      <Base
+        as="div"
         className={clsx(className, {
           'ds-checkboxes__item': true,
         })}
@@ -40,7 +41,13 @@ export const CheckboxItem = React.forwardRef<
           })}
         >
           {children}
-          <CheckboxItemInput ref={ref} name={name} value={value} disabled={disabled} {...props} />
+          <CheckboxItemInput
+            ref={ref}
+            name={name}
+            value={value}
+            disabled={disabled}
+            {...props}
+          />
         </LabelContainer>
       </Base>
     </>

package/src/CheckboxItemInput/index.tsx

@@ -1,2 +1,2 @@
 export * from '@digigov/react-core/CheckboxItemInput/index.web';
-export { default as default } from '@digigov/react-core/CheckboxItemInput/index.web';
+export { default as default } from '@digigov/react-core/CheckboxItemInput/index.web';

package/src/CheckboxItemInput/index.web.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CheckboxItemInputProps extends BaseProps<'input'> { }
+export interface CheckboxItemInputProps extends BaseProps<'input'> {}
 /**
  * Details for the CheckboxItem.
  * CheckboxItemInput component is the input component for CheckboxItem.
@@ -11,7 +11,7 @@ export const CheckboxItemInput = React.forwardRef<
   HTMLInputElement,
   CheckboxItemInputProps
 >(function CheckboxItemInput(
-  { name, value, className, disabled, children, ...props },
+  { name, value, className, disabled, ...props },
   ref
 ) {
   return (
@@ -21,13 +21,12 @@ export const CheckboxItemInput = React.forwardRef<
       type="checkbox"
       name={name}
       value={value}
-      className={clsx({
+      className={clsx(className, {
         'ds-checkboxes__input': true,
       })}
       disabled={disabled}
       {...props}
     />
-
   );
 });
 

package/src/ChipContainer/index.spec.tsx

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

package/src/ChipHeading/index.test.tsx

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

package/src/ChipKeyValue/index.test.tsx

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

package/src/ChipKeyValue/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface ChipKeyValueProps extends BaseProps<'span'> { }
+export interface ChipKeyValueProps extends BaseProps<'span'> {}
 /**
  * ChipKeyValue is used to provide key value inside chips.
  * ChipKeyValue component must be wrapped inside Chip component.

package/src/ChoiceDividerText/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
 
 it('renders the ChoiceDivider with text prop', () => {
-  expect(render(<ChoiceDividerText>ή</ChoiceDividerText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<ChoiceDividerText>ή</ChoiceDividerText>).baseElement
+  ).toMatchSnapshot();
 });

package/src/ChoiceDividerText/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface ChoiceDividerTextProps extends BaseProps<'div'> { }
+export interface ChoiceDividerTextProps extends BaseProps<'div'> {}
 /**
  * ChoiceDivider component adds a text divider on top of a Radio or Checkbox item.
  * It's been used as a prop ("divider") inside RadioItem and CheckboxItem.

package/src/{CircularProgress → CircularProgressBase}/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the CircularProgress 1`] = `
+exports[`renders the CircularProgressBase 1`] = `
 <body>
   <div>
     <svg
@@ -22,7 +22,7 @@ exports[`renders the CircularProgress 1`] = `
 </body>
 `;
 
-exports[`renders the CircularProgress with color=secondary and size lg props 1`] = `
+exports[`renders the CircularProgressBase with color=secondary and size lg props 1`] = `
 <body>
   <div>
     <svg
@@ -44,7 +44,7 @@ exports[`renders the CircularProgress with color=secondary and size lg props 1`]
 </body>
 `;
 
-exports[`renders the CircularProgress with color=secondary and size sm props 1`] = `
+exports[`renders the CircularProgressBase with color=secondary and size sm props 1`] = `
 <body>
   <div>
     <svg
@@ -66,7 +66,7 @@ exports[`renders the CircularProgress with color=secondary and size sm props 1`]
 </body>
 `;
 
-exports[`renders the CircularProgress with color=secondary prop 1`] = `
+exports[`renders the CircularProgressBase with color=secondary prop 1`] = `
 <body>
   <div>
     <svg
@@ -88,7 +88,7 @@ exports[`renders the CircularProgress with color=secondary prop 1`] = `
 </body>
 `;
 
-exports[`renders the CircularProgress with size lg 1`] = `
+exports[`renders the CircularProgressBase with size lg 1`] = `
 <body>
   <div>
     <svg
@@ -110,7 +110,7 @@ exports[`renders the CircularProgress with size lg 1`] = `
 </body>
 `;
 
-exports[`renders the CircularProgress with size sm 1`] = `
+exports[`renders the CircularProgressBase with size sm 1`] = `
 <body>
   <div>
     <svg

package/src/CircularProgressBase/index.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import CircularProgressBase from '@digigov/react-core/CircularProgressBase';
+
+it('renders the CircularProgressBase', () => {
+  expect(render(<CircularProgressBase />).baseElement).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with size sm', () => {
+  expect(
+    render(<CircularProgressBase size="sm" />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with size lg', () => {
+  expect(
+    render(<CircularProgressBase size="lg" />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with color=secondary prop', () => {
+  expect(
+    render(<CircularProgressBase color={'secondary'} />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with color=secondary and size sm props', () => {
+  expect(
+    render(<CircularProgressBase color={'secondary'} size="sm" />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgressBase with color=secondary and size lg props', () => {
+  expect(
+    render(<CircularProgressBase color={'secondary'} size="lg" />).baseElement
+  ).toMatchSnapshot();
+});

package/src/{CircularProgress → CircularProgressBase}/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CircularProgressProps extends BaseProps<'svg'> {
+export interface CircularProgressBaseProps extends BaseProps<'svg'> {
   /**
    * color prop is optional.
    * color prop is used to change the color of the loader.
@@ -22,12 +22,12 @@ export interface CircularProgressProps extends BaseProps<'svg'> {
   size?: 'sm' | 'md' | 'lg';
 }
 /**
- * Use CircularProgress component as an animated loader.
- *  CircularProgress can be used inside LoaderContainer component.
+ * Use CircularProgressBase component as an animated loader.
+ *  CircularProgressBase can be used inside LoaderContainer component.
  */
-export const CircularProgress = React.forwardRef<
-  SVGSVGElement,
-  CircularProgressProps
+export const CircularProgressBase = React.forwardRef<
+  SVGElement,
+  CircularProgressBaseProps
 >(function CircularProgress(
   { color = 'primary', size = 'md', className, ...props },
   ref
@@ -60,4 +60,4 @@ export const CircularProgress = React.forwardRef<
   );
 });
 
-export default CircularProgress;
+export default CircularProgressBase;

package/src/CloseButton/index.test.tsx

@@ -7,5 +7,7 @@ it('renders the CloseButton', () => {
   expect(render(<CloseButton />).baseElement).toMatchSnapshot();
 });
 it('renders the CloseButton with label prop', () => {
-  expect(render(<CloseButton label="Κλείσιμο" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<CloseButton label="Κλείσιμο" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/Code/index.test.tsx

@@ -12,7 +12,9 @@ it('renders the Code with color="info" prop', () => {
 });
 
 it('renders the Code with color="attribute" prop', () => {
-  expect(render(<Code color="attribute">hello</Code>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Code color="attribute">hello</Code>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Code with color="name" prop', () => {
@@ -20,5 +22,7 @@ it('renders the Code with color="name" prop', () => {
 });
 
 it('renders the Code with color="keyword" prop', () => {
-  expect(render(<Code color="keyword">hello</Code>).baseElement).toMatchSnapshot();
-});
+  expect(
+    render(<Code color="keyword">hello</Code>).baseElement
+  ).toMatchSnapshot();
+});

package/src/CodeBlockContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CodeBlockContainerProps extends BaseProps<'div'> { }
+export interface CodeBlockContainerProps extends BaseProps<'div'> {}
 /**
  * CodeBlockContainer is a component for displaying code.
  *

package/src/CodeBlockContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CodeBlockContentProps extends BaseProps<'pre'> { }
+export interface CodeBlockContentProps extends BaseProps<'pre'> {}
 /**
  * CodeBlockContent can be used as content inside the CodeBlockContainer.
  *

package/src/Container/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the Container with cols={false} prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-container ds-container--full-width"
+      class="ds-container ds-container--full-width ds-grid-item"
     >
       hello
     </div>
@@ -16,7 +16,7 @@ exports[`renders the Container with fullWidth prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-container ds-container--full-width ds-grid ds-gap-sm-12"
+      class="ds-container ds-container--full-width ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>
@@ -28,7 +28,7 @@ exports[`renders the Container with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-container ds-grid ds-gap-sm-12"
+      class="ds-container ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

package/src/Container/index.test.tsx

@@ -7,7 +7,9 @@ it('renders the Container with no props', () => {
   expect(render(<Container>hello</Container>).baseElement).toMatchSnapshot();
 });
 it('renders the Container with fullWidth prop', () => {
-  expect(render(<Container fullWidth>hello</Container>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Container fullWidth>hello</Container>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Container with cols={false} prop', () => {
   expect(

package/src/CopyToClipboardContainer/index.spec.tsx

@@ -5,7 +5,8 @@ import CopyToClipboardContainer from '@digigov/react-core/CopyToClipboardContain
 
 it('renders the CopyToClipboardContainer with no props', () => {
   expect(
-    render(<CopyToClipboardContainer>Text copied!</CopyToClipboardContainer>).baseElement
+    render(<CopyToClipboardContainer>Text copied!</CopyToClipboardContainer>)
+      .baseElement
   ).toMatchSnapshot();
 });
 it('renders the CopyToClipboardContainer with variant=tooltip', () => {

package/src/CopyToClipboardContainer/index.tsx

@@ -1,2 +1,2 @@
 export * from '@digigov/react-core/CopyToClipboardContainer/index.web';
-export { default as default } from '@digigov/react-core/CopyToClipboardContainer/index.web';
+export { default as default } from '@digigov/react-core/CopyToClipboardContainer/index.web';

package/src/CopyToClipboardMessage/index.native.tsx

@@ -1,9 +1,9 @@
+import clsx from 'clsx';
+import { CopyToClipboardContainerProps } from '@digigov/react-core/CopyToClipboardContainer';
 import CoreCopyToClipboardMessage, {
   CopyToClipboardMessageProps,
 } from '@digigov/react-core/CopyToClipboardMessage/index.web';
-import { CopyToClipboardContainerProps } from '@digigov/react-core/CopyToClipboardContainer';
-import { extend } from '@digigov/react-core/utils/extend.native';
-import clsx from 'clsx';
+import { extend } from '@digigov/react-core/utils/index.native';
 
 export const CopyToClipboardMessage = extend<
   CopyToClipboardMessageProps,

package/src/CopyToClipboardMessage/index.test.tsx

@@ -5,19 +5,22 @@ import CopyToClipboardMessage from '@digigov/react-core/CopyToClipboardMessage';
 
 it('renders the CopyToClipboardMessage with no props', () => {
   expect(
-    render(<CopyToClipboardMessage>Text copied!</CopyToClipboardMessage>).baseElement
+    render(<CopyToClipboardMessage>Text copied!</CopyToClipboardMessage>)
+      .baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the CopyToClipboardMessage with banner prop', () => {
   expect(
-    render(<CopyToClipboardMessage>Text copied!</CopyToClipboardMessage>).baseElement
+    render(<CopyToClipboardMessage>Text copied!</CopyToClipboardMessage>)
+      .baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the CopyToClipboardMessage with tooltip prop', () => {
   expect(
-    render(<CopyToClipboardMessage>Text copied!</CopyToClipboardMessage>).baseElement
+    render(<CopyToClipboardMessage>Text copied!</CopyToClipboardMessage>)
+      .baseElement
   ).toMatchSnapshot();
 });
 

package/src/CopyToClipboardMessage/index.tsx

@@ -1,2 +1,2 @@
 export * from '@digigov/react-core/CopyToClipboardMessage/index.web';
-export { default as default } from '@digigov/react-core/CopyToClipboardMessage/index.web';
+export { default as default } from '@digigov/react-core/CopyToClipboardMessage/index.web';

package/src/CopyrightContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CopyrightContainerProps extends BaseProps<'p'> { }
+export interface CopyrightContainerProps extends BaseProps<'p'> {}
 /**
  * CopyrightContainer is used inside the Footer component.
  * CopyrightContainer has no props.

package/src/DateInputItem/index.native.tsx

@@ -1,12 +1,9 @@
-import extend from '@digigov/react-core/utils/extend.native';
 import CoreDateInputItem from '@digigov/react-core/DateInputItem/index.web';
-export const DateInputItem = extend(
-  CoreDateInputItem,
-  ({ className, ...props }) => {
-    return {
-      ...props,
-      onChange: undefined,
-    };
-  }
-);
+import extend from '@digigov/react-core/utils/index.native';
+export const DateInputItem = extend(CoreDateInputItem, (props) => {
+  return {
+    ...props,
+    onChange: undefined,
+  };
+});
 export default DateInputItem;

package/src/DateInputItem/index.test.tsx

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

package/src/DateInputItem/index.tsx

@@ -1,2 +1,2 @@
 export * from '@digigov/react-core/DateInputItem/index.web';
-export { default as default } from '@digigov/react-core/DateInputItem/index.web';
+export { default as default } from '@digigov/react-core/DateInputItem/index.web';

package/src/DateInputItem/index.web.tsx

@@ -33,18 +33,27 @@ export const DateInputItem = React.forwardRef<
   ref
 ) {
   return (
-    <Base as='div'
+    <Base
+      as="div"
       className={clsx(className, {
         'ds-date-input__item': true,
       })}
     >
-      <Base as='label'
+      <Base
+        as="label"
         className={clsx({
           'ds-label': true,
         })}
       >
         {children}
-        <TextInput ref={ref} type="text" name={name} maxWidth={`${width}-char`} error={error} {...props} />
+        <TextInput
+          ref={ref}
+          type="text"
+          name={name}
+          maxWidth={`${width}-char`}
+          error={error}
+          {...props}
+        />
       </Base>
     </Base>
   );

package/src/Details/index.native.tsx

@@ -1,5 +1,5 @@
 import CoreDetails from '@digigov/react-core/Details/index.web';
-import { extend } from '@digigov/react-core/utils/extend.native';
+import { extend } from '@digigov/react-core/utils/index.native';
 
 export const Details = extend(CoreDetails, ({ className, ...props }) => {
   return {

package/src/Details/index.tsx

@@ -1,2 +1,2 @@
-export * from "@digigov/react-core/Details/index.web";
-export {default as default} from "@digigov/react-core/Details/index.web";
+export * from '@digigov/react-core/Details/index.web';
+export { default as default } from '@digigov/react-core/Details/index.web';

package/src/Details/index.web.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface DetailsProps extends BaseProps<'details'> { }
+export interface DetailsProps extends BaseProps<'details'> {}
 /**
  * Details is used to make a page easier to scan when it contains information that only some users will need.
  * Details component wraps DetailsSummary and DetailsContent as children components

package/src/DetailsContent/index.test.tsx

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