@digigov/react-core 0.25.4 → 0.26.0

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}

package/src/HellenicRepublicLogo/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 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,33 +20,37 @@ export interface HellenicRepublicLogoProps extends BaseProps<'img'> {
 export const HellenicRepublicLogo = React.forwardRef<
   HTMLImageElement,
   HellenicRepublicLogoProps
->(function HellenicRepublicLogo({ children, className, lang, ...props }, ref) {
+>(function HellenicRepublicLogo({ lang, className, children, ...props }, ref) {
   const logo = lang === 'en' ? logoEn : logoEl;
   const logoInverted = lang === 'en' ? logoEnInverted : logoElInverted;
-  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>
-  </>);
+  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>
+    </>
+  );
 });
 
 export default HellenicRepublicLogo;

package/src/Hidden/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 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(
     {
-      children,
       className,
+      children,
       lgUp = false,
       mdUp = false,
       smUp = false,
@@ -31,6 +31,7 @@ export const Hidden = React.forwardRef<HTMLDivElement, HiddenProps>(
     return (
       <Base
         as="div"
+        ref={ref}
         className={clsx(className, {
           'govgr-lg-up': lgUp,
           'govgr-md-up': mdUp,
@@ -38,7 +39,6 @@ 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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, fontSize, ...props }, ref) {
+  function Hint({ fontSize, className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, ...props }, ref) {
+>(function LabelContainer({ className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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(
-    { children, className, heading = false, size, ...props },
+    { size, className, heading = false, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, fullHeight = true, ...props }, ref) {
+  function Layout({ className, children, 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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, underline, ...props }, ref) {
+  function LinkBase({ underline, className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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(
-  { children, className, listStyle = 'none', spaced = false, ...props },
+  { listStyle = 'none', spaced = false, className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface ListItemProps extends BaseProps<'li'> {}
 /**
  * ListItem must be inside List compoenent.
  */
 export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
-  function ListItem({ children, className, ...props }, ref) {
+  function ListItem({ className, children, ...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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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(
-  { children, className, id = 'main-content', ...props },
+  { className, children, 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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, color = 'primary', ...props }, ref) {
+  function Masthead({ className, children, 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 clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 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({ children, className, ...props }, ref) {
+>(function MastheadBody({ className, children, ...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 size="s" variant="warning" />)).toMatchSnapshot();
+  expect(mount(<MoreVertIcon variant="warning" size="s" />)).toMatchSnapshot();
 });
 it('renders the MoreVertIcon with prop variant=error and size= xl', () => {
-  expect(mount(<MoreVertIcon size="xl" variant="warning" />)).toMatchSnapshot();
+  expect(mount(<MoreVertIcon variant="warning" size="xl" />)).toMatchSnapshot();
 });

package/src/MoreVertIcon/index.tsx

@@ -1,29 +1,22 @@
 import React from 'react';
-import clsx from 'clsx';
 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>;
-}
+import clsx from 'clsx';
+export interface MoreVertIconProps extends SvgIconProps {}
 /**
  * Use MoreVertIcon component when you need to show more options.
  */
 export const MoreVertIcon: React.FC<MoreVertIconProps> = React.forwardRef<
   SVGSVGElement,
   MoreVertIconProps
->(function MoreVertIcon({ className, size, variant, ...props }, ref) {
+>(function MoreVertIcon({ size, variant, className, ...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" />