agroptima-design-system 0.28.5 → 0.28.7

package/package.json

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

package/src/atoms/Divider.scss

@@ -0,0 +1,31 @@
+@use '../settings/color_alias';
+@use '../settings/typography/content' as typography;
+@use '../settings/config';
+@use '../settings/mixins';
+
+$border-line: 1px solid color_alias.$neutral-color-200;
+
+.divider {
+  @include mixins.icon-color(color_alias.$primary-color-600);
+  @include typography.body_bold;
+  display: flex;
+  align-items: center;
+
+  .line {
+    border: $border-line;
+  }
+  
+  .long {
+    flex: 1;
+    margin-left: config.$space-3x;
+  }
+
+  .short {
+    width: config.$space-6x;
+    margin-right: config.$space-3x;
+  }
+
+  .icon {
+    margin-right: config.$space-2x;
+  }
+}

package/src/atoms/Divider.tsx

@@ -0,0 +1,31 @@
+import './Divider.scss'
+import { classNames } from '../utils/classNames'
+import type { IconType } from './Icon'
+import { Icon } from './Icon'
+
+export interface DividerProps extends React.ComponentPropsWithoutRef<'div'> {
+  title: string
+  variant?: string
+  icon?: IconType
+}
+
+export function Divider({
+  title,
+  variant = 'primary',
+  icon,
+  className,
+}: 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>{title}</span>
+      <div className="long line"></div>
+    </div>
+  )
+}

package/src/generic/_base.scss

@@ -4,7 +4,6 @@
 html {
   scroll-behavior: smooth;
   max-width: 100%;
-  overflow-x: hidden;
 }
 
 body {

package/src/stories/Changelog.mdx

@@ -4,11 +4,18 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.28.7
+
+* Add Divider component
+
+## 0.28.6
+
+* Remove overflow-x from html element for Modal component.
+
 ## 0.28.5
 
 * Remove closeButton property to Modal component.
 
-
 ## 0.28.4
 
 * Update Modal component to adapt to the content height.

package/src/stories/Divider.stories.ts

@@ -0,0 +1,44 @@
+import type { StoryObj } from '@storybook/react'
+import { Divider } from '../atoms/Divider'
+
+const meta = {
+  title: 'Design System/Atoms/Divider',
+  component: Divider,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      description: 'A title for divider',
+    },
+    icon: {
+      description: 'Optional icon that is added next to the title divider ',
+    },
+    variant: 'primary',
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=3760-1578&p=f&t=C1SvMqG638Ei5ASv-0',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    title: '19/01/2025 - Delivery Note',
+    variant: 'primary',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const WithIcon: Story = {
+  args: {
+    title: '19/01/2025 - Delivery Note',
+    icon: 'DeliveryNote',
+    variant: 'primary',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/tests/Divider.spec.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react'
+import { Divider } from '../src/atoms/Divider'
+
+describe('Divider', () => {
+  it('renders', () => {
+    const { getByRole, getAllByRole, getByText } = render(
+      <Divider title="A title divider" />,
+    )
+    expect(getByRole('separator')).toHaveClass('divider primary')
+    expect(getAllByRole('generic')[1]).toHaveClass('short line')
+    expect(getAllByRole('generic')[3]).toHaveClass('long line')
+    expect(getByText('A title divider')).toBeInTheDocument()
+  })
+
+  it('renders with icon', () => {
+    const { getByRole, getAllByRole, 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(getByText('A title divider with icon')).toBeInTheDocument()
+  })
+})