@digigov/react-core 0.25.2 → 0.25.4

package/src/TableHeadCell/index.tsx

@@ -1,14 +1,8 @@
 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 TableHeadCellProps extends BaseProps<'th'> {
-  /**
-   * dataType is optional.
-   * Use numeric value prop when comparing columns of numbers, align the numbers to the right in table cells.
-   * Default value is text which aligns texts to the center
-   */
-  dataType?: 'text' | 'numeric';
   /**
    * cellWidth is optional.
    * Use cellWidth prop to define a custom width for a specific reference number in your table cell.
@@ -21,6 +15,12 @@ export interface TableHeadCellProps extends BaseProps<'th'> {
     | 'two-thirds'
     | 'three-quarters'
     | 'full';
+  /**
+   * dataType is optional.
+   * Use numeric value prop when comparing columns of numbers, align the numbers to the right in table cells.
+   * Default value is text which aligns texts to the center
+   */
+  dataType?: 'text' | 'numeric';
 }
 /**
  * Use TableHeadCell inside the Table component to provide the header row and/or column of the table.
@@ -29,13 +29,12 @@ export const TableHeadCell = React.forwardRef<
   HTMLTableCellElement,
   TableHeadCellProps
 >(function TableHeadCell(
-  { dataType = 'text', cellWidth, className, children, ...props },
+  { cellWidth, children, className, dataType = 'text', ...props },
   ref
 ) {
   return (
     <Base
       as="th"
-      ref={ref}
       className={clsx(className, {
         'govgr-table__header': true,
         'govgr-table__header--numeric': dataType === 'numeric',
@@ -46,6 +45,7 @@ export const TableHeadCell = React.forwardRef<
         'govgr-!-width-three-quarters': cellWidth === 'three-quarters',
         'govgr-!-width-full': cellWidth === 'full',
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/TableNoDataRow/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 TableNoDataRowProps extends BaseProps<'td'> { }
 /**
@@ -10,17 +10,17 @@ export interface TableNoDataRowProps extends BaseProps<'td'> { }
 export const TableNoDataRow = React.forwardRef<
   HTMLTableCellElement,
   TableNoDataRowProps
->(function TableNoDataRow({ className, children, ...props }, ref) {
+>(function TableNoDataRow({ children, className, ...props }, ref) {
   return (
     <tr className="govgr-table__row">
       <Base
         as="td"
-        colSpan={100}
-        ref={ref}
         className={clsx(className, {
           'govgr-table__cell': true,
           'govgr-table__cell--no-data': true,
         })}
+        colSpan={100}
+        ref={ref}
         {...props}
       >
         {children}

package/src/TableRow/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 TableRowProps extends BaseProps<'tr'> {
   /**
@@ -13,15 +13,15 @@ export interface TableRowProps extends BaseProps<'tr'> {
  * Use TableRow inside the Table component to provide a new row to the table.
  */
 export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
