From 662a7760183499d860ff9d2060007eaf9710ab32 Mon Sep 17 00:00:00 2001
From: Heitor Carvalho <heitor.carvalho@vtex.com.br>
Date: Tue, 1 Feb 2022 23:47:59 -0300
Subject: [PATCH 1/8] Extract UISelect from Sort to its own component

---
 src/components/search/Sort/Sort.tsx           | 31 ++++-------
 src/components/ui/Select/Select.tsx           | 54 +++++++++++++++++++
 src/components/ui/Select/index.tsx            |  1 +
 .../Sort/sort.scss => ui/Select/select.scss}  |  2 +-
 4 files changed, 66 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ui/Select/Select.tsx
 create mode 100644 src/components/ui/Select/index.tsx
 rename src/components/{search/Sort/sort.scss => ui/Select/select.scss} (98%)

diff --git a/src/components/search/Sort/Sort.tsx b/src/components/search/Sort/Sort.tsx
index 9c228fbbf..50420a3b7 100644
--- a/src/components/search/Sort/Sort.tsx
+++ b/src/components/search/Sort/Sort.tsx
@@ -1,9 +1,6 @@
 import { useSearch } from '@faststore/sdk'
 import React from 'react'
-import { Select as UISelect } from '@faststore/ui'
-import { CaretDown as CaretDownIcon } from 'phosphor-react'
-
-import './sort.scss'
+import Select from 'src/components/ui/Select'
 
 const OptionsMap = {
   price_desc: 'Price, descending',
@@ -25,23 +22,15 @@ function Sort() {
   } = useSearch()
 
   return (
-    <div className="sort / title-small">
-      <label htmlFor="select-sort">Sort by</label>
-      <UISelect
-        data-testid="search-sort"
-        onChange={(e) => setSort(keys[e.target.selectedIndex])}
-        value={sort}
-        aria-label="Product Sort"
-        id="select-sort"
-      >
-        {keys.map((key) => (
-          <option key={key} value={key}>
-            {OptionsMap[key]}
-          </option>
-        ))}
-      </UISelect>
-      <CaretDownIcon size={18} weight="bold" />
-    </div>
+    <Select
+      className="sort / title-small"
+      labelText="Sort by"
+      options={OptionsMap}
+      onChange={(e) => setSort(keys[e.target.selectedIndex])}
+      value={sort}
+      aria-label="Product Sort"
+      testId="search-sort"
+    />
   )
 }
 
diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx
new file mode 100644
index 000000000..3a4e48b6a
--- /dev/null
+++ b/src/components/ui/Select/Select.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { Select as UISelect } from '@faststore/ui'
+import type { SelectProps } from '@faststore/ui'
+import { CaretDown as CaretDownIcon } from 'phosphor-react'
+
+import './select.scss'
+
+type SelectOptions = {
+  [key: string]: string
+}
+
+interface UISelectProps extends SelectProps {
+  /*
+   * Defines the options available in the select. The SelectOptions object
+   * keys are the property names, while the values correspond  to the text that
+   * will be displayed in the UI
+   */
+  options: SelectOptions
+  /*
+   * Specifies the text that will be displayed in the label right next to the Select.
+   * If omitted, the label will not be rendered.
+   */
+  labelText?: string
+}
+
+export default function Select({
+  options,
+  onChange,
+  labelText,
+  value,
+  'aria-label': ariaLabel,
+  className,
+  testId,
+}: UISelectProps) {
+  return (
+    <div data-ui-select className={className}>
+      {labelText && <label htmlFor="ui-select">{labelText}</label>}
+      <UISelect
+        data-testid={testId}
+        onChange={onChange}
+        value={value}
+        aria-label={ariaLabel}
+        id="ui-select"
+      >
+        {Object.keys(options).map((key) => (
+          <option key={key} value={key}>
+            {options[key]}
+          </option>
+        ))}
+      </UISelect>
+      <CaretDownIcon size={18} weight="bold" />
+    </div>
+  )
+}
diff --git a/src/components/ui/Select/index.tsx b/src/components/ui/Select/index.tsx
new file mode 100644
index 000000000..bb4b6a044
--- /dev/null
+++ b/src/components/ui/Select/index.tsx
@@ -0,0 +1 @@
+export { default } from './Select'
diff --git a/src/components/search/Sort/sort.scss b/src/components/ui/Select/select.scss
similarity index 98%
rename from src/components/search/Sort/sort.scss
rename to src/components/ui/Select/select.scss
index 9e6912db4..00939bd6f 100644
--- a/src/components/search/Sort/sort.scss
+++ b/src/components/ui/Select/select.scss
@@ -1,6 +1,6 @@
 @import "../../../styles/scaffold.scss";
 
