agroptima-design-system 0.16.1 → 0.16.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.16.1",
+  "version": "0.16.2-beta.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -10,7 +10,8 @@
     "lint:fix": "eslint src --fix",
     "types": "tsc --noEmit",
     "chromatic": "npx chromatic --exit-zero-on-changes",
-    "test": "jest"
+    "test": "jest",
+    "publish:beta": "npm publish --tag beta"
   },
   "dependencies": {
     "@storybook/addon-designs": "^7.0.5",

package/src/atoms/Card/Card.scss

@@ -8,6 +8,7 @@
   flex-direction: column;
   gap: config.$space-1x;
   padding: config.$space-3x;
+  width: 100%;
 
   p {
     margin: 0;
@@ -57,15 +58,10 @@
       @include typography.body-regular-disabled;
       background: color_alias.$neutral-color-50;
     }
-  }
 
-  // Media queries
-  // Mobile case
-  @media only screen and (min-width: breakpoints.$small) and (max-width: breakpoints.$medium) {
-    width: 100%;
-  }
-  // Tablet & Desktop cases
-  @media only screen and (min-width: breakpoints.$medium) {
-    width: 18.625rem;
+    &.active {
+      border: 1px solid color_alias.$primary-color-1000;
+      box-shadow: none;
+    }
   }
 }

package/src/atoms/Card/Card.tsx

@@ -7,22 +7,25 @@ export type Variant = 'primary'
 export interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
   variant?: Variant
   isDisabled?: boolean
+  isActive?: boolean
 }
 
 export function Card({
   className,
   variant = 'primary',
   isDisabled = false,
+  isActive = false,
   children,
   ...props
 }: CardProps): React.JSX.Element {
   const cssClasses = classNames('card', className, variant, {
     disabled: isDisabled,
+    active: isActive,
   })
 
   return (
-    <div className={cssClasses} {...props}>
+    <article className={cssClasses} {...props}>
       {children}
-    </div>
+    </article>
   )
 }

package/src/atoms/CardMenu/CardMenu.scss

@@ -13,12 +13,16 @@
   gap: config.$space-3x;
   border-radius: config.$corner-radius-xxs;
   border-bottom: 1px solid color_alias.$neutral-color-200;
+  text-decoration: none;
   cursor: default;
