agroptima-design-system 0.36.0-beta.3 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.36.0-beta.3",
+  "version": "0.36.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.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^22.10.5",

package/src/atoms/Button/BaseButton.tsx

@@ -1,10 +1,11 @@
 import NextLink, { type LinkProps } from 'next/link'
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, Ref } 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,6 +13,7 @@ interface CustomProps {
   variant?: ButtonVariant
   loading?: boolean
   disabled?: boolean
+  fullWidth?: boolean
 }
 
 export type ButtonProps = CustomProps & BaseButtonProps
@@ -43,13 +44,16 @@ export function Button({
   leftIcon,
   rightIcon,
   disabled,
+  className,
   variant = 'primary',
   loading = false,
-  className,
+  fullWidth = false,
   ...props
 }: ButtonProps) {
   const leftIconName = loading ? 'Loading' : leftIcon
-  const cssClasses = classNames(className, 'button', variant)
+  const cssClasses = classNames(className, 'button', variant, {
+    'full-width': fullWidth,
+  })
 
   return (
     <BaseButton

package/src/atoms/Card/Card.scss

@@ -27,13 +27,13 @@ a.card {
     gap: config.$space-4x;
   }
 
-  .header {
+  .card-header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     gap: config.$space-1x;
 
-    .title {
+    .card-title {
       overflow: hidden;
       text-overflow: ellipsis;
       line-clamp: 2;
@@ -41,16 +41,16 @@ a.card {
       display: -webkit-box;
     }
 
-    > .bold {
+    > .card-bold {
       @include typography.body-bold;
     }
   }
 
-  .content {
+  .card-content {
     margin-bottom: config.$space-1x;
   }
 
-  .footer {
+  .card-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;
 
-      .header .bold {
+      .card-header .card-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('content', className)
+  const cssClasses = classNames('card-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('footer', className)
+  const cssClasses = classNames('card-footer', className)
 
   return (
     <div className={cssClasses} {...props}>

package/src/atoms/Card/CardHeader.tsx

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

package/src/atoms/Checkbox.tsx

@@ -55,7 +55,7 @@ export function Checkbox({
         disabled={disabled}
         className={classNames({ 'visually-hidden': hideLabel })}
       >
-        {children}
+        {children || accessibilityLabel}
       </Label>
     </div>
   )

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

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

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

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

package/src/atoms/Collapsible/index.ts

@@ -0,0 +1,5 @@
+import { Collapsible } from './Collapsible'
+
+export type { CollapsibleProps } from './Collapsible'
+
+export { Collapsible }

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -29,6 +29,7 @@ export type DateRangePickerProps = {
   name?: string
   helpText?: string
   errors?: string[]
+  fullWidth?: boolean
 }
 
 export type DateRange = {
@@ -48,10 +49,12 @@ 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,6 +28,7 @@ export type DateSinglePickerProps = {
   label?: string
   helpText?: string
   errors?: string[]
+  fullWidth?: boolean
 }
 
 export function DateSinglePicker({
@@ -42,6 +43,7 @@ export function DateSinglePicker({
   label = 'Date',
   errors,
   helpText,
+  fullWidth = false,
 }: DateSinglePickerProps): JSX.Element {
   const { isOpen, close, toggle } = useOpen(!withInput)
   const pickerRef = useRef(null)
@@ -51,6 +53,7 @@ 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,16 +17,20 @@
     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,
@@ -52,10 +56,12 @@
       -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;
@@ -72,6 +78,7 @@
     &.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;
@@ -87,6 +94,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;
         }
@@ -96,9 +104,11 @@
           color: color_alias.$neutral-color-400;
         }
       }
+
       .icon {
         > svg {
           fill: color_alias.$neutral-color-400;
+
           path {
             fill: color_alias.$neutral-color-400;
           }
@@ -108,6 +118,7 @@
       .password-icon {
         > svg {
           fill: color_alias.$neutral-color-600;
+
           path {
             fill: color_alias.$neutral-color-600;
           }
@@ -115,20 +126,25 @@
       }
     }
   }
+
   &.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;
@@ -136,8 +152,23 @@
       }
     }
   }
+
   &.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'
+export type InputVariant = 'primary' | 'borderless'
 
 export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   label: string
@@ -20,6 +20,8 @@ export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   suffix?: string
   errors?: string[]
   rightIcon?: IconType
+  fullWidth?: boolean
+  ellipsis?: boolean
 }
 
 export function Input({
@@ -37,6 +39,8 @@ export function Input({
   id,
   errors,
   rightIcon,
+  fullWidth = false,
+  ellipsis = false,
   ...props
 }: InputProps): React.JSX.Element {
   const identifier = id || name
@@ -62,6 +66,8 @@ export function Input({
         file: type === 'file',
         invalid: errors?.length,
         hidden: type === 'hidden',
+        'full-width': fullWidth,
+        ellipsis: ellipsis,
       })}
     >
       {!hideLabel && (

package/src/atoms/InputWithButton/InputWithButton.scss

@@ -0,0 +1,11 @@
+@use '../../settings/config';
+
+.input-with-button {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: config.$space-2x;
+
+  > .button {
+    margin-top: 32px;
+  }
+}

package/src/atoms/InputWithButton/InputWithButton.tsx

@@ -0,0 +1,10 @@
+import './InputWithButton.scss'
+import React from 'react'
+
+interface InputWithButtonProps {
+  children: React.ReactNode
+}
+
+export function InputWithButton({ children }: InputWithButtonProps) {
+  return <div className="input-with-button">{children}</div>
+}

package/src/atoms/InputWithButton/index.tsx

@@ -0,0 +1,3 @@
+import { InputWithButton } from './InputWithButton'
+
+export { InputWithButton }

package/src/atoms/Modal/ModalDialog.tsx

@@ -36,6 +36,22 @@ 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()
@@ -46,6 +62,8 @@ 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,6 +30,7 @@ export interface MultiselectProps extends InputPropsWithoutOnChange {
   onChange?: (value: string[]) => void
   isSearchable?: boolean
   searchLabel?: string
+  fullWidth?: boolean
 }
 
 export function Multiselect({
@@ -50,15 +51,23 @@ 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
@@ -74,6 +83,7 @@ export function Multiselect({
     setSelectedOptions([])
     onChange([])
   }
+
   const identifier = id || name
   return (
     <div
@@ -81,6 +91,7 @@ export function Multiselect({
         disabled,
         filled: hasSelectedOptions,
         invalid: isInvalid,
+        'full-width': fullWidth,
       })}
       ref={selectRef}
     >
@@ -99,6 +110,7 @@ export function Multiselect({
         onClick={toggle}
         onClear={handleClear}
         isEmpty={!hasSelectedOptions}
+        buttonRef={selectTriggerRef}
       >
         {hasSelectedOptions
           ? `${selectedOptions.length} ${selectedLabel}`
@@ -113,6 +125,7 @@ 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 { useRef } from 'react'
+import React, { useRef } from 'react'
 import { useOpen } from '../../hooks/useOpen'
 import { useOutsideClick } from '../../hooks/useOutsideClick'
 import { classNames } from '../../utils/classNames'

package/src/atoms/QuantitySelector.tsx

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