agroptima-design-system 0.17.1-beta.13 → 0.17.1-beta.2

package/package.json

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

package/src/atoms/CardsTable/CardsTable.scss

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

package/src/atoms/CardsTable/CardsTableRow.tsx

@@ -1,29 +1,19 @@
 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: disabled = false,
-  isActive: active = false,
+  isDisabled = false,
   children,
   ...props
 }: CardsTableRowProps): React.JSX.Element {
+  const disabledClass = isDisabled ? 'disabled' : ''
   return (
-    <tr
-      role="row"
-      className={classNames('row', {
-        disabled,
-        active,
-        action: Boolean(props.onClick),
-      })}
-      {...props}
-    >
+    <tr role="row" className={`row ${disabledClass}`} {...props}>
       {children}
     </tr>
   )

package/src/atoms/QuantitySelector.tsx

@@ -2,62 +2,47 @@ import React from 'react'
 import { classNames } from '../utils/classNames'
 import './QuantitySelector.scss'
 import { Input, InputProps } from './Input'
-import { Button, ButtonProps } from './Button'
+import { IconButton } from './Button'
 
 export type Variant = 'primary'
 
-export interface QuantitySelectorProps extends InputProps {
+export interface QuantitySelectorProps
+  extends React.ComponentPropsWithoutRef<'div'> {
   label: string
-  accessibilityLabel?: string
   hideLabel?: boolean
-  id?: string
   variant?: Variant
+  quantityInput: InputProps
   onDecrement: () => void
   onIncrement: () => void
 }
 
 export function QuantitySelector({
-  id,
-  onDecrement,
-  onIncrement,
+  quantityInput,
   label,
-  accessibilityLabel,
   className,
   hideLabel = false,
   variant = 'primary',
+  onDecrement,
+  onIncrement,
   ...props
 }: QuantitySelectorProps): React.JSX.Element {
-  const cssClasses = classNames('quantity-selector', className)
+  const cssClasses = classNames('quantity-selector-group', variant, className)
 
   return (
-    <div className={`quantity-selector-group ${variant}`} {...props}>
-      {!hideLabel && (
-        <label className="quantity-selector-label" htmlFor={id}>
-          {label}
-        </label>
-      )}
-      <div className={cssClasses}>
-        <Button
-          label=""
-          accessibilityLabel="-"
-          type="button"
-          leftIcon="Minus"
+    <div className={cssClasses} {...props}>
+      {!hideLabel && <label className="quantity-selector-label">{label}</label>}
+      <div className="quantity-selector">
+        <IconButton
+          icon="Minus"
+          accessibilityLabel="decrement"
           className="decrement-button"
           onClick={onDecrement}
         />
-        <Input
-          id={id}
-          label={label}
-          accessibilityLabel={accessibilityLabel}
-          {...props}
-          hideLabel={true}
-        />
-        <Button
-          label=""
-          accessibilityLabel="+"
-          leftIcon="Add"
-          type="button"
-          className="increment-button"
+        <Input {...quantityInput} label={label} />
+        <IconButton
+          icon="Add"
+          accessibilityLabel="decrement"
+          className="decrement-button"
           onClick={onIncrement}
         />
       </div>

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

package/src/stories/QuantitySelector.stories.ts

@@ -51,18 +51,21 @@ export const Primary: Story = {
   args: {
     label: 'Quantity',
     accessibilityLabel: 'Quantity of items to wishlist',
-    id: 'quantity',
-    hideLabel: true,
-    name: 'quantity',
-    value: 1,
-    onChange: () => alert('onChange'),
-    type: 'number',
-    max: 10,
-    step: 0.0001,
-    min: 1,
-    required: true,
+    id: 'quantity-selector',
     onDecrement: () => alert('decrement'),
     onIncrement: () => 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,
 }
@@ -71,18 +74,32 @@ export const Disabled: Story = {
   args: {
     label: 'Quantity',
     accessibilityLabel: 'Quantity of items to wishlist',
-    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'),
+    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/QuantitySelector.spec.tsx

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