Merge pull request #86 from rcpch:active-prop

Active-prop
rcpch · Jun 13, 2024 · 22b0a61 · 22b0a61
2 parents afe7f4d + 8d18f14
commit 22b0a61
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/package.json b/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",

diff --git a/src/SubComponents/StyledErrorButton.tsx b/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;
     }
 `;