agroptima-design-system 0.29.2-beta.1 → 0.29.2-beta.2

package/package.json

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

package/src/atoms/Button/Button.scss

@@ -1,20 +1,13 @@
 @use '../../settings/color_alias';
 @use '../../settings/typography/content' as typography;
 @use '../../settings/config';
+@use '../../settings/mixins';
 
 @mixin button-style($main-color, $secondary-color, $hover-color) {
+  @include mixins.icon-color($secondary-color);
   background: $main-color;
   color: $secondary-color;
 
-  > .icon {
-    > svg {
-      fill: $secondary-color;
-      path {
-        fill: $secondary-color;
-      }
-    }
-  }
-
   &:not(:disabled):hover,
   &:not(:disabled):active {
     background: $hover-color;
@@ -39,10 +32,6 @@
     margin-top: 2px;
     width: config.$icon-size-3x;
     height: config.$icon-size-3x;
-    > svg {
-      width: 100%;
-      height: 100%;
-    }
   }
 
   &.primary {

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -11,7 +11,6 @@ import {
 import { translations } from './translations'
 
 export type Variant = 'primary'
-export type DateType = 'single' | 'range' | 'multiple'
 
 type DivPropsWithoutOnSelect = Omit<
   React.ComponentPropsWithoutRef<'div'>,
@@ -32,7 +31,6 @@ export interface DateRangePickerProps extends DivPropsWithoutOnSelect {
   onSelect: (dateRange: DateRange | undefined) => void
   selected?: DateRange
   lng: keyof typeof availableLocales
-  type: DateType
 }
 
 export function DateRangePicker({
@@ -41,7 +39,6 @@ export function DateRangePicker({
   onSelect = () => {},
   selected: preselected,
   lng,
-  type,
 }: DateRangePickerProps): React.JSX.Element {
   const manageFooterText = (): string => {
     const hasDatesFilter = selected && selected.from && selected.to
@@ -95,7 +92,6 @@ export function DateRangePicker({
         locale={availableLocales[lng]}
         mode="range"
         min={1}
-        max={type === 'single' ? 1 : undefined}
         selected={selected}
         onSelect={(dateRange) => selectDate(dateRange)}
         footer={footer}

package/src/atoms/Select.scss

@@ -2,6 +2,10 @@
 @use '../settings/typography/form' as typography;
 @use '../settings/config';
 @use '../settings/depth';
+@use '../settings/mixins';
+
+$selected-option-padding: config.$space-2x config.$space-3x;
+$selected-option-height: config.$space-10x;
 
 .select-group {
   display: flex;
@@ -34,15 +38,7 @@
       border: 1px solid color_alias.$neutral-color-600;
       background: color_alias.$neutral-white;
       @include typography.select-text;
-
-      > .icon {
-        > svg {
-          fill: color_alias.$primary-color-600;
-          path {
-            fill: color_alias.$primary-color-600;
-          }
-        }
-      }
+      @include mixins.icon-color(color_alias.$primary-color-600);
 
       &.filled {
         @include typography.select-option-text;
@@ -61,15 +57,7 @@
         border: 1px solid color_alias.$neutral-color-400;
         background: color_alias.$neutral-color-50;
         color: color_alias.$neutral-color-400;
-
-        > .icon {
-          > svg {
-            fill: color_alias.$neutral-color-400;
-            path {
-              fill: color_alias.$neutral-color-400;
-            }
-          }
-        }
+        @include mixins.icon-color(color_alias.$neutral-color-400);
       }
     }
 
@@ -117,6 +105,7 @@
   }
 
   .selected-option {
+    min-height: $selected-option-height;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -128,7 +117,7 @@
       height: config.$icon-size-3x;
     }
   }
-  
+
   .select-options {
     max-height: 256px;
     overflow-y: auto;
@@ -141,7 +130,7 @@
     width: 100%;
 
     .search {
-      margin: config.$space-2x config.$space-3x;
+      margin: $selected-option-padding;
     }
 
     ul {
@@ -149,13 +138,13 @@
       margin: 0;
       padding: 0;
     }
-    
+
     .option {
       display: flex;
       align-items: center;
       cursor: default;
       list-style-type: none;
-      padding: config.$space-2x config.$space-3x;
+      padding: $selected-option-padding;
 
       > .icon {
         width: config.$icon-size-4x;
@@ -163,5 +152,13 @@
         margin-right: config.$space-1x;
       }
     }
-  }  
+  }
+}
+
+.select-loader {
+  position: absolute;
+  padding: $selected-option-padding;
+  min-height: $selected-option-height;
+  display: flex;
+  align-items: center;
 }

package/src/atoms/Select.tsx

@@ -31,6 +31,7 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   required?: boolean
   isSearchable?: boolean
   searchLabel?: string
+  loading?: boolean
 }
 
 const EMPTY_OPTION = { id: '', label: '' }
@@ -51,6 +52,7 @@ export function Select({
   defaultValue,
   required = false,
   isSearchable = false,
+  loading = false,
   searchLabel = 'Search',
   ...props
 }: SelectProps): React.JSX.Element {
@@ -62,6 +64,7 @@ export function Select({
   const isEmpty = selectedOption.id === EMPTY_OPTION.id
   const selectRef = useRef(null)
   useOutsideClick(selectRef, close)
+  const displayedValue = loading ? '' : selectedOption.label || placeholder
 
   const cssClasses = classNames('selected-option', {
     open: isOpen,
@@ -98,6 +101,11 @@ export function Select({
       )}
 
       <div className="select-container" ref={selectRef}>
+        {loading && (
+          <div className="select-loader">
+            <Icon name="Loading" />
+          </div>
+        )}
         <div
           className={cssClasses}
           tabIndex={0}
@@ -106,7 +114,7 @@ export function Select({
           aria-live="assertive"
           role="alert"
         >
-          <span>{selectedOption.label || placeholder}</span>
+          <span>{displayedValue}</span>
           <Icon name={isOpen ? 'AngleUp' : 'AngleDown'} visible={isEmpty} />
           <IconButton
             icon="Close"
@@ -116,7 +124,7 @@ export function Select({
             visible={!isEmpty}
           />
         </div>
-        {isOpen && (
+        {isOpen && options.length > 0 && (
           <OptionList
             options={options}
             selectedOption={selectedOption}

package/src/stories/DatePicker.stories.ts

@@ -18,9 +18,6 @@ const meta = {
     selected: {
       description: 'Selected date or date range',
     },
-    type: {
-      description: 'Type of date picker',
-    },
     lng: {
       description: 'String with the locale to be used on the translations',
     },
@@ -42,7 +39,6 @@ export const Primary: Story = {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
     lng: 'en',
-    type: 'range',
   },
   parameters: figmaPrimaryDesign,
 }
@@ -53,7 +49,6 @@ export const WithDateRangeSelected: Story = {
     onSelect: (date) => console.log('onSelect date:', date),
     selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 15) },
     lng: 'en',
-    type: 'range',
   },
   parameters: figmaPrimaryDesign,
 }
@@ -64,7 +59,6 @@ export const WithSingleDaySelected: Story = {
     onSelect: (date) => console.log('onSelect date:', date),
     selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 2) },
     lng: 'en',
-    type: 'single',
   },
   parameters: figmaPrimaryDesign,
 }

package/tests/DateRangePicker.spec.tsx

@@ -8,7 +8,6 @@ describe('DateRangePicker', () => {
       <DateRangePicker
         selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
         onSelect={() => jest.fn()}
-        type="range"
         lng={'es'}
       />,
     )

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -1,81 +0,0 @@
-import 'react-day-picker/style.css'
-import './DateRangePicker.scss'
-import { useEffect, useState } from 'react'
-import { type DateRange, DayPicker, type Locale } from 'react-day-picker'
-import { enGB, es } from 'react-day-picker/locale'
-import { classNames } from '../../utils/classNames'
-import {
-  formatDatePickerFooterDate,
-  formatDatePickerParamsDate,
-} from '../../utils/dateHelpers'
-import { translations } from './translations'
-
-export type Variant = 'primary'
-
-export type DateType = 'single' | 'range' | 'multiple'
-
-type DivPropsWithoutOnSelect = Omit<
-  React.ComponentPropsWithoutRef<'div'>,
-  'onSelect'
->
-
-interface AvailableLocale {
-  [index: string]: Locale
-}
-
-const availableLocales: AvailableLocale = {
-  es: es,
-  en: enGB,
-}
-
-export interface DateSinglePickerProps extends DivPropsWithoutOnSelect {
-  variant?: Variant
-  onSelect: (date: Date | undefined) => void
-  selected?: Date
-  lng: keyof typeof availableLocales
-}
-
-export function DateSinglePicker({
-  onSelect = () => {},
-  selected: preselected,
-  lng,
-}: DateSinglePickerProps): React.JSX.Element {
-  const manageFooterText = (): string => {
-    return translations[lng].selectedDate.replace(
-      '${date}',
-      formatDatePickerFooterDate(singleSelected, lng as string),
-    )
-  }
-
-  const [singleSelected, setSingleSelected] = useState<Date | undefined>(
-    preselected,
-  )
-
-  const [footer, setFooter] = useState<string>(() => {
-    return manageFooterText()
-  })
-
-  useEffect(() => {
-    setSingleSelected(preselected)
-    setFooter(manageFooterText())
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preselected])
-
-  function selectDate(date: Date | undefined) {
-    setSingleSelected(date)
-    onSelect(date)
-  }
-
-  return (
-    <>
-      <DayPicker
-        locale={availableLocales[lng]}
-        mode="single"
-        selected={singleSelected}
-        onSelect={(date) => selectDate(date)}
-        footer={footer}
-        defaultMonth={singleSelected}
-      />
-    </>
-  )
-}