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

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git rev-list *)"
+    ]
+  }
+}

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: 'lts/*'
+          node-version: '20.x'
           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.29",
+  "version": "1.2.30-beta.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Collapsible/Collapsible.tsx

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

package/src/atoms/Icon.tsx

@@ -1,6 +1,6 @@
 import './Icon.scss'
 import type { ReactNode } from 'react'
-import * as icons from '../icons'
+import { icons } from '../icons'
 import { classNames } from '../utils/classNames'
 export type IconType = keyof typeof icons
 
@@ -33,10 +33,12 @@ export const Icon: React.FC<IconProps> = ({
     rotate: name === 'Loading',
   })
 
+  const IconComponent = icons[name]
+
   if (decorative) {
     return (
       <span aria-hidden="true" className={cssClasses}>
-        {icons[name](props) as ReactNode}
+        {IconComponent ? ((<IconComponent {...props} />) as ReactNode) : null}
       </span>
     )
   }
@@ -48,7 +50,7 @@ export const Icon: React.FC<IconProps> = ({
       title={accessibilityLabel || name}
       className={cssClasses}
     >
-      {icons[name](props) as ReactNode}
+      {IconComponent ? ((<IconComponent {...props} />) as ReactNode) : null}
     </span>
   )
 }

package/src/icons/index.tsx

@@ -73,7 +73,7 @@ import UserMenu from './user-menu.svg'
 import ValidateInvoice from './validate-invoice.svg'
 import Warning from './warning.svg'
 
-export {
+export const icons = {
   Add,
   AddCircle,
   AngleDown,
@@ -148,4 +148,4 @@ export {
   UserMenu,
   ValidateInvoice,
   Warning,
-}
+} as const

package/src/stories/Changelog.mdx

@@ -4,10 +4,6 @@ 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/src/stories/Icons.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/blocks'
-import * as Icons from '../icons'
+import { icons } from '../icons'
 
 <Meta title="Design System/Styles/Icons" tags={['Styles', 'Documentation','!Components']} />
 
@@ -11,7 +11,7 @@ import * as Icons from '../icons'
 
 <IconGallery>
   {
-    Object.values(Icons).map((Icon) => {
+    Object.values(icons).map((Icon) => {
       return(
         <IconItem name={Icon['name'].substring(3)}>
           <Icon />

package/tests/Collapsible.spec.tsx

@@ -1,5 +1,4 @@
-import { render, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
+import { render } from '@testing-library/react'
 import React from 'react'
 import { Collapsible } from '../src/atoms/Collapsible'
 import { Input } from '../src/atoms/Input'
@@ -25,50 +24,4 @@ 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'))
-  })
 })