refactor: add position type and nests dropdown content (#2750)

src/app/components/Badge/Badge.tsx

@@ -1,6 +1,7 @@
 import { Icon } from "app/components/Icon";
 import React from "react";
 import { styled } from "twin.macro";
+import { Position } from "types";
 
 import { defaultClasses, getStyles } from "./Badge.styles";
 
@@ -10,7 +11,7 @@ type BadgeProps = {
 	icon?: string;
 	iconWidth?: number;
 	iconHeight?: number;
-	position?: "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left";
+	position?: Position;
 };
 
 export const Wrapper = styled.span<BadgeProps>(getStyles);

src/app/components/Dropdown/Dropdown.styles.ts

@@ -1,3 +1,26 @@
 import tw from "twin.macro";
 
-export const defaultClasses = tw`mt-8 py-3 absolute z-10 bg-theme-background rounded-lg shadow-xl border-theme-neutral-contrast border-1`;
+export const defaultClasses =
+	"mt-8 py-3 absolute z-10 bg-theme-background rounded-lg shadow-xl border-theme-neutral-contrast border-1";
+
+const getPosition = (position: string): any => {
+	switch (position) {
+		case "bottom":
+			return tw`bottom-0`;
+		case "bottom-left":
+			return tw`bottom-0 left-0`;
+		case "left":
+			return tw`left-0 `;
+		case "top-left":
+			return tw`top-0 left-0`;
+		case "top":
+			return tw`top-0`;
+		case "top-right":
+			return tw`top-0 right-0`;
+		case "right":
+		default:
+			return tw`right-0`;
+	}
+};
+
+export const getStyles = ({ position }: any) => [getPosition(position)];

src/app/components/Dropdown/Dropdown.tsx

@@ -2,30 +2,28 @@ import { Icon } from "app/components/Icon";
 import { clickOutsideHandler } from "app/hooks/click-outside";
 import React, { useEffect, useRef, useState } from "react";
 import { styled } from "twin.macro";
-import { Size } from "types";
+import { Position, Size } from "types";
 
-import { defaultClasses } from "./Dropdown.styles";
+import { defaultClasses, getStyles } from "./Dropdown.styles";
 
 export type DropdownOption = {
 	label: string;
 	value: string | number;
 };
 
-type Props = {
+type DropdownProps = {
 	as?: React.ElementType;
 	children?: React.ReactNode;
 	onSelect?: any;
 	options?: any;
-	position?: string;
+	position?: Position;
 	dropdownClass?: string;
 	toggleIcon: string;
 	toggleSize?: Size;
 	toggleContent?: any;
 };
 
-export const Wrapper = styled.div`
-	${defaultClasses}
-`;
+export const Wrapper = styled.div<{ position?: string }>(getStyles);
 
 /*
  * Dropdown options list
@@ -88,7 +86,7 @@ export const Dropdown = ({
 	toggleIcon,
 	toggleSize,
 	toggleContent,
-}: Props) => {
+}: DropdownProps) => {
 	const [isOpen, setIsOpen] = useState(false);
 
 	const toggle = (e: any) => {
@@ -118,9 +116,11 @@ export const Dropdown = ({
 		<div ref={ref} className="relative">
 			<span onClick={toggle}>{renderToggle(isOpen, toggleContent, toggleIcon, toggleSize)}</span>
 
-			<Wrapper className={`${position}-0 ${dropdownClass}`}>
-				<div data-testid="dropdown__content">{renderOptions(options, select)}</div>
-				<div>{children}</div>
+			<Wrapper position={position} className={`${defaultClasses} ${dropdownClass}`}>
+				<div data-testid="dropdown__content">
+					{renderOptions(options, select)}
+					{children && <div>{children}</div>}
+				</div>
 			</Wrapper>
 		</div>
 	);