@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-75e5086d

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

@@ -2,17 +2,26 @@
 
 exports[`renders the Main with no props 1`] = `
 <ForwardRef(Main)>
-  <ForwardRef(Base)
+  <ForwardRef(Grid)
     as="main"
-    className="govgr-grid-column-two-thirds"
+    className="govgr-main"
     id="main-content"
+    item={true}
+    md={8}
+    xs={12}
   >
-    <main
-      className="govgr-grid-column-two-thirds"
+    <ForwardRef(Base)
+      as="main"
+      className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
       id="main-content"
     >
-      hello
-    </main>
-  </ForwardRef(Base)>
+      <main
+        className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
+        id="main-content"
+      >
+        hello
+      </main>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Main)>
 `;

package/src/Main/index.tsx

@@ -1,27 +1,30 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface MainProps extends BaseProps<'main'> {}
+export interface MainProps extends GridProps {}
 /**
- * Use this inside Content component for placing the main content of the page
+ * Use this inside Container component for placing the main content of the page.
  */
 export const Main = React.forwardRef<HTMLElement, MainProps>(function Main(
   { className, children, id = 'main-content', ...props },
   ref
 ) {
   return (
-    <Base
+    <Grid
+      item
+      xs={12}
+      md={8}
       as="main"
       id={id}
       ref={ref}
       className={clsx(className, {
-        'govgr-grid-column-two-thirds': true,
+        'govgr-main': true,
       })}
       {...props}
     >
       {children}
-    </Base>
+    </Grid>
   );
 });
 

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,28 @@
 
 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(Typography)
+      as="h2"
+      className="govgr-heading-md"
+      marginBottom={0}
     >
-      hello
-    </div>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-heading-md"
+        marginBottom={0}
+      >
+        <h2
+          className="govgr-heading-md govgr-mb-0"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </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/Nav/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the Nav with no props 1`] = `
 <ForwardRef(Nav)>
   <ForwardRef(Base)
     as="nav"
-    className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav"
+    className="govgr-nav--border govgr-nav--fixed govgr-nav"
   >
     <nav
-      className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav"
+      className="govgr-nav--border govgr-nav--fixed govgr-nav"
     >
       hello
     </nav>
@@ -21,10 +21,10 @@ exports[`renders the Nav with open prop 1`] = `
 >
   <ForwardRef(Base)
     as="nav"
-    className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
+    className="govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
   >
     <nav
-      className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
+      className="govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
     >
       hello
     </nav>

package/src/Nav/index.tsx

@@ -4,31 +4,14 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface NavProps extends BaseProps<'nav'> {
   /**
-  * active is optional.
-  * active prop add background color to navigation link.
-  * use this prop only for header navigation;
+  * open is optional.
+  * use this prop to show the navigation at mobile view;
   * @value true
   * @value false
   * @default false
   */
   open?: boolean;
   /**
-  * layout prop sets the display layout for the nav list
-  * layout is horizontal by default.
-  * @value 'vertical'
-  * @value 'horizontal'
-  * @default 'horizontal'
-  */
-  layout?: 'vertical' | 'horizontal';
-  /**
-  * hidden is optional.
-  * hidden prop hides the nav element when it is called from a navItem.
-  * @value true
-  * @value false
-  * @default false
-  */
-  hidden?: boolean;
-  /**
   * fixed is optional.
   * fixed prop allows element to be positioned relative to the viewport
   * @value true
@@ -53,7 +36,6 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
   {
     className,
     open = false,
-    layout = 'horizontal',
     hidden = false,
     fixed = true,
     border = true,
@@ -68,8 +50,6 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
       ref={ref}
       className={clsx(className, {
         'govgr-nav': true,
-        'govgr-nav--horizontal': layout === 'horizontal',
-        'govgr-nav--vertical': layout === 'vertical',
         'govgr-nav--fixed': fixed,
         'govgr-nav--border': border,
         'govgr-nav--open': open,

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

@@ -6,10 +6,10 @@ exports[`renders the NavList with active prop 1`] = `
 >
   <ForwardRef(Base)
     as="ul"
-    className="govgr-nav__list--active govgr-nav__list"
+    className="govgr-nav__list--horizontal govgr-nav__list--active govgr-nav__list"
   >
     <ul
-      className="govgr-nav__list--active govgr-nav__list"
+      className="govgr-nav__list--horizontal govgr-nav__list--active govgr-nav__list"
     >
       hello
     </ul>
@@ -21,10 +21,10 @@ exports[`renders the NavList with no props 1`] = `
 <ForwardRef(NavList)>
   <ForwardRef(Base)
     as="ul"
-    className="govgr-nav__list"
+    className="govgr-nav__list--horizontal govgr-nav__list"
   >
     <ul
-      className="govgr-nav__list"
+      className="govgr-nav__list--horizontal govgr-nav__list"
     >
       hello
     </ul>

package/src/NavList/index.tsx

@@ -5,19 +5,34 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 export interface NavListProps extends BaseProps<'ul'> {
   /**
   * active prop sets active background color to the nav list.
-  * active is false by default.
   * @value true
   * @value false
   * @default false
   */
   active?: boolean;
+
+  /**
+  * layout prop sets the display layout for the nav list
+  * @value 'vertical'
+  * @value 'horizontal'
+  * @default 'horizontal'
+  */
+  layout?: 'vertical' | 'horizontal';
+
+  /**
+   * fullWidth gives to the nav list full width.
+   * @value true
+   * @value false
+   * @default true
+   */
+  fullWidth?: boolean;
 }
 /**
  * NavList must be inside the Nav.
  * This component has a list of NavListItem component inside.
  */
 export const NavList = React.forwardRef<HTMLUListElement, NavListProps>(
-  function NavList({ className, active = false, children, ...props }, ref) {
+  function NavList({ className, active = false, layout = 'horizontal', fullWidth, children, ...props }, ref) {
     return (
       <Base
         as="ul"
@@ -25,6 +40,9 @@ export const NavList = React.forwardRef<HTMLUListElement, NavListProps>(
         className={clsx(className, {
           'govgr-nav__list': true,
           'govgr-nav__list--active': active,
+          'govgr-nav__list--horizontal': layout === 'horizontal',
+          'govgr-nav__list--vertical': layout === 'vertical',
+          'govgr-nav__list--full-width': fullWidth,
         })}
         {...props}
       >

package/src/NavListItemAction/__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/NavListItemAction/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/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

@@ -2,28 +2,37 @@
 
 exports[`renders the NavMenuContainer with no props 1`] = `
 <ForwardRef(NavMenuContainer)>
-  <ForwardRef(Container)
-    cols={true}
+  <ForwardRef(Base)
+    aria-hidden={true}
+    as="div"
+    className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
   >
-    <ForwardRef(Base)
-      as="div"
-      className="govgr-container"
+    <div
+      aria-hidden={true}
+      className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
     >
-      <div
-        className="govgr-container"
+      <ForwardRef(Container)
+        grid={true}
+        spacing={4}
       >
-        <ForwardRef(Base)
-          as="div"
-          className="govgr-main-wrapper"
+        <ForwardRef(Grid)
+          className="govgr-container"
+          container={true}
+          spacing={4}
         >
-          <div
-            className="govgr-main-wrapper"
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-container govgr-gap-4 govgr-grid"
           >
-            hello
-          </div>
-        </ForwardRef(Base)>
-      </div>
-    </ForwardRef(Base)>
-  </ForwardRef(Container)>
+            <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.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;