agroptima-design-system 0.31.2-beta.3 → 0.31.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.31.2-beta.3",
+  "version": "0.31.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Card/Card.scss

@@ -5,6 +5,7 @@
 
 a.card {
   text-decoration: none;
+
   &:hover {
     background-color: color_alias.$primary-color-50;
   }
@@ -16,9 +17,11 @@ a.card {
   gap: config.$space-2x;
   padding: config.$space-3x;
   width: 100%;
+
   p {
     margin: 0;
   }
+
   .actions {
     display: flex;
     gap: config.$space-4x;
@@ -34,6 +37,7 @@ a.card {
     flex-direction: row;
     justify-content: space-between;
     gap: config.$space-1x;
+
     .title {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -41,6 +45,7 @@ a.card {
       -webkit-box-orient: vertical;
       display: -webkit-box;
     }
+
     > .bold {
       @include typography.body-bold;
     }
@@ -51,8 +56,12 @@ a.card {
   }
 
   .footer {
+    display: flex;
+    flex-direction: column;
+    gap: config.$space-2x;
     margin-top: auto;
-    .button {
+
+    > .button {
       width: 100%;
     }
   }
@@ -65,6 +74,7 @@ a.card {
     &.disabled {
       @include typography.body-regular-disabled;
       background: color_alias.$neutral-color-50;
+
       .header .bold {
         color: color_alias.$neutral-color-400;
       }

package/src/atoms/CardMenu/CardMenuOption.tsx

@@ -31,6 +31,7 @@ export function CardMenuOption({
   href,
   active,
   error,
+  prefetch = false,
   ...props
 }: CardMenuOptionProps): React.JSX.Element {
   const cssClasses = classNames('card-menu-option', variant, className, {
@@ -45,6 +46,7 @@ export function CardMenuOption({
       className={cssClasses}
       href={disabled ? '#' : href}
       aria-disabled={disabled}
+      prefetch={prefetch}
       {...props}
     >
       <div className="left">

package/src/stories/Card.stories.js

@@ -1,6 +1,7 @@
 import { IconButton } from '../atoms/Button'
 import { Button } from '../atoms/Button'
 import { Card, CardContent, CardFooter, CardHeader } from '../atoms/Card'
+import { QuantitySelector } from '../atoms/QuantitySelector'
 
 const figmaPrimaryDesign = {
   design: {
@@ -101,6 +102,18 @@ export const ProductCard = {
           </div>
         </CardContent>
         <CardFooter>
+          <QuantitySelector
+            accessibilityLabel="Quantity of items to wishlist"
+            defaultValue={1}
+            hideLabel
+            id="quantity"
+            label="Quantity"
+            max={10}
+            min={1}
+            name="quantity"
+            required
+            step={0.0001}
+          />
           <Button variant="primary-outlined" label="Buy" />
         </CardFooter>
       </Card>

package/src/stories/Changelog.mdx

@@ -4,9 +4,13 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.31.2
+
+* Manage footer buttons width and position on Card component
+
 ## 0.31.1
 
-* Add NextLink props to button link componen
+* Add NextLink props and prefetch to false to the Button, Card, CardMenuOption, MenuLink, PopoverMenuOption PaginationArrow and PaginationNumber components
 
 ## 0.31.0