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

package/.claude/settings.local.json

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

package/package.json

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

@@ -38,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'
@@ -72,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,
@@ -113,6 +114,7 @@ export {
   Improvements,
   Info,
   Invoice,
+  Link,
   Loading,
   Logout,
   Minus,
@@ -146,4 +148,4 @@ export {
   UserMenu,
   ValidateInvoice,
   Warning,
-}
+} as const

package/src/icons/link.svg

@@ -0,0 +1 @@
+<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>

package/src/stories/Changelog.mdx

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

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