@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

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

@@ -57,17 +57,17 @@ exports[`renders the List with listStyle=bullet 2`] = `
 </ForwardRef(List)>
 `;
 
-exports[`renders the List with listStyle=bullet and spaced 1`] = `
+exports[`renders the List with listStyle=bullet and dense 1`] = `
 <ForwardRef(List)
+  dense={true}
   listStyle="bullet"
-  spaced={true}
 >
   <ForwardRef(Base)
     as="ol"
-    className="govgr-list--bullet govgr-list--spaced govgr-list"
+    className="govgr-list--bullet govgr-list"
   >
     <ol
-      className="govgr-list--bullet govgr-list--spaced govgr-list"
+      className="govgr-list--bullet govgr-list"
     >
       <ForwardRef(ListItem)>
         <ForwardRef(Base)
@@ -155,17 +155,17 @@ exports[`renders the List with listStyle=number 2`] = `
 </ForwardRef(List)>
 `;
 
-exports[`renders the List with listStyle=number and spaced 1`] = `
+exports[`renders the List with listStyle=number and dense 1`] = `
 <ForwardRef(List)
+  dense={true}
   listStyle="number"
-  spaced={true}
 >
   <ForwardRef(Base)
     as="ol"
-    className="govgr-list--number govgr-list--spaced govgr-list"
+    className="govgr-list--number govgr-list"
   >
     <ol
-      className="govgr-list--number govgr-list--spaced govgr-list"
+      className="govgr-list--number govgr-list"
     >
       <ForwardRef(ListItem)>
         <ForwardRef(Base)

package/src/List/index.test.tsx

@@ -38,10 +38,10 @@ it('renders the List with listStyle=bullet', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the List with listStyle=number and spaced', () => {
+it('renders the List with listStyle=number and dense', () => {
   expect(
     mount(
-      <List listStyle={'number'} spaced={true}>
+      <List listStyle={'number'} dense={true}>
         <ListItem>hello Giorgos</ListItem>
         <ListItem>hello Katerina</ListItem>
       </List>
@@ -49,10 +49,10 @@ it('renders the List with listStyle=number and spaced', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the List with listStyle=bullet and spaced', () => {
+it('renders the List with listStyle=bullet and dense', () => {
   expect(
     mount(
-      <List listStyle={'bullet'} spaced={true}>
+      <List listStyle={'bullet'} dense={true}>
         <ListItem>hello Giorgos</ListItem>
         <ListItem>hello Katerina</ListItem>
       </List>

package/src/List/index.tsx

@@ -12,18 +12,20 @@ export interface ListProps extends BaseProps<'ol'> {
   */
   listStyle?: 'bullet' | 'number' | 'none';
   /**
-  * spaced is optional. Use it to add space between the list items.
+  * dense is optional. Use it to add less space between the list items.
   * @value true
   * @value false
-  * @default false
+  * @default true
   */
-  spaced?: boolean;
+  dense?: boolean;
   /**
-  * horizontal is optional. Use it to display the list items horizontally.
-  * @value true
-  * @value false
-  */
-  horizontal?: boolean;
+   * layout is optional.
+   * Use it to display the list items horizontally or vertically.
+   * @value 'horizontal'
+   * @value 'vertical'
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
 }
 /**
  * List component is used for listing items.
@@ -32,8 +34,8 @@ export interface ListProps extends BaseProps<'ol'> {
 export const List = React.forwardRef<HTMLOListElement, ListProps>(function List(
   {
     listStyle = 'none',
-    spaced = false,
-    horizontal,
+    dense = true,
+    layout,
     className,
     children,
     ...props
@@ -48,8 +50,8 @@ export const List = React.forwardRef<HTMLOListElement, ListProps>(function List(
         'govgr-list': true,
         'govgr-list--bullet': listStyle === 'bullet',
         'govgr-list--number': listStyle === 'number',
-        'govgr-list--spaced': spaced,
-        'govgr-list--horizontal': horizontal,
+        'govgr-list--spaced': !dense,
+        'govgr-list--horizontal': layout === 'horizontal',
       })}
       {...props}
     >

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

@@ -13,7 +13,7 @@ exports[`renders the Modal with no props 1`] = `
         className="govgr-modal__body"
       >
         <div
-          className="govgr-modal__content"
+          className="govgr-modal__container"
         >
           hello
         </div>

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

@@ -4,10 +4,10 @@ exports[`renders the ModalContent with no props 1`] = `
 <ForwardRef(ModalContent)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-modal__text"
+    className="govgr-modal__content"
   >
     <div
-      className="govgr-modal__text"
+      className="govgr-modal__content"
     >
       hello
     </div>

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

@@ -2,19 +2,22 @@
 
 exports[`renders the ModalHeading with no props 1`] = `
 <ForwardRef(ModalHeading)>
-  <ForwardRef(Base)
-    aria-level={2}
-    as="div"
-    className="govgr-modal__heading"
-    role="heading"
+  <ForwardRef(Heading)
+    element="h2"
+    marginBottom={0}
+    size="md"
   >
-    <div
-      aria-level={2}
-      className="govgr-modal__heading"
-      role="heading"
+    <ForwardRef(Base)
+      as="h2"
+      className="govgr-heading-md"
+      marginBottom={0}
     >
-      hello
-    </div>
-  </ForwardRef(Base)>
+      <h2
+        className="govgr-heading-md govgr-mb-0"
+      >
+        hello
+      </h2>
+    </ForwardRef(Base)>
+  </ForwardRef(Heading)>
 </ForwardRef(ModalHeading)>
 `;

package/src/ModalHeading/index.tsx

@@ -1,28 +1,24 @@
 import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Heading, { HeadingProps } from '@digigov/react-core/Heading';
 
-export interface ModalHeadingProps extends BaseProps<'div'> {}
+export interface ModalHeadingProps extends HeadingProps {}
 /**
  * ModalHeading gives header title to Modal Component
  * Use ModalHeading inside Modal component as children
  */
 
 export const ModalHeading = React.forwardRef<HTMLDivElement, ModalHeadingProps>(
-  function ModalHeading({ className, children, ...props }, ref) {
+  function ModalHeading({ children, ...props }, ref) {
     return (
-      <Base
-        as="div"
+      <Heading
         ref={ref}
-        role="heading"
-        aria-level={2}
-        className={clsx(className, {
-          'govgr-modal__heading': true,
-        })}
+        size='md'
+        element='h2'
+        marginBottom={0}
         {...props}
       >
         {children}
-      </Base>
+      </Heading>
     );
   }
 );

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

@@ -3,7 +3,7 @@
 exports[`renders the NavMenuContainer with no props 1`] = `
 <ForwardRef(NavMenuContainer)>
   <ForwardRef(Container)
-    cols={true}
+    grid={true}
   >
     <ForwardRef(Base)
       as="div"

package/src/NavVertical/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface NavVerticalProps extends BaseProps<'nav'> {}
+export interface NavVerticalProps extends BaseProps<'nav'> { }
 /**
  * NavVertical is the Nav that it is vertical. It is mainly used at the Side component.
  * This component is a wrapper for a list of NavVerticalItem components.