six commented out tests relating to button clicks

Author: eatyourpeas

src/CentileChart/CentileChart.test.tsx

@@ -605,16 +605,15 @@ describe('All tests relate to rendering the text in the height centile chart for
         ).toBeInTheDocument();
     });
 
-    // it("centile labels should render.", () => {
-    //   render(<CentileChart {...props} />);
-    //   expect(screen.getAllByText("99.6th")[0]).toBeInTheDocument()
-    // });
+    it('centile labels should toggle on button click.', () => {
+        render(<CentileChart {...props} />);
 
-    // it("centile labels should not render.", () => {
-    //   props.showCentileLabels=false;
-    //   render(<CentileChart {...props} />);
-    //   expect(screen.queryAllByText("99.6th")[0]).toBeUndefined();
-    // });
+        //   the default is to not render centile labels
+        expect(screen.queryAllByText('99.6th')[0]).toBeUndefined();
+
+        // fireEvent.click(screen.getByTestId('gradient-labels-button'));
+        // expect(screen.getAllByText('99.6th')[0]).toBeInTheDocument();
+    });
 });
 
 describe('All tests relate to rendering the text in the height/length centile chart for a premature neonate.', () => {
@@ -1065,7 +1064,6 @@ describe('All tests relating to testing the copy button', () => {
     // });
 });
 
-// HERE
 // describe('Tests relating to exportChartCallback function', () => {
 //     const mockExportChartCallback = jest.fn();
 //     let props: CentileChartProps;

src/CentileChart/CentileChart.tsx

@@ -982,7 +982,7 @@ function CentileChart({
                                 >
                                     <StyledGradientLabelsButton
                                         $color={styles.toggleStyle.activeColour}
-                                        $size={5}
+                                        $size={styles.toggleStyle.buttonSize}
                                         onClick={renderGradientLabels}
                                         data-testid="gradient-labels-button"
                                     >

src/SubComponents/StyledGradientLabelsButton.tsx

@@ -1,21 +1,28 @@
 import styled from 'styled-components';
 import { CommonButton } from './CommonButton';
 
-export const StyledGradientLabelsButton = styled(CommonButton)<{
+interface StyledGradientLabelsButtonProps {
     $color?: string;
     $size?: number;
-}>`
-    background-color: ${(props) => (props.$color ? props.$color : 'black')};
-    height: 48px;
-    width: 48px;
+}
+
+export const StyledGradientLabelsButton = styled(CommonButton).attrs<StyledGradientLabelsButtonProps>(
+    ({ $color, $size }) => ({
+        style: {
+            backgroundColor: $color || 'black',
+            height: $size ? `${$size}px` : '48px',
+            width: $size ? `${$size}px` : '48px',
+        },
+    }),
+)<StyledGradientLabelsButtonProps>`
+    flex-grow: 0;
     color: white;
     padding: 1rem;
     border: none;
     cursor: pointer;
     border: 5px solid white;
     border-radius: 50%;
     padding: 3px;
-    flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;