-
+  &:hover {
+    text-decoration: none;
+  }
   @include typography.body-regular-primary;
 
   .icon {
     width: config.$icon-size-4x;
+    min-width: config.$icon-size-4x;
     height: config.$icon-size-4x;
     > svg {
       width: 100%;
@@ -54,6 +58,15 @@
   &.primary {
     background: color_alias.$neutral-white;
 
+    &.active {
+      background-color: color_alias.$primary-color-50;
+    }
+
+    &.error {
+      border: 1px solid color_alias.$error-color-600;
+      background-color: color_alias.$error-color-50;
+    }
+
     .icon {
       > svg {
         fill: color_alias.$primary-color-600;

package/src/atoms/CardMenu/CardMenuOption.tsx

@@ -1,17 +1,21 @@
 import { Icon, IconType } from '../Icon'
 import './CardMenu.scss'
 import { classNames } from '../../utils/classNames'
+import Link, { LinkProps as NextLinkProps } from 'next/link'
 
 export type Variant = 'primary'
 
-export interface CardMenuOptionProps
-  extends React.ComponentPropsWithoutRef<'div'> {
+type LinkProps = NextLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+export interface CardMenuOptionProps extends LinkProps {
   id?: string
   variant?: Variant
   icon: IconType
   title: string
   description?: string
   disabled?: boolean
+  href: string
+  active?: boolean
+  error?: boolean
 }
 
 export function CardMenuOption({
@@ -22,29 +26,35 @@ export function CardMenuOption({
   title,
   description,
   disabled,
+  href,
+  active,
+  error,
   ...props
 }: CardMenuOptionProps): React.JSX.Element {
   const cssClasses = classNames('card-menu-option', variant, className, {
-    disabled: disabled,
+    disabled,
+    active,
+    error,
   })
 
   return (
-    <div
+    <Link
       role="menuitem"
       className={cssClasses}
-      {...props}
+      href={disabled ? '#' : href}
       aria-disabled={disabled}
+      {...props}
     >
       <div className="left">
         <div className="title-container">
           <Icon name={icon} className={variant} />
           <span className="title">{title}</span>
         </div>
-        <p className="content">{description}</p>
+        {description && <p className="content">{description}</p>}
       </div>
       <div className="right">
         <Icon name="AngleRight" className={variant} />
       </div>
-    </div>
+    </Link>
   )
 }

package/src/stories/Card.stories.js

@@ -399,7 +399,13 @@ export const Primary = {
           />
         </CardHeader>
         <CardContent>
-          <p>TEKKEN 8 will feature exciting new gameplay focused on “Aggressive” tactics. Retaining TEKKEN's unique fighting game identity, the game will provide both players and spectators with the series' most thrilling experience yet with visceral screen-jarring attacks and environments that are both dynamic and destructible.</p>
+          <p>
+            TEKKEN 8 will feature exciting new gameplay focused on “Aggressive”
+            tactics. Retaining TEKKEN's unique fighting game identity, the game
+            will provide both players and spectators with the series' most
+            thrilling experience yet with visceral screen-jarring attacks and
+            environments that are both dynamic and destructible.
+          </p>
         </CardContent>
         <CardFooter>
           <Button variant="primary-outlined" label="Add to wishlist" />
@@ -412,12 +418,18 @@ export const Primary = {
 export const Disabled = {
   render: () => (
     <div style={{ display: 'flex' }}>
-      <Card isDisabled={true} variant="primary">
+      <Card isDisabled variant="primary">
         <CardHeader title="Tekken 8">
           <IconButton disabled icon="Delete" accessibilityLabel="Delete game" />
         </CardHeader>
         <CardContent>
-          <p>TEKKEN 8 will feature exciting new gameplay focused on “Aggressive” tactics. Retaining TEKKEN's unique fighting game identity, the game will provide both players and spectators with the series' most thrilling experience yet with visceral screen-jarring attacks and environments that are both dynamic and destructible.</p>
+          <p>
+            TEKKEN 8 will feature exciting new gameplay focused on “Aggressive”
+            tactics. Retaining TEKKEN's unique fighting game identity, the game
+            will provide both players and spectators with the series' most
+            thrilling experience yet with visceral screen-jarring attacks and
+            environments that are both dynamic and destructible.
+          </p>
         </CardContent>
         <CardFooter>
           <Button variant="primary-outlined" disabled label="Add to wishlist" />
@@ -426,3 +438,15 @@ export const Disabled = {
     </div>
   ),
 }
+
+export const Active = {
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Card isActive>
+        <CardHeader title="Fallout 3">
+          <IconButton icon="Delete" accessibilityLabel="Delete game" />
+        </CardHeader>
+      </Card>
+    </div>
+  ),
+}

package/src/stories/CardMenu.stories.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { CardMenu, CardMenuOption } from '../atoms/CardMenu'
+import { isErrored } from 'stream'
 
 const figmaPrimaryDesign = {
   design: {
@@ -29,11 +30,14 @@ const meta = {
     description: {
       description: 'Component description text',
     },
-    isDisabled: {
+    disabled: {
       description: 'Is the component disabled?',
     },
-    onClick: {
-      description: 'Event triggered when the component is clicked',
+    active: {
+      description: 'Is the component active?',
+    },
+    error: {
+      description: 'Is the component error?',
     },
   },
   parameters: figmaPrimaryDesign,
@@ -45,12 +49,11 @@ export const Option = {
   render: () => (
     <CardMenuOption
       id="first-menu-option"
+      href="#"
       icon="Info"
       variant="primary"
       title="It's dangerous to go alone!"
       description="Take this 🗡️ and this 🛡️ and this 💣 and this 🏹 and this 🔪 and this 🐴 and this 🔫 and this 🔪"
-      isDisabled={false}
-      onClick={() => alert('click')}
     />
   ),
 }
@@ -59,6 +62,7 @@ export const DisabledOption = {
   render: () => (
     <CardMenuOption
       id="first-menu-option"
+      href="#"
       icon="Info"
       variant="primary"
       title="It's dangerous to go alone!"
@@ -68,35 +72,60 @@ export const DisabledOption = {
   ),
 }
 
+export const ActiveOption = {
+  render: () => (
+    <CardMenuOption
+      id="first-menu-option"
+      href="#"
+      icon="Info"
+      variant="primary"
+      title="It's dangerous to go alone!"
+      description="Take this 🗡️"
+      active
+    />
+  ),
+}
+
+export const ErrorOption = {
+  render: () => (
+    <CardMenuOption
+      id="first-menu-option"
+      href="#"
+      icon="Info"
+      variant="primary"
+      title="It's dangerous to go alone!"
+      description="Take this 🗡️"
+      error
+    />
+  ),
+}
+
 export const Menu = {
   render: () => (
     <CardMenu>
       <CardMenuOption
         id="first-menu-option"
+        href="#"
         icon="AddCircle"
         variant="primary"
         title="Title"
         description="Name of the videogame"
-        isDisabled={false}
-        onClick={() => alert('click title')}
       />
       <CardMenuOption
         id="second-menu-option"
+        href="#"
         icon="Edit"
         variant="primary"
         title="Address"
         description="Videogame company address"
-        isDisabled={false}
-        onClick={() => alert('click address')}
       />
       <CardMenuOption
         id="third-menu-option"
+        href="#"
         icon="Info"
         variant="primary"
         title="Email"
         description="Videogame company email"
-        isDisabled={false}
-        onClick={() => alert('click email')}
       />
     </CardMenu>
   ),

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,11 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+
+## 0.16.2
+- Add link to CardMenuOption component
+- Add active and error state to CardMenuOption component
+
 ## 0.16.1
 - Updated Oultined Button background color
 - Added new icons

package/tests/CardMenuOption.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { screen, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { CardMenuOption } from '@/atoms/CardMenu/CardMenuOption'
 
 describe('CardMenuOption', () => {
@@ -7,6 +7,7 @@ describe('CardMenuOption', () => {
     const { getByRole, getByText, getAllByRole } = render(
       <CardMenuOption
         id="option-one"
+        href="#"
         icon="Info"
         title="It's dangerous to go alone!"
         description="Take this sword!"