fix(Separator): fix background and border issue (#3925)

* fix(Separator): fix background and border issue * Update packages/orbit-components/src/Separator/types.d.ts Co-authored-by: Daniel Sil <daniel.sil@kiwi.com> * Update packages/orbit-components/src/Separator/TYPESCRIPT_TEMPLATE.template Co-authored-by: Daniel Sil <daniel.sil@kiwi.com> --------- Co-authored-by: Daniel Sil <daniel.sil@kiwi.com>
kiwicom · Jul 18, 2023 · 5ffa0ee · 5ffa0ee
1 parent 0b9e33e
commit 5ffa0ee
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/packages/orbit-components/src/Separator/TYPESCRIPT_TEMPLATE.template b/packages/orbit-components/src/Separator/TYPESCRIPT_TEMPLATE.template
@@ -7,9 +7,19 @@ export type Align = "left" | "center" | "right";
 
 export type PaletteTokens =%TOKENS%
 
-export interface Props extends Common.SpaceAfter {
+export interface CommonProps extends Common.SpaceAfter {
   indent?: Indent;
-  type?: "solid" | "dashed" | "dotted" | "double" | "none";
-  color?: PaletteTokens;
   align?: Align;
 }
+
+type ConditionalSeparatorType =
+  | {
+      readonly color?: PaletteTokens;
+      readonly type: "solid" | "dashed" | "dotted" | "double" | "none";
+    }
+  | {
+      readonly color?: false;
+      readonly type?: never;
+    };
+
+export type Props = CommonProps & ConditionalSeparatorType;
diff --git a/packages/orbit-components/src/Separator/index.tsx b/packages/orbit-components/src/Separator/index.tsx
@@ -41,7 +41,7 @@ export const StyledSeparator = styled.hr<{
 }>`
   ${({ theme, $type, $color }) => css`
     height: ${theme.orbit.heightSeparator};
-    background: ${theme.orbit.backgroundSeparator};
+    background: ${!$color && theme.orbit.backgroundSeparator};
     box-sizing: border-box;
     border-style: ${$type};
     border-color: ${$color};

diff --git a/packages/orbit-components/src/Separator/types.d.ts b/packages/orbit-components/src/Separator/types.d.ts
@@ -83,9 +83,19 @@ export type PaletteTokens =
   | "paletteSocialFacebookHover"
   | "paletteSocialFacebookActive";
 
-export interface Props extends Common.SpaceAfter {
+export interface CommonProps extends Common.SpaceAfter {
   indent?: Indent;
-  type?: "solid" | "dashed" | "dotted" | "double" | "none";
-  color?: PaletteTokens;
   align?: Align;
 }
+
+type ConditionalSeparatorType =
+  | {
+      readonly color?: PaletteTokens;
+      readonly type: "solid" | "dashed" | "dotted" | "double" | "none";
+    }
+  | {
+      readonly color?: false;
+      readonly type?: never;
+    };
+
+export type Props = CommonProps & ConditionalSeparatorType;