@digigov/react-core 0.25.4 → 0.26.0

package/src/FooterLink/index.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface FooterLinkProps extends BaseProps<'a'> { }
 /**
  * FooterLink in used inside the Footer component.
  */
 export const FooterLink = React.forwardRef<HTMLAnchorElement, FooterLinkProps>(
-  function FooterLink({ children, className, ...props }, ref) {
+  function FooterLink({ className, children, ...props }, ref) {
     return (
       <Base
         as="a"
+        ref={ref}
         className={clsx(className, {
           'govgr-footer__link': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/FooterList/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface FooterListProps extends BaseProps<'ul'> {
   /**
@@ -14,15 +14,15 @@ export interface FooterListProps extends BaseProps<'ul'> {
  * This component takes a list of FooterListItem component as its children.
  */
 export const FooterList = React.forwardRef<HTMLUListElement, FooterListProps>(
-  function FooterList({ children, className, columns, ...props }, ref) {
+  function FooterList({ columns, className, children, ...props }, ref) {
     return (
       <Base
         as="ul"
+        ref={ref}
         className={clsx(className, {
           'govgr-footer__list': true,
           'govgr-footer__list--columns-2': columns === 2,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/FooterListItem/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface FooterListItemProps extends BaseProps<'li'> {}
 /**
@@ -10,14 +10,14 @@ export interface FooterListItemProps extends BaseProps<'li'> {}
 export const FooterListItem = React.forwardRef<
   HTMLLIElement,
   FooterListItemProps
->(function FooterListItem({ children, className, ...props }, ref) {
+>(function FooterListItem({ className, children, ...props }, ref) {
   return (
     <Base
       as="li"
+      ref={ref}
       className={clsx(className, {
         'govgr-footer__list-item': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/FooterMeta/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface FooterMetaProps extends BaseProps<'div'> {}
 /**
@@ -9,14 +9,14 @@ export interface FooterMetaProps extends BaseProps<'div'> {}
  * Semantically, in this component we include the very basic elements of a govgr footer.
  */
 export const FooterMeta = React.forwardRef<HTMLDivElement, FooterMetaProps>(
-  function FooterMeta({ children, className, ...props }, ref) {
+  function FooterMeta({ className, children, ...props }, ref) {
     return (
       <Base
         as="div"
+        ref={ref}
         className={clsx(className, {
           'govgr-footer__meta': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/FooterMetaItem/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface FooterMetaItemProps extends BaseProps<'div'> {
   /**
@@ -15,15 +15,15 @@ export interface FooterMetaItemProps extends BaseProps<'div'> {
 export const FooterMetaItem = React.forwardRef<
   HTMLDivElement,
   FooterMetaItemProps
->(function FooterMetaItem({ children, className, grow, ...props }, ref) {
+>(function FooterMetaItem({ grow, className, children, ...props }, ref) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-footer__meta-item': true,
         'govgr-footer__meta-item--grow': grow === true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/FooterNavigation/index.tsx

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

package/src/FooterSection/index.tsx

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

package/src/Form/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface FormProps extends BaseProps<'form'> {
   grid?: boolean;
@@ -10,17 +10,17 @@ export interface FormProps extends BaseProps<'form'> {
  * that will be shown on the left one third of the page
  */
 export const Form = React.forwardRef<HTMLFormElement, FormProps>(function Form(
-  { children, className, grid = false, ...props },
+  { className, children, grid = false, ...props },
   ref
 ) {
   return (
     <Base
       as="form"
+      ref={ref}
       className={clsx(className, {
         'govgr-form': true,
         'govgr-grid': grid,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/GlobeIcon/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
 export interface GlobeIconProps extends SvgIconProps {
   /**
    * active is optional.
@@ -16,16 +16,16 @@ export interface GlobeIconProps extends SvgIconProps {
 export const GlobeIcon: React.FC<GlobeIconProps> = React.forwardRef<
   SVGSVGElement,
   GlobeIconProps
->(function GlobeIcon({ active, className, size, variant, ...props }, ref) {
+>(function GlobeIcon({ variant, size, active, className, ...props }, ref) {
   return (
     <SvgIcon
+      variant={variant}
+      size={size}
       className={clsx(className, {
         'govgr-globe-icon': true,
         'govgr-globe-icon--active': active === true,
       })}
       ref={ref}
-      size={size}
-      variant={variant}
       {...props}
     >
       <path

package/src/GovGRLogo/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 import logo from '@digigov/react-core/GovGRLogo/govgr-logo-base64';
 import logoInverted from '@digigov/react-core/GovGRLogo/govgr-logo-blue-base64';
 export interface GovGRLogoProps extends BaseProps<'a'> {}
@@ -9,30 +9,30 @@ export interface GovGRLogoProps extends BaseProps<'a'> {}
  *  */
 export const GovGRLogo = React.forwardRef<HTMLAnchorElement, GovGRLogoProps>(
   function GovGRLogo(
-    { className, href = 'https://www.gov.gr/', ...props },
+    { href = 'https://www.gov.gr/', className, ...props },
     ref
   ) {
     return (
       <Base
         as="a"
-        className={clsx(className, { 'govgr-header-link': true })}
         href={href}
         ref={ref}
+        className={clsx(className, { 'govgr-header-link': true })}
         {...props}
       >
         <img
-          alt="gov.gr logo"
+          src={logo}
           className={clsx(className, {
             'govgr-header-logo': true,
           })}
-          src={logo}
+          alt="gov.gr logo"
         />
         <img
-          alt="gov.gr logo"
+          src={logoInverted}
           className={clsx(className, {
             'govgr-header-logo-inverted': true,
           })}
-          src={logoInverted}
+          alt="gov.gr logo"
         />
       </Base>
     );

package/src/Grid/index.tsx

@@ -1,36 +1,36 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 type GridValues = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface GridProps extends BaseProps<'div' | 'aside' | 'main'> {
   container?: boolean;
-  inline?: boolean;
   item?: boolean;
-  lg?: GridValues;
-  md?: GridValues;
-  sm?: GridValues;
+  inline?: boolean;
   spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
-  xl?: GridValues;
   xs?: GridValues;
+  sm?: GridValues;
+  md?: GridValues;
+  lg?: GridValues;
+  xl?: GridValues;
 }
 /**
  * Grid is used to arrange other components in complex grid configurations of rows and columns.
  */
 export const Grid = React.forwardRef<HTMLElement, GridProps>(function Grid(
   {
-    as,
-    children,
     className,
+    children,
     container = false,
-    inline,
     item = true,
-    lg,
-    md,
-    sm,
     spacing,
-    xl,
+    inline,
     xs,
+    sm,
+    md,
+    lg,
+    xl,
+    as,
     ...props
   },
   ref
@@ -38,6 +38,7 @@ export const Grid = React.forwardRef<HTMLElement, GridProps>(function Grid(
   return (
     <Base
       as={as || 'div'}
+      ref={ref}
       className={clsx(className, {
         'govgr-grid': container === true,
         'govgr-grid-inline': container === true && inline === true,
@@ -114,7 +115,6 @@ export const Grid = React.forwardRef<HTMLElement, GridProps>(function Grid(
         [`xl:govgr-grid__col-span-11`]: item && xl === 11,
         [`xl:govgr-grid__col-span-12`]: item && xl === 12,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/Header/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface HeaderProps extends BaseProps<'header'> {}
 /**
@@ -8,15 +8,15 @@ export interface HeaderProps extends BaseProps<'header'> {}
  * This elememts is placed at the top of the page
  */
 export const Header = React.forwardRef<HTMLElement, HeaderProps>(
-  function Header({ children, className, ...props }, ref) {
+  function Header({ className, children, ...props }, ref) {
     return (
       <Base
         as="header"
+        role="banner"
+        ref={ref}
         className={clsx(className, {
           'govgr-header': true,
         })}
-        ref={ref}
-        role="banner"
         {...props}
       >
         {children}

package/src/HeaderContent/index.tsx

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

package/src/HeaderLogo/index.tsx

@@ -1,38 +1,38 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface HeaderLogoProps extends BaseProps<'a'> {
-  /**
-   * href is optional.
-   */
-  altText?: string;
   /**
    * src is optional.
    */
   src?: string;
+  /**
+   * href is optional.
+   */
+  altText?: string;
 }
 /**
  * Use this component inside the Header to provide a logo.
  */
 export const HeaderLogo = React.forwardRef<HTMLAnchorElement, HeaderLogoProps>(
-  function HeaderLogo({ altText, className, href, src, ...props }, ref) {
+  function HeaderLogo({ href, src, altText, className, ...props }, ref) {
     return (
       <Base
         as="a"
+        href={href}
+        ref={ref}
         className={clsx(className, {
           'govgr-header-link': true,
         })}
-        href={href}
-        ref={ref}
         {...props}
       >
         <img
-          alt={altText}
+          src={src}
           className={clsx(className, {
             'govgr-header-logo': true,
           })}
-          src={src}
+          alt={altText}
         />
       </Base>
     );

package/src/HeaderNavMenuContent/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface HeaderNavMenuContentProps extends BaseProps<'div'> {}
 /**
@@ -11,14 +11,14 @@ export interface HeaderNavMenuContentProps extends BaseProps<'div'> {}
 export const HeaderNavMenuContent = React.forwardRef<
   HTMLDivElement,
   HeaderNavMenuContentProps
->(function HeaderNavMenuContent({ children, className, ...props }, ref) {
+>(function HeaderNavMenuContent({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-header-nav-menu__content': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/HeaderSecondaryLogo/index.test.tsx

@@ -7,8 +7,8 @@ it('renders the HeaderSecondaryLogo with src and alt', () => {
   expect(
     mount(
       <HeaderSecondaryLogo
-        altText="minedu logo"
         src="https://dilosi.services.gov.gr/minedu-logo.svg"
+        altText="minedu logo"
       ></HeaderSecondaryLogo>
     )
   ).toMatchSnapshot();
@@ -17,9 +17,9 @@ it('renders the HeaderSecondaryLogo with src, href and alt', () => {
   expect(
     mount(
       <HeaderSecondaryLogo
-        altText="minedu logo"
-        href="https://www.minedu.gov.gr/"
         src="https://dilosi.services.gov.gr/minedu-logo.svg"
+        href="https://www.minedu.gov.gr/"
+        altText="minedu logo"
       ></HeaderSecondaryLogo>
     )
   ).toMatchSnapshot();

package/src/HeaderSecondaryLogo/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface HeaderSecondaryLogoProps extends BaseProps<'a'> {
-  /**
-   * href provides the alternative text for the img tag.
-   */
-  altText?: string;
   /**
    * src is needed to provide the url that we get the logo from.
    */
   src: string;
+  /**
+   * href provides the alternative text for the img tag.
+   */
+  altText?: string;
 }
 /**
  * HeaderSecondaryLogo is used inside Header for providing additional logos.
@@ -19,25 +19,25 @@ export const HeaderSecondaryLogo = React.forwardRef<
   HTMLAnchorElement,
   HeaderSecondaryLogoProps
 >(function HeaderSecondaryLogo(
-  { altText, className, href, src, ...props },
+  { href, src, altText, className, ...props },
   ref
 ) {
   return (
     <Base
       as="a"
+      href={href}
+      ref={ref}
       className={clsx(className, {
         'govgr-header-link': true,
       })}
-      href={href}
-      ref={ref}
       {...props}
     >
       <img
-        alt={altText}
+        src={src}
         className={clsx(className, {
           'govgr-header-secondary-logo': true,
         })}
-        src={src}
+        alt={altText}
       />
     </Base>
   );

package/src/HeaderSection/index.tsx

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

package/src/HeaderSubtitle/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface HeaderSubtitleProps extends BaseProps<'div'> {}
 /**
@@ -9,9 +9,9 @@ export interface HeaderSubtitleProps extends BaseProps<'div'> {}
 export const HeaderSubtitle = React.forwardRef<
   HTMLDivElement,
   HeaderSubtitleProps
->(function HeaderSubtitle({ children, className, ...props }, ref) {
+>(function HeaderSubtitle({ className, children, ...props }, ref) {
   return (
-    <Base as="div" className={clsx(className, {})} ref={ref} {...props}>
+    <Base as="div" ref={ref} className={clsx(className, {})} {...props}>
       {children}
     </Base>
   );

package/src/HeaderTitle/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface HeaderTitleProps extends BaseProps<'a'> { }
 /**
@@ -9,15 +9,15 @@ export interface HeaderTitleProps extends BaseProps<'a'> { }
 export const HeaderTitle = React.forwardRef<
   HTMLAnchorElement,
   HeaderTitleProps
->(function HeaderTitle({ children, className, href = '/', ...props }, ref) {
+>(function HeaderTitle({ href = '/', className, children, ...props }, ref) {
   return (
     <Base
       as="a"
+      ref={ref}
+      href={href}
       className={clsx(className, {
         'govgr-header-title': true,
       })}
-      href={href}
-      ref={ref}
       {...props}
     >
       {children}