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

package/src/NavListItemAction/index.tsx

@@ -0,0 +1,27 @@
+import React, { ForwardedRef } from 'react';
+import NavListItemLink, { NavListItemLinkProps } from '@digigov/react-core/NavListItemLink';
+import NavListItemButton, { NavListItemButtonProps } from '@digigov/react-core/NavListItemButton';
+import NavListItemActionContainer from '@digigov/react-core/NavListItemActionContainer';
+
+export type LinkButtonJoinProps = NavListItemLinkProps & NavListItemButtonProps;
+export interface NavListItemActionProps extends LinkButtonJoinProps {
+  label?: string;
+  arrow?: boolean;
+};
+/**
+ * NavListItemAction must be inside the NavList.
+ * This component has a items of NavListItemLink component inside.
+ */
+export const NavListItemAction = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, NavListItemActionProps>(
+  function NavListItemAction({ className, children, ...props }, ref) {
+    return (<NavListItemActionContainer>
+      {props.href ?
+        <NavListItemLink {...props} className={className} ref={ref as ForwardedRef<HTMLAnchorElement>}>{children || props.label}</NavListItemLink>
+        :
+        <NavListItemButton {...props} className={className} ref={ref as ForwardedRef<HTMLButtonElement>}>{children || props.label}</NavListItemButton>}
+    </NavListItemActionContainer>
+    );
+  }
+);
+
+export default NavListItemAction;

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NavListItemActionContainer with no props 1`] = `
+<ForwardRef(NavListItemActionContainer)>
+  <ForwardRef(Base)
+    as="li"
+    className="govgr-nav__list-item"
+  >
+    <li
+      className="govgr-nav__list-item"
+    >
+      hello
+    </li>
+  </ForwardRef(Base)>
+</ForwardRef(NavListItemActionContainer)>
+`;

package/src/NavListItemActionContainer/index.test.tsx

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

package/src/{NavListItem → NavListItemActionContainer}/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface NavListItemProps extends BaseProps<'li'> {}
+export interface NavListItemActionContainerProps extends BaseProps<'li'> {}
 /**
- * NavListItem must be inside the NavList.
+ * NavListItemActionContainer must be inside the NavList.
  * This component has a items of NavListItemLink component inside.
  */
-export const NavListItem = React.forwardRef<HTMLLIElement, NavListItemProps>(
-  function NavHeaderListItem({ className, children, ...props }, ref) {
+export const NavListItemActionContainer = React.forwardRef<HTMLLIElement, NavListItemActionContainerProps>(
+  function NavListItemActionContainer({ className, children, ...props }, ref) {
     return (
       <Base
         as="li"
@@ -24,4 +24,4 @@ export const NavListItem = React.forwardRef<HTMLLIElement, NavListItemProps>(
   }
 );
 
-export default NavListItem;
+export default NavListItemActionContainer;

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

@@ -1,29 +1,142 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the NavMenuContainer with no props 1`] = `
-<ForwardRef(NavMenuContainer)>
-  <ForwardRef(Container)
-    grid={true}
+exports[`renders the NavMenuContainer with active prop 1`] = `
+<ForwardRef(NavMenuContainer)
+  active={true}
+>
+  <ForwardRef(Base)
+    aria-hidden={false}
+    as="div"
+    className="govgr-nav-menu--horizontal govgr-nav-menu"
+  >
+    <div
+      aria-hidden={false}
+      className="govgr-nav-menu--horizontal govgr-nav-menu"
+    >
+      <ForwardRef(Container)
+        grid={true}
+      >
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-container"
+        >
+          <div
+            className="govgr-container"
+          >
+            <div
+              className="govgr-main-wrapper"
+            >
+              hello
+            </div>
+          </div>
+        </ForwardRef(Base)>
+      </ForwardRef(Container)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(NavMenuContainer)>
+`;
+
+exports[`renders the NavMenuContainer with layout="horizontal" prop 1`] = `
+<ForwardRef(NavMenuContainer)
+  layout="horizontal"
+>
+  <ForwardRef(Base)
+    aria-hidden={true}
+    as="div"
+    className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
+  >
+    <div
+      aria-hidden={true}
+      className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
+    >
+      <ForwardRef(Container)
+        grid={true}
+      >
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-container"
+        >
+          <div
+            className="govgr-container"
+          >
+            <div
+              className="govgr-main-wrapper"
+            >
+              hello
+            </div>
+          </div>
+        </ForwardRef(Base)>
+      </ForwardRef(Container)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(NavMenuContainer)>
+`;
+
+exports[`renders the NavMenuContainer with layout="vertical" prop 1`] = `
+<ForwardRef(NavMenuContainer)
+  layout="vertical"
+>
+  <ForwardRef(Base)
+    aria-hidden={true}
+    as="div"
+    className="govgr-nav-menu--vertical govgr-nav-menu--hidden govgr-nav-menu"
   >
