From 605000cd3915fe3cced0b1cba72a99c0a8b74686 Mon Sep 17 00:00:00 2001
From: tal-rofe <tal@exlint.io>
Date: Tue, 16 Aug 2022 11:57:05 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=94=A5=20add=20EDSelect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

add EDSelect
---
 apps/frontend/src/assets/icons.ts             |  8 +-
 .../ui/EDSelect/EDSelect.module.scss          | 78 +++++++------------
 .../src/components/ui/EDSelect/EDSelect.tsx   | 16 ++--
 .../components/ui/EDSelect/EDSelect.view.tsx  | 67 +++++++---------
 4 files changed, 68 insertions(+), 101 deletions(-)

diff --git a/apps/frontend/src/assets/icons.ts b/apps/frontend/src/assets/icons.ts
index d577c893b..cd7099f47 100644
--- a/apps/frontend/src/assets/icons.ts
+++ b/apps/frontend/src/assets/icons.ts
@@ -24,13 +24,7 @@ const icons = {
 	arrowRight: [
 		'13 22',
 		`
-		<path d="M1 20.5L11.1237 11.7568C11.5855 11.358 11.5855 10.642 11.1237 10.2432L0.999999 1.5"  stroke-width="2" stroke-linecap="round"/>
-		`,
-	],
-	arrowDown: [
-		'13 8',
-		`
-		<path d="M1 1L5.76285 6.19583C6.15918 6.6282 6.84082 6.6282 7.23715 6.19583L12 1" stroke-linecap="round"/>
+			<path d="M1 20.5L11.1237 11.7568C11.5855 11.358 11.5855 10.642 11.1237 10.2432L0.999999 1.5"/>
 		`,
 	],
 };