-  function TableRow({ warning=false, className, children, ...props }, ref) {
+  function TableRow({ children, className, warning=false, ...props }, ref) {
     return (
       <Base
         as="tr"
-        ref={ref}
         className={clsx(className, {
           'govgr-table__row': true,
           'govgr-table__row--warning': warning,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/Tabs/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 TabsProps extends BaseProps<'div'> {}
 /**
@@ -8,16 +8,16 @@ export interface TabsProps extends BaseProps<'div'> {}
  * This component must contain TabsHeading, TabsList, and a list of TabsPanel component.
  */
 export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  { className, children, ...props },
+  { children, className, ...props },
   ref
 ) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-tabs': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/TabsHeading/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 TabsHeadingProps extends BaseProps<'h6'> {
   /**
@@ -16,16 +16,16 @@ export interface TabsHeadingProps extends BaseProps<'h6'> {
 export const TabsHeading = React.forwardRef<
   HTMLHeadingElement,
   TabsHeadingProps
->(function TabsHeading({ size = 's', className, children, ...props }, ref) {
+>(function TabsHeading({ children, className, size = 's', ...props }, ref) {
   return (
     <Base
       as="h6"
-      ref={ref}
       className={clsx(className, {
         'govgr-tabs__title': true,
         'govgr-heading-m': size === 'm',
         'govgr-heading-s': size === 's',
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/TabsList/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 TabsListProps extends BaseProps<'ul'> {}
 /**
@@ -8,15 +8,15 @@ export interface TabsListProps extends BaseProps<'ul'> {}
  * Inside the TabsList should be a list of TabsListItem components.
  */
 export const TabsList = React.forwardRef<HTMLUListElement, TabsListProps>(
-  function TabsList({ className, children, ...props }, ref) {
+  function TabsList({ children, className, ...props }, ref) {
     return (
       <Base
         as="ul"
-        role="tablist"
-        ref={ref}
         className={clsx(className, {
           'govgr-tabs__list': true,
         })}
+        ref={ref}
+        role="tablist"
         {...props}
       >
         {children}

package/src/TabsListItem/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 TabsListItemProps extends BaseProps<'a'> {
   /**
@@ -17,23 +17,23 @@ export interface TabsListItemProps extends BaseProps<'a'> {
 export const TabsListItem = React.forwardRef<
   HTMLAnchorElement,
   TabsListItemProps
->(function TabsListItem({ selected, className, children, ...props }, ref) {
+>(function TabsListItem({ children, className, selected, ...props }, ref) {
   return (
     <li
-      role="presentation"
       className={clsx(className, {
         'govgr-tabs__list-item': true,
         'govgr-tabs__list-item-selected': selected === true,
       })}
+      role="presentation"
     >
       <Base
-        as="a"
-        ref={ref}
-        role="tab"
         aria-selected={selected}
+        as="a"
         className={clsx({
           'govgr-tabs__tab': true,
         })}
+        ref={ref}
+        role="tab"
         {...props}
       >
         {children}

package/src/TabsPanel/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 TabsPanelProps extends BaseProps<'div'> {
   /**
@@ -15,17 +15,17 @@ export interface TabsPanelProps extends BaseProps<'div'> {
  * Every TabsListItem relates to a TabsPanel.
  */
 export const TabsPanel = React.forwardRef<HTMLDivElement, TabsPanelProps>(
-  function TabsPanel({ active, className, children, ...props }, ref) {
+  function TabsPanel({ active, children, className, ...props }, ref) {
     return (
       <Base
-        as="div"
-        ref={ref}
-        role="tabpanel"
         aria-hidden={!active}
+        as="div"
         className={clsx(className, {
           'govgr-tabs__panel': true,
           'govgr-tabs__panel-visible': active === true,
         })}
+        ref={ref}
+        role="tabpanel"
         {...props}
       >
         {children}

package/src/TextArea/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 TextAreaProps extends BaseProps<'textarea'> {
   /**
@@ -15,19 +15,19 @@ export interface TextAreaProps extends BaseProps<'textarea'> {
  */
 export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
   function TextArea(
-    { name, rows = 6, error, className, children, ...props },
+    { children, className, error, name, rows = 6, ...props },
     ref
   ) {
     return (
       <Base
         as="textarea"
-        name={name}
-        rows={rows}
-        ref={ref}
         className={clsx(className, {
           'govgr-textarea': true,
           'govgr-error-input': error === true,
         })}
+        name={name}
+        ref={ref}
+        rows={rows}
         {...props}
       >
         {children}

package/src/TextInput/index.test.tsx

@@ -67,128 +67,128 @@ it('renders the TextInput with cellWidth=full', () => {
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput cellWidth={'one-quarter'} characterWidth={2}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput cellWidth={'one-quarter'} characterWidth={3}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput cellWidth={'one-quarter'} characterWidth={4}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput cellWidth={'one-quarter'} characterWidth={5}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput cellWidth={'one-quarter'} characterWidth={20}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput cellWidth={'one-third'} characterWidth={2}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput cellWidth={'one-third'} characterWidth={3}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput cellWidth={'one-third'} characterWidth={4}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput cellWidth={'one-third'} characterWidth={5}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput cellWidth={'one-third'} characterWidth={20}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput cellWidth={'one-half'} characterWidth={2}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput cellWidth={'one-half'} characterWidth={3}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput cellWidth={'one-half'} characterWidth={4}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput cellWidth={'one-half'} characterWidth={5}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput cellWidth={'one-half'} characterWidth={20}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput cellWidth={'two-thirds'} characterWidth={2}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput cellWidth={'two-thirds'} characterWidth={3}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput cellWidth={'two-thirds'} characterWidth={4}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput cellWidth={'two-thirds'} characterWidth={5}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput cellWidth={'two-thirds'} characterWidth={20}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={2} cellWidth={'three-quarters'}></TextInput>
+      <TextInput cellWidth={'three-quarters'} characterWidth={2}></TextInput>
     )
   ).toMatchSnapshot();
 });
@@ -196,7 +196,7 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=three-quarter
 it('renders the TextInput with characterWidth=3 and with cellWidth=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={3} cellWidth={'three-quarters'}></TextInput>
+      <TextInput cellWidth={'three-quarters'} characterWidth={3}></TextInput>
     )
   ).toMatchSnapshot();
 });
@@ -204,7 +204,7 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=three-quarter
 it('renders the TextInput with characterWidth=4 and with cellWidth=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={4} cellWidth={'three-quarters'}></TextInput>
+      <TextInput cellWidth={'three-quarters'} characterWidth={4}></TextInput>
     )
   ).toMatchSnapshot();
 });
@@ -212,7 +212,7 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=three-quarter
 it('renders the TextInput  with with characterWidth=5 with cellWidth=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={5} cellWidth={'three-quarters'}></TextInput>
+      <TextInput cellWidth={'three-quarters'} characterWidth={5}></TextInput>
     )
   ).toMatchSnapshot();
 });
@@ -220,37 +220,37 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=three-quart
 it('renders the TextInput with characterWidth=20 and with cellWidth=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={20} cellWidth={'three-quarters'}></TextInput>
+      <TextInput cellWidth={'three-quarters'} characterWidth={20}></TextInput>
     )
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'full'}></TextInput>)
+    mount(<TextInput cellWidth={'full'} characterWidth={2}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'full'}></TextInput>)
+    mount(<TextInput cellWidth={'full'} characterWidth={3}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'full'}></TextInput>)
+    mount(<TextInput cellWidth={'full'} characterWidth={4}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'full'}></TextInput>)
+    mount(<TextInput cellWidth={'full'} characterWidth={5}></TextInput>)
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'full'}></TextInput>)
+    mount(<TextInput cellWidth={'full'} characterWidth={20}></TextInput>)
   ).toMatchSnapshot();
 });

