@digigov/react-core 0.25.4 → 0.25.5

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}

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 element="h2" size={'s'}>
+      <Heading size={'s'} element="h2">
         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 element="h3" size={'s'}>
+      <Heading size={'s'} element="h3">
         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 element="h4" size={'s'}>
+      <Heading size={'s'} element="h4">
         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 element="h2" size={'m'}>
+      <Heading size={'m'} element="h2">
         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 element="h3" size={'m'}>
+      <Heading size={'m'} element="h3">
         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 element="h4" size={'m'}>
+      <Heading size={'m'} element="h4">
         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 element="h2" size={'l'}>
+      <Heading size={'l'} element="h2">
         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 element="h3" size={'l'}>
+      <Heading size={'l'} element="h3">
         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 element="h4" size={'l'}>
+      <Heading size={'l'} element="h4">
         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 element="h2" size={'xl'}>
+      <Heading size={'xl'} element="h2">
         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 element="h3" size={'xl'}>
+      <Heading size={'xl'} element="h3">
         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 element="h4" size={'xl'}>
+      <Heading size={'xl'} element="h4">
         hello
       </Heading>
     )

package/src/Heading/index.tsx

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