agroptima-design-system 0.22.6 → 0.23.0

package/package.json

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

package/src/atoms/Alert.scss

@@ -11,6 +11,7 @@
   align-items: flex-start;
   border-radius: config.$corner-radius-xxs;
   pointer-events: none;
+  margin: config.$space-4x;
 
   &.fit-content {
     width: fit-content;

package/src/atoms/CardsTable/CardsTable.scss

@@ -169,7 +169,6 @@
 
   th.actions {
     justify-content: center;
-    flex: 1;
   }
 
   td.actions {
@@ -243,12 +242,17 @@
     .alignment-right {
       justify-content: flex-start;
     }
+
     .badge {
       position: absolute;
-      inset: auto config.$space-3x config.$space-3x auto;
+      inset: auto auto config.$space-2x config.$space-2x;
     }
-    tr:has(.badge) {
+    // Specify Badge vertical position depending on having a right aligned item or not
+    tr:not(.alignment-right) {
       padding-bottom: config.$space-10x;
     }
+    tr:has(.alignment-right) {
+      padding-bottom: config.$space-2x;
+    }
   }
 }

package/src/atoms/DetailItem.scss

@@ -0,0 +1,20 @@
+@use '../settings/color_alias';
+@use '../settings/typography/content' as typography;
+@use '../settings/config';
+@use '../settings/depth';
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: config.$space-3x;
+
+  .title {
+    @include typography.body-bold;
+    color: color_alias.$neutral-color-1000;
+  }
+
+  .information {
+    @include typography.body-regular-primary;
+    color: color_alias.$neutral-color-1000;
+  }
+}

package/src/atoms/DetailItem.tsx

@@ -0,0 +1,25 @@
+import { classNames } from '../utils/classNames'
+import './DetailItem.scss'
+
+export type Variant = 'primary'
+
+export interface DetailItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  variant?: Variant
+  title: string
+}
+
+export function DetailItem({
+  id,
+  className,
+  variant = 'primary',
+  title,
+  children,
+  ...props
+}: DetailItemProps): React.JSX.Element {
+  return (
+    <div className={classNames('detail-item', variant, className)} {...props}>
+      <div className="title">{title}</div>
+      <div className="information">{children}</div>
+    </div>
+  )
+}

package/src/atoms/Modal.scss

@@ -56,6 +56,13 @@
       }
     }
 
+    .divider {
+      width: 100%;
+      height: 1px;
+      background: color_alias.$neutral-color-200;
+      margin-bottom: config.$space-2x;
+    }
+
     .body {
       @include typography.body-regular-primary;
     }

package/src/atoms/Modal.tsx

@@ -3,7 +3,13 @@ import { Button, ButtonProps } from './Button'
 import { Icon } from './Icon'
 import './Modal.scss'
 
-export type Variant = 'info' | 'success' | 'warning' | 'error' | 'discard'
+export type Variant =
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'discard'
+  | 'details'
 
 export enum IconVariant {
   info = 'Info',
@@ -42,11 +48,14 @@ export function Modal({
         {...props}
       >
         <div className="header">
-          <Icon name={IconVariant[variant]} className={variant} />
+          {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>

package/src/stories/CardsTable.stories.js

@@ -50,7 +50,7 @@ export const Primary = {
       <CardsTableBody>
         <CardsTableRow>
           <CardsTableCell titleWithActions={3}>
-            <span>Metal Gear Solid 5: The Phantom Pain</span>
+            <span>Zone of the Enders: The 2nd Runner</span>
             <Badge
               accessibilityLabel="Game is bought"
               text="Bought"
@@ -62,7 +62,7 @@ export const Primary = {
             Tokyo, 104-0061 Japan
           </CardsTableCell>
           <CardsTableCell>konami@fakemail.com</CardsTableCell>
-          <CardsTableCell>No price never</CardsTableCell>
+          <CardsTableCell>Not available</CardsTableCell>
           <CardsTableCell actions>
             <IconButton
               icon="Edit"

package/src/stories/Changelog.mdx

@@ -4,6 +4,13 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.23.0
+
+* Add Details variant to Modal component.
+* Add DetailItem component.
+* On CardsTable component, align Badge correctly on mobile and fix Actions misalignment.
+* On Alert component, add margin.
+
 # 0.22.6
 
 * Add property to IconButton component for set the visibility.

package/src/stories/Modal.stories.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { Modal } from '../atoms/Modal'
+import { DetailItem } from '@/atoms/DetailItem'
 
 const figmaPrimaryDesign = {
   design: {
@@ -131,3 +132,26 @@ export const DeleteOrDiscard = {
     </Modal>
   ),
 }
+
+export const Details = {
+  render: () => (
+    <Modal
+      id="details-dangerous-alone"
+      variant="details"
+      title="Game details"
+      buttons={[
+        {
+          label: 'Done',
+          onClick: () => alert('click'),
+        },
+      ]}
+    >
+      <DetailItem title="Title">Final Fantasy VIII</DetailItem>
+      <DetailItem title="Release date">11/02/1999</DetailItem>
+      <DetailItem title="Publisher">
+        <a href="#">Squaresoft</a>
+      </DetailItem>
+      <DetailItem title="Price">59,95 €</DetailItem>
+    </Modal>
+  ),
+}