@digigov/react-core 0.20.1 → 0.21.1

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

@@ -14,11 +14,13 @@ exports[`renders the RadioItem  value props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
         type="radio"
         value="someValue"
       >
         <input
           className="govgr-radios__input"
+          disabled={false}
           type="radio"
           value="someValue"
         />
@@ -28,6 +30,34 @@ exports[`renders the RadioItem  value props 1`] = `
 </ForwardRef(RadioItem)>
 `;
 
+exports[`renders the RadioItem with disabled prop 1`] = `
+<ForwardRef(RadioItem)
+  disabled={true}
+>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-radios__label--disabled govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        disabled={true}
+        type="radio"
+      >
+        <input
+          className="govgr-radios__input"
+          disabled={true}
+          type="radio"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
 exports[`renders the RadioItem with name  props 1`] = `
 <ForwardRef(RadioItem)
   name="name"
@@ -42,11 +72,13 @@ exports[`renders the RadioItem with name  props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
         name="name"
         type="radio"
       >
         <input
           className="govgr-radios__input"
+          disabled={false}
           name="name"
           type="radio"
         />
@@ -71,12 +103,48 @@ exports[`renders the RadioItem with name and value props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
+        name="name"
+        type="radio"
+        value="someValue"
+      >
+        <input
+          className="govgr-radios__input"
+          disabled={false}
+          name="name"
+          type="radio"
+          value="someValue"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
+exports[`renders the RadioItem with name disabled and value props 1`] = `
+<ForwardRef(RadioItem)
+  disabled={true}
+  name="name"
+  value="someValue"
+>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-radios__label--disabled govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        disabled={true}
         name="name"
         type="radio"
         value="someValue"
       >
         <input
           className="govgr-radios__input"
+          disabled={true}
           name="name"
           type="radio"
           value="someValue"
@@ -99,10 +167,12 @@ exports[`renders the RadioItem with no props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
         type="radio"
       >
         <input
           className="govgr-radios__input"
+          disabled={false}
           type="radio"
         />
       </ForwardRef(Base)>

package/esm/RadioItem/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "value", "className", "children"];
+var _excluded = ["name", "value", "className", "disabled", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -13,20 +13,23 @@ export var RadioItem = /*#__PURE__*/React.forwardRef(function RadioItem(_ref, re
   var name = _ref.name,
       value = _ref.value,
       className = _ref.className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(className, true && 'govgr-radios__item')
   }, /*#__PURE__*/React.createElement("label", {
-    className: clsx(true && 'govgr-label govgr-radios__label')
+    className: clsx(disabled === true && 'govgr-radios__label--disabled', true && 'govgr-label govgr-radios__label')
   }, children, /*#__PURE__*/React.createElement(Base, _extends({
     as: "input",
     ref: ref,
     type: "radio",
     name: name,
     value: value,
-    className: clsx(true && 'govgr-radios__input')
+    className: clsx(true && 'govgr-radios__input'),
+    disabled: disabled
   }, props))));
 });
 export default RadioItem;

package/esm/RadioItem/index.test.js

@@ -31,4 +31,22 @@ var _ref4 = /*#__PURE__*/React.createElement(RadioItem, {
 
 it('renders the RadioItem with name and value props', function () {
   expect(mount(_ref4)).toMatchSnapshot();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(RadioItem, {
+  disabled: true
+}, "hello");
+
+it('renders the RadioItem with disabled prop', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(RadioItem, {
+  name: 'name',
+  value: 'someValue',
+  disabled: true
+}, "hello");
+
+it('renders the RadioItem with name disabled and value props', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
 });

package/esm/TableBody/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["verticalAlign", "className", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -9,14 +9,16 @@ import clsx from 'clsx';
  * Use TableBody inside the Table component to provide for the table data.
  */
 export var TableBody = /*#__PURE__*/React.forwardRef(function TableBody(_ref, ref) {
-  var className = _ref.className,
+  var _ref$verticalAlign = _ref.verticalAlign,
+      verticalAlign = _ref$verticalAlign === void 0 ? 'middle' : _ref$verticalAlign,
+      className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "tbody",
     ref: ref,
-    className: clsx(className, true && 'govgr-table__body')
+    className: clsx(className, verticalAlign === 'bottom' && 'govgr-table__body--vertical-bottom', verticalAlign === 'top' && 'govgr-table__body--vertical-top', true && 'govgr-table__body')
   }, props), children);
 });
 export default TableBody;

package/esm/TableRow/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["warning", "className", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -9,14 +9,16 @@ import clsx from 'clsx';
  * Use TableRow inside the Table component to provide a new row to the table.
  */
 export var TableRow = /*#__PURE__*/React.forwardRef(function TableRow(_ref, ref) {
-  var className = _ref.className,
+  var _ref$warning = _ref.warning,
+      warning = _ref$warning === void 0 ? false : _ref$warning,
+      className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "tr",
     ref: ref,
-    className: clsx(className, true && 'govgr-table__row')
+    className: clsx(className, warning && 'govgr-table__row--warning', true && 'govgr-table__row')
   }, props), children);
 });
 export default TableRow;

package/esm/Unpurge/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 function Unpurge() {
   return /*#__PURE__*/React.createElement("div", {
-    className: "\n    govgr-m-0 \n    govgr-mt-0 \n    govgr-mb-0 \n    govgr-mr-0 \n    govgr-ml-0 \n    govgr-p-0 \n    govgr-pt-0 \n    govgr-pb-0 \n    govgr-pr-0 \n    govgr-pl-0 \n    govgr-m-1 \n    govgr-mt-1 \n    govgr-mb-1 \n    govgr-mr-1 \n    govgr-ml-1 \n    govgr-p-1 \n    govgr-pt-1 \n    govgr-pb-1 \n    govgr-pr-1 \n    govgr-pl-1 \n    govgr-m-2 \n    govgr-mt-2 \n    govgr-mb-2 \n    govgr-mr-2 \n    govgr-ml-2 \n    govgr-p-2 \n    govgr-pt-2 \n    govgr-pb-2 \n    govgr-pr-2 \n    govgr-pl-2 \n    govgr-m-3 \n    govgr-mt-3 \n    govgr-mb-3 \n    govgr-mr-3 \n    govgr-ml-3 \n    govgr-p-3 \n    govgr-pt-3 \n    govgr-pb-3 \n    govgr-pr-3 \n    govgr-pl-3 \n    govgr-m-4 \n    govgr-mt-4 \n    govgr-mb-4 \n    govgr-mr-4 \n    govgr-ml-4 \n    govgr-p-4 \n    govgr-pt-4 \n    govgr-pb-4 \n    govgr-pr-4 \n    govgr-pl-4 \n    govgr-m-5 \n    govgr-mt-5 \n    govgr-mb-5 \n    govgr-mr-5 \n    govgr-ml-5 \n    govgr-p-5 \n    govgr-pt-5 \n    govgr-pb-5 \n    govgr-pr-5 \n    govgr-pl-5 \n    govgr-m-6 \n    govgr-mt-6 \n    govgr-mb-6 \n    govgr-mr-6 \n    govgr-ml-6 \n    govgr-p-6 \n    govgr-pt-6 \n    govgr-pb-6 \n    govgr-pr-6 \n    govgr-pl-6 \n    govgr-m-7 \n    govgr-mt-7 \n    govgr-mb-7 \n    govgr-mr-7 \n    govgr-ml-7 \n    govgr-p-7 \n    govgr-pt-7 \n    govgr-pb-7 \n    govgr-pr-7 \n    govgr-pl-7 \n    govgr-m-8 \n    govgr-mt-8 \n    govgr-mb-8 \n    govgr-mr-8 \n    govgr-ml-8 \n    govgr-p-8 \n    govgr-pt-8 \n    govgr-pb-8 \n    govgr-pr-8 \n    govgr-pl-8 \n    govgr-m-9 \n    govgr-mt-9 \n    govgr-mb-9 \n    govgr-mr-9 \n    govgr-ml-9 \n    govgr-p-9 \n    govgr-pt-9 \n    govgr-pb-9 \n    govgr-pr-9 \n    govgr-pl-9 \n    govgr-print-hidden\n    "
+    className: "\n    govgr-m-0 \n    govgr-mt-0 \n    govgr-mb-0 \n    govgr-mr-0 \n    govgr-ml-0 \n    govgr-p-0 \n    govgr-pt-0 \n    govgr-pb-0 \n    govgr-pr-0 \n    govgr-pl-0 \n    govgr-m-1 \n    govgr-mt-1 \n    govgr-mb-1 \n    govgr-mr-1 \n    govgr-ml-1 \n    govgr-p-1 \n    govgr-pt-1 \n    govgr-pb-1 \n    govgr-pr-1 \n    govgr-pl-1 \n    govgr-m-2 \n    govgr-mt-2 \n    govgr-mb-2 \n    govgr-mr-2 \n    govgr-ml-2 \n    govgr-p-2 \n    govgr-pt-2 \n    govgr-pb-2 \n    govgr-pr-2 \n    govgr-pl-2 \n    govgr-m-3 \n    govgr-mt-3 \n    govgr-mb-3 \n    govgr-mr-3 \n    govgr-ml-3 \n    govgr-p-3 \n    govgr-pt-3 \n    govgr-pb-3 \n    govgr-pr-3 \n    govgr-pl-3 \n    govgr-m-4 \n    govgr-mt-4 \n    govgr-mb-4 \n    govgr-mr-4 \n    govgr-ml-4 \n    govgr-p-4 \n    govgr-pt-4 \n    govgr-pb-4 \n    govgr-pr-4 \n    govgr-pl-4 \n    govgr-m-5 \n    govgr-mt-5 \n    govgr-mb-5 \n    govgr-mr-5 \n    govgr-ml-5 \n    govgr-p-5 \n    govgr-pt-5 \n    govgr-pb-5 \n    govgr-pr-5 \n    govgr-pl-5 \n    govgr-m-6 \n    govgr-mt-6 \n    govgr-mb-6 \n    govgr-mr-6 \n    govgr-ml-6 \n    govgr-p-6 \n    govgr-pt-6 \n    govgr-pb-6 \n    govgr-pr-6 \n    govgr-pl-6 \n    govgr-m-7 \n    govgr-mt-7 \n    govgr-mb-7 \n    govgr-mr-7 \n    govgr-ml-7 \n    govgr-p-7 \n    govgr-pt-7 \n    govgr-pb-7 \n    govgr-pr-7 \n    govgr-pl-7 \n    govgr-m-8 \n    govgr-mt-8 \n    govgr-mb-8 \n    govgr-mr-8 \n    govgr-ml-8 \n    govgr-m-9 \n    govgr-mt-9 \n    govgr-mb-9 \n    govgr-mr-9 \n    govgr-ml-9 \n    govgr-m-10 \n    govgr-mt-10 \n    govgr-mb-10 \n    govgr-mr-10 \n    govgr-ml-10 \n    govgr-m-11 \n    govgr-mt-11 \n    govgr-mb-11 \n    govgr-mr-11 \n    govgr-ml-11 \n    govgr-m-12 \n    govgr-mt-12 \n    govgr-mb-12 \n    govgr-mr-12 \n    govgr-ml-12 \n    govgr-p-8 \n    govgr-pt-8 \n    govgr-pb-8 \n    govgr-pr-8 \n    govgr-pl-8 \n    govgr-p-9 \n    govgr-pt-9 \n    govgr-pb-9 \n    govgr-pr-9 \n    govgr-pl-9 \n    govgr-p-10\n    govgr-pt-10\n    govgr-pb-10\n    govgr-pr-10\n    govgr-pl-10\n    govgr-p-11\n    govgr-pt-11\n    govgr-pb-11\n    govgr-pr-11\n    govgr-pl-11\n    govgr-p-12\n    govgr-pt-12\n    govgr-pb-12\n    govgr-pr-12\n    govgr-pl-12\n    govgr-print-hidden\n    "
   });
 }
 

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.20.1
+/** @license Digigov v0.21.1
  *
  * 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.20.1",
+  "version": "0.21.1",
   "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.32.1",
+    "@digigov/css": "0.33.1",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/src/AccordionSection/index.tsx

@@ -7,6 +7,12 @@ export interface AccordionSectionProps extends BaseProps<'details'> {
    * 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.
+   */
+  border?: boolean;
 }
 /**
  * AccordionSection should be inside the Accordion component.
@@ -17,13 +23,17 @@ export interface AccordionSectionProps extends BaseProps<'details'> {
 export const AccordionSection = React.forwardRef<
   HTMLDetailsElement,
   AccordionSectionProps
->(function AccordionSection({ className, children, ...props }, ref) {
+>(function AccordionSection(
+  { className, border = true, children, ...props },
+  ref
+) {
   return (
     <Base
       as="details"
       ref={ref}
       className={clsx(className, {
         'govgr-accordion__section': true,
+        'govgr-accordion__section--no-border': !border,
       })}
       {...props}
     >

package/src/CheckboxItem/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
+<ForwardRef(CheckboxItem)
+  disabled={true}
+>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <label
+      className="govgr-checkboxes__label--disabled govgr-label govgr-checkboxes__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-checkboxes__input"
+        disabled={true}
+        type="checkbox"
+      >
+        <input
+          className="govgr-checkboxes__input"
+          disabled={true}
+          type="checkbox"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
 exports[`renders the CheckboxItem with \`name\` prop 1`] = `
 <ForwardRef(CheckboxItem)
   name="example"
@@ -14,13 +42,49 @@ exports[`renders the CheckboxItem with \`name\` prop 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-checkboxes__input"
+        disabled={false}
+        name="example"
+        type="checkbox"
+      >
+        <input
+          className="govgr-checkboxes__input"
+          disabled={false}
+          name="example"
+          type="checkbox"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
+exports[`renders the CheckboxItem with \`value\` \`name\` and \`disabled\` props 1`] = `
+<ForwardRef(CheckboxItem)
+  disabled={true}
+  name="example"
+  value="example"
+>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <label
+      className="govgr-checkboxes__label--disabled govgr-label govgr-checkboxes__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-checkboxes__input"
+        disabled={true}
         name="example"
         type="checkbox"
+        value="example"
       >
         <input
           className="govgr-checkboxes__input"
+          disabled={true}
           name="example"
           type="checkbox"
+          value="example"
         />
       </ForwardRef(Base)>
     </label>
@@ -42,11 +106,13 @@ exports[`renders the CheckboxItem with \`value\` prop 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-checkboxes__input"
+        disabled={false}
         type="checkbox"
         value="example"
       >
         <input
           className="govgr-checkboxes__input"
+          disabled={false}
           type="checkbox"
           value="example"
         />
@@ -68,10 +134,12 @@ exports[`renders the CheckboxItem with no props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-checkboxes__input"
+        disabled={false}
         type="checkbox"
       >
         <input
           className="govgr-checkboxes__input"
+          disabled={false}
           type="checkbox"
         />
       </ForwardRef(Base)>

package/src/CheckboxItem/index.test.tsx

@@ -17,3 +17,17 @@ it('renders the CheckboxItem with `value` prop', () => {
     mount(<CheckboxItem value="example">hello</CheckboxItem>)
   ).toMatchSnapshot();
 });
