agroptima-design-system 0.34.9 → 0.34.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.34.9",
+  "version": "0.34.10",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Select/Select.tsx

@@ -29,6 +29,7 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   onChange?: (value: string) => void
   isSearchable?: boolean
   searchLabel?: string
+  isClereable?: boolean
 }
 
 const EMPTY_OPTION = { id: '', label: '' }
@@ -50,11 +51,12 @@ export function Select({
   defaultValue,
   isSearchable = false,
   searchLabel = 'Search',
+  isClereable = true,
   ...props
 }: SelectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
   const defaultOption =
-    options.find((option) => option.id === defaultValue) || EMPTY_OPTION
+    options.find((option) => option.id === defaultValue) || (isClereable ? EMPTY_OPTION : options[0])
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption)
   const isEmpty = selectedOption.id === EMPTY_OPTION.id
   const isInvalid = Boolean(errors?.length)
@@ -98,6 +100,7 @@ export function Select({
         onClick={toggle}
         onClear={handleClear}
         isEmpty={isEmpty}
+        isClereable={isClereable}
       >
         {selectedOption.label || placeholder}
       </SelectTrigger>

package/src/atoms/Select/SelectTrigger.tsx

@@ -12,6 +12,7 @@ export interface SelectTriggerProps {
   isEmpty: boolean
   onClick: () => void
   onClear: (event: React.MouseEvent) => void
+  isClereable?: boolean
   children: React.ReactNode
 }
 
@@ -24,6 +25,7 @@ export function SelectTrigger({
   isOpen,
   onClick,
   onClear,
+  isClereable=true,
   isEmpty,
   children,
 }: SelectTriggerProps) {
@@ -54,7 +56,7 @@ export function SelectTrigger({
           visible={isEmpty}
         />
       </button>
-      <IconButton
+      {isClereable && (<IconButton
         type="button"
         size="3"
         icon="Close"
@@ -62,7 +64,7 @@ export function SelectTrigger({
         accessibilityLabel="clear"
         onClick={handleClear}
         visible={!isEmpty}
-      />
+      />)}
     </div>
   )
 }

package/src/stories/Select.stories.ts

@@ -82,6 +82,7 @@ export const Primary: Story = {
     accessibilityLabel: 'Select your favourite gaming system options',
     hideLabel: false,
     isSearchable: false,
+    isClereable:  true,
     placeholder: 'Select your favourite gaming system...',
     options: [
       { id: '1', label: 'Nintendo Switch' },
@@ -120,6 +121,7 @@ export const PrimaryWithSelectedOptions: Story = {
     hideLabel: false,
     placeholder: 'Select your favourite gaming system...',
     isSearchable: false,
+    isClereable:  true,
     options: [
       { id: '1', label: 'Nintendo Switch' },
       { id: '2', label: 'PlayStation 5' },
@@ -142,6 +144,7 @@ export const PrimaryWithErrors: Story = {
     hideLabel: false,
     placeholder: 'Select your favourite gaming system...',
     isSearchable: false,
+    isClereable:  true,
     options: [
       { id: '1', label: 'Nintendo Switch' },
       { id: '2', label: 'PlayStation 5' },
@@ -187,6 +190,7 @@ export const PrimaryWithSearch: Story = {
     id: 'select-videogames',
     onChange: (optionId) => console.log('onChange optionId:', optionId),
     isSearchable: true,
+    isClereable:  true,
     searchLabel: 'Search',
   },
   parameters: figmaPrimaryDesign,

package/tests/Select.spec.tsx

@@ -166,4 +166,43 @@ describe('Select', () => {
       playstation5.label,
     )
   })
+
+  describe('when isClereable is false', () => {
+    it('hides deselect button', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Select
+          label="Videogames"
+          name="select-videogames"
+          isSearchable
+          disabled
+          defaultValue={playstation5.id}
+          options={OPTIONS}
+          isClereable={false}
+        />,
+      )
+
+      expect(screen.queryByLabelText(/clear/i)).not.toBeInTheDocument()
+    })
+
+    it('renders first option by default if no other is passed', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Select
+          isClereable={false}
+          helpText="This text can help you"
+          label="Videogames"
+          name="videogames"
+          options={OPTIONS}
+          placeholder="Select your favourite gaming system..."
+        />,
+      )
+
+      expect(screen.getByLabelText('Videogames')).toHaveTextContent(
+        'Nintendo Switch',
+      )
+    })
+  })
 })