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

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

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Hint with  variants=[light, dark] and src props 1`] = `
+<ForwardRef(ImageLogoSet)
+  src="logo.png"
+  variants={
+    Array [
+      "light",
+      "dark",
+    ]
+  }
+>
+  <ForwardRef(ImageLogo)
+    key="light"
+    src="logo--light.png"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--light"
+      printHidden={true}
+      src="logo--light.png"
+    >
+      <img
+        className="govgr-image-logo--light govgr-print-hidden"
+        src="logo--light.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+  <ForwardRef(ImageLogo)
+    key="dark"
+    src="logo--dark.png"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--dark"
+      printHidden={true}
+      src="logo--dark.png"
+    >
+      <img
+        className="govgr-image-logo--dark govgr-print-hidden"
+        src="logo--dark.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+</ForwardRef(ImageLogoSet)>
+`;
+
+exports[`renders the Hint with  variants=[light] and src props 1`] = `
+<ForwardRef(ImageLogoSet)
+  src="logo.png"
+  variants={
+    Array [
+      "light",
+    ]
+  }
+>
+  <ForwardRef(ImageLogo)
+    key="light"
+    src="logo--light.png"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--light"
+      printHidden={true}
+      src="logo--light.png"
+    >
+      <img
+        className="govgr-image-logo--light govgr-print-hidden"
+        src="logo--light.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+</ForwardRef(ImageLogoSet)>
+`;
+
+exports[`renders the Hint with src prop 1`] = `
+<ForwardRef(ImageLogoSet)
+  src="logo.png"
+>
+  <ForwardRef(ImageLogo)
+    key="dark"
+    src="logo--dark.png"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--dark"
+      printHidden={true}
+      src="logo--dark.png"
+    >
+      <img
+        className="govgr-image-logo--dark govgr-print-hidden"
+        src="logo--dark.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+  <ForwardRef(ImageLogo)
+    key="light"
+    src="logo--light.png"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--light"
+      printHidden={true}
+      src="logo--light.png"
+    >
+      <img
+        className="govgr-image-logo--light govgr-print-hidden"
+        src="logo--light.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+</ForwardRef(ImageLogoSet)>
+`;

package/src/ImageLogoSet/index.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ImageLogoSet from '@digigov/react-core/ImageLogoSet';
+
+it('renders the Hint with src prop', () => {
+  expect(mount(<ImageLogoSet src='logo.png' />)).toMatchSnapshot();
+});
+
+
+it('renders the Hint with  variants=[light] and src props', () => {
+  expect(mount(<ImageLogoSet variants={['light']} src='logo.png' />)).toMatchSnapshot();
+});
+
+it('renders the Hint with  variants=[light, dark] and src props', () => {
+  expect(mount(<ImageLogoSet variants={['light', 'dark']} src='logo.png' />)).toMatchSnapshot();
+});

package/src/ImageLogoSet/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+import ImageLogo from '@digigov/react-core/ImageLogo';
+
+export interface ImageLogoSet extends BaseProps<'img'> {
+  /**
+   * src is optional.
+   * src is used to display images.
+   */
+  src?: string;
+  /**
+   * variant is optional.
+   * variant is used to display images depending the theme (dark, light).
+   */
+  variants?: Array<"dark" | "light">;
+}
+/**
+ * ImageLogoSet is used as image inverter depending the theme (dark, light).
+ * This component can't have children.
+ */
+export const ImageLogoSet = React.forwardRef<
+  HTMLImageElement,
+  ImageLogoSet
+>(function ImageLogoSet({ lang, src, variants = ['dark', 'light'], className, children, ...props }, ref) {
+  return (
+    <>
+      {variants.map((variant) => {
+        const imageSrc = src?.replace(/(\.[^\.]+)$/, `--${variant}$1`);
+        return <ImageLogo key={variant} ref={ref} variant={variant} src={imageSrc} {...props} />
+      })}
+    </>
+  )
+    ;
+});
+
+export default ImageLogoSet;

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/index.tsx

@@ -8,6 +8,13 @@ export interface ModalContainerProps extends BaseProps<'div'> {
   * @value false
   */
   open?: boolean
+  /**
+   * dense is optional.
+   * @value true ModalContainer and its children will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * Modals can be used to open a pop-up dialog box and provide critical information
@@ -18,7 +25,7 @@ export interface ModalContainerProps extends BaseProps<'div'> {
 export const ModalContainer = React.forwardRef<
   HTMLDivElement,
   ModalContainerProps
->(function ModalContainer({ className, children, open, ...props }, ref) {
+>(function ModalContainer({ className, children, open, dense, ...props }, ref) {
   return (
     <Base
       as="div"
@@ -26,6 +33,7 @@ export const ModalContainer = React.forwardRef<
       className={clsx(className, {
         'govgr-modal': true,
         'govgr-modal--open': open,
+        'govgr-modal--dense': dense,
       })}
       {...props}
     >

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

@@ -7,17 +7,23 @@ exports[`renders the ModalHeading with no props 1`] = `
     marginBottom={0}
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-heading-md"
       marginBottom={0}
     >
