agroptima-design-system 1.2.32-beta.1 → 1.2.32

package/package.json

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

package/src/atoms/Input.scss

@@ -99,11 +99,11 @@
         }
       }
 
-      > .icon {
+      .icon {
         @include mixins.svg-color(var(--neutral-color-400));
       }
 
-      > .password-icon {
+      .password-icon {
         @include mixins.svg-color(var(--neutral-color-600));
       }
     }

package/src/atoms/InputWithSelect/InputWithSelect.scss

@@ -28,7 +28,6 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  @include mixins.icon-color(var(--primary-color-600));
 
   &:focus-visible {
     outline: none;
@@ -38,6 +37,13 @@
     border-left: 1px solid var(--neutral-color-400);
     color: var(--neutral-color-400);
     cursor: default;
+  }
+}
+
+.input-with-select .input-container .input-suffix .select-suffix-trigger {
+  @include mixins.icon-color(var(--primary-color-600));
+
+  &:disabled {
     @include mixins.icon-color(var(--neutral-color-400));
   }
 }

package/src/stories/InputWithSelect.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
       description: {
         component:
           '<h2>Usage guidelines</h2>' +
-          '<p>The InputWithSelect component is used when the value the user types needs a unit or symbol attached to it, such as a discount percentage or a measurement. It combines an input field with a compact select fused into the same field, placed as a suffix.</p>' +
+          '<p>The InputWithSelect component is used when the value the user types needs a unit or symbol attached to it, such as a percentage or a measurement. It combines an input field with a compact select fused into the same field, placed as a suffix.</p>' +
           '<ul>' +
           '  <li>Use when the unit is closely tied to the value and only a short, fixed list of symbols applies (e.g. %, kg, m²)</li>' +
           '  <li>Keep the list of options short, these are not meant to be searched</li>' +
@@ -61,24 +61,25 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   args: {
-    label: 'Discount',
-    name: 'discount',
+    label: 'Weight',
+    name: 'weight',
     type: 'number',
     defaultValue: 10,
-    helpText: 'Applied to the total amount',
-    selectAccessibilityLabel: 'Select discount unit',
+    helpText: 'This text can help you',
+    selectAccessibilityLabel: 'Select weight unit',
     options: [
-      { id: '%', label: '%' },
-      { id: 'eur', label: '€' },
+      { id: 'kg', label: 'kg' },
+      { id: 'g', label: 'g' },
+      { id: 'lb', label: 'lb' },
     ],
-    id: 'discount',
+    id: 'weight',
   },
 }
 
 export const WithErrors: Story = {
   args: {
     ...Primary.args,
-    errors: ['Discount must be lower than 100%'],
+    errors: ['Weight must be greater than 0'],
   },
 }
 

package/tests/InputWithSelect.spec.tsx

@@ -4,8 +4,8 @@ import React from 'react'
 import { InputWithSelect } from '../src/atoms/InputWithSelect'
 
 const options = [
-  { id: '%', label: '%' },
-  { id: 'kg', label: 'kg' },
+  { id: 'percentage', label: '%' },
+  { id: 'kilogram', label: 'kg' },
 ]
 
 describe('InputWithSelect', () => {
@@ -45,7 +45,7 @@ describe('InputWithSelect', () => {
 
     await user.click(screen.getByRole('option', { name: 'kg' }))
 
-    expect(handleSelectChange).toHaveBeenCalledWith('kg')
+    expect(handleSelectChange).toHaveBeenCalledWith('kilogram')
     expect(
       screen.getByRole('combobox', { name: 'Select unit: kg' }),
     ).toHaveTextContent('kg')