From d95ac42c1001660a63f0d041dfd3562a443c9891 Mon Sep 17 00:00:00 2001
From: Khadija Hammoud <khammoud@nightwatchapp.com>
Date: Tue, 13 Jun 2023 18:16:38 +0300
Subject: [PATCH] Rm divider active prop

---
 src/components/Divider/Divider.constants.ts |  7 -------
 src/components/Divider/Divider.tsx          | 20 ++++++++++++--------
 src/components/Divider/Divider.types.ts     |  5 ++---
 src/components/Divider/Divider.utils.ts     | 14 ++++++++++++++
 4 files changed, 28 insertions(+), 18 deletions(-)
 delete mode 100644 src/components/Divider/Divider.constants.ts
 create mode 100644 src/components/Divider/Divider.utils.ts

diff --git a/src/components/Divider/Divider.constants.ts b/src/components/Divider/Divider.constants.ts
deleted file mode 100644
index 0b4ceca..0000000
--- a/src/components/Divider/Divider.constants.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { DividerColor } from './Divider.types';
-
-export const DIVIDER_COLOR: Record<DividerColor, string> = {
-  primary: '--border-primary',
-  secondary: '--border-secondary',
-  tertiary: '--border-tertiary'
-};
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index 27dfe04..23cae99 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -4,13 +4,12 @@ import styled from 'styled-components';
 import { ThemeMode } from '../../types';
 import { getThemedColor } from '../../utils/colorUtils';
 
-import { DIVIDER_COLOR } from './Divider.constants';
 import { DIVIDER_TYPE_CSS } from './Divider.styles';
 import { DividerColor, DividerProps, DividerType } from './Divider.types';
+import { getDividerColor } from './Divider.utils';
 
 const StyledHR = styled.hr<{
-  $active: boolean;
-  $color: DividerColor;
+  $color: DividerColor | string;
   $type: DividerType;
   $forceTheme?: ThemeMode;
   $height?: number | string;
@@ -22,8 +21,8 @@ const StyledHR = styled.hr<{
   border-radius: 100px;
 
   ${(props) => {
-    const dividerColor = props.$active ? '--border-active' : DIVIDER_COLOR[props.$color];
-    const themedColor = getThemedColor(`var(${dividerColor})`, props.$forceTheme);
+    const dividerColor = getDividerColor(props.$color);
+    const themedColor = getThemedColor(dividerColor, props.$forceTheme);
     return `
       color: ${themedColor};
       background: ${themedColor};
@@ -34,14 +33,19 @@ const StyledHR = styled.hr<{
 `;
 
 const Divider: React.FC<DividerProps> = ({
-  active = false,
   color = 'secondary',
   forceTheme,
   height,
   type = DividerType.HORIZONTAL,
   width
 }) => (
-  <StyledHR $active={active} $color={color} $forceTheme={forceTheme} $height={height} $type={type} $width={width} />
+  <StyledHR
+    $color={color}
+    $forceTheme={forceTheme}
+    $height={height}
+    $type={type}
+    $width={width}
+  />
 );
 
-export default Divider;
+export default Divider;
\ No newline at end of file
diff --git a/src/components/Divider/Divider.types.ts b/src/components/Divider/Divider.types.ts
index de8dbae..ee38eb2 100644
--- a/src/components/Divider/Divider.types.ts
+++ b/src/components/Divider/Divider.types.ts
@@ -8,9 +8,8 @@ export enum DividerType {
 export type DividerColor = 'primary' | 'secondary' | 'tertiary';
 
 export interface DividerProps {
-  active?: boolean;
   /** Divider color */
-  color?: DividerColor;
+  color?: DividerColor | string;
   /** Forced theme */
   forceTheme?: ThemeMode;
   /** Custom height */
@@ -19,4 +18,4 @@ export interface DividerProps {
   type?: DividerType;
   /** Custom width */
   width?: number | string;
-}
+}
\ No newline at end of file
diff --git a/src/components/Divider/Divider.utils.ts b/src/components/Divider/Divider.utils.ts
new file mode 100644
index 0000000..8ed153d
--- /dev/null
+++ b/src/components/Divider/Divider.utils.ts
@@ -0,0 +1,14 @@
+import { DividerColor } from './Divider.types';
+
+export const getDividerColor = (color: DividerColor | string) => {
+  switch (color) {
+    case 'primary':
+      return 'var(--border-primary)';
+    case 'secondary':
+      return 'var(--border-secondary)';
+    case 'tertiary':
+      return 'var(--border-tertiary)';
+    default:
+      return color;
+  }
+};
\ No newline at end of file