From 64d68c556dfea455e065397239c2fd7c2ef1c51b Mon Sep 17 00:00:00 2001
From: Maria Morales Reina <124587546+marmorrei@users.noreply.github.com>
Date: Mon, 10 Jun 2024 10:34:51 +0200
Subject: [PATCH] 
 1248-feuiadd-disabled-property-to-button-to-pass-as-prop-in-dropdown-component
 (#1334)

---
 packages/ui/CHANGELOG.md                      |  7 +++++++
 packages/ui/package.json                      |  2 +-
 .../ui/src/__tests__/atoms/Dropdown.test.tsx  |  6 ++++++
 packages/ui/src/components/atoms/Dropdown.tsx |  3 +++
 .../atoms/Dropdown/Dropdown.stories.tsx       | 19 +++++++++++++++++++
 5 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index dc1812bec..3c7d28eb7 100644
--- 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
index 8d3546712..d04b54dbe 100644
--- 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
index 6e1d39761..f020811af 100644
--- 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
index a7ad56cf8..fd5d911a8 100644
--- 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
index 041d8989a..74151ca08 100644
--- 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} />,
+}