agroptima-design-system 0.13.1 → 0.14.0

package/package.json

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

package/src/atoms/{Card.scss → Card/Card.scss}

@@ -1,7 +1,7 @@
-@use '../settings/color_alias';
-@use '../settings/typography/content' as typography;
-@use '../settings/config';
-@use '../settings/breakpoints';
+@use '../../settings/color_alias';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/breakpoints';
 
 .card {
   display: flex;

package/src/atoms/{Card.tsx → Card/Card.tsx}

@@ -1,6 +1,6 @@
 import './Card.scss'
 import React from 'react'
-import { classNames } from '../utils/classNames'
+import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/{CardContent.tsx → Card/CardContent.tsx}

@@ -1,6 +1,6 @@
 import './Card.scss'
 import React from 'react'
-import { classNames } from '../utils/classNames'
+import { classNames } from '../../utils/classNames'
 
 export interface CardContentProps
   extends React.ComponentPropsWithoutRef<'div'> {}

package/src/atoms/{CardFooter.tsx → Card/CardFooter.tsx}

@@ -1,6 +1,6 @@
 import './Card.scss'
 import React from 'react'
-import { classNames } from '../utils/classNames'
+import { classNames } from '../../utils/classNames'
 
 export interface CardFooterProps
   extends React.ComponentPropsWithoutRef<'div'> {}

package/src/atoms/{CardHeader.tsx → Card/CardHeader.tsx}

@@ -1,6 +1,6 @@
 import './Card.scss'
 import React from 'react'
-import { classNames } from '../utils/classNames'
+import { classNames } from '../../utils/classNames'
 
 export interface CardHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
   title: string

package/src/atoms/Card/index.ts

@@ -0,0 +1,6 @@
+import { Card } from './Card'
+import { CardHeader } from './CardHeader'
+import { CardContent } from './CardContent'
+import { CardFooter } from './CardFooter'
+
+export { Card, CardHeader, CardContent, CardFooter }

package/src/atoms/{CardsTable.scss → CardsTable/CardsTable.scss}

@@ -1,7 +1,7 @@
-@use '../settings/color_alias';
-@use '../settings/typography/cards_table' as typography;
-@use '../settings/config';
-@use '../settings/breakpoints';
+@use '../../settings/color_alias';
+@use '../../settings/typography/cards_table' as typography;
+@use '../../settings/config';
+@use '../../settings/breakpoints';
 
 .cards-table-list {
   display: flex;

package/src/atoms/{CardsTable.tsx → CardsTable/CardsTable.tsx}

@@ -1,4 +1,4 @@
-import { classNames } from '../utils/classNames'
+import { classNames } from '../../utils/classNames'
 import './CardsTable.scss'
 
 export type Variant = 'primary'

package/src/atoms/{CardsTableCell.tsx → CardsTable/CardsTableCell.tsx}

@@ -1,4 +1,4 @@
-import { classNames } from '../utils/classNames'
+import { classNames } from '../../utils/classNames'
 import './CardsTable.scss'
 import React from 'react'
 

package/src/atoms/{CardsTableHeader.tsx → CardsTable/CardsTableHeader.tsx}

@@ -1,4 +1,4 @@
-import { classNames } from '../utils/classNames'
+import { classNames } from '../../utils/classNames'
 import { Alignment } from './CardsTableCell'
 
 export interface CardsTableHeaderProps

package/src/atoms/CardsTable/index.ts

@@ -0,0 +1,16 @@
+import { CardsTable } from './CardsTable'
+import { CardsTableHead } from './CardsTableHead'
+import { CardsTableHeader } from './CardsTableHeader'
+import { CardsTableRow } from './CardsTableRow'
+import { CardsTableBody } from './CardsTableBody'
+import { CardsTableCell, Alignment } from './CardsTableCell'
+
+export {
+  CardsTable,
+  CardsTableHead,
+  CardsTableHeader,
+  CardsTableRow,
+  CardsTableBody,
+  CardsTableCell,
+  Alignment,
+}

package/src/atoms/CardsTableList.tsx

@@ -1,13 +1,16 @@
-import './CardsTable.scss'
+import './CardsTable/CardsTable.scss'
 import React, { useState } from 'react'
 import { sortBy } from '../utils/sort'
-import { CardsTableHeader } from './CardsTableHeader'
-import { CardsTableCell } from './CardsTableCell'
-import { CardsTableRow } from './CardsTableRow'
+import {
+  CardsTableHeader,
+  CardsTableCell,
+  CardsTableRow,
+  CardsTable,
+  CardsTableHead,
+  CardsTableBody,
+} from './CardsTable'
+
 import { Icon, IconType } from './Icon'
-import { CardsTable } from './CardsTable'
-import { CardsTableHead } from './CardsTableHead'
-import { CardsTableBody } from './CardsTableBody'
 
 export type Variant = 'primary'
 

package/src/atoms/Menu/Menu.scss

@@ -0,0 +1,109 @@
+@use '../../settings/color_alias';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/depth';
+
+.menu {
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+
+  .menu-option {
+    display: flex;
+    flex-direction: column;
+    gap: config.$space-2x;
+    cursor: default;
+
+    .icon {
+      width: config.$icon-size-3x;
+      height: config.$icon-size-3x;
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    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;
+        }
+      }
+    }
+
+    @include typography.body-regular-primary;
+
+    &.primary {
+      color: color_alias.$neutral-white;
+      background: color_alias.$neutral-color-900;
+
+      .icon {
+        > svg {
+          fill: color_alias.$neutral-white;
+          path {
+            fill: color_alias.$neutral-white;
+          }
+        }
+      }
+
+      &:hover {
+        background: color_alias.$primary-color-600;
+      }
+
+      &.selected {
+        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;
+              }
+            }
+
+            .selected {
+              background: color_alias.$primary-color-100;
+              box-shadow: inset -3px 0px 0px 0px color_alias.$primary-color-600;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/atoms/Menu/Menu.tsx

@@ -0,0 +1,28 @@
+import './Menu.scss'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+
+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,
+  })
+
+  return (
+    <ul className={cssClasses} role="menu" {...props}>
+      {children}
+    </ul>
+  )
+}

