agroptima-design-system 0.30.1 → 0.30.2-beta.0

package/package.json

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

package/src/atoms/Input.tsx

@@ -2,13 +2,13 @@ import './Input.scss'
 import React, { useState } from 'react'
 import { buildHelpText } from '../utils/buildHelpText'
 import { classNames } from '../utils/classNames'
-import { IconButton } from './Button/IconButton'
+import { IconButton } from './Button'
 import type { IconType } from './Icon'
 import { Icon } from './Icon'
 
 export type InputVariant = 'primary'
 
-export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
+export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   label: string
   accessibilityLabel?: string
   hideLabel?: boolean

package/src/atoms/QuantitySelector.tsx

@@ -1,5 +1,5 @@
 import './QuantitySelector.scss'
-import React from 'react'
+import React, { useRef } from 'react'
 import { classNames } from '../utils/classNames'
 import { Button } from './Button'
 import type { InputProps } from './Input'
@@ -7,28 +7,38 @@ import { Input } from './Input'
 
 export type Variant = 'primary'
 
-export interface QuantitySelectorProps extends InputProps {
+export interface QuantitySelectorProps extends Omit<InputProps, 'type'> {
   label: string
   accessibilityLabel?: string
   hideLabel?: boolean
   id?: string
   variant?: Variant
-  onDecrement: () => void
-  onIncrement: () => void
 }
 
 export function QuantitySelector({
   id,
-  onDecrement,
-  onIncrement,
   label,
   accessibilityLabel,
   className,
+  disabled,
   hideLabel = false,
   variant = 'primary',
-  disabled,
   ...props
 }: QuantitySelectorProps): React.JSX.Element {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const handleIncrement = () => {
+    if (inputRef.current) {
+      inputRef.current.stepUp()
+      inputRef.current.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+  }
+
+  const handleDecrement = () => {
+    if (inputRef.current) {
+      inputRef.current.stepDown()
+      inputRef.current.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+  }
   return (
     <div className={classNames('quantity-selector-group', variant, className)}>
       {!hideLabel && (
@@ -49,13 +59,15 @@ export function QuantitySelector({
           leftIcon="Minus"
           className="decrement-button"
           disabled={disabled}
-          onClick={onDecrement}
+          onClick={handleDecrement}
         />
         <Input
           id={id}
+          ref={inputRef}
           label={label}
           accessibilityLabel={accessibilityLabel}
           disabled={disabled}
+          type="number"
           {...props}
           hideLabel={true}
         />
@@ -66,7 +78,7 @@ export function QuantitySelector({
           type="button"
           className="increment-button"
           disabled={disabled}
-          onClick={onIncrement}
+          onClick={handleIncrement}
         />
       </div>
     </div>

package/src/stories/Changelog.mdx

@@ -4,6 +4,14 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.30.2
+
+* Use native increment and decrement buttons on QuantitySelector component.
+
+BREAKING CHANGES
+
+* Remove onIncrement and onDecrement props from QuantitySelector component.
+
 ## 0.30.1
 
 * Add components documentation

package/src/stories/QuantitySelector.stories.ts

@@ -62,15 +62,11 @@ export const Primary: Story = {
     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'),
+    defaultValue: 1,
   },
   parameters: figmaPrimaryDesign,
 }
@@ -81,16 +77,13 @@ export const Disabled: Story = {
     accessibilityLabel: 'Quantity of items to wishlist',
     id: 'quantity',
     name: 'quantity',
-    value: 1,
+    defaultValue: 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/QuantitySelector.spec.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { QuantitySelector } from '../src/atoms/QuantitySelector'
 
 describe('QuantitySelector', () => {
@@ -8,12 +9,9 @@ describe('QuantitySelector', () => {
         label="Quantity"
         accessibilityLabel="Quantity of items to wishlist"
         id="quantity"
-        onDecrement={() => alert('decrement')}
-        onIncrement={() => alert('increment')}
         name="quantity"
         value={1}
         onChange={() => alert('onChange')}
-        type="number"
         max={10}
         step={0.0001}
         min={1}
@@ -30,4 +28,34 @@ describe('QuantitySelector', () => {
     )
     expect(getByRole('spinbutton')).toHaveValue(1)
   })
+  it('add one step when press on increment button', async () => {
+    const user = userEvent.setup()
+    const { getByRole } = render(
+      <QuantitySelector
+        label="Quantity"
+        name="quantity"
+        defaultValue={5}
+        step={1}
+      />,
+    )
+
+    await user.click(getByRole('button', { name: '+' }))
+
+    expect(getByRole('spinbutton')).toHaveValue(6)
+  })
+  it('remove one step when press on increment button', async () => {
+    const user = userEvent.setup()
+    const { getByRole } = render(
+      <QuantitySelector
+        label="Quantity"
+        name="quantity"
+        defaultValue={5}
+        step={1}
+      />,
+    )
+
+    await user.click(getByRole('button', { name: '-' }))
+
+    expect(getByRole('spinbutton')).toHaveValue(4)
+  })
 })