agroptima-design-system 0.34.8 → 0.34.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.34.8",
+  "version": "0.34.10",
   "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/atoms/Select/Select.tsx

@@ -29,6 +29,7 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   onChange?: (value: string) => void
   isSearchable?: boolean
   searchLabel?: string
+  isClereable?: boolean
 }
 
 const EMPTY_OPTION = { id: '', label: '' }
@@ -50,11 +51,12 @@ export function Select({
   defaultValue,
   isSearchable = false,
   searchLabel = 'Search',
+  isClereable = true,
   ...props
 }: SelectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
   const defaultOption =
-    options.find((option) => option.id === defaultValue) || EMPTY_OPTION
+    options.find((option) => option.id === defaultValue) || (isClereable ? EMPTY_OPTION : options[0])
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption)
   const isEmpty = selectedOption.id === EMPTY_OPTION.id
   const isInvalid = Boolean(errors?.length)
@@ -98,6 +100,7 @@ export function Select({
         onClick={toggle}
         onClear={handleClear}
         isEmpty={isEmpty}
+        isClereable={isClereable}
       >
         {selectedOption.label || placeholder}
       </SelectTrigger>

package/src/atoms/Select/SelectTrigger.tsx

@@ -12,6 +12,7 @@ export interface SelectTriggerProps {
   isEmpty: boolean
   onClick: () => void
   onClear: (event: React.MouseEvent) => void
+  isClereable?: boolean
   children: React.ReactNode
 }
 
@@ -24,6 +25,7 @@ export function SelectTrigger({
   isOpen,
   onClick,
   onClear,
+  isClereable=true,
   isEmpty,
   children,
 }: SelectTriggerProps) {
@@ -54,7 +56,7 @@ export function SelectTrigger({
           visible={isEmpty}
         />
       </button>
-      <IconButton
+      {isClereable && (<IconButton
         type="button"
         size="3"
         icon="Close"
@@ -62,7 +64,7 @@ export function SelectTrigger({
         accessibilityLabel="clear"
         onClick={handleClear}
         visible={!isEmpty}
-      />
+      />)}
     </div>
   )
 }

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/src/stories/Select.stories.ts

@@ -82,6 +82,7 @@ export const Primary: Story = {
     accessibilityLabel: 'Select your favourite gaming system options',
     hideLabel: false,
     isSearchable: false,
+    isClereable:  true,
     placeholder: 'Select your favourite gaming system...',
     options: [
       { id: '1', label: 'Nintendo Switch' },
@@ -120,6 +121,7 @@ export const PrimaryWithSelectedOptions: Story = {
     hideLabel: false,
     placeholder: 'Select your favourite gaming system...',
     isSearchable: false,
+    isClereable:  true,
     options: [
       { id: '1', label: 'Nintendo Switch' },
       { id: '2', label: 'PlayStation 5' },
@@ -142,6 +144,7 @@ export const PrimaryWithErrors: Story = {
     hideLabel: false,
     placeholder: 'Select your favourite gaming system...',
     isSearchable: false,
+    isClereable:  true,
     options: [
       { id: '1', label: 'Nintendo Switch' },
       { id: '2', label: 'PlayStation 5' },
@@ -187,6 +190,7 @@ export const PrimaryWithSearch: Story = {
     id: 'select-videogames',
     onChange: (optionId) => console.log('onChange optionId:', optionId),
     isSearchable: true,
+    isClereable:  true,
     searchLabel: 'Search',
   },
   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)
+  })
 })

package/tests/Select.spec.tsx

@@ -166,4 +166,43 @@ describe('Select', () => {
       playstation5.label,
     )
   })
+
+  describe('when isClereable is false', () => {
+    it('hides deselect button', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Select
+          label="Videogames"
+          name="select-videogames"
+          isSearchable
+          disabled
+          defaultValue={playstation5.id}
+          options={OPTIONS}
+          isClereable={false}
+        />,
+      )
+
+      expect(screen.queryByLabelText(/clear/i)).not.toBeInTheDocument()
+    })
+
+    it('renders first option by default if no other is passed', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Select
+          isClereable={false}
+          helpText="This text can help you"
+          label="Videogames"
+          name="videogames"
+          options={OPTIONS}
+          placeholder="Select your favourite gaming system..."
+        />,
+      )
+
+      expect(screen.getByLabelText('Videogames')).toHaveTextContent(
+        'Nintendo Switch',
+      )
+    })
+  })
 })