-    <ForwardRef(Base)
-      as="div"
-      className="govgr-container"
+    <div
+      aria-hidden={true}
+      className="govgr-nav-menu--vertical govgr-nav-menu--hidden govgr-nav-menu"
     >
-      <div
-        className="govgr-container"
+      <ForwardRef(Container)
+        grid={false}
       >
         <ForwardRef(Base)
           as="div"
-          className="govgr-main-wrapper"
+          className="govgr-container"
         >
           <div
-            className="govgr-main-wrapper"
+            className="govgr-container"
           >
             hello
           </div>
         </ForwardRef(Base)>
-      </div>
-    </ForwardRef(Base)>
-  </ForwardRef(Container)>
+      </ForwardRef(Container)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(NavMenuContainer)>
+`;
+
+exports[`renders the NavMenuContainer with no props 1`] = `
+<ForwardRef(NavMenuContainer)>
+  <ForwardRef(Base)
+    aria-hidden={true}
+    as="div"
+    className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
+  >
+    <div
+      aria-hidden={true}
+      className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
+    >
+      <ForwardRef(Container)
+        grid={true}
+        spacing={4}
+      >
+        <ForwardRef(Grid)
+          className="govgr-container"
+          container={true}
+          spacing={4}
+        >
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-container govgr-gap-4 govgr-grid"
+          >
+            <div
+              className="govgr-container govgr-gap-4 govgr-grid"
+            >
+              hello
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(Grid)>
+      </ForwardRef(Container)>
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(NavMenuContainer)>
 `;

package/src/NavMenuContainer/index.test.tsx

@@ -5,3 +5,12 @@ import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
 it('renders the NavMenuContainer with no props', () => {
   expect(mount(<NavMenuContainer>hello</NavMenuContainer>)).toMatchSnapshot();
 });
+it('renders the NavMenuContainer with active prop', () => {
+  expect(mount(<NavMenuContainer active>hello</NavMenuContainer>)).toMatchSnapshot();
+});
+it('renders the NavMenuContainer with layout="vertical" prop', () => {
+  expect(mount(<NavMenuContainer layout="vertical">hello</NavMenuContainer>)).toMatchSnapshot();
+});
+it('renders the NavMenuContainer with layout="horizontal" prop', () => {
+  expect(mount(<NavMenuContainer layout="horizontal">hello</NavMenuContainer>)).toMatchSnapshot();
+});

package/src/NavMenuContainer/index.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
-import { BaseProps } from '@digigov/react-core/Base';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 import Container from '@digigov/react-core/Container';
+import clsx from 'clsx';
 
 export interface NavMenuContainerProps extends BaseProps<'div'> {
   /**
-  * layout prop sets the display layout for the nav list
-  * layout is horizontal by default.
+ * active is optional.
+ * Exactly one NavMenu should be active every time.
+ * This declares that this content is active and should depend of the 'selected' NavItem.
+ * @value true
+ * @value false
+ */
+  active?: boolean;
+  /**
+  * layout prop sets the display layout for the nav list.
   * @value 'vertical'
   * @value 'horizontal'
   * @default 'horizontal'
@@ -20,18 +28,31 @@ export const NavMenuContainer = React.forwardRef<
   HTMLDivElement,
   NavMenuContainerProps
 >(function NavMenuContainer(
-  { className, layout = 'horizontal', children, ...props },
+  { className, active, layout = 'horizontal', children, ...props },
   ref
 ) {
   return (
-    <Container
-      grid={layout === 'horizontal'}
+    <Base
+      as="div"
       ref={ref}
-      className={className}
-      {...props}
+      aria-hidden={!active}
+      className={clsx(className, {
+        'govgr-nav-menu': true,
+        'govgr-nav-menu--horizontal': layout === 'horizontal',
+        'govgr-nav-menu--vertical': layout === 'vertical',
+        'govgr-nav-menu--hidden': !active,
+      })}
     >
-      {children}
-    </Container>
+      <Container
+        grid={layout === 'horizontal'}
+        spacing={4}
+        ref={ref}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Container>
+    </Base>
   );
 });
 

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

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NavMenuContainerContent with no props 1`] = `
+<ForwardRef(NavMenuContent)>
+  <ForwardRef(Grid)
+    className="govgr-nav-menu__content"
+    item={true}
+    sm={8}
+    spacing={2}
+    xs={12}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-nav-menu__content xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-8"
+    >
+      <div
+        className="govgr-nav-menu__content xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-8"
+      >
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(NavMenuContent)>
+`;

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/NotificationBannerContainer/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the NotificationBannerContainer with dense=true 1`] = `
+<ForwardRef(NotificationBannerContainer)
+  dense={true}
+>
+  <ForwardRef(Base)
+    aria-labelledby="govgr-notification-banner-title"
+    as="div"
+    className="govgr-notification-banner--info govgr-notification-banner--dense govgr-notification-banner"
+    data-module="govgr-notification-banner"
+    role="region"
+  >
+    <div
+      aria-labelledby="govgr-notification-banner-title"
+      className="govgr-notification-banner--info govgr-notification-banner--dense govgr-notification-banner"
+      data-module="govgr-notification-banner"
+      role="region"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(NotificationBannerContainer)>
+`;
+
 exports[`renders the NotificationBannerContainer with no props 1`] = `
 <ForwardRef(NotificationBannerContainer)>
   <ForwardRef(Base)

