From 84cc218a2bf093119c46714a34689979be1c6bb5 Mon Sep 17 00:00:00 2001
From: johnnadeluy <johnnadel.salita@gmail.com>
Date: Mon, 20 Mar 2023 14:53:26 +0100
Subject: [PATCH 1/5] Adds optional id to RadioButton and RadioGroup Updates
 documentation

MIMIR-1550
---
 package-lock.json                    | 4 ++--
 src/components/RadioButton/README.md | 3 ++-
 src/components/RadioButton/index.jsx | 5 +++--
 src/components/RadioGroup/README.md  | 9 ++++++---
 src/components/RadioGroup/index.jsx  | 2 ++
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6cf47266..ccb47153 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.0.76",
+  "version": "2.0.79",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@statisticsnorway/ssb-component-library",
-      "version": "2.0.76",
+      "version": "2.0.79",
       "license": "Apache-2.0",
       "dependencies": {
         "prismjs": "^1.29.0",
diff --git a/src/components/RadioButton/README.md b/src/components/RadioButton/README.md
index f282614d..a078bd82 100644
--- a/src/components/RadioButton/README.md
+++ b/src/components/RadioButton/README.md
@@ -9,7 +9,7 @@ RadioButton
 
 ```html
 <div class="ssb-radio">
-    <input tabindex="0" id="item" type="radio" value="item">
+    <input tabindex="0" id="item-id" type="radio" value="item">
     <label class="radio-label" for="item">Item</label>
 </div>
 ```
@@ -38,3 +38,4 @@ Available props:
 | selected | bool | Selected state of checkbox |
 | tabIndex | number | Tab index for focus |
 | value | Required number or string | Input field value |
+| id | string | Optional id |
diff --git a/src/components/RadioButton/index.jsx b/src/components/RadioButton/index.jsx
index 4f50e2fa..589a9cc3 100644
--- a/src/components/RadioButton/index.jsx
+++ b/src/components/RadioButton/index.jsx
@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const RadioButton = ({
-	callback, children, className, disabled, name, selected, tabIndex, value,
+	callback, children, className, disabled, name, selected, tabIndex, value, id,
 }) => (
 	<div className={`ssb-radio${className ? ` ${className}` : ''}`}>
 		<input
 			tabIndex={tabIndex}
 			checked={selected}
-			id={value}
+			id={id ?? value}
 			name={name}
 			disabled={disabled}
 			onChange={() => callback(value)}
@@ -37,6 +37,7 @@ RadioButton.propTypes = {
 		PropTypes.string,
 		PropTypes.number,
 	]).isRequired,
+	id: PropTypes.string,
 };
 
 export default RadioButton;
diff --git a/src/components/RadioGroup/README.md b/src/components/RadioGroup/README.md
index 116abd27..65874d84 100644
--- a/src/components/RadioGroup/README.md
+++ b/src/components/RadioGroup/README.md
@@ -13,15 +13,15 @@ RadioGroup
 	<!-- Use flex-row If horizontal layout -->
     <div class="boxes flex-column">
         <div class="ssb-radio">
-            <input tabindex="0" id="item1" type="radio" value="item1">
+            <input tabindex="0" id="item-1" type="radio" value="item1">
             <label class="radio-label" for="item1">Item 1</label>
         </div>
         <div class="ssb-radio">
-            <input tabindex="0" id="item2" type="radio" value="item2">
+            <input tabindex="0" id="item-2" type="radio" value="item2">
             <label class="radio-label" for="item2">Item 2</label>
         </div>
         <div class="ssb-radio">
-            <input tabindex="0" id="item3" disabled="" type="radio" value="item3">
+            <input tabindex="0" id="item-3" disabled="" type="radio" value="item3">
             <label class="radio-label" for="item3">Item 3</label>
         </div>
     </div>
