@digigov/react-core 0.21.0 → 0.21.1

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>