@digigov/react-core 0.25.2 → 0.25.4

package/src/HellenicRepublicLogo/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 import logoEl from '@digigov/react-core/HellenicRepublicLogo/logo-el';
 import logoEn from '@digigov/react-core/HellenicRepublicLogo/logo-en';
 import logoElInverted from '@digigov/react-core/HellenicRepublicLogo/logo-inverted-el';
@@ -20,37 +20,33 @@ export interface HellenicRepublicLogoProps extends BaseProps<'img'> {
 export const HellenicRepublicLogo = React.forwardRef<
   HTMLImageElement,
   HellenicRepublicLogoProps
->(function HellenicRepublicLogo({ lang, className, children, ...props }, ref) {
+>(function HellenicRepublicLogo({ children, className, lang, ...props }, ref) {
   const logo = lang === 'en' ? logoEn : logoEl;
   const logoInverted = lang === 'en' ? logoEnInverted : logoElInverted;
-  return (
-    <>
-      <Base
-        as="img"
-        src={logo}
-        ref={ref}
-        className={clsx(className, {
-          'govgr-footer__government-logo': true,
-        })}
-        {...props}
-        alt="Hellenic Republic Logo"
-      >
-        {children}
-      </Base>
-      <Base
-        as="img"
-        src={logoInverted}
-        ref={ref}
-        className={clsx(className, {
-          'govgr-footer__government-logo-inverted': true,
-        })}
-        {...props}
-        alt="Hellenic Republic Logo"
-      >
-        {children}
-      </Base>
-    </>
-  );
+  return (<>
+    <Base
+      alt="Hellenic Republic Logo"
+      as="img"
+      className={clsx(className, {
+        'govgr-footer__government-logo': true,
+      })}
+      ref={ref}
+      src={logo}
+      {...props}>
+      {children}
+    </Base>
+    <Base
+      alt="Hellenic Republic Logo"
+      as="img"
+      className={clsx(className, {
+        'govgr-footer__government-logo-inverted': true,
+      })}
+      ref={ref}
+      src={logoInverted}
+      {...props}>
+      {children}
+    </Base>
+  </>);
 });
 
 export default HellenicRepublicLogo;

package/src/Hidden/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface HiddenProps extends BaseProps<'div'> {
   lgUp?: boolean;
@@ -17,8 +17,8 @@ export interface HiddenProps extends BaseProps<'div'> {
 export const Hidden = React.forwardRef<HTMLDivElement, HiddenProps>(
   function Hidden(
     {
-      className,
       children,
+      className,
       lgUp = false,
       mdUp = false,
       smUp = false,
@@ -31,7 +31,6 @@ export const Hidden = React.forwardRef<HTMLDivElement, HiddenProps>(
     return (
       <Base
         as="div"
-        ref={ref}
         className={clsx(className, {
           'govgr-lg-up': lgUp,
           'govgr-md-up': mdUp,
@@ -39,6 +38,7 @@ export const Hidden = React.forwardRef<HTMLDivElement, HiddenProps>(
           'govgr-xl-up': xlUp,
           'govgr-xs-up': xsUp,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/Hint/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface HintProps extends BaseProps<'p'> {
   /**
@@ -13,17 +13,17 @@ export interface HintProps extends BaseProps<'p'> {
  * 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({ children, className, fontSize, ...props }, ref) {
     return (
       <Base
         as="p"
-        ref={ref}
         className={clsx(className, {
           'govgr-hint': true,
           'govgr-!-font-size-14': fontSize === '14',
           'govgr-!-font-size-16': fontSize === '16',
           'govgr-!-font-size-24': fontSize === '24',
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/LabelContainer/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface LabelContainerProps extends BaseProps<'label'> {}
 /**
@@ -9,14 +9,14 @@ export interface LabelContainerProps extends BaseProps<'label'> {}
 export const LabelContainer = React.forwardRef<
   HTMLLabelElement,
   LabelContainerProps
->(function LabelContainer({ className, children, ...props }, ref) {
+>(function LabelContainer({ children, className, ...props }, ref) {
   return (
     <Base
       as="label"
-      ref={ref}
       className={clsx(className, {
         'govgr-label': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/LabelTitle/index.tsx

@@ -1,37 +1,37 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface LabelFieldProps extends BaseProps<'span'> {
-  /**
-   * size is optional. The default value is 'l'
-   */
-  size?: 'xl' | 'l' | 'm' | 's';
   /**
    * heading is optional.
    * Add this prop if this Field component is the only one in this page.
    * The default value is false.
    */
   heading?: boolean;
+  /**
+   * size is optional. The default value is 'l'
+   */
+  size?: 'xl' | 'l' | 'm' | 's';
 }
 /**
  * Label component defines a label for several elements at forms.
  */
 export const LabelTitle = React.forwardRef<HTMLSpanElement, LabelFieldProps>(
   function LabelTitle(
-    { size, className, heading = false, children, ...props },
+    { children, className, heading = false, size, ...props },
     ref
   ) {
     return (
       <Base
         as="span"
-        ref={ref}
         className={clsx(className, {
           'govgr-heading-xl': size === 'xl',
           'govgr-heading-l': size === 'l',
           'govgr-heading-m': size === 'm',
           'govgr-heading-s': size === 's',
         })}
+        ref={ref}
         {...(heading && { role: 'heading', 'aria-level': 1 })}
         {...props}
       >

package/src/Layout/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface LayoutProps extends BaseProps<'div'> {
   fullHeight?: boolean;
@@ -9,15 +9,15 @@ export interface LayoutProps extends BaseProps<'div'> {
  * Wrapper component for the entire page except the Header and the Footer.
  */
 export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
-  function Layout({ className, children, fullHeight = true, ...props }, ref) {
+  function Layout({ children, className, fullHeight = true, ...props }, ref) {
     return (
       <Base
         as="div"
-        ref={ref}
         className={clsx(className, {
           'govgr-layout-wrapper': true,
           'govgr-layout-wrapper__full-height': fullHeight === true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/LinkBase/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface LinkBaseProps extends BaseProps<'a'> {
   /**
@@ -13,15 +13,15 @@ export interface LinkBaseProps extends BaseProps<'a'> {
  * This component defines a hyperlink, which is used to link from one page to another.
  */
 export const LinkBase = React.forwardRef<HTMLAnchorElement, LinkBaseProps>(
-  function LinkBase({ underline, className, children, ...props }, ref) {
+  function LinkBase({ children, className, underline, ...props }, ref) {
     return (
       <Base
         as="a"
-        ref={ref}
         className={clsx(className, {
           'govgr-link': true,
           'govgr-link--no-underline': underline === false,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/List/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface ListProps extends BaseProps<'ol'> {
   /**
@@ -17,19 +17,19 @@ export interface ListProps extends BaseProps<'ol'> {
  * This component must contain ListItem component.
  */
 export const List = React.forwardRef<HTMLOListElement, ListProps>(function List(
-  { listStyle = 'none', spaced = false, className, children, ...props },
+  { children, className, listStyle = 'none', spaced = false, ...props },
   ref
 ) {
   return (
     <Base
       as="ol"
-      ref={ref}
       className={clsx(className, {
         'govgr-list': true,
         'govgr-list--bullet': listStyle === 'bullet',
         'govgr-list--number': listStyle === 'number',
         'govgr-list--spaced': spaced === true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/ListItem/index.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface ListItemProps extends BaseProps<'li'> {}
 /**
  * ListItem must be inside List compoenent.
  */
 export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
-  function ListItem({ className, children, ...props }, ref) {
+  function ListItem({ children, className, ...props }, ref) {
     return (
       <Base
         as="li"
-        ref={ref}
         className={clsx(className, {
           'govgr-list__item': true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/Main/index.tsx

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

package/src/Masthead/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface MastheadProps extends BaseProps<'div'> {
   /**
@@ -14,17 +14,17 @@ export interface MastheadProps extends BaseProps<'div'> {
  * Use the Masthead on the top of the page.
  */
 export const Masthead = React.forwardRef<HTMLDivElement, MastheadProps>(
-  function Masthead({ className, children, color = 'primary', ...props }, ref) {
+  function Masthead({ children, className, color = 'primary', ...props }, ref) {
     return (
       <Base
         as="div"
-        ref={ref}
         className={clsx(className, {
           'govgr-masthead': true,
           'govgr-background-dark': color === 'primary',
           'govgr-masthead--primary': color === 'primary',
           'govgr-masthead--secondary': color === 'secondary',
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/MastheadBody/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface MastheadBodyProps extends BaseProps<'p'> {}
 /**
@@ -9,14 +9,14 @@ export interface MastheadBodyProps extends BaseProps<'p'> {}
 export const MastheadBody = React.forwardRef<
   HTMLParagraphElement,
   MastheadBodyProps
->(function MastheadBody({ className, children, ...props }, ref) {
+>(function MastheadBody({ children, className, ...props }, ref) {
   return (
     <Base
       as="p"
-      ref={ref}
       className={clsx(className, {
         'govgr-masthead-body': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/MoreVertIcon/index.test.tsx

@@ -43,8 +43,8 @@ it('renders the MoreVertIcon with prop variant=focus', () => {
   expect(mount(<MoreVertIcon variant="focus" />)).toMatchSnapshot();
 });
 it('renders the MoreVertIcon with prop variant=warning and size=s', () => {
-  expect(mount(<MoreVertIcon variant="warning" size="s" />)).toMatchSnapshot();
+  expect(mount(<MoreVertIcon size="s" variant="warning" />)).toMatchSnapshot();
 });
 it('renders the MoreVertIcon with prop variant=error and size= xl', () => {
-  expect(mount(<MoreVertIcon variant="warning" size="xl" />)).toMatchSnapshot();
+  expect(mount(<MoreVertIcon size="xl" variant="warning" />)).toMatchSnapshot();
 });

package/src/MoreVertIcon/index.tsx

@@ -1,22 +1,29 @@
 import React from 'react';
-import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
-export interface MoreVertIconProps extends SvgIconProps {}
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+export interface MoreVertIconProps extends SvgIconProps {
+  /**
+   * ref is optional.
+   * ref prop declares the reference of the svg icon component.
+   * It can be used to to access the DOM element and the React element.
+   */
+  ref?: React.Ref<SVGSVGElement>;
+}
 /**
  * Use MoreVertIcon component when you need to show more options.
  */
 export const MoreVertIcon: React.FC<MoreVertIconProps> = React.forwardRef<
   SVGSVGElement,
   MoreVertIconProps
->(function MoreVertIcon({ size, variant, className, ...props }, ref) {
+>(function MoreVertIcon({ className, size, variant, ...props }, ref) {
   return (
     <SvgIcon
-      size={size}
-      variant={variant}
       className={clsx(className, {
         'govgr-svg-icon--check': true,
       })}
       ref={ref}
+      size={size}
+      variant={variant}
       {...props}
     >
       <circle cx="12" cy="5" r="2" />

package/src/Nav/index.tsx

@@ -1,34 +1,34 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+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;
+   * border is optional.
+   * border prop contains border-bottom styling.
    */
-  open?: boolean;
+  border?: boolean;
   /**
-   * layout prop sets the display layout for the nav list
-   * layout is horizontal by default.
+   * fixed is optional.
+   * fixed prop allows element to be positioned relative to the viewport
    */
-  layout?: 'vertical' | 'horizontal';
+  fixed?: boolean;
   /**
    * hidden is optional.
    * hidden prop hides the nav element when it is called from a navItem.
    */
   hidden?: boolean;
   /**
-   * fixed is optional.
-   * fixed prop allows element to be positioned relative to the viewport
+   * layout prop sets the display layout for the nav list
+   * layout is horizontal by default.
    */
-  fixed?: boolean;
+  layout?: 'vertical' | 'horizontal';
   /**
-   * border is optional.
-   * border prop contains border-bottom styling.
+   * active is optional.
+   * active prop add background color to navigation link.
+   * use this prop only for header navigation;
    */
-  border?: boolean;
+  open?: boolean;
 }
 /**
  * Nav is mainly used under the Header.
@@ -36,13 +36,13 @@ export interface NavProps extends BaseProps<'nav'> {
  */
 export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
   {
-    className,
-    open = false,
-    layout = 'horizontal',
-    hidden = false,
-    fixed = true,
     border = true,
     children,
+    className,
+    fixed = true,
+    hidden = false,
+    layout = 'horizontal',
+    open = false,
     ...props
   },
   ref
@@ -50,7 +50,6 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
   return (
     <Base
       as="nav"
-      ref={ref}
       className={clsx(className, {
         'govgr-nav': true,
         'govgr-nav--horizontal': layout === 'horizontal',
@@ -60,6 +59,7 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
         'govgr-nav--open': open,
         'govgr-nav--hidden': hidden,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/NavList/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface NavListProps extends BaseProps<'ul'> {
   /**
@@ -14,15 +14,15 @@ export interface NavListProps extends BaseProps<'ul'> {
  * 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({ active = false, children, className, ...props }, ref) {
     return (
       <Base
         as="ul"
-        ref={ref}
         className={clsx(className, {
           'govgr-nav__list': true,
           'govgr-nav__list--active': active,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/NavListItem/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface NavListItemProps extends BaseProps<'li'> {}
 /**
@@ -8,14 +8,14 @@ export interface NavListItemProps extends BaseProps<'li'> {}
  * This component has a items of NavListItemLink component inside.
  */
 export const NavListItem = React.forwardRef<HTMLLIElement, NavListItemProps>(
-  function NavHeaderListItem({ className, children, ...props }, ref) {
+  function NavHeaderListItem({ children, className, ...props }, ref) {
     return (
       <Base
         as="li"
-        ref={ref}
         className={clsx(className, {
           'govgr-nav__list-item': true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/NavListItemButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
-import Button, { ButtonProps } from '@digigov/react-core/Button';
 import ArrowIcon from '@digigov/react-core/ArrowIcon';
+import Button, { ButtonProps } from '@digigov/react-core/Button';
 
 export interface NavListItemButtonProps extends ButtonProps {
   /**
@@ -25,18 +25,18 @@ export const NavListItemButton = React.forwardRef<
   HTMLButtonElement,
   NavListItemButtonProps
 >(function NavListItemButton(
-  { active, className, arrow = true, children, ...props },
+  { active, arrow = true, children, className, ...props },
   ref
 ) {
   return (
     <Button
-      variant="link"
-      ref={ref}
       aria-selected={active}
       className={clsx(className, {
         'govgr-nav__list-item-btn': true,
         'govgr-nav__list-item-btn--active': active === true,
       })}
+      ref={ref}
+      variant="link"
       {...props}
     >
       {children}

package/src/NavListItemLink/index.test.tsx

@@ -20,7 +20,7 @@ it('renders the NavListItemLink with active=false', () => {
 it('renders the NavListItemLink with href and active=false', () => {
   expect(
     mount(
-      <NavListItemLink href="/" active={false}>
+      <NavListItemLink active={false} href="/">
         hello
       </NavListItemLink>
     )
@@ -29,7 +29,7 @@ it('renders the NavListItemLink with href and active=false', () => {
 it('renders the NavListItemLink with href and active=true', () => {
   expect(
     mount(
-      <NavListItemLink href="/" active={false}>
+      <NavListItemLink active={false} href="/">
         hello
       </NavListItemLink>
     )

package/src/NavListItemLink/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import { BaseProps } from '@digigov/react-core/Base';
 import Link from '@digigov/react-core/LinkBase';
 
 export interface NavListItemLinkProps extends BaseProps<'a'> {
@@ -18,17 +18,17 @@ export const NavListItemLink = React.forwardRef<
   HTMLAnchorElement,
   NavListItemLinkProps
 >(function NavListItemLink(
-  { active, href, className, children, ...props },
+  { active, children, className, href, ...props },
   ref
 ) {
   return (
     <Link
-      href={href}
-      ref={ref}
       className={clsx(className, {
         'govgr-nav__list-item-link': true,
         'govgr-nav__list-item-link--active': active === true,
       })}
+      href={href}
+      ref={ref}
       {...props}
     >
       {children}