agroptima-design-system 0.24.2 → 0.24.4-beta.1

package/package.json

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

package/src/atoms/Collapsible.scss

@@ -40,6 +40,11 @@
   .content {
     padding: config.$space-7x;
     padding-bottom: config.$space-3x;
+
+    &.no-horizontal-padding {
+      padding-left: 0;
+      padding-right: 0;
+    }
   }
 
   &.primary {

package/src/atoms/Collapsible.tsx

@@ -10,6 +10,7 @@ export interface CollapsibleProps
   variant?: Variant
   name?: string
   disabled?: boolean
+  noHorizontalPadding: boolean
 }
 
 export function Collapsible({
@@ -19,12 +20,16 @@ export function Collapsible({
   children,
   disabled,
   name,
+  noHorizontalPadding = false,
   ...props
 }: CollapsibleProps): React.JSX.Element {
   const cssClasses = classNames('collapsible', variant, className, {
     open: props.open,
     disabled: disabled,
   })
+  const contentCssClasses = classNames('content', {
+    'no-horizontal-padding': noHorizontalPadding,
+  })
 
   return (
     <details name={name} className={cssClasses} {...props}>
@@ -32,7 +37,7 @@ export function Collapsible({
         <Icon className="arrow" name="AngleRight" />
         <span className="title">{title}</span>
       </summary>
-      <div className="content">{children}</div>
+      <div className={contentCssClasses}>{children}</div>
     </details>
   )
 }

package/src/atoms/Modal.scss

@@ -9,6 +9,7 @@
   inset: 0;
   z-index: depth.$z-modal;
   margin: config.$space-4x;
+  margin-top: 3rem;
 
   .backdrop {
     position: fixed;
@@ -19,13 +20,13 @@
   }
 
   .modal {
-    top: 6.25rem;
     margin: auto;
     display: flex;
     position: relative;
     padding: config.$space-5x;
     flex-direction: column;
     align-items: flex-start;
+    justify-content: space-between;
     gap: config.$space-2x;
     flex-grow: 1;
     border-radius: config.$corner-radius-xxs;
@@ -36,37 +37,50 @@
       0px 6px 16px 0px rgba(0, 0, 0, 0.08),
       0px 9px 28px 8px rgba(0, 0, 0, 0.05);
 
-    .header {
-      display: flex;
-      gap: config.$space-2x;
-      align-items: flex-start;
-
-      .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%;
+    .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;
+
+        .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;
         }
       }
 
-      .title {
-        @include typography.h4;
+      .divider {
+        width: 100%;
+        height: 1px;
+        background: color_alias.$neutral-color-200;
+        margin-bottom: config.$space-2x;
       }
-    }
 
-    .divider {
-      width: 100%;
-      height: 1px;
-      background: 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%;
+    &.details {
+      max-width: 50rem;
+      height: 100%;
     }
 
     .footer {
@@ -76,14 +90,6 @@
       margin-top: config.$space-2x;
     }
 
-    &.details {
-      max-width: 50rem;
-      min-height: 400px;
-      max-height: 90vh;
-      overflow-y: auto;
-      overflow-anchor: none;
-    }
-
     &.info {
       .header {
         .icon {
@@ -153,7 +159,6 @@
     // Mobile & tablet cases
     @media only screen and (max-width: breakpoints.$large) {
       &.details {
-        top: 3rem;
       }
     }
   }

package/src/atoms/Modal.tsx

@@ -47,17 +47,19 @@ export function Modal({
         className={cssClasses}
         {...props}
       >
-        <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 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>
         <div className="footer">
           {buttons.map(({ ...button }) => (

package/src/stories/Collapsible.stories.js

@@ -3,6 +3,7 @@ import React from 'react'
 import { Collapsible } from '../atoms/Collapsible'
 import { Input } from '../atoms/Input'
 import { Select } from '../atoms/Select'
+import { Card } from '../atoms/Card'
 
 const figmaPrimaryDesign = {
   design: {
@@ -155,6 +156,15 @@ export const PrimaryOpened = {
       <Collapsible title="Another data" name="another-data">
         <Input label="Another data" name="anotherData" placeholder="..." />
       </Collapsible>
+      <Collapsible
+        noHorizontalPadding
+        title="Important information"
+        name="no-horizontal-padding-example"
+      >
+        <Card>
+          <p>Not available</p>
+        </Card>
+      </Collapsible>
     </>
   ),
 }

package/src/stories/Modal.stories.js

@@ -3,6 +3,7 @@ import React from 'react'
 import { Modal } from '../atoms/Modal'
 import { DetailItem } from '@/atoms/DetailItem'
 import { Collapsible } from '@/atoms/Collapsible'
+import { Card } from '@/atoms/Card'
 
 const figmaPrimaryDesign = {
   design: {
@@ -156,6 +157,12 @@ export const Details = {
         <p>RPG genre</p>
         <p>1 player</p>
       </Collapsible>
+      <Collapsible noHorizontalPadding open title="Other related games">
+        <Card>
+          <p>Final Fantasy IX</p>
+          <p>Final Fantasy X</p>
+        </Card>
+      </Collapsible>
       <DetailItem style={{ marginTop: '10px' }} align="right" title="Price">
         59,95 €
       </DetailItem>