agroptima-design-system 0.27.25 → 0.27.26

package/package.json

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

package/src/atoms/Modal.scss

@@ -4,6 +4,15 @@
 @use '../settings/depth';
 @use '../settings/breakpoints';
 
+@mixin icon-color($color) {
+  .icon > svg {
+    fill: $color;
+    path {
+      fill: $color;
+    }
+  }
+}
+
 .modal-container {
   position: fixed;
   inset: 0;
@@ -37,46 +46,39 @@
       0px 6px 16px 0px rgba(0, 0, 0, 0.08),
       0px 9px 28px 8px rgba(0, 0, 0, 0.05);
 
-    .scroll-area {
-      width: 100%;
+    .header {
+      display: flex;
+      gap: config.$space-2x;
+      align-items: flex-start;
       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;
-        padding-bottom: config.$space-2x;
-
-        .icon {
-          margin-top: 4px;
-          min-width: config.$icon-size-5x;
-          width: config.$icon-size-5x;
-          height: config.$icon-size-5x;
-          > svg {
-            width: 100%;
-            height: 100%;
-          }
+      .icon {
+        margin-top: 4px;
+        min-width: config.$icon-size-5x;
+        width: config.$icon-size-5x;
+        height: config.$icon-size-5x;
+
+        > svg {
+          width: 100%;
+          height: 100%;
         }
-
         .title {
           @include typography.h4;
         }
       }
+    }
 
-      .divider {
-        width: 100%;
-        height: 1px;
-        background: color_alias.$neutral-color-200;
-        margin-bottom: config.$space-2x;
-      }
+    .divider {
+      width: 100%;
+      border-top: 1px solid color_alias.$neutral-color-200;
+      margin-bottom: config.$space-2x;
+    }
 
-      .body {
-        @include typography.body-regular-primary;
-        width: 100%;
-      }
+    .body {
+      @include typography.body-regular-primary;
+      width: 100%;
+      padding-left: config.$space-halfx;
+      padding-right: config.$space-halfx;
     }
 
     &.details {
@@ -84,75 +86,39 @@
       height: 100%;
     }
 
+    &.scrollable {
+      overflow-y: auto;
+      overflow-anchor: none;
+    }
+
     .footer {
       display: flex;
       align-self: flex-end;
       gap: config.$space-3x;
-      margin-top: config.$space-2x;
     }
 
     &.info {
       .header {
-        .icon {
-          > svg {
-            fill: color_alias.$info-color-1000;
-            path {
-              fill: color_alias.$info-color-1000;
-            }
-          }
-        }
+        @include icon-color(color_alias.$info-color-1000);
       }
     }
 
     &.success {
       .header {
-        .icon {
-          > svg {
-            fill: color_alias.$success-color-1000;
-            path {
-              fill: color_alias.$success-color-1000;
-            }
-          }
-        }
-      }
-    }
-
-    &.warning {
-      .header {
-        .icon {
-          > svg {
-            fill: color_alias.$warning-color-1000;
-            path {
-              fill: color_alias.$warning-color-1000;
-            }
-          }
-        }
+        @include icon-color(color_alias.$success-color-1000);
       }
     }
 
+    &.warning,
     &.discard {
       .header {
-        .icon {
-          > svg {
-            fill: color_alias.$warning-color-1000;
-            path {
-              fill: color_alias.$warning-color-1000;
-            }
-          }
-        }
+        @include icon-color(color_alias.$warning-color-1000);
       }
     }
 
     &.error {
       .header {
-        .icon {
-          > svg {
-            fill: color_alias.$error-color-1000;
-            path {
-              fill: color_alias.$error-color-1000;
-            }
-          }
-        }
+        @include icon-color(color_alias.$error-color-1000);
       }
     }
   }

package/src/atoms/Modal.tsx

@@ -25,6 +25,7 @@ export interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
   variant?: Variant
   title: string
   buttons: ButtonProps[]
+  scrollable?: boolean
 }
 
 export function Modal({
@@ -34,9 +35,10 @@ export function Modal({
   title,
   buttons,
   children,
+  scrollable = false,
   ...props
 }: ModalProps): React.JSX.Element {
-  const cssClasses = classNames('modal', variant, className)
+  const cssClasses = classNames('modal', variant, className, { scrollable })
 
   return (
     <div className="modal-container">
@@ -48,19 +50,17 @@ export function Modal({
         className={cssClasses}
         {...props}
       >
-        <div className="scroll-area">
-          <div className="header">
-            {variant !== 'details' && (
-              <Icon name={IconVariant[variant]} className={variant} />
-            )}
-            <h4 id={`${id}-title`} className="title">
-              {title}
-            </h4>
-          </div>
-          {variant === 'details' && <div className="divider" />}
-          <div id={`${id}-body`} className="body">
-            {children}
-          </div>
+        <div className="header">
+          {variant !== 'details' && (
+            <Icon name={IconVariant[variant]} className={variant} />
+          )}
+          <h4 id={`${id}-title`} className="title">
+            {title}
+          </h4>
+        </div>
+        {variant === 'details' && <div className="divider" />}
+        <div id={`${id}-body`} className="body">
+          {children}
         </div>
         <div className="footer">
           {buttons.map(({ ...button }) => (

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.27.26
+
+* Make scrolling in Modal component optional
+
 ## 0.27.25
 
 * Fix hover style when Checkbox component is disabled

package/src/stories/Modal.stories.js

@@ -2,7 +2,9 @@ import React from 'react'
 import { Card } from '../atoms/Card'
 import { Collapsible } from '../atoms/Collapsible'
 import { DetailItem } from '../atoms/DetailItem'
+import { Input } from '../atoms/Input'
 import { Modal } from '../atoms/Modal'
+import { Select } from '../atoms/Select'
 
 const figmaPrimaryDesign = {
   design: {
@@ -140,6 +142,7 @@ export const Details = {
       id="details-dangerous-alone"
       variant="details"
       title="Game details"
+      scrollable
       buttons={[
         {
           label: 'Done',
@@ -173,3 +176,45 @@ export const Details = {
     </Modal>
   ),
 }
+
+export const Form = {
+  render: () => (
+    <Modal
+      id="form"
+      variant="info"
+      title="Form Modal"
+      buttons={[
+        {
+          label: 'Save',
+        },
+      ]}
+    >
+      <Input label="Input" helpText="This text can help you" name="input" />
+      <Select
+        label="Select"
+        onChange={() => {}}
+        placeholder="Select a platform"
+        options={[
+          { id: '1', label: 'Nintendo Switch' },
+          { id: '2', label: 'PlayStation 5' },
+          { id: '3', label: 'Xbox Series S/X' },
+          { id: '4', label: 'PC' },
+          { id: '5', label: 'Mobile' },
+          { id: '6', label: 'PlayStation 4' },
+          { id: '7', label: 'Xbox One' },
+          { id: '8', label: 'PlayStation 3' },
+          { id: '9', label: 'Xbox 360' },
+          { id: '10', label: 'PlayStation 2' },
+          { id: '11', label: 'Xbox' },
+          { id: '12', label: 'PlayStation' },
+          { id: '13', label: 'Nintendo 64' },
+          { id: '14', label: 'Super Nintendo' },
+          { id: '15', label: 'Sega Genesis' },
+          { id: '16', label: 'Sega Saturn' },
+          { id: '17', label: 'Sega Dreamcast' },
+          { id: '18', label: 'Atari 2600' },
+        ]}
+      />
+    </Modal>
+  ),
+}