diff --git a/apps/frontend/src/components/ui/EDSelect/EDSelect.module.scss b/apps/frontend/src/components/ui/EDSelect/EDSelect.module.scss
index 2ed25a661..0bd72db6e 100644
--- a/apps/frontend/src/components/ui/EDSelect/EDSelect.module.scss
+++ b/apps/frontend/src/components/ui/EDSelect/EDSelect.module.scss
@@ -1,81 +1,61 @@
 .container {
 	position: relative;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: space-between;
-	border-radius: 10px;
-	box-shadow: (0 11.4496px 15.6131px #0000000d);
-	inset-inline-end: 0;
+	width: 200px;
 
-	.selectedOptionsVisible {
+	.buttonContainer {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		height: 100%;
+		width: 100%;
 		padding: 10px 14px;
-		white-space: nowrap;
 		background-color: #fefefe;
+		border: 2px solid #e7e7e7;
+
+		&--tooltipIsVisible {
+			border-start-start-radius: 10px;
+			border-start-end-radius: 10px;
+		}
+
+		&--tooltipIsInvisible {
+			border-radius: 10px;
+		}
 
 		&__text {
-			width: inherit;
-			overflow: hidden;
 			font-size: 1.5rem;
 			font-weight: 360;
 			color: #4b4a65;
-			text-overflow: ellipsis;
-			white-space: no-wrap;
 		}
 
-		.moreOptionsButton {
-			&__arrowDown {
-				width: 11px;
-				height: 8px;
-				fill: transparent;
-				stroke: #202428;
-			}
-
-			&__arrowRight {
-				width: 8px;
-				height: 11px;
-				fill: transparent;
-				stroke: #202428;
+		&__arrow {
+			width: auto;
+			height: 8px;
+			fill: transparent;
+			stroke: #202428;
+			stroke-linecap: round;
+			stroke-width: 2;
+			transition: transform 0.3s ease;
+
+			&--tooltipIsVisible {
+				transform: rotate(90deg);
 			}
 		}
 	}
 
-	.selectedOptionsInvisible {
-		position: absolute;
-		top: 40px;
-		z-index: 1;
+	.optionsContainer {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
-		justify-content: space-between;
 		padding: 10px 14px;
-		white-space: nowrap;
 		background-color: #fefefe;
-		border-radius: 0 0 10px 10px;
-
-		&__divider {
-			width: 100%;
-			margin-bottom: 9px;
-			border: 1px solid #e7e7e7;
-		}
+		border: 2px solid #e7e7e7;
+		border-top: none;
+		border-end-start-radius: 10px;
+		border-end-end-radius: 10px;
 
 		&__option {
-			width: calc(100% - 20px);
-			overflow: hidden;
 			font-size: 1.5rem;
 			font-weight: 360;
 			color: #4b4a65;
-			text-align: left;
-			text-overflow: ellipsis;
-			white-space: no-wrap;
-		}
-
-		&__option:not(:last-child) {
-			margin-bottom: 5px;
 		}
 	}
 }
diff --git a/apps/frontend/src/components/ui/EDSelect/EDSelect.tsx b/apps/frontend/src/components/ui/EDSelect/EDSelect.tsx
index faf71be79..ed9f45484 100644
--- a/apps/frontend/src/components/ui/EDSelect/EDSelect.tsx
+++ b/apps/frontend/src/components/ui/EDSelect/EDSelect.tsx
@@ -5,11 +5,11 @@ import { useClickOutside } from '@/hooks/click-outside';
 import EdSelectView from './EDSelect.view';
 
 interface IProps {
-	readonly defaultValue?: string;
 	readonly className?: string;
+	readonly placeholder?: string;
+	readonly options: string[];
 	readonly selectedOptionIndex: number | null;
-	readonly optionsList: string[];
-	readonly onSelect: (index: number) => void;
+	readonly onOptionSelect: (index: number) => void;
 }
 
 const EDSelect: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
@@ -19,21 +19,21 @@ const EDSelect: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
 		toggleVisibility: toggleTooltipVisibility,
 	} = useClickOutside<HTMLDivElement>(false);
 
-	const onSelect = (index: number) => {
-		props.onSelect(index);
+	const onOptionSelect = (index: number) => {
+		props.onOptionSelect(index);
 		toggleTooltipVisibility();
 	};
 
 	return (
 		<EdSelectView
-			defaultValue={props.defaultValue}
 			className={props.className}
+			placeholder={props.placeholder}
+			options={props.options}
 			selectedOptionIndex={props.selectedOptionIndex}
-			optionsList={props.optionsList}
 			tooltopRef={tooltopRef}
 			isTooltipVisible={isTooltipVisible}
 			toggleTooltipVisibility={toggleTooltipVisibility}
-			onSelect={onSelect}
+			onOptionSelect={onOptionSelect}
 		/>
 	);
 };
diff --git a/apps/frontend/src/components/ui/EDSelect/EDSelect.view.tsx b/apps/frontend/src/components/ui/EDSelect/EDSelect.view.tsx
index 856c6a357..1714d3eaa 100644
--- a/apps/frontend/src/components/ui/EDSelect/EDSelect.view.tsx
+++ b/apps/frontend/src/components/ui/EDSelect/EDSelect.view.tsx
@@ -1,62 +1,55 @@
 import React from 'react';
 
-import { concatDiverseClasses } from '@/utils/component';
+import { concatClasses, concatDiverseClasses } from '@/utils/component';
 import EDSvg from '@/ui/EDSvg';
 
 import classes from './EDSelect.module.scss';
 
 interface IProps {
-	readonly defaultValue?: string;
 	readonly className?: string;
+	readonly placeholder?: string;
+	readonly options: string[];
 	readonly selectedOptionIndex: number | null;
-	readonly optionsList: string[];
 	readonly tooltopRef: React.RefObject<HTMLDivElement>;
 	readonly isTooltipVisible: boolean;
 	readonly toggleTooltipVisibility: () => void;
-	readonly onSelect: (index: number) => void;
+	readonly onOptionSelect: (index: number) => void;
 }
 
 const EDSelectView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
-	const visibleClass = concatDiverseClasses(classes['selectedOptionsVisible'], props.className);
-	const inVisibleClass = concatDiverseClasses(classes['selectedOptionsInvisible'], props.className);
+	const containerClasses = concatDiverseClasses(classes['container'], props.className);
+
+	const buttonContainerClasses = concatClasses(
+		classes,
+		'buttonContainer',
+		props.isTooltipVisible ? 'buttonContainer--tooltipIsVisible' : 'buttonContainer--tooltipIsInvisible',
+	);
+
+	const selectArrowIconClasses = concatClasses(
+		classes,
+		'buttonContainer__arrow',
+		props.isTooltipVisible ? 'buttonContainer__arrow--tooltipIsVisible' : null,
+	);
+
+	const selectText = props.selectedOptionIndex
+		? props.options[props.selectedOptionIndex]
+		: props.placeholder ?? props.options[0];
 
 	return (
-		<div className={classes['container']}>
-			<div
-				className={visibleClass}
-				style={{
-					borderRadius: props.isTooltipVisible ? '10px 10px 0 0' : '10px',
-				}}
-			>
-				<span className={classes['selectedOptionsVisible__text']}>
-					{props.selectedOptionIndex !== null
-						? props.optionsList[props.selectedOptionIndex]
-						: props.defaultValue}
-				</span>
+		<div className={containerClasses}>
+			<button className={buttonContainerClasses} type="button" onClick={props.toggleTooltipVisibility}>
+				<span className={classes['buttonContainer__text']}>{selectText}</span>
 
-				<button
-					className={classes['moreOptionsButton']}
-					type="button"
-					onClick={props.toggleTooltipVisibility}
-				>
-					<EDSvg
-						className={
-							props.isTooltipVisible
-								? classes['moreOptionsButton__arrowDown']
-								: classes['moreOptionsButton__arrowRight']
-						}
-						name={props.isTooltipVisible ? 'arrowDown' : 'arrowRight'}
-					/>
-				</button>
-			</div>
+				<EDSvg className={selectArrowIconClasses} name="arrowRight" />
+			</button>
 			{props.isTooltipVisible && (
-				<div ref={props.tooltopRef} className={inVisibleClass}>
-					{props.optionsList.map((option, index) => (
+				<div ref={props.tooltopRef} className={classes['optionsContainer']}>
+					{props.options.map((option, index) => (
 						<button
 							key={index}
-							className={classes['selectedOptionsInvisible__option']}
+							className={classes['optionsContainer__option']}
 							type="button"
-							onClick={() => props.onSelect(index)}
+							onClick={() => props.onOptionSelect(index)}
 						>
 							{option}
 						</button>