agroptima-design-system 0.26.5 → 0.26.6

package/package.json

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

package/src/atoms/Collapsible.tsx

@@ -10,6 +10,7 @@ export interface CollapsibleProps
   variant?: Variant
   name?: string
   disabled?: boolean
+  form?: boolean
   noHorizontalPadding?: boolean
 }
 
@@ -20,6 +21,7 @@ export function Collapsible({
   children,
   disabled,
   name,
+  form = false,
   noHorizontalPadding = false,
   ...props
 }: CollapsibleProps): React.JSX.Element {
@@ -29,6 +31,7 @@ export function Collapsible({
   })
   const contentCssClasses = classNames('content', {
     'no-horizontal-padding': noHorizontalPadding,
+    form: form,
   })
 
   return (

package/src/atoms/Form/Form.scss

@@ -2,11 +2,13 @@
 @use '../../settings/breakpoints';
 @use '../../settings/color_alias';
 
+$gap: config.$space-4x;
+
 .form {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  gap: config.$space-4x;
+  gap: $gap;
   padding: 0;
 
   width: breakpoints.$medium;
@@ -25,7 +27,7 @@
 .footer-actions {
   display: flex;
   justify-content: flex-end;
-  gap: config.$space-4x;
+  gap: $gap;
 
   flex-direction: row;
   padding: config.$space-3x config.$space-5x;

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.26.6
+
+* Add property `form` to Collapsible component.
+
 # 0.26.5
 
 * New Delivery icon

package/src/stories/Collapsible.stories.js

@@ -1,9 +1,10 @@
 import React from 'react'
-
-import { Collapsible } from '../atoms/Collapsible'
-import { Input } from '../atoms/Input'
-import { Select } from '../atoms/Select'
-import { Card } from '../atoms/Card'
+import { Collapsible } from '@/atoms/Collapsible'
+import { Input } from '@/atoms/Input'
+import { Select } from '@/atoms/Select'
+import { Card } from '@/atoms/Card'
+import { Form as FormComponent, Actions } from '@/atoms/Form'
+import { Button } from '@/atoms/Button'
 
 const figmaPrimaryDesign = {
   design: {
@@ -219,3 +220,18 @@ export const PrimaryDisabled = {
     </Collapsible>
   ),
 }
+
+export const Form = {
+  render: () => (
+    <FormComponent>
+      <Collapsible open form title="User">
+        <Input label="First Name" placeholder="First Name" name="firstName" />
+        <Input label="Last Name" placeholder="Last Name" name="lastName" />
+        <Actions>
+          <Button type="button" label="Cancel" variant="primary-outlined" />
+          <Button type="submit" label="Sign in" variant="primary" />
+        </Actions>
+      </Collapsible>
+    </FormComponent>
+  ),
+}

package/src/stories/Modal.stories.js

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import { Modal } from '../atoms/Modal'
+import { Modal } from '@/atoms/Modal'
 import { DetailItem } from '@/atoms/DetailItem'
 import { Collapsible } from '@/atoms/Collapsible'
 import { Card } from '@/atoms/Card'