@digigov/react-core 0.25.4 → 0.26.0

package/src/SelectOption/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 SelectOptionProps extends BaseProps<'option'> {}
 /**
@@ -11,16 +11,16 @@ export const SelectOption = React.forwardRef<
   HTMLOptionElement,
   SelectOptionProps
 >(function SelectOption(
-  { children, className, selected, value, ...props },
+  { value, selected, className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="option"
-      className={clsx(className, {})}
+      value={value}
       ref={ref}
       selected={selected}
-      value={value}
+      className={clsx(className, {})}
       {...props}
     >
       {children}

package/src/SingleCharacterInputContainer/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 SingleCharacterInputContainerProps extends BaseProps<'div'> {}
 /**
@@ -12,16 +12,16 @@ export const SingleCharacterInputContainer = React.forwardRef<
   HTMLDivElement,
   SingleCharacterInputContainerProps
 >(function SingleCharacterInputContainer(
-  { children, className, ...props },
+  { className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-single-character-input--container': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/SingleCharacterInputItem/index.test.tsx

@@ -18,7 +18,7 @@ it('renders the SingleCharacterInputItem with name prop', () => {
 
 it('renders the SingleCharacterInputItem with name and error props', () => {
   expect(
-    mount(<SingleCharacterInputItem error name={'single-character-input'} />)
+    mount(<SingleCharacterInputItem name={'single-character-input'} error />)
   ).toMatchSnapshot();
 });
 it('renders the SingleCharacterInputItem with pattern prop', () => {
@@ -27,7 +27,7 @@ it('renders the SingleCharacterInputItem with pattern prop', () => {
 
 it('renders the SingleCharacterInputItem with name and error props', () => {
   expect(
-    mount(<SingleCharacterInputItem error name={'single-character-input'} />)
+    mount(<SingleCharacterInputItem name={'single-character-input'} error />)
   ).toMatchSnapshot();
 });
 
@@ -35,10 +35,10 @@ it('renders the SingleCharacterInputItem with name, pattern, maxLength and error
   expect(
     mount(
       <SingleCharacterInputItem
-        error
-        maxLength={6}
         name={'single-character-input'}
         pattern="\d{1}"
+        maxLength={6}
+        error
       />
     )
   ).toMatchSnapshot();

package/src/SingleCharacterInputItem/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 SingleCharacterInputItemProps extends BaseProps<'input'> {
   /**
@@ -8,17 +8,17 @@ export interface SingleCharacterInputItemProps extends BaseProps<'input'> {
    * Use this prop when there is an error at the input.
    */
   error?: boolean;
+  /**
+   * pattern is optional. The default value is [0-9].
+   * Use this prop when you want to give a specific format input.
+   */
+  pattern?: string;
   /**
    * maxLength property is optional
    * maxLength prop specifies the max length of the input field.
    * maxLength default value is 1.
    */
   maxLength?: number;
-  /**
-   * pattern is optional. The default value is [0-9].
-   * Use this prop when you want to give a specific format input.
-   */
-  pattern?: string;
 }
 /**
  * Details for the SingleCharacterInputItem.
@@ -29,27 +29,29 @@ export const SingleCharacterInputItem = React.forwardRef<
   HTMLInputElement,
   SingleCharacterInputItemProps
 >(function SingleCharacterInputItem(
-  { className, error, maxLength = 1, name, pattern = '[0-9]*', ...props },
+  { name, error, className, pattern = '[0-9]*', maxLength = 1, ...props },
   ref
 ) {
   return (
-    <Base
-      as="input"
-      className={clsx({
-        className,
-        'govgr-otp-input__item': true,
-        'govgr-input': true,
-        'govgr-otp-input--width': true,
-        'govgr-error-input': error === true,
-      })}
-      inputMode="numeric"
-      maxLength={maxLength}
-      name={name}
-      pattern={pattern}
-      ref={ref}
-      type="text"
-      {...props}
-    />
+    <>
+      <Base
+        as="input"
+        ref={ref}
+        type="text"
+        pattern={pattern}
+        maxLength={maxLength}
+        inputMode="numeric"
+        name={name}
+        className={clsx({
+          className,
+          'govgr-otp-input__item': true,
+          'govgr-input': true,
+          'govgr-otp-input--width': true,
+          'govgr-error-input': error === true,
+        })}
+        {...props}
+      />
+    </>
   );
 });
 

package/src/SkipLink/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 LinkProps extends BaseProps<'a'> {}
 /**
@@ -8,18 +8,18 @@ export interface LinkProps extends BaseProps<'a'> {}
  */
 export const SkipLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
   function SkipLink(
-    { children, className, href = '#main-content', ...props },
+    { className, children, href = '#main-content', ...props },
     ref
   ) {
     return (
       <Base
         as="a"
+        tabIndex={0}
+        href={href}
+        ref={ref}
         className={clsx(className, {
           'govgr--skip-link': true,
         })}
-        href={href}
-        ref={ref}
-        tabIndex={0}
         {...props}
       >
         {children}

package/src/SummaryList/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 SummaryListProps extends BaseProps<'dl'> {
   /**
@@ -15,15 +15,15 @@ export interface SummaryListProps extends BaseProps<'dl'> {
  * It must contain a list of SummaryListItem components.
  */
 export const SummaryList = React.forwardRef<HTMLDListElement, SummaryListProps>(
-  function SummaryList({ border = true, children, className, ...props }, ref) {
+  function SummaryList({ className, border = true, children, ...props }, ref) {
     return (
       <Base
         as="dl"
+        ref={ref}
         className={clsx(className, {
           'govgr-summary-list--no-border': !border,
           'govgr-summary-list': true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/SummaryListItem/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 SummaryListItemProps extends BaseProps<'div'> {}
 /**
@@ -10,14 +10,14 @@ export interface SummaryListItemProps extends BaseProps<'div'> {}
 export const SummaryListItem = React.forwardRef<
   HTMLDivElement,
   SummaryListItemProps
->(function SummaryListItem({ children, className, ...props }, ref) {
+>(function SummaryListItem({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-summary-list__row': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/SummaryListItemAction/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 SummaryListItemActionProps extends BaseProps<'dd'> {}
 /**
@@ -10,14 +10,14 @@ export interface SummaryListItemActionProps extends BaseProps<'dd'> {}
 export const SummaryListItemAction = React.forwardRef<
   HTMLElement,
   SummaryListItemActionProps
->(function SummaryListItemAction({ children, className, ...props }, ref) {
+>(function SummaryListItemAction({ className, children, ...props }, ref) {
   return (
     <Base
       as="dd"
+      ref={ref}
       className={clsx(className, {
         'govgr-summary-list__actions': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/SummaryListItemKey/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 SummaryListItemKeyProps extends BaseProps<'dt'> {}
 /**
@@ -10,14 +10,14 @@ export interface SummaryListItemKeyProps extends BaseProps<'dt'> {}
 export const SummaryListItemKey = React.forwardRef<
   HTMLElement,
   SummaryListItemKeyProps
->(function SummaryListItemKey({ children, className, ...props }, ref) {
+>(function SummaryListItemKey({ className, children, ...props }, ref) {
   return (
     <Base
       as="dt"
+      ref={ref}
       className={clsx(className, {
         'govgr-summary-list__key': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/SummaryListItemValue/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 SummaryListItemValueProps extends BaseProps<'dd'> {}
 /**
@@ -9,14 +9,14 @@ export interface SummaryListItemValueProps extends BaseProps<'dd'> {}
 export const SummaryListItemValue = React.forwardRef<
   HTMLElement,
   SummaryListItemValueProps
->(function SummaryListItemValue({ children, className, ...props }, ref) {
+>(function SummaryListItemValue({ className, children, ...props }, ref) {
   return (
     <Base
       as="dd"
+      ref={ref}
       className={clsx(className, {
         'govgr-summary-list__value': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/SvgIcon/index.test.tsx

@@ -45,7 +45,7 @@ it('renders the SvgIcon with prop variant=focus', () => {
 it('renders the SvgIcon with prop variant=warning and size=s', () => {
   expect(
     mount(
-      <SvgIcon size="s" variant="warning">
+      <SvgIcon variant="warning" size="s">
         hello
       </SvgIcon>
     )
@@ -54,7 +54,7 @@ it('renders the SvgIcon with prop variant=warning and size=s', () => {
 it('renders the SvgIcon with prop variant=error and size= xl', () => {
   expect(
     mount(
-      <SvgIcon size="xl" variant="warning">
+      <SvgIcon variant="warning" size="xl">
         hello
       </SvgIcon>
     )

package/src/SvgIcon/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 SvgIconProps extends BaseProps<'svg'> {
   /**
@@ -29,11 +29,11 @@ export interface SvgIconProps extends BaseProps<'svg'> {
  *  SvgIcon can be used inside other svg components as childern such as CheckIcon, CaretIcon etc.
  */
 export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
-  function SvgIcon({ children, className, size, variant, ...props }, ref) {
+  function SvgIcon({ size, variant, children, className, ...props }, ref) {
     return (
       <Base
-        aria-hidden="true"
         as="svg"
+        ref={ref}
         className={clsx(className, {
           'govgr-svg-icon--dark': variant === 'dark',
           'govgr-svg-icon--light': variant === 'light',
@@ -51,8 +51,8 @@ export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
           'govgr-svg-icon': true,
         })}
         focusable="false"
-        ref={ref}
         viewBox="0 0 24 24"
+        aria-hidden="true"
         {...props}
       >
         {children}

package/src/Table/index.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface TableProps extends BaseProps<'table'> {
+  /**
+   * variant is optional.
+   * The `variant` prop is used to either give blue background color to th tags
+   * or a light grey background.
+   * Default value is undefined which results to an opaque background color.
+   */
+  variant?: 'dark' | 'light';
   /**
    * dense is optional.
    * The dense prop is used to make font size smaller and give
@@ -10,18 +17,11 @@ export interface TableProps extends BaseProps<'table'> {
    */
   dense?: boolean;
   /**
-   * stacked is optional.
-   * The stacked prop gives responsiveness to the table. If used, make sure to add "data-label" to TableDataCell components.
-   * Default value is never.
-   */
-  stacked?: 'always' | 's' | 'm' | 'never';
-  /**
-   * variant is optional.
-   * The `variant` prop is used to either give blue background color to th tags
-   * or a light grey background.
-   * Default value is undefined which results to an opaque background color.
+   * zebra is optional.
+   * The zebra prop is used to make zebra table lines.
+   * Default value is false.
    */
-  variant?: 'dark' | 'light';
+  zebra?: boolean;
   /**
    * verticalBorders is optional.
    * The verticalBorders prop gives extra vertical lines to the table.
@@ -29,11 +29,11 @@ export interface TableProps extends BaseProps<'table'> {
    */
   verticalBorders?: boolean;
   /**
-   * zebra is optional.
-   * The zebra prop is used to make zebra table lines.
-   * Default value is false.
+   * stacked is optional.
+   * The stacked prop gives responsiveness to the table. If used, make sure to add "data-label" to TableDataCell components.
+   * Default value is never.
    */
-  zebra?: boolean;
+  stacked?: 'always' | 's' | 'm' | 'never';
 }
 /**
  * Table component is used to wrap the sub components of a table
@@ -41,13 +41,13 @@ export interface TableProps extends BaseProps<'table'> {
 export const Table = React.forwardRef<HTMLTableElement, TableProps>(
   function Table(
     {
-      children,
-      className,
-      dense = false,
-      stacked= 'never',
       variant,
-      verticalBorders = false,
       zebra = false,
+      dense = false,
+      verticalBorders = false,
+      stacked= 'never',
+      className,
+      children,
       ...props
     },
     ref
@@ -55,6 +55,7 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
     return (
       <Base
         as="table"
+        ref={ref}
         className={clsx(className, {
           'govgr-table': true,
           'govgr-table--stacked-always': stacked === 'always',
@@ -67,7 +68,6 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
           'govgr-table--with-vertical-header': verticalBorders === true,
           'govgr-table--with-vertical-lines': verticalBorders === true,
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/TableBody/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 TableBodyProps extends BaseProps<'tbody'> {
   /**
@@ -16,18 +16,18 @@ export const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   TableBodyProps
 >(function TableBody(
-  { children, className, verticalAlign = 'middle', ...props },
+  { verticalAlign = 'middle', className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="tbody"
+      ref={ref}
       className={clsx(className, {
         'govgr-table__body': true,
         'govgr-table__body--vertical-top': verticalAlign === 'top',
         'govgr-table__body--vertical-bottom': verticalAlign === 'bottom',
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/TableCaption/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 TableCaptionProps extends BaseProps<'caption'> {
   /**
@@ -14,10 +14,11 @@ export interface TableCaptionProps extends BaseProps<'caption'> {
  * Table caption is used inside the Table component to provide a caption at the top of the table.
  */
 export const TableCaption = React.forwardRef<HTMLElement, TableCaptionProps>(
-  function TableCaption({ children, className, size = 'm', ...props }, ref) {
+  function TableCaption({ size = 'm', className, children, ...props }, ref) {
     return (
       <Base
         as="caption"
+        ref={ref}
         className={clsx(className, {
           'govgr-table__caption': true,
           'govgr-table__caption--s': size === 's',
@@ -25,7 +26,6 @@ export const TableCaption = React.forwardRef<HTMLElement, TableCaptionProps>(
           'govgr-table__caption--l': size === 'l',
           'govgr-table__caption--xl': size === 'xl',
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/TableContainer/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 TableContainerProps extends BaseProps<'div'> {
   /**
@@ -15,17 +15,17 @@ export const TableContainer = React.forwardRef<
   HTMLDivElement,
   TableContainerProps
 >(function TableContainer(
-  { border = false, children, className, ...props },
+  { border = false, className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-table-container': true,
         'govgr-table-container--border': border,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/TableDataCell/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 TableDataCellProps extends BaseProps<'td'> {
   /**
@@ -17,17 +17,17 @@ export const TableDataCell = React.forwardRef<
   HTMLTableCellElement,
   TableDataCellProps
 >(function TableDataCell(
-  { children, className, dataType = 'text', ...props },
+  { dataType = 'text', className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="td"
+      ref={ref}
       className={clsx(className, {
         'govgr-table__cell': true,
         'govgr-table__cell--numeric': dataType === 'numeric',
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/TableHead/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 TableHeadProps extends BaseProps<'thead'> {}
 /**
@@ -9,14 +9,14 @@ export interface TableHeadProps extends BaseProps<'thead'> {}
 export const TableHead = React.forwardRef<
   HTMLTableSectionElement,
   TableHeadProps
->(function TableHead({ children, className, ...props }, ref) {
+>(function TableHead({ className, children, ...props }, ref) {
   return (
     <Base
       as="thead"
+      ref={ref}
       className={clsx(className, {
         'govgr-table__head': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/TableHeadCell/index.test.tsx

@@ -53,8 +53,8 @@ it('renders the TableHeadCell with dataType="numeric" cellWidth=one-quarter', ()
   expect(
     mount(
       <TableHeadCell
-        cellWidth={'one-quarter'}
         dataType="numeric"
+        cellWidth={'one-quarter'}
       ></TableHeadCell>
     )
   ).toMatchSnapshot();
@@ -63,7 +63,7 @@ it('renders the TableHeadCell with dataType="numeric" cellWidth=one-quarter', ()
 it('renders the TableHeadCell with dataType="numeric" and cellWidth=one-third', () => {
   expect(
     mount(
-      <TableHeadCell cellWidth={'one-third'} dataType="numeric"></TableHeadCell>
+      <TableHeadCell dataType="numeric" cellWidth={'one-third'}></TableHeadCell>
     )
   ).toMatchSnapshot();
 });
@@ -71,7 +71,7 @@ it('renders the TableHeadCell with dataType="numeric" and cellWidth=one-third',
 it('renders the TableHeadCell with dataType="numeric" and dataType="numeric" and   cellWidth=one-half', () => {
   expect(
     mount(
-      <TableHeadCell cellWidth={'one-half'} dataType="numeric"></TableHeadCell>
+      <TableHeadCell dataType="numeric" cellWidth={'one-half'}></TableHeadCell>
     )
   ).toMatchSnapshot();
 });
@@ -80,8 +80,8 @@ it('renders the TableHeadCell with dataType="numeric" and cellWidth=two-thirds',
   expect(
     mount(
       <TableHeadCell
-        cellWidth={'two-thirds'}
         dataType="numeric"
+        cellWidth={'two-thirds'}
       ></TableHeadCell>
     )
   ).toMatchSnapshot();
@@ -91,8 +91,8 @@ it('renders the TableHeadCell with dataType="numeric" and cellWidth=three-quarte
   expect(
     mount(
       <TableHeadCell
-        cellWidth={'three-quarters'}
         dataType="numeric"
+        cellWidth={'three-quarters'}
       ></TableHeadCell>
     )
   ).toMatchSnapshot();
@@ -100,6 +100,6 @@ it('renders the TableHeadCell with dataType="numeric" and cellWidth=three-quarte
 
 it('renders the TableHeadCell dataType="numeric" and with cellWidth=full', () => {
   expect(
-    mount(<TableHeadCell cellWidth={'full'} dataType="numeric"></TableHeadCell>)
+    mount(<TableHeadCell dataType="numeric" cellWidth={'full'}></TableHeadCell>)
   ).toMatchSnapshot();
 });