agroptima-design-system 0.27.1-beta.0 → 0.27.2

package/package.json

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

package/src/atoms/Card/Card.tsx

@@ -1,6 +1,7 @@
 import './Card.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
+import Link from 'next/link'
 
 export type Variant = 'primary'
 
@@ -23,20 +24,28 @@ export function Card({
   isActive = false,
   error = false,
   children,
+  href,
   ...props
 }: CardProps) {
   if (!visible) return null
 
-  const Tag = props.href ? 'a' : 'article'
-
-  const cssClasses = classNames(className, 'card', variant, {
+  const cssClasses = classNames('card', variant, className, {
     disabled: isDisabled,
     active: isActive,
     error: error,
   })
+
+  if (href && !isDisabled) {
+    return (
+      <Link href={href} className={cssClasses} {...props}>
+        {children}
+      </Link>
+    )
+  }
+
   return (
-    <Tag className={cssClasses} {...props}>
+    <article className={cssClasses} {...props}>
       {children}
-    </Tag>
+    </article>
   )
 }

package/src/atoms/Form/Form.scss

@@ -56,7 +56,8 @@ $gap: config.$space-4x;
     padding: config.$space-4x auto config.$space-4x auto;
 
     .button {
-      width: 50%;
+      display: flex;
+      flex-grow: 1;
     }
   }
 }

package/src/atoms/Input.tsx

@@ -65,7 +65,9 @@ export function Input({
     >
       {!hideLabel && (
         <label
-          className={classNames('input-label', required ? 'is-required' : '')}
+          className={classNames('input-label', {
+            'is-required': required,
+          })}
           htmlFor={identifier}
         >
           {label}

package/src/atoms/QuantitySelector.scss

@@ -68,6 +68,10 @@
 
     .quantity-selector-label {
       @include form-typography.form-label;
+      &.is-required::after {
+        content: '*';
+        color: color_alias.$primary-color-600;
+      }
     }
   }
 }

package/src/atoms/QuantitySelector.tsx

@@ -29,16 +29,22 @@ export function QuantitySelector({
   disabled,
   ...props
 }: QuantitySelectorProps): React.JSX.Element {
-  const cssClasses = classNames('quantity-selector', className)
-
   return (
-    <div className={`quantity-selector-group ${variant}`} {...props}>
+    <div
+      className={classNames('quantity-selector-group', variant, className)}
+      {...props}
+    >
       {!hideLabel && (
-        <label className="quantity-selector-label" htmlFor={id}>
+        <label
+          className={classNames('quantity-selector-label', {
+            'is-required': props.required,
+          })}
+          htmlFor={id}
+        >
           {label}
         </label>
       )}
-      <div className={cssClasses}>
+      <div className="quantity-selector">
         <Button
           label=""
           accessibilityLabel="-"

package/src/generic/_helpers.scss

@@ -33,6 +33,10 @@
   width: 100%;
 }
 
+.hidden {
+  display: none !important;
+}
+
 .only-desktop {
   @media only screen and (max-width: breakpoints.$large) {
     display: none !important;

package/src/stories/Card.stories.js

@@ -1,7 +1,6 @@
 import { IconButton } from '../atoms/Button'
 import { Card, CardHeader, CardContent, CardFooter } from '../atoms/Card'
 import { Button } from '../atoms/Button'
-import { type } from 'os'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.27.2
+
+* Add * to required input in Quantiy component
+
 # 0.27.1
 
 * Update Card with href prop