agroptima-design-system 0.18.0 → 0.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "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;
@@ -32,7 +33,14 @@
     flex-direction: row;
     justify-content: space-between;
     margin-bottom: config.$space-1x;
-
+    gap: config.$space-1x;
+    .title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+    }
     > .bold {
       @include typography.body-bold;
     }
@@ -56,16 +64,14 @@
     &.disabled {
       @include typography.body-regular-disabled;
       background: color_alias.$neutral-color-50;
+      .header .bold {
+        color: color_alias.$neutral-color-400;
+      }
     }
-  }
 
-  // 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/Card/CardHeader.tsx

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

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/atoms/CardsTable/CardsTable.scss

@@ -116,6 +116,7 @@
     }
 
     tr {
+      border: 1px solid transparent;
       td {
         @include typography.cards-table-list-text;
         overflow: hidden;
@@ -137,6 +138,13 @@
         @include typography.cards-table-list-disabled-text;
       }
     }
+    tr.active {
+      border-color: color_alias.$primary-color-1000;
+      box-shadow: none;
+    }
+    tr.action {
+      cursor: default;
+    }
   }
 
   // Desktop

package/src/atoms/CardsTable/CardsTableRow.tsx

@@ -1,19 +1,29 @@
 import React from 'react'
 import './CardsTable.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface CardsTableRowProps
   extends React.ComponentPropsWithoutRef<'tr'> {
   isDisabled?: boolean
+  isActive?: boolean
 }
 
 export function CardsTableRow({
-  isDisabled = false,
+  isDisabled: disabled = false,
+  isActive: active = false,
   children,
   ...props
 }: CardsTableRowProps): React.JSX.Element {
-  const disabledClass = isDisabled ? 'disabled' : ''
   return (
-    <tr role="row" className={`row ${disabledClass}`} {...props}>
+    <tr
+      role="row"
+      className={classNames('row', {
+        disabled,
+        active,
+        action: Boolean(props.onClick),
+      })}
+      {...props}
+    >
       {children}
     </tr>
   )

package/src/atoms/QuantitySelector.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react'
-import { Icon } from './Icon'
+import React from 'react'
 import { classNames } from '../utils/classNames'
 import './QuantitySelector.scss'
 import { Input, InputProps } from './Input'
@@ -7,28 +6,26 @@ import { Button, ButtonProps } from './Button'
 
 export type Variant = 'primary'
 
-export interface QuantitySelectorProps
-  extends React.ComponentPropsWithoutRef<'div'> {
+export interface QuantitySelectorProps extends InputProps {
   label: string
   accessibilityLabel?: string
   hideLabel?: boolean
   id?: string
   variant?: Variant
-  decrementButton: ButtonProps
-  incrementButton: ButtonProps
-  quantityInput: InputProps
+  onDecrement: () => void
+  onIncrement: () => void
 }
 
 export function QuantitySelector({
-  decrementButton,
-  incrementButton,
-  quantityInput,
+  id,
+  onDecrement,
+  onIncrement,
   label,
   accessibilityLabel,
-  id,
   className,
   hideLabel = false,
   variant = 'primary',
+  disabled,
   ...props
 }: QuantitySelectorProps): React.JSX.Element {
   const cssClasses = classNames('quantity-selector', className)
@@ -41,13 +38,32 @@ export function QuantitySelector({
         </label>
       )}
       <div className={cssClasses}>
-        <Button className="decrement-button" {...decrementButton} />
+        <Button
+          label=""
+          accessibilityLabel="-"
+          type="button"
+          leftIcon="Minus"
+          className="decrement-button"
+          disabled={disabled}
+          onClick={onDecrement}
+        />
         <Input
-          {...quantityInput}
+          id={id}
           label={label}
           accessibilityLabel={accessibilityLabel}
+          disabled={disabled}
+          {...props}
+          hideLabel={true}
+        />
+        <Button
+          label=""
+          accessibilityLabel="+"
+          leftIcon="Add"
+          type="button"
+          className="increment-button"
+          disabled={disabled}
+          onClick={onIncrement}
         />
-        <Button className="increment-button" {...incrementButton} />
       </div>
     </div>
   )

package/src/stories/Card.stories.js

@@ -379,9 +379,16 @@ export const ProductCardsGroup = {
 
 export const Primary = {
   render: () => (
-    <div style={{ display: 'flex' }}>
+    <div style={{ display: 'flex', width: '700px', gap: '20px' }}>
       <Card variant="primary">
-        <CardHeader title="Tekken 8">
+        <CardHeader
+          isBold
+          title="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."
+        >
           <IconButton
             icon="Edit"
             accessibilityLabel="Edit game"
@@ -399,12 +406,26 @@ 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" />
         </CardFooter>
       </Card>
+      <Card variant="primary">
+        <CardHeader isBold title="Metal Gear Solid 5" />
+        <CardContent>
+          <p>
+            Metal Gear Solid 5: Ground Zeroes + The Phantom Pain is a stealth
+          </p>
+        </CardContent>
+      </Card>
     </div>
   ),
 }
@@ -412,12 +433,18 @@ export const Primary = {
 export const Disabled = {
   render: () => (
     <div style={{ display: 'flex' }}>
-      <Card isDisabled={true} variant="primary">
-        <CardHeader title="Tekken 8">
+      <Card isDisabled variant="primary">
+        <CardHeader isBold 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 +453,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

@@ -29,11 +29,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 marked as error?',
     },
   },
   parameters: figmaPrimaryDesign,
@@ -45,12 +48,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 +61,7 @@ export const DisabledOption = {
   render: () => (
     <CardMenuOption
       id="first-menu-option"
+      href="#"
       icon="Info"
       variant="primary"
       title="It's dangerous to go alone!"
@@ -68,35 +71,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/CardsTable.stories.js

@@ -67,7 +67,7 @@ export const Primary = {
           </CardsTableCell>
         </CardsTableRow>
 
-        <CardsTableRow>
+        <CardsTableRow isDisabled>
           <CardsTableCell titleWithActions={2}>The Witcher 3</CardsTableCell>
           <CardsTableCell>
             CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
@@ -88,7 +88,7 @@ export const Primary = {
           </CardsTableCell>
         </CardsTableRow>
 
-        <CardsTableRow>
+        <CardsTableRow isActive onClick={() => alert('Click')}>
           <CardsTableCell titleWithActions={1}>Tekken 8</CardsTableCell>
           <CardsTableCell>
             Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,13 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.18.2
+- Add link to CardMenuOption component
+- Add active and error state to CardMenuOption component
+- Add active state to Card component
+- Update QuantitySelector component props
+- Add active and action state to CardsTableRow component
+
 ## 0.18.0
 - Added Collapsible component to Storybook
 

package/src/stories/QuantitySelector.stories.ts

@@ -51,29 +51,18 @@ export const Primary: Story = {
   args: {
     label: 'Quantity',
     accessibilityLabel: 'Quantity of items to wishlist',
-    id: 'quantity-selector',
-    decrementButton: {
-      label: '',
-      leftIcon: 'Minus',
-      onClick: () => alert('decrement'),
-    },
-    incrementButton: {
-      label: '',
-      leftIcon: 'Add',
-      onClick: () => alert('increment'),
-    },
-    quantityInput: {
-      label: 'Quantity input',
-      hideLabel: true,
-      name: 'quantity',
-      value: 1,
-      onChange: () => alert('onChange'),
-      type: 'number',
-      max: 10,
-      step: 0.0001,
-      min: 1,
-      required: true,
-    },
+    id: 'quantity',
+    hideLabel: true,
+    name: 'quantity',
+    value: 1,
+    onChange: () => alert('onChange'),
+    type: 'number',
+    max: 10,
+    step: 0.0001,
+    min: 1,
+    required: true,
+    onDecrement: () => alert('decrement'),
+    onIncrement: () => alert('increment'),
   },
   parameters: figmaPrimaryDesign,
 }
@@ -82,32 +71,18 @@ export const Disabled: Story = {
   args: {
     label: 'Quantity',
     accessibilityLabel: 'Quantity of items to wishlist',
-    id: 'quantity-selector',
-    decrementButton: {
-      label: '',
-      leftIcon: 'Minus',
-      onClick: () => alert('decrement'),
-      disabled: true,
-    },
-    incrementButton: {
-      label: '',
-      leftIcon: 'Add',
-      onClick: () => alert('increment'),
-      disabled: true,
-    },
-    quantityInput: {
-      label: 'Quantity input',
-      hideLabel: true,
-      name: 'quantity',
-      value: 1,
-      onChange: () => alert('onChange'),
-      type: 'number',
-      max: 10,
-      step: 0.0001,
-      min: 1,
-      required: true,
-      disabled: true,
-    },
+    id: 'quantity',
+    name: 'quantity',
+    value: 1,
+    onChange: () => alert('onChange'),
+    type: 'number',
+    max: 10,
+    step: 0.0001,
+    min: 1,
+    required: true,
+    disabled: true,
+    onDecrement: () => alert('decrement'),
+    onIncrement: () => alert('increment'),
   },
   parameters: figmaPrimaryDesign,
 }

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!"

package/tests/QuantitySelector.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { screen, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { QuantitySelector } from '@/atoms/QuantitySelector'
 
 describe('QuantitySelector', () => {
@@ -8,27 +8,17 @@ describe('QuantitySelector', () => {
       <QuantitySelector
         label="Quantity"
         accessibilityLabel="Quantity of items to wishlist"
-        id="quantity-selector"
-        decrementButton={{
-          label: '-',
-          onClick: () => alert('decrement'),
-        }}
-        incrementButton={{
-          label: '+',
-          onClick: () => alert('increment'),
-        }}
-        quantityInput={{
-          label: 'Quantity input',
-          hideLabel: true,
-          name: 'quantity',
-          value: 1,
-          onChange: () => alert('onChange'),
-          type: 'number',
-          max: 10,
-          step: 0.0001,
-          min: 1,
-          required: true,
-        }}
+        id="quantity"
+        onDecrement={() => alert('decrement')}
+        onIncrement={() => alert('increment')}
+        name="quantity"
+        value={1}
+        onChange={() => alert('onChange')}
+        type="number"
+        max={10}
+        step={0.0001}
+        min={1}
+        required={true}
       />,
     )