Switch with primary color (#620)

nordcloud · Jul 10, 2023 · 501bb7a · 501bb7a
1 parent e034f09
commit 501bb7a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/switch/Switch.stories.mdx b/src/components/switch/Switch.stories.mdx
@@ -90,6 +90,15 @@ import theme from "../../theme";
             checked={checked}
             readOnly
           />
+          <Spacer height="1rem" />
+          <Switch
+            name="label4"
+            severity="primary"
+            labelText="My Switch Button Notification"
+            onClick={toggle}
+            checked={checked}
+            readOnly
+          />
         </GnuiContainer>
       );
     }}

diff --git a/src/components/switch/Switch.tsx b/src/components/switch/Switch.tsx
@@ -3,11 +3,11 @@ import styled, { css } from "styled-components";
 import theme from "../../theme";
 import { setColor } from "../../utils/setcolor";
 
-export type SwitchProps = {
+export type SwitchProps = React.ComponentPropsWithoutRef<"input"> & {
   labelText?: string;
-  severity?: "danger" | "notification" | "warning" | "success";
+  severity?: "danger" | "notification" | "primary" | "success" | "warning";
   position?: "left" | "right";
-} & React.ComponentPropsWithoutRef<"input">;
+};
 
 type SwitchInputProps = Pick<SwitchProps, "severity">;
 
@@ -21,7 +21,9 @@ const SwitchInput = styled.input<SwitchInputProps>`
     ${({ severity }) =>
       severity &&
       css`
-        background-color: ${setColor(severity)};
+        background-color: ${severity === "primary"
+          ? theme.color.interactive.primary
+          : setColor(severity)};
       `}
 
     &:before {