agroptima-design-system 1.2.37 → 1.2.38-beta.1

package/package.json

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

package/src/atoms/Divider.scss

@@ -19,6 +19,10 @@ $border-line: 1px solid var(--neutral-color-200);
     &-title {
       display: flex;
       align-items: center;
+
+      .checkbox-group {
+        margin-right: config.$space-2x;
+      }
     }
 
     .short {

package/src/atoms/Divider.tsx

@@ -1,17 +1,26 @@
 import './Divider.scss'
 import type { ComponentPropsWithoutRef } from 'react'
 import { classNames } from '../utils/classNames'
+import { Checkbox } from './Checkbox'
 import type { IconType } from './Icon'
 import { Icon } from './Icon'
 
 type DividerIconTypes = IconType | 'Line'
 
+export interface DividerCheckboxProps {
+  name: string
+  checked: boolean
+  indeterminate?: boolean
+  onChange: () => void
+}
+
 export interface DividerProps extends ComponentPropsWithoutRef<'div'> {
   title?: string
   variant?: string
   icon?: DividerIconTypes
   iconButton?: IconType
   hasAction?: boolean
+  checkbox?: DividerCheckboxProps
   onClick?: () => void
 }
 
@@ -19,6 +28,7 @@ export function Divider({
   title,
   variant = 'primary',
   icon,
+  checkbox,
   hasAction,
   className,
   children,
@@ -29,12 +39,27 @@ export function Divider({
   return (
     <div className="divider-container">
       <div role="separator" className={cssClasses}>
-        {title && (
+        {(title || checkbox) && (
           <div className="divider-title">
-            <DividerIcon icon={icon} />
-            <span onClick={onClick} className={classNames({ link: hasAction })}>
-              {title}
-            </span>
+            {checkbox ? (
+              <Checkbox
+                name={checkbox.name}
+                checked={checkbox.checked}
+                indeterminate={checkbox.indeterminate}
+                onChange={checkbox.onChange}
+                hideLabel
+              />
+            ) : (
+              <DividerIcon icon={icon} />
+            )}
+            {title && (
+              <span
+                onClick={onClick}
+                className={classNames({ link: hasAction })}
+              >
+                {title}
+              </span>
+            )}
           </div>
         )}
         <div className="long line"></div>

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.38
+
+* Add `checkbox` variant to Divider component
+
 ## 1.2.37
 
 * Add mobile-cell-label and mobile-cell-highlight styles to CardsTable. Add a new related story as an example.

package/src/stories/Divider.stories.tsx

@@ -93,3 +93,15 @@ export const NoIcon: Story = {
 export const NoTitle: Story = {
   parameters: figmaPrimaryDesign,
 }
+
+export const WithCheckbox: Story = {
+  args: {
+    title: '19/01/2025 - My gaming diary',
+    checkbox: {
+      name: 'select-all',
+      checked: false,
+      onChange: () => alert('change'),
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}

package/tests/Divider.spec.tsx

@@ -50,4 +50,43 @@ describe('Divider', () => {
     expect(getByRole('separator')).toHaveClass('divider primary')
     expect(container.querySelector('.long.line')).toBeInTheDocument()
   })
+
+  it('renders with checkbox', async () => {
+    const user = userEvent.setup()
+    const handleChange = jest.fn()
+
+    const { getByRole, getByText } = render(
+      <Divider
+        title="A title divider with checkbox"
+        checkbox={{
+          name: 'select-all',
+          checked: false,
+          onChange: handleChange,
+        }}
+      />,
+    )
+
+    expect(getByRole('checkbox')).toBeInTheDocument()
+    expect(getByText('A title divider with checkbox')).toBeInTheDocument()
+
+    await user.click(getByRole('checkbox'))
+
+    expect(handleChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders checkbox as indeterminate', () => {
+    const { getByRole } = render(
+      <Divider
+        title="Indeterminate divider"
+        checkbox={{
+          name: 'select-all',
+          checked: true,
+          indeterminate: true,
+          onChange: () => {},
+        }}
+      />,
+    )
+
+    expect(getByRole('checkbox')).toBeChecked()
+  })
 })