agroptima-design-system 1.2.38-beta.4 → 1.2.38

package/package.json

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

package/src/atoms/CheckboxWithDivider/CheckboxWithDivider.scss

@@ -0,0 +1,18 @@
+@use '../../settings/typography/content' as typography;
+@use '../../settings/borders';
+@use '../../settings/config';
+
+.checkbox-with-divider {
+  display: flex;
+  align-items: center;
+  gap: config.$space-3x;
+  margin-bottom: config.$space-4x;
+
+  .form-label {
+    @include typography.body-bold;
+  }
+
+  .line {
+    border: borders.$divider-border-line;
+  }
+}

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="flex-grow 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

@@ -1,9 +1,8 @@
 @use '../settings/typography/content' as typography;
+@use '../settings/borders';
 @use '../settings/config';
 @use '../settings/mixins';
 
-$border-line: 1px solid var(--neutral-color-200);
-
 .divider-container {
   @include mixins.icon-color(var(--primary-color-600));
   @include typography.body_bold;
@@ -27,11 +26,7 @@ $border-line: 1px solid var(--neutral-color-200);
     }
 
     .line {
-      border: $border-line;
-    }
-
-    .long {
-      flex: 1;
+      border: borders.$divider-border-line;
     }
 
     .icon {

package/src/atoms/Divider.tsx

@@ -37,7 +37,7 @@ export function Divider({
             </span>
           </div>
         )}
-        <div className="long line"></div>
+        <div className="flex-grow line"></div>
       </div>
       {children}
     </div>

package/src/atoms/Modal/ModalDialog.tsx

@@ -4,8 +4,7 @@ import React, { useEffect, useRef } from 'react'
 import { classNames } from '../../utils/classNames'
 import type { Variant } from './Modal'
 
-export interface ModalDialogProps
-  extends React.HTMLAttributes<HTMLDialogElement> {
+export interface ModalDialogProps extends React.HTMLAttributes<HTMLDialogElement> {
   isOpen?: boolean
   onClose?: () => void
   details?: boolean
@@ -30,12 +29,12 @@ export function ModalDialog({
   }
 
   useEffect(() => {
-    // if (!isOpen) return
-
     keepScrollbarSpace()
+    window.addEventListener('resize', keepScrollbarSpace)
 
     return () => {
       removeScrollbarSpace()
+      window.removeEventListener('resize', keepScrollbarSpace)
     }
   }, [])
 

package/src/generic/_helpers.scss

@@ -33,6 +33,10 @@
   width: 100%;
 }
 
+.flex-grow {
+  flex: 1;
+}
+
 .hidden {
   display: none !important;
 }

package/src/settings/_borders.scss

@@ -0,0 +1 @@
+$divider-border-line: 1px solid var(--neutral-color-200);

package/src/stories/Changelog.mdx

@@ -6,8 +6,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 ## 1.2.38
 
-* Fix Modal scroll lock not being cleared when the component stays mounted and `isOpen` toggles to `false`
-* Fix Modal scroll lock width flickering on window resize while open, caused by recalculating the scrollbar width after `overflow: hidden` had already removed it
+* 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/Modal.stories.tsx

@@ -37,7 +37,7 @@ const meta = {
           '  <li>Require a response from the user</li>' +
           '  <li>Notify the user of any related information</li>' +
           '  <li>Confirm a user decision</li>' +
-          "  <li>It's opened/closed through `isOpen` prop — the component can be left mounted and toggled. If we don't want it to be part of the DOM at all (e.g. to avoid rendering its contents until needed), we can also add a conditional render on the frontend project.</li>" +
+          "  <li>It's opened/closed through `isOpen` prop. If we don't want it to be part of the DOM, we can also add a conditional render on the frontend project.</li>" +
           '  <li>Natively, focus is set on the first nested focusable element and explicitly indicated by default by the browser</li>' +
           "  <li>When nesting a Form inside Modal component, remember to add `type='button'` to all Cancel buttons to not to be considered as submitable</li>" +
           '</ul>',

package/tests/CheckboxWithDivider.spec.tsx

@@ -0,0 +1,67 @@
+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}
+        onChange={() => {}}
+      />,
+    )
+
+    expect(getByRole('checkbox')).toBeInTheDocument()
+    expect(getByText('19/01/2025 - My gaming diary')).toBeInTheDocument()
+    expect(container.querySelector('.flex-grow.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
+        onChange={() => {}}
+      />,
+    )
+
+    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}
+        onChange={() => {}}
+      />,
+    )
+
+    expect(
+      getByRole('checkbox', { name: '19/01/2025 - My gaming diary' }),
+    ).toBeInTheDocument()
+  })
+})

package/tests/Divider.spec.tsx

