(PC-33498)[PRO] feat: add form ui variant to select input component

pass-culture · Feb 10, 2025 · af3d818 · af3d818
1 parent 3543181
commit af3d818
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 14 deletions.
diff --git a/pro/src/components/IndividualOffer/StocksEventEdition/StocksEventEdition.tsx b/pro/src/components/IndividualOffer/StocksEventEdition/StocksEventEdition.tsx
@@ -48,7 +48,7 @@ import { BaseDatePicker } from 'ui-kit/form/DatePicker/BaseDatePicker'
 import { DatePicker } from 'ui-kit/form/DatePicker/DatePicker'
 import { QuantityInput } from 'ui-kit/form/QuantityInput/QuantityInput'
 import { Select } from 'ui-kit/form/Select/Select'
-import { SelectInput } from 'ui-kit/form/Select/SelectInput'
+import { SelectInput, SelectInputVariant } from 'ui-kit/form/Select/SelectInput'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 import { BaseTimePicker } from 'ui-kit/form/TimePicker/BaseTimePicker'
 import { TimePicker } from 'ui-kit/form/TimePicker/TimePicker'
@@ -575,7 +575,7 @@ export const StocksEventEdition = ({
                                 setPriceCategoryIdFilter(event.target.value)
                                 onFilterChange()
                               }}
-                              filterVariant
+                              variant={SelectInputVariant.FILTER}
                               aria-label="Filtrer par tarif"
                             />
                           </div>

diff --git a/pro/src/components/StocksEventList/StocksEventList.tsx b/pro/src/components/StocksEventList/StocksEventList.tsx
@@ -33,7 +33,7 @@ import { serializeStockEvents } from 'pages/IndividualOfferWizard/Stocks/seriali
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonVariant } from 'ui-kit/Button/types'
 import { BaseDatePicker } from 'ui-kit/form/DatePicker/BaseDatePicker'
-import { SelectInput } from 'ui-kit/form/Select/SelectInput'
+import { SelectInput, SelectInputVariant } from 'ui-kit/form/Select/SelectInput'
 import {
   BaseCheckbox,
   PartialCheck,
@@ -463,7 +463,7 @@ export const StocksEventList = ({
                         setPriceCategoryIdFilter(event.target.value)
                         onFilterChange()
                       }}
-                      filterVariant
+                      variant={SelectInputVariant.FILTER}
                       aria-label="Filtrer par tarif"
                     />
                   </div>

diff --git a/pro/src/ui-kit/form/Select/Select.module.scss b/pro/src/ui-kit/form/Select/Select.module.scss
@@ -23,6 +23,24 @@
     line-height: 1.3;
   }
 
+  &.form-variant {
+    height: rem.torem(42px);
+    border-radius: rem.torem(8px);
+
+    &:hover {
+      background: var(--color-grey-light);
+      box-shadow: none;
+    }
+
+    &.has-value {
+      border: solid size.$input-border-width var(--color-black);
+    }
+
+    &:disabled {
+      border: none;
+    }
+  }
+
   &.has-description {
     display: inline-block;
     width: auto;
@@ -34,7 +52,7 @@
   }
 
   &-icon {
-    @include formsM.input-icon-wrapper(20px);
+    @include formsM.input-icon-wrapper(16px);
 
     &.filter-variant {
       @include formsM.input-icon-wrapper(rem.torem(16px), rem.torem(8px));

diff --git a/pro/src/ui-kit/form/Select/Select.tsx b/pro/src/ui-kit/form/Select/Select.tsx
@@ -8,7 +8,7 @@ import {
   FieldLayoutBaseProps,
 } from '../shared/FieldLayout/FieldLayout'
 
-import { SelectInput } from './SelectInput'
+import { SelectInput, SelectInputVariant } from './SelectInput'
 
 type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> &
   FieldLayoutBaseProps & {
@@ -71,6 +71,7 @@ export const Select = ({
         {...field}
         {...selectAttributes}
         onChange={(e) => onCustomChange(e)}
+        variant={SelectInputVariant.FORM}
       />
 
       {description && <span>{description}</span>}

diff --git a/pro/src/ui-kit/form/Select/SelectInput.stories.tsx b/pro/src/ui-kit/form/Select/SelectInput.stories.tsx
@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react'
 import { Formik } from 'formik'
 
-import { SelectInput } from './SelectInput'
+import { SelectInput, SelectInputVariant } from './SelectInput'
 
 export default {
   title: 'ui-kit/forms/SelectInput',
@@ -27,7 +27,22 @@ export const SelectInputFilter: StoryObj<typeof SelectInput> = {
   args: {
     name: 'select',
     options: mockCategoriesOptions,
-    filterVariant: true,
+    variant: SelectInputVariant.FILTER,
+  },
+  decorators: [
+    (Story) => (
+      <Formik initialValues={{ category: 'theatre' }} onSubmit={() => {}}>
+        <Story />
+      </Formik>
+    ),
+  ],
+}
+
+export const SelectInputForm: StoryObj<typeof SelectInput> = {
+  args: {
+    name: 'select',
+    options: mockCategoriesOptions,
+    variant: SelectInputVariant.FORM,
   },
   decorators: [
     (Story) => (

diff --git a/pro/src/ui-kit/form/Select/SelectInput.tsx b/pro/src/ui-kit/form/Select/SelectInput.tsx
@@ -2,30 +2,35 @@ import cn from 'classnames'
 import { ComponentProps } from 'react'
 
 import { SelectOption } from 'commons/custom_types/form'
-import strokeDownIcon from 'icons/stroke-down.svg'
+import fullDownIcon from 'icons/full-down.svg'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import styles from './Select.module.scss'
 
+export enum SelectInputVariant {
+  FILTER = 'filter',
+  FORM = 'form',
+}
+
 interface SelectInputProps extends ComponentProps<'select'> {
   name: string
   defaultOption?: SelectOption | null
   options: SelectOption[]
   hasError?: boolean
-  filterVariant?: boolean
   hasDescription?: boolean
   value: string
+  variant?: SelectInputVariant
 }
 
 export const SelectInput = ({
   hasError = false,
-  filterVariant,
   hasDescription = false,
   defaultOption = null,
   name,
   disabled,
   options,
   className,
+  variant,
   ...field
 }: SelectInputProps): JSX.Element => (
   <div
@@ -40,7 +45,9 @@ export const SelectInput = ({
         [styles['has-error']]: hasError,
         [styles['has-description']]: hasDescription,
         [styles['select-input-placeholder']]: field.value === '',
-        [styles['filter-variant']]: filterVariant,
+        [styles['filter-variant']]: variant === SelectInputVariant.FILTER,
+        [styles['form-variant']]: variant === SelectInputVariant.FORM,
+        [styles['has-value']]: !!field.value,
       })}
       disabled={disabled}
       id={name}
@@ -58,10 +65,10 @@ export const SelectInput = ({
     </select>
     <div
       className={cn(styles['select-input-icon'], {
-        [styles['filter-variant']]: filterVariant,
+        [styles['filter-variant']]: variant === SelectInputVariant.FILTER,
       })}
     >
-      <SvgIcon src={strokeDownIcon} alt="" width="0" />
+      <SvgIcon src={fullDownIcon} alt="" />
     </div>
   </div>
 )