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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.28-beta.0",
+  "version": "1.2.29-beta.0",
   "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/stories/Changelog.mdx

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

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'))
+  })
 })

package/src/icons/link.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 15H5c-1.383 0-2.563-.488-3.538-1.463C.488 12.563 0 11.383 0 10s.487-2.563 1.462-3.537C2.438 5.487 3.617 5 5 5h4v2H5c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 2 10c0 .833.292 1.542.875 2.125A2.893 2.893 0 0 0 5 13h4v2Zm-3-4V9h8v2H6Zm5 4v-2h4c.833 0 1.542-.292 2.125-.875A2.893 2.893 0 0 0 18 10c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 15 7h-4V5h4c1.383 0 2.563.487 3.538 1.463C19.512 7.437 20 8.617 20 10s-.488 2.563-1.462 3.537C17.562 14.512 16.383 15 15 15h-4Z" fill="#161C26"/></svg>