agroptima-design-system 0.23.0 → 0.24.0-beta.2

package/package.json

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

package/src/atoms/Form/Actions.scss

@@ -0,0 +1,30 @@
+@use '../../settings/config';
+@use '../../settings/breakpoints';
+@use '../../settings/color_alias';
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: config.$space-4x;
+  // margin: config.$space-1x 0 config.$space-6x;
+
+  flex-direction: row;
+  padding: config.$space-3x config.$space-5x;
+  background-color: color_alias.$neutral-white;
+  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
+
+  position: fixed;
+  inset: auto 0 0 0;
+}
+
+@media only screen and (max-width: breakpoints.$large) {
+  .actions {
+    margin: 0;
+    flex-direction: column;
+    position: fixed;
+    width: calc(100% - config.$space-3x - config.$space-3x);
+    right: config.$space-3x;
+    left: config.$space-3x;
+    bottom: config.$space-4x;
+  }
+}

package/src/atoms/Form/Actions.tsx

@@ -0,0 +1,10 @@
+import { classNames } from '@/utils/classNames'
+import './Actions.scss'
+
+export interface ActionsProps extends React.ComponentPropsWithoutRef<'div'> {
+  children: React.ReactNode
+}
+
+export default function Actions({ className, children }: ActionsProps) {
+  return <div className={classNames('actions', className)}>{children}</div>
+}

package/src/atoms/Form/Form.scss

@@ -0,0 +1,25 @@
+@use '../../settings/config';
+@use '../../settings/breakpoints';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  gap: config.$space-4x;
+  padding: 0;
+
+  width: breakpoints.$medium;
+  max-width: breakpoints.$medium;
+
+  &.full-width {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (max-width: breakpoints.$large) {
+  .form {
+    max-width: 100%;
+    width: 100%;
+  }
+}

package/src/atoms/Form/Form.tsx

@@ -0,0 +1,25 @@
+import { classNames } from '../../utils/classNames'
+import './Form.scss'
+
+export interface FormProps extends React.ComponentPropsWithoutRef<'form'> {
+  fullWidth?: boolean
+  children: React.ReactNode
+}
+
+export default function Form({
+  className,
+  fullWidth,
+  children,
+  ...props
+}: FormProps) {
+  return (
+    <form
+      className={classNames(className, 'form', {
+        'full-width': fullWidth,
+      })}
+      {...props}
+    >
+      {children}
+    </form>
+  )
+}

package/src/atoms/Form/index.ts

@@ -0,0 +1,4 @@
+import Form from './Form'
+import Actions from './Actions'
+
+export { Form, Actions }

package/src/stories/Form.stories.js

@@ -0,0 +1,44 @@
+import { Form, Actions } from '@/atoms/Form'
+import { Input } from '@/atoms/Input'
+import { Button } from '@/atoms/Button'
+
+const meta = {
+  title: 'Design System/Atoms/Form',
+  component: Form,
+  tags: ['autodocs'],
+  argTypes: {
+    fullWidth: {
+      description: 'Should the form take full width?',
+      control: { type: 'boolean', default: false },
+    },
+  },
+}
+
+export default meta
+
+export const FormWithActions = {
+  render: (args) => (
+    <Form {...args}>
+      <Input label="First Name" placeholder="First Name" name="firstName" />
+      <Input label="Last Name" placeholder="Last Name" name="lastName" />
+      <Input label="Username" placeholder="Username" name="username" />
+      <Input label="Email" placeholder="Email" type="email" name="email" />
+      <Input
+        label="Password"
+        placeholder="Password"
+        type="password"
+        name="password"
+      />
+      <Input
+        label="Repeat password"
+        placeholder="Repeat password"
+        type="repeatPassword"
+        name="repeatPassword"
+      />
+      <Actions>
+        <Button type="button" label="Cancel" variant="primary-outlined" />
+        <Button type="submit" label="Sign in" variant="primary" />
+      </Actions>
+    </Form>
+  ),
+}

package/tests/library.ts

@@ -8,3 +8,4 @@ export * as Input from '../src/stories/Input.stories'
 export * as Multiselect from '../src/stories/Multiselect.stories'
 export * as Modal from '../src/stories/Modal.stories'
 export * as Select from '../src/stories/Select.stories'
+export * as Form from '../src/stories/Form.stories'