Merge pull request #87 from rcpch:id-rename

radiobutton-dynamic-naming

Author: eatyourpeas

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcpch/digital-growth-charts-react-component-library",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "A React component library for the RCPCH digital growth charts using Rollup, TypeScript and Styled-Components",
   "main": "build/index.js",
   "module": "build/esm.index.js",

src/CentileChart/CentileChart.tsx

@@ -100,7 +100,7 @@ export const PrematureSDSChart: Story = {
     chartType: 'sds',
     enableExport: false,
     exportChartCallback: ()=>{},
-    theme: 'tanner3',
+    theme: 'tanner2',
     customThemeStyles: {}
   },
 };

src/RCPCHChart/RCPCHChart.stories.tsx

@@ -597,7 +597,7 @@ const SDSChart: React.FC<SDSChartProps> = (
                             $fontStyle={styles.toggleStyle.fontStyle}
                             $color={styles.toggleStyle.color}
                             $className={"toggleButtons"}
-                            handleClick={onSelectRadioButton}
+                            handleClickAgeRadio={onSelectRadioButton}
                             correctedAge={showCorrectedAge}
                             chronologicalAge={showChronologicalAge}
                         />

src/SDSChart/SDSChart.tsx

@@ -1,35 +1,38 @@
 import * as React from 'react';
 
 export const AgeRadioButtonGroup = (props: any) => {
+
+    const uniqueId = Math.random().toString(36);
+
     return (
-        <div onChange={props.handleClick} className={props.className}>
+        <div onChange={props.handleClickAgeRadio} className={props.className}>
             <input
                 data-testid='adjusted'
                 type="radio"
-                id="adjusted"
+                id={`adjusted-${uniqueId}`}
                 value="adjusted"
-                name="adjustments"
+                name={`adjustments${uniqueId}`}
                 defaultChecked={props.correctedAge && props.chronologicalAge === false}
             />
-            <label htmlFor="adjusted">Corrected Age</label>
+            <label htmlFor={`adjusted-${uniqueId}`}>Corrected Age</label>
             <input
                 data-testid='unadjusted'
                 type="radio"
-                id="unadjusted"
+                id={`unadjusted-${uniqueId}`}
                 value="unadjusted"
-                name="adjustments"
+                name={`adjustments${uniqueId}`}
                 defaultChecked={props.chronologicalAge && props.correctedAge === false}
             />
-            <label htmlFor="unadjusted">Chronological Age</label>
+            <label htmlFor={`unadjusted-${uniqueId}`}>Chronological Age</label>
             <input
                 data-testid='both'
                 type="radio"
-                id="both"
+                id={`both-${uniqueId}`}
                 value="both"
-                name="adjustments"
+                name={`adjustments${uniqueId}`}
                 defaultChecked={props.correctedAge === props.chronologicalAge}
             />
-            <label htmlFor="both">Both Ages</label>
+            <label htmlFor={`both-${uniqueId}`}>Both Ages</label>
         </div>
     );
 };

src/SubComponents/AgeRadioButtonGroup.tsx

@@ -14,6 +14,8 @@ export const StyledResetZoomButton = styled.button<{
     align-self: flex-end;
     background-color: ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)};
     border: 2px solid ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)};
+    border-radius: 0px;
+    margin: ${({ $margin }) => $margin};
     font-family: Arial;
     font-size: 14px;
     min-height: 30px;

src/SubComponents/StyledResetZoomButton.tsx

@@ -270,6 +270,7 @@ function makeAllStyles(
             color: chartStyle?.toggleButtonTextStyle?.colour ?? white,
             fontSize: chartStyle?.toggleButtonTextStyle?.size ?? 14,
             fontStyle: chartStyle?.toggleButtonTextStyle?.style === 'italic' ? 'italic' : 'normal',
+            margin: 0
         },
     };
 }

src/functions/makeAllStyles.ts

@@ -34,11 +34,11 @@ export const Tanner2ChartStyles: ChartStyle = {
         size: 12,
         style: 'italic'
     },
-    tooltipBackgroundColour: "#fdc300",
-    tooltipStroke: "#fdc300",
+    tooltipBackgroundColour: "#3366cc",
+    tooltipStroke: "##3366cc",
     tooltipTextStyle: {
         name: "Montserrat",
-        colour: "#000000",
+        colour: "#FFFFFF",
         size: 14,
         style: 'normal'
     },
@@ -63,10 +63,10 @@ export const Tanner2GridlineStyles: GridlineStyle = {
 
 export const Tanner2CentileStyles: CentileStyle = {
     sdsStroke: "#A9A9A9",
-    centileStroke: "#7159aa",
-    delayedPubertyAreaFill: "#c6bddd",
+    centileStroke: "#ff8000",
+    delayedPubertyAreaFill: "#ffc080",
     midParentalCentileStroke: "#ff8000",
-    midParentalAreaFill: "#c6bddd",
+    midParentalAreaFill: "#ffc080",
 }
 
 export const Tanner2MeasurementStyles: MeasurementStyle = {
@@ -80,10 +80,10 @@ export const Tanner2MeasurementStyles: MeasurementStyle = {
     }
 }
 export const Tanner2SDSStyles: SDSStyle = {
-    heightStroke: "#ff8000ff",
-    weightStroke: "#ff80007f",
-    ofcStroke: "#ff80003f",
-    bmiStroke: "#ff80001f",
+    heightStroke: "#7159aa",
+    weightStroke: "#ff8000",
+    ofcStroke: "#e60700",
+    bmiStroke: "#c2a712",
 }
 
 /*
@@ -234,28 +234,28 @@ export const Tanner2Styles = {
     },
     "heightSDS": {
         "data": {
-            "stroke": "#ff8000ff",
+            "stroke": "#7159aa",
             "strokeWidth": 1.5,
             "strokeLinecap": "round"
         }
     },
     "weightSDS": {
         "data": {
-            "stroke": "#ff80007f",
+            "stroke": "#ff8000",
             "strokeWidth": 1.5,
             "strokeLinecap": "round"
         }
     },
     "ofcSDS": {
         "data": {
-            "stroke": "#ff80003f",
+            "stroke": "#e60700",
             "strokeWidth": 1.5,
             "strokeLinecap": "round"
         }
     },
     "bmiSDS": {
         "data": {
-            "stroke": "#ff80001f",
+            "stroke": "#c2a712",
             "strokeWidth": 1.5,
             "strokeLinecap": "round"
         }