agroptima-design-system 0.27.0 → 0.27.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.27.0",
+  "version": "0.27.1-beta.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -15,23 +15,23 @@
     "publish:beta": "npm publish --tag beta"
   },
   "dependencies": {
-    "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-viewport": "^8.3.2",
+    "@storybook/addon-designs": "^8.0.4",
+    "@storybook/addon-viewport": "^8.4.2",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
-    "@storybook/addon-a11y": "^8.3.2",
-    "@storybook/addon-essentials": "^8.3.2",
-    "@storybook/addon-interactions": "^8.3.2",
-    "@storybook/addon-links": "^8.3.2",
-    "@storybook/blocks": "^8.3.2",
-    "@storybook/nextjs": "^8.3.2",
-    "@storybook/react": "^8.3.2",
-    "@storybook/test": "^8.3.2",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-a11y": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/nextjs": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
@@ -45,11 +45,11 @@
     "eslint-config-next": "^14.0.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^8.3.2",
+    "storybook": "^8.4.2",
     "ts-node": "^10.9.2",
     "typescript": "^5"
   },

package/src/atoms/Card/Card.scss

@@ -3,17 +3,22 @@
 @use '../../settings/config';
 @use '../../settings/breakpoints';
 
+a.card {
+  text-decoration: none;
+  &:hover {
+    background-color: color_alias.$primary-color-50;
+  }
+}
+
 .card {
   display: flex;
   flex-direction: column;
   gap: config.$space-1x;
   padding: config.$space-3x;
   width: 100%;
-
   p {
     margin: 0;
   }
-
   .actions {
     display: flex;
     gap: config.$space-4x;

package/src/atoms/Card/Card.tsx

@@ -1,31 +1,48 @@
 import './Card.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
+import Link from 'next/link'
 
 export type Variant = 'primary'
 
-export interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface CardProps {
+  visible?: boolean
+  className?: string
   variant?: Variant
   isDisabled?: boolean
   isActive?: boolean
   error?: boolean
+  href?: string
+  children: React.ReactNode
 }
 
 export function Card({
   className,
+  visible = true,
   variant = 'primary',
   isDisabled = false,
   isActive = false,
   error = false,
   children,
+  href,
   ...props
-}: CardProps): React.JSX.Element {
-  const cssClasses = classNames('card', className, variant, {
+}: CardProps) {
+  if (!visible) return null
+
+  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 (
     <article className={cssClasses} {...props}>
       {children}

package/src/atoms/Card/CardHeader.tsx

@@ -19,7 +19,7 @@ export function CardHeader({
   return (
     <div className={cssClasses} {...props}>
       <span className={classNames('title', { bold: isBold })}>{title}</span>
-      <div className="actions">{children}</div>
+      {children && <div className="actions">{children}</div>}
     </div>
   )
 }

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,6 +1,7 @@
 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: {
@@ -14,17 +15,36 @@ const meta = {
   component: Card,
   tags: ['autodocs'],
   argTypes: {
+    visible: {
+      description: 'Is component visible?',
+      control: 'boolean',
+    },
     variant: {
       description: 'Component variant used',
     },
+    isActive: {
+      description: 'Is component active?',
+      control: 'boolean',
+    },
+    error: {
+      description: 'Has component an error?',
+      control: 'boolean',
+    },
     isBold: {
       description: 'Is component title shown with bold style?',
+      control: 'boolean',
     },
     title: {
       description: 'Title text',
+      control: 'text',
     },
     isDisabled: {
       description: 'Is component disabled?',
+      control: 'text',
+    },
+    href: {
+      description: 'Link to redirect when clicking on the card',
+      control: 'text',
     },
   },
   parameters: figmaPrimaryDesign,
@@ -465,3 +485,20 @@ export const Active = {
     </div>
   ),
 }
+
+export const WithLink = {
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Card href="some-url">
+        <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,6 +4,9 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.27.1
+
+* Update Card with href prop
 
 # 0.27.0