agroptima-design-system 0.28.0 → 0.28.1

package/package.json

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

package/src/atoms/CardsTable/CardsTable.scss

@@ -4,6 +4,21 @@
 @use '../../settings/config';
 @use '../../settings/breakpoints';
 
+@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
+      );
+    }
+  }
+}
+
 .cards-table-list {
   border-collapse: separate;
   border-spacing: 0 config.$space-2x;
@@ -11,6 +26,7 @@
 
   th,
   td {
+    vertical-align: top;
     padding: config.$space-2x config.$space-3x;
     padding: config.$space-2x config.$space-3x;
   }
@@ -24,10 +40,14 @@
 
   .cell {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: config.$space-2x;
   }
 
+  .checkbox {
+    margin-top: config.$space-1x;
+  }
+
   .actions > .cell {
     gap: config.$space-7x;
     justify-content: center;
@@ -158,20 +178,6 @@
       margin-top: config.$space-2x;
     }
 
-    .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);
-    }
+    @include generate-title-actions(5);
   }
 }

package/src/atoms/Icon.scss

@@ -1,15 +1,6 @@
 @use '../settings/color_alias';
 @use '../settings/config';
 
-@mixin icon-color($color) {
-  .icon > svg {
-    fill: $color;
-    path {
-      fill: $color;
-    }
-  }
-}
-
 .icon {
   display: inline-flex;
   justify-content: center;

package/src/stories/CardsTable.stories.js

@@ -44,8 +44,8 @@ export const Primary = {
         <CardsTableRow>
           <CardsTableHeader>
             <Checkbox
-              label="Select all table rows"
               hideLabel
+              label="Select all table rows"
               id="checkbox-select-all"
               indeterminate
               checked
@@ -65,6 +65,7 @@ export const Primary = {
         <CardsTableRow>
           <CardsTableCell titleWithActions={3}>
             <Checkbox
+              hideLabel
               accessibilityLabel="Select all table rows"
               id="checkbox-select-all"
               variant="primary"
@@ -111,6 +112,7 @@ export const Primary = {
         <CardsTableRow isDisabled>
           <CardsTableCell titleWithActions={2}>
             <Checkbox
+              hideLabel
               accessibilityLabel="Select all table rows"
               id="checkbox-select-all"
               variant="primary"
@@ -151,6 +153,7 @@ export const Primary = {
         <CardsTableRow isActive onClick={() => alert('Click')}>
           <CardsTableCell titleWithActions={1}>
             <Checkbox
+              hideLabel
               accessibilityLabel="Select all table rows"
               id="checkbox-select-all"
               variant="primary"
@@ -181,6 +184,7 @@ export const Primary = {
         <CardsTableRow>
           <CardsTableCell titleWithActions={5}>
             <Checkbox
+              hideLabel
               accessibilityLabel="Select all table rows"
               id="checkbox-select-all"
               variant="primary"
@@ -240,6 +244,7 @@ export const Primary = {
         <CardsTableRow>
           <CardsTableCell titleWithActions={5}>
             <Checkbox
+              hideLabel
               accessibilityLabel="Select all table rows"
               id="checkbox-select-all"
               variant="primary"
@@ -320,8 +325,8 @@ export const MultipleBadges = {
         <CardsTableRow>
           <CardsTableHeader>
             <Checkbox
-              label="Select all table rows"
               hideLabel
+              label="Select all table rows"
               id="checkbox-select-all"
               indeterminate
               checked
@@ -342,10 +347,10 @@ export const MultipleBadges = {
         <CardsTableRow>
           <CardsTableCell titleWithActions={3}>
             <Checkbox
+              hideLabel
               accessibilityLabel="Select"
               id="checkbox-select-all"
               variant="primary"
-              hideLabel
             />
             <span>Zone of the Enders: The 2nd Runner</span>
             <Badge

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.28.1
+
+* Align items to top in CardTable component
+
 ## 0.28.0
 
 * Add DatePicker component