agroptima-design-system 0.14.0 → 0.15.0

package/package.json

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

package/src/atoms/Alert.tsx

@@ -1,4 +1,4 @@
-import { IconButton, IconButtonProps } from './IconButton'
+import { IconButton, IconButtonProps } from './Button'
 import { Icon } from './Icon'
 import './Alert.scss'
 import { classNames } from '../utils/classNames'

package/src/atoms/Button/BaseButton.tsx

@@ -0,0 +1,28 @@
+import NextLink from 'next/link'
+
+interface CommonProps {
+  disabled?: boolean
+}
+
+type HtmlButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
+
+type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+export type BaseButtonProps =
+  | (HtmlButtonProps & CommonProps)
+  | (AnchorProps & CommonProps)
+
+const hasHref = (props: HtmlButtonProps | AnchorProps): props is AnchorProps =>
+  'href' in props
+
+export function BaseButton({ children, ...props }: BaseButtonProps) {
+  if (hasHref(props)) {
+    return (
+      <NextLink href={props.href || ''} {...props}>
+        {children}
+      </NextLink>
+    )
+  }
+
+  return <button {...(props as HtmlButtonProps)}>{children}</button>
+}

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

@@ -1,6 +1,6 @@
-@use '../settings/color_alias';
-@use '../settings/typography/content' as typography;
-@use '../settings/config';
+@use '../../settings/color_alias';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
 
 @mixin button-style($main-color, $secondary-color, $hover-color) {
   background: $main-color;

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

@@ -1,9 +1,9 @@
-import NextLink from 'next/link'
 import './Button.scss'
-import { Icon, IconType } from './Icon'
-import { classNames } from '../utils/classNames'
+import { Icon, IconType } from '../Icon'
+import { classNames } from '../../utils/classNames'
+import { BaseButtonProps, BaseButton } from './BaseButton'
 
-export interface BaseButtonProps {
+interface CustomProps {
   label: string
   accessibilityLabel?: string
   leftIcon?: IconType
@@ -13,16 +13,7 @@ export interface BaseButtonProps {
   disabled?: boolean
 }
 
-type HtmlButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
-
-type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
-
-export type ButtonProps =
-  | (HtmlButtonProps & BaseButtonProps)
-  | (AnchorProps & BaseButtonProps)
-
-const hasHref = (props: HtmlButtonProps | AnchorProps): props is AnchorProps =>
-  'href' in props
+export type ButtonProps = CustomProps & BaseButtonProps
 
 export type ButtonVariant =
   | 'primary'
@@ -59,23 +50,8 @@ export function Button({
   }
   const cssClasses = classNames('button', variant, props.className)
 
-  if (hasHref(props)) {
-    return (
-      <NextLink
-        href={props.href || ''}
-        aria-label={accessibilityLabel || label}
-        {...props}
-        className={cssClasses}
-      >
-        {leftIcon && <Icon name={leftIcon} />}
-        {label}
-        {rightIcon && <Icon name={rightIcon} />}
-      </NextLink>
-    )
-  }
-
   return (
-    <button
+    <BaseButton
       disabled={loading || disabled}
       aria-label={accessibilityLabel || label}
       {...props}
@@ -84,6 +60,6 @@ export function Button({
       {leftIcon && <Icon name={leftIcon} />}
       {label}
       {rightIcon && <Icon name={rightIcon} />}
-    </button>
+    </BaseButton>
   )
 }

package/src/atoms/Button/FloatingButton.scss

@@ -0,0 +1,51 @@
+@use '../../settings/color_alias';
+@use '../../settings/config';
+
+.floating-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  gap: config.$space-1x;
+  cursor: default;
+  height: fit-content;
+  padding: config.$space-5x;
+  border-radius: config.$corner-radius-m;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 50%;
+
+  > .icon {
+    width: config.$icon-size-5x;
+    height: config.$icon-size-5x;
+    > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.primary {
+    background: color_alias.$primary-color-600;
+
+    > .icon {
+      > svg {
+        fill: color_alias.$neutral-white;
+        path {
+          fill: color_alias.$neutral-white;
+        }
+      }
+    }
+
+    &:disabled {
+      background: color_alias.$neutral-color-400;
+      > .icon {
+        > svg {
+          fill: color_alias.$neutral-white;
+          path {
+            fill: color_alias.$neutral-white;
+          }
+        }
+      }
+    }
+  }
+}

package/src/atoms/Button/FloatingButton.tsx

@@ -0,0 +1,36 @@
+import './FloatingButton.scss'
+import { Icon, IconType } from '../Icon'
+import { classNames } from '../../utils/classNames'
+import { BaseButtonProps, BaseButton } from './BaseButton'
+
+export type Variant = 'primary'
+
+interface CustomProps {
+  icon: IconType
+  variant?: Variant
+  disabled?: boolean
+  accessibilityLabel: string
+}
+
+export type FloatingButtonProps = CustomProps & BaseButtonProps
+
+export function FloatingButton({
+  accessibilityLabel,
+  icon,
+  disabled,
+  variant = 'primary',
+  ...props
+}: FloatingButtonProps) {
+  const cssClasses = classNames('floating-button', variant, props.className)
+
+  return (
+    <BaseButton
+      disabled={disabled}
+      aria-label={accessibilityLabel}
+      {...props}
+      className={cssClasses}
+    >
+      <Icon name={icon} />
+    </BaseButton>
+  )
+}

package/src/atoms/{IconButton.scss → Button/IconButton.scss}

@@ -1,10 +1,11 @@
-@use '../settings/color_alias';
-@use '../settings/config';
+@use '../../settings/color_alias';
+@use '../../settings/config';
 
 .icon-button {
   border: none;
   background: none;
   cursor: default;
+  padding: 0;
 
   > .icon {
     width: config.$icon-size-5x;

package/src/atoms/Button/IconButton.tsx

@@ -0,0 +1,36 @@
+import './IconButton.scss'
+import { Icon, IconType } from '../Icon'
+import { classNames } from '../../utils/classNames'
+import { BaseButtonProps, BaseButton } from './BaseButton'
+
+export type Variant = 'primary'
+
+interface CustomProps {
+  icon: IconType
+  variant?: Variant
+  disabled?: boolean
+  accessibilityLabel: string
+}
+
+export type IconButtonProps = CustomProps & BaseButtonProps
+
+export function IconButton({
+  accessibilityLabel,
+  icon,
+  disabled,
+  variant = 'primary',
+  ...props
+}: IconButtonProps) {
+  const cssClasses = classNames('icon-button', variant, props.className)
+
+  return (
+    <BaseButton
+      disabled={disabled}
+      aria-label={accessibilityLabel}
+      {...props}
+      className={cssClasses}
+    >
+      <Icon name={icon} />
+    </BaseButton>
+  )
+}

package/src/atoms/Button/index.ts

@@ -0,0 +1,9 @@
+import { Button } from './Button'
+import { IconButton } from './IconButton'
+import { FloatingButton } from './FloatingButton'
+
+export type { ButtonProps } from './Button'
+export type { IconButtonProps } from './IconButton'
+export type { FloatingButtonProps } from './FloatingButton'
+
+export { Button, IconButton, FloatingButton }

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/icons/add.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="#444" xmlns="http://www.w3.org/2000/svg"><path d="M20 11.429h-8.571V20H8.57v-8.571H0V8.57h8.571V0h2.858v8.571H20v2.858Z" fill="#444"/><defs><clipPath id="add__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/index.tsx

@@ -1,3 +1,4 @@
+import Add from './add.svg'
 import AddCircle from './add-circle.svg'
 import AngleDown from './angle-down.svg'
 import AngleLeft from './angle-left.svg'
@@ -23,6 +24,7 @@ import Sorter from './sorter.svg'
 import Warning from './warning.svg'
 
 export {
+  Add,
   AddCircle,
   AngleDown,
   AngleLeft,

package/src/stories/Card.stories.js

@@ -1,4 +1,4 @@
-import { IconButton } from '../atoms/IconButton'
+import { IconButton } from '../atoms/Button'
 import { Card, CardHeader, CardContent, CardFooter } from '../atoms/Card'
 import { Button } from '../atoms/Button'
 

package/src/stories/CardsTable.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CardsTable, CardsTableHead, CardsTableHeader, CardsTableRow, CardsTableBody, CardsTableCell } from '../atoms/CardsTable'
-import { IconButton } from '../atoms/IconButton'
+import { IconButton } from '../atoms/Button'
 import { Badge } from '../atoms/Badge'
 
 const figmaPrimaryDesign = {

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,15 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.15.0
+- Added FloatingButton component to Storybook
+
+BREAKING CHANGES
+- All button components have been moved to a common folder
+
+## 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/FloatingButton.stories.ts

@@ -0,0 +1,58 @@
+import { StoryObj } from '@storybook/react'
+import { FloatingButton } from '../atoms/Button'
+
+const meta = {
+  title: 'Design System/Atoms/FloatingButton',
+  component: FloatingButton,
+  tags: ['autodocs'],
+  argTypes: {
+    accessibilityLabel: {
+      description: 'Accessible name & description of the element',
+    },
+    variant: {
+      description: 'Component variant used from a list of values',
+    },
+    disabled: {
+      description: 'Is the button in disabled state?',
+    },
+    icon: {
+      description: 'Icon from a list of values',
+      control: { type: 'select' },
+    },
+    href: {
+      description:
+        'If a link is provided, the component will be rendered as NextLink, otherwise as button',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=1873-922&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Link: Story = {
+  args: {
+    icon: 'Add',
+    variant: 'primary',
+    accessibilityLabel: 'Edit game',
+    href: 'link.com',
+    disabled: false,
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const Button: Story = {
+  args: {
+    icon: 'Add',
+    variant: 'primary',
+    accessibilityLabel: 'Delete game',
+    disabled: false,
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/IconButton.stories.ts

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react'
-import { IconButton } from '../atoms/IconButton'
+import { IconButton } from '../atoms/Button'
 
 const meta = {
   title: 'Design System/Atoms/IconButton',

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/CardsTable.spec.tsx

@@ -9,7 +9,7 @@ import {
   CardsTableCell,
   Alignment,
 } from '@/atoms/CardsTable'
-import { IconButton } from '@/atoms/IconButton'
+import { IconButton } from '@/atoms/Button'
 import { Badge } from '@/atoms/Badge'
 
 describe('CardsTable', () => {

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/IconButton.tsx

@@ -1,58 +0,0 @@
-import NextLink from 'next/link'
-import './IconButton.scss'
-import { Icon, IconType } from './Icon'
-import { classNames } from '../utils/classNames'
-
-export type Variant = 'primary'
-
-export interface BaseIconButtonProps {
-  icon: IconType
-  variant?: Variant
-  disabled?: boolean
-  accessibilityLabel: string
-}
-
-type HtmlButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
-
-type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
-
-export type IconButtonProps =
-  | (HtmlButtonProps & BaseIconButtonProps)
-  | (AnchorProps & BaseIconButtonProps)
-
-const hasHref = (props: HtmlButtonProps | AnchorProps): props is AnchorProps =>
-  'href' in props
-
-export function IconButton({
-  accessibilityLabel,
-  icon,
-  disabled,
-  variant = 'primary',
-  ...props
-}: IconButtonProps) {
-  const cssClasses = classNames('icon-button', variant, props.className)
-
-  if (hasHref(props)) {
-    return (
-      <NextLink
-        href={props.href || ''}
-        aria-label={accessibilityLabel}
-        {...props}
-        className={cssClasses}
-      >
-        <Icon name={icon} />
-      </NextLink>
-    )
-  }
-
-  return (
-    <button
-      disabled={disabled}
-      aria-label={accessibilityLabel}
-      {...props}
-      className={cssClasses}
-    >
-      <Icon name={icon} />
-    </button>
-  )
-}

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>
-  )
-}