package/src/NotificationBannerContainer/index.test.tsx

@@ -19,3 +19,10 @@ it('renders the NotificationBannerContainer with variant=success', () => {
   ).toMatchSnapshot();
 });
 
+it('renders the NotificationBannerContainer with dense=true', () => {
+  expect(
+    mount(
+      <NotificationBannerContainer dense>hello</NotificationBannerContainer>
+    )
+  ).toMatchSnapshot();
+});

package/src/NotificationBannerContainer/index.tsx

@@ -12,6 +12,13 @@ export interface NotificationBannerContainerProps extends BaseProps<'div'> {
    * @default 'info'.
    */
   variant?: 'info' | 'success' | 'error';
+  /**
+   * dense is optional.
+   * @value true NotificationBannerContainer will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
 }
 /**
  * Details for the NotificationBannerContainer.
@@ -24,7 +31,7 @@ export const NotificationBannerContainer = React.forwardRef<
   HTMLDivElement,
   NotificationBannerContainerProps
 >(function NotificationBannerContainer(
-  { variant = 'info', className, children, ...props },
+  { variant = 'info', className, dense, children, ...props },
   ref
 ) {
   return (
@@ -37,6 +44,7 @@ export const NotificationBannerContainer = React.forwardRef<
       className={clsx(className, {
         'govgr-notification-banner': true,
         [`govgr-notification-banner--${variant}`]: variant !== undefined,
+        'govgr-notification-banner--dense': dense,
       })}
       {...props}
     >