agroptima-design-system 0.28.0-beta.9 → 0.28.1

package/.github/workflows/publish-package-to-npmjs.yml

@@ -15,6 +15,7 @@ jobs:
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
+      - run: npm config set legacy-peer-deps true
       - run: npm ci --force
       - run: npm publish
         env:

package/chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:653ba0ccdf919d51bb667622",
+  "zip": true
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.28.0-beta.9",
+  "version": "0.28.1",
   "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.3",
+    "@chromatic-com/storybook": "^3.2.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.16.0",
-    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-a11y": "^8.5.1",
     "@storybook/addon-designs": "^8.0.4",
-    "@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",
+    "@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",
     "@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.4.7",
+    "storybook": "^8.5.1",
     "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-1x;
+  gap: config.$space-2x;
   padding: config.$space-3x;
   width: 100%;
   p {
@@ -27,17 +27,12 @@ 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;
@@ -52,7 +47,7 @@ a.card {
   }
 
   .content {
-    margin-bottom: config.$space-2x;
+    margin-bottom: config.$space-1x;
   }
 
   .footer {

package/src/atoms/Card/Card.tsx

@@ -13,6 +13,8 @@ export interface CardProps {
   isActive?: boolean
   error?: boolean
   href?: string
+  onClick?: () => void
+  role?: string
   children: React.ReactNode
 }
 
@@ -33,6 +35,7 @@ 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,75 +1,56 @@
+@use '../../settings/mixins';
 @use '../../settings/color_alias';
 @use '../../settings/typography/cards_table' as typography;
 @use '../../settings/config';
 @use '../../settings/breakpoints';
 
-@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;
+@mixin generate-title-actions($max-actions: 5) {
+  @for $actions from 1 through $max-actions {
+    .title-actions-#{$actions} {
+      width: calc(
+        100% -
+          #{$actions} *
+          config.$icon-size-5x -
+          #{($actions - 1) *
+          config.$space-7x} -
+          config.$space-3x
+      );
     }
   }
-
-  td {
-    width: 100%;
-    flex: inherit;
-    padding: 0px;
-  }
 }
 
 .cards-table-list {
-  display: flex;
-  flex-direction: column;
-  gap: config.$space-3x;
+  border-collapse: separate;
+  border-spacing: 0 config.$space-2x;
+  width: 100%;
 
-  tbody {
-    display: flex;
-    flex-direction: column;
-    gap: config.$space-3x;
+  th,
+  td {
+    vertical-align: top;
+    padding: config.$space-2x config.$space-3x;
+    padding: config.$space-2x config.$space-3x;
+  }
 
+  tbody {
     tr {
       box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
+      cursor: default;
     }
   }
 
-  tr {
+  .cell {
     display: flex;
-    flex-grow: 1;
+    align-items: flex-start;
+    gap: config.$space-2x;
   }
 
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
+  .checkbox {
+    margin-top: config.$space-1x;
   }
 
-  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%;
-      }
-    }
+  .actions > .cell {
+    gap: config.$space-7x;
+    justify-content: center;
   }
 
   .no-wrap {
@@ -80,13 +61,12 @@
     justify-content: flex-start;
   }
 
-  .alignment-center {
-    justify-content: center;
+  .alignment-right {
+    justify-content: flex-end !important;
   }
 
-  .actions {
-    display: flex;
-    gap: config.$space-7x;
+  .alignment-center {
+    justify-content: center;
   }
 
   &.primary {
@@ -96,37 +76,7 @@
 
     th {
       background: color_alias.$neutral-color-900;
-
-      .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;
-            }
-          }
-        }
-      }
+      @include mixins.icon-color(color_alias.$neutral-white);
     }
 
     th:first-child {
@@ -154,131 +104,80 @@
 
     tr.disabled {
       background: color_alias.$neutral-color-50;
-
       td {
         @include typography.cards-table-list-disabled-text;
       }
     }
-    tr.active {
-      border-color: color_alias.$primary-color-1000;
-      box-shadow: none;
-    }
-    tr.action {
-      cursor: default;
-    }
-  }
-
-  // Desktop
-  thead {
-    display: flex;
-  }
-  tr {
-    flex-direction: row;
-  }
 
