@digigov/react-core 0.24.0 → 0.25.0

package/esm/RadioConditional/index.js

@@ -3,6 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
+import LabelContainer from '@digigov/react-core/LabelContainer';
+import FieldContainer from '@digigov/react-core/FieldContainer';
 import clsx from 'clsx';
 
 /**
@@ -19,10 +21,6 @@ export var RadioConditional = /*#__PURE__*/React.forwardRef(function RadioCondit
     as: "div",
     ref: ref,
     className: clsx(className, true && 'govgr-radios__conditional')
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: clsx(true && 'govgr-field')
-  }, /*#__PURE__*/React.createElement("label", {
-    className: clsx(true && 'govgr-label')
-  }, children)));
+  }, props), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, children)));
 });
 export default RadioConditional;

package/esm/RadioItem/index.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["name", "value", "className", "disabled", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
+import LabelContainer from '@digigov/react-core/LabelContainer';
 import clsx from 'clsx';
 
 /**
@@ -20,8 +21,8 @@ export var RadioItem = /*#__PURE__*/React.forwardRef(function RadioItem(_ref, re
 
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(className, true && 'govgr-radios__item')
-  }, /*#__PURE__*/React.createElement("label", {
-    className: clsx(disabled === true && 'govgr-radios__label--disabled', true && 'govgr-label govgr-radios__label')
+  }, /*#__PURE__*/React.createElement(LabelContainer, {
+    className: clsx(disabled === true && 'govgr-radios__label--disabled', true && 'govgr-radios__label')
   }, children, /*#__PURE__*/React.createElement(Base, _extends({
     as: "input",
     ref: ref,

package/esm/Table/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "zebra", "dense", "verticalBorders", "className", "children"];
+var _excluded = ["variant", "zebra", "dense", "verticalBorders", "stacked", "className", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -16,6 +16,8 @@ export var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
       dense = _ref$dense === void 0 ? false : _ref$dense,
       _ref$verticalBorders = _ref.verticalBorders,
       verticalBorders = _ref$verticalBorders === void 0 ? false : _ref$verticalBorders,
+      _ref$stacked = _ref.stacked,
+      stacked = _ref$stacked === void 0 ? 'never' : _ref$stacked,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -23,7 +25,7 @@ export var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "table",
     ref: ref,
-    className: clsx(className, verticalBorders === true && ['govgr-table--with-vertical-header', 'govgr-table--with-vertical-lines'], variant === 'light' && 'govgr-table--light', variant === 'dark' && 'govgr-table--dark', zebra === true && 'govgr-table--zebra', dense === true && 'govgr-table--dense', true && 'govgr-table')
+    className: clsx(className, verticalBorders === true && ['govgr-table--with-vertical-header', 'govgr-table--with-vertical-lines'], stacked === 'always' && 'govgr-table--stacked-always', variant === 'light' && 'govgr-table--light', variant === 'dark' && 'govgr-table--dark', stacked === 's' && 'govgr-table--stacked-s', stacked == 'm' && 'govgr-table--stacked-m', zebra === true && 'govgr-table--zebra', dense === true && 'govgr-table--dense', true && 'govgr-table')
   }, props), children);
 });
 export default Table;

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.24.0
+/** @license Digigov v0.25.0
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -11,7 +11,7 @@
     "directory": "dist"
   },
   "peerDependencies": {
-    "@digigov/css": "0.36.0",
+    "@digigov/css": "0.37.0",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/src/AccessibilityIcon/index.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
-export interface AccessibilityIconProps 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 AccessibilityIconProps extends SvgIconProps {}
 /**
  * Use AccessibilityIcon component when you need to show web accessibility options.
  */
@@ -27,7 +20,7 @@ export const AccessibilityIcon: React.FC<AccessibilityIconProps> = React.forward
       {...props}
     >
       <title>Μενού Προσβασιμότητας</title>
-      <circle cx="12" cy="3" r="3"/>
+      <circle cx="12" cy="3" r="3" />
       <path
         d="M19.76,6.13c-4.94,2.01-10.57,2.01-15.51,0c-0.71-0.3-1.55-0.04-1.98,0.66c-1.41,2.6,3.27,3.76,4.94,4.37
 	c0.4,0.11,0.81,0.2,1.22,0.28c0.56,0.11,0.92,0.67,0.79,1.25c-0.79,3.66-1.96,9.1-1.96,9.1c-0.46,2.27,2.72,3.15,3.39,0.92L12,17.93

package/src/AccessibilityTextIcon/index.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
-export interface AccessibilityTextIconProps 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 AccessibilityTextIconProps extends SvgIconProps {}
 /**
  * Use AccessibilityTextIcon component when you need to show web accessibility options about text.
  */

package/src/AccordionSection/index.tsx

@@ -2,13 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 export interface AccordionSectionProps extends BaseProps<'details'> {
-  /**
-   * open is optional. The default value is false.
-   * Add this prop when an AccordionSection should be open.
-   */
-  open?: boolean;
-
-  /**
+  /*
    * border is optional. The default value is true.
    * In order to remove top and bottom border, change this value to false.
    */

package/src/AccordionSectionSummary/index.tsx

@@ -2,19 +2,14 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface AccordionSectionSummaryProps extends BaseProps<'summary'> {
-  ariaLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-}
+export interface AccordionSectionSummaryProps extends BaseProps<'summary'> {}
 /**
  * AccordionSectionSummary is used as a wrapper component for AccordionSectionSummaryHeading.
  */
 export const AccordionSectionSummary = React.forwardRef<
   HTMLDivElement,
   AccordionSectionSummaryProps
->(function AccordionSectionSummary(
-  { className, ariaLevel = 2, children, ...props },
-  ref
-) {
+>(function AccordionSectionSummary({ className, children, ...props }, ref) {
   return (
     <Base
       as="summary"
@@ -23,7 +18,6 @@ export const AccordionSectionSummary = React.forwardRef<
         'govgr-accordion__section-summary': true,
       })}
       role="heading"
-      aria-level={ariaLevel}
       {...props}
     >
       {children}

package/src/ArrowIcon/index.tsx

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

package/src/BackLink/index.tsx

@@ -2,18 +2,13 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 import CaretIcon from '@digigov/react-core/CaretIcon';
-export interface BackLinkProps extends BaseProps<'a'> {
-  /**
-   * href is optional.
-   */
-  href?: string;
-}
+export interface BackLinkProps extends BaseProps<'a'> {}
 /**
  * Use BackLink component to help users go back to the previous page in a multi-page transaction.
  */
 export const BackLink = React.forwardRef<HTMLAnchorElement, BackLinkProps>(
   function BackLink(
-    { href, tabIndex = 0, printHidden= true, className, children, ...props },
+    { href, tabIndex = 0, printHidden = true, className, children, ...props },
     ref
   ) {
     return (

package/src/Base/index.tsx

@@ -18,7 +18,7 @@ type PolymorphicComponentProp<
 type PolymorphicComponentPropWithRef<
   C extends React.ElementType,
   Props = Record<string, unknown>
-> = PolymorphicComponentProp<C, Props> & { ref?: PolymorphicRef<C> };
+> = PolymorphicComponentProp<C, Props> & { ref?: any };
 
 // This is the type for the "ref" only
 type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<

package/src/BurgerIcon/index.tsx

@@ -2,12 +2,6 @@ import React from 'react';
 import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
 export interface BurgerIconProps 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/Button/index.tsx

@@ -11,11 +11,6 @@ export interface ButtonProps extends BaseProps<'button'> {
    * The default value is 'primary'.
    */
   color?: 'primary' | 'secondary' | 'warning';
-
-  /**
-   * disabled is optional.
-   */
-  disabled?: boolean;
   /**
    * variant is optional.
    */
@@ -30,7 +25,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       color = 'primary',
       variant = 'button',
       disabled,
-      printHidden = true, 
+      printHidden = true,
       className,
       children,
       ...props

package/src/CallToAction/index.tsx

@@ -3,16 +3,17 @@ import clsx from 'clsx';
 import ButtonLink, { ButtonLinkProps } from '@digigov/react-core/ButtonLink';
 import ArrowIcon from '@digigov/react-core/ArrowIcon';
 
-export interface CallToActionProps extends ButtonLinkProps {
-  ref?: React.Ref<HTMLAnchorElement>;
-}
+export interface CallToActionProps extends ButtonLinkProps {}
 /**
  * Use this button for the main call to action on your service’s start page.
  */
 export const CallToAction = React.forwardRef<
   HTMLAnchorElement,
   CallToActionProps
->(function CallToAction({ printHidden = true, className, children, ...props }, ref) {
+>(function CallToAction(
+  { printHidden = true, className, children, ...props },
+  ref
+) {
   return (
     <ButtonLink
       ref={ref}

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,
       })}