@@ -33,12 +33,15 @@ RadioGroup
 ```jsx harmony
 const radioItems = [
 	{
+        id: 'item-1',
 		label: 'Item 1',
 		value: 'item1',
 	}, {
+        id: 'item-2',
 		label: 'Item 2',
 		value: 'item2',
 	}, {
+        id: 'item-3',
 		label: 'Item 3',
 		value: 'item3',
 		disabled: 'true',
diff --git a/src/components/RadioGroup/index.jsx b/src/components/RadioGroup/index.jsx
index 5f62bd8d..fbae6ee1 100644
--- a/src/components/RadioGroup/index.jsx
+++ b/src/components/RadioGroup/index.jsx
@@ -15,6 +15,7 @@ const RadioGroup = ({ className, groupName, header, items, onChange, orientation
 			<div className={`boxes flex-${orientation}`}>
 				{items.map((it, index) => (
 					<RadioButton
+						id={it.id}
 						key={it.value}
 						index={index}
 						selected={it.value === selected}
@@ -40,6 +41,7 @@ RadioGroup.propTypes = {
 	groupName: PropTypes.string,
 	header: PropTypes.string,
 	items: PropTypes.arrayOf(PropTypes.shape({
+		id: PropTypes.string,
 		label: PropTypes.string,
 		value: PropTypes.string,
 	})).isRequired,

From fe56040f736b0bf6a4ee84f47983b2985534e588 Mon Sep 17 00:00:00 2001
From: johnnadeluy <johnnadel.salita@gmail.com>
Date: Mon, 20 Mar 2023 14:55:44 +0100
Subject: [PATCH 2/5] Updates RadioGroup documentation; items

MIMIR-1550
---
 src/components/RadioGroup/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RadioGroup/README.md b/src/components/RadioGroup/README.md
index 65874d84..d08c4bb2 100644
--- a/src/components/RadioGroup/README.md
+++ b/src/components/RadioGroup/README.md
@@ -60,7 +60,7 @@ Available props:
 | ---------- | ------------- | ----- |
 | className   | string | Optional container class|
 | header | string | Renders a h5 title |
-| items | arrayOf(label, value) | Required items for rendering radio buttons |
+| items | arrayOf(id, label, value) | Required items for rendering radio buttons |
 | onChange | func | Callback function when a value is changed |
 | orientation | 'column' or 'row' , default column| Vertical og horizontal layout|
 | selectedValue | string | Pre selected value |

From e102e026058b46af09ec048d61c42c8280ab18d2 Mon Sep 17 00:00:00 2001
From: johnnadeluy <johnnadel.salita@gmail.com>
Date: Mon, 20 Mar 2023 14:58:55 +0100
Subject: [PATCH 3/5] Updates htmlFor attribute for id for RadioButton

MIMIR-1550
---
 src/components/RadioButton/index.jsx           | 2 +-
 src/components/RadioGroup/radiogroup.story.jsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/RadioButton/index.jsx b/src/components/RadioButton/index.jsx
index 589a9cc3..e1e88f25 100644
--- a/src/components/RadioButton/index.jsx
+++ b/src/components/RadioButton/index.jsx
@@ -15,7 +15,7 @@ const RadioButton = ({
 			type="radio"
 			value={value}
 		/>
-		<label className="radio-label" htmlFor={value}>{children}</label>
+		<label className="radio-label" htmlFor={id ?? value}>{children}</label>
 	</div>
 );
 
diff --git a/src/components/RadioGroup/radiogroup.story.jsx b/src/components/RadioGroup/radiogroup.story.jsx
index f9fe8ef3..718d5259 100644
--- a/src/components/RadioGroup/radiogroup.story.jsx
+++ b/src/components/RadioGroup/radiogroup.story.jsx
@@ -4,6 +4,7 @@ import RadioGroup from './index';
 
 const radioItems = [
 	{
+		id: 'id-item-1',
 		label: 'Item 1',
 		value: 'item1',
 	}, {

From d81e2dea409c5bbd74c0e20810573672534ed008 Mon Sep 17 00:00:00 2001
From: johnnadeluy <johnnadel.salita@gmail.com>
Date: Mon, 20 Mar 2023 15:02:59 +0100
Subject: [PATCH 4/5] Updates documentation for RadioButton and RadioGroup;
 optional prop id

MIMIR-1550
---
 src/components/RadioButton/README.md |  5 +++--
 src/components/RadioGroup/README.md  | 18 +++++++++---------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/RadioButton/README.md b/src/components/RadioButton/README.md
index a078bd82..34f839ee 100644
--- a/src/components/RadioButton/README.md
+++ b/src/components/RadioButton/README.md
@@ -9,8 +9,8 @@ RadioButton
 
 ```html
 <div class="ssb-radio">
