agroptima-design-system 1.2.28-beta.1 → 1.2.29

package/.github/workflows/publish-package-to-npmjs.yml

@@ -17,7 +17,7 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v6
         with:
-          node-version: '20.x'
+          node-version: 'lts/*'
           registry-url: 'https://registry.npmjs.org'
 
       # Ensure npm 11.5.1 or later is installed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.28-beta.1",
+  "version": "1.2.29",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Collapsible/Collapsible.tsx

@@ -27,8 +27,7 @@ export function Collapsible({
   onToggle,
   ...props
 }: CollapsibleProps) {
-  const [expanded, setExpanded] = useState(false)
-  const isOpen = controlledOpen !== undefined ? controlledOpen : expanded
+  const [isOpen, setIsOpen] = useState(controlledOpen ?? false)
 
   const cssClasses = classNames('collapsible', variant, className, {
     open: isOpen,
@@ -46,7 +45,7 @@ export function Collapsible({
       className={cssClasses}
       aria-label={title}
       onToggle={(e) => {
-        if (controlledOpen === undefined) setExpanded(e.currentTarget.open)
+        setIsOpen(e.currentTarget.open)
         onToggle?.(e)
       }}
       {...props}

package/src/icons/index.tsx

@@ -29,7 +29,6 @@ import Download from './download.svg'
 import Duplicate from './duplicate.svg'
 import Edit from './edit.svg'
 import EditColumns from './edit-columns.svg'
-import Link from './link.svg'
 import ElectronicInvoice from './electronic-invoice.svg'
 import EmptyState from './empty-customize.svg'
 import Error from './error.svg'
@@ -39,6 +38,7 @@ import Import from './import.svg'
 import Improvements from './improvements.svg'
 import Info from './info.svg'
 import Invoice from './invoice.svg'
+import Link from './link.svg'
 import Loading from './loading.svg'
 import Logout from './logout.svg'
 import Minus from './minus.svg'

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.29
+
+* Fix Collapsible styles not updating when closing a default-open collapsible
+
 ## 1.2.28
 
 * Add Link icon

package/tests/Collapsible.spec.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Collapsible } from '../src/atoms/Collapsible'
 import { Input } from '../src/atoms/Input'
@@ -24,4 +25,50 @@ describe('Collapsible', () => {
     expect(getByRole('textbox')).toBeInTheDocument()
     expect(getByRole('group')).toHaveClass(`collapsible primary open`)
   })
+
+  it('removes the open styles when a default-open collapsible is closed', async () => {
+    const user = userEvent.setup()
+    const { getByRole } = render(
+      <Collapsible title="My personal data" name="personal-data" open>
+        <Input
+          accessibilityLabel="Fill the form name"
+          id="name_input"
+          label="Name"
+          name="name"
+          type="name"
+          variant="primary"
+        />
+      </Collapsible>,
+    )
+
+    const group = getByRole('group')
+    expect(group).toHaveClass('open')
+
+    await user.click(group.querySelector('summary')!)
+
+    await waitFor(() => expect(group).not.toHaveClass('open'))
+  })
+
+  it('adds the open styles when a closed collapsible is opened', async () => {
+    const user = userEvent.setup()
+    const { getByRole } = render(
+      <Collapsible title="My personal data" name="personal-data">
+        <Input
+          accessibilityLabel="Fill the form name"
+          id="name_input"
+          label="Name"
+          name="name"
+          type="name"
+          variant="primary"
+        />
+      </Collapsible>,
+    )
+
+    const group = getByRole('group')
+    expect(group).not.toHaveClass('open')
+
+    await user.click(group.querySelector('summary')!)
+
+    await waitFor(() => expect(group).toHaveClass('open'))
+  })
 })