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

package/CLAUDE.md

@@ -91,7 +91,8 @@ ComponentName/
   - `_form.scss` - Form-specific typography
   - `_cards_table.scss` - Table typography
 - **_config.scss** - Spacing scale, border radius, responsive breakpoints
-- **_breakpoints.scss** - Breakpoints: 375px (mobile), 900px (tablet), 1200px (desktop)
+- **_breakpoints.scss** - Breakpoints: 375px (`$small`), 768px (`$medium`), 1200px (`$large`)
+- **breakpoints.ts** - Same values for TypeScript/`matchMedia` consumers; `tests/breakpoints.spec.ts` fails if they drift apart
 - **_depth.scss** - Z-index scale
 - **_mixins.scss** - Reusable SCSS utilities
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.32-beta.1",
+  "version": "1.2.33",
   "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/settings/breakpoints.ts

@@ -0,0 +1,5 @@
+export const breakpoints = {
+  small: 375,
+  medium: 768,
+  large: 1200,
+} as const

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.3.0
+
+* Add `breakpoints` TypeScript export in `settings/breakpoints.ts`, so JS consumers can read the same values as `_breakpoints.scss` (`matchMedia`, layout logic) instead of hardcoding them. Both files are kept in sync by a test
+
 ## 1.2.32
 
 * Add InputWithSelect component

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')

package/tests/breakpoints.spec.ts

@@ -0,0 +1,22 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { breakpoints } from '../src/settings/breakpoints'
+
+function parseScssBreakpoints(): Record<string, number> {
+  const scss = readFileSync(
+    join(__dirname, '../src/settings/_breakpoints.scss'),
+    'utf8',
+  )
+  return Object.fromEntries(
+    [...scss.matchAll(/^\$([\w-]+):\s*(\d+)px;/gm)].map(([, name, value]) => [
+      name,
+      Number(value),
+    ]),
+  )
+}
+
+describe('breakpoints', () => {
+  it('keeps the TypeScript and SCSS definitions in sync', () => {
+    expect({ ...breakpoints }).toEqual(parseScssBreakpoints())
+  })
+})