@digigov/react-core 0.23.1 → 0.25.0

package/src/CaretIcon/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
 export interface CaretIconProps extends SvgIconProps {
-  ref?: React.Ref<SVGSVGElement>;
   /**
    * direction is optional.
    * direction prop declares the direction of the svg icon.

package/src/CheckIcon/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
-export interface CheckIconProps 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>;
-}
+
+export interface CheckIconProps extends SvgIconProps {}
 /**
  * Use CheckIcon component when you need a check icon.
  */

package/src/CheckboxConditional/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import LabelContainer from '@digigov/react-core/LabelContainer';
+import FieldContainer from '@digigov/react-core/FieldContainer';
 import clsx from 'clsx';
 
 export interface CheckboxConditionalProps extends BaseProps<'div'> {}
@@ -21,19 +23,9 @@ export const CheckboxConditional = React.forwardRef<
       })}
       {...props}
     >
-      <div
-        className={clsx({
-          'govgr-field': true,
-        })}
-      >
-        <label
-          className={clsx({
-            'govgr-label': true,
-          })}
-        >
-          {children}
-        </label>
-      </div>
+      <FieldContainer>
+        <LabelContainer>{children}</LabelContainer>
+      </FieldContainer>
     </Base>
   );
 });

package/src/CheckboxItem/index.tsx

@@ -1,23 +1,9 @@
 import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import clsx from 'clsx';
 
-export interface CheckboxItemProps extends BaseProps<'input'> {
-  /**
-   * Name property is optional and it contains a single value which describes the name of the <input> element.
-   */
-  name?: string;
-
-  /**
-   * Value property is optional and it specifies the value of an <input> element.
-   */
-  value?: string;
-  /**
-   * disabled prop disables the checkbox input.
-   * disabled property is optional and it is false by default.
-   */
-  disabled?: boolean;
-}
+export interface CheckboxItemProps extends BaseProps<'input'> {}
 /**
  * Details for the CheckboxItem.
  * CheckboxItem component allows the user to select one or more checkboxes
@@ -27,7 +13,7 @@ export const CheckboxItem = React.forwardRef<
   HTMLInputElement,
   CheckboxItemProps
 >(function CheckboxItem(
-  { name, value, className, disabled = false, children, ...props },
+  { name, value, className, disabled, children, ...props },
   ref
 ) {
   return (
@@ -36,9 +22,9 @@ export const CheckboxItem = React.forwardRef<
         'govgr-checkboxes__item': true,
       })}
     >
-      <label
+      <LabelContainer
         className={clsx({
-          'govgr-label govgr-checkboxes__label': true,
+          'govgr-checkboxes__label': true,
           'govgr-checkboxes__label--disabled': disabled === true,
         })}
       >
@@ -55,7 +41,7 @@ export const CheckboxItem = React.forwardRef<
           disabled={disabled}
           {...props}
         />
-      </label>
+      </LabelContainer>
     </div>
   );
 });

package/src/CloseIcon/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
-export interface CloseIconProps 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>;
-}
+
+export interface CloseIconProps extends SvgIconProps {}
 /**
  * CloseIcon component is used to add close icon.
  * CloseIcon component can be used for dismissing contents

package/src/DateInputItem/index.tsx

@@ -3,10 +3,6 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
 export interface DateInputItemProps extends BaseProps<'input'> {
-  /**
-   * Name property is optional and it contains a single value which describes the name of the <input> element.
-   */
-  name?: string;
   /**
    * Width property is optional.
    * Use this property for year field to grow width.

package/src/Fieldset/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface FieldsetProps extends BaseProps<'fieldset'> {}
+export interface FieldsetProps extends BaseProps<'fieldset'> { }
 /**
  * Details for the Fieldset.
  * Fieldset component is used to group related elements in a form.
@@ -15,7 +15,6 @@ export const Fieldset = React.forwardRef<HTMLFieldSetElement, FieldsetProps>(
         ref={ref}
         className={clsx(className, {
           'govgr-fieldset': true,
-          /* 'govgr-grid': true, */
         })}
         {...props}
       >

