agroptima-design-system 0.14.0 → 0.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Menu/Menu.scss

@@ -4,15 +4,19 @@
 @use '../../settings/depth';
 
 .menu {
+  @include typography.body-regular-primary;
   list-style-type: none;
   display: flex;
   flex-direction: column;
   padding: 0;
 
-  .menu-option {
+  &-item {
     display: flex;
-    flex-direction: column;
     gap: config.$space-2x;
+    padding: config.$space-3x;
+    text-decoration: none;
+    color: inherit;
+    align-items: center;
     cursor: default;
 
     .icon {
@@ -24,46 +28,10 @@
       }
     }
 
-    details {
-      &[open] {
-        > .container .right .icon {
-          transform: rotate(180deg);
-        }
-      }
-      &:has(> .dropdown) {
-        > .container .right {
-          display: inline-block;
-        }
-
-        > .dropdown {
-          > .menu-option details .container {
-            padding-left: config.$space-8x;
-          }
-        }
-      }
-
-      .container {
-        display: flex;
-        padding: config.$space-3x;
-
-        .left {
-          display: flex;
-          width: 100%;
-          gap: config.$space-2x;
-          justify-content: flex-start;
-          align-items: baseline;
-        }
-
-        .right {
-          display: none;
-          margin-top: auto;
-          margin-bottom: auto;
-        }
-      }
+    .title {
+      flex: 1;
     }
 
-    @include typography.body-regular-primary;
-
     &.primary {
       color: color_alias.$neutral-white;
       background: color_alias.$neutral-color-900;
@@ -81,29 +49,30 @@
         background: color_alias.$primary-color-600;
       }
 
-      &.selected {
+      &.active {
         background: color_alias.$primary-color-600;
       }
+    }
+  }
 
-      details {
-        &:has(> .dropdown) {
-          > .dropdown {
-            .menu-option {
-              background: color_alias.$neutral-color-100;
-              color: color_alias.$neutral-color-1000;
-
-              &:hover {
-                background: color_alias.$primary-color-100;
-              }
-            }
+  details[open] {
+    .arrow {
+      transform: rotate(180deg);
+    }
+  }
+  .menu-dropdown .menu {
+    .menu-item {
+      padding-left: config.$space-8x;
+      background: color_alias.$neutral-color-100;
+      color: color_alias.$neutral-color-1000;
 
-            .selected {
-              background: color_alias.$primary-color-100;
-              box-shadow: inset -3px 0px 0px 0px color_alias.$primary-color-600;
-            }
-          }
-        }
+      &:hover {
+        background: color_alias.$primary-color-100;
       }
     }
+    .active {
+      background: color_alias.$primary-color-100;
+      box-shadow: inset -3px 0px 0px 0px color_alias.$primary-color-600;
+    }
   }
 }

package/src/atoms/Menu/Menu.tsx

@@ -6,19 +6,15 @@ export type Variant = 'primary'
 
 export interface MenuProps extends React.ComponentPropsWithoutRef<'ul'> {
   variant?: Variant
-  isDropdown?: boolean
 }
 
 export function Menu({
   variant = 'primary',
   className,
-  isDropdown = false,
   children,
   ...props
 }: MenuProps): React.JSX.Element {
-  const cssClasses = classNames('menu', variant, className, {
-    dropdown: isDropdown,
-  })
+  const cssClasses = classNames('menu', variant, className)
 
   return (
     <ul className={cssClasses} role="menu" {...props}>

package/src/atoms/Menu/MenuDropdown.tsx

@@ -0,0 +1,42 @@
+import { classNames } from '../../utils/classNames'
+import { Icon, IconType } from '../Icon'
+import './Menu.scss'
+
+export type Variant = 'primary'
+
+export interface MenuDropdownProps
+  extends React.ComponentPropsWithoutRef<'li'> {
+  title: string
+  variant?: Variant
+  icon?: IconType
+  isOpen?: boolean
+  name?: string
+}
+
+export function MenuDropdown({
+  variant = 'primary',
+  className,
+  icon,
+  title,
+  children,
+  isOpen,
+  name,
+  ...props
+}: MenuDropdownProps): React.JSX.Element {
+  const cssClasses = classNames('menu-item', variant, className)
+
+  return (
+    <li tabIndex={0} role="menuitem" className="menu-dropdown" {...props}>
+      <details open={isOpen} name={name}>
+        <summary className={cssClasses}>
+          {icon && <Icon name={icon} />}
+          <span className="title">{title}</span>
+          <Icon className="arrow" name="AngleDown" />
+        </summary>
+        <ul className="menu" role="menu">
+          {children}
+        </ul>
+      </details>
+    </li>
+  )
+}

package/src/atoms/Menu/MenuLink.tsx

@@ -0,0 +1,39 @@
+import './Menu.scss'
+import React from 'react'
+import { Icon, IconType } from '../Icon'
+import { classNames } from '../../utils/classNames'
+import Link from 'next/link'
+
+export type Variant = 'primary'
+
+export interface MenuLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  title: string
+  variant?: Variant
+  icon?: IconType
+  isActive?: boolean
+  href: string
+}
+
+export function MenuLink({
+  variant = 'primary',
+  isActive = false,
+  className,
+  icon,
+  title,
+  href,
+  ...props
+}: MenuLinkProps): React.JSX.Element {
+  const cssClasses = classNames('menu-item', variant, className, {
+    active: isActive,
+  })
+
+  return (
+    <li tabIndex={0} role="menuitem">
+      <Link href={href} {...props} className={cssClasses}>
+        {icon && <Icon name={icon} />}
+        <span className="title">{title}</span>
+      </Link>
+    </li>
+  )
+}

package/src/atoms/Menu/index.ts

@@ -1,4 +1,5 @@
 import { Menu } from './Menu'
-import { MenuOption } from './MenuOption'
+import { MenuLink } from './MenuLink'
+import { MenuDropdown } from './MenuDropdown'
 
-export { Menu, MenuOption }
+export { Menu, MenuLink, MenuDropdown }

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,10 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+
+## 0.14.1
+- Added MenuLink and MenuDropdown components to Storybook and remove MenuOption component.
+
 ## 0.14.0
 - Added Menu component to Storybook.
 

package/src/stories/Menu.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Menu, MenuOption } from '../atoms/Menu'
+import { Menu, MenuLink, MenuDropdown } from '../atoms/Menu'
 
 const figmaPrimaryDesign = {
   design: {
@@ -23,11 +23,14 @@ const meta = {
     title: {
       description: 'Component title text',
     },
-    isSelected: {
-      description: 'Is the element selected?',
+    isActive: {
+      description: 'Is the element active?',
     },
-    onClick: {
-      description: 'Event triggered when the component is clicked',
+    href: {
+      description: 'link to the page',
+    },
+    isOpen: {
+      description: 'Is the dropdown open?',
     },
   },
   parameters: figmaPrimaryDesign,
@@ -35,116 +38,29 @@ const meta = {
 
 export default meta
 
-export const MenuWithSecondLevelDropdown = {
-  render: () => (
-    <Menu>
-      <MenuOption title="Tekken 8" icon="Edit">
-        <Menu isDropdown>
-          <MenuOption title="Walkthrough" onClick={() => alert('click')} />
-          <MenuOption title="Characters" onClick={() => alert('click')} />
-          <MenuOption title="Story" onClick={() => alert('click')} />
-        </Menu>
-      </MenuOption>
-      <MenuOption
-        title="The Legend of Zelda: Tears of the Kingdom"
-        icon="Delete"
-        onClick={() => alert('click')}
-      />
-      <MenuOption
-        title="Metal Gear Solid 5: Ground Zeroes + The Phantom Pain"
-        icon="Show"
-      >
-        <Menu isDropdown>
-          <MenuOption title="Walkthrough" onClick={() => alert('click')} />
-          <MenuOption title="Characters" onClick={() => alert('click')} />
-          <MenuOption title="Story" onClick={() => alert('click')} />
-        </Menu>
-      </MenuOption>
-      <MenuOption title="Stray" icon="Info" onClick={() => alert('click')} />
-    </Menu>
-  ),
-}
-
-export const FirstLevelMenu = {
-  render: () => (
-    <Menu>
-      <MenuOption title="Tekken 8" icon="Edit" onClick={() => alert('click')} />
-      <MenuOption
-        title="The Legend of Zelda: Tears of the Kingdom"
-        icon="Delete"
-        onClick={() => alert('click')}
-      />
-      <MenuOption
-        title="Metal Gear Solid 5: Ground Zeroes + The Phantom Pain"
-        icon="Show"
-        onClick={() => alert('click')}
-      />
-      <MenuOption title="Stray" icon="Info" onClick={() => alert('click')} />
-    </Menu>
-  ),
-}
-
-export const MenuWithSecondLevelPreselectedOption = {
+export const MenuWithLinks = {
   render: () => (
     <Menu>
-      <MenuOption isSelected title="Tekken 8" icon="Edit">
-        <Menu isDropdown>
-          <MenuOption title="Walkthrough" onClick={() => alert('click')} />
-          <MenuOption
-            isSelected
-            title="Characters"
-            onClick={() => alert('click')}
-          />
-          <MenuOption title="Story" onClick={() => alert('click')} />
-        </Menu>
-      </MenuOption>
-      <MenuOption
+      <MenuLink title="Tekken 8" href="some-link" />
+      <MenuLink
         title="The Legend of Zelda: Tears of the Kingdom"
         icon="Delete"
-        onClick={() => alert('click')}
+        href="some-link"
+        isActive
       />
-      <MenuOption
+      <MenuLink
         title="Metal Gear Solid 5: Ground Zeroes + The Phantom Pain"
         icon="Show"
-      >
-        <Menu isDropdown>
-          <MenuOption title="Walkthrough" onClick={() => alert('click')} />
-          <MenuOption title="Characters" onClick={() => alert('click')} />
-          <MenuOption title="Story" onClick={() => alert('click')} />
-        </Menu>
-      </MenuOption>
-      <MenuOption title="Stray" icon="Info" onClick={() => alert('click')} />
-    </Menu>
-  ),
-}
-
-export const MenuWithFirstLevelPreselectedOption = {
-  render: () => (
-    <Menu>
-      <MenuOption title="Tekken 8" icon="Edit">
-        <Menu isDropdown>
-          <MenuOption title="Walkthrough" onClick={() => alert('click')} />
-          <MenuOption title="Characters" onClick={() => alert('click')} />
-          <MenuOption title="Story" onClick={() => alert('click')} />
-        </Menu>
-      </MenuOption>
-      <MenuOption
-        isSelected
-        title="The Legend of Zelda: Tears of the Kingdom"
-        icon="Delete"
-        onClick={() => alert('click')}
+        href="some-link"
       />
-      <MenuOption
-        title="Metal Gear Solid 5: Ground Zeroes + The Phantom Pain"
-        icon="Show"
-      >
-        <Menu isDropdown>
-          <MenuOption title="Walkthrough" onClick={() => alert('click')} />
-          <MenuOption title="Characters" onClick={() => alert('click')} />
-          <MenuOption title="Story" onClick={() => alert('click')} />
-        </Menu>
-      </MenuOption>
-      <MenuOption title="Stray" icon="Info" onClick={() => alert('click')} />
+      <MenuDropdown title="Open" icon="AddCircle" name="menu" isOpen>
+        <MenuLink title="Stray" href="some-link" isActive />
+        <MenuLink title="Fallout 3" href="some-link" />
+      </MenuDropdown>
+      <MenuDropdown title="Close" name="menu">
+        <MenuLink title="Dark souls" href="some-link" />
+        <MenuLink title="Elder ring" href="some-link" />
+      </MenuDropdown>
     </Menu>
   ),
 }

package/tests/Menu.spec.tsx

@@ -1,59 +1,57 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { Menu } from '@/atoms/Menu/Menu'
-import { MenuOption } from '@/atoms/Menu/MenuOption'
+import { MenuDropdown, MenuLink } from '@/atoms/Menu'
 
 describe('Menu', () => {
   it('renders first-level menu', () => {
-    const { getByRole, getByText, getAllByRole } = render(
+    const { getByRole, getByText } = render(
       <Menu>
-        <MenuOption title="Tekken 8" icon="Edit" />
-        <MenuOption
-          isSelected
+        <MenuLink title="Tekken 8" icon="Edit" href="#" />
+        <MenuLink
+          isActive
           title="The Legend of Zelda: Tears of the Kingdom"
           icon="Delete"
+          href="#"
         />
       </Menu>,
     )
 
     expect(getByRole('menu')).toHaveClass(`menu primary`)
-    expect(getAllByRole('menuitem')[1]).toHaveClass(`selected`)
+    expect(
+      getByRole('link', { name: 'The Legend of Zelda: Tears of the Kingdom' }),
+    ).toHaveClass(`active`)
     expect(getByText(/Tekken/i)).toBeInTheDocument()
     expect(getByText(/Zelda/i)).toBeInTheDocument()
-    expect(getAllByRole('img')[0].title).toBe('Edit')
-    expect(getAllByRole('img')[2].title).toBe('Delete')
+    expect(getByRole('img', { name: 'Edit' })).toBeInTheDocument()
+    expect(getByRole('img', { name: 'Delete' })).toBeInTheDocument()
   })
 
   it('renders second-level menu', () => {
-    const { getByText, getAllByRole } = render(
+    const { getByText, getAllByRole, getByRole } = render(
       <Menu>
-        <MenuOption title="Tekken 8" icon="Edit">
-          <Menu isDropdown>
-            <MenuOption title="Walkthrough" onClick={() => alert('click')} />
-            <MenuOption
-              isSelected
-              title="Characters"
-              onClick={() => alert('click')}
-            />
-            <MenuOption title="Story" onClick={() => alert('click')} />
-          </Menu>
-        </MenuOption>
-        <MenuOption
+        <MenuDropdown title="Tekken 8" icon="Edit">
+          <MenuLink title="Walkthrough" href="#" />
+          <MenuLink isActive title="Characters" href="#" />
+          <MenuLink title="Story" href="#" />
+        </MenuDropdown>
+        <MenuLink
           title="The Legend of Zelda: Tears of the Kingdom"
           icon="Delete"
+          href="#"
         />
       </Menu>,
     )
 
     expect(getAllByRole('menu').length).toBe(2)
-    expect(getAllByRole('menuitem')[2]).toHaveClass(`selected`)
+    expect(getByRole('link', { name: 'Characters' })).toHaveClass(`active`)
     expect(getByText(/Tekken/i)).toBeInTheDocument()
     expect(getByText(/Walkthrough/i)).toBeInTheDocument()
     expect(getByText(/Characters/i)).toBeInTheDocument()
     expect(getByText(/Story/i)).toBeInTheDocument()
     expect(getByText(/Zelda/i)).toBeInTheDocument()
-    expect(getAllByRole('img')[0].title).toBe('Edit')
-    expect(getAllByRole('img')[2].title).toBe('AngleDown')
-    expect(getAllByRole('img')[5].title).toBe('Delete')
+    expect(getByRole('img', { name: 'Edit' })).toBeInTheDocument()
+    expect(getByRole('img', { name: 'AngleDown' })).toBeInTheDocument()
+    expect(getByRole('img', { name: 'Delete' })).toBeInTheDocument()
   })
 })

package/src/atoms/Menu/MenuOption.tsx

@@ -1,79 +0,0 @@
-import './Menu.scss'
-import React from 'react'
-import { Icon, IconType } from '../Icon'
-import { classNames } from '../../utils/classNames'
-
-export type Variant = 'primary'
-
-export interface MenuOptionProps extends React.ComponentPropsWithoutRef<'li'> {
-  variant?: Variant
-  icon?: IconType
-  title: string
-  isSelected?: boolean
-}
-
-export function MenuOption({
-  variant = 'primary',
-  className,
-  isSelected = false,
-  icon,
-  title,
-  children,
-  onClick,
-  ...props
-}: MenuOptionProps): React.JSX.Element {
-  const cssClasses = classNames('menu-option', variant, className, {
-    selected: isSelected,
-  })
-
-  function closePreviousSelectedDropdown(currentTarget: HTMLLIElement) {
-    document.querySelectorAll('details[open]').forEach((detailElement) => {
-      const firstLevelMenuOption = detailElement?.closest('li')
-      const currentFirstLevelMenuOption = currentTarget
-        ?.closest('details')
-        ?.closest('li')
-
-      if (firstLevelMenuOption !== currentFirstLevelMenuOption)
-        detailElement.removeAttribute('open')
-    })
-  }
-
-  function unselectPreviousOption() {
-    document
-      .querySelectorAll('.selected')
-      .forEach((option) => option.classList.remove('selected'))
-  }
-
-  function setOptionSelected(event: React.MouseEvent<HTMLLIElement>) {
-    event.stopPropagation()
-
-    closePreviousSelectedDropdown(event.currentTarget)
-    unselectPreviousOption()
-
-    event.currentTarget.classList.add('selected')
-    if (onClick) onClick(event)
-  }
-
-  return (
-    <li
-      className={cssClasses}
-      tabIndex={0}
-      role="menuitem"
-      onClick={setOptionSelected}
-      {...props}
-    >
-      <details open={isSelected}>
-        <summary className="container">
-          <div className="left">
-            {icon && <Icon name={icon} />}
-            <span className="title">{title}</span>
-          </div>
-          <div className="right">
-            <Icon name="AngleDown" />
-          </div>
-        </summary>
-        {children}
-      </details>
-    </li>
-  )
-}