Merge pull request #86 from rcpch:active-prop

Active-prop

Author: eatyourpeas

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcpch/digital-growth-charts-react-component-library",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "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/SubComponents/StyledErrorButton.tsx

@@ -1,19 +1,19 @@
 import styled from 'styled-components';
 
 export const StyledErrorButton = styled.button<{
-    activeColour: string;
-    inactiveColour: string;
+    $activeColour: string;
+    $inactiveColour: string;
     fontFamily: string;
     fontSize: number;
     fontWeight: string;
     fontStyle: string;
     color: string;
-    enabled: boolean;
-    margin?: string;
+    $enabled: boolean;
+    $margin?: string;
 }>`
     align-self: flex-end;
-    background-color: ${({inactiveColour, activeColour, enabled }) => (enabled ? activeColour : inactiveColour)};
-    border: 2px solid ${({enabled, activeColour, inactiveColour}) => (enabled ? activeColour : inactiveColour)};
+    background-color: ${({$inactiveColour, $activeColour, $enabled }) => ($enabled ? $activeColour : $inactiveColour)};
+    border: 2px solid ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)};
     font-family: Arial;
     font-size: 14px;
     min-height: 30px;
@@ -23,12 +23,12 @@ export const StyledErrorButton = styled.button<{
     font-style: ${({ fontStyle }) => fontStyle};
     color: ${({ color }) => color};
     &:hover {
-        background-color: ${({enabled, activeColour, inactiveColour}) => (enabled ? activeColour : inactiveColour)};
+        background-color: ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)};
         color: ${({ color }) => color};
-        border: 2px solid ${({enabled, inactiveColour, activeColour}) => (enabled ? activeColour : inactiveColour)};
-        outline: ${({enabled, activeColour}) => (enabled ? activeColour : 'transparent')} solid 2px;
+        border: 2px solid ${({$enabled, $inactiveColour, $activeColour}) => ($enabled ? $activeColour : $inactiveColour)};
+        outline: ${({$enabled, $activeColour}) => ($enabled ? $activeColour : 'transparent')} solid 2px;
     }
     &:focus {
-        outline: ${(props) => (props.enabled ? props.activeColour : 'transparent')} solid 2px;
+        outline: ${(props) => (props.$enabled ? props.$activeColour : 'transparent')} solid 2px;
     }
 `;