@@ -10,7 +10,7 @@ describe('Divider', () => {
     )
     expect(getByRole('separator')).toHaveClass('divider primary')
     expect(container.querySelector('.short.line')).toBeInTheDocument()
-    expect(container.querySelector('.long.line')).toBeInTheDocument()
+    expect(container.querySelector('.flex-grow.line')).toBeInTheDocument()
     expect(getByText('A title divider')).toBeInTheDocument()
   })
 
@@ -19,7 +19,7 @@ describe('Divider', () => {
       <Divider title="A title divider with icon" icon="DeliveryNote" />,
     )
     expect(getByRole('img')).toHaveClass(/icon/i)
-    expect(container.querySelector('.long.line')).toBeInTheDocument()
+    expect(container.querySelector('.flex-grow.line')).toBeInTheDocument()
     expect(getByText('A title divider with icon')).toBeInTheDocument()
   })
 
@@ -40,7 +40,7 @@ describe('Divider', () => {
     await user.click(getByRole('button', { name: 'Delete' }))
 
     expect(getByRole('img', { name: 'DeliveryNote' })).toBeInTheDocument()
-    expect(container.querySelector('.long.line')).toBeInTheDocument()
+    expect(container.querySelector('.flex-grow.line')).toBeInTheDocument()
     expect(getByText('A title divider with button')).toBeInTheDocument()
     expect(handleClick).toHaveBeenCalledTimes(1)
   })
@@ -48,6 +48,6 @@ describe('Divider', () => {
   it('renders without title nor icon', () => {
     const { getByRole, container } = render(<Divider />)
     expect(getByRole('separator')).toHaveClass('divider primary')
-    expect(container.querySelector('.long.line')).toBeInTheDocument()
+    expect(container.querySelector('.flex-grow.line')).toBeInTheDocument()
   })
 })

package/tests/Modal.spec.tsx

@@ -145,88 +145,4 @@ describe('Modal', () => {
     expect(screen.queryAllByRole('option')).toHaveLength(3)
     expect(screen.getByRole('option', { name: 'Item 3' })).toBeInTheDocument()
   })
-
-  it('clears the scroll lock when isOpen toggles to false while the modal stays mounted', async () => {
-    const originalInnerWidth = window.innerWidth
-    Object.defineProperty(window, 'innerWidth', {
-      configurable: true,
-      value: 1024,
-    })
-    Object.defineProperty(document.documentElement, 'clientWidth', {
-      configurable: true,
-      value: 1000,
-    })
-
-    const user = userEvent.setup()
-    const ToggleableModal = () => {
-      const [isOpen, setIsOpen] = React.useState(true)
-
-      return (
-        <Modal
-          id="scroll-lock-modal"
-          isOpen={isOpen}
-          title="Scroll lock modal"
-          buttons={[
-            {
-              label: 'Close',
-              onClick: () => setIsOpen(false),
-            },
-          ]}
-        >
-          content
-        </Modal>
-      )
-    }
-
-    render(<ToggleableModal />)
-
-    expect(document.documentElement).toHaveClass('modal-scroll')
-
-    await user.click(screen.getByRole('button', { name: 'Close' }))
-
-    expect(document.documentElement).not.toHaveClass('modal-scroll')
-
-    Object.defineProperty(window, 'innerWidth', {
-      configurable: true,
-      value: originalInnerWidth,
-    })
-  })
-
-  it('does not recalculate the scroll lock width on window resize while open', () => {
-    const originalInnerWidth = window.innerWidth
-    Object.defineProperty(window, 'innerWidth', {
-      configurable: true,
-      value: 1024,
-    })
-    Object.defineProperty(document.documentElement, 'clientWidth', {
-      configurable: true,
-      value: 1000,
-    })
-
-    render(
-      <Modal id="resize-modal" isOpen={true} title="Resize modal" buttons={[]}>
-        content
-      </Modal>,
-    )
-
-    expect(document.documentElement).toHaveClass('modal-scroll')
-    expect(document.documentElement.style.getPropertyValue('--modal-scroll-width')).toBe('24px')
-
-    // Simulates the browser removing the native scrollbar once `overflow: hidden`
-    // is applied, which previously made the resize listener think the scrollbar
-    // was gone and drop the lock.
-    Object.defineProperty(document.documentElement, 'clientWidth', {
-      configurable: true,
-      value: 1024,
-    })
-    window.dispatchEvent(new Event('resize'))
-
-    expect(document.documentElement).toHaveClass('modal-scroll')
-    expect(document.documentElement.style.getPropertyValue('--modal-scroll-width')).toBe('24px')
-
-    Object.defineProperty(window, 'innerWidth', {
-      configurable: true,
-      value: originalInnerWidth,
-    })
-  })
 })