package/src/TextInput/index.tsx

@@ -1,13 +1,8 @@
 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 TextInputProps extends BaseProps<'input'> {
-  /**
-   * characterWidth is optional.
-   */
-  characterWidth?: 2 | 3 | 4 | 5 | 10 | 20;
-
   /**
    * cellWidth is optional.
    * Use cellWidth prop to define a custom width for a specific reference number in your components.
@@ -20,6 +15,11 @@ export interface TextInputProps extends BaseProps<'input'> {
     | 'three-quarters'
     | 'full';
 
+  /**
+   * characterWidth is optional.
+   */
+  characterWidth?: 2 | 3 | 4 | 5 | 10 | 20;
+
   /**
    * error is optional. The default value is false.
    * Use this prop when there is an error at the input.
@@ -33,13 +33,13 @@ export interface TextInputProps extends BaseProps<'input'> {
 export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
   function TextInput(
     {
-      type = 'text',
-      name,
-      characterWidth,
       cellWidth,
-      error,
-      className,
+      characterWidth,
       children,
+      className,
+      error,
+      name,
+      type = 'text',
       ...props
     },
     ref
@@ -47,9 +47,6 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     return (
       <Base
         as="input"
-        type={type}
-        name={name}
-        ref={ref}
         className={clsx(className, {
           'govgr-input': true,
           'govgr-input--width-2': characterWidth === 2,
@@ -66,6 +63,9 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           'govgr-!-width-full': cellWidth === 'full',
           'govgr-error-input': error === true,
         })}
+        name={name}
+        ref={ref}
+        type={type}
         {...props}
       >
         {children}

package/src/Top/index.tsx

@@ -1,22 +1,22 @@
 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 TopProps extends BaseProps<'div'> {}
 /**
  * Top is used inside the Layout component and it must be the first component in order.
  */
 export const Top = React.forwardRef<HTMLDivElement, TopProps>(function Top(
-  { className, children, ...props },
+  { children, className, ...props },
   ref
 ) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-top': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/UncheckIcon/index.test.tsx

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

package/src/UncheckIcon/index.tsx

@@ -1,22 +1,29 @@
 import React from 'react';
-import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
-export interface UncheckIconProps extends SvgIconProps {}
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+export interface UncheckIconProps 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 UnUncheckIcon component when you need a uncheck/decline icon.
  */
 export const UncheckIcon: React.FC<UncheckIconProps> = React.forwardRef<
   SVGSVGElement,
   UncheckIconProps
->(function UncheckIcon({ size, variant, className, ...props }, ref) {
+>(function UncheckIcon({ 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}
     >
       <polygon points="20.59 5.74 18.26 3.41 12 9.67 5.742 3.41 3.41 5.74 9.67 12 3.41 18.26 5.74 20.6 12 14.33 18.26 20.59 20.59 18.26 14.33 12 20.59 5.74" />