agroptima-design-system 0.35.0-beta.9 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.35.0-beta.9",
+  "version": "0.35.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/Card/Card.scss

@@ -41,7 +41,7 @@ a.card {
       display: -webkit-box;
     }
 
-    > .bold {
+    > .card-bold {
       @include typography.body-bold;
     }
   }
@@ -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/CardHeader.tsx

@@ -18,7 +18,7 @@ export function CardHeader({
 
   return (
     <div className={cssClasses} {...props}>
-      <span className={classNames('card-title', { bold: isBold })}>
+      <span className={classNames('card-title', { 'card-bold': isBold })}>
         {title}
       </span>
       {children && <div className="actions">{children}</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;
@@ -32,7 +33,7 @@ details summary::-webkit-details-marker {
     }
   }
 
-  .content {
+  .collapsible-content {
     padding: config.$space-7x config.$space-7x config.$space-3x;
 
     &.no-horizontal-padding {
@@ -54,16 +55,7 @@ details summary::-webkit-details-marker {
         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);
       }
     }
 
@@ -71,16 +63,7 @@ details summary::-webkit-details-marker {
       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;
@@ -88,7 +71,7 @@ details summary::-webkit-details-marker {
     }
   }
 
-  &.secondary .content {
+  &.secondary .collapsible-content {
     padding: config.$space-3x config.$space-4x config.$space-6x;
     border: 1px solid color_alias.$neutral-color-200;
     border-top: none;

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

@@ -1,7 +1,7 @@
 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'
 

package/src/atoms/Collapsible/index.ts

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

package/src/atoms/Divider.scss

@@ -10,21 +10,27 @@ $border-line: 1px solid color_alias.$neutral-color-200;
   @include typography.body_bold;
   display: flex;
   align-items: center;
+  gap: config.$space-3x;
 
-  .line {
-    border: $border-line;
+  &-title {
+    display: flex;
+    align-items: center;
   }
 
-  .long {
-    flex: 1;
-    margin-left: config.$space-3x;
-  }
 
   .short {
     width: config.$space-6x;
     margin-right: config.$space-3x;
   }
 
+  .line {
+    border: $border-line;
+  }
+
+  .long {
+    flex: 1;
+  }
+
   .icon {
     margin-right: config.$space-2x;
   }
@@ -34,4 +40,8 @@ $border-line: 1px solid color_alias.$neutral-color-200;
     text-decoration-line: underline;
     cursor: default;
   }
+
+  .iconButton {
+    margin-left: config.$space-3x;
+  }
 }

package/src/atoms/Divider.tsx

@@ -1,13 +1,16 @@
 import './Divider.scss'
-import Link from 'next/link'
+import type { ComponentPropsWithoutRef } from 'react'
 import { classNames } from '../utils/classNames'
 import type { IconType } from './Icon'
 import { Icon } from './Icon'
 
-export interface DividerProps extends React.ComponentPropsWithoutRef<'div'> {
+type DividerIconTypes = IconType | 'Line'
+
+export interface DividerProps extends ComponentPropsWithoutRef<'div'> {
   title: string
   variant?: string
-  icon?: IconType
+  icon?: DividerIconTypes
+  iconButton?: IconType
   hasAction?: boolean
   onClick?: () => void
 }
@@ -18,21 +21,27 @@ export function Divider({
   icon,
   hasAction,
   className,
+  children,
   onClick = () => {},
 }: DividerProps) {
   const cssClasses = classNames('divider', variant, className)
 
   return (
     <div role="separator" className={cssClasses}>
-      {icon ? (
-        <Icon className="icon" name={icon} size="3" />
-      ) : (
-        <div className="short line"></div>
-      )}
-      <span onClick={onClick} className={classNames({ link: hasAction })}>
-        {title}
-      </span>
+      <div className="divider-title">
+        <DividerIcon icon={icon} />
+        <span onClick={onClick} className={classNames({ link: hasAction })}>
+          {title}
+        </span>
+      </div>
       <div className="long line"></div>
+      {children}
     </div>
   )
 }
+
+function DividerIcon({ icon }: { icon?: DividerIconTypes }) {
+  if (!icon) return null
+  if (icon === 'Line') return <div className="short line" />
+  return <Icon className="icon" name={icon} size="3" />
+}

package/src/atoms/Modal/ModalDialog.tsx

@@ -51,6 +51,7 @@ export function ModalDialog({
       dialog.removeEventListener('cancel', handleCancel)
     }
   }, [onClose])
+
   useEffect(() => {
     if (isOpen) {
       dialogRef.current?.showModal()
@@ -61,6 +62,7 @@ export function ModalDialog({
 
   return (
     <dialog
+      role="dialog"
       aria-modal="true"
       ref={dialogRef}
       className={classNames('modal', className, { 'modal-details': details })}

package/src/atoms/Multiselect.tsx

@@ -56,11 +56,18 @@ export function Multiselect({
 }: 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
@@ -76,6 +83,7 @@ export function Multiselect({
     setSelectedOptions([])
     onChange([])
   }
+
   const identifier = id || name
   return (
     <div
@@ -102,6 +110,7 @@ export function Multiselect({
         onClick={toggle}
         onClear={handleClear}
         isEmpty={!hasSelectedOptions}
+        buttonRef={selectTriggerRef}
       >
         {hasSelectedOptions
           ? `${selectedOptions.length} ${selectedLabel}`
@@ -116,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/Select/Select.scss

@@ -66,8 +66,7 @@ $elements-space: config.$space-2x;
       background: color_alias.$neutral-white;
       @include mixins.icon-color(color_alias.$primary-color-600);
 
-      &:focus {
-        outline: color_alias.$primary-color-600;
+      &:has(.select:focus) {
         border: 1px solid color_alias.$primary-color-600;
       }
     }
@@ -75,9 +74,9 @@ $elements-space: config.$space-2x;
     .select-options {
       border-radius: config.$corner-radius-xxs;
       background: color_alias.$neutral-white;
-      box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
-      0px 6px 16px 0px rgba(0, 0, 0, 0.08),
-      0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+      box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.05),
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12);
 
       .option {
         background: color_alias.$neutral-white;

package/src/atoms/Select/Select.tsx

@@ -61,7 +61,13 @@ export function Select({
   const isEmpty = selectedOption.id === EMPTY_OPTION.id
   const isInvalid = Boolean(errors?.length)
   const selectRef = useRef(null)
-  useOutsideClick(selectRef, close)
+  const selectTriggerRef = useRef<HTMLButtonElement | null>(null)
+  const handleClose = () => {
+    if (!isOpen) return
+    close()
+    selectTriggerRef?.current?.focus()
+  }
+  useOutsideClick(selectRef, handleClose)
 
   function handleSelectOption(option: Option) {
     setSelectedOption(option)
@@ -93,6 +99,7 @@ export function Select({
 
       <SelectTrigger
         id={identifier}
+        buttonRef={selectTriggerRef}
         label={label}
         accessibilityLabel={accessibilityLabel}
         invalid={isInvalid}
@@ -110,9 +117,10 @@ export function Select({
           options={options}
           selectedOptions={[selectedOption.id]}
           selectOption={handleSelectOption}
-          onClick={close}
+          onClick={handleClose}
           isSearchable={isSearchable}
           searchLabel={searchLabel}
+          onClose={handleClose}
         />
       )}
       <HelpText helpText={helpText} errors={errors} />

package/src/atoms/Select/SelectItem.tsx

@@ -6,15 +6,29 @@ interface OptionProps {
   option: Option
   multiple?: boolean
   isSelected: boolean
-  onClick: (option: Option) => void
+  onSelectOption: (option: Option) => void
+  onClose: () => void
 }
 
+const ENTER_KEY = 'Enter'
+const SPACE_KEY = ' '
+
 export function SelectItem({
   option,
   isSelected,
-  onClick,
+  onSelectOption,
   multiple,
+  onClose,
 }: OptionProps) {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLLIElement>) => {
+    if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
+      e.preventDefault()
+      onSelectOption(option)
+      if (!multiple) {
+        onClose()
+      }
+    }
+  }
   return (
     <li
       className="option"
@@ -22,7 +36,8 @@ export function SelectItem({
       role="option"
       aria-selected={isSelected}
       data-option={option}
-      onClick={() => onClick(option)}
+      onClick={() => onSelectOption(option)}
+      onKeyDown={handleKeyDown}
     >
       {multiple && <CheckboxIcon selected={isSelected} />}
       {option.label}

package/src/atoms/Select/SelectItems.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useSearch } from '../../hooks/useSearch'
 import { Input } from '../Input'
 import type { Option } from './Select'
@@ -13,8 +13,11 @@ interface OptionListProps {
   onClick?: () => void
   isSearchable: boolean
   searchLabel: string
+  onClose: () => void
 }
 
+const ESCAPE_KEY = 'Escape'
+
 export function SelectItems({
   id,
   options,
@@ -24,8 +27,21 @@ export function SelectItems({
   onClick,
   isSearchable,
   searchLabel,
+  onClose,
 }: OptionListProps) {
   const { findItems, search } = useSearch(options, 'label')
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === ESCAPE_KEY) {
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onClose])
+
   return (
     <div className="select-options-container">
       <div className="select-options" id={id}>
@@ -47,7 +63,8 @@ export function SelectItems({
               key={option.id}
               option={option}
               isSelected={selectedOptions.includes(option.id)}
-              onClick={selectOption}
+              onSelectOption={selectOption}
+              onClose={onClose}
             />
           ))}
         </ul>

package/src/atoms/Select/SelectTrigger.tsx

@@ -13,6 +13,7 @@ export interface SelectTriggerProps {
   onClick: () => void
   onClear: (event: React.MouseEvent) => void
   children: React.ReactNode
+  buttonRef: React.RefObject<HTMLButtonElement | null>
 }
 
 export function SelectTrigger({
@@ -26,6 +27,7 @@ export function SelectTrigger({
   onClear,
   isEmpty,
   children,
+  buttonRef,
 }: SelectTriggerProps) {
   const handleClear = (event: React.MouseEvent) => {
     if (disabled) return
@@ -35,6 +37,7 @@ export function SelectTrigger({
     <div className="select-container">
       <button
         id={id}
+        ref={buttonRef}
         type="button"
         role="combobox"
         className="select"
@@ -56,6 +59,7 @@ export function SelectTrigger({
       </button>
       <IconButton
         type="button"
+        tabIndex={-1}
         size="3"
         icon="Close"
         className="clear-button"

package/src/hooks/useOpen.ts

@@ -5,6 +5,7 @@ function useOpen(defaultToggle?: boolean) {
 
   const open = () => setIsOpen(true)
   const close = () => setIsOpen(false)
+
   const toggle = () => setIsOpen(!isOpen)
 
   return { isOpen, open, close, toggle }

package/src/icons/duplicate.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 16c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 6 14V2c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 8 0h9c.55 0 1.02.196 1.413.588C18.803.979 19 1.45 19 2v12c0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 17 16H8Zm0-2h9V2H8v12Zm-4 6c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V4h2v14h11v2H4Z" fill="#161C26"/></svg>

package/src/icons/index.tsx

@@ -24,6 +24,7 @@ import Done from './done.svg'
 import DoubleArrowLeft from './double-arrow-left.svg'
 import DoubleArrowRight from './double-arrow-right.svg'
 import Download from './download.svg'
+import Duplicate from './duplicate.svg'
 import Edit from './edit.svg'
 import EditColumns from './edit-columns.svg'
 import ElectronicInvoice from './electronic-invoice.svg'
@@ -80,6 +81,7 @@ export {
   DoubleArrowLeft,
   DoubleArrowRight,
   Download,
+  Duplicate,
   Edit,
   EditColumns,
   ElectronicInvoice,

package/src/stories/Changelog.mdx

@@ -4,16 +4,23 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+
 ## 0.35.0
 
 * Add `fullWidth` prop to Select, Button, Input, MultiSelect, TextArea, QuantitySelector, DateRangePicker, DateSinglePicker components
-* Fix extra space when open Select and MultiSelect components
-* Add variant `Borderless` to Input component
-* Add prop `ellipsis` to Input component
-* Add variant `Secondary` to Collapsible component
-* Add `classic-view` and `new-view` to icons
+* Fix extra space when opening Select and MultiSelect components
+* Add `Borderless` variant to Input component
+* Add `ellipsis` prop to Input component
+* Add `Secondary` variant to Collapsible component
+* Add `duplicate`, `classic-view` and `new-view` to icons
 * Add InputWithButton component
-* Fix close modal when press `Escape` key
+* Fix close modal when pressing `Escape` key
+* Return focus on Select and MultiSelect components after close
+* Focus in Select and MultiSelect components after close
+
+## 0.34.9
+
+* Add icon logic to Divider component
 
 ## 0.34.8
 

package/src/stories/Collapsible.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Button } from '../atoms/Button'
-import { Collapsible } from '../atoms/Collapsible'
+import { Collapsible } from '../atoms/Collapsible/Collapsible'
 import { Divider } from '../atoms/Divider'
 import { Actions, Form as FormComponent, FormContainer } from '../atoms/Form'
 import { Input } from '../atoms/Input'
@@ -245,6 +245,7 @@ export const PrimaryDisabled: Story = {
 export const Form: Story = {
   args: {
     form: true,
+    open: true,
     title: 'User',
     name: 'user-form',
     variant: 'primary',

package/src/stories/{Divider.stories.ts → Divider.stories.tsx}

@@ -1,4 +1,5 @@
 import type { StoryObj } from '@storybook/react'
+import { IconButton } from '../atoms/Button'
 import { Divider } from '../atoms/Divider'
 
 const meta = {
@@ -38,6 +39,15 @@ export const Primary: Story = {
   args: {
     title: '19/01/2025 - My gaming diary',
     variant: 'primary',
+    icon: 'DeliveryNote',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const WithLine: Story = {
+  args: {
+    title: '19/01/2025 - My gaming diary',
+    icon: 'Line',
   },
   parameters: figmaPrimaryDesign,
 }
@@ -46,7 +56,6 @@ export const WithIcon: Story = {
   args: {
     title: '19/01/2025 - My gaming diary',
     icon: 'DeliveryNote',
-    variant: 'primary',
   },
   parameters: figmaPrimaryDesign,
 }
@@ -60,3 +69,19 @@ export const WithLink: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const WithButton: Story = {
+  args: {
+    title: '19/01/2025 - My gaming diary',
+    icon: 'Delete',
+    children: <IconButton icon="Delete" accessibilityLabel="Delete" />,
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const NoIcon: Story = {
+  args: {
+    title: '19/01/2025 - My gaming diary',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Drawer.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { CheckableTag, CheckableTagGroup } from '../atoms/CheckableTag'
-import { Collapsible } from '../atoms/Collapsible'
+import { Collapsible } from '../atoms/Collapsible/Collapsible'
 import { DateRangePicker } from '../atoms/DatePicker/DateRangePicker'
 import { Drawer } from '../atoms/Drawer'
 
@@ -26,7 +26,7 @@ const meta = {
       description: 'Component title text',
     },
     buttons: {
-      description: 'Array of button to be shown on the footer',
+      description: 'Array of buttons to be shown on the footer',
     },
   },
   parameters: {

package/src/stories/InputWithButton.stories.tsx

@@ -19,7 +19,7 @@ const meta = {
           '  <li>Ensure the input and button are visually grouped and aligned</li>' +
           '  <li>Support help and error text as in a standard input</li>' +
           '  <li>Pass the button or other actionable element through the <code>children</code> prop</li>' +
-          '  <li>Do not overload with multiple actions—one clear purpose per instance</li>' +
+          '  <li>Do not overload with multiple actions: Only one clear purpose per instance</li>' +
           '</ul>',
       },
     },