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

package/package.json

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

@@ -37,6 +37,7 @@
   }
 
   .icon-button {
+    pointer-events: auto;
     .icon {
       width: config.$icon-size-2x;
       height: config.$icon-size-2x;

package/src/atoms/Button/Button.scss

@@ -55,7 +55,7 @@
 
   &.primary-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$primary-color-600,
       color_alias.$primary-color-50
     );
@@ -84,7 +84,7 @@
 
   &.error-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$error-color-600,
       color_alias.$error-color-50
     );
@@ -125,7 +125,7 @@
 
   &.success-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$neutral-color-900,
       color_alias.$success-color-50
     );
@@ -166,7 +166,7 @@
 
   &.warning-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$neutral-color-900,
       color_alias.$warning-color-50
     );
@@ -195,7 +195,7 @@
 
   &.info-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$info-color-600,
       color_alias.$info-color-50
     );
@@ -224,7 +224,7 @@
 
   &.neutral-outlined {
     @include button-style(
-      color_alias.$neutral-white,
+      transparent,
       color_alias.$neutral-color-1000,
       color_alias.$neutral-color-50
     );

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

@@ -12,6 +12,10 @@
     display: flex;
     flex-direction: column;
     gap: config.$space-3x;
+
+    tr {
+      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
+    }
   }
 
   tr {
@@ -111,13 +115,10 @@
       border-radius: 0px config.$corner-radius-xxs config.$corner-radius-xxs 0px;
     }
 
-    tr {
-      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
-    }
-
     tr {
       td {
         @include typography.cards-table-list-text;
+        overflow: hidden;
       }
     }
 
@@ -138,6 +139,45 @@
     }
   }
 
+  // Desktop
+  thead {
+    display: flex;
+  }
+  tr {
+    flex-direction: row;
+  }
+
+  th,
+  td {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex: 2;
+  }
+
+  td {
+    padding: config.$space-2x config.$space-3x;
+  }
+
+  th.actions {
+    justify-content: center;
+    flex: 1;
+  }
+
+  td.actions {
+    order: 0;
+    justify-content: center;
+    flex: 1;
+  }
+
+  td:has(.badge) {
+    gap: config.$space-2x;
+  }
+
+  .alignment-right {
+    justify-content: flex-end;
+  }
+
   // Media queries
   // Mobile & tablet cases
   @media only screen and (max-width: breakpoints.$large) {
@@ -145,16 +185,20 @@
       display: none;
     }
 
-    tr {
-      flex-direction: row;
-      flex-wrap: wrap;
-      position: relative;
-      gap: config.$space-1x;
-      padding: config.$space-3x;
+    tbody {
+      tr {
+        flex-direction: row;
+        flex-wrap: wrap;
+        position: relative;
+        gap: config.$space-1x;
+        padding: config.$space-2x config.$space-3x;
+      }
     }
 
     td {
       width: 100%;
+      flex: inherit;
+      padding: 0px;
     }
 
     td:first-child {
@@ -184,43 +228,9 @@
       position: absolute;
       inset: auto config.$space-3x config.$space-3x auto;
     }
-  }
-  // Desktop case
-  @media only screen and (min-width: breakpoints.$large) {
-    thead {
-      display: flex;
-    }
-    tr {
-      flex-direction: row;
-    }
-
-    th,
-    td {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      flex: 2;
-    }
-    th.actions {
-      justify-content: center;
-      flex: 1;
-    }
-    td {
-      padding: config.$space-5x config.$space-3x;
-    }
-
-    td.actions {
-      order: 0;
-      justify-content: center;
-      flex: 1;
-    }
-
-    td:has(.badge) {
-      gap: config.$space-2x;
-    }
 
     .alignment-right {
-      justify-content: flex-end;
+      justify-content: flex-start;
     }
   }
 }

package/src/icons/calendar.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 2h-1V0h-2v2H6V0H4v2H3c-1.11 0-1.99.9-1.99 2L1 18a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2Zm0 16H3V8h14v10Zm0-12H3V4h14v2Zm-7 5h5v5h-5v-5Z" fill="#444"/></svg>

