agroptima-design-system 0.26.0-beta.2 → 0.26.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.26.0-beta.2",
+  "version": "0.26.0-beta.4",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -16,23 +16,24 @@
   },
   "dependencies": {
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-viewport": "^8.2.9",
+    "@storybook/addon-viewport": "^8.3.2",
+    "agroptima-design-system": "^0.26.0-beta.3",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.8.0",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-mdx-gfm": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/nextjs": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@storybook/addon-a11y": "^8.3.2",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
+    "@storybook/addon-mdx-gfm": "^8.3.2",
+    "@storybook/blocks": "^8.3.2",
+    "@storybook/nextjs": "^8.3.2",
+    "@storybook/react": "^8.3.2",
+    "@storybook/test": "^8.3.2",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
@@ -50,7 +51,7 @@
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.2",
     "ts-node": "^10.9.2",
     "typescript": "^5"
   },

package/src/atoms/Badge.scss

@@ -16,8 +16,8 @@
   @include typography.footnote-primary;
 
   &.dot {
-    width: 6px;
-    height: 6px;
+    width: 8px;
+    height: 8px;
     padding: 0;
   }
 

package/src/atoms/Drawer.scss

@@ -0,0 +1,86 @@
+@use '../settings/color_alias';
+@use '../settings/typography/content' as typography;
+@use '../settings/config';
+@use '../settings/depth';
+@use '../settings/breakpoints';
+
+.drawer-container {
+  display: flex;
+  justify-content: flex-end;
+  z-index: depth.$z-modal;
+
+  .backdrop {
+    position: fixed;
+    height: 100%;
+    opacity: 0.4;
+    background: color_alias.$neutral-color-900;
+    inset: 0;
+  }
+
+  .drawer {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: config.$space-5x;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: config.$space-2x;
+    flex-grow: 1;
+    width: 26rem;
+    height: 100vh;
+    border-radius: config.$corner-radius-xxs;
+    background: color_alias.$neutral-white;
+    box-shadow:
+      0px 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+      0px 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+    .close-container {
+      align-self: flex-end;
+    }
+
+    .scroll-area {
+      width: 100%;
+      padding-left: config.$space-halfx;
+      padding-right: config.$space-halfx;
+      overflow-y: auto;
+      overflow-anchor: none;
+
+      .header {
+        display: flex;
+        gap: config.$space-2x;
+        align-items: flex-start;
+
+        .title {
+          @include typography.h4;
+        }
+      }
+
+      .body {
+        @include typography.body-regular-primary;
+        width: 100%;
+      }
+    }
+
+    .footer {
+      display: flex;
+      align-self: flex-end;
+      gap: config.$space-3x;
+      margin-top: config.$space-2x;
+
+      .actions {
+        position: absolute;
+      }
+    }
+  }
+
+  // Media queries
+  // Mobile & tablet cases
+  @media only screen and (max-width: breakpoints.$medium) {
+    .drawer {
+      width: 100%;
+    }
+  }
+}

package/src/atoms/Drawer.tsx

@@ -0,0 +1,66 @@
+import type { ButtonProps } from './Button'
+import { classNames } from '../utils/classNames'
+import { Button, IconButton } from './Button'
+import './Drawer.scss'
+import { Actions } from './Form'
+
+export type Variant = 'primary'
+
+export interface DrawerProps extends React.ComponentPropsWithoutRef<'div'> {
+  id: string
+  variant?: Variant
+  title: string
+  buttons: ButtonProps[]
+  onCloseDrawer: () => void
+}
+
+export function Drawer({
+  id,
+  className,
+  variant = 'primary',
+  title,
+  buttons,
+  children,
+  onCloseDrawer,
+  ...props
+}: DrawerProps): React.JSX.Element {
+  const cssClasses = classNames('drawer', variant, className)
+
+  return (
+    <div className="drawer-container">
+      <div className="backdrop"></div>
+      <div
+        role="dialog"
+        aria-labelledby={`${id}-title`}
+        aria-describedby={`${id}-body`}
+        className={cssClasses}
+        {...props}
+      >
+        <div className="close-container">
+          <IconButton
+            icon="Close"
+            accessibilityLabel="Close"
+            onClick={onCloseDrawer}
+          />
+        </div>
+        <div className="scroll-area">
+          <div className="header">
+            <h4 id={`${id}-title`} className="title">
+              {title}
+            </h4>
+          </div>
+          <div id={`${id}-body`} className="body">
+            {children}
+          </div>
+        </div>
+        <div className="footer">
+          <Actions>
+            {buttons.map(({ ...button }) => (
+              <Button key={button.label} {...button} />
+            ))}
+          </Actions>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/atoms/Form/Form.scss

@@ -20,20 +20,20 @@
   &:has(.actions) {
     padding-bottom: 6.25rem;
   }
+}
 
-  .actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: config.$space-4x;
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: config.$space-4x;
 
-    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);
+  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;
-  }
+  position: fixed;
+  inset: auto 0 0 0;
 }
 
 @media only screen and (max-width: breakpoints.$large) {
@@ -43,12 +43,18 @@
     &:has(.actions) {
       padding-bottom: 9rem;
     }
-    .actions {
-      padding: 0;
-      flex-direction: column;
-      box-shadow: none;
-      background-color: transparent;
-      inset: auto config.$space-4x config.$space-4x config.$space-4x;
+  }
+  .actions {
+    background-color: color_alias.$neutral-white;
+    border-top: 1px solid color_alias.$neutral-color-200;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: config.$space-2x;
+    box-shadow: none;
+    padding: config.$space-4x auto config.$space-4x auto;
+
+    .button {
+      width: 50%;
     }
   }
 }

