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

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.30-beta.0",
+  "version": "1.2.31",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Button/BaseButton.tsx

@@ -13,8 +13,7 @@ type HtmlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
 type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps
 
 export type BaseButtonProps =
-  | (HtmlButtonProps & CommonProps)
-  | (AnchorProps & CommonProps)
+  (HtmlButtonProps & CommonProps) | (AnchorProps & CommonProps)
 
 const hasHref = (
   props: HtmlButtonProps | AnchorProps,

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/atoms/Modal/Modal.tsx

@@ -13,12 +13,7 @@ import {
 } from '.'
 
 export type Variant =
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'discard'
-  | 'details'
+  'info' | 'success' | 'warning' | 'error' | 'discard' | 'details'
 
 export interface ModalProps {
   id: string

package/src/icons/discount.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#discount__a)"><path d="M10 20c-.4 0-.783-.075-1.15-.225a2.942 2.942 0 0 1-.975-.65c-.483-.483-.9-.8-1.25-.95-.35-.15-.875-.225-1.575-.225a2.893 2.893 0 0 1-2.125-.875 2.893 2.893 0 0 1-.875-2.125c0-.7-.075-1.225-.225-1.575-.15-.35-.467-.767-.95-1.25a2.941 2.941 0 0 1-.65-.975A3.009 3.009 0 0 1 0 10c0-.4.075-.783.225-1.15a2.94 2.94 0 0 1 .65-.975c.483-.483.8-.9.95-1.25.15-.35.225-.875.225-1.575 0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 5.05 2.05c.7 0 1.225-.075 1.575-.225.35-.15.767-.467 1.25-.95.283-.283.608-.5.975-.65A3.01 3.01 0 0 1 10 0c.4 0 .783.075 1.15.225.367.15.692.367.975.65.483.483.9.8 1.25.95.35.15.875.225 1.575.225.833 0 1.542.292 2.125.875s.875 1.292.875 2.125c0 .7.075 1.225.225 1.575.15.35.467.767.95 1.25.283.283.5.608.65.975.15.367.225.75.225 1.15 0 .4-.075.783-.225 1.15a2.94 2.94 0 0 1-.65.975c-.483.483-.8.9-.95 1.25-.15.35-.225.875-.225 1.575 0 .833-.292 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875c-.7 0-1.225.075-1.575.225-.35.15-.767.467-1.25.95a2.94 2.94 0 0 1-.975.65A3.01 3.01 0 0 1 10 20Zm0-2c.133 0 .262-.03.387-.087.125-.059.23-.13.313-.213.683-.683 1.325-1.146 1.925-1.387.6-.242 1.375-.363 2.325-.363.283 0 .52-.096.713-.287a.968.968 0 0 0 .287-.713c0-.967.12-1.746.363-2.337.241-.592.704-1.23 1.387-1.913.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.683-.683-1.146-1.325-1.387-1.925-.242-.6-.363-1.375-.363-2.325a.967.967 0 0 0-.287-.712.968.968 0 0 0-.713-.288c-.967 0-1.746-.12-2.337-.362-.592-.242-1.23-.705-1.913-1.388a1.085 1.085 0 0 0-.313-.212.907.907 0 0 0-.774 0c-.125.058-.23.129-.313.212-.683.683-1.325 1.146-1.925 1.388-.6.241-1.375.362-2.325.362a.968.968 0 0 0-.712.288.968.968 0 0 0-.288.712c0 .967-.12 1.746-.362 2.338-.242.591-.705 1.229-1.388 1.912-.2.2-.3.433-.3.7 0 .267.1.5.3.7.683.683 1.146 1.325 1.388 1.925.241.6.362 1.375.362 2.325 0 .283.096.52.288.713a.968.968 0 0 0 .712.287c.967 0 1.746.12 2.338.363.591.241 1.229.704 1.912 1.387.083.083.188.154.313.213A.907.907 0 0 0 10 18Zm2.5-4c.417 0 .77-.146 1.063-.438.291-.291.437-.645.437-1.062 0-.417-.146-.77-.438-1.063A1.446 1.446 0 0 0 12.5 11c-.417 0-.77.146-1.063.438A1.446 1.446 0 0 0 11 12.5c0 .417.146.77.438 1.063.291.291.645.437 1.062.437Zm-5.05-.05 6.5-6.5-1.4-1.4-6.5 6.5 1.4 1.4Zm1.112-5.387C8.854 8.27 9 7.917 9 7.5c0-.417-.146-.77-.438-1.063A1.447 1.447 0 0 0 7.5 6c-.417 0-.77.146-1.063.438A1.447 1.447 0 0 0 6 7.5c0 .417.146.77.438 1.063.291.291.645.437 1.062.437.417 0 .77-.146 1.063-.438Z" fill="#161C26"/></g><defs><clipPath id="discount__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/index.tsx

@@ -22,6 +22,7 @@ import CreditNote from './credit-note.svg'
 import Delete from './delete.svg'
 import Delivery from './delivery.svg'
 import DeliveryNote from './delivery-note.svg'
+import Discount from './discount.svg'
 import Done from './done.svg'
 import DoubleArrowLeft from './double-arrow-left.svg'
 import DoubleArrowRight from './double-arrow-right.svg'
@@ -98,6 +99,7 @@ export const icons = {
   Delete,
   Delivery,
   DeliveryNote,
+  Discount,
   Done,
   DoubleArrowLeft,
   DoubleArrowRight,

package/src/stories/Changelog.mdx

@@ -4,6 +4,18 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.31
+
+* Add Discount icon
+
+## 1.2.30
+
+* Fix Webpack icons exports bug
+
+## 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'))
+  })
 })

package/.claude/settings.local.json

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