add new styles to test parameters

rcpch · Oct 24, 2024 · 64cc9a8 · 64cc9a8
1 parent 2cf9007
commit 64cc9a8
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 43 deletions.
diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx
@@ -920,13 +920,13 @@ function CentileChart({
                         { 
                             <GradientLabelsButtonWrapper>
                                 <StyledButtonTooltip
-                                    backgroundColor={styles.toggleTooltipStyle.backgroundColor}
-                                    color={styles.toggleTooltipStyle.color}
-                                    fontSize={styles.toggleTooltipStyle.fontSize}
-                                    fontFamily={styles.toggleTooltipStyle.fontFamily}
-                                    fontWeight={styles.toggleTooltipStyle.fontWeight}
-                                    fontStyle={styles.toggleTooltipStyle.fontStyle}
-                                    borderRadius={styles.toggleTooltipStyle.borderRadius}
+                                    $backgroundColor={styles.toggleTooltipStyle.backgroundColor}
+                                    $color={styles.toggleTooltipStyle.color}
+                                    $fontSize={styles.toggleTooltipStyle.fontSize}
+                                    $fontFamily={styles.toggleTooltipStyle.fontFamily}
+                                    $fontWeight={styles.toggleTooltipStyle.fontWeight}
+                                    $fontStyle={styles.toggleTooltipStyle.fontStyle}
+                                    $borderRadius={styles.toggleTooltipStyle.borderRadius}
                                 >
                                     <StyledGradientLabelsButton
                                         $color={styles.toggleStyle.activeColour}
@@ -954,13 +954,13 @@ function CentileChart({
                         { childMeasurements.length > 0 &&
                                 <FullScreenButtonWrapper>
                                     <StyledButtonTooltip 
-                                        backgroundColor={styles.toggleTooltipStyle.backgroundColor}
-                                        color={styles.toggleTooltipStyle.color}
-                                        fontSize={styles.toggleTooltipStyle.fontSize}
-                                        fontFamily={styles.toggleTooltipStyle.fontFamily}
-                                        fontWeight={styles.toggleTooltipStyle.fontWeight}
-                                        fontStyle={styles.toggleTooltipStyle.fontStyle}
-                                        borderRadius={styles.toggleTooltipStyle.borderRadius}
+                                        $backgroundColor={styles.toggleTooltipStyle.backgroundColor}
+                                        $color={styles.toggleTooltipStyle.color}
+                                        $fontSize={styles.toggleTooltipStyle.fontSize}
+                                        $fontFamily={styles.toggleTooltipStyle.fontFamily}
+                                        $fontWeight={styles.toggleTooltipStyle.fontWeight}
+                                        $fontStyle={styles.toggleTooltipStyle.fontStyle}
+                                        $borderRadius={styles.toggleTooltipStyle.borderRadius}
                                     >
                                         <StyledFullScreenButton
                                             onClick={()=> fullScreenPressed()}
@@ -983,13 +983,13 @@ function CentileChart({
                         { enableExport && (
                                 <ShareButtonWrapper>
                                         <StyledButtonTooltip
-                                            backgroundColor={styles.toggleTooltipStyle.backgroundColor}
-                                            color={styles.toggleTooltipStyle.color}
-                                            fontSize={styles.toggleTooltipStyle.fontSize}
-                                            fontFamily={styles.toggleTooltipStyle.fontFamily}
-                                            fontWeight={styles.toggleTooltipStyle.fontWeight}
-                                            fontStyle={styles.toggleTooltipStyle.fontStyle}
-                                            borderRadius={styles.toggleTooltipStyle.borderRadius}
+                                            $backgroundColor={styles.toggleTooltipStyle.backgroundColor}
+                                            $color={styles.toggleTooltipStyle.color}
+                                            $fontSize={styles.toggleTooltipStyle.fontSize}
+                                            $fontFamily={styles.toggleTooltipStyle.fontFamily}
+                                            $fontWeight={styles.toggleTooltipStyle.fontWeight}
+                                            $fontStyle={styles.toggleTooltipStyle.fontStyle}
+                                            $borderRadius={styles.toggleTooltipStyle.borderRadius}
                                         >
                                             <StyledShareButton
                                                 $color={styles.toggleStyle.activeColour}

diff --git a/src/SDSChart/SDSChart.tsx b/src/SDSChart/SDSChart.tsx
@@ -575,13 +575,13 @@ const SDSChart: React.FC<SDSChartProps> = (
                     { enableExport ? (
                         <ShareButtonWrapper>
                                 <StyledButtonTooltip
-                                    backgroundColor={styles.toggleTooltipStyle.backgroundColor}
-                                    color={styles.toggleTooltipStyle.color}
-                                    fontSize={styles.toggleTooltipStyle.fontSize}
-                                    fontFamily={styles.toggleTooltipStyle.fontFamily}
-                                    fontWeight={styles.toggleTooltipStyle.fontWeight}
-                                    fontStyle={styles.toggleTooltipStyle.fontStyle}
-                                    borderRadius={styles.toggleTooltipStyle.borderRadius}
+                                    $backgroundColor={styles.toggleTooltipStyle.backgroundColor}
+                                    $color={styles.toggleTooltipStyle.color}
+                                    $fontSize={styles.toggleTooltipStyle.fontSize}
+                                    $fontFamily={styles.toggleTooltipStyle.fontFamily}
+                                    $fontWeight={styles.toggleTooltipStyle.fontWeight}
+                                    $fontStyle={styles.toggleTooltipStyle.fontStyle}
+                                    $borderRadius={styles.toggleTooltipStyle.borderRadius}
                                 >
                                     <StyledShareButton
                                         $color={styles.toggleStyle.activeColour}

diff --git a/src/SubComponents/StyledButtonTooltip.tsx b/src/SubComponents/StyledButtonTooltip.tsx
@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
 export const StyledButtonTooltip = styled.div<{
-  backgroundColor?: string,
-  color?: string,
-  fontSize?: number,
-  fontFamily?: string,
-  fontWeight?: string,
-  fontStyle?: string,
-  borderRadius?: string,
+  $backgroundColor?: string,
+  $color?: string,
+  $fontSize?: number,
+  $fontFamily?: string,
+  $fontWeight?: string,
+  $fontStyle?: string,
+  $borderRadius?: string,
 }>`
     position: relative;
 
@@ -17,14 +17,14 @@ export const StyledButtonTooltip = styled.div<{
         left: 50%;
         transform: translateX(-50%);
         display: none;
-        background-color: ${(props) => props.backgroundColor};
-        color: ${(props) => props.color};
+        background-color: ${(props) => props.$backgroundColor};
+        color: ${(props) => props.$color};
         padding: 5px;
-        border-radius: ${(props) => props.borderRadius}px;
-        font-size: ${(props) => props.fontSize}px;
-        font-weight: ${(props) => props.fontWeight};
-        font-style: ${(props) => props.fontStyle};
-        font-family: ${(props) => props.fontFamily};
+        border-radius: ${(props) => props.$borderRadius}px;
+        font-size: ${(props) => props.$fontSize}px;
+        font-weight: ${(props) => props.$fontWeight};
+        font-style: ${(props) => props.$fontStyle};
+        font-family: ${(props) => props.$fontFamily};
       }
     
       &:hover .tooltip {

diff --git a/src/testParameters/styles/monochromeStyles.ts b/src/testParameters/styles/monochromeStyles.ts
@@ -308,6 +308,22 @@ export const monochromeStyles = {
         "fontSize": 14,
         "fontWeight": "normal",
         "fontStyle": "normal"
+    },
+    "toggleTooltipStyle": {
+        "backgroundColor": "#333",
+        "color": "#fff",
+        "fontSize": 14,
+        "fontFamily": "'Montserrat', Helvetica, Arial, sans-serif;",
+        "fontWeight": 400,
+        "fontStyle": "regular",
+        "borderRadius": 4,
+    },
+    "referenceTextStyle": {
+        "fontSize": 8,
+        "fontFamily": "Arial",
+        "color": "#000000",
+        "fontWeight":200,
+        "fontStyle": "normal",
     }
   }
 
@@ -342,7 +358,7 @@ export const chartObject: ChartStyle =  {
         "colour": "#000000",
         "size": 0.25,
         "style": "normal"
-    }
+    },
 }
 
 export const measurementObjects: MeasurementStyle = {