-      <h2
-        className="govgr-heading-md govgr-mb-0"
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-heading-md"
+        marginBottom={0}
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-heading-md govgr-mb-0"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(ModalHeading)>
 `;

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

@@ -1,13 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Nav with border prop 1`] = `
+<ForwardRef(Nav)
+  border={true}
+>
+  <ForwardRef(Base)
+    as="nav"
+    className="govgr-nav--border govgr-nav"
+  >
+    <nav
+      className="govgr-nav--border govgr-nav"
+    >
+      hello
+    </nav>
+  </ForwardRef(Base)>
+</ForwardRef(Nav)>
+`;
+
+exports[`renders the Nav with drawer="always" prop 1`] = `
+<ForwardRef(Nav)
+  drawer="always"
+>
+  <ForwardRef(Base)
+    as="nav"
+    className="govgr-nav--drawer govgr-nav--hidden govgr-nav--border govgr-nav"
+  >
+    <nav
+      className="govgr-nav--drawer govgr-nav--hidden govgr-nav--border govgr-nav"
+    >
+      hello
+    </nav>
+  </ForwardRef(Base)>
+</ForwardRef(Nav)>
+`;
+
+exports[`renders the Nav with drawer="always", border and open props 1`] = `
+<ForwardRef(Nav)
+  border={true}
+  drawer="always"
+  open={true}
+>
+  <ForwardRef(Base)
+    as="nav"
+    className="govgr-nav--drawer govgr-nav--border govgr-nav"
+  >
+    <nav
+      className="govgr-nav--drawer govgr-nav--border govgr-nav"
+    >
+      hello
+    </nav>
+  </ForwardRef(Base)>
+</ForwardRef(Nav)>
+`;
+
+exports[`renders the Nav with drawer="mdDown" prop 1`] = `
+<ForwardRef(Nav)
+  drawer="mdDown"
+>
+  <ForwardRef(Base)
+    as="nav"
+    className="govgr-nav--drawer-mdDown govgr-nav--hidden govgr-nav--border govgr-nav"
+  >
+    <nav
+      className="govgr-nav--drawer-mdDown govgr-nav--hidden govgr-nav--border govgr-nav"
+    >
+      hello
+    </nav>
+  </ForwardRef(Base)>
+</ForwardRef(Nav)>
+`;
+
+exports[`renders the Nav with drawer="never" prop 1`] = `
+<ForwardRef(Nav)
+  drawer="never"
+>
+  <ForwardRef(Base)
+    as="nav"
+    className="govgr-nav--border govgr-nav"
+  >
+    <nav
+      className="govgr-nav--border govgr-nav"
+    >
+      hello
+    </nav>
+  </ForwardRef(Base)>
+</ForwardRef(Nav)>
+`;
+
 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"
   >
     <nav
-      className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav"
+      className="govgr-nav--border govgr-nav"
     >
       hello
     </nav>
@@ -21,10 +108,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"
   >
     <nav
-      className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
+      className="govgr-nav--border govgr-nav"
     >
       hello
     </nav>

package/src/Nav/index.test.tsx

