agroptima-design-system 0.25.1-beta.2 → 0.25.2

package/jest.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from 'jest'
-import nextJest from 'next/jest.js'
+const nextJest = require('next/jest')
 
 const createJestConfig = nextJest({
   dir: './',
@@ -12,6 +12,14 @@ const config: Config = {
     '^.+\\.(svg)$': '<rootDir>/tests/svg.mock.js',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  globals: {
+    'ts-jest': {
+      useESM: true,
+      tsconfig: {
+        verbatimModuleSyntax: false,
+      },
+    },
+  },
 }
 
-export default createJestConfig(config)
+module.exports = createJestConfig(config)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.25.1-beta.2",
+  "version": "0.25.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -11,33 +11,35 @@
     "types": "tsc --noEmit",
     "chromatic": "npx chromatic --exit-zero-on-changes",
     "test": "jest",
+    "test-coverage": "jest --coverage",
     "publish:beta": "npm publish --tag beta"
   },
   "dependencies": {
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-viewport": "^8.2.5",
+    "@storybook/addon-viewport": "^8.2.9",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.1",
-    "@storybook/addon-a11y": "^8.2.5",
-    "@storybook/addon-essentials": "^8.2.5",
-    "@storybook/addon-interactions": "^8.2.5",
-    "@storybook/addon-links": "^8.2.5",
-    "@storybook/addon-mdx-gfm": "^8.2.5",
-    "@storybook/blocks": "^8.2.5",
-    "@storybook/nextjs": "^8.2.5",
-    "@storybook/react": "^8.2.5",
-    "@storybook/test": "^8.2.5",
+    "@chromatic-com/storybook": "^1.8.0",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.9.4",
+    "@types/node": "^22.1.0",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "eslint": "^8",
@@ -46,9 +48,9 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
-    "jest-axe": "^8.0.0",
+    "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^8.2.5",
+    "storybook": "^8.2.9",
     "ts-node": "^10.9.2",
     "typescript": "^5"
   },

package/src/atoms/Alert.scss

@@ -11,7 +11,7 @@
   align-items: flex-start;
   border-radius: config.$corner-radius-xxs;
   pointer-events: none;
-  margin: config.$space-4x;
+  margin: 0;
 
   &.fit-content {
     width: fit-content;

package/src/atoms/Alert.tsx

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

package/src/atoms/Button/Button.tsx

@@ -1,7 +1,9 @@
-import './Button.scss'
-import { Icon, IconType } from '../Icon'
+import type { IconType } from '../Icon'
+import type { BaseButtonProps } from './BaseButton'
+import { Icon } from '../Icon'
 import { classNames } from '../../utils/classNames'
-import { BaseButtonProps, BaseButton } from './BaseButton'
+import { BaseButton } from './BaseButton'
+import './Button.scss'
 
 interface CustomProps {
   label: string

package/src/atoms/Button/FloatingButton.tsx

@@ -1,7 +1,9 @@
-import './FloatingButton.scss'
-import { Icon, IconType } from '../Icon'
+import type { IconType } from '../Icon'
+import type { BaseButtonProps } from './BaseButton'
+import { Icon } from '../Icon'
 import { classNames } from '../../utils/classNames'
-import { BaseButtonProps, BaseButton } from './BaseButton'
+import { BaseButton } from './BaseButton'
+import './FloatingButton.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Button/IconButton.tsx

@@ -1,7 +1,9 @@
-import './IconButton.scss'
-import { Icon, IconType } from '../Icon'
+import type { IconType } from '../Icon'
+import type { BaseButtonProps } from './BaseButton'
+import { Icon } from '../Icon'
 import { classNames } from '../../utils/classNames'
-import { BaseButtonProps, BaseButton } from './BaseButton'
+import { BaseButton } from './BaseButton'
+import './IconButton.scss'
 
 export type Variant = 'primary' | 'secondary'
 
@@ -32,7 +34,7 @@ export function IconButton({
       {...props}
       className={classNames(props.className, 'icon-button', variant)}
     >
-      <Icon name={icon} />
+      <Icon title={accessibilityLabel} name={icon} />
     </BaseButton>
   )
 }

package/src/atoms/CardMenu/CardMenuOption.tsx

@@ -1,7 +1,9 @@
-import { Icon, IconType } from '../Icon'
-import './CardMenu.scss'
+import type { IconType } from '../Icon'
+import type { LinkProps as NextLinkProps } from 'next/link'
+import { Icon } from '../Icon'
 import { classNames } from '../../utils/classNames'
-import Link, { LinkProps as NextLinkProps } from 'next/link'
+import Link from 'next/link'
+import './CardMenu.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/CardsTableList.tsx

@@ -1,4 +1,4 @@
-import './CardsTable/CardsTable.scss'
+import type { IconType } from './Icon'
 import React, { useState } from 'react'
 import { sortBy } from '../utils/sort'
 import {
@@ -9,8 +9,8 @@ import {
   CardsTableHead,
   CardsTableBody,
 } from './CardsTable'
-
-import { Icon, IconType } from './Icon'
+import { Icon } from './Icon'
+import './CardsTable/CardsTable.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Collapsible.scss

@@ -16,14 +16,14 @@
 
   .header {
     display: flex;
-    align-items: center;
+    align-items: center !important;
     gap: config.$space-3x;
     padding: config.$space-5x;
     cursor: default;
 
     .icon {
-      width: config.$icon-size-4x;
-      height: config.$icon-size-4x;
+      width: config.$icon-size-4x !important;
+      height: config.$icon-size-4x !important;
       > svg {
         width: 100%;
         height: 100%;
@@ -31,12 +31,20 @@
     }
 
     .title {
+      font-size: 1rem !important;
+      font-weight: normal !important;
       flex: 1;
     }
   }
 
   .content {
     padding: config.$space-7x;
+    padding-bottom: config.$space-3x;
+
+    &.no-horizontal-padding {
+      padding-left: 0;
+      padding-right: 0;
+    }
   }
 
   &.primary {

package/src/atoms/Collapsible.tsx

@@ -1,5 +1,5 @@
 import { classNames } from '../utils/classNames'
-import { Icon, IconType } from './Icon'
+import { Icon } from './Icon'
 import './Collapsible.scss'
 
 export type Variant = 'primary'
@@ -10,6 +10,7 @@ export interface CollapsibleProps
   variant?: Variant
   name?: string
   disabled?: boolean
+  noHorizontalPadding?: boolean
 }
 
 export function Collapsible({
@@ -19,12 +20,16 @@ export function Collapsible({
   children,
   disabled,
   name,
+  noHorizontalPadding = false,
   ...props
 }: CollapsibleProps): React.JSX.Element {
   const cssClasses = classNames('collapsible', variant, className, {
     open: props.open,
     disabled: disabled,
   })
+  const contentCssClasses = classNames('content', {
+    'no-horizontal-padding': noHorizontalPadding,
+  })
 
   return (
     <details name={name} className={cssClasses} {...props}>
@@ -32,7 +37,7 @@ export function Collapsible({
         <Icon className="arrow" name="AngleRight" />
         <span className="title">{title}</span>
       </summary>
-      <div className="content">{children}</div>
+      <div className={contentCssClasses}>{children}</div>
     </details>
   )
 }

package/src/atoms/DetailItem.scss

@@ -8,6 +8,10 @@
   flex-direction: column;
   margin-bottom: config.$space-3x;
 
+  &.alignment-right {
+    text-align: right;
+  }
+
   .title {
     @include typography.body-bold;
     color: color_alias.$neutral-color-1000;

package/src/atoms/DetailItem.tsx

@@ -3,9 +3,15 @@ import './DetailItem.scss'
 
 export type Variant = 'primary'
 
+export enum Alignment {
+  Left = 'left',
+  Right = 'right',
+}
+
 export interface DetailItemProps extends React.ComponentPropsWithoutRef<'div'> {
   variant?: Variant
   title: string
+  align?: Alignment
 }
 
 export function DetailItem({
@@ -13,11 +19,20 @@ export function DetailItem({
   className,
   variant = 'primary',
   title,
+  align = Alignment.Left,
   children,
   ...props
 }: DetailItemProps): React.JSX.Element {
   return (
-    <div className={classNames('detail-item', variant, className)} {...props}>
+    <div
+      className={classNames(
+        'detail-item',
+        variant,
+        `alignment-${align}`,
+        className,
+      )}
+      {...props}
+    >
       <div className="title">{title}</div>
       <div className="information">{children}</div>
     </div>

package/src/atoms/EmptyState.tsx

@@ -1,6 +1,7 @@
+import type { IconType } from './Icon'
 import { classNames } from '../utils/classNames'
+import { Icon } from './Icon'
 import './EmptyState.scss'
-import { Icon, IconType } from './Icon'
 
 export type Variant = 'primary'
 

package/src/atoms/Icon.tsx

@@ -7,6 +7,7 @@ export type IconType = keyof typeof icons
 export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
   name: IconType
   className?: string
+  title?: string
 }
 
 export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
@@ -14,7 +15,7 @@ export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
     rotate: name === 'Loading',
   })
   return (
-    <span role="img" title={name} className={cssClasses}>
+    <span role="img" title={props.title || name} className={cssClasses}>
       {icons[name](props)}
     </span>
   )

package/src/atoms/Input.scss

@@ -64,6 +64,7 @@
       appearance: none;
     }
     .input-suffix {
+      text-wrap: nowrap;
       color: color_alias.$neutral-color-600;
     }
     .icon {

package/src/atoms/Input.tsx

@@ -1,5 +1,7 @@
+import type { IconType } from './Icon'
 import React, { useState } from 'react'
-import { Icon, IconType } from './Icon'
+import { Icon } from './Icon'
+import { IconButton } from './Button/IconButton'
 import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
 import './Input.scss'
@@ -75,9 +77,10 @@ export function Input({
         />
         {suffix && <span className="input-suffix">{suffix}</span>}
         {type === 'password' && (
-          <Icon
+          <IconButton
+            accessibilityLabel={handlePasswordIcon()}
             className="password-icon"
-            name={handlePasswordIcon()}
+            icon={handlePasswordIcon()}
             onClick={handlePasswordVisibility}
           />
         )}

package/src/atoms/Menu/MenuDropdown.tsx

@@ -1,5 +1,6 @@
+import type { IconType } from '../Icon'
 import { classNames } from '../../utils/classNames'
-import { Icon, IconType } from '../Icon'
+import { Icon } from '../Icon'
 import './Menu.scss'
 
 export type Variant = 'primary'

package/src/atoms/Menu/MenuLink.tsx

@@ -1,8 +1,9 @@
-import './Menu.scss'
+import type { IconType } from '../Icon'
 import React from 'react'
-import { Icon, IconType } from '../Icon'
+import { Icon } from '../Icon'
 import { classNames } from '../../utils/classNames'
 import Link from 'next/link'
+import './Menu.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Modal.scss

@@ -2,12 +2,14 @@
 @use '../settings/typography/content' as typography;
 @use '../settings/config';
 @use '../settings/depth';
+@use '../settings/breakpoints';
 
 .modal-container {
   position: fixed;
   inset: 0;
   z-index: depth.$z-modal;
   margin: config.$space-4x;
+  margin-top: 3rem;
 
   .backdrop {
     position: fixed;
@@ -18,13 +20,13 @@
   }
 
   .modal {
-    top: 6.25rem;
     margin: auto;
     display: flex;
     position: relative;
     padding: config.$space-5x;
     flex-direction: column;
     align-items: flex-start;
+    justify-content: space-between;
     gap: config.$space-2x;
     flex-grow: 1;
     border-radius: config.$corner-radius-xxs;
@@ -35,37 +37,50 @@
       0px 6px 16px 0px rgba(0, 0, 0, 0.08),
       0px 9px 28px 8px rgba(0, 0, 0, 0.05);
 
-    .header {
-      display: flex;
-      gap: config.$space-2x;
-      align-items: flex-start;
-
-      .icon {
-        margin-top: 4px;
-        min-width: config.$icon-size-5x;
-        width: config.$icon-size-5x;
-        height: config.$icon-size-5x;
-        > svg {
-          width: 100%;
-          height: 100%;
+    .scroll-area {
+      width: 100%;
+      padding-left: config.$space-halfx;
+      padding-right: config.$space-halfx;
+      overflow-y: auto;
+      overflow-anchor: none;
+
+      .header {
+        display: flex;
+        gap: config.$space-2x;
+        align-items: flex-start;
+
+        .icon {
+          margin-top: 4px;
+          min-width: config.$icon-size-5x;
+          width: config.$icon-size-5x;
+          height: config.$icon-size-5x;
+          > svg {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .title {
+          @include typography.h4;
         }
       }
 
-      .title {
-        @include typography.h4;
+      .divider {
+        width: 100%;
+        height: 1px;
+        background: color_alias.$neutral-color-200;
+        margin-bottom: config.$space-2x;
       }
-    }
 
-    .divider {
-      width: 100%;
-      height: 1px;
-      background: color_alias.$neutral-color-200;
-      margin-bottom: config.$space-2x;
+      .body {
+        @include typography.body-regular-primary;
+        width: 100%;
+      }
     }
 
-    .body {
-      @include typography.body-regular-primary;
-      width: 100%;
+    &.details {
+      max-width: 50rem;
+      height: 100%;
     }
 
     .footer {
@@ -139,5 +154,12 @@
         }
       }
     }
+
+    // Media queries
+    // Mobile & tablet cases
+    @media only screen and (max-width: breakpoints.$large) {
+      &.details {
+      }
+    }
   }
 }

package/src/atoms/Modal.tsx

@@ -1,5 +1,6 @@
+import type { ButtonProps } from './Button'
 import { classNames } from '../utils/classNames'
-import { Button, ButtonProps } from './Button'
+import { Button } from './Button'
 import { Icon } from './Icon'
 import './Modal.scss'
 
@@ -47,17 +48,19 @@ export function Modal({
         className={cssClasses}
         {...props}
       >
-        <div className="header">
-          {variant !== 'details' && (
-            <Icon name={IconVariant[variant]} className={variant} />
-          )}
-          <h4 id={`${id}-title`} className="title">
-            {title}
-          </h4>
-        </div>
-        {variant === 'details' && <div className="divider" />}
-        <div id={`${id}-body`} className="body">
-          {children}
+        <div className="scroll-area">
+          <div className="header">
+            {variant !== 'details' && (
+              <Icon name={IconVariant[variant]} className={variant} />
+            )}
+            <h4 id={`${id}-title`} className="title">
+              {title}
+            </h4>
+          </div>
+          {variant === 'details' && <div className="divider" />}
+          <div id={`${id}-body`} className="body">
+            {children}
+          </div>
         </div>
         <div className="footer">
           {buttons.map(({ ...button }) => (

package/src/atoms/Multiselect.scss

@@ -64,6 +64,10 @@
     }
 
     .multiselect-options {
+      max-height: 256px;
+      overflow-y: auto;
+      overflow-anchor: none;
+      z-index: depth.$z-dropdown-options;
       border-radius: config.$corner-radius-xxs;
       background: color_alias.$neutral-white;
       box-shadow: