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

package/package.json

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

package/src/atoms/CheckboxWithDivider/CheckboxWithDivider.scss

@@ -0,0 +1,17 @@
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+
+.checkbox-with-divider {
+  display: flex;
+  align-items: center;
+  gap: config.$space-3x;
+
+  .form-label {
+    @include typography.body-bold;
+  }
+
+  .long.line {
+    flex: 1;
+    border: 1px solid var(--neutral-color-200);
+  }
+}

package/src/atoms/CheckboxWithDivider/CheckboxWithDivider.tsx

@@ -0,0 +1,31 @@
+import './CheckboxWithDivider.scss'
+import type { CheckboxProps } from '../Checkbox'
+import { Checkbox } from '../Checkbox'
+
+export interface CheckboxWithDividerProps extends Omit<
+  CheckboxProps,
+  'checked'
+> {
+  title: string
+  checked: boolean
+}
+
+export function CheckboxWithDivider({
+  title,
+  accessibilityLabel,
+  className,
+  ...props
+}: CheckboxWithDividerProps) {
+  return (
+    <div className="checkbox-with-divider">
+      <Checkbox
+        accessibilityLabel={accessibilityLabel || title}
+        className={className}
+        {...props}
+      >
+        {title}
+      </Checkbox>
+      <div className="long line" />
+    </div>
+  )
+}

package/src/atoms/CheckboxWithDivider/index.ts

@@ -0,0 +1,4 @@
+import { CheckboxWithDivider } from './CheckboxWithDivider'
+
+export type { CheckboxWithDividerProps } from './CheckboxWithDivider'
+export { CheckboxWithDivider }

package/src/atoms/Divider.scss

@@ -19,10 +19,6 @@ $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,26 +1,17 @@
 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
 }
 
@@ -28,7 +19,6 @@ export function Divider({
   title,
   variant = 'primary',
   icon,
-  checkbox,
   hasAction,
   className,
   children,
@@ -39,27 +29,12 @@ export function Divider({
   return (
     <div className="divider-container">
       <div role="separator" className={cssClasses}>
-        {(title || checkbox) && (
+        {title && (
           <div className="divider-title">
-            {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>
-            )}
+            <DividerIcon icon={icon} />
+            <span onClick={onClick} className={classNames({ link: hasAction })}>
+              {title}
+            </span>
           </div>
         )}
         <div className="long line"></div>

package/src/stories/Changelog.mdx

@@ -6,7 +6,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 ## 1.2.38
 
-* Add `checkbox` variant to Divider component
+* Add CheckboxWithDivider component
 
 ## 1.2.37
 

package/src/stories/CheckboxWithDivider.stories.tsx

@@ -0,0 +1,48 @@
+import type { StoryObj } from '@storybook/nextjs'
+import { CheckboxWithDivider } from '../atoms/CheckboxWithDivider'
+
+const meta = {
+  title: 'Design System/Atoms/CheckboxWithDivider',
+  component: CheckboxWithDivider,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2>' +
+          '<p>A CheckboxWithDivider combines a Checkbox with a divider line, used as a selectable group header (e.g. "select all" on a list of items).</p>',
+      },
+    },
+  },
+  tags: ['autodocs', 'Layout components'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: '19/01/2025 - My gaming diary',
+    name: 'select-all',
+    checked: false,
+    onChange: () => console.log('change'),
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    title: '19/01/2025 - My gaming diary',
+    name: 'select-all',
+    checked: true,
+    onChange: () => console.log('change'),
+  },
+}
+
+export const Indeterminate: Story = {
+  args: {
+    title: '19/01/2025 - My gaming diary',
+    name: 'select-all',
+    checked: true,
+    indeterminate: true,
+    onChange: () => console.log('change'),
+  },
+}

package/src/stories/Divider.stories.tsx

@@ -93,15 +93,3 @@ 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/CheckboxWithDivider.spec.tsx

@@ -0,0 +1,64 @@
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { CheckboxWithDivider } from '../src/atoms/CheckboxWithDivider'
+
+describe('CheckboxWithDivider', () => {
+  it('renders the title and a divider line', () => {
+    const { getByRole, getByText, container } = render(
+      <CheckboxWithDivider
+        title="19/01/2025 - My gaming diary"
+        name="select-all"
+        checked={false}
+      />,
+    )
+
+    expect(getByRole('checkbox')).toBeInTheDocument()
+    expect(getByText('19/01/2025 - My gaming diary')).toBeInTheDocument()
+    expect(container.querySelector('.long.line')).toBeInTheDocument()
+  })
+
+  it('toggles when clicking the title, thanks to the native label', async () => {
+    const user = userEvent.setup()
+    const handleChange = jest.fn()
+
+    const { getByText } = render(
+      <CheckboxWithDivider
+        title="19/01/2025 - My gaming diary"
+        name="select-all"
+        checked={false}
+        onChange={handleChange}
+      />,
+    )
+
+    await user.click(getByText('19/01/2025 - My gaming diary'))
+
+    expect(handleChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders as indeterminate', () => {
+    const { getByRole } = render(
+      <CheckboxWithDivider
+        title="19/01/2025 - My gaming diary"
+        name="select-all"
+        checked
+        indeterminate
+      />,
+    )
+
+    expect(getByRole('checkbox')).toBeChecked()
+  })
+
+  it('falls back to the title as the accessible name', () => {
+    const { getByRole } = render(
+      <CheckboxWithDivider
+        title="19/01/2025 - My gaming diary"
+        name="select-all"
+        checked={false}
+      />,
+    )
+
+    expect(
+      getByRole('checkbox', { name: '19/01/2025 - My gaming diary' }),
+    ).toBeInTheDocument()
+  })
+})

package/tests/Divider.spec.tsx

@@ -50,43 +50,4 @@ 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()
-  })
 })