agroptima-design-system 0.35.0 → 0.36.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.35.0",
+  "version": "0.36.0-beta.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -36,8 +36,8 @@
     "@storybook/test": "^8.6.12",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^22.10.5",

package/src/atoms/Button/BaseButton.tsx

@@ -1,11 +1,10 @@
 import NextLink, { type LinkProps } from 'next/link'
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, Ref } from 'react'
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'
 
 interface CommonProps {
   disabled?: boolean
   visible?: boolean
   prefetch?: boolean
-  ref?: Ref<HTMLAnchorElement | HTMLButtonElement | null>
 }
 
 type HtmlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>

package/src/atoms/Button/Button.tsx

@@ -13,7 +13,6 @@ interface CustomProps {
   variant?: ButtonVariant
   loading?: boolean
   disabled?: boolean
-  fullWidth?: boolean
 }
 
 export type ButtonProps = CustomProps & BaseButtonProps
@@ -44,16 +43,13 @@ export function Button({
   leftIcon,
   rightIcon,
   disabled,
-  className,
   variant = 'primary',
   loading = false,
-  fullWidth = false,
+  className,
   ...props
 }: ButtonProps) {
   const leftIconName = loading ? 'Loading' : leftIcon
-  const cssClasses = classNames(className, 'button', variant, {
-    'full-width': fullWidth,
-  })
+  const cssClasses = classNames(className, 'button', variant)
 
   return (
     <BaseButton

package/src/atoms/Card/Card.scss

@@ -27,13 +27,13 @@ a.card {
     gap: config.$space-4x;
   }
 
-  .card-header {
+  .header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     gap: config.$space-1x;
 
-    .card-title {
+    .title {
       overflow: hidden;
       text-overflow: ellipsis;
       line-clamp: 2;
@@ -41,16 +41,16 @@ a.card {
       display: -webkit-box;
     }
 
-    > .card-bold {
+    > .bold {
       @include typography.body-bold;
     }
   }
 
-  .card-content {
+  .content {
     margin-bottom: config.$space-1x;
   }
 
-  .card-footer {
+  .footer {
     display: flex;
     flex-direction: column;
     gap: config.$space-2x;
@@ -77,7 +77,7 @@ a.card {
       @include typography.body-regular-disabled;
       background: color_alias.$neutral-color-50;
 
-      .card-header .card-bold {
+      .header .bold {
         color: color_alias.$neutral-color-400;
       }
     }

package/src/atoms/Card/CardContent.tsx

@@ -10,7 +10,7 @@ export function CardContent({
   children,
   ...props
 }: CardContentProps): React.JSX.Element {
-  const cssClasses = classNames('card-content', className)
+  const cssClasses = classNames('content', className)
 
   return (
     <div className={cssClasses} {...props}>

package/src/atoms/Card/CardFooter.tsx

@@ -10,7 +10,7 @@ export function CardFooter({
   children,
   ...props
 }: CardFooterProps): React.JSX.Element {
-  const cssClasses = classNames('card-footer', className)
+  const cssClasses = classNames('footer', className)
 
   return (
     <div className={cssClasses} {...props}>

package/src/atoms/Card/CardHeader.tsx

@@ -14,13 +14,11 @@ export function CardHeader({
   children,
   ...props
 }: CardHeaderProps): React.JSX.Element {
-  const cssClasses = classNames('card-header', className, { bold: isBold })
+  const cssClasses = classNames('header', className, { bold: isBold })
 
   return (
     <div className={cssClasses} {...props}>
-      <span className={classNames('card-title', { 'card-bold': isBold })}>
-        {title}
-      </span>
+      <span className={classNames('title', { bold: isBold })}>{title}</span>
       {children && <div className="actions">{children}</div>}
     </div>
   )

package/src/atoms/Checkbox.tsx

@@ -6,7 +6,6 @@ import { Label } from './Label'
 export type Variant = 'primary'
 
 export interface CheckboxProps extends React.ComponentPropsWithoutRef<'input'> {
-  label: string
   accessibilityLabel?: string
   hideLabel?: boolean
   variant?: Variant
@@ -15,7 +14,6 @@ export interface CheckboxProps extends React.ComponentPropsWithoutRef<'input'> {
 }
 
 export function Checkbox({
-  label,
   accessibilityLabel,
   hideLabel = false,
   disabled,
@@ -24,6 +22,7 @@ export function Checkbox({
   indeterminate = false,
   name,
   className,
+  children,
   ...props
 }: CheckboxProps) {
   const identifier = id || name
@@ -41,7 +40,7 @@ export function Checkbox({
         type="checkbox"
         className="checkbox"
         disabled={disabled}
-        aria-label={accessibilityLabel || label}
+        aria-label={accessibilityLabel}
         {...props}
       />
       <Label
@@ -50,7 +49,7 @@ export function Checkbox({
         disabled={disabled}
         className={classNames({ 'visually-hidden': hideLabel })}
       >
-        {label}
+        {children}
       </Label>
     </div>
   )

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

@@ -1,8 +1,7 @@
-@use '../../settings/color_alias';
-@use '../../settings/typography/content' as typography;
-@use '../../settings/config';
-@use '../../settings/depth';
-@use '../../settings/mixins';
+@use '../settings/color_alias';
+@use '../settings/typography/content' as typography;
+@use '../settings/config';
+@use '../settings/depth';
 
 details summary::-webkit-details-marker {
   display: none;
@@ -19,22 +18,33 @@ details summary::-webkit-details-marker {
     user-select: none;
   }
 
-  .collapsible-header {
+  .header {
     display: flex;
-    align-items: center;
+    align-items: center !important;
     gap: config.$space-3x;
     padding: config.$space-5x;
+    padding-bottom: config.$space-5x !important;
     cursor: default;
 
-    .collapsible-title {
-      font-size: 1rem;
-      font-weight: normal;
+    .icon {
+      width: config.$icon-size-4x !important;
+      height: config.$icon-size-4x !important;
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .title {
+      font-size: 1rem !important;
+      font-weight: normal !important;
       flex: 1;
     }
   }
 
-  .collapsible-content {
-    padding: config.$space-7x config.$space-7x config.$space-3x;
+  .content {
+    padding: config.$space-7x;
+    padding-bottom: config.$space-3x;
 
     &.no-horizontal-padding {
       padding-left: 0;
@@ -42,46 +52,54 @@ details summary::-webkit-details-marker {
     }
   }
 
-  &.primary, &.secondary {
+  &.primary {
     &[open] {
-      .collapsible-header {
+      .header {
         background: transparent;
         border-bottom: 3px solid color_alias.$primary-color-600;
       }
     }
 
     &.disabled {
-      .collapsible-header {
+      .header {
         background: color_alias.$neutral-color-50;
         border-bottom: 1px solid color_alias.$neutral-color-200;
         color: color_alias.$neutral-color-200;
-        @include mixins.svg-color(color_alias.$neutral-color-200);
+
+        .icon {
+          > svg {
+            fill: color_alias.$neutral-color-200;
+            path {
+              fill: color_alias.$neutral-color-200;
+            }
+          }
+        }
       }
     }
 
-    .collapsible-header {
+    .header {
       color: color_alias.$neutral-color-1000;
       background: transparent;
       border-bottom: 1px solid color_alias.$neutral-color-200;
-      @include mixins.svg-color(color_alias.$primary-color-600);
+
+      .icon {
+        > svg {
+          fill: color_alias.$primary-color-600;
+          path {
+            fill: color_alias.$primary-color-600;
+          }
+        }
+      }
 
       &:hover {
         background: color_alias.$primary-color-50;
       }
     }
   }
-
-  &.secondary .collapsible-content {
-    padding: config.$space-3x config.$space-4x config.$space-6x;
-    border: 1px solid color_alias.$neutral-color-200;
-    border-top: none;
-    border-bottom-left-radius: config.$corner-radius-m;
-    border-bottom-right-radius: config.$corner-radius-m;
-  }
 }
 
 .collapsible[open] {
-  .collapsible-arrow {
+  .arrow {
     transform: rotate(90deg);
   }
 }

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

@@ -1,11 +1,11 @@
 import './Collapsible.scss'
-import type { ComponentPropsWithoutRef } from 'react'
-import { classNames } from '../../utils/classNames'
-import { Icon } from '../Icon'
+import { classNames } from '../utils/classNames'
+import { Icon } from './Icon'
 
-export type Variant = 'primary' | 'secondary'
+export type Variant = 'primary'
 
-export interface CollapsibleProps extends ComponentPropsWithoutRef<'details'> {
+export interface CollapsibleProps
+  extends React.ComponentPropsWithoutRef<'details'> {
   title: string
   variant?: Variant
   name?: string
@@ -24,21 +24,21 @@ export function Collapsible({
   form = false,
   noHorizontalPadding = false,
   ...props
-}: CollapsibleProps) {
+}: CollapsibleProps): React.JSX.Element {
   const cssClasses = classNames('collapsible', variant, className, {
     open: props.open,
     disabled: disabled,
   })
-  const contentCssClasses = classNames('collapsible-content', {
+  const contentCssClasses = classNames('content', {
     'no-horizontal-padding': noHorizontalPadding,
     form: form,
   })
 
   return (
     <details name={name} className={cssClasses} aria-label={title} {...props}>
-      <summary className="collapsible-header">
-        <Icon className="collapsible-arrow" name="AngleRight" size="4" />
-        <span className="collapsible-title">{title}</span>
+      <summary className="header">
+        <Icon className="arrow" name="AngleRight" />
+        <span className="title">{title}</span>
       </summary>
       <div className={contentCssClasses}>{children}</div>
     </details>

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -29,7 +29,6 @@ export type DateRangePickerProps = {
   name?: string
   helpText?: string
   errors?: string[]
-  fullWidth?: boolean
 }
 
 export type DateRange = {
@@ -49,12 +48,10 @@ export function DateRangePicker({
   label = 'Date',
   errors,
   helpText,
-  fullWidth = false,
 }: DateRangePickerProps): JSX.Element {
   const cssClasses = classNames('date-picker', variant, className, {
     toggle: withInput,
     invalid: errors?.length,
-    'full-width': fullWidth,
   })
   const helpTexts = buildHelpText(helpText, errors)
 

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -28,7 +28,6 @@ export type DateSinglePickerProps = {
   label?: string
   helpText?: string
   errors?: string[]
-  fullWidth?: boolean
 }
 
 export function DateSinglePicker({
@@ -43,7 +42,6 @@ export function DateSinglePicker({
   label = 'Date',
   errors,
   helpText,
-  fullWidth = false,
 }: DateSinglePickerProps): JSX.Element {
   const { isOpen, close, toggle } = useOpen(!withInput)
   const pickerRef = useRef(null)
@@ -53,7 +51,6 @@ export function DateSinglePicker({
   const cssClasses = classNames('date-picker', variant, className, {
     toggle: withInput,
     invalid: errors?.length,
-    'full-width': fullWidth,
   })
 
   const [selected, setSelected] = useState<Date | undefined>(

package/src/atoms/Input.scss

@@ -17,20 +17,16 @@
     flex-direction: row;
     width: 100%;
     padding: config.$space-2x config.$space-3x config.$space-2x;
-
     input[type='date'] {
       min-width: -webkit-fill-available;
     }
-
     input[type='number'] {
       text-align: right;
     }
-
     input::placeholder,
     textarea::placeholder {
       @include typography.input-placeholder-text;
     }
-
     input,
     input:hover,
     input:focus,
@@ -56,12 +52,10 @@
       -moz-appearance: none;
       appearance: none;
     }
-
     .input-suffix {
       text-wrap: nowrap;
       color: color_alias.$neutral-color-600;
     }
-
     .icon {
       min-width: config.$icon-size-5x;
       width: config.$icon-size-5x;
@@ -78,7 +72,6 @@
     &.invalid .input-container {
       border: 1px solid color_alias.$error-color-1000;
     }
-
     .input-container {
       border-radius: config.$corner-radius-m;
       border: 1px solid color_alias.$neutral-color-600;
@@ -94,7 +87,6 @@
       &:has(textarea:disabled) {
         border: 1px solid color_alias.$neutral-color-400;
         background: color_alias.$neutral-color-50;
-
         input {
           color: color_alias.$neutral-color-400;
         }
@@ -104,11 +96,9 @@
           color: color_alias.$neutral-color-400;
         }
       }
-
       .icon {
         > svg {
           fill: color_alias.$neutral-color-400;
-
           path {
             fill: color_alias.$neutral-color-400;
           }
@@ -118,7 +108,6 @@
       .password-icon {
         > svg {
           fill: color_alias.$neutral-color-600;
-
           path {
             fill: color_alias.$neutral-color-600;
           }
@@ -126,25 +115,20 @@
       }
     }
   }
-
   &.file .input-container {
     padding: 0;
     border: transparent;
-
     &:has(input:focus) {
       border: transparent;
     }
-
     input {
       color: color_alias.$neutral-color-600;
-
       &::before {
         content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' fill='none'%3E%3Cpath d='M2.943 8.718h4.114V4.694H9.8L5 0 .2 4.694h2.743v4.024ZM5 1.898l1.488 1.455h-.802v4.023H4.314V3.353h-.802L5 1.898Zm-4.8 8.16h9.6V11.4H.2v-1.341Z' fill='%23EB004D'/%3E%3C/svg%3E");
         position: absolute;
         left: config.$space-3x;
         bottom: config.$space-2x;
       }
-
       &::file-selector-button {
         margin-right: config.$space-2x;
         padding-left: config.$space-3x + config.$icon-size-2x + config.$space-1x;
@@ -152,23 +136,8 @@
       }
     }
   }
-
   &.hidden {
     display: none;
   }
 
-  &.ellipsis {
-    input {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-
-  &.borderless {
-    .input-container {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
 }

package/src/atoms/Input.tsx

@@ -7,7 +7,7 @@ import type { IconType } from './Icon'
 import { Icon } from './Icon'
 import { Label } from './Label'
 
-export type InputVariant = 'primary' | 'borderless'
+export type InputVariant = 'primary'
 
 export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   label: string
@@ -20,8 +20,6 @@ export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   suffix?: string
   errors?: string[]
   rightIcon?: IconType
-  fullWidth?: boolean
-  ellipsis?: boolean
 }
 
 export function Input({
@@ -39,8 +37,6 @@ export function Input({
   id,
   errors,
   rightIcon,
-  fullWidth = false,
-  ellipsis = false,
   ...props
 }: InputProps): React.JSX.Element {
   const identifier = id || name
@@ -66,8 +62,6 @@ export function Input({
         file: type === 'file',
         invalid: errors?.length,
         hidden: type === 'hidden',
-        'full-width': fullWidth,
-        ellipsis: ellipsis,
       })}
     >
       {!hideLabel && (

package/src/atoms/Modal/ModalDialog.tsx

@@ -36,22 +36,6 @@ export function ModalDialog({
     }
   }, [])
 
-  useEffect(() => {
-    const dialog = dialogRef.current
-    if (!dialog) return
-
-    const handleCancel = (event: Event) => {
-      event.preventDefault()
-      onClose?.()
-    }
-
-    dialog.addEventListener('cancel', handleCancel)
-
-    return () => {
-      dialog.removeEventListener('cancel', handleCancel)
-    }
-  }, [onClose])
-
   useEffect(() => {
     if (isOpen) {
       dialogRef.current?.showModal()
@@ -62,8 +46,6 @@ export function ModalDialog({
 
   return (
     <dialog
-      role="dialog"
-      aria-modal="true"
       ref={dialogRef}
       className={classNames('modal', className, { 'modal-details': details })}
       onClick={handleClick}

package/src/atoms/Multiselect.tsx

@@ -30,7 +30,6 @@ export interface MultiselectProps extends InputPropsWithoutOnChange {
   onChange?: (value: string[]) => void
   isSearchable?: boolean
   searchLabel?: string
-  fullWidth?: boolean
 }
 
 export function Multiselect({
@@ -51,23 +50,15 @@ export function Multiselect({
   defaultValue = [],
   isSearchable = false,
   searchLabel = 'Search',
-  fullWidth = false,
   ...props
 }: MultiselectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
   const selectRef = useRef(null)
-  const selectTriggerRef = useRef<HTMLButtonElement | null>(null)
   useOutsideClick(selectRef, close)
   const [selectedOptions, setSelectedOptions] = useState<string[]>(defaultValue)
   const isInvalid = Boolean(errors?.length)
   const hasSelectedOptions = selectedOptions.length > 0
 
-  const handleClose = () => {
-    if (!isOpen) return
-    close()
-    selectTriggerRef?.current?.focus()
-  }
-
   function handleSelectOption({ id }: Option) {
     const isOptionSelected = selectedOptions.includes(id)
     const options = isOptionSelected
@@ -83,7 +74,6 @@ export function Multiselect({
     setSelectedOptions([])
     onChange([])
   }
-
   const identifier = id || name
   return (
     <div
@@ -91,7 +81,6 @@ export function Multiselect({
         disabled,
         filled: hasSelectedOptions,
         invalid: isInvalid,
-        'full-width': fullWidth,
       })}
       ref={selectRef}
     >
@@ -110,7 +99,6 @@ export function Multiselect({
         onClick={toggle}
         onClear={handleClear}
         isEmpty={!hasSelectedOptions}
-        buttonRef={selectTriggerRef}
       >
         {hasSelectedOptions
           ? `${selectedOptions.length} ${selectedLabel}`
@@ -125,7 +113,6 @@ export function Multiselect({
           selectOption={handleSelectOption}
           isSearchable={isSearchable}
           searchLabel={searchLabel}
-          onClose={handleClose}
         />
       )}
       <HelpText helpText={helpText} errors={errors} />

package/src/atoms/Popover/Popover.tsx

@@ -1,6 +1,6 @@
 'use client'
 import './Popover.scss'
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import { useOpen } from '../../hooks/useOpen'
 import { useOutsideClick } from '../../hooks/useOutsideClick'
 import { classNames } from '../../utils/classNames'

package/src/atoms/QuantitySelector.tsx

@@ -14,7 +14,6 @@ export interface QuantitySelectorProps extends Omit<InputProps, 'type'> {
   hideLabel?: boolean
   id?: string
   variant?: Variant
-  fullWidth?: boolean
 }
 
 export function QuantitySelector({
@@ -25,7 +24,6 @@ export function QuantitySelector({
   disabled,
   hideLabel = false,
   variant = 'primary',
-  fullWidth = false,
   ...props
 }: QuantitySelectorProps): React.JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -43,11 +41,7 @@ export function QuantitySelector({
     }
   }
   return (
-    <div
-      className={classNames('quantity-selector-group', variant, className, {
-        'full-width': fullWidth,
-      })}
-    >
+    <div className={classNames('quantity-selector-group', variant, className)}>
       {!hideLabel && (
         <Label required={props.required} htmlFor={id}>
           {label}