package/src/FileUpload/index.tsx

@@ -3,14 +3,6 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
 export interface FileUploadProps extends BaseProps<'input'> {
-  /**
-   * name is optional.
-   */
-  name?: string;
-  /**
-   * disabled is optional.
-   */
-  disabled?: boolean;
   /**
    * hasFiles is optional.
    */
@@ -21,10 +13,13 @@ export interface FileUploadProps extends BaseProps<'input'> {
  * FileUpload component is used for uploading files
  */
 export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
-  function FileUpload({ name, className, children, disabled, hasFiles = false, ...props }, ref) {
+  function FileUpload(
+    { name, className, children, disabled, hasFiles = false, ...props },
+    ref
+  ) {
     return (
       <Base
-        as="label"  
+        as="label"
         tabIndex={0}
         role="button"
         className={clsx(className, {
@@ -44,8 +39,8 @@ export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
             'govgr-file-input': true,
           })}
           {...props}
-          />
-          {children}
+        />
+        {children}
       </Base>
     );
   }

package/src/FooterImage/index.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface FooterImageProps extends BaseProps<'img'> {
-  /**
-   * altText is optional.
-   */
-  alt?: string;
-}
+export interface FooterImageProps extends BaseProps<'img'> {}
 /**
  * FooterImage is a component for logos and images in the footer.
  * It is used inside to FooterContentLogos.

package/src/FooterLink/index.tsx

@@ -2,21 +2,15 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface FooterLinkProps extends BaseProps<'a'> {
-  /**
-   * href is optional.
-   */
-  href?: string;
-}
+export interface FooterLinkProps extends BaseProps<'a'> { }
 /**
  * FooterLink in used inside the Footer component.
  */
 export const FooterLink = React.forwardRef<HTMLAnchorElement, FooterLinkProps>(
-  function FooterLink({ href, className, children, ...props }, ref) {
+  function FooterLink({ className, children, ...props }, ref) {
     return (
       <Base
         as="a"
-        href={href}
         ref={ref}
         className={clsx(className, {
           'govgr-footer__link': true,

package/src/FooterList/index.tsx

@@ -7,7 +7,7 @@ export interface FooterListProps extends BaseProps<'ul'> {
    * columns is optional.
    * The values for this are 1 and 2. The default value is 1.
    */
-  columns?: number;
+  columns?: 1 | 2;
 }
 /**
  * FooterList is used inside the FooterSection.

package/src/GlobeIcon/index.tsx

@@ -2,12 +2,6 @@ import React from 'react';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
 export interface GlobeIconProps 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>;
   /**
    * active is optional.
    * The default is 'false'.

package/src/Grid/index.tsx

@@ -4,7 +4,6 @@ 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'> {
-  ref?: React.Ref<HTMLDivElement>;
   container?: boolean;
   item?: boolean;
   inline?: boolean;
@@ -18,7 +17,7 @@ export interface GridProps extends BaseProps<'div' | 'aside' | 'main'> {
 /**
  * Grid is used to arrange other components in complex grid configurations of rows and columns.
  */
-export const Grid = React.forwardRef<HTMLDivElement, GridProps>(function Grid(
+export const Grid = React.forwardRef<HTMLElement, GridProps>(function Grid(
   {
     className,
     children,

package/src/HeaderLogo/index.tsx

@@ -7,10 +7,6 @@ export interface HeaderLogoProps extends BaseProps<'a'> {
    * src is optional.
    */
   src?: string;
-  /**
-   * href is optional.
-   */
-  href?: string;
   /**
    * href is optional.
    */

package/src/HeaderSecondaryLogo/index.tsx

@@ -7,12 +7,6 @@ export interface HeaderSecondaryLogoProps extends BaseProps<'a'> {
    * src is needed to provide the url that we get the logo from.
    */
   src: string;
-
-  /**
-   * href provides the url that the logo leads to if clicked.
-   */
-  href?: string;
-
   /**
    * href provides the alternative text for the img tag.
    */

package/src/HeaderTitle/index.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface HeaderTitleProps extends BaseProps<'a'> {
-  /**
-   * href is optionaland is used to provide the redirection url after clicking on the HeaderTitle.
-   */
-  href?: string;
-}
+export interface HeaderTitleProps extends BaseProps<'a'> { }
 /**
  * Use this component inside HeaderContent to provide a title to the header.
  */
@@ -18,8 +13,8 @@ export const HeaderTitle = React.forwardRef<
   return (
     <Base
       as="a"
-      href={href}
       ref={ref}
+      href={href}
       className={clsx(className, {
         'govgr-header-title': true,
       })}

package/src/HellenicRepublicLogo/index.tsx

@@ -7,11 +7,6 @@ import logoElInverted from '@digigov/react-core/HellenicRepublicLogo/logo-invert
 import logoEnInverted from '@digigov/react-core/HellenicRepublicLogo/logo-inverted-en';
 
 export interface HellenicRepublicLogoProps extends BaseProps<'img'> {
-  /**
-   * src is optional.
-   * By default, the src is the official logo of the Hellenic Republic uploaded to the government.gov.gr site.
-   */
-  src?: string;
   /**
    * lang is optional.
    * Use this to define the language version of the logo. Default is el.
@@ -30,30 +25,30 @@ export const HellenicRepublicLogo = React.forwardRef<
   const logoInverted = lang === 'en' ? logoEnInverted : logoElInverted;
   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>
+      <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>
     </>
   );
 });

package/src/Hidden/index.tsx

@@ -3,7 +3,6 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
 export interface HiddenProps extends BaseProps<'div'> {
-  ref?: React.Ref<HTMLDivElement>;
   lgUp?: boolean;
   mdUp?: boolean;
   smUp?: boolean;

package/src/MoreVertIcon/index.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
-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>;
-}
+export interface MoreVertIconProps extends SvgIconProps {}
 /**
  * Use MoreVertIcon component when you need to show more options.
  */

package/src/NavListItemLink/index.tsx

@@ -10,11 +10,6 @@ export interface NavListItemLinkProps extends BaseProps<'a'> {
    *
    */
   active?: boolean;
-  /**
-   * href prop is used to navigate to current url page.
-   * href is optional.
-   */
-  href?: string;
 }
 /**
  * NavListItemLink is an <a> element. It should be inside the NavListItem component.

package/src/NotificationBannerLink/index.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface NotificationBannerLinkProps extends BaseProps<'a'> {
-  /**
-   * href is optional.
-   */
-  href?: string;
-}
+export interface NotificationBannerLinkProps extends BaseProps<'a'> {}
 /**
  * Details for the NotificationBannerLink.
  * NotificationBannerLink allow users to click their way from page to page.
@@ -17,7 +12,7 @@ export const NotificationBannerLink = React.forwardRef<
   HTMLAnchorElement,
   NotificationBannerLinkProps
 >(function NotificationBannerLink(
-  { href = '#', className, children, ...props },
+  { className, href = '#', children, ...props },
   ref
 ) {
   return (

package/src/PhaseBannerHeaderContainer/index.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface PhaseBannerHeaderContainerProps extends BaseProps<'div'> {
-  tag?: string;
-  text?: string;
-}
+export interface PhaseBannerHeaderContainerProps extends BaseProps<'div'> {}
 
 export const PhaseBannerHeaderContainer = React.forwardRef<
   HTMLDivElement,

package/src/RadioConditional/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import LabelContainer from '@digigov/react-core/LabelContainer';
+import FieldContainer from '@digigov/react-core/FieldContainer';
 import clsx from 'clsx';
 
 export interface RadioConditionalProps extends BaseProps<'div'> {}
@@ -21,19 +23,9 @@ export const RadioConditional = React.forwardRef<
       })}
       {...props}
     >
-      <div
-        className={clsx({
-          'govgr-field': true,
-        })}
-      >
-        <label
-          className={clsx({
-            'govgr-label': true,
-          })}
-        >
-          {children}
-        </label>
-      </div>
+      <FieldContainer>
+        <LabelContainer>{children}</LabelContainer>
+      </FieldContainer>
     </Base>
   );
 });

package/src/RadioItem/index.tsx

@@ -1,23 +1,9 @@
 import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import clsx from 'clsx';
 
-export interface RadioItemProps extends BaseProps<'input'> {
-  /**
-   *Name property is optional and it contains a single value which describes the name of the <input> element.
-   */
-  name?: string;
-
-  /**
-   * Value property is optional and it specifies the value of an <input> element.
-   */
-  value?: string;
-  /**
-   * disabled prop disables the radio input.
-   * disabled property is optional and it is false by default.
-   */
-  disabled?: boolean;
-}
+export interface RadioItemProps extends BaseProps<'input'> {}
 /**
  * RadioItem component is used for display radio buttons.
  * RadioItem component must be included inside Radio component, as a children component.
@@ -33,9 +19,9 @@ export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
           'govgr-radios__item': true,
         })}
       >
-        <label
+        <LabelContainer
           className={clsx({
-            'govgr-label govgr-radios__label': true,
+            'govgr-radios__label': true,
             'govgr-radios__label--disabled': disabled === true,
           })}
         >
@@ -52,7 +38,7 @@ export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
             disabled={disabled}
             {...props}
           />
-        </label>
+        </LabelContainer>
       </div>
     );
   }

package/src/SelectContainer/index.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface SelectContainerProps extends BaseProps<'select'> {
-  /**
-   * name is optional but strongly recommended.
-   */
-  name?: string;
-}
+export interface SelectContainerProps extends BaseProps<'select'> {}
 /**
  * The SelectContainer component allows users to choose an option from a long list.
  * It is used as a parent component to wrap SelectOption component.

package/src/SelectOption/index.tsx

@@ -2,17 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface SelectOptionProps extends BaseProps<'option'> {
-  /**
-   * value is optional.
-   */
-  value?: string;
-
-  /**
-   * selected is optional.
-   */
-  selected?: boolean;
-}
+export interface SelectOptionProps extends BaseProps<'option'> {}
 /**
  * SelectOption component is used for display options value.
  * SelectOption component must be included inside Select component as children component

package/src/SingleCharacterInputItem/index.tsx

@@ -3,11 +3,6 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
 export interface SingleCharacterInputItemProps extends BaseProps<'input'> {
-  /**
-   * Name property is optional
-   * Name prop contains a single value which describes the name of the <input> element.
-   */
-  name?: string;
   /**
    * error is optional. The default value is false.
    * Use this prop when there is an error at the input.

package/src/SkipLink/index.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface LinkProps extends BaseProps<'a'> {
-  href?: string;
-}
+export interface LinkProps extends BaseProps<'a'> {}
 /**
  * Use the skip link component to help keyboard-only users skip to the main content on a page.
  */

package/src/Table/index.tsx

@@ -28,6 +28,12 @@ export interface TableProps extends BaseProps<'table'> {
    * Default value is false.
    */
   verticalBorders?: 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';
 }
 /**
  * Table component is used to wrap the sub components of a table
@@ -39,6 +45,7 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
       zebra = false,
       dense = false,
       verticalBorders = false,
+      stacked= 'never',
       className,
       children,
       ...props
@@ -51,6 +58,9 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
         ref={ref}
         className={clsx(className, {
           'govgr-table': true,
+          'govgr-table--stacked-always': stacked === 'always',
+          'govgr-table--stacked-s': stacked === 's',
+          'govgr-table--stacked-m': stacked == 'm',
           'govgr-table--dark': variant === 'dark',
           'govgr-table--light': variant === 'light',
           'govgr-table--zebra': zebra === true,

package/src/TabsListItem/index.tsx

@@ -9,11 +9,6 @@ export interface TabsListItemProps extends BaseProps<'a'> {
    * This declares that this tab is selected.
    */
   selected?: boolean;
-
-  /**
-   * href is optional.
-   */
-  href?: string;
 }
 /**
  * TabsListItem should be inside the TabsList.