@digigov/react-core 1.0.0-8ae63a77 → 1.0.0-e322b0cc

package/src/Hint/index.tsx

@@ -2,12 +2,18 @@ import React from 'react';
 import clsx from 'clsx';
 import Typography, { TypographyProps } from '@digigov/react-core/Typography';
 
-export interface HintProps extends TypographyProps { }
+export interface HintProps extends TypographyProps {
+  /**
+   * breakWords is optional. false is the default value.
+   * Use true when you want to break words.
+   */
+  breakWords?: boolean;
+}
 /**
  * Hint component can be used in form pages and it gives an extra hint description to the form.
  */
 export const Hint = React.forwardRef<HTMLParagraphElement, HintProps>(
-  function Hint({ fontSize, className, children, ...props }, ref) {
+  function Hint({ fontSize, className, children, breakWords, ...props }, ref) {
     return (
       <Typography
         as="p"
@@ -15,7 +21,7 @@ export const Hint = React.forwardRef<HTMLParagraphElement, HintProps>(
         ref={ref}
         className={clsx(className, {
           'govgr-hint': true,
-
+          'govgr-hint--break-words': breakWords,
         })}
         {...props}
       >

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

@@ -8,10 +8,11 @@ exports[`renders the Hint with  variant and src props 1`] = `
   <ForwardRef(Base)
     as="img"
     className="govgr-image-logo--dark"
+    printHidden={true}
     src="logo.png"
   >
     <img
-      className="govgr-image-logo--dark"
+      className="govgr-image-logo--dark govgr-print-hidden"
       src="logo.png"
     />
   </ForwardRef(Base)>
@@ -24,11 +25,12 @@ exports[`renders the Hint with src prop 1`] = `
 >
   <ForwardRef(Base)
     as="img"
-    className="govgr-image-logo--light"
+    className="govgr-image-logo"
+    printHidden={true}
     src="logo.png"
   >
     <img
-      className="govgr-image-logo--light"
+      className="govgr-image-logo govgr-print-hidden"
       src="logo.png"
     />
   </ForwardRef(Base)>

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,14 +25,15 @@ 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"
-      ref={ref}
+
       className={clsx(className, {
         'govgr-modal': true,
         'govgr-modal--open': open,
+        'govgr-modal--dense': dense,
       })}
       {...props}
     >
@@ -35,6 +43,7 @@ export const ModalContainer = React.forwardRef<
         })}
       >
         <div
+          ref={ref}
           className={clsx({
             'govgr-modal__container': true,
           })}

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--border govgr-nav--fixed govgr-nav"
+    className="govgr-nav--border govgr-nav"
   >
     <nav
-      className="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--border govgr-nav--fixed govgr-nav govgr-nav--open"
+    className="govgr-nav--border govgr-nav"
   >
     <nav
-      className="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,32 +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'> {
   /**
   * open is optional.
-  * use this prop to show the navigation at mobile view;
+  * use this prop to control the navigation's visibility when it's a drawer.
   * @value true
   * @value false
   * @default false
   */
   open?: boolean;
   /**
-  * fixed is optional.
-  * fixed prop allows element to be positioned relative to the viewport
-  * @value true
-  * @value false
-  * @default true
-  */
-  fixed?: boolean;
+   * border is optional.
+   * border prop contains border-bottom styling.
+   * @value true
+   * @value false
+   * @default true
+   */
+  border?: boolean;
+
   /**
-  * border is optional.
-  * border prop contains border-bottom styling.
-  * @value true
-  * @value false
-  * @default true
+   * 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';
+
+  /**
+   * 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'.
   */
-  border?: boolean;
+ onClose?: (
+   e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+   ) => void;
+
+  /**
+   * closeButtonLabel is optional.
+   * Use this prop to add text beside the close icon. For example: 'Κλείσιμο'.
+   */
+  closeButtonLabel?: string;
 }
 /**
  * Nav is mainly used under the Header.
@@ -35,9 +56,10 @@ export interface NavProps extends BaseProps<'nav'> {
 export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
   {
     className,
-    open = false,
-    hidden = false,
-    fixed = true,
+    open,
+    drawer = 'never',
+    onClose,
+    closeButtonLabel,
     border = true,
     children,
     ...props
@@ -50,13 +72,24 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
       ref={ref}
       className={clsx(className, {
         'govgr-nav': true,
-        '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/NavMenuContainer/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,122 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+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}
+        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)>
+`;
+
+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}
+        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)>
+`;
+
+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"
+  >
+    <div
+      aria-hidden={true}
+      className="govgr-nav-menu--vertical govgr-nav-menu--hidden govgr-nav-menu"
+    >
+      <ForwardRef(Container)
+        grid={false}
+        spacing={4}
+      >
+        <ForwardRef(Grid)
+          className="govgr-container"
+          container={false}
+          spacing={4}
+        >
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-container"
+          >
+            <div
+              className="govgr-container"
+            >
+              hello
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(Grid)>
+      </ForwardRef(Container)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(NavMenuContainer)>
+`;
+
 exports[`renders the NavMenuContainer with no props 1`] = `
 <ForwardRef(NavMenuContainer)>
   <ForwardRef(Base)

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/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}
     >

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

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

package/src/RadioContainer/index.test.tsx

@@ -9,3 +9,6 @@ it('renders the RadioContainer with no props', () => {
 it('renders the RadioContainer with layout=horizontal', () => {
   expect(mount(<RadioContainer layout='horizontal'>hello</RadioContainer>)).toMatchSnapshot();
 });
+it('renders the RadioContainer with dense prop', () => {
+  expect(mount(<RadioContainer dense>hello</RadioContainer>)).toMatchSnapshot();
+});

package/src/RadioContainer/index.tsx

@@ -10,6 +10,13 @@ export interface RadioContainerProps extends BaseProps<'div'> {
   * @default 'vertical'
   */
   layout?: 'horizontal' | 'vertical';
+  /**
+   * dense is optional.
+   * @value true Radios will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * RadioContainer component is uses when users can only select one option from a list.
@@ -18,13 +25,14 @@ export interface RadioContainerProps extends BaseProps<'div'> {
 export const RadioContainer = React.forwardRef<
   HTMLDivElement,
   RadioContainerProps
->(function RadioContainer({ className, children, layout, ...props }, ref) {
+>(function RadioContainer({ layout, dense, className, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'govgr-radios': true,
+        'govgr-radios--dense': dense,
         'govgr-radios--horizontal': layout === 'horizontal',
       })}
       {...props}

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the RadioItem  \`divider\` props 1`] = `
+exports[`renders the RadioItem  \`dividerText\` props 1`] = `
 <ForwardRef(RadioItem)
   dividerText="ή"
 >
@@ -88,7 +88,7 @@ exports[`renders the RadioItem  value props 1`] = `
 </ForwardRef(RadioItem)>
 `;
 
-exports[`renders the RadioItem with \`name\`, \`disabled\`, \`divider\` and \`value\` props 1`] = `
+exports[`renders the RadioItem with \`name\`, \`disabled\`, \`dividerText\` and \`value\` props 1`] = `
 <ForwardRef(RadioItem)
   disabled={true}
   dividerText="ή"

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the SelectContainer with dense prop 1`] = `
+<ForwardRef(SelectContainer)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="select"
+    className="govgr-select--dense govgr-select"
+  >
+    <select
+      className="govgr-select--dense govgr-select"
+    >
+      hello
+    </select>
+  </ForwardRef(Base)>
+</ForwardRef(SelectContainer)>
+`;
+
 exports[`renders the SelectContainer with name and defaultValue 1`] = `
 <ForwardRef(SelectContainer)
   defaultValue="some-value"

package/src/SelectContainer/index.test.tsx

@@ -12,6 +12,11 @@ it('renders the SelectContainer with name props', () => {
     mount(<SelectContainer name={'some-name'}>hello</SelectContainer>)
   ).toMatchSnapshot();
 });
+it('renders the SelectContainer with dense prop', () => {
+  expect(
+    mount(<SelectContainer dense>hello</SelectContainer>)
+  ).toMatchSnapshot();
+});
 
 it('renders the SelectContainer with name and defaultValue', () => {
   expect(