package/src/atoms/Input.scss

@@ -1,6 +1,7 @@
 @use '../settings/color_alias';
 @use '../settings/typography/form' as typography;
 @use '../settings/config';
+@import 'button/Button.scss';
 
 .input-group {
   @include typography.input-text;
@@ -124,4 +125,22 @@
       }
     }
   }
+  &.file .input-container {
+    padding: 0;
+    border: none;
+    input {
+      color: color_alias.$neutral-color-600;
+      &::before {
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' fill='none'%3E%3Cpath d='M2.943 8.718h4.114V4.694H9.8L5 0 .2 4.694h2.743v4.024ZM5 1.898l1.488 1.455h-.802v4.023H4.314V3.353h-.802L5 1.898Zm-4.8 8.16h9.6V11.4H.2v-1.341Z' fill='%23EB004D'/%3E%3C/svg%3E");
+        position: absolute;
+        left: config.$space-3x;
+        bottom: config.$space-2x;
+      }
+      &::file-selector-button {
+        margin-right: config.$space-2x;
+        padding-left: config.$space-3x + config.$icon-size-2x + config.$space-1x;
+        @extend .button;
+      }
+    }
+  }
 }

package/src/atoms/Input.tsx

@@ -57,6 +57,7 @@ export function Input({
   return (
     <div
       className={classNames('input-group', variant, className, {
+        file: type === 'file',
         invalid: errors?.length,
       })}
     >
@@ -73,6 +74,7 @@ export function Input({
           type={handleInputType()}
           name={name}
           aria-label={accessibilityLabel || label}
+          className={classNames({ 'primary-outlined': type === 'file' })}
           {...props}
         />
         {suffix && <span className="input-suffix">{suffix}</span>}

package/src/atoms/Modal.scss

@@ -154,12 +154,5 @@
         }
       }
     }
-
-    // Media queries
-    // Mobile & tablet cases
-    @media only screen and (max-width: breakpoints.$large) {
-      &.details {
-      }
-    }
   }
 }

package/src/stories/Changelog.mdx

@@ -9,6 +9,15 @@ import { Meta } from "@storybook/blocks";
 * Add CheckableTag & CheckableTagGroup components.
 * Add Filter icon.
 * Add Dot option to Badge component.
+* Add Drawer component.
+
+# 0.25.7
+
+* Add styles for file Input component
+
+# 0.25.6
+
+* Align Form Action buttons horizontally
 
 # 0.25.5
 

package/src/stories/Drawer.stories.js

