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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.31",
+  "version": "1.2.32-beta.1",
   "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/Input.tsx

@@ -17,7 +17,7 @@ export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   helpText?: string
   variant?: InputVariant
   id?: string
-  suffix?: string
+  suffix?: React.ReactNode
   errors?: string[]
   rightIcon?: IconType
   fullWidth?: boolean

package/src/atoms/InputWithSelect/InputWithSelect.scss

@@ -0,0 +1,73 @@
+@use '../../settings/typography/form' as typography;
+@use '../../settings/config';
+@use '../../settings/depth';
+@use '../../settings/mixins';
+
+.select-suffix {
+  position: relative;
+  display: flex;
+  align-self: stretch;
+  margin: (config.$space-2x * -1) (config.$space-3x * -1) (config.$space-2x * -1)
+    0;
+}
+
+.select-suffix-trigger {
+  @include typography.select-text;
+  display: flex;
+  align-items: center;
+  gap: config.$space-1x;
+  height: 100%;
+  padding: config.$space-2x config.$space-3x;
+  border: none;
+  border-left: 1px solid var(--neutral-color-600);
+  border-top-right-radius: config.$corner-radius-m;
+  border-bottom-right-radius: config.$corner-radius-m;
+  background: var(--neutral-color-50);
+  color: var(--neutral-color-1000);
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  @include mixins.icon-color(var(--primary-color-600));
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:disabled {
+    border-left: 1px solid var(--neutral-color-400);
+    color: var(--neutral-color-400);
+    cursor: default;
+    @include mixins.icon-color(var(--neutral-color-400));
+  }
+}
+
+.select-suffix-options {
+  position: absolute;
+  top: calc(100% + #{config.$space-2x});
+  right: 0;
+  min-width: 100%;
+  margin: 0;
+  padding: config.$space-1x 0;
+  list-style: none;
+  text-align: left;
+  border-radius: config.$corner-radius-xxs;
+  background: var(--neutral-white);
+  z-index: depth.$z-dropdown-options;
+  box-shadow:
+    0 9px 28px 8px rgba(0, 0, 0, 0.05),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12);
+
+  .option {
+    @include typography.select-option-text;
+    padding: config.$space-2x config.$space-3x;
+    cursor: default;
+    list-style-type: none;
+    text-wrap: nowrap;
+
+    &:hover {
+      background-color: var(--primary-color-50);
+    }
+  }
+}

package/src/atoms/InputWithSelect/InputWithSelect.tsx

@@ -0,0 +1,112 @@
+import './InputWithSelect.scss'
+import React, { useEffect, useRef, useState } from 'react'
+import { useOpen } from '../../hooks/useOpen'
+import { useOutsideClick } from '../../hooks/useOutsideClick'
+import { classNames } from '../../utils/classNames'
+import { Icon } from '../Icon'
+import type { InputProps } from '../Input'
+import { Input } from '../Input'
+import type { Option } from '../Select'
+import { SelectItem } from '../Select/SelectItem'
+
+const ESCAPE_KEY = 'Escape'
+const EMPTY_OPTION: Option = { id: '', label: '' }
+
+export interface InputWithSelectProps extends Omit<
+  InputProps,
+  'suffix' | 'rightIcon'
+> {
+  options: Option[]
+  selectAccessibilityLabel: string
+  selectFieldName?: string
+  defaultSelectedOption?: string
+  onSelectChange?: (value: string) => void
+}
+
+export function InputWithSelect({
+  options,
+  selectAccessibilityLabel,
+  selectFieldName,
+  defaultSelectedOption,
+  onSelectChange = () => {},
+  className,
+  ...props
+}: InputWithSelectProps): React.JSX.Element {
+  const { isOpen, close, toggle } = useOpen()
+  const defaultOption =
+    options.find((option) => option.id === defaultSelectedOption) ||
+    options[0] ||
+    EMPTY_OPTION
+  const [selectedOption, setSelectedOption] = useState<Option>(defaultOption)
+  const containerRef = useRef(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const optionsId = `${props.id || props.name}-select-options`
+
+  useOutsideClick(containerRef, close)
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key !== ESCAPE_KEY) return
+      close()
+      triggerRef.current?.focus()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, close])
+
+  function handleSelectOption(option: Option) {
+    setSelectedOption(option)
+    onSelectChange(option.id)
+    close()
+    triggerRef.current?.focus()
+  }
+
+  return (
+    <Input
+      className={classNames('input-with-select', className)}
+      suffix={
+        <span className="select-suffix" ref={containerRef}>
+          <button
+            ref={triggerRef}
+            type="button"
+            role="combobox"
+            className="select-suffix-trigger"
+            aria-label={`${selectAccessibilityLabel}: ${selectedOption.label}`}
+            aria-haspopup="listbox"
+            aria-expanded={isOpen}
+            aria-controls={optionsId}
+            disabled={props.disabled}
+            onClick={toggle}
+          >
+            <span>{selectedOption.label}</span>
+            <Icon size="3" name={isOpen ? 'AngleUp' : 'AngleDown'} decorative />
+          </button>
+          {selectFieldName && (
+            <input
+              type="hidden"
+              name={selectFieldName}
+              value={selectedOption.id}
+            />
+          )}
+          {isOpen && (
+            <ul id={optionsId} className="select-suffix-options" role="listbox">
+              {options.map((option) => (
+                <SelectItem
+                  key={option.id}
+                  label={option.label}
+                  isSelected={option.id === selectedOption.id}
+                  onSelectOption={() => handleSelectOption(option)}
+                  onClose={close}
+                />
+              ))}
+            </ul>
+          )}
+        </span>
+      }
+      {...props}
+    />
+  )
+}

