From 8e769597795daa8337823f9b843caa4995f1d799 Mon Sep 17 00:00:00 2001
From: bakhirev <alexey-bakhirev@yandex.ru>
Date: Sat, 10 Aug 2024 21:25:36 +0300
Subject: [PATCH] update

---
 public/assets/list/arrow.svg                  |  2 +-
 .../CustomSelect/components/Icon.tsx          | 31 +++++++++++++++++++
 src/ts/components/CustomSelect/index.tsx      |  6 ++++
 .../CustomSelect/styles/icon.module.scss      | 28 +++++++++++++++++
 .../CustomSelect/styles/index.module.scss     |  4 +++
 .../UiKit/styles/button.module.scss           | 12 ++++---
 .../components/UiKit/styles/index.module.scss |  6 ++--
 .../UiKit/styles/switch.module.scss           |  2 +-
 8 files changed, 82 insertions(+), 9 deletions(-)
 create mode 100644 src/ts/components/CustomSelect/components/Icon.tsx
 create mode 100644 src/ts/components/CustomSelect/styles/icon.module.scss

diff --git a/public/assets/list/arrow.svg b/public/assets/list/arrow.svg
index 45c385d..da2cee8 100644
--- a/public/assets/list/arrow.svg
+++ b/public/assets/list/arrow.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z" /></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#84858D"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z" /></svg>
diff --git a/src/ts/components/CustomSelect/components/Icon.tsx b/src/ts/components/CustomSelect/components/Icon.tsx
new file mode 100644
index 0000000..d97b9d7
--- /dev/null
+++ b/src/ts/components/CustomSelect/components/Icon.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import style from '../styles/icon.module.scss';
+
+interface UiKitSelectIconProps {
+  openSearch: boolean;
+  setOpenSearch: Function;
+}
+
+function UiKitSelectIcon({
+  openSearch,
+  setOpenSearch,
+}: UiKitSelectIconProps) {
+  const className = [style.ui_kit_select_icon_button];
+  if (openSearch) {
+    className.push(style.ui_kit_select_icon_button_open);
+  }
+
+  return (
+    <div className={style.ui_kit_select_icon}>
+      <img
+        src="./assets/list/arrow.svg"
+        className={className.join(' ')}
+        onClick={() => setOpenSearch(!openSearch)}
+      />
+    </div>
+  );
+}
+
+
+export default UiKitSelectIcon;
diff --git a/src/ts/components/CustomSelect/index.tsx b/src/ts/components/CustomSelect/index.tsx
index 566a8f7..2c502ab 100644
--- a/src/ts/components/CustomSelect/index.tsx
+++ b/src/ts/components/CustomSelect/index.tsx
@@ -3,6 +3,7 @@ import React, { useMemo, useState } from 'react';
 import UiKitSelectValue from './components/Value';
 import UiKitSelectSearch from './components/Search';
 import UiKitSelectList from './components/List';
+import UiKitSelectIcon from './components/Icon';
 import { getOption, getTitle } from './helpers';
 
 import style from './styles/index.module.scss';
@@ -55,6 +56,11 @@ function UiKitSelect({
         />
       ) : null}
 
+      <UiKitSelectIcon
+        openSearch={openSearch}
+        setOpenSearch={setOpenSearch}
+      />
+
       {openSearch ? (
         <UiKitSelectList
           value={value}
diff --git a/src/ts/components/CustomSelect/styles/icon.module.scss b/src/ts/components/CustomSelect/styles/icon.module.scss
new file mode 100644
index 0000000..4edac40
--- /dev/null
+++ b/src/ts/components/CustomSelect/styles/icon.module.scss
@@ -0,0 +1,28 @@
+@import 'src/styles/variables';
+
+.ui_kit_select_icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+
+  display: block;
+  width: 32px;
+  padding: 10px 0 0 0;
+
+  text-align: center;
+  cursor: pointer;
+
+  &_button {
+    display: block;
+    width: var(--space-xxl);
+    height: var(--space-xxl);
+    padding: 0;
+    margin: 0;
+    transition: transform 0.5s;
+
+    &_open {
+      transform: rotate(-180deg);
+    }
+  }
+}
diff --git a/src/ts/components/CustomSelect/styles/index.module.scss b/src/ts/components/CustomSelect/styles/index.module.scss
index 4f649b0..9f086e2 100644
--- a/src/ts/components/CustomSelect/styles/index.module.scss
+++ b/src/ts/components/CustomSelect/styles/index.module.scss
@@ -25,6 +25,10 @@
     background-color: var(--color-white);
   }
 
+  &_search {
+    padding-top: var(--space-xxxs);
+  }
+
   &_container {
     position: relative;
   }
diff --git a/src/ts/components/UiKit/styles/button.module.scss b/src/ts/components/UiKit/styles/button.module.scss
index 444959c..50757d7 100644
--- a/src/ts/components/UiKit/styles/button.module.scss
+++ b/src/ts/components/UiKit/styles/button.module.scss
@@ -1,6 +1,7 @@
 @import 'src/styles/variables';
 
 .ui_kit_button {
+  --temp-size: 42px;
   --button-color-bg: var(--color-button);
   --button-color-text: var(--color-white);
   --button-color-border: var(--color-button);
@@ -36,13 +37,13 @@
   font-weight: bold;
   font-size: var(--font-xs);
   display: inline-block;
-  height: 42px;
-  min-width: 42px;
+  height: var(--temp-size);
+  min-width: var(--temp-size);
   padding: 0 var(--space-l);
   margin: 0;
 
   cursor: pointer;
-  line-height: 42px;
+  line-height: var(--temp-size);
   text-align: center;
   box-sizing: border-box;
   white-space: nowrap;
@@ -111,6 +112,7 @@
 }
 
 .ui_kit_button_menu {
+  --temp-size: 42px;
   --button-color-bg: var(--color-white);
   --button-color-text: var(--color-black);
   --button-color-border: var(--color-border);
@@ -119,13 +121,13 @@
   font-weight: bold;
   font-size: var(--font-xs);
   display: block;
-  height: 42px;
+  height: var(--temp-size);
   width: 100%;
   padding: 0 var(--space-s);
   margin: 0;
 
   cursor: pointer;
-  line-height: 42px;
+  line-height: var(--temp-size);
   text-align: left;
   box-sizing: border-box;
   white-space: nowrap;
diff --git a/src/ts/components/UiKit/styles/index.module.scss b/src/ts/components/UiKit/styles/index.module.scss
index 2a95399..3e28b55 100644
--- a/src/ts/components/UiKit/styles/index.module.scss
+++ b/src/ts/components/UiKit/styles/index.module.scss
@@ -1,16 +1,18 @@
 @import 'src/styles/variables';
 
 .ui_kit_common {
+  --temp-size: 42px;
+
   font-size: var(--font-s);
   font-weight: 100;
 
   display: inline-block;
   width: 100%;
-  height: 42px;
+  height: var(--temp-size);
   padding: 0 var(--space-l);
   margin: 0;
 
-  line-height: 42px;
+  line-height: var(--temp-size);
   text-align: left;
   box-sizing: border-box;
   vertical-align: top;
diff --git a/src/ts/components/UiKit/styles/switch.module.scss b/src/ts/components/UiKit/styles/switch.module.scss
index 74ee16f..3a2968e 100644
--- a/src/ts/components/UiKit/styles/switch.module.scss
+++ b/src/ts/components/UiKit/styles/switch.module.scss
@@ -5,7 +5,7 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 42px;
+  height: var(--temp-size);
   padding: 0;
   margin: 0;