@@ -0,0 +1,125 @@
+import React from 'react'
+
+import { Drawer } from '../atoms/Drawer'
+import { CheckableTagGroup, CheckableTag } from '../atoms/CheckableTag'
+import { Collapsible } from '@/atoms/Collapsible'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=1992-142&mode=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  argTypes: {
+    id: {
+      description: 'Id for aria purposes',
+    },
+    variant: {
+      description: 'Component variant used',
+    },
+    title: {
+      description: 'Component title text',
+    },
+    buttons: {
+      description: 'Array of button to be shown on the footer',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export default meta
+
+export const Filters = {
+  render: () => (
+    <Drawer
+      id="videogames-filters"
+      title="Filters"
+      buttons={[
+        {
+          label: 'Clean',
+          variant: 'primary-outlined',
+          onClick: () => alert('click'),
+        },
+        {
+          label: 'Apply',
+          onClick: () => alert('click'),
+        },
+      ]}
+    >
+      <Collapsible noHorizontalPadding open title="Genres">
+        <CheckableTagGroup>
+          <CheckableTag
+            variant="primary"
+            label="RPG"
+            aria-label="RPG games"
+            onSelect={() => {}}
+            onChange={() => {}}
+            isChecked={false}
+          />
+          <CheckableTag
+            variant="primary"
+            label="Sports"
+            aria-label="Sport games"
+            onSelect={() => {}}
+            onChange={() => {}}
+            isChecked={false}
+          />
+          <CheckableTag
+            variant="primary"
+            label="Party"
+            aria-label="Party games"
+            onSelect={() => {}}
+            onChange={() => {}}
+            isChecked={false}
+            isDisabled={true}
+          />
+          <CheckableTag
+            variant="primary"
+            label="Survival horror"
+            aria-label="Survival horror games"
+            onSelect={() => {}}
+            onChange={() => {}}
+            isChecked={true}
+          />
+          <CheckableTag
+            variant="primary"
+            label="Action"
+            aria-label="Action games"
+            onSelect={() => {}}
+            onChange={() => {}}
+            isChecked={false}
+          />
+          <CheckableTag
+            variant="primary"
+            label="Platform"
+            aria-label="Platform games"
+            onSelect={() => {}}
+            onChange={() => {}}
+            isChecked={false}
+          />
+          <CheckableTag
+            variant="primary"
+            label="Graphic adventure"
+            aria-label="Graphic adventure games"
+            onSelect={() => {}}
+            onChange={() => {}}
+            isChecked={false}
+          />
+          <CheckableTag
+            variant="primary"
+            label="FPS"
+            aria-label="First Person Shooter games"
+            onSelect={() => {}}
+            onChange={() => {}}
+            isChecked={false}
+          />
+        </CheckableTagGroup>
+      </Collapsible>
+    </Drawer>
+  ),
+}

package/src/stories/Input.stories.ts

@@ -86,6 +86,18 @@ export const Password: Story = {
   parameters: figmaPrimaryDesign,
 }
 
+export const File: Story = {
+  args: {
+    label: 'Label for input file',
+    variant: 'primary',
+    disabled: false,
+    helpText: 'This text can help you',
+    name: 'file',
+    type: 'file',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
 export const WithErrors: Story = {
   args: {
     label: 'Email',

package/tests/Drawer.spec.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { screen, render, queryByRole } from '@testing-library/react'
+import { Modal } from '@/atoms/Modal'
+
+describe('Modal', () => {
+  const variants = ['info', 'success', 'warning', 'error']
+  it.each(variants)(
+    'renders the %s variant with title and the expected icon and button',
+    (variant) => {
+      const title = `${variant} modal`
+      const content = `${variant} modal content`
+      const { getByRole, getByText } = render(
+        <Modal
+          id={`${variant}-modal`}
+          title={title}
+          buttons={[
+            {
+              label: 'Done',
+            },
+          ]}
+        >
+          {content}
+        </Modal>,
+      )
+      expect(getByRole('img')).toHaveClass('info')
+      expect(getByText(title)).toBeInTheDocument()
+      expect(getByText(content)).toBeInTheDocument()
+      expect(getByRole('button')).toHaveTextContent('Done')
+      expect(getByRole('button')).toHaveClass('primary')
+    },
+  )
+
+  it('renders the Delete/Discard variant with title and the expected icon and buttons', () => {
+    const title = 'Delete modal'
+    const content = 'Delete modal content'
+    const { getByRole, getByText } = render(
+      <Modal
+        id="discard-modal"
+        title={title}
+        variant="discard"
+        buttons={[
+          {
+            label: 'Cancel',
+            variant: 'neutral',
+          },
+          {
+            label: 'Delete',
+            variant: 'error',
+          },
+        ]}
+      >
+        {content}
+      </Modal>,
+    )
+    expect(getByRole('img')).toHaveClass('discard')
+    expect(getByText(title)).toBeInTheDocument()
+    expect(getByText(content)).toBeInTheDocument()
+    expect(screen.getAllByRole('button')[0]).toHaveTextContent('Cancel')
+    expect(screen.getAllByRole('button')[0]).toHaveClass('neutral')
+    expect(screen.getAllByRole('button')[1]).toHaveTextContent('Delete')
+    expect(screen.getAllByRole('button')[1]).toHaveClass('error')
+  })
+})