agroptima-design-system 0.21.6 → 0.22.0

package/package.json

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

package/src/atoms/Input.tsx

@@ -34,7 +34,7 @@ export function Input({
 }: InputProps): React.JSX.Element {
   const identifier = id || name
   const [showPassword, setShowPassword] = useState(false)
-  const cssClasses = classNames('input', className, {
+  const cssClasses = classNames('input', {
     'with-icon': icon,
     invalid: errors?.length,
   })
@@ -55,7 +55,7 @@ export function Input({
   }
 
   return (
-    <div className={`input-group ${variant}`}>
+    <div className={classNames('input-group', variant, className)}>
       {!hideLabel && (
         <label className="input-label" htmlFor={identifier}>
           {label}

package/src/atoms/Select.scss

@@ -21,7 +21,7 @@
 
     .selected-option {
       border-radius: config.$corner-radius-m;
-      border: 1px solid color_alias.$neutral-color-600;
+      border: 1px solid color_alias.$neutral-color-400;
       background: color_alias.$neutral-white;
       @include typography.select-text;
 
@@ -64,6 +64,9 @@
     }
 
     .select-options {
+      max-height: 256px;
+      overflow-y: scroll;
+      overflow-anchor: none;
       z-index: depth.$z-dropdown-options;
       border-radius: config.$corner-radius-xxs;
       background: color_alias.$neutral-white;

package/src/atoms/Select.tsx

@@ -20,10 +20,12 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   label: string
   accessibilityLabel?: string
   hideLabel?: boolean
-  selected?: Option
+  defaultValue?: string
   onChange?: (value: string) => void
 }
 
+const EMPTY_OPTION = { id: '', label: '' }
+
 export function Select({
   className,
   placeholder,
@@ -36,18 +38,17 @@ export function Select({
   label,
   accessibilityLabel,
   hideLabel = false,
-  selected,
   onChange,
+  defaultValue,
   ...props
 }: SelectProps): React.JSX.Element {
   const helpTexts = buildHelpText(helpText, errors)
   const [showOptionsList, setShowOptionsList] = useState(false)
-  const [selectedOption, setSelectedOption] = useState<Option>({
-    id: selected?.id || '',
-    label: selected?.label || '',
-  })
+  const defaultOption =
+    options.find((option) => option.id === defaultValue) || EMPTY_OPTION
+  const [selectedOption, setSelectedOption] = useState<Option>(defaultOption)
 
-  const cssClasses = classNames('selected-option', className, {
+  const cssClasses = classNames('selected-option', {
     open: showOptionsList,
     filled: selectedOption.id,
     disabled: disabled,
@@ -65,10 +66,6 @@ export function Select({
     if (onChange !== undefined) onChange(option.id)
   }
 
-  function handleSelectIcon() {
-    return showOptionsList ? 'AngleUp' : 'AngleDown'
-  }
-
   function handleBlur(event: React.FocusEvent<HTMLDivElement>) {
     const isAComponentElement = event.relatedTarget
     if (!isAComponentElement) {
@@ -77,7 +74,7 @@ export function Select({
   }
 
   return (
-    <div className={`select-group ${variant}`}>
+    <div className={classNames('select-group', variant, className)}>
       {!hideLabel && <span className="select-label">{label}</span>}
       <div className="select-container" onBlur={handleBlur}>
         <div
@@ -89,7 +86,7 @@ export function Select({
           role="alert"
         >
           <span>{selectedOption.label || placeholder}</span>
-          <Icon name={handleSelectIcon()} />
+          <Icon name={showOptionsList ? 'AngleUp' : 'AngleDown'} />
         </div>
         {showOptionsList && (
           <ul className="select-options" role="listbox">

package/src/stories/Changelog.mdx

@@ -4,6 +4,13 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.22.0
+
+* Added FloatingButton component to Storybook
+
+BREAKING CHANGES
+
+* Replece selected prop by defaultValue in Select component
 
 ## 0.21.5
 * Update open state in Collapsible component

package/src/stories/Select.stories.ts

@@ -34,7 +34,7 @@ const meta = {
     options: {
       description: 'Array of values to be displayed on the select list',
     },
-    selected: {
+    defaultValue: {
       description: 'Value to be displayed as selected',
     },
     errors: {
@@ -68,6 +68,21 @@ export const Primary: Story = {
       { id: '1', label: 'Nintendo Switch' },
       { id: '2', label: 'PlayStation 5' },
       { id: '3', label: 'Xbox Series S/X' },
+      { id: '4', label: 'PC' },
+      { id: '5', label: 'Mobile' },
+      { id: '6', label: 'PlayStation 4' },
+      { id: '7', label: 'Xbox One' },
+      { id: '8', label: 'PlayStation 3' },
+      { id: '9', label: 'Xbox 360' },
+      { id: '10', label: 'PlayStation 2' },
+      { id: '11', label: 'Xbox' },
+      { id: '12', label: 'PlayStation' },
+      { id: '13', label: 'Nintendo 64' },
+      { id: '14', label: 'Super Nintendo' },
+      { id: '15', label: 'Sega Genesis' },
+      { id: '16', label: 'Sega Saturn' },
+      { id: '17', label: 'Sega Dreamcast' },
+      { id: '18', label: 'Atari 2600' },
     ],
     id: 'select-videogames',
     onChange: (optionId) => console.log('onChange optionId:', optionId),
@@ -89,7 +104,7 @@ export const PrimaryWithSelectedOptions: Story = {
       { id: '2', label: 'PlayStation 5' },
       { id: '3', label: 'Xbox Series S/X' },
     ],
-    selected: { id: '2', label: 'PlayStation 5' },
+    defaultValue: '2',
     id: 'select-videogames',
   },
   parameters: figmaPrimaryDesign,