@digigov/react-core 0.23.1 → 0.25.0

package/es/index.js

@@ -24,6 +24,7 @@ export * from '@digigov/react-core/Card';
 export * from '@digigov/react-core/CardAction';
 export * from '@digigov/react-core/CardHeading';
 export * from '@digigov/react-core/CardText';
+export * from '@digigov/react-core/CaretContainer';
 export * from '@digigov/react-core/CaretIcon';
 export * from '@digigov/react-core/Checkbox';
 export * from '@digigov/react-core/CheckboxConditional';

package/es/registry.js

@@ -25,6 +25,7 @@ import * as _digigov_react_core_Card from '@digigov/react-core/Card';
 import * as _digigov_react_core_CardAction from '@digigov/react-core/CardAction';
 import * as _digigov_react_core_CardHeading from '@digigov/react-core/CardHeading';
 import * as _digigov_react_core_CardText from '@digigov/react-core/CardText';
+import * as _digigov_react_core_CaretContainer from '@digigov/react-core/CaretContainer';
 import * as _digigov_react_core_CaretIcon from '@digigov/react-core/CaretIcon';
 import * as _digigov_react_core_Checkbox from '@digigov/react-core/Checkbox';
 import * as _digigov_react_core_CheckboxConditional from '@digigov/react-core/CheckboxConditional';
@@ -203,6 +204,7 @@ export default {
   '@digigov/react-core/CardAction': lazyImport(_digigov_react_core_CardAction),
   '@digigov/react-core/CardHeading': lazyImport(_digigov_react_core_CardHeading),
   '@digigov/react-core/CardText': lazyImport(_digigov_react_core_CardText),
+  '@digigov/react-core/CaretContainer': lazyImport(_digigov_react_core_CaretContainer),
   '@digigov/react-core/CaretIcon': lazyImport(_digigov_react_core_CaretIcon),
   '@digigov/react-core/Checkbox': lazyImport(_digigov_react_core_Checkbox),
   '@digigov/react-core/CheckboxConditional': lazyImport(_digigov_react_core_CheckboxConditional),

package/esm/AccordionSectionSummary/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "ariaLevel", "children"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -10,8 +10,6 @@ import clsx from 'clsx';
  */
 export var AccordionSectionSummary = /*#__PURE__*/React.forwardRef(function AccordionSectionSummary(_ref, ref) {
   var className = _ref.className,
-      _ref$ariaLevel = _ref.ariaLevel,
-      ariaLevel = _ref$ariaLevel === void 0 ? 2 : _ref$ariaLevel,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -19,8 +17,7 @@ export var AccordionSectionSummary = /*#__PURE__*/React.forwardRef(function Acco
     as: "summary",
     ref: ref,
     className: clsx(className, true && 'govgr-accordion__section-summary'),
-    role: "heading",
-    "aria-level": ariaLevel
+    role: "heading"
   }, props), children);
 });
 export default AccordionSectionSummary;

