agroptima-design-system 0.16.2 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

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/Changelog.stories.mdx

@@ -3,6 +3,9 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 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/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)
+  })
+})