-.sort {
+[data-ui-select] {
   position: relative;
   display: flex;
   align-items: center;

From 3c2d37cb37bb4a7dd95dabaff3afc6c17c0b62d6 Mon Sep 17 00:00:00 2001
From: Heitor Carvalho <heitor.carvalho@vtex.com.br>
Date: Wed, 2 Feb 2022 15:21:07 -0300
Subject: [PATCH 2/8] Rename data-ui-select to data-select

---
 src/components/ui/Select/Select.tsx  | 2 +-
 src/components/ui/Select/select.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx
index 3a4e48b6a..e433e9c63 100644
--- a/src/components/ui/Select/Select.tsx
+++ b/src/components/ui/Select/Select.tsx
@@ -33,7 +33,7 @@ export default function Select({
   testId,
 }: UISelectProps) {
   return (
-    <div data-ui-select className={className}>
+    <div data-select className={className}>
       {labelText && <label htmlFor="ui-select">{labelText}</label>}
       <UISelect
         data-testid={testId}
diff --git a/src/components/ui/Select/select.scss b/src/components/ui/Select/select.scss
index 00939bd6f..64bfb710d 100644
--- a/src/components/ui/Select/select.scss
+++ b/src/components/ui/Select/select.scss
@@ -1,6 +1,6 @@
 @import "../../../styles/scaffold.scss";
 
-[data-ui-select] {
+[data-select] {
   position: relative;
   display: flex;
   align-items: center;

From 133bf0a097829885ab57d27fda846ee693a71412 Mon Sep 17 00:00:00 2001
From: Heitor Carvalho <heitor.carvalho@vtex.com.br>
Date: Wed, 2 Feb 2022 18:00:00 -0300
Subject: [PATCH 3/8] Change attribute className to classes

Co-authored-by: Fanny Chien <fannychienn@gmail.com>
---
 src/components/search/Sort/Sort.tsx | 2 +-
 src/components/ui/Select/Select.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/search/Sort/Sort.tsx b/src/components/search/Sort/Sort.tsx
index 50420a3b7..2dea85f94 100644
--- a/src/components/search/Sort/Sort.tsx
+++ b/src/components/search/Sort/Sort.tsx
@@ -23,7 +23,7 @@ function Sort() {
 
   return (
     <Select
-      className="sort / title-small"
+      classes="sort / title-small"
       labelText="Sort by"
       options={OptionsMap}
       onChange={(e) => setSort(keys[e.target.selectedIndex])}
diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx
index e433e9c63..316529a75 100644
--- a/src/components/ui/Select/Select.tsx
+++ b/src/components/ui/Select/Select.tsx
@@ -10,6 +10,10 @@ type SelectOptions = {
 }
 
 interface UISelectProps extends SelectProps {
+  /*
+   * Defines the CSS class string that will be forwarded to the wrapping div "className" prop.
+   */
+  classes?: string
   /*
    * Defines the options available in the select. The SelectOptions object
    * keys are the property names, while the values correspond  to the text that
@@ -29,11 +33,11 @@ export default function Select({
   labelText,
   value,
   'aria-label': ariaLabel,
-  className,
+  classes,
   testId,
 }: UISelectProps) {
   return (
-    <div data-select className={className}>
+    <div data-select className={classes}>
       {labelText && <label htmlFor="ui-select">{labelText}</label>}
       <UISelect
         data-testid={testId}

From b8f90956b58de744f3920524d767de030449c02e Mon Sep 17 00:00:00 2001
From: Heitor Carvalho <heitor.scz@gmail.com>
Date: Wed, 2 Feb 2022 19:17:29 -0300
Subject: [PATCH 4/8] Remove whitespace

Co-authored-by: Fanny Chien <fannychienn@gmail.com>
---
 src/components/ui/Select/Select.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx
index 316529a75..389c36400 100644
--- a/src/components/ui/Select/Select.tsx
+++ b/src/components/ui/Select/Select.tsx
@@ -16,7 +16,7 @@ interface UISelectProps extends SelectProps {
   classes?: string
   /*
    * Defines the options available in the select. The SelectOptions object
-   * keys are the property names, while the values correspond  to the text that
+   * keys are the property names, while the values correspond to the text that
    * will be displayed in the UI
    */
   options: SelectOptions

From 409b847bad3b27bbdb33cedc127364aea7f6a54f Mon Sep 17 00:00:00 2001
From: Heitor Carvalho <heitor.carvalho@vtex.com.br>
Date: Thu, 3 Feb 2022 12:55:01 -0300
Subject: [PATCH 5/8] Remove aria-label property from Sort

---
 src/components/search/Sort/Sort.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/search/Sort/Sort.tsx b/src/components/search/Sort/Sort.tsx
index 2dea85f94..02c22999b 100644
--- a/src/components/search/Sort/Sort.tsx
+++ b/src/components/search/Sort/Sort.tsx
@@ -28,7 +28,6 @@ function Sort() {
       options={OptionsMap}
       onChange={(e) => setSort(keys[e.target.selectedIndex])}
       value={sort}
-      aria-label="Product Sort"
       testId="search-sort"
     />
   )

From 590cac3e51c7360eaf698352855abd5764f8083b Mon Sep 17 00:00:00 2001
From: Heitor Carvalho <heitor.carvalho@vtex.com.br>
Date: Thu, 3 Feb 2022 14:42:39 -0300
Subject: [PATCH 6/8] Make 'id' a required attribute for Select

---
 src/components/search/Sort/Sort.tsx |  1 +
 src/components/ui/Select/Select.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/search/Sort/Sort.tsx b/src/components/search/Sort/Sort.tsx
index 02c22999b..659ad3e50 100644
--- a/src/components/search/Sort/Sort.tsx
+++ b/src/components/search/Sort/Sort.tsx
@@ -23,6 +23,7 @@ function Sort() {
 
   return (
     <Select
+      id="sort-select"
       classes="sort / title-small"
       labelText="Sort by"
       options={OptionsMap}
diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx
index 389c36400..6a9fcb14b 100644
--- a/src/components/ui/Select/Select.tsx
+++ b/src/components/ui/Select/Select.tsx
@@ -10,6 +10,11 @@ type SelectOptions = {
 }
 
 interface UISelectProps extends SelectProps {
+  /*
+   * Redefines the id property to be required when using the Select component. The
+   * id will be used to link the UISelect component and its label.
+   */
+  id: string
   /*
    * Defines the CSS class string that will be forwarded to the wrapping div "className" prop.
    */
@@ -28,6 +33,7 @@ interface UISelectProps extends SelectProps {
 }
 
 export default function Select({
+  id,
   options,
   onChange,
   labelText,
@@ -38,13 +44,13 @@ export default function Select({
 }: UISelectProps) {
   return (
     <div data-select className={classes}>
-      {labelText && <label htmlFor="ui-select">{labelText}</label>}
+      {labelText && <label htmlFor={id}>{labelText}</label>}
       <UISelect
         data-testid={testId}
         onChange={onChange}
         value={value}
         aria-label={ariaLabel}
-        id="ui-select"
+        id={id}
       >
         {Object.keys(options).map((key) => (
           <option key={key} value={key}>

From 24470749d588f91ae1c0b6151c992c4ff3f2c5fa Mon Sep 17 00:00:00 2001
From: Heitor Carvalho <heitor.carvalho@vtex.com.br>
Date: Thu, 3 Feb 2022 17:01:52 -0300
Subject: [PATCH 7/8] Change 'SelectOptions' type to Record

---
 src/components/ui/Select/Select.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx
index 6a9fcb14b..0940b20e2 100644
--- a/src/components/ui/Select/Select.tsx
+++ b/src/components/ui/Select/Select.tsx
@@ -5,10 +5,6 @@ import { CaretDown as CaretDownIcon } from 'phosphor-react'
 
 import './select.scss'
 
-type SelectOptions = {
-  [key: string]: string
-}
-
 interface UISelectProps extends SelectProps {
   /*
    * Redefines the id property to be required when using the Select component. The
@@ -24,7 +20,7 @@ interface UISelectProps extends SelectProps {
    * keys are the property names, while the values correspond to the text that
    * will be displayed in the UI
    */
-  options: SelectOptions
+  options: Record<string, string>
   /*
    * Specifies the text that will be displayed in the label right next to the Select.
    * If omitted, the label will not be rendered.

From b4e30c550b586a22b6ffd45a0653c706e4d1ebc8 Mon Sep 17 00:00:00 2001
From: Heitor Carvalho <heitor.carvalho@vtex.com.br>
Date: Thu, 3 Feb 2022 18:44:56 -0300
Subject: [PATCH 8/8] Use className attribute instead of classes

---
 src/components/search/Sort/Sort.tsx | 2 +-
 src/components/ui/Select/Select.tsx | 8 ++------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/search/Sort/Sort.tsx b/src/components/search/Sort/Sort.tsx
index 659ad3e50..24ff7dfe8 100644
--- a/src/components/search/Sort/Sort.tsx
+++ b/src/components/search/Sort/Sort.tsx
@@ -24,7 +24,7 @@ function Sort() {
   return (
     <Select
       id="sort-select"
-      classes="sort / title-small"
+      className="sort / title-small"
       labelText="Sort by"
       options={OptionsMap}
       onChange={(e) => setSort(keys[e.target.selectedIndex])}
diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx
index 0940b20e2..ed11d82fd 100644
--- a/src/components/ui/Select/Select.tsx
+++ b/src/components/ui/Select/Select.tsx
@@ -11,10 +11,6 @@ interface UISelectProps extends SelectProps {
    * id will be used to link the UISelect component and its label.
    */
   id: string
-  /*
-   * Defines the CSS class string that will be forwarded to the wrapping div "className" prop.
-   */
-  classes?: string
   /*
    * Defines the options available in the select. The SelectOptions object
    * keys are the property names, while the values correspond to the text that
@@ -30,16 +26,16 @@ interface UISelectProps extends SelectProps {
 
 export default function Select({
   id,
+  className,
   options,
   onChange,
   labelText,
   value,
   'aria-label': ariaLabel,
-  classes,
   testId,
 }: UISelectProps) {
   return (
-    <div data-select className={classes}>
+    <div data-select className={className}>
       {labelText && <label htmlFor={id}>{labelText}</label>}
       <UISelect
         data-testid={testId}