agroptima-design-system 1.2.24 → 1.2.26-beta.0

package/package.json

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

package/src/atoms/Collapsible/Collapsible.scss

@@ -43,7 +43,7 @@ details summary::-webkit-details-marker {
 
   &.primary,
   &.secondary {
-    &[open] {
+    &.open {
       .collapsible-header {
         background: transparent;
         border-bottom: 3px solid var(--primary-color-600);
@@ -80,7 +80,7 @@ details summary::-webkit-details-marker {
   }
 }
 
-.collapsible[open] {
+.collapsible.open {
   .collapsible-arrow {
     transform: rotate(90deg);
   }

package/src/atoms/Collapsible/Collapsible.tsx

@@ -1,5 +1,6 @@
 import './Collapsible.scss'
 import type { ComponentPropsWithoutRef } from 'react'
+import { useState } from 'react'
 import { classNames } from '../../utils/classNames'
 import { Icon } from '../Icon'
 
@@ -12,6 +13,7 @@ export interface CollapsibleProps extends ComponentPropsWithoutRef<'details'> {
   disabled?: boolean
   form?: boolean
   noHorizontalPadding?: boolean
+  open?: boolean
 }
 
 export function Collapsible({
@@ -23,10 +25,14 @@ export function Collapsible({
   name,
   form = false,
   noHorizontalPadding = false,
+  open = false,
+  onToggle,
   ...props
 }: CollapsibleProps) {
+  const [isOpen, setIsOpen] = useState(open)
+
   const cssClasses = classNames('collapsible', variant, className, {
-    open: props.open,
+    open: isOpen,
     disabled: disabled,
   })
   const contentCssClasses = classNames('collapsible-content', {
@@ -35,7 +41,17 @@ export function Collapsible({
   })
 
   return (
-    <details name={name} className={cssClasses} aria-label={title} {...props}>
+    <details
+      name={name}
+      className={cssClasses}
+      aria-label={title}
+      open={isOpen}
+      onToggle={(e) => {
+        setIsOpen(e.currentTarget.open)
+        onToggle?.(e)
+      }}
+      {...props}
+    >
       <summary className="collapsible-header">
         <Icon className="collapsible-arrow" name="AngleRight" size="4" />
         <span className="collapsible-title">{title}</span>

package/src/icons/index.tsx

@@ -47,6 +47,7 @@ import Notification from './notification.svg'
 import Orders from './orders.svg'
 import PDF from './pdf.svg'
 import Picture from './picture.svg'
+import PriceList from './price-list.svg'
 import Product from './product.svg'
 import Reason from './reason.svg'
 import Receivables from './receivables.svg'
@@ -121,6 +122,7 @@ export {
   Orders,
   PDF,
   Picture,
+  PriceList,
   Product,
   Reason,
   Receivables,

package/src/icons/price-list.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#price-list__a)"><path d="m19.424 12.25-7.159 7.15a2 2 0 0 1-.676.45c-.25.1-.5.15-.75.15s-.501-.05-.751-.15a2 2 0 0 1-.676-.45L.576 10.575A1.973 1.973 0 0 1 0 9.175V2C0 1.45.196.98.588.587A1.93 1.93 0 0 1 2.002 0h7.184a2.079 2.079 0 0 1 1.427.6l8.811 8.825c.2.2.346.425.438.675a2.062 2.062 0 0 1 0 1.488 1.874 1.874 0 0 1-.438.662ZM10.84 18l7.158-7.15L9.161 2H2.002v7.15L10.84 18ZM4.505 6a1.45 1.45 0 0 0 1.063-.438c.292-.291.439-.645.439-1.062 0-.417-.147-.77-.439-1.063A1.45 1.45 0 0 0 4.506 3a1.45 1.45 0 0 0-1.064.438A1.446 1.446 0 0 0 3.004 4.5c0 .417.146.77.438 1.063A1.45 1.45 0 0 0 4.506 6Z" fill="#444"/></g><defs><clipPath id="price-list__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.25
+
+* Add PriceList icon
+
 ## 1.2.24
 
 * Replace `p` by `div` in NotificationLine component

package/tests/Icon.spec.tsx

@@ -68,6 +68,14 @@ describe('Icon', () => {
     })
   })
 
+  describe('Icon registry', () => {
+    it('renders the PriceList icon', () => {
+      const { getByRole } = render(<Icon name="PriceList" />)
+
+      expect(getByRole('img')).toHaveAttribute('aria-label', 'PriceList')
+    })
+  })
+
   describe('Visibility control', () => {
     it('does not render when visible is false', () => {
       const { container } = render(<Icon name="AngleLeft" visible={false} />)