Merge pull request #666 from statisticsnorway/MIMIR-1550_radiobutton_id

Mimir 1550 radiobutton id
statisticsnorway · Mar 21, 2023 · 2d9855c · 2d9855c
2 parents ce18f79 + 0772a31
commit 2d9855c
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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" 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>
 ```
@@ -38,3 +39,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
@@ -2,20 +2,20 @@ 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)}
 			type="radio"
 			value={value}
 		/>
-		<label className="radio-label" htmlFor={value}>{children}</label>
+		<label className="radio-label" htmlFor={id ?? value}>{children}</label>
 	</div>
 );
 
@@ -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
@@ -13,16 +13,16 @@ 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">
-            <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="item2" 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="item3" 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,12 +33,15 @@ RadioGroup
 ```jsx harmony
 const radioItems = [
 	{
+        id: 'id-item1',
 		label: 'Item 1',
 		value: 'item1',
 	}, {
+        id: 'id-item2',
 		label: 'Item 2',
 		value: 'item2',
 	}, {
+        id: 'id-item3',
 		label: 'Item 3',
 		value: 'item3',
 		disabled: 'true',
@@ -57,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 |

diff --git 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,