-  th,
-  td {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex: 2;
-
-    .checkbox-group {
-      margin-right: config.$space-1x;
+    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;
+      }
     }
-  }
 
-  td {
-    padding: config.$space-2x config.$space-3x;
-  }
-
-  th.actions {
-    justify-content: center;
-  }
-
-  td.actions {
-    order: 0;
-    justify-content: center;
-  }
-
-  .badge:has(.icon) {
-    margin: auto;
-  }
-
-  .alignment-right {
-    justify-content: flex-end !important;
-  }
-
-  &.vertically {
-    @include align-data-vertically();
+    tr.active {
+      box-shadow: none;
+      > td {
+        border-color: color_alias.$primary-color-1000;
+      }
+    }
   }
 
-  // Media queries
-  // Mobile & tablet cases
   @media only screen and (max-width: breakpoints.$large) {
-    @include align-data-vertically();
-
-    td:first-child {
-      order: -2;
-    }
-
-    .badge:has(.icon) {
-      margin: 0;
-      margin-left: config.$space-2x;
+    thead {
+      display: none;
     }
 
-    &.with-title td:not(.actions):nth-child(2) {
-      margin-top: config.$space-2x;
+    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;
     }
 
-    .title-actions-5 {
-      width: calc(100% - 5 * config.$icon-size-5x - 4 * config.$space-7x - 8px);
-    }
-    .title-actions-4 {
-      width: calc(100% - 4 * config.$icon-size-5x - 3 * config.$space-7x - 8px);
-    }
-    .title-actions-3 {
-      width: calc(100% - 3 * config.$icon-size-5x - 2 * config.$space-7x - 8px);
-    }
-    .title-actions-2 {
-      width: calc(100% - 2 * config.$icon-size-5x - 1 * config.$space-7x - 8px);
-    }
-    .title-actions-1 {
-      width: calc(100% - 1 * config.$icon-size-5x - 8px);
+    td {
+      width: 100%;
+      flex: inherit;
+      padding: 0px;
     }
 
-    td.actions {
-      order: -1;
-      flex-grow: 1;
-      align-items: flex-start;
-      justify-content: flex-end;
-      flex-basis: content;
+    .actions {
+      width: auto;
+      position: absolute;
+      inset: config.$space-3x config.$space-3x auto auto;
     }
 
-    .alignment-right {
-      justify-content: flex-start;
+    .floating-left-mobile {
+      width: auto;
+      order: 98;
     }
 
-    .badge {
-      position: absolute;
-      inset: auto auto config.$space-2x config.$space-2x;
+    .floating-right-mobile {
+      margin-left: auto;
+      width: auto;
+      order: 99;
     }
 
-    .badge:has(> .icon) {
-      position: relative;
-      inset: inherit;
+    tr.active {
+      box-shadow: none;
+      border: 1px solid color_alias.$primary-color-1000;
+      > td {
+        border-color: transparent !important;
+      }
     }
 
-    td:has(.badge > .icon) {
-      justify-content: flex-start;
+    &.with-title td:not(.actions):nth-child(2) {
+      margin-top: config.$space-2x;
     }
 
-    // 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;
-    }
+    @include generate-title-actions(5);
   }
 }

package/src/atoms/CardsTable/CardsTable.tsx

@@ -7,7 +7,6 @@ export interface CardsTableProps
   extends React.ComponentPropsWithoutRef<'table'> {
   variant?: Variant
   withTitle?: boolean
-  vertically?: boolean
 }
 
 export function CardsTable({
@@ -15,13 +14,11 @@ 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,6 +13,8 @@ export interface CardsTableCellProps
   noWrap?: boolean
   align?: Alignment
   actions?: boolean
+  floatingLeftMobile?: boolean
+  floatingRightMobile?: boolean
   titleWithActions?: number
 }
 
@@ -21,6 +23,8 @@ export function CardsTableCell({
   actions = false,
   titleWithActions = 0,
   align = Alignment.Left,
+  floatingLeftMobile = false,
+  floatingRightMobile = false,
   children,
   className,
   ...props
@@ -34,12 +38,25 @@ export function CardsTableCell({
     className,
     {
       'no-wrap': noWrap,
-      actions,
     },
   )
+
+  const actionsStopPropagation = actions
+    ? { onClick: (e: React.MouseEvent) => e.stopPropagation() }
+    : {}
+
   return (
-    <td role="cell" className={cssClasses} {...props}>
-      {children}
+    <td
+      role="cell"
+      className={classNames({
+        actions,
+        'floating-left-mobile': floatingLeftMobile,
+        'floating-right-mobile': floatingRightMobile,
+      })}
+      {...actionsStopPropagation}
+      {...props}
+    >
+      <div className={cssClasses}>{children}</div>
     </td>
   )
 }

package/src/atoms/CardsTable/CardsTableHeader.tsx

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

package/src/atoms/CardsTable/CardsTableRow.tsx

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

package/src/atoms/Checkbox.tsx

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

package/src/atoms/DatePicker.scss

@@ -4,10 +4,12 @@
 @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: #eb004dff; // color_alias.$primary-color-600;
-    --rdp-accent-background-color: #ffedeeff; // color_alias.$primary-color-50;
+    --rdp-accent-color: #{color_alias.$primary-color-600};
+    --rdp-accent-background-color: #{color_alias.$primary-color-50};
   }
 }

package/src/atoms/DatePicker.tsx

@@ -1,23 +1,32 @@
 import 'react-day-picker/style.css'
 import './DatePicker.scss'
 import { useEffect, useState } from 'react'
-import { type DateRange, DayPicker } from 'react-day-picker'
+import { type DateRange, DayPicker, type Locale } from 'react-day-picker'
 import { enGB, es } from 'react-day-picker/locale'
 import { classNames } from '../utils/classNames'
 
 export type Variant = 'primary'
 
-type DivPropsWithoutOnChange = Omit<
+type DivPropsWithoutOnSelect = Omit<
   React.ComponentPropsWithoutRef<'div'>,
   'onSelect'
 >
 
-export interface CalendarProps extends DivPropsWithoutOnChange {
+interface AvailableLocale {
+  [index: string]: Locale
+}
+
+const availableLocales: AvailableLocale = {
+  es: es,
+  en: enGB,
+}
+
+export interface DatePickerProps extends DivPropsWithoutOnSelect {
   variant?: Variant
   onSelect: (dateRange: DateRange | undefined) => void
   footer: string
   selected?: DateRange
-  locale?: string
+  lng: keyof typeof availableLocales
 }
 
 export function DatePicker({
@@ -26,13 +35,12 @@ export function DatePicker({
   onSelect = () => {},
   footer = 'Pick a day',
   selected: preselected,
-  locale = 'es',
-}: CalendarProps): React.JSX.Element {
+  lng,
+}: DatePickerProps): React.JSX.Element {
   useEffect(() => {
     setSelected(preselected)
   }, [preselected])
 
-  console.log('preselected: ', preselected)
   const cssClasses = classNames('date-picker', variant, className)
 
   const [selected, setSelected] = useState<DateRange | undefined>(preselected)
@@ -45,7 +53,7 @@ export function DatePicker({
   return (
     <div className={cssClasses}>
       <DayPicker
-        locale={locale === 'es' ? es : enGB}
+        locale={availableLocales[lng]}
         mode="range"
         min={1}
         selected={selected}