agroptima-design-system 1.2.0-beta.5 → 1.2.1

package/.env.sample

@@ -0,0 +1 @@
+CHROMATIC_PROJECT_TOKEN= "The Token is in LastPass"

package/package.json

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

package/src/atoms/Menu/Menu.scss

@@ -1,6 +1,7 @@
 @use '../../settings/typography/content' as typography;
 @use '../../settings/config';
 @use '../../settings/depth';
+@use '../../settings/breakpoints';
 
 .menu {
   @include typography.body-regular-primary;
@@ -54,14 +55,13 @@
     }
   }
 
-  details[open] {
-    .arrow {
-      transform: rotate(180deg);
-    }
+  details[open]>.menu-item .arrow {
+    transform: rotate(180deg);
   }
+
   .menu-dropdown .menu {
     .menu-item {
-      padding-left: config.$space-8x;
+      padding-left: config.$space-3x;
       background: var(--neutral-color-100);
       color: var(--neutral-color-1000);
 
@@ -69,13 +69,38 @@
         background: var(--primary-color-100);
       }
     }
+
+    .arrow > svg {                                                                                                                                       
+      fill: var(--primary-color-600);                                                                                                                   
+      path {                                                                                                                                             
+        fill: var(--primary-color-600);                                                                                                                 
+      }                             
+    }
+
     .active {
       background: var(--primary-color-100);
-      box-shadow: inset -3px 0px 0px 0px var(--primary-color-600);
+      box-shadow: inset -3px 0px 0px 0px var(--primary-color-100);
     }
   }
 
+  .menu-dropdown .menu .menu-dropdown .menu{
+      .menu-item {
+        padding-left: config.$space-8x;
+        background: var(--neutral-color-50);
+        color: var(--neutral-color-1000);
+
+        &:hover {
+          background: var(--primary-color-100);
+        }
+      }
+
+      .active {
+        background: var(--primary-color-100);
+        box-shadow: inset -3px 0px 0px 0px var(--primary-color-100);
+      }
+    }
+
   .menu-item::-webkit-details-marker {
     display: none;
   }
-}
+}

package/src/atoms/Menu/MenuDropdown.tsx

@@ -27,9 +27,9 @@ export function MenuDropdown({
     <li tabIndex={0} role="menuitem" className="menu-dropdown" {...props}>
       <details open={isOpen} name={name}>
         <summary className={classNames('menu-item', variant, className)}>
-          {icon && <Icon name={icon} />}
+          {icon && <Icon name={icon} size="3" />}
           <span className="title">{title}</span>
-          <Icon className="arrow" name="AngleDown" />
+          <Icon className="arrow" name="AngleDown" size="3" />
         </summary>
         <ul className="menu" role="menu">
           {children}

package/src/atoms/Select/InfiniteSelect.tsx

@@ -39,7 +39,7 @@ export interface InfiniteSelectProps<T> extends Omit<
   query: (payload: Payload) => Promise<{ items: T[]; totalPages: number }>
   errors?: string[]
   fullWidth?: boolean
-  onChange?: (value: T) => void
+  onChange?: (value: T | null) => void
 }
 
 export function InfiniteSelect<T extends { uid: string }>({
@@ -90,6 +90,7 @@ export function InfiniteSelect<T extends { uid: string }>({
 
   const handleClear = () => {
     setSelectedItem(null)
+    onChange(null)
   }
   const handleSelectOption = (item: T) => {
     // TODO: MultiSelect case

package/src/stories/Changelog.mdx

@@ -4,10 +4,18 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.1
+
+* Add a third level to the MenuDropdown component
+
 ## 1.2.0
 
 * Add NotificationCenter components
 
+## 1.1.2
+
+* Fix selection clearing in InfiniteSelect selector
+
 ## 1.1.1
 
 * Update to Storybook 10

package/src/stories/InfiniteSelect.stories.ts

@@ -140,6 +140,9 @@ export const Primary: Story = {
       return item.name || ''
     },
     query: fakeQuery,
+    onChange: (value) => {
+      console.log('selected', value)
+    },
   },
   parameters: figmaPrimaryDesign,
 }

package/src/stories/Menu.stories.tsx

@@ -75,6 +75,30 @@ export const MenuWithLinks: Story = {
         <MenuLink title="Dark souls" href="some-link" />
         <MenuLink title="Elder ring" href="some-link" />
       </MenuDropdown>
+      <MenuDropdown
+        title="Three level menu"
+        icon="AddCircle"
+        name="menu"
+        isOpen
+      >
+        <MenuDropdown title="Second Level" name="submenu">
+          <MenuLink title="Third Level 1" href="some-link" />
+          <MenuLink title="Third Level 2" href="some-link" />
+        </MenuDropdown>
+      </MenuDropdown>
+    </Menu>
+  ),
+}
+export const MenuThirdLevel: Story = {
+  render: () => (
+    <Menu>
+      <MenuDropdown title="Final Fantasy" icon="AddCircle" name="menu" isOpen>
+        <MenuDropdown title="Bestiary" name="submenu">
+          <MenuLink title="Chocobo" href="some-link" />
+          <MenuLink title="Moguri" href="some-link" isActive />
+        </MenuDropdown>
+      </MenuDropdown>
+      <MenuLink title="Metroid" icon="Delete" href="#" />
     </Menu>
   ),
 }

package/tests/Menu.spec.tsx

@@ -54,4 +54,30 @@ describe('Menu', () => {
     expect(getByRole('img', { name: 'AngleDown' })).toBeInTheDocument()
     expect(getByRole('img', { name: 'Delete' })).toBeInTheDocument()
   })
+  it('renders third-level menu', () => {
+    const { getAllByRole, getByText } = render(
+      <Menu>
+        <MenuDropdown title="Final Fantasy">
+          <MenuDropdown title="Final Fantasy VIII">
+            <MenuLink title="Walkthrough" href="#" />
+            <MenuLink title="Characters" href="#" />
+            <MenuLink title="Story" href="#" />
+          </MenuDropdown>
+        </MenuDropdown>
+        <MenuLink
+          title="The Legend of Zelda: Tears of the Kingdom"
+          icon="Delete"
+          href="#"
+        />
+      </Menu>,
+    )
+
+    expect(getAllByRole('menu').length).toBe(3)
+    expect(getByText('Final Fantasy')).toBeInTheDocument()
+    expect(getByText(/VIII/i)).toBeInTheDocument()
+    expect(getByText(/Walkthrough/i)).toBeInTheDocument()
+    expect(getByText(/Characters/i)).toBeInTheDocument()
+    expect(getByText(/Story/i)).toBeInTheDocument()
+    expect(getByText(/Zelda/i)).toBeInTheDocument()
+  })
 })