package/esm/CaretContainer/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CaretContainer with no props 1`] = `
+<ForwardRef(CaretContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-caret-container"
+  >
+    <div
+      className="govgr-caret-container"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(CaretContainer)>
+`;

package/esm/CaretContainer/index.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import Base from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+/**
+ *
+ * Use CaretContainer to wrap CaretIcon like ascending descending style.
+ *
+ */
+export var CaretContainer = /*#__PURE__*/React.forwardRef(function CaretContainer(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    as: "div",
+    ref: ref,
+    className: clsx(className, true && 'govgr-caret-container')
+  }, props), children);
+});
+export default CaretContainer;

package/esm/CaretContainer/index.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import CaretContainer from '@digigov/react-core/CaretContainer';
+
+var _ref = /*#__PURE__*/React.createElement(CaretContainer, null, "hello");
+
+it('renders the CaretContainer with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/esm/CheckboxConditional/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 CheckboxConditional = /*#__PURE__*/React.forwardRef(function Checkbox
     as: "div",
     ref: ref,
     className: clsx(className, true && 'govgr-checkboxes__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 CheckboxConditional;

package/esm/CheckboxItem/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';
 
 /**
@@ -14,15 +15,14 @@ export var CheckboxItem = /*#__PURE__*/React.forwardRef(function CheckboxItem(_r
   var name = _ref.name,
       value = _ref.value,
       className = _ref.className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      disabled = _ref.disabled,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(className, true && 'govgr-checkboxes__item')
-  }, /*#__PURE__*/React.createElement("label", {
-    className: clsx(disabled === true && 'govgr-checkboxes__label--disabled', true && 'govgr-label govgr-checkboxes__label')
+  }, /*#__PURE__*/React.createElement(LabelContainer, {
+    className: clsx(disabled === true && 'govgr-checkboxes__label--disabled', true && 'govgr-checkboxes__label')
   }, children, /*#__PURE__*/React.createElement(Base, _extends({
     as: "input",
     ref: ref,

package/esm/FooterLink/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "className", "children"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -9,14 +9,12 @@ import clsx from 'clsx';
  * FooterLink in used inside the Footer component.
  */
 export var FooterLink = /*#__PURE__*/React.forwardRef(function FooterLink(_ref, ref) {
-  var href = _ref.href,
-      className = _ref.className,
+  var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "a",
-    href: href,
     ref: ref,
     className: clsx(className, true && 'govgr-footer__link')
   }, props), children);

package/esm/HeaderTitle/index.js

@@ -17,8 +17,8 @@ export var HeaderTitle = /*#__PURE__*/React.forwardRef(function HeaderTitle(_ref
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "a",
-    href: href,
     ref: ref,
+    href: href,
     className: clsx(className, true && 'govgr-header-title')
   }, props), children);
 });

package/esm/NotificationBannerLink/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "className", "children"];
+var _excluded = ["className", "href", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -11,9 +11,9 @@ import clsx from 'clsx';
  * NotificationBannerLink must be wrapped inside NotificationContent component as children
  */
 export var NotificationBannerLink = /*#__PURE__*/React.forwardRef(function NotificationBannerLink(_ref, ref) {
-  var _ref$href = _ref.href,
+  var className = _ref.className,
+      _ref$href = _ref.href,
       href = _ref$href === void 0 ? '#' : _ref$href,
-      className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 

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.23.1
+/** @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.
@@ -29,6 +29,7 @@ export * from '@digigov/react-core/Card';
 export * from '@digigov/react-core/CardAction';
 export * from '@digigov/react-core/CardHeading';
 export * from '@digigov/react-core/CardText';
+export * from '@digigov/react-core/CaretContainer';
 export * from '@digigov/react-core/CaretIcon';
 export * from '@digigov/react-core/Checkbox';
 export * from '@digigov/react-core/CheckboxConditional';

package/esm/registry.js

@@ -25,6 +25,7 @@ import * as _digigov_react_core_Card from '@digigov/react-core/Card';
 import * as _digigov_react_core_CardAction from '@digigov/react-core/CardAction';
 import * as _digigov_react_core_CardHeading from '@digigov/react-core/CardHeading';
 import * as _digigov_react_core_CardText from '@digigov/react-core/CardText';
+import * as _digigov_react_core_CaretContainer from '@digigov/react-core/CaretContainer';
 import * as _digigov_react_core_CaretIcon from '@digigov/react-core/CaretIcon';
 import * as _digigov_react_core_Checkbox from '@digigov/react-core/Checkbox';
 import * as _digigov_react_core_CheckboxConditional from '@digigov/react-core/CheckboxConditional';
@@ -203,6 +204,7 @@ export default {
   '@digigov/react-core/CardAction': lazyImport(_digigov_react_core_CardAction),
   '@digigov/react-core/CardHeading': lazyImport(_digigov_react_core_CardHeading),
   '@digigov/react-core/CardText': lazyImport(_digigov_react_core_CardText),
+  '@digigov/react-core/CaretContainer': lazyImport(_digigov_react_core_CaretContainer),
   '@digigov/react-core/CaretIcon': lazyImport(_digigov_react_core_CaretIcon),
   '@digigov/react-core/Checkbox': lazyImport(_digigov_react_core_Checkbox),
   '@digigov/react-core/CheckboxConditional': lazyImport(_digigov_react_core_CheckboxConditional),

package/index.d.ts

@@ -24,6 +24,7 @@ export * from '@digigov/react-core/Card';
 export * from '@digigov/react-core/CardAction';
 export * from '@digigov/react-core/CardHeading';
 export * from '@digigov/react-core/CardText';
+export * from '@digigov/react-core/CaretContainer';
 export * from '@digigov/react-core/CaretIcon';
 export * from '@digigov/react-core/Checkbox';
 export * from '@digigov/react-core/CheckboxConditional';

package/index.js

@@ -342,6 +342,19 @@ Object.keys(_CardText).forEach(function (key) {
   });
 });
 
+var _CaretContainer = require("@digigov/react-core/CaretContainer");
+
+Object.keys(_CaretContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CaretContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CaretContainer[key];
+    }
+  });
+});
+
 var _CaretIcon = require("@digigov/react-core/CaretIcon");
 
 Object.keys(_CaretIcon).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "0.23.1",
+  "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.35.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/registry.d.ts

@@ -26,6 +26,7 @@ declare var _default: {
     '@digigov/react-core/CardAction': {};
     '@digigov/react-core/CardHeading': {};
     '@digigov/react-core/CardText': {};
+    '@digigov/react-core/CaretContainer': {};
     '@digigov/react-core/CaretIcon': {};
     '@digigov/react-core/Checkbox': {};
     '@digigov/react-core/CheckboxConditional': {};

package/registry.js

@@ -61,6 +61,8 @@ var _digigov_react_core_CardHeading = _interopRequireWildcard(require("@digigov/
 
 var _digigov_react_core_CardText = _interopRequireWildcard(require("@digigov/react-core/CardText"));
 
+var _digigov_react_core_CaretContainer = _interopRequireWildcard(require("@digigov/react-core/CaretContainer"));
+
 var _digigov_react_core_CaretIcon = _interopRequireWildcard(require("@digigov/react-core/CaretIcon"));
 
 var _digigov_react_core_Checkbox = _interopRequireWildcard(require("@digigov/react-core/Checkbox"));
@@ -377,6 +379,7 @@ var _default = {
   '@digigov/react-core/CardAction': lazyImport(_digigov_react_core_CardAction),
   '@digigov/react-core/CardHeading': lazyImport(_digigov_react_core_CardHeading),
   '@digigov/react-core/CardText': lazyImport(_digigov_react_core_CardText),
+  '@digigov/react-core/CaretContainer': lazyImport(_digigov_react_core_CaretContainer),
   '@digigov/react-core/CaretIcon': lazyImport(_digigov_react_core_CaretIcon),
   '@digigov/react-core/Checkbox': lazyImport(_digigov_react_core_Checkbox),
   '@digigov/react-core/CheckboxConditional': lazyImport(_digigov_react_core_CheckboxConditional),

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/CaretContainer/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CaretContainer with no props 1`] = `
+<ForwardRef(CaretContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-caret-container"
+  >
+    <div
+      className="govgr-caret-container"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(CaretContainer)>
+`;

package/src/CaretContainer/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import CaretContainer from '@digigov/react-core/CaretContainer';
+
+it('renders the CaretContainer with no props', () => {
+  expect(mount(<CaretContainer>hello</CaretContainer>)).toMatchSnapshot();
+});

package/src/CaretContainer/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface CaretContainerProps extends BaseProps<'div'> {}
+/**
+ *
+ * Use CaretContainer to wrap CaretIcon like ascending descending style.
+ *
+ */
+export const CaretContainer = React.forwardRef<
+  HTMLDivElement,
+  CaretContainerProps
+>(function CaretContainer({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-caret-container': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default CaretContainer;