package/src/atoms/InputWithSelect/index.ts

@@ -0,0 +1,4 @@
+import { InputWithSelect } from './InputWithSelect'
+
+export type { InputWithSelectProps } from './InputWithSelect'
+export { InputWithSelect }

package/src/stories/Changelog.mdx

@@ -4,6 +4,11 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.32
+
+* Add InputWithSelect component
+* Add `React.ReactNode` support to Input's `suffix` prop
+
 ## 1.2.31
 
 * Add Discount icon

package/src/stories/InputWithSelect.stories.tsx

@@ -0,0 +1,90 @@
+import type { StoryObj } from '@storybook/nextjs'
+import { InputWithSelect } from '../atoms/InputWithSelect'
+
+const meta = {
+  title: 'Design System/Atoms/InputWithSelect',
+  component: InputWithSelect,
+  parameters: {
+    docs: {
+      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>' +
+          '<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>' +
+          '  <li>Always include a visible label and a select accessibility label</li>' +
+          '  <li>Support help and error text as in a standard input</li>' +
+          '</ul>',
+      },
+    },
+  },
+  tags: ['autodocs', 'Data entry components'],
+  argTypes: {
+    label: {
+      description: 'Label for the input',
+    },
+    helpText: {
+      description: 'Optional help text',
+    },
+    name: {
+      description: 'Set name property for the input value',
+    },
+    selectFieldName: {
+      description:
+        'Set name property for the hidden input holding the selected option, if it needs to be submitted in a form',
+    },
+    options: {
+      description: 'Array of symbols/units to be displayed on the select',
+    },
+    defaultSelectedOption: {
+      description: 'Option id to be selected by default',
+    },
+    onSelectChange: {
+      description: 'Called with the selected option id when it changes',
+    },
+    selectAccessibilityLabel: {
+      description: 'Describes the select purpose for screen readers',
+    },
+    errors: {
+      description:
+        'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
+    },
+    disabled: {
+      description: 'Is the field in disabled state?',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    label: 'Discount',
+    name: 'discount',
+    type: 'number',
+    defaultValue: 10,
+    helpText: 'Applied to the total amount',
+    selectAccessibilityLabel: 'Select discount unit',
+    options: [
+      { id: '%', label: '%' },
+      { id: 'eur', label: '€' },
+    ],
+    id: 'discount',
+  },
+}
+
+export const WithErrors: Story = {
+  args: {
+    ...Primary.args,
+    errors: ['Discount must be lower than 100%'],
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Primary.args,
+    disabled: true,
+  },
+}

package/tests/InputWithSelect.spec.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+import { InputWithSelect } from '../src/atoms/InputWithSelect'
+
+const options = [
+  { id: '%', label: '%' },
+  { id: 'kg', label: 'kg' },
+]
+
+describe('InputWithSelect', () => {
+  it('renders the input and the select suffix with its default option', () => {
+    render(
+      <InputWithSelect
+        label="Discount"
+        name="discount"
+        options={options}
+        selectAccessibilityLabel="Select unit"
+        type="number"
+      />,
+    )
+
+    expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+    expect(
+      screen.getByRole('combobox', { name: 'Select unit: %' }),
+    ).toHaveTextContent('%')
+  })
+
+  it('opens the options list and updates the selected option on click', async () => {
+    const user = userEvent.setup()
+    const handleSelectChange = jest.fn()
+    render(
+      <InputWithSelect
+        label="Discount"
+        name="discount"
+        onSelectChange={handleSelectChange}
+        options={options}
+        selectAccessibilityLabel="Select unit"
+        type="number"
+      />,
+    )
+
+    await user.click(screen.getByRole('combobox', { name: 'Select unit: %' }))
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('option', { name: 'kg' }))
+
+    expect(handleSelectChange).toHaveBeenCalledWith('kg')
+    expect(
+      screen.getByRole('combobox', { name: 'Select unit: kg' }),
+    ).toHaveTextContent('kg')
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('renders an empty selection without crashing when options is empty', () => {
+    render(
+      <InputWithSelect
+        label="Discount"
+        name="discount"
+        options={[]}
+        selectAccessibilityLabel="Select unit"
+        type="number"
+      />,
+    )
+
+    expect(
+      screen.getByRole('combobox', { name: 'Select unit:' }),
+    ).toHaveTextContent('')
+  })
+})

package/tests/library.ts

@@ -23,6 +23,7 @@ export * as IconButton from '../src/stories/IconButton.stories'
 export * as InfiniteSelect from '../src/stories/InfiniteSelect.stories'
 export * as Input from '../src/stories/Input.stories'
 export * as InputWithButton from '../src/stories/InputWithButton.stories'
+export * as InputWithSelect from '../src/stories/InputWithSelect.stories'
 export * as Label from '../src/stories/Label.stories'
 export * as Menu from '../src/stories/Menu.stories'
 export * as Modal from '../src/stories/Modal.stories'