agroptima-design-system 0.34.8 → 0.34.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.34.8",
+  "version": "0.34.9",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

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/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.34.9
+
+* Add icon logic to Divider component
+
 ## 0.34.8
 
 * Add fixed position to Drawer component container due to bug related with sticky CardsTable

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/tests/Divider.spec.tsx

@@ -1,23 +1,47 @@
 import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { IconButton } from '../src/atoms/Button'
 import { Divider } from '../src/atoms/Divider'
 
 describe('Divider', () => {
   it('renders', () => {
-    const { getByRole, getAllByRole, getByText } = render(
-      <Divider title="A title divider" />,
+    const { getByRole, getByText, container } = render(
+      <Divider title="A title divider" icon="Line" />,
     )
     expect(getByRole('separator')).toHaveClass('divider primary')
-    expect(getAllByRole('generic')[1]).toHaveClass('short line')
-    expect(getAllByRole('generic')[3]).toHaveClass('long line')
+    expect(container.querySelector('.short.line')).toBeInTheDocument()
+    expect(container.querySelector('.long.line')).toBeInTheDocument()
     expect(getByText('A title divider')).toBeInTheDocument()
   })
 
   it('renders with icon', () => {
-    const { getByRole, getAllByRole, getByText } = render(
+    const { getByRole, container, getByText } = render(
       <Divider title="A title divider with icon" icon="DeliveryNote" />,
     )
     expect(getByRole('img')).toHaveClass(/icon/i)
-    expect(getAllByRole('generic')[2]).toHaveClass('long line')
+    expect(container.querySelector('.long.line')).toBeInTheDocument()
     expect(getByText('A title divider with icon')).toBeInTheDocument()
   })
+
+  it('renders with button', async () => {
+    const user = userEvent.setup()
+    const handleClick = jest.fn()
+
+    const { getByRole, container, getByText } = render(
+      <Divider title="A title divider with button" icon="DeliveryNote">
+        <IconButton
+          icon="Delete"
+          accessibilityLabel="Delete"
+          type="button"
+          onClick={handleClick}
+        />
+      </Divider>,
+    )
+    await user.click(getByRole('button', { name: 'Delete' }))
+
+    expect(getByRole('img', { name: 'DeliveryNote' })).toBeInTheDocument()
+    expect(container.querySelector('.long.line')).toBeInTheDocument()
+    expect(getByText('A title divider with button')).toBeInTheDocument()
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
 })