[FSSS-164] Extract UISelect from Sort to its own component (#299)

* Extract UISelect from Sort to its own component

* Rename data-ui-select to data-select

* Change attribute className to classes

* Remove whitespace

* Remove aria-label property from Sort

* Make 'id' a required attribute for Select

* Change 'SelectOptions' type to Record

* Use className attribute instead of classes

Co-authored-by: Fanny Chien <fannychienn@gmail.com>

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
+      id="sort-select"
+      className="sort / title-small"
+      labelText="Sort by"
+      options={OptionsMap}
+      onChange={(e) => setSort(keys[e.target.selectedIndex])}
+      value={sort}
+      testId="search-sort"
+    />
   )
 }
 

src/components/ui/Select/Select.tsx

@@ -0,0 +1,56 @@
+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'
+
+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 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: 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.
+   */
+  labelText?: string
+}
+
+export default function Select({
+  id,
+  className,
+  options,
+  onChange,
+  labelText,
+  value,
+  'aria-label': ariaLabel,
+  testId,
+}: UISelectProps) {
+  return (
+    <div data-select className={className}>
+      {labelText && <label htmlFor={id}>{labelText}</label>}
+      <UISelect
+        data-testid={testId}
+        onChange={onChange}
+        value={value}
+        aria-label={ariaLabel}
+        id={id}
+      >
+        {Object.keys(options).map((key) => (
+          <option key={key} value={key}>
+            {options[key]}
+          </option>
+        ))}
+      </UISelect>
+      <CaretDownIcon size={18} weight="bold" />
+    </div>
+  )
+}

src/components/ui/Select/index.tsx

@@ -0,0 +1 @@
+export { default } from './Select'

src/components/search/Sort/sort.scss → src/components/ui/Select/select.scss

@@ -1,6 +1,6 @@
 @import "../../../styles/scaffold.scss";
 
-.sort {
+[data-select] {
   position: relative;
   display: flex;
   align-items: center;