+
+it('renders the CheckboxItem with `disabled` prop', () => {
+  expect(mount(<CheckboxItem disabled>hello</CheckboxItem>)).toMatchSnapshot();
+});
+
+it('renders the CheckboxItem with `value` `name` and `disabled` props', () => {
+  expect(
+    mount(
+      <CheckboxItem value="example" name="example" disabled>
+        hello
+      </CheckboxItem>
+    )
+  ).toMatchSnapshot();
+});

package/src/CheckboxItem/index.tsx

@@ -12,6 +12,11 @@ export interface CheckboxItemProps extends BaseProps<'input'> {
    * 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;
 }
 /**
  * Details for the CheckboxItem.
@@ -21,7 +26,10 @@ export interface CheckboxItemProps extends BaseProps<'input'> {
 export const CheckboxItem = React.forwardRef<
   HTMLInputElement,
   CheckboxItemProps
->(function CheckboxItem({ name, value, className, children, ...props }, ref) {
+>(function CheckboxItem(
+  { name, value, className, disabled = false, children, ...props },
+  ref
+) {
   return (
     <div
       className={clsx(className, {
@@ -31,6 +39,7 @@ export const CheckboxItem = React.forwardRef<
       <label
         className={clsx({
           'govgr-label govgr-checkboxes__label': true,
+          'govgr-checkboxes__label--disabled': disabled === true,
         })}
       >
         {children}
@@ -43,6 +52,7 @@ export const CheckboxItem = React.forwardRef<
           className={clsx({
             'govgr-checkboxes__input': true,
           })}
+          disabled={disabled}
           {...props}
         />
       </label>

package/src/RadioItem/__snapshots__/index.test.tsx.snap

@@ -14,11 +14,13 @@ exports[`renders the RadioItem  value props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
         type="radio"
         value="someValue"
       >
         <input
           className="govgr-radios__input"
+          disabled={false}
           type="radio"
           value="someValue"
         />
@@ -28,6 +30,34 @@ exports[`renders the RadioItem  value props 1`] = `
 </ForwardRef(RadioItem)>
 `;
 
+exports[`renders the RadioItem with disabled prop 1`] = `
+<ForwardRef(RadioItem)
+  disabled={true}
+>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-radios__label--disabled govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        disabled={true}
+        type="radio"
+      >
+        <input
+          className="govgr-radios__input"
+          disabled={true}
+          type="radio"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
 exports[`renders the RadioItem with name  props 1`] = `
 <ForwardRef(RadioItem)
   name="name"
@@ -42,11 +72,13 @@ exports[`renders the RadioItem with name  props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
         name="name"
         type="radio"
       >
         <input
           className="govgr-radios__input"
+          disabled={false}
           name="name"
           type="radio"
         />
@@ -71,12 +103,48 @@ exports[`renders the RadioItem with name and value props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
+        name="name"
+        type="radio"
+        value="someValue"
+      >
+        <input
+          className="govgr-radios__input"
+          disabled={false}
+          name="name"
+          type="radio"
+          value="someValue"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
+exports[`renders the RadioItem with name disabled and value props 1`] = `
+<ForwardRef(RadioItem)
+  disabled={true}
+  name="name"
+  value="someValue"
+>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-radios__label--disabled govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        disabled={true}
         name="name"
         type="radio"
         value="someValue"
       >
         <input
           className="govgr-radios__input"
+          disabled={true}
           name="name"
           type="radio"
           value="someValue"
@@ -99,10 +167,12 @@ exports[`renders the RadioItem with no props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
         type="radio"
       >
         <input
           className="govgr-radios__input"
+          disabled={false}
           type="radio"
         />
       </ForwardRef(Base)>

package/src/RadioItem/index.test.tsx

@@ -26,3 +26,17 @@ it('renders the RadioItem with name and value props', () => {
     )
   ).toMatchSnapshot();
 });
+
+it('renders the RadioItem with disabled prop', () => {
+  expect(mount(<RadioItem disabled>hello</RadioItem>)).toMatchSnapshot();
+});
+
+it('renders the RadioItem with name disabled and value props', () => {
+  expect(
+    mount(
+      <RadioItem name={'name'} value={'someValue'} disabled>
+        hello
+      </RadioItem>
+    )
+  ).toMatchSnapshot();
+});

package/src/RadioItem/index.tsx

@@ -12,13 +12,21 @@ export interface RadioItemProps extends BaseProps<'input'> {
    * 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;
 }
 /**
  * RadioItem component is used for display radio buttons.
  * RadioItem component must be included inside Radio component, as a children component.
  */
 export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
-  function RadioItem({ name, value, className, children, ...props }, ref) {
+  function RadioItem(
+    { name, value, className, disabled = false, children, ...props },
+    ref
+  ) {
     return (
       <div
         className={clsx(className, {
@@ -28,6 +36,7 @@ export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
         <label
           className={clsx({
             'govgr-label govgr-radios__label': true,
+            'govgr-radios__label--disabled': disabled === true,
           })}
         >
           {children}
@@ -40,6 +49,7 @@ export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
             className={clsx({
               'govgr-radios__input': true,
             })}
+            disabled={disabled}
             {...props}
           />
         </label>