@digigov/react-core 0.25.2 → 0.25.4

package/src/Form/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 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(
-  { className, children, grid = false, ...props },
+  { children, className, 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 SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 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({ variant, size, active, className, ...props }, ref) {
+>(function GlobeIcon({ active, className, size, variant, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 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(
-    { href = 'https://www.gov.gr/', className, ...props },
+    { className, href = 'https://www.gov.gr/', ...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
-          src={logo}
+          alt="gov.gr logo"
           className={clsx(className, {
             'govgr-header-logo': true,
           })}
-          alt="gov.gr logo"
+          src={logo}
         />
         <img
-          src={logoInverted}
+          alt="gov.gr logo"
           className={clsx(className, {
             'govgr-header-logo-inverted': true,
           })}
-          alt="gov.gr logo"
+          src={logoInverted}
         />
       </Base>
     );

package/src/Grid/index.tsx

@@ -1,36 +1,36 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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;
-  item?: boolean;
   inline?: boolean;
-  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
-  xs?: GridValues;
-  sm?: GridValues;
-  md?: GridValues;
+  item?: boolean;
   lg?: GridValues;
+  md?: GridValues;
+  sm?: GridValues;
+  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
   xl?: GridValues;
+  xs?: 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(
   {
-    className,
+    as,
     children,
+    className,
     container = false,
-    item = true,
-    spacing,
     inline,
-    xs,
-    sm,
-    md,
+    item = true,
     lg,
+    md,
+    sm,
+    spacing,
     xl,
-    as,
+    xs,
     ...props
   },
   ref
@@ -38,7 +38,6 @@ 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,
@@ -115,6 +114,7 @@ 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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+  function Header({ children, className, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+>(function HeaderContent({ children, className, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface HeaderLogoProps extends BaseProps<'a'> {
-  /**
-   * src is optional.
-   */
-  src?: string;
   /**
    * href is optional.
    */
   altText?: string;
+  /**
+   * src is optional.
+   */
+  src?: string;
 }
 /**
  * Use this component inside the Header to provide a logo.
  */
 export const HeaderLogo = React.forwardRef<HTMLAnchorElement, HeaderLogoProps>(
-  function HeaderLogo({ href, src, altText, className, ...props }, ref) {
+  function HeaderLogo({ altText, className, href, src, ...props }, ref) {
     return (
       <Base
         as="a"
-        href={href}
-        ref={ref}
         className={clsx(className, {
           'govgr-header-link': true,
         })}
+        href={href}
+        ref={ref}
         {...props}
       >
         <img
-          src={src}
+          alt={altText}
           className={clsx(className, {
             'govgr-header-logo': true,
           })}
-          alt={altText}
+          src={src}
         />
       </Base>
     );

package/src/HeaderNavMenuContent/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 HeaderNavMenuContentProps extends BaseProps<'div'> {}
 /**
@@ -11,14 +11,14 @@ export interface HeaderNavMenuContentProps extends BaseProps<'div'> {}
 export const HeaderNavMenuContent = React.forwardRef<
   HTMLDivElement,
   HeaderNavMenuContentProps
->(function HeaderNavMenuContent({ className, children, ...props }, ref) {
+>(function HeaderNavMenuContent({ children, className, ...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
-        src="https://dilosi.services.gov.gr/minedu-logo.svg"
         altText="minedu logo"
+        src="https://dilosi.services.gov.gr/minedu-logo.svg"
       ></HeaderSecondaryLogo>
     )
   ).toMatchSnapshot();
@@ -17,9 +17,9 @@ it('renders the HeaderSecondaryLogo with src, href and alt', () => {
   expect(
     mount(
       <HeaderSecondaryLogo
-        src="https://dilosi.services.gov.gr/minedu-logo.svg"
-        href="https://www.minedu.gov.gr/"
         altText="minedu logo"
+        href="https://www.minedu.gov.gr/"
+        src="https://dilosi.services.gov.gr/minedu-logo.svg"
       ></HeaderSecondaryLogo>
     )
   ).toMatchSnapshot();

package/src/HeaderSecondaryLogo/index.tsx

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

package/src/HeaderSection/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 HeaderSectionProps extends BaseProps<'div'> {}
 /**
@@ -9,14 +9,14 @@ export interface HeaderSectionProps extends BaseProps<'div'> {}
 export const HeaderSection = React.forwardRef<
   HTMLDivElement,
   HeaderSectionProps
->(function HeaderSection({ className, children, ...props }, ref) {
+>(function HeaderSection({ children, className, ...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 Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 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({ className, children, ...props }, ref) {
+>(function HeaderSubtitle({ children, className, ...props }, ref) {
   return (
-    <Base as="div" ref={ref} className={clsx(className, {})} {...props}>
+    <Base as="div" className={clsx(className, {})} ref={ref} {...props}>
       {children}
     </Base>
   );

package/src/HeaderTitle/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 HeaderTitleProps extends BaseProps<'a'> { }
 /**
@@ -9,15 +9,15 @@ export interface HeaderTitleProps extends BaseProps<'a'> { }
 export const HeaderTitle = React.forwardRef<
   HTMLAnchorElement,
   HeaderTitleProps
->(function HeaderTitle({ href = '/', className, children, ...props }, ref) {
+>(function HeaderTitle({ children, className, href = '/', ...props }, ref) {
   return (
     <Base
       as="a"
-      ref={ref}
-      href={href}
       className={clsx(className, {
         'govgr-header-title': true,
       })}
+      href={href}
+      ref={ref}
       {...props}
     >
       {children}

package/src/Heading/index.test.tsx

@@ -26,7 +26,7 @@ it('renders the Heading with size=s', () => {
 it('renders the Heading with size=s and element h2', () => {
   expect(
     mount(
-      <Heading size={'s'} element="h2">
+      <Heading element="h2" size={'s'}>
         hello
       </Heading>
     )
@@ -36,7 +36,7 @@ it('renders the Heading with size=s and element h2', () => {
 it('renders the Heading with size=s and element h3', () => {
   expect(
     mount(
-      <Heading size={'s'} element="h3">
+      <Heading element="h3" size={'s'}>
         hello
       </Heading>
     )
@@ -46,7 +46,7 @@ it('renders the Heading with size=s and element h3', () => {
 it('renders the Heading with size=s and element h4', () => {
   expect(
     mount(
-      <Heading size={'s'} element="h4">
+      <Heading element="h4" size={'s'}>
         hello
       </Heading>
     )
@@ -56,7 +56,7 @@ it('renders the Heading with size=s and element h4', () => {
 it('renders the Heading with size=m and element h2', () => {
   expect(
     mount(
-      <Heading size={'m'} element="h2">
+      <Heading element="h2" size={'m'}>
         hello
       </Heading>
     )
@@ -66,7 +66,7 @@ it('renders the Heading with size=m and element h2', () => {
 it('renders the Heading with size=m and element h3', () => {
   expect(
     mount(
-      <Heading size={'m'} element="h3">
+      <Heading element="h3" size={'m'}>
         hello
       </Heading>
     )
@@ -76,7 +76,7 @@ it('renders the Heading with size=m and element h3', () => {
 it('renders the Heading with size=m and element h4', () => {
   expect(
     mount(
-      <Heading size={'m'} element="h4">
+      <Heading element="h4" size={'m'}>
         hello
       </Heading>
     )
@@ -86,7 +86,7 @@ it('renders the Heading with size=m and element h4', () => {
 it('renders the Heading with size=l and element h2', () => {
   expect(
     mount(
-      <Heading size={'l'} element="h2">
+      <Heading element="h2" size={'l'}>
         hello
       </Heading>
     )
@@ -96,7 +96,7 @@ it('renders the Heading with size=l and element h2', () => {
 it('renders the Heading with size=l and element h3', () => {
   expect(
     mount(
-      <Heading size={'l'} element="h3">
+      <Heading element="h3" size={'l'}>
         hello
       </Heading>
     )
@@ -106,7 +106,7 @@ it('renders the Heading with size=l and element h3', () => {
 it('renders the Heading with size=l and element h4', () => {
   expect(
     mount(
-      <Heading size={'l'} element="h4">
+      <Heading element="h4" size={'l'}>
         hello
       </Heading>
     )
@@ -116,7 +116,7 @@ it('renders the Heading with size=l and element h4', () => {
 it('renders the Heading with size=xl and element h2', () => {
   expect(
     mount(
-      <Heading size={'xl'} element="h2">
+      <Heading element="h2" size={'xl'}>
         hello
       </Heading>
     )
@@ -126,7 +126,7 @@ it('renders the Heading with size=xl and element h2', () => {
 it('renders the Heading with size=xl and element h3', () => {
   expect(
     mount(
-      <Heading size={'xl'} element="h3">
+      <Heading element="h3" size={'xl'}>
         hello
       </Heading>
     )
@@ -136,7 +136,7 @@ it('renders the Heading with size=xl and element h3', () => {
 it('renders the Heading with size=xl and element h4', () => {
   expect(
     mount(
-      <Heading size={'xl'} element="h4">
+      <Heading element="h4" size={'xl'}>
         hello
       </Heading>
     )

package/src/Heading/index.tsx

@@ -1,18 +1,18 @@
 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 HeadingProps extends BaseProps<'h1'> {
-  /**
-   * size is optional. 'xl' is the default value.
-   * Use 'xl' when this heading is the main page title.
-   */
-  size?: 'xl' | 'l' | 'm' | 's';
   /**
    * element is optional. 'h1' is the default value.
    * Use 'h1' when this heading is the main page title.
    */
   element?: HeadingHTMLElements;
+  /**
+   * size is optional. 'xl' is the default value.
+   * Use 'xl' when this heading is the main page title.
+   */
+  size?: 'xl' | 'l' | 'm' | 's';
 }
 export type HeadingHTMLElements = 'h1' | 'h2' | 'h3' | 'h4';
 
@@ -39,20 +39,20 @@ const getComponentBySize = (
  */
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   function Heading(
-    { size = 'xl', element, className, children, ...props },
+    { children, className, element, size = 'xl', ...props },
     ref
   ) {
     const Component = element ? element : getComponentBySize(size);
     return (
       <Base
         as={Component}
-        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}
         {...props}
       >
         {children}

package/src/HeadingCaption/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 HeadingCaptionProps extends BaseProps<'span'> {
   /**
@@ -16,16 +16,16 @@ export interface HeadingCaptionProps extends BaseProps<'span'> {
 export const HeadingCaption = React.forwardRef<
   HTMLSpanElement,
   HeadingCaptionProps
->(function HeadingCaption({ size = 'l', className, children, ...props }, ref) {
+>(function HeadingCaption({ children, className, size = 'l', ...props }, ref) {
   return (
     <Base
       as="span"
-      ref={ref}
       className={clsx(className, {
         'govgr-caption-xl': size === 'xl',
         'govgr-caption-l': size === 'l',
         'govgr-caption-m': size === 'm',
       })}
+      ref={ref}
       {...props}
     >
       {children}