agroptima-design-system 0.31.4 → 0.31.5

package/package.json

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

package/src/atoms/Card/Card.scss

@@ -66,6 +66,13 @@ a.card {
     }
   }
 
+  &:not(:has(.footer > .button)),
+  &.clickable {
+    &:hover {
+      background: color_alias.$primary-color-50;
+    }
+  }
+
   &.primary {
     @include typography.body-regular-primary;
     box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);

package/src/atoms/Pagination/Pagination.scss

@@ -40,13 +40,13 @@
         }
       }
 
-      &:hover {
+      &:not(:disabled):hover {
         border: 1px solid color_alias.$primary-color-1000;
         background: color_alias.$primary-color-50;
         color: color_alias.$primary-color-1000;
       }
 
-      &.selected {
+      &:not(:disabled).selected {
         border: 1px solid color_alias.$primary-color-1000;
         color: color_alias.$primary-color-1000;
       }
@@ -80,8 +80,8 @@
         border: 1px solid transparent;
         background: none;
 
-        &.selected,
-        &:hover {
+        &:not(:disabled).selected,
+        &:not(:disabled):hover {
           border: 1px solid color_alias.$primary-color-1000;
           color: color_alias.$primary-color-1000;
         }

package/src/stories/Card.stories.js

@@ -17,7 +17,7 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><p>A Card component can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.</p>',
+          '<h2>Usage guidelines</h2><p>A Card component can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.</p><ul><li>The Card has a hover effect when being a link, being `clickable` or not having any buttons.</li></ul>',
       },
     },
     figmaPrimaryDesign,
@@ -522,3 +522,20 @@ export const WithLink = {
     </div>
   ),
 }
+
+export const Clickable = {
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Card onClick={() => alert('click')}>
+        <CardHeader title="Fallout 3" isBold />
+        <CardContent>
+          <p>
+            Fallout 3 is a post-apocalyptic action role-playing open world video
+            game developed by Bethesda Game Studios and published by Bethesda
+            Softworks.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+}

package/src/stories/Changelog.mdx

@@ -4,11 +4,15 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.31.5
+
+* Card component has a hover effect when being a link, being clickable or not having any buttons.
+
 ## 0.31.4
 
 * Capitalized characters in month DatePicker for spanish version.
 * Change the day selection style for DateSinglePicker.
-* Colors in DateRangePicker in filters in Drawer component.
+* Fix colors in DateRangePicker in filters in Drawer component.
 
 ## 0.31.3