agroptima-design-system 0.34.4-beta.0 → 0.34.4

package/package.json

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

package/src/atoms/Divider.scss

@@ -14,7 +14,7 @@ $border-line: 1px solid color_alias.$neutral-color-200;
   .line {
     border: $border-line;
   }
-  
+
   .long {
     flex: 1;
     margin-left: config.$space-3x;
@@ -28,4 +28,10 @@ $border-line: 1px solid color_alias.$neutral-color-200;
   .icon {
     margin-right: config.$space-2x;
   }
+
+  .link {
+    color: color_alias.$primary-color-600;
+    text-decoration-line: underline;
+    cursor: default;
+  }
 }

package/src/atoms/Divider.tsx

@@ -1,4 +1,5 @@
 import './Divider.scss'
+import Link from 'next/link'
 import { classNames } from '../utils/classNames'
 import type { IconType } from './Icon'
 import { Icon } from './Icon'
@@ -7,13 +8,17 @@ export interface DividerProps extends React.ComponentPropsWithoutRef<'div'> {
   title: string
   variant?: string
   icon?: IconType
+  hasAction?: boolean
+  onClick?: () => void
 }
 
 export function Divider({
   title,
   variant = 'primary',
   icon,
+  hasAction,
   className,
+  onClick = () => {},
 }: DividerProps) {
   const cssClasses = classNames('divider', variant, className)
 
@@ -24,7 +29,9 @@ export function Divider({
       ) : (
         <div className="short line"></div>
       )}
-      <span>{title}</span>
+      <span onClick={onClick} className={classNames({ link: hasAction })}>
+        {title}
+      </span>
       <div className="long line"></div>
     </div>
   )

package/src/stories/Changelog.mdx

@@ -8,6 +8,10 @@ import { Meta } from "@storybook/blocks";
 
 * Update DatePicker related stories with a defaultValue
 
+## 0.33.4
+
+* Add hasAction and onClick props to Divider component
+
 ## 0.33.1
 
 * Add onChange prop to RadioGroup component

package/src/stories/Collapsible.stories.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Button } from '../atoms/Button'
 import { Card } from '../atoms/Card'
 import { Collapsible } from '../atoms/Collapsible'
+import { Divider } from '../atoms/Divider'
 import { Actions, Form as FormComponent } from '../atoms/Form'
 import { FormContainer } from '../atoms/Form'
 import { Input } from '../atoms/Input'
@@ -102,6 +103,7 @@ export const PrimaryOpened = {
   render: () => (
     <>
       <Collapsible title="My personal data" name="personal-data" open>
+        <Divider title="19/01/2025 - My gaming diary" variant="primary" />
         <FormContainer fluid>
           <Input
             accessibilityLabel="Fill the form name"

package/src/stories/DateRangePicker.stories.ts

@@ -8,7 +8,7 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><p>DateRangePicker component allows users to select past, present, or future dates in a visual way in range or single format.</p>',
+          '<h2>Usage guidelines</h2><p>DateRangePicker component allows users to select past, present, or future dates in a visual way in range or single format. To avoid problems with Chromatic builds, always add a defaultValue.</p>',
       },
     },
   },

package/src/stories/DateSinglePicker.stories.ts

@@ -8,7 +8,7 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><p>DateRangePicker component allows users to select past, present, or future dates in a visual way in range or single format.</p>',
+          '<h2>Usage guidelines</h2><p>DateRangePicker component allows users to select past, present, or future dates in a visual way in range or single format. To avoid problems with Chromatic builds, always add a defaultValue.</p>',
       },
     },
   },

package/src/stories/Divider.stories.ts

@@ -50,3 +50,13 @@ export const WithIcon: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const WithLink: Story = {
+  args: {
+    title: '19/01/2025 - My gaming diary',
+    variant: 'primary',
+    hasAction: true,
+    onClick: () => alert('click'),
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Modal.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Button, IconButton } from '../atoms/Button'
-import { Card } from '../atoms/Card'
-import { DetailItem } from '../atoms/DetailItem'
+import { Button } from '../atoms/Button'
+import { Collapsible } from '../atoms/Collapsible'
+import { Divider } from '../atoms/Divider'
 import { FormContainer } from '../atoms/Form'
 import { Input } from '../atoms/Input'
 import {
@@ -393,32 +393,39 @@ const OpenAndCloseFormModal = () => {
           { label: 'Save', type: 'submit' },
         ]}
       >
-        <FormContainer fluid>
-          <Input name="input" label="Input" placeholder="Type something" />
-          <Select
-            label="Select"
-            name="select"
-            helpText="This is a help text"
-            placeholder="Select an option"
-            options={[
-              { id: '1', label: 'Option 1' },
-              { id: '2', label: 'Option 2' },
-              { id: '3', label: 'Option 3' },
-              { id: '4', label: 'Option 4' },
-              { id: '5', label: 'Option 5' },
-              { id: '6', label: 'Option 6' },
-              { id: '7', label: 'Option 7' },
-              { id: '8', label: 'Option 8' },
-              { id: '9', label: 'Option 9' },
-              { id: '10', label: 'Option 10' },
-              { id: '11', label: 'Option 11' },
-              { id: '12', label: 'Option 12' },
-              { id: '13', label: 'Option 13' },
-              { id: '14', label: 'Option 14' },
-              { id: '15', label: 'Option 15' },
-            ]}
+        <Collapsible title="My personal data" name="personal-data">
+          <Divider
+            title="19/01/2025 - My gaming diary"
+            variant="primary"
+            href="link.com"
           />
-        </FormContainer>
+          <FormContainer fluid>
+            <Input name="input" label="Input" placeholder="Type something" />
+            <Select
+              label="Select"
+              name="select"
+              helpText="This is a help text"
+              placeholder="Select an option"
+              options={[
+                { id: '1', label: 'Option 1' },
+                { id: '2', label: 'Option 2' },
+                { id: '3', label: 'Option 3' },
+                { id: '4', label: 'Option 4' },
+                { id: '5', label: 'Option 5' },
+                { id: '6', label: 'Option 6' },
+                { id: '7', label: 'Option 7' },
+                { id: '8', label: 'Option 8' },
+                { id: '9', label: 'Option 9' },
+                { id: '10', label: 'Option 10' },
+                { id: '11', label: 'Option 11' },
+                { id: '12', label: 'Option 12' },
+                { id: '13', label: 'Option 13' },
+                { id: '14', label: 'Option 14' },
+                { id: '15', label: 'Option 15' },
+              ]}
+            />
+          </FormContainer>
+        </Collapsible>
       </Modal>
 
       <Button