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

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,109 @@
 // 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}
+      >
+        <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"
+  >
+    <div
+      aria-hidden={true}
+      className="govgr-nav-menu--vertical govgr-nav-menu--hidden govgr-nav-menu"
+    >
+      <ForwardRef(Container)
+        grid={false}
+      >
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-container"
+        >
+          <div
+            className="govgr-container"
+          >
+            hello
+          </div>
+        </ForwardRef(Base)>
+      </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(

package/src/SelectContainer/index.tsx

@@ -2,7 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface SelectContainerProps extends BaseProps<'select'> {}
+export interface SelectContainerProps extends BaseProps<'select'> {
+  /**
+   * dense is optional.
+   * @value true Select will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
+}
 /**
  * The SelectContainer component allows users to choose an option from a long list.
  * It is used as a parent component to wrap SelectOption component.
@@ -10,13 +18,14 @@ export interface SelectContainerProps extends BaseProps<'select'> {}
 export const SelectContainer = React.forwardRef<
   HTMLSelectElement,
   SelectContainerProps
->(function SelectContainer({ className, children, ...props }, ref) {
+>(function SelectContainer({ dense, className, children, ...props }, ref) {
   return (
     <Base
       as="select"
       ref={ref}
       className={clsx(className, {
         'govgr-select': true,
+        'govgr-select--dense': dense,
       })}
       {...props}
     >

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

@@ -6,10 +6,10 @@ exports[`renders the StepNav with dense props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-step--dense govgr-step-nav"
+    className="govgr-step-nav--dense govgr-step-nav"
   >
     <div
-      className="govgr-step--dense govgr-step-nav"
+      className="govgr-step-nav--dense govgr-step-nav"
     >
       hello
     </div>

package/src/Tabs/index.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TabsProps extends BaseProps<'div'> {}
+export interface TabsProps extends BaseProps<'div'> {
+  direction?: 'vertical' | 'horizontal'
+}
 /**
  * Tabs is the main component for tabs.
  * This component must contain TabsHeading, TabsList, and a list of TabsPanel component.
  */
 export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  { className, children, ...props },
+  { direction, className, children, ...props },
   ref
 ) {
   return (
@@ -17,6 +19,7 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(
       ref={ref}
       className={clsx(className, {
         'govgr-tabs': true,
+        'govgr-tabs--vertical': direction ==='vertical',
       })}
       {...props}
     >

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

@@ -6,10 +6,10 @@ exports[`renders the TaskList with dense prop 1`] = `
 >
   <ForwardRef(Base)
     as="ol"
-    className="govgr-task--dense govgr-task-list"
+    className="govgr-task-list--dense govgr-task-list"
   >
     <ol
-      className="govgr-task--dense govgr-task-list"
+      className="govgr-task-list--dense govgr-task-list"
     >
       hello
     </ol>

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

@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the TextArea with dense prop 1`] = `
+<ForwardRef(TextArea)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="textarea"
+    className="govgr-textarea--dense govgr-textarea"
+    rows={3}
+  >
+    <textarea
+      className="govgr-textarea--dense govgr-textarea"
+      rows={3}
+    >
+      hello
+    </textarea>
+  </ForwardRef(Base)>
+</ForwardRef(TextArea)>
+`;
+
 exports[`renders the TextArea with no props 1`] = `
 <ForwardRef(TextArea)>
   <ForwardRef(Base)

package/src/TextArea/index.test.tsx

@@ -26,3 +26,6 @@ it('renders the TextArea with rows=7', () => {
 it('renders the TextArea with rows=8', () => {
   expect(mount(<TextArea rows={8}>hello</TextArea>)).toMatchSnapshot();
 });
+it('renders the TextArea with dense prop', () => {
+  expect(mount(<TextArea dense>hello</TextArea>)).toMatchSnapshot();
+});