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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.16.2",
+  "version": "0.17.1-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/atoms/QuantitySelector.scss

@@ -0,0 +1,97 @@
+@use '../settings/color_alias';
+@use '../settings/typography/form' as form-typography;
+@use '../settings/typography/content' as typography;
+@use '../settings/config';
+
+.quantity-selector-group {
+  display: flex;
+  flex-direction: column;
+  gap: config.$space-2x;
+
+  .quantity-selector {
+    display: flex;
+    align-items: flex-start;
+
+    .input-group {
+      width: 100%;
+    }
+  }
+
+  &.primary {
+    .quantity-selector {
+      .input-container {
+        // Remove default arrows
+        /* Chrome, Safari, Edge, Opera */
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        /* Firefox */
+        input[type='number'] {
+          -moz-appearance: textfield;
+        }
+        .input {
+          border-radius: 0;
+          border-right: 0;
+          border-left: 0;
+          background: color_alias.$neutral-white;
+          text-align: center;
+
+          @include form-typography.input-text;
+
+          &::placeholder {
+            @include form-typography.input-placeholder-text;
+          }
+
+          &:focus {
+            outline: color_alias.$primary-color-600;
+            border: 1px solid color_alias.$primary-color-600;
+          }
+
+          &:disabled {
+            border: 1px solid color_alias.$neutral-color-400;
+            background: color_alias.$neutral-color-50;
+            color: color_alias.$neutral-color-400;
+
+            &::placeholder {
+              color: color_alias.$neutral-color-400;
+            }
+          }
+        }
+      }
+      .button {
+        @include typography.body-regular-primary;
+        color: color_alias.$neutral-white;
+        height: 42px;
+
+        &:disabled {
+          border: 1px solid color_alias.$neutral-color-400;
+          color: color_alias.$neutral-color-400;
+        }
+      }
+      .decrement-button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &:disabled {
+          border-right: 0;
+        }
+      }
+
+      .increment-button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &:disabled {
+          border-left: 0;
+        }
+      }
+    }
+
+    .quantity-selector-label {
+      @include form-typography.form-label;
+    }
+  }
+}

package/src/atoms/QuantitySelector.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import { Icon } from './Icon'
+import { classNames } from '../utils/classNames'
+import './QuantitySelector.scss'
+import { Input, InputProps } from './Input'
+import { Button, ButtonProps } from './Button'
+
+export type Variant = 'primary'
+
+export interface QuantitySelectorProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+  label: string
+  accessibilityLabel?: string
+  hideLabel?: boolean
+  id?: string
+  variant?: Variant
+  decrementButton: ButtonProps
+  incrementButton: ButtonProps
+  quantityInput: InputProps
+}
+
+export function QuantitySelector({
+  decrementButton,
+  incrementButton,
+  quantityInput,
+  label,
+  accessibilityLabel,
+  id,
+  className,
+  hideLabel = false,
+  variant = 'primary',
+  ...props
+}: QuantitySelectorProps): React.JSX.Element {
+  const cssClasses = classNames('quantity-selector', className)
+
+  return (
+    <div className={`quantity-selector-group ${variant}`} {...props}>
+      {!hideLabel && (
+        <label className="quantity-selector-label" htmlFor={id}>
+          {label}
+        </label>
+      )}
+      <div className={cssClasses}>
+        <Button className="decrement-button" {...decrementButton} />
+        <Input
+          {...quantityInput}
+          label={label}
+          accessibilityLabel={accessibilityLabel}
+        />
+        <Button className="increment-button" {...incrementButton} />
+      </div>
+    </div>
+  )
+}

package/src/icons/index.tsx

@@ -25,6 +25,7 @@ import Import from './import.svg'
 import Info from './info.svg'
 import Loading from './loading.svg'
 import Logout from './logout.svg'
+import Minus from './minus.svg'
 import Product from './product.svg'
 import Salesman from './salesman.svg'
 import Search from './search.svg'
@@ -62,6 +63,7 @@ export {
   Info,
   Loading,
   Logout,
+  Minus,
   Product,
   Salesman,
   Search,

package/src/icons/minus.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 11H0V8h20v3Z" fill="#444"/></svg>

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,13 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## Beta
+- Add link to CardMenuOption component
+- Add active and error state to CardMenuOption component
+
+## 0.17.0
+- Added QuantitySelector component to Storybook
+
 ## 0.16.2
 - Fixed some icons missing ViewBox
 

package/src/stories/QuantitySelector.stories.ts

@@ -0,0 +1,113 @@
+import { QuantitySelector } from '../atoms/QuantitySelector'
+import { StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Design System/Atoms/QuantitySelector',
+  component: QuantitySelector,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      description: 'Label for the component',
+    },
+    accessibilityLabel: {
+      description:
+        'Describes the component purpose. If empty, label content will be used',
+    },
+    variant: {
+      description: 'Component variant used',
+    },
+    disabled: {
+      description: 'Is the input in disabled state?',
+    },
+    name: {
+      description: 'Component name property',
+    },
+    id: {
+      description: 'Value needed for the label relation',
+    },
+    decrementButton: {
+      description: 'Button component props for decrementButton',
+    },
+    incrementButton: {
+      description: 'Button component props for incrementButton',
+    },
+    quantityInput: {
+      description: 'Input component props for quantityInput',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=2701-275&m=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+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,
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+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,
+    },
+  },
+  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

@@ -0,0 +1,44 @@
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+import { QuantitySelector } from '@/atoms/QuantitySelector'
+
+describe('QuantitySelector', () => {
+  it('renders', () => {
+    const { getByRole, getByText, getAllByRole } = render(
+      <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,
+        }}
+      />,
+    )
+
+    expect(getByText(/Quantity/i)).toBeInTheDocument()
+    expect(getAllByRole('button')[0]).toHaveClass(
+      `button primary decrement-button`,
+    )
+    expect(getAllByRole('button')[1]).toHaveClass(
+      `button primary increment-button`,
+    )
+    expect(getByRole('spinbutton')).toHaveValue(1)
+  })
+})