@digigov/react-core 1.0.0-88820b1e → 1.0.0-8ae63a77

package/src/{NavMenuContainerContent → NavMenuContent}/index.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import NavMenuContainerContent from '@digigov/react-core/NavMenuContainerContent';
+import NavMenuContainerContent from '@digigov/react-core/NavMenuContent';
 it('renders the NavMenuContainerContent with no props', () => {
   expect(
     mount(<NavMenuContainerContent>hello</NavMenuContainerContent>)

package/src/NavMenuContent/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { GridProps } from '@digigov/react-core/Grid';
+import Grid from '@digigov/react-core/Grid';
+import clsx from 'clsx';
+
+export interface NavMenuContentProps extends GridProps {}
+/**
+ *
+ * NavMenuContent is the content menu component.
+ * Inside this component must be NavMenuContentList and NavMenuContentListLink components.
+ */
+export const NavMenuContent = React.forwardRef<
+  HTMLDivElement,
+  NavMenuContentProps
+>(function NavMenuContent({ className, children, ...props }, ref) {
+  return (
+    <Grid item xs={12} sm={8} spacing={2} ref={ref} className={clsx(className, {
+      'govgr-nav-menu__content': true
+    })} {...props}>
+      {children}
+    </Grid>
+  );
+});
+
+export default NavMenuContent;

package/src/{NavMenuContainerContentList → NavMenuContentListBase}/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the NavMenuContainerContentList with no props 1`] = `
-<ForwardRef(NavMenuContainerContentList)>
+exports[`renders the NavMenuContentListBase with no props 1`] = `
+<ForwardRef(NavMenuContentListBase)>
   <ForwardRef(Base)
     as="ul"
     className="govgr-nav-menu__content-list"
@@ -12,5 +12,5 @@ exports[`renders the NavMenuContainerContentList with no props 1`] = `
       hello
     </ul>
   </ForwardRef(Base)>
-</ForwardRef(NavMenuContainerContentList)>
+</ForwardRef(NavMenuContentListBase)>
 `;

package/src/NavMenuContentListBase/index.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import NavMenuContentListBase from '@digigov/react-core/NavMenuContentListBase';
+it('renders the NavMenuContentListBase with no props', () => {
+  expect(
+    mount(<NavMenuContentListBase>hello</NavMenuContentListBase>)
+  ).toMatchSnapshot();
+});

package/src/NavMenuContentListBase/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface NavMenuContentListProps extends BaseProps<'ul'> {}
+/**
+ * NavMenuContentListBase contains the ul list nav menu.
+ * Inside this component must be NavMenuContentListItem component.
+ */
+export const NavMenuContentListBase = React.forwardRef<
+  HTMLUListElement,
+  NavMenuContentListProps
+>(function NavMenuContentListBase({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="ul"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-nav-menu__content-list': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default NavMenuContentListBase;

package/{es/NavMenuContainerContentListItem → src/NavMenuContentListItem}/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the NavMenuContainerContentListItem with no props 1`] = `
-<ForwardRef(NavMenuContainerContentListItem)>
+exports[`renders the NavMenuContentListItem with no props 1`] = `
+<ForwardRef(NavMenuContentListItem)>
   <ForwardRef(Base)
     as="li"
     className="govgr-nav-menu__content-list-item"
@@ -12,5 +12,5 @@ exports[`renders the NavMenuContainerContentListItem with no props 1`] = `
       hello
     </li>
   </ForwardRef(Base)>
-</ForwardRef(NavMenuContainerContentListItem)>
+</ForwardRef(NavMenuContentListItem)>
 `;

package/src/NavMenuContentListItem/index.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import NavMenuContentListItem from '@digigov/react-core/NavMenuContentListItem';
+it('renders the NavMenuContentListItem with no props', () => {
+  expect(
+    mount(
+      <NavMenuContentListItem>hello</NavMenuContentListItem>
+    )
+  ).toMatchSnapshot();
+});

package/src/{NavMenuContainerContentListItem → NavMenuContentListItem}/index.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface NavMenuContainerContentListItemProps extends BaseProps<'li'> {}
+export interface NavMenuContentListItemProps extends BaseProps<'li'> {}
 /**
- * NavMenuContainerContentListItem contains all li items nav menu.
+ * NavMenuContentListItem contains all li items nav menu.
  *
  */
-export const NavMenuContainerContentListItem = React.forwardRef<
+export const NavMenuContentListItem = React.forwardRef<
   HTMLLIElement,
-  NavMenuContainerContentListItemProps
->(function NavMenuContainerContentListItem(
+  NavMenuContentListItemProps
+>(function NavMenuContentListItem(
   { className, children, ...props },
   ref
 ) {
@@ -28,4 +28,4 @@ export const NavMenuContainerContentListItem = React.forwardRef<
   );
 });
 
-export default NavMenuContainerContentListItem;
+export default NavMenuContentListItem;

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NavMenuTitle with no props 1`] = `
+<ForwardRef(NavMenuTitle)>
+  <ForwardRef(Grid)
+    className="govgr-nav-menu__title"
+    item={true}
+    sm={4}
+    xs={12}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-nav-menu__title xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-4"
+    >
+      <div
+        className="govgr-nav-menu__title xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-4"
+      >
+        <ForwardRef(Heading)
+          className="govgr-nav-menu__title-heading"
+          element="h3"
+          size="md"
+        >
+          <ForwardRef(Typography)
+            as="h3"
+            className="govgr-nav-menu__title-heading govgr-heading-md"
+          >
+            <ForwardRef(Base)
+              as="h3"
+              className="govgr-nav-menu__title-heading govgr-heading-md"
+            >
+              <h3
+                className="govgr-nav-menu__title-heading govgr-heading-md"
+              >
+                hello
+              </h3>
+            </ForwardRef(Base)>
+          </ForwardRef(Typography)>
+        </ForwardRef(Heading)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(NavMenuTitle)>
+`;

package/src/NavMenuTitle/index.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
+it('renders the NavMenuTitle with no props', () => {
+  expect(
+    mount(<NavMenuTitle>hello</NavMenuTitle>)
+  ).toMatchSnapshot();
+});

package/src/NavMenuTitle/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import { BaseProps } from '@digigov/react-core/Base';
+import Grid from '@digigov/react-core/Grid';
+import Heading from '@digigov/react-core/Heading';
+
+export interface NavMenuTitleProps extends BaseProps<'div'> {}
+/**
+ *
+ * NavMenuTitle is the main Title for the nav list items.
+ * NavMenuTitle  must be inside NavMenuContainer component.
+ */
+export const NavMenuTitle = React.forwardRef<
+  HTMLDivElement,
+  NavMenuTitleProps
+>(function NavMenuTitle({ className, children, ...props }, ref) {
+  return (
+    <Grid
+      item
+      xs={12}
+      sm={4}
+      ref={ref}
+      className={clsx(className, {
+        'govgr-nav-menu__title': true,
+      })}
+      {...props}
+    >
+      <Heading
+        element="h3"
+        size="md"
+        className={clsx({
+          'govgr-nav-menu__title-heading': true,
+        })}
+      >
+        {children}
+      </Heading>
+    </Grid>
+  );
+});
+
+export default NavMenuTitle;

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

@@ -15,17 +15,23 @@ exports[`renders the NotificationBannerHeader with no props 1`] = `
         marginBottom={0}
         size="sm"
       >
-        <ForwardRef(Base)
+        <ForwardRef(Typography)
           as="h2"
           className="govgr-notification-banner__title govgr-heading-sm"
           marginBottom={0}
         >
-          <h2
-            className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+          <ForwardRef(Base)
+            as="h2"
+            className="govgr-notification-banner__title govgr-heading-sm"
+            marginBottom={0}
           >
-            hello
-          </h2>
-        </ForwardRef(Base)>
+            <h2
+              className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+            >
+              hello
+            </h2>
+          </ForwardRef(Base)>
+        </ForwardRef(Typography)>
       </ForwardRef(Heading)>
     </div>
   </ForwardRef(Base)>

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

@@ -7,16 +7,21 @@ exports[`renders the NotificationBannerHeading with no props 1`] = `
     element="h3"
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h3"
       className="govgr-notification-banner__heading govgr-heading-md"
     >
-      <h3
+      <ForwardRef(Base)
+        as="h3"
         className="govgr-notification-banner__heading govgr-heading-md"
       >
-        hello
-      </h3>
-    </ForwardRef(Base)>
+        <h3
+          className="govgr-notification-banner__heading govgr-heading-md"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(NotificationBannerHeading)>
 `;

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

@@ -3,16 +3,21 @@
 exports[`renders the PageTitleHeading with no props 1`] = `
 <ForwardRef(PageTitleHeading)>
   <ForwardRef(Heading)>
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h1"
       className="govgr-heading-xl"
     >
-      <h1
+      <ForwardRef(Base)
+        as="h1"
         className="govgr-heading-xl"
       >
-        hello
-      </h1>
-    </ForwardRef(Base)>
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -24,16 +29,21 @@ exports[`renders the PageTitleHeading with size=l 1`] = `
   <ForwardRef(Heading)
     size="lg"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-heading-lg"
     >
-      <h2
+      <ForwardRef(Base)
+        as="h2"
         className="govgr-heading-lg"
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-heading-lg"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -45,16 +55,21 @@ exports[`renders the PageTitleHeading with size=m 1`] = `
   <ForwardRef(Heading)
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h3"
       className="govgr-heading-md"
     >
-      <h3
+      <ForwardRef(Base)
+        as="h3"
         className="govgr-heading-md"
       >
-        hello
-      </h3>
-    </ForwardRef(Base)>
+        <h3
+          className="govgr-heading-md"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -66,16 +81,21 @@ exports[`renders the PageTitleHeading with size=s 1`] = `
   <ForwardRef(Heading)
     size="sm"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h4"
       className="govgr-heading-sm"
     >
-      <h4
+      <ForwardRef(Base)
+        as="h4"
         className="govgr-heading-sm"
       >
-        hello
-      </h4>
-    </ForwardRef(Base)>
+        <h4
+          className="govgr-heading-sm"
+        >
+          hello
+        </h4>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -87,16 +107,21 @@ exports[`renders the PageTitleHeading with size=xl 1`] = `
   <ForwardRef(Heading)
     size="xl"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h1"
       className="govgr-heading-xl"
     >
-      <h1
+      <ForwardRef(Base)
+        as="h1"
         className="govgr-heading-xl"
       >
-        hello
-      </h1>
-    </ForwardRef(Base)>
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;

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

@@ -3,16 +3,21 @@
 exports[`renders the PageTitleHeading with no props 1`] = `
 <ForwardRef(PageTitleHeading)>
   <ForwardRef(Heading)>
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h1"
       className="govgr-heading-xl"
     >
-      <h1
+      <ForwardRef(Base)
+        as="h1"
         className="govgr-heading-xl"
       >
-        hello
-      </h1>
-    </ForwardRef(Base)>
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -24,16 +29,21 @@ exports[`renders the PageTitleHeading with size=l 1`] = `
   <ForwardRef(Heading)
     size="lg"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-heading-lg"
     >
-      <h2
+      <ForwardRef(Base)
+        as="h2"
         className="govgr-heading-lg"
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-heading-lg"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -45,16 +55,21 @@ exports[`renders the PageTitleHeading with size=m 1`] = `
   <ForwardRef(Heading)
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h3"
       className="govgr-heading-md"
     >
-      <h3
+      <ForwardRef(Base)
+        as="h3"
         className="govgr-heading-md"
       >
-        hello
-      </h3>
-    </ForwardRef(Base)>
+        <h3
+          className="govgr-heading-md"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -66,16 +81,21 @@ exports[`renders the PageTitleHeading with size=s 1`] = `
   <ForwardRef(Heading)
     size="sm"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h4"
       className="govgr-heading-sm"
     >
-      <h4
+      <ForwardRef(Base)
+        as="h4"
         className="govgr-heading-sm"
       >
-        hello
-      </h4>
-    </ForwardRef(Base)>
+        <h4
+          className="govgr-heading-sm"
+        >
+          hello
+        </h4>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -87,16 +107,21 @@ exports[`renders the PageTitleHeading with size=xl 1`] = `
   <ForwardRef(Heading)
     size="xl"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h1"
       className="govgr-heading-xl"
     >
-      <h1
+      <ForwardRef(Base)
+        as="h1"
         className="govgr-heading-xl"
       >
-        hello
-      </h1>
-    </ForwardRef(Base)>
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;

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

@@ -2,7 +2,7 @@
 
 exports[`renders the RadioItem  \`divider\` props 1`] = `
 <ForwardRef(RadioItem)
-  divider="ή"
+  dividerText="ή"
 >
   <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
@@ -91,7 +91,7 @@ exports[`renders the RadioItem  value props 1`] = `
 exports[`renders the RadioItem with \`name\`, \`disabled\`, \`divider\` and \`value\` props 1`] = `
 <ForwardRef(RadioItem)
   disabled={true}
-  divider="ή"
+  dividerText="ή"
   name="name"
   value="someValue"
 >

package/src/RadioItem/index.test.tsx

@@ -17,8 +17,8 @@ it('renders the RadioItem  value props', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the RadioItem  `divider` props', () => {
-  expect(mount(<RadioItem divider={'ή'}>hello</RadioItem>)).toMatchSnapshot();
+it('renders the RadioItem  `dividerText` props', () => {
+  expect(mount(<RadioItem dividerText={'ή'}>hello</RadioItem>)).toMatchSnapshot();
 });
 
 it('renders the RadioItem with name and value props', () => {
@@ -45,10 +45,10 @@ it('renders the RadioItem with name disabled and value props', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the RadioItem with `name`, `disabled`, `divider` and `value` props', () => {
+it('renders the RadioItem with `name`, `disabled`, `dividerText` and `value` props', () => {
   expect(
     mount(
-      <RadioItem name={'name'} value={'someValue'} divider={'ή'} disabled>
+      <RadioItem name={'name'} value={'someValue'} dividerText={'ή'} disabled>
         hello
       </RadioItem>
     )

package/src/RadioItem/index.tsx

@@ -6,11 +6,11 @@ import LabelContainer from '@digigov/react-core/LabelContainer';
 
 export interface RadioItemProps extends BaseProps<'input'> {
   /**
-  * divider is optional.
-  * Add this prop to add a choice divider ontop of a radio item.
+  * dividerText is optional.
+  * Add this prop to add a choice dividerText on top of a radio item.
   * The string is the text that it will appear above this radio item.
   */
-  divider?: string;
+  dividerText?: string;
 }
 /**
  * RadioItem component is used for display radio buttons.
@@ -18,11 +18,11 @@ export interface RadioItemProps extends BaseProps<'input'> {
  */
 export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
   function RadioItem(
-    { divider, name, value, className, disabled = false, children, ...props },
+    { dividerText, name, value, className, disabled = false, children, ...props },
     ref
   ) {
     return <>
-      {divider && <ChoiceDividerText>{divider}</ChoiceDividerText>}
+      {dividerText && <ChoiceDividerText>{dividerText}</ChoiceDividerText>}
       <div
         className={clsx(className, {
           'govgr-radios__item': true,

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the StepNav with dense props 1`] = `
+<ForwardRef(StepNav)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-step--dense govgr-step-nav"
+  >
+    <div
+      className="govgr-step--dense govgr-step-nav"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(StepNav)>
+`;
+
 exports[`renders the StepNav with no props 1`] = `
 <ForwardRef(StepNav)>
   <ForwardRef(Base)