agroptima-design-system 0.28.0-beta.13 → 0.28.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.28.0-beta.13",
+  "version": "0.28.0-beta.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -22,19 +22,19 @@
     "sass": "^1.83.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
+    "@chromatic-com/storybook": "^3.2.3",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.16.0",
-    "@storybook/addon-a11y": "^8.5.1",
+    "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-designs": "^8.0.4",
-    "@storybook/addon-essentials": "^8.5.1",
-    "@storybook/addon-interactions": "^8.5.1",
-    "@storybook/addon-links": "^8.5.1",
-    "@storybook/addon-viewport": "^8.5.1",
-    "@storybook/blocks": "^8.5.1",
-    "@storybook/nextjs": "^8.5.1",
-    "@storybook/react": "^8.5.1",
-    "@storybook/test": "^8.5.1",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/nextjs": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -55,7 +55,7 @@
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.4.2",
-    "storybook": "^8.5.1",
+    "storybook": "^8.4.7",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.2"
   },

package/src/atoms/Card/Card.scss

@@ -13,7 +13,7 @@ a.card {
 .card {
   display: flex;
   flex-direction: column;
-  gap: config.$space-2x;
+  gap: config.$space-1x;
   padding: config.$space-3x;
   width: 100%;
   p {
@@ -27,12 +27,17 @@ a.card {
   .icon {
     width: config.$icon-size-4x;
     height: config.$icon-size-4x;
+    > svg {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    margin-bottom: config.$space-1x;
     gap: config.$space-1x;
     .title {
       overflow: hidden;
@@ -47,7 +52,7 @@ a.card {
   }
 
   .content {
-    margin-bottom: config.$space-1x;
+    margin-bottom: config.$space-2x;
   }
 
   .footer {

package/src/atoms/Card/Card.tsx

@@ -13,8 +13,6 @@ export interface CardProps {
   isActive?: boolean
   error?: boolean
   href?: string
-  onClick?: () => void
-  role?: string
   children: React.ReactNode
 }
 
@@ -35,7 +33,6 @@ export function Card({
     disabled: isDisabled,
     active: isActive,
     error: error,
-    clickable: Boolean(props.onClick),
   })
 
   if (href && !isDisabled) {

package/src/atoms/Card/CardHeader.tsx

@@ -4,7 +4,7 @@ import { classNames } from '../../utils/classNames'
 
 export interface CardHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
   title: string
-  isBold?: boolean
+  isBold: boolean
 }
 
 export function CardHeader({

package/src/atoms/CardsTable/CardsTable.scss

@@ -1,36 +1,75 @@
-@use '../../settings/mixins';
 @use '../../settings/color_alias';
 @use '../../settings/typography/cards_table' as typography;
 @use '../../settings/config';
 @use '../../settings/breakpoints';
 
-.cards-table-list {
-  border-collapse: separate;
-  border-spacing: 0 config.$space-2x;
-  width: 100%;
+@mixin align-data-vertically() {
+  thead {
+    display: none;
+  }
+
+  tbody {
+    tr {
+      flex-direction: row;
+      flex-wrap: wrap;
+      position: relative;
+      gap: config.$space-1x;
+      padding: config.$space-2x config.$space-3x;
+    }
+  }
 
-  th,
   td {
-    padding: config.$space-2x config.$space-3x;
-    padding: config.$space-2x config.$space-3x;
+    width: 100%;
+    flex: inherit;
+    padding: 0px;
   }
+}
+
+.cards-table-list {
+  display: flex;
+  flex-direction: column;
+  gap: config.$space-3x;
 
   tbody {
+    display: flex;
+    flex-direction: column;
+    gap: config.$space-3x;
+
     tr {
       box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
-      cursor: default;
     }
   }
 
-  .cell {
+  tr {
     display: flex;
+    flex-grow: 1;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
-    gap: config.$space-2x;
+    width: 100%;
   }
 
-  .actions > .cell {
-    gap: config.$space-7x;
-    justify-content: center;
+  th {
+    padding: config.$space-2x config.$space-3x;
+    text-align: left;
+
+    &.sortable {
+      cursor: pointer;
+    }
+
+    .icon {
+      width: config.$icon-size-3x;
+      height: config.$icon-size-3x;
+      margin-left: config.$space-1x;
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
   .no-wrap {
@@ -41,14 +80,15 @@
     justify-content: flex-start;
   }
 
-  .alignment-right {
-    justify-content: flex-end !important;
-  }
-
   .alignment-center {
     justify-content: center;
   }
 
+  .actions {
+    display: flex;
+    gap: config.$space-7x;
+  }
+
   &.primary {
     thead > tr {
       @include typography.cards-table-list-header;
@@ -56,7 +96,37 @@
 
     th {
       background: color_alias.$neutral-color-900;
-      @include mixins.icon-color(color_alias.$neutral-white);
+
+      .icon {
+        > svg {
+          fill: color_alias.$neutral-white;
+          path {
+            fill: color_alias.$neutral-white;
+          }
+        }
+
+        &.ascending {
+          > svg {
+            .sorter_svg__up {
+              fill: color_alias.$primary-color-600;
+            }
+            .sorter_svg__down {
+              fill: color_alias.$neutral-white;
+            }
+          }
+        }
+
+        &.descending {
+          > svg {
+            .sorter_svg__up {
+              fill: color_alias.$neutral-white;
+            }
+            .sorter_svg__down {
+              fill: color_alias.$primary-color-600;
+            }
+          }
+        }
+      }
     }
 
     th:first-child {
@@ -84,74 +154,77 @@
 
     tr.disabled {
       background: color_alias.$neutral-color-50;
+
       td {
         @include typography.cards-table-list-disabled-text;
       }
     }
-
-    tr > td {
-      border-top: 1px solid transparent;
-      border-bottom: 1px solid transparent;
-      &:first-child {
-        border-left: 1px solid transparent;
-      }
-      &:last-child {
-        border-right: 1px solid transparent;
-      }
-    }
-
     tr.active {
+      border-color: color_alias.$primary-color-1000;
       box-shadow: none;
-      > td {
-        border-color: color_alias.$primary-color-1000;
-      }
+    }
+    tr.action {
+      cursor: default;
     }
   }
 
-  @media only screen and (max-width: breakpoints.$large) {
-    thead {
-      display: none;
-    }
+  // Desktop
+  thead {
+    display: flex;
+  }
+  tr {
+    flex-direction: row;
+  }
 
-    tr {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      position: relative;
-      margin-block: config.$space-3x;
-      padding: config.$space-2x config.$space-3x;
-      gap: config.$space-1x;
-    }
+  th,
+  td {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex: 2;
 
-    td {
-      width: 100%;
-      flex: inherit;
-      padding: 0px;
+    .checkbox-group {
+      margin-right: config.$space-1x;
     }
+  }
 
-    .actions {
-      width: auto;
-      position: absolute;
-      inset: config.$space-3x config.$space-3x auto auto;
-    }
+  td {
+    padding: config.$space-2x config.$space-3x;
+  }
 
-    .floating-left-mobile {
-      width: auto;
-      order: 98;
-    }
+  th.actions {
+    justify-content: center;
+  }
 
-    .floating-right-mobile {
-      margin-left: auto;
-      width: auto;
-      order: 99;
+  td.actions {
+    order: 0;
+    justify-content: center;
+  }
+
+  .badge:has(.icon) {
+    margin: auto;
+  }
+
+  .alignment-right {
+    justify-content: flex-end !important;
+  }
+
+  &.vertically {
+    @include align-data-vertically();
+  }
+
+  // Media queries
+  // Mobile & tablet cases
+  @media only screen and (max-width: breakpoints.$large) {
+    @include align-data-vertically();
+
+    td:first-child {
+      order: -2;
     }
 
-    tr.active {
-      box-shadow: none;
-      border: 1px solid color_alias.$primary-color-1000;
-      > td {
-        border-color: transparent !important;
-      }
+    .badge:has(.icon) {
+      margin: 0;
+      margin-left: config.$space-2x;
     }
 
     &.with-title td:not(.actions):nth-child(2) {
@@ -173,5 +246,39 @@
     .title-actions-1 {
       width: calc(100% - 1 * config.$icon-size-5x - 8px);
     }
+
+    td.actions {
+      order: -1;
+      flex-grow: 1;
+      align-items: flex-start;
+      justify-content: flex-end;
+      flex-basis: content;
+    }
+
+    .alignment-right {
+      justify-content: flex-start;
+    }
+
+    .badge {
+      position: absolute;
+      inset: auto auto config.$space-2x config.$space-2x;
+    }
+
+    .badge:has(> .icon) {
+      position: relative;
+      inset: inherit;
+    }
+
+    td:has(.badge > .icon) {
+      justify-content: flex-start;
+    }
+
+    // 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/CardsTable/CardsTable.tsx

@@ -7,6 +7,7 @@ export interface CardsTableProps
   extends React.ComponentPropsWithoutRef<'table'> {
   variant?: Variant
   withTitle?: boolean
+  vertically?: boolean
 }
 
 export function CardsTable({
@@ -14,11 +15,13 @@ export function CardsTable({
   summary,
   variant = 'primary',
   withTitle = false,
+  vertically = false,
   children,
   ...props
 }: CardsTableProps): React.JSX.Element {
   const cssClasses = classNames('cards-table-list', variant, className, {
     'with-title': withTitle,
+    vertically: vertically,
   })
   return (
     <table summary={summary} role="table" className={cssClasses} {...props}>

package/src/atoms/CardsTable/CardsTableCell.tsx

@@ -13,8 +13,6 @@ export interface CardsTableCellProps
   noWrap?: boolean
   align?: Alignment
   actions?: boolean
-  floatingLeftMobile?: boolean
-  floatingRightMobile?: boolean
   titleWithActions?: number
 }
 
@@ -23,8 +21,6 @@ export function CardsTableCell({
   actions = false,
   titleWithActions = 0,
   align = Alignment.Left,
-  floatingLeftMobile = false,
-  floatingRightMobile = false,
   children,
   className,
   ...props
@@ -38,25 +34,12 @@ export function CardsTableCell({
     className,
     {
       'no-wrap': noWrap,
+      actions,
     },
   )
-
-  const actionsStopPropagation = actions
-    ? { onClick: (e: React.MouseEvent) => e.stopPropagation() }
-    : {}
-
   return (
-    <td
-      role="cell"
-      className={classNames({
-        actions,
-        'floating-left-mobile': floatingLeftMobile,
-        'floating-right-mobile': floatingRightMobile,
-      })}
-      {...actionsStopPropagation}
-      {...props}
-    >
-      <div className={cssClasses}>{children}</div>
+    <td role="cell" className={cssClasses} {...props}>
+      {children}
     </td>
   )
 }

package/src/atoms/CardsTable/CardsTableHeader.tsx

@@ -14,18 +14,12 @@ export function CardsTableHeader({
   actions = false,
   ...props
 }: CardsTableHeaderProps) {
-  const cssClasses = classNames(
-    'header',
-    'cell',
-    `alignment-${align}`,
-    className,
-    {
-      actions,
-    },
-  )
+  const cssClasses = classNames('header', `alignment-${align}`, className, {
+    actions,
+  })
   return (
-    <th role="columnheader" {...props}>
-      <div className={cssClasses}>{children}</div>
+    <th scope="col" role="columnheader" className={cssClasses} {...props}>
+      {children}
     </th>
   )
 }

package/src/atoms/CardsTable/CardsTableRow.tsx

@@ -20,6 +20,7 @@ export function CardsTableRow({
       className={classNames('row', {
         disabled,
         active,
+        action: Boolean(props.onClick),
       })}
       {...props}
     >

package/src/atoms/CardsTableList.tsx

@@ -0,0 +1,127 @@
+import './CardsTable/CardsTable.scss'
+import React, { useState } from 'react'
+import { sortBy } from '../utils/sort'
+import {
+  CardsTable,
+  CardsTableBody,
+  CardsTableCell,
+  CardsTableHead,
+  CardsTableHeader,
+  CardsTableRow,
+} from './CardsTable'
+import type { IconType } from './Icon'
+import { Icon } from './Icon'
+
+export type Variant = 'primary'
+
+export enum Order {
+  Ascending = 'ascending',
+  Descending = 'descending',
+  None = 'none',
+}
+
+export type Header = {
+  label: string
+  icon?: IconType
+  columnId: string
+  isSortable?: boolean
+}
+
+export type Column = {
+  [key: string]: string
+}
+export type Row = { id: string; isDisabled?: boolean; columns: Column }
+
+export type SortState = { columnId: string; order: Order }
+
+export interface CardsTableListProps
+  extends React.ComponentPropsWithoutRef<'table'> {
+  headers: Header[]
+  rows: Row[]
+  variant?: Variant
+}
+
+export function CardsTableList({
+  headers,
+  rows,
+  summary,
+  variant = 'primary',
+}: CardsTableListProps): React.JSX.Element {
+  const [sortState, setSortState] = useState<SortState | null>(() => {
+    return headers[0]?.isSortable
+      ? { columnId: headers[0].columnId, order: Order.Ascending }
+      : null
+  })
+
+  function checkColumnOrder(columnId: string) {
+    if (sortState?.columnId === columnId) {
+      return sortState.order
+    }
+    return Order.None
+  }
+
+  function applySort(columnId: string) {
+    if (!headers.find((header) => header.columnId === columnId)?.isSortable) {
+      return
+    }
+
+    setSortState({
+      columnId,
+      order:
+        checkColumnOrder(columnId) === Order.Ascending
+          ? Order.Descending
+          : Order.Ascending,
+    })
+  }
+  const sortedRows = sortState?.columnId
+    ? sortBy({
+        rows,
+        prop: sortState?.columnId,
+        order: sortState?.order,
+      })
+    : rows
+
+  return (
+    <CardsTable summary={summary} variant={variant}>
+      <CardsTableHead>
+        <CardsTableRow>
+          {headers.map((header) => (
+            <CardsTableHeader
+              key={header.columnId}
+              aria-sort={checkColumnOrder(header.columnId)}
+              className={header.isSortable ? 'sortable' : ''}
+              onClick={() => applySort(header.columnId)}
+            >
+              <div className="container">
+                <div>
+                  <span>{header.label}</span>
+                  {header.icon && <Icon name={header.icon} />}
+                </div>
+                {header.isSortable && (
+                  <Icon
+                    name="Sorter"
+                    className={checkColumnOrder(header.columnId)}
+                  />
+                )}
+              </div>
+            </CardsTableHeader>
+          ))}
+        </CardsTableRow>
+      </CardsTableHead>
+      <CardsTableBody>
+        {sortedRows.map((row: Row) => {
+          const cells = Object.entries(row.columns)
+          return (
+            <CardsTableRow key={row.id} isDisabled={row.isDisabled}>
+              {cells.map(([columnId, value]) => (
+                <CardsTableCell key={`${row.id}${columnId}`}>
+                  {value}
+                </CardsTableCell>
+              ))}
+            </CardsTableRow>
+          )
+        })}
+      </CardsTableBody>
+    </CardsTable>
+  )
+}

package/src/atoms/Checkbox.tsx

@@ -42,12 +42,7 @@ export function Checkbox({
         aria-label={accessibilityLabel || label}
         {...props}
       />
-      <label
-        htmlFor={identifier}
-        className={classNames({ 'visually-hidden': hideLabel })}
-      >
-        {label}
-      </label>
+      {!hideLabel && <label htmlFor={identifier}>{label}</label>}
     </div>
   )
 }

package/src/atoms/DatePicker.scss

@@ -4,12 +4,8 @@
 @use '../settings/depth';
 @use '../settings/breakpoints';
 
-// Interpolation applied: https://sass-lang.com/documentation/breaking-changes/css-vars/
-
 .date-picker {
   .rdp-root {
-    width: 309px;
-    --rdp-accent-color: #{color_alias.$primary-color-600};
-    --rdp-accent-background-color: #{color_alias.$primary-color-50};
+    width: 320px;
   }
 }