package/src/atoms/Menu/MenuOption.tsx

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

package/src/atoms/Menu/index.ts

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

package/src/stories/Card.stories.js

@@ -1,8 +1,5 @@
 import { IconButton } from '../atoms/IconButton'
-import { Card } from '../atoms/Card'
-import { CardHeader } from '../atoms/CardHeader'
-import { CardContent } from '../atoms/CardContent'
-import { CardFooter } from '../atoms/CardFooter'
+import { Card, CardHeader, CardContent, CardFooter } from '../atoms/Card'
 import { Button } from '../atoms/Button'
 
 const figmaPrimaryDesign = {

package/src/stories/CardsTable.stories.js

@@ -1,11 +1,6 @@
 import React from 'react'
 
-import { CardsTable } from '../atoms/CardsTable'
-import { CardsTableHead } from '../atoms/CardsTableHead'
-import { CardsTableHeader } from '../atoms/CardsTableHeader'
-import { CardsTableRow } from '../atoms/CardsTableRow'
-import { CardsTableBody } from '../atoms/CardsTableBody'
-import { CardsTableCell } from '../atoms/CardsTableCell'
+import { CardsTable, CardsTableHead, CardsTableHeader, CardsTableRow, CardsTableBody, CardsTableCell } from '../atoms/CardsTable'
 import { IconButton } from '../atoms/IconButton'
 import { Badge } from '../atoms/Badge'
 

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,8 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.14.0
+- Added Menu component to Storybook.
 
 ## 0.13.0
 - Added CardMenuOption component to Storybook.

package/src/stories/Menu.stories.js

@@ -0,0 +1,150 @@
+import React from 'react'
+
+import { Menu, MenuOption } from '../atoms/Menu'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=2464-3456&m=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/Menu',
+  component: Menu,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      description: 'Component icon used',
+    },
+    variant: {
+      description: 'Component variant used',
+    },
+    title: {
+      description: 'Component title text',
+    },
+    isSelected: {
+      description: 'Is the element selected?',
+    },
+    onClick: {
+      description: 'Event triggered when the component is clicked',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+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 = {
+  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
+        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 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')}
+      />
+      <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>
+  ),
+}

package/tests/Card.spec.tsx

@@ -1,9 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { Card } from '@/atoms/Card'
-import { CardHeader } from '@/atoms/CardHeader'
-import { CardContent } from '@/atoms/CardContent'
-import { CardFooter } from '@/atoms/CardFooter'
+import { Card, CardHeader, CardContent, CardFooter } from '@/atoms/Card'
 import { Button } from '@/atoms/Button'
 
 describe('Product card', () => {

package/tests/CardsTable.spec.tsx

@@ -1,11 +1,14 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { CardsTable } from '@/atoms/CardsTable'
-import { CardsTableHead } from '@/atoms/CardsTableHead'
-import { CardsTableHeader } from '@/atoms/CardsTableHeader'
-import { CardsTableRow } from '@/atoms/CardsTableRow'
-import { CardsTableBody } from '@/atoms/CardsTableBody'
-import { CardsTableCell, Alignment } from '@/atoms/CardsTableCell'
+import {
+  CardsTable,
+  CardsTableHead,
+  CardsTableHeader,
+  CardsTableRow,
+  CardsTableBody,
+  CardsTableCell,
+  Alignment,
+} from '@/atoms/CardsTable'
 import { IconButton } from '@/atoms/IconButton'
 import { Badge } from '@/atoms/Badge'
 

package/tests/Menu.spec.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Menu } from '@/atoms/Menu/Menu'
+import { MenuOption } from '@/atoms/Menu/MenuOption'
+
+describe('Menu', () => {
+  it('renders first-level menu', () => {
+    const { getByRole, getByText, getAllByRole } = render(
+      <Menu>
+        <MenuOption title="Tekken 8" icon="Edit" />
+        <MenuOption
+          isSelected
+          title="The Legend of Zelda: Tears of the Kingdom"
+          icon="Delete"
+        />
+      </Menu>,
+    )
+
+    expect(getByRole('menu')).toHaveClass(`menu primary`)
+    expect(getAllByRole('menuitem')[1]).toHaveClass(`selected`)
+    expect(getByText(/Tekken/i)).toBeInTheDocument()
+    expect(getByText(/Zelda/i)).toBeInTheDocument()
+    expect(getAllByRole('img')[0].title).toBe('Edit')
+    expect(getAllByRole('img')[2].title).toBe('Delete')
+  })
+
+  it('renders second-level menu', () => {
+    const { getByText, getAllByRole } = 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
+          title="The Legend of Zelda: Tears of the Kingdom"
+          icon="Delete"
+        />
+      </Menu>,
+    )
+
+    expect(getAllByRole('menu').length).toBe(2)
+    expect(getAllByRole('menuitem')[2]).toHaveClass(`selected`)
+    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')
+  })
+})

package/tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/stories/CardsTable.stories.js", "src/stories/Modal.stories.js", "src/stories/Typography.stories.mdx", "src/stories/Card.stories.js"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/stories/CardsTable.stories.js", "src/stories/Modal.stories.js", "src/stories/Typography.stories.mdx", "src/stories/Card.stories.js", "src/stories/Menu.stories.js"],
   "exclude": ["node_modules"]
 }