agroptima-design-system 0.32.3 → 0.33.0-beta.0

package/package.json

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

package/src/atoms/Input.scss

@@ -87,9 +87,7 @@
       &:has(textarea:disabled) {
         border: 1px solid color_alias.$neutral-color-400;
         background: color_alias.$neutral-color-50;
-        input {
-          color: color_alias.$neutral-color-400;
-        }
+        color: color_alias.$neutral-color-400;
 
         input::placeholder,
         textarea::placeholder {

package/src/atoms/Select/Select.tsx

@@ -67,6 +67,7 @@ export function Select({
   }
 
   function handleClear(event: React.MouseEvent) {
+    if (disabled) return
     event.stopPropagation()
     setSelectedOption(EMPTY_OPTION)
     onChange('')

package/src/atoms/Select/SelectTrigger.tsx

@@ -27,10 +27,6 @@ export function SelectTrigger({
   isEmpty,
   children,
 }: SelectTriggerProps) {
-  const handleClear = (event: React.MouseEvent) => {
-    if (disabled) return
-    onClear(event)
-  }
   return (
     <div className="select-container">
       <button
@@ -55,12 +51,11 @@ export function SelectTrigger({
         />
       </button>
       <IconButton
-        type="button"
         size="3"
         icon="Close"
         className="clear-button"
-        accessibilityLabel="clear"
-        onClick={handleClear}
+        accessibilityLabel="close"
+        onClick={onClear}
         visible={!isEmpty}
       />
     </div>

package/src/atoms/TabMenu/TabLink.tsx

@@ -0,0 +1,38 @@
+import './TabMenu.scss'
+import Link, { type LinkProps } from 'next/link'
+import React, { type AnchorHTMLAttributes } from 'react'
+import { classNames } from '../../utils/classNames'
+
+export type Variant = 'primary'
+
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps
+
+export interface TabLinkProps extends AnchorProps {
+  title: string
+  variant?: Variant
+  isActive?: boolean
+  disabled?: boolean
+}
+
+export function TabLink({
+  variant = 'primary',
+  isActive = false,
+  disabled = false,
+  className,
+  title,
+  prefetch = false,
+  ...props
+}: TabLinkProps): React.JSX.Element {
+  const cssClasses = classNames('tabmenu-item', variant, className, {
+    active: isActive,
+    disabled,
+  })
+
+  return (
+    <li tabIndex={0} role="menuitem">
+      <Link {...props} prefetch={prefetch} className={cssClasses}>
+        <span className="title">{title}</span>
+      </Link>
+    </li>
+  )
+}

package/src/atoms/TabMenu/TabMenu.scss

@@ -0,0 +1,67 @@
+@use '../../settings/color_alias';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/depth';
+
+.tabmenu-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  .tabmenu {
+    position: absolute;
+    top: 0px;
+    z-index: 999;
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+    align-items: flex-start;
+    gap: config.$space-5x;
+    padding: 0;
+
+    &-item {
+      display: flex;
+      text-decoration: none;
+      color: inherit;
+      cursor: default;
+      padding-bottom: config.$space-1x;
+
+      .title {
+        flex: 1;
+      }
+
+      &.primary {
+        @include typography.body-regular-primary;
+        border-bottom: 2px solid color_alias.$neutral-color-200;
+
+        &:hover {
+          color: color_alias.$primary-color-600;
+          border-bottom: 2px solid color_alias.$primary-color-600;
+        }
+
+        &.active {
+          color: color_alias.$primary-color-600;
+          border-bottom: 2px solid color_alias.$primary-color-600;
+        }
+
+        &.disabled {
+          color: color_alias.$neutral-color-400;
+          border-bottom: 2px solid color_alias.$neutral-color-200;
+        }
+      }
+    }
+
+    .tabmenu-item::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  .tabmenu-divider {
+    z-index: 1;
+    position: absolute;
+    top: 28px;
+    width: 100%;
+    height: config.$space-halfx;
+    background-color: color_alias.$neutral-color-200;
+  }
+}

package/src/atoms/TabMenu/TabMenu.tsx

@@ -0,0 +1,27 @@
+import './TabMenu.scss'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+
+export type Variant = 'primary'
+
+export interface TabMenuProps extends React.ComponentPropsWithoutRef<'ul'> {
+  variant?: Variant
+}
+
+export function TabMenu({
+  variant = 'primary',
+  className,
+  children,
+  ...props
+}: TabMenuProps): React.JSX.Element {
+  const cssClasses = classNames('tabmenu', variant, className)
+
+  return (
+    <div className="tabmenu-container">
+      <ul className={cssClasses} role="menu" {...props}>
+        {children}
+      </ul>
+      <div className="tabmenu-divider" />
+    </div>
+  )
+}

package/src/atoms/TabMenu/index.ts

@@ -0,0 +1,4 @@
+import { TabLink } from './TabLink'
+import { TabMenu } from './TabMenu'
+
+export { TabLink, TabMenu }

package/src/stories/Changelog.mdx

@@ -4,22 +4,15 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-## 0.32.3
-
-* Fix send form when click on deselect button in Select component
-
-
-## 0.32.2
-
-* Fix disabled color input 
+## 0.33.0
 
+* Add TabMenu component
 
 ## 0.32.1
 
 * Add reason icon
 * Add credit note icon
 
-
 ## 0.32.0
 
 * Make more accessible Select component.

package/src/stories/TabMenu.stories.js

@@ -0,0 +1,53 @@
+import { TabLink, TabMenu } from '../atoms/TabMenu'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=4124-74&t=he01I8TeGSN2aYXP-4',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/TabMenu',
+  component: TabMenu,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>The TabMenu component can be used as an extra navigational hierarchy complementing the main navbar.</p><ul><li>Use concise & descriptive titles in order to ensure simplicity</li></ul>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      description: 'Component variant used',
+    },
+    title: {
+      description: 'Component title text',
+    },
+    isActive: {
+      description: 'Is the element active?',
+    },
+    href: {
+      description: 'Link to the page',
+    },
+    disabled: {
+      description: 'Is the TabLink disabled?',
+    },
+  },
+}
+
+export default meta
+
+export const Tabs = {
+  render: () => (
+    <TabMenu>
+      <TabLink title="Videogames" href="some-link" />
+      <TabLink title="Books" href="some-link" isActive />
+      <TabLink title="Cinema" href="some-link" />
+      <TabLink title="Graphic Novels" href="some-link" disabled />
+    </TabMenu>
+  ),
+}

package/tests/Multiselect.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Multiselect } from '../src/atoms/Multiselect'
-import { type Option, Select } from '../src/atoms/Select'
+import type { Option } from '../src/atoms/Select'
 
 const zelda = {
   id: '1',
@@ -112,7 +112,7 @@ describe('Multiselect', () => {
       />,
     )
 
-    await user.click(screen.getByRole('button', { name: /clear/i }))
+    await user.click(screen.getByRole('button', { name: /close/i }))
 
     expect(getByText(placeholder)).toBeInTheDocument()
     expect(mockChange).toHaveBeenCalledWith([])
@@ -143,46 +143,4 @@ describe('Multiselect', () => {
     expect(queryByText('Spyro the Dragon')).not.toBeInTheDocument()
     expect(queryByText('Halo')).not.toBeInTheDocument()
   })
-
-  it('deselects when click on deselect button', async () => {
-    const user = userEvent.setup()
-    const placeholder = 'Select your favourite gaming system...'
-    const handleSubmit = jest.fn()
-
-    render(
-      <form onSubmit={handleSubmit}>
-        <Multiselect
-          label="Videogames"
-          name="select-videogames"
-          placeholder="Select your favourite gaming system..."
-          defaultValue={[zelda.id]}
-          options={OPTIONS}
-        />
-      </form>,
-    )
-
-    await user.click(screen.getByLabelText(/clear/i))
-
-    expect(screen.getByLabelText('Videogames')).toHaveTextContent(placeholder)
-    expect(handleSubmit).toHaveBeenCalledTimes(0)
-  })
-
-  it('disables deselect button when is disabled', async () => {
-    const user = userEvent.setup()
-    render(
-      <Multiselect
-        disabled
-        label="Videogames"
-        name="select-videogames"
-        defaultValue={[zelda.id]}
-        options={OPTIONS}
-      />,
-    )
-
-    await user.click(screen.getByLabelText(/clear/i))
-
-    expect(screen.getByLabelText('Videogames')).toHaveTextContent(
-      /1 items selected/i,
-    )
-  })
 })

package/tests/Select.spec.tsx

@@ -100,7 +100,7 @@ describe('Select', () => {
       />,
     )
 
-    await user.click(screen.getByRole('button', { name: /clear/i }))
+    await user.click(screen.getByRole('button', { name: /close/i }))
 
     expect(getByText(placeholder)).toBeInTheDocument()
     expect(mockChange).toHaveBeenCalledWith('')
@@ -124,46 +124,4 @@ describe('Select', () => {
     expect(queryByText('Nintendo Switch')).not.toBeInTheDocument()
     expect(queryByText('Xbox Series S/X')).not.toBeInTheDocument()
   })
-  it('deselects when click on deselect button', async () => {
-    const user = userEvent.setup()
-    const placeholder = 'Select your favourite gaming system...'
-    const handleSubmit = jest.fn()
-
-    render(
-      <form onSubmit={handleSubmit}>
-        <Select
-          label="Videogames"
-          name="select-videogames"
-          isSearchable
-          placeholder={placeholder}
-          defaultValue={playstation5.id}
-          options={OPTIONS}
-        />
-      </form>,
-    )
-
-    await user.click(screen.getByLabelText(/clear/i))
-
-    expect(screen.getByLabelText('Videogames')).toHaveTextContent(placeholder)
-    expect(handleSubmit).toHaveBeenCalledTimes(0)
-  })
-  it('disables deselect button when is disabled', async () => {
-    const user = userEvent.setup()
-    render(
-      <Select
-        label="Videogames"
-        name="select-videogames"
-        isSearchable
-        disabled
-        defaultValue={playstation5.id}
-        options={OPTIONS}
-      />,
-    )
-
-    await user.click(screen.getByLabelText(/clear/i))
-
-    expect(screen.getByLabelText('Videogames')).toHaveTextContent(
-      playstation5.label,
-    )
-  })
 })

package/tests/TabMenu.spec.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { TabLink, TabMenu } from '../src/atoms/TabMenu'
+
+describe('TabMenu', () => {
+  it('renders tabs menu', () => {
+    const { getByRole, getByText } = render(
+      <TabMenu>
+        <TabLink title="Videogames" href="some-link" />
+        <TabLink title="Books" href="some-link" isActive />
+        <TabLink title="Cinema" href="some-link" />
+        <TabLink title="Graphic Novels" href="some-link" disabled />
+      </TabMenu>,
+    )
+
+    expect(getByRole('menu')).toHaveClass(`tabmenu primary`)
+    expect(getByRole('link', { name: 'Books' })).toHaveClass(`active`)
+    expect(getByRole('link', { name: 'Graphic Novels' })).toHaveClass(
+      `disabled`,
+    )
+    expect(getByText(/Videogames/i)).toBeInTheDocument()
+    expect(getByText(/Cinema/i)).toBeInTheDocument()
+  })
+})