package/src/icons/change-password.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.91 13.167h18.18V15H.91v-1.833Zm1.045-3.713.772-1.357.773 1.357 1.182-.687-.773-1.357h1.546V6.035H3.909l.773-1.348L3.5 4l-.773 1.348L1.955 4l-1.182.688.772 1.347H0V7.41h1.545L.773 8.767l1.182.687Zm6.09-.687 1.182.687L10 8.097l.773 1.357 1.181-.687-.772-1.357h1.545V6.035h-1.545l.772-1.348L10.773 4 10 5.348 9.227 4l-1.182.688.773 1.347H7.273V7.41h1.545l-.773 1.357ZM20 6.035h-1.546l.773-1.348L18.046 4l-.773 1.348L16.5 4l-1.182.688.773 1.347h-1.546V7.41h1.546l-.773 1.357 1.182.687.773-1.357.773 1.357 1.181-.687-.773-1.357H20V6.035Z" fill="#444"/></svg>

package/src/icons/client.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g clip-path="url(#client__a)"><path d="M10 2.375a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm0 11.25c3.713 0 7.625 1.825 7.625 2.625v1.375H2.375V16.25c0-.8 3.912-2.625 7.625-2.625ZM10 0C7.237 0 5 2.237 5 5s2.237 5 5 5c2.762 0 5-2.237 5-5s-2.238-5-5-5Zm0 11.25c-3.338 0-10 1.675-10 5V20h20v-3.75c0-3.325-6.662-5-10-5Z" fill="#444"/></g><defs><clipPath id="client__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/comment.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g clip-path="url(#comment__a)"><path d="M19.99 2c0-1.1-.89-2-1.99-2H2C.9 0 0 .9 0 2v12c0 1.1.9 2 2 2h14l4 4-.01-18ZM18 2v13.17L16.83 14H2V2h16ZM4 10h12v2H4v-2Zm0-3h12v2H4V7Zm0-3h12v2H4V4Z" fill="#444"/></g><defs><clipPath id="comment__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/double-arrow-left.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.907 19 20 16.885 13.201 10 20 3.115 17.907 1 9 10l8.907 9Z" fill="#444"/><path d="M8.907 19 11 16.885 4.201 10 11 3.115 8.907 1 0 10l8.907 9Z" fill="#444"/></svg>

package/src/icons/double-arrow-right.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.093 1 0 3.115 6.799 10 0 16.885 2.093 19 11 10 2.093 1Z" fill="#444"/><path d="M11.093 1 9 3.115 15.799 10 9 16.885 11.093 19 20 10l-8.907-9Z" fill="#444"/></svg>

package/src/icons/export.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g clip-path="url(#export__a)" fill="#444"><path d="M15.648 6.9H12.66v1.774h2.99c.888 0 1.577.454 1.577.844v7.864c0 .39-.69.844-1.578.844H4.352c-.89 0-1.579-.453-1.579-.844V9.519c0-.391.69-.845 1.579-.845H7.34V6.901H4.352C2.472 6.9 1 8.05 1 9.519v7.863C1 18.85 2.472 20 4.352 20h11.296C17.528 20 19 18.85 19 17.382V9.519C19 8.05 17.527 6.9 15.648 6.9Z"/><path d="M7.376 4.42a.883.883 0 0 0 .627-.26l1.11-1.11v9.021a.887.887 0 1 0 1.773 0V2.99l1.17 1.17a.884.884 0 0 0 1.254 0 .886.886 0 0 0 0-1.254L10.663.26a.883.883 0 0 0-.627-.26h-.013a.883.883 0 0 0-.627.26L6.75 2.905a.886.886 0 0 0 .627 1.514Z"/></g><defs><clipPath id="export__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#export__a)"><path d="M17.5 13.75v3.75h-15v-3.75H0v3.75C0 18.875 1.125 20 2.5 20h15c1.375 0 2.5-1.125 2.5-2.5v-3.75h-2.5ZM3.75 6.25l1.763 1.762L8.75 4.787V15h2.5V4.787l3.238 3.225L16.25 6.25 10 0 3.75 6.25Z" fill="#444"/></g><defs><clipPath id="export__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/import.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 13.75v3.75h-15v-3.75H0v3.75C0 18.875 1.125 20 2.5 20h15c1.375 0 2.5-1.125 2.5-2.5v-3.75h-2.5Zm-1.25-5-1.762-1.763-3.238 3.226V0h-2.5v10.213L5.513 6.988 3.75 8.75 10 15l6.25-6.25Z" fill="#444"/></svg>

package/src/icons/index.tsx

@@ -4,20 +4,31 @@ import AngleDown from './angle-down.svg'
 import AngleLeft from './angle-left.svg'
 import AngleRight from './angle-right.svg'
 import AngleUp from './angle-up.svg'
+import Calendar from './calendar.svg'
 import Check from './check.svg'
 import CheckboxActive from './checkbox-active.svg'
 import CheckboxInactive from './checkbox-inactive.svg'
+import ChangePassword from './change-password.svg'
+import Client from './client.svg'
 import Close from './close.svg'
+import Comment from './comment.svg'
 import Delete from './delete.svg'
 import Done from './done.svg'
+import DoubleArrowLeft from './double-arrow-left.svg'
+import DoubleArrowRight from './double-arrow-right.svg'
 import Edit from './edit.svg'
 import EditColumns from './edit-columns.svg'
 import EmptyState from './empty-customize.svg'
 import Error from './error.svg'
 import Export from './export.svg'
+import Import from './import.svg'
 import Info from './info.svg'
 import Loading from './loading.svg'
+import Logout from './logout.svg'
+import Product from './product.svg'
+import Salesman from './salesman.svg'
 import Search from './search.svg'
+import Settings from './settings.svg'
 import Show from './show.svg'
 import ShowOff from './show-off.svg'
 import Sorter from './sorter.svg'
@@ -30,20 +41,31 @@ export {
   AngleLeft,
   AngleRight,
   AngleUp,
+  Calendar,
+  ChangePassword,
   Check,
   CheckboxActive,
   CheckboxInactive,
+  Client,
   Close,
+  Comment,
   Delete,
   Done,
+  DoubleArrowLeft,
+  DoubleArrowRight,
   Edit,
   EditColumns,
   EmptyState,
   Error,
   Export,
+  Import,
   Info,
   Loading,
+  Logout,
+  Product,
+  Salesman,
   Search,
+  Settings,
   Show,
   ShowOff,
   Sorter,

package/src/icons/logout.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#logout__a)"><path d="m15.556 5.556-1.567 1.566 1.755 1.767H6.667v2.222h9.077l-1.755 1.756 1.567 1.577L20 10l-4.444-4.444ZM2.222 2.222H10V0H2.222C1 0 0 1 0 2.222v15.556C0 19 1 20 2.222 20H10v-2.222H2.222V2.222Z" fill="#444"/></g><defs><clipPath id="logout__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/product.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#product__a)" fill="#444"><path d="M11.404 0H8.596v2.922h2.808V0Zm0 4.832V3.596H8.596v1.236c0 1.46-2.023 2.022-2.023 4.607v9.606c0 .528.428.955.955.955h4.944a.955.955 0 0 0 .955-.955V9.439c0-2.585-2.023-3.147-2.023-4.607Zm.45 11.91H8.146V9.325h3.708v7.415Z"/></g><defs><clipPath id="product__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/salesman.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.333 2.5H1.667C.75 2.5 0 3.25 0 4.167v11.666C0 16.75.75 17.5 1.667 17.5h16.666c.917 0 1.659-.75 1.659-1.667L20 4.167c0-.917-.75-1.667-1.667-1.667Zm0 13.333H1.667V4.167h16.666v11.666ZM7.5 10C8.875 10 10 8.875 10 7.5S8.875 5 7.5 5A2.507 2.507 0 0 0 5 7.5C5 8.875 6.125 10 7.5 10Zm0-3.333c.458 0 .833.375.833.833a.836.836 0 0 1-.833.833.836.836 0 0 1-.833-.833c0-.458.375-.833.833-.833Zm5 7.158c0-2.083-3.308-2.983-5-2.983-1.692 0-5 .9-5 2.983V15h10v-1.175Zm-7.933-.492c.616-.416 1.85-.833 2.933-.833 1.083 0 2.308.408 2.933.833H4.567Z" fill="#444"/><path d="M17.5 7.5h-4.583v1.25H17.5V7.5Zm0 2.5h-4.583v1.25H17.5V10Z" fill="#444"/></svg>

package/src/icons/settings.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#settings__a)"><path d="M17.64 10.98c.042-.32.073-.64.073-.98 0-.34-.031-.66-.072-.98l2.169-1.65a.495.495 0 0 0 .123-.64l-2.056-3.46a.517.517 0 0 0-.452-.25.492.492 0 0 0-.175.03l-2.56 1c-.534-.4-1.11-.73-1.737-.98l-.39-2.65a.497.497 0 0 0-.505-.42H7.946a.497.497 0 0 0-.504.42l-.39 2.65a7.97 7.97 0 0 0-1.738.98l-2.56-1a.597.597 0 0 0-.185-.03c-.174 0-.35.09-.442.25L.071 6.73a.484.484 0 0 0 .124.64l2.169 1.65a7.74 7.74 0 0 0-.072.98c0 .33.03.66.072.98l-2.17 1.65a.495.495 0 0 0-.123.64l2.056 3.46c.093.16.268.25.453.25.061 0 .123-.01.175-.03l2.56-1c.534.4 1.11.73 1.737.98l.39 2.65c.031.24.247.42.504.42h4.112c.257 0 .473-.18.504-.42l.39-2.65a7.955 7.955 0 0 0 1.738-.98l2.56 1c.062.02.123.03.185.03a.51.51 0 0 0 .442-.25l2.056-3.46a.495.495 0 0 0-.123-.64l-2.17-1.65Zm-2.035-1.71c.041.31.052.52.052.73 0 .21-.021.43-.052.73l-.144 1.13.915.7 1.11.84-.72 1.21-1.305-.51-1.069-.42-.925.68c-.442.32-.864.56-1.285.73l-1.09.43-.165 1.13-.205 1.35h-1.44l-.195-1.35-.164-1.13-1.09-.43a5.876 5.876 0 0 1-1.264-.71l-.936-.7-1.09.43-1.305.51-.72-1.21 1.11-.84.915-.7-.144-1.13a8.1 8.1 0 0 1-.051-.74c0-.2.02-.43.051-.73l.144-1.13-.915-.7-1.11-.84.72-1.21 1.305.51 1.07.42.925-.68a6.05 6.05 0 0 1 1.285-.73l1.09-.43.164-1.13L9.283 2h1.429l.195 1.35.164 1.13 1.09.43c.442.18.854.41 1.265.71l.935.7 1.09-.43 1.306-.51.72 1.21-1.1.85-.916.7.144 1.13ZM10.002 6C7.73 6 5.89 7.79 5.89 10s1.84 4 4.112 4c2.272 0 4.112-1.79 4.112-4s-1.84-4-4.112-4Zm0 6c-1.13 0-2.056-.9-2.056-2s.925-2 2.056-2 2.056.9 2.056 2-.925 2-2.056 2Z" fill="#444"/></g><defs><clipPath id="settings__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></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/CardsTableList.stories.ts

@@ -64,7 +64,8 @@ export const WithSorting: Story = {
           name: 'Metal Gear Solid 5: The Phantom Pain',
           address:
             'Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku, Tokyo, 104-0061 Japan',
-          email: 'konami@fakemail.com',
+          email:
+            'konami@fakemailreallyreallyreallyreallyreallyreallyreallyreallyreallylongemail.com',
         },
       },
       {

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,17 @@ 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
+- Added fix to Alert component button
+- Fixed responsive glitch bug on CardsTable components
+
 ## 0.16.0
 - Added new shape for FloatingButton component
 

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