1248-feuiadd-disabled-property-to-button-to-pass-as-prop-in-dropdown-…

…component (#1334)
IT-Academy-BCN · Jun 10, 2024 · 64d68c5 · 64d68c5
1 parent 723541e
commit 64d68c5
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 1 deletion.
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -2,11 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.35.0] - 2024-06-10
+
+### Added
+
+- Added prop disabled to Dropdown
+
 ## [0.34.0] - 2024-06-03
 
 ### Added
 
 - Create RadioGroup Molecule
+
 ## [0.33.1] - 2024-05-29
 
 ### Changed

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@itacademy/ui",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "React FE components for ITAcademy projects.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.es.js",

diff --git a/packages/ui/src/__tests__/atoms/Dropdown.test.tsx b/packages/ui/src/__tests__/atoms/Dropdown.test.tsx
@@ -435,4 +435,10 @@ describe('Dropdown', () => {
       expect(dropdownHeader).toHaveTextContent(/Test select/i)
     })
   })
+
+  it('disables dropdown when prop is passed', () => {
+    render(<Dropdown options={mockOptions} disabled />)
+
+    expect(screen.getByTestId('dropdown-header')).toBeDisabled()
+  })
 })
diff --git a/packages/ui/src/components/atoms/Dropdown.tsx b/packages/ui/src/components/atoms/Dropdown.tsx
@@ -153,6 +153,7 @@ export type TDropdown = HTMLAttributes<HTMLElement> & {
   className?: string
   $size?: 'small' | 'normal' | 'large'
   resetSelectedValue?: boolean
+  disabled?: boolean
 }
 
 export const Dropdown = forwardRef<HTMLDivElement, TDropdown>(
@@ -168,6 +169,7 @@ export const Dropdown = forwardRef<HTMLDivElement, TDropdown>(
       className = '',
       $size = 'normal',
       resetSelectedValue = undefined,
+      disabled = undefined,
       ...rest
     },
     ref
@@ -226,6 +228,7 @@ export const Dropdown = forwardRef<HTMLDivElement, TDropdown>(
             data-testid="dropdown-header"
             onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             $size={$size}
+            disabled={disabled}
           >
             {selectedOption ? (
               <StyledFlexBox

diff --git a/packages/ui/src/stories/atoms/Dropdown/Dropdown.stories.tsx b/packages/ui/src/stories/atoms/Dropdown/Dropdown.stories.tsx
@@ -25,6 +25,7 @@ const meta: Meta<typeof Dropdown> = {
       control: { type: 'select' },
       options: ['small', 'normal', 'large'],
     },
+    disabled: { control: 'boolean' },
   },
 }
 
@@ -238,3 +239,21 @@ export const WithSizeLarge: DropdownStory = {
   },
   render: (args) => <Dropdown {...args} />,
 }
+
+export const DisabledDropdown: DropdownStory = {
+  args: {
+    placeholder: 'Disabled dropdown',
+    options: [
+      {
+        id: '1',
+        name: 'Option 1',
+      },
+      {
+        id: '2',
+        name: 'Option 2',
+      },
+    ],
+    disabled: true,
+  },
+  render: (args) => <Dropdown {...args} />,
+}