@@ -10,3 +10,18 @@ it('renders the Nav with no props', () => {
 it('renders the Nav with open prop', () => {
   expect(mount(<Nav open>hello</Nav>)).toMatchSnapshot();
 });
+it('renders the Nav with border prop', () => {
+  expect(mount(<Nav border>hello</Nav>)).toMatchSnapshot();
+});
+it('renders the Nav with drawer="never" prop', () => {
+  expect(mount(<Nav drawer="never">hello</Nav>)).toMatchSnapshot();
+});
+it('renders the Nav with drawer="mdDown" prop', () => {
+  expect(mount(<Nav drawer="mdDown">hello</Nav>)).toMatchSnapshot();
+});
+it('renders the Nav with drawer="always" prop', () => {
+  expect(mount(<Nav drawer="always">hello</Nav>)).toMatchSnapshot();
+});
+it('renders the Nav with drawer="always", border and open props', () => {
+  expect(mount(<Nav open border drawer="always">hello</Nav>)).toMatchSnapshot();
+});

package/src/Nav/index.tsx

@@ -1,49 +1,53 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import CloseButton from '@digigov/react-core/CloseButton';
 
 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 control the navigation's visibility when it's a drawer.
   * @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';
+   * border is optional.
+   * border prop contains border-bottom styling.
+   * @value true
+   * @value false
+   * @default true
+   */
+  border?: boolean;
+
   /**
-  * hidden is optional.
-  * hidden prop hides the nav element when it is called from a navItem.
-  * @value true
-  * @value false
-  * @default false
-  */
-  hidden?: boolean;
+   * drawer is optional.
+   * drawer prop allows element to be positioned relative to the viewport.
+   * Use this prop only if you want to implement responsive drawer navigation and you have a button to toggle the drawer open and closed.
+   * @value 'never' the navigation will never be drawer
+   * @value 'smDown' the navigation will be drawer on small screens only
+   * @value 'mdDown' the navigation will be drawer on medium screens and below
+   * @value 'lgDown' the navigation will be drawer on large screens and below
+   * @value 'always' the navigation will be drawer on all screen sizes
+   * @default 'never'
+   */
+  drawer?: 'never' | 'smDown' | 'mdDown' | 'lgDown' | 'always';
+
   /**
-  * fixed is optional.
-  * fixed prop allows element to be positioned relative to the viewport
-  * @value true
-  * @value false
-  * @default true
+   * onClose makes a CloseButton component visible when the Nav is drawer.
+   * Use this prop to close the drawer when close button is clicked, passing a callback function.
+   * Make sure that the drawer prop is not 'never'.
   */
-  fixed?: boolean;
+ onClose?: (
+   e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+   ) => void;
+
   /**
-  * border is optional.
-  * border prop contains border-bottom styling.
-  * @value true
-  * @value false
-  * @default true
-  */
-  border?: boolean;
+   * closeButtonLabel is optional.
+   * Use this prop to add text beside the close icon. For example: 'Κλείσιμο'.
+   */
+  closeButtonLabel?: string;
 }
 /**
  * Nav is mainly used under the Header.
@@ -52,10 +56,10 @@ export interface NavProps extends BaseProps<'nav'> {
 export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
   {
     className,
-    open = false,
-    layout = 'horizontal',
-    hidden = false,
-    fixed = true,
+    open,
+    drawer = 'never',
+    onClose,
+    closeButtonLabel,
     border = true,
     children,
     ...props
@@ -68,15 +72,24 @@ 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,
-        'govgr-nav--hidden': hidden,
+        'govgr-nav--hidden': drawer != 'never' && !open,
+        'govgr-nav--drawer-smDown': drawer === 'smDown',
+        'govgr-nav--drawer-mdDown': drawer === 'mdDown',
+        'govgr-nav--drawer-lgDown': drawer === 'lgDown',
+        'govgr-nav--drawer': drawer === 'always',
       })}
       {...props}
     >
+      {(onClose && drawer !== 'never') && (
+        <CloseButton
+          smUpHidden={drawer === 'smDown'}
+          mdUpHidden={drawer === 'mdDown'}
+          lgUpHidden={drawer === 'lgDown'}
+          onClick={(e) => onClose(e)}
+          label={closeButtonLabel}
+        />
+        )}
       {children}
     </Base>
   );

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();
+});