agroptima-design-system 0.18.1-beta.1 → 0.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.18.1-beta.1",
+  "version": "0.18.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Card/Card.scss

@@ -33,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;
     }
@@ -57,6 +64,9 @@
     &.disabled {
       @include typography.body-regular-disabled;
       background: color_alias.$neutral-color-50;
+      .header .bold {
+        color: color_alias.$neutral-color-400;
+      }
     }
 
     &.active {

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

@@ -140,6 +140,7 @@
     }
     tr.active {
       border-color: color_alias.$primary-color-1000;
+      box-shadow: none;
     }
     tr.action {
       cursor: default;

package/src/atoms/QuantitySelector.tsx

@@ -25,6 +25,7 @@ export function QuantitySelector({
   className,
   hideLabel = false,
   variant = 'primary',
+  disabled,
   ...props
 }: QuantitySelectorProps): React.JSX.Element {
   const cssClasses = classNames('quantity-selector', className)
@@ -43,12 +44,14 @@ export function QuantitySelector({
           type="button"
           leftIcon="Minus"
           className="decrement-button"
+          disabled={disabled}
           onClick={onDecrement}
         />
         <Input
           id={id}
           label={label}
           accessibilityLabel={accessibilityLabel}
+          disabled={disabled}
           {...props}
           hideLabel={true}
         />
@@ -58,6 +61,7 @@ export function QuantitySelector({
           leftIcon="Add"
           type="button"
           className="increment-button"
+          disabled={disabled}
           onClick={onIncrement}
         />
       </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"
@@ -411,6 +418,14 @@ export const Primary = {
           <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>
   ),
 }
@@ -419,7 +434,7 @@ export const Disabled = {
   render: () => (
     <div style={{ display: 'flex' }}>
       <Card isDisabled variant="primary">
-        <CardHeader title="Tekken 8">
+        <CardHeader isBold title="Tekken 8">
           <IconButton disabled icon="Delete" accessibilityLabel="Delete game" />
         </CardHeader>
         <CardContent>

package/src/stories/CardMenu.stories.js

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { CardMenu, CardMenuOption } from '../atoms/CardMenu'
-import { isErrored } from 'stream'
 
 const figmaPrimaryDesign = {
   design: {
@@ -37,7 +36,7 @@ const meta = {
       description: 'Is the component active?',
     },
     error: {
-      description: 'Is the component error?',
+      description: 'Is the component marked as error?',
     },
   },
   parameters: figmaPrimaryDesign,

package/src/stories/CardsTable.stories.js

@@ -1,13 +1,6 @@
 import React from 'react'
 
-import {
-  CardsTable,
-  CardsTableHead,
-  CardsTableHeader,
-  CardsTableRow,
-  CardsTableBody,
-  CardsTableCell,
-} from '../atoms/CardsTable'
+import { CardsTable, CardsTableHead, CardsTableHeader, CardsTableRow, CardsTableBody, CardsTableCell } from '../atoms/CardsTable'
 import { IconButton } from '../atoms/Button'
 import { Badge } from '../atoms/Badge'
 

package/src/stories/Changelog.stories.mdx

@@ -3,9 +3,15 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
-## Beta
+## 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
 
 ## 0.17.0
 - Added QuantitySelector component to Storybook

package/tests/QuantitySelector.spec.tsx

@@ -11,7 +11,6 @@ describe('QuantitySelector', () => {
         id="quantity"
         onDecrement={() => alert('decrement')}
         onIncrement={() => alert('increment')}
-        hideLabel={true}
         name="quantity"
         value={1}
         onChange={() => alert('onChange')}