-    <input tabindex="0" id="item-id" type="radio" value="item">
-    <label class="radio-label" for="item">Item</label>
+    <input tabindex="0" id="id-item" type="radio" value="item">
+    <label class="radio-label" for="id-item">Item</label>
 </div>
 ```
 
@@ -23,6 +23,7 @@ RadioButton
   tabIndex="0"
   selected={false}
   value="option1"
+  id="id-item"
 >Item
 </RadioButton>
 ```
diff --git a/src/components/RadioGroup/README.md b/src/components/RadioGroup/README.md
index d08c4bb2..7f1bdb70 100644
--- a/src/components/RadioGroup/README.md
+++ b/src/components/RadioGroup/README.md
@@ -13,16 +13,16 @@ RadioGroup
 	<!-- Use flex-row If horizontal layout -->
     <div class="boxes flex-column">
         <div class="ssb-radio">
-            <input tabindex="0" id="item-1" type="radio" value="item1">
-            <label class="radio-label" for="item1">Item 1</label>
+            <input tabindex="0" id="id-item1" type="radio" value="item1">
+            <label class="radio-label" for="id-item1">Item 1</label>
         </div>
         <div class="ssb-radio">
-            <input tabindex="0" id="item-2" type="radio" value="item2">
-            <label class="radio-label" for="item2">Item 2</label>
+            <input tabindex="0" id="id-item2" type="radio" value="item2">
+            <label class="radio-label" for="id-item2">Item 2</label>
         </div>
         <div class="ssb-radio">
-            <input tabindex="0" id="item-3" disabled="" type="radio" value="item3">
-            <label class="radio-label" for="item3">Item 3</label>
+            <input tabindex="0" id="id-item3" disabled="" type="radio" value="item3">
+            <label class="radio-label" for="id-item3">Item 3</label>
         </div>
     </div>
 </div>
@@ -33,15 +33,15 @@ RadioGroup
 ```jsx harmony
 const radioItems = [
 	{
-        id: 'item-1',
+        id: 'id-item1',
 		label: 'Item 1',
 		value: 'item1',
 	}, {
-        id: 'item-2',
+        id: 'id-item2',
 		label: 'Item 2',
 		value: 'item2',
 	}, {
-        id: 'item-3',
+        id: 'id-item3',
 		label: 'Item 3',
 		value: 'item3',
 		disabled: 'true',

From 0772a31e0241d2a6ca2ed354a15341451f366f08 Mon Sep 17 00:00:00 2001
From: johnnadeluy <johnnadel.salita@gmail.com>
Date: Mon, 20 Mar 2023 15:04:42 +0100
Subject: [PATCH 5/5] Removes test code for RadioGroup story

MIMIR-1550
---
 src/components/RadioGroup/radiogroup.story.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/RadioGroup/radiogroup.story.jsx b/src/components/RadioGroup/radiogroup.story.jsx
index 718d5259..f9fe8ef3 100644
--- a/src/components/RadioGroup/radiogroup.story.jsx
+++ b/src/components/RadioGroup/radiogroup.story.jsx
@@ -4,7 +4,6 @@ import RadioGroup from './index';
 
 const radioItems = [
 	{
-		id: 'id-item-1',
 		label: 'Item 1',
 		value: 'item1',
 	}, {