agroptima-design-system 0.29.2-beta.3 → 0.29.2-beta.4

package/package.json

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

package/src/atoms/Button/Button.scss

@@ -1,13 +1,20 @@
 @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;
@@ -32,6 +39,10 @@
     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,6 +11,7 @@ import {
 import { translations } from './translations'
 
 export type Variant = 'primary'
+export type DateType = 'single' | 'range' | 'multiple'
 
 type DivPropsWithoutOnSelect = Omit<
   React.ComponentPropsWithoutRef<'div'>,
@@ -31,6 +32,8 @@ export interface DateRangePickerProps extends DivPropsWithoutOnSelect {
   onSelect: (dateRange: DateRange | undefined) => void
   selected?: DateRange
   lng: keyof typeof availableLocales
+  type: DateType
+  required?: boolean
 }
 
 export function DateRangePicker({
@@ -39,22 +42,22 @@ export function DateRangePicker({
   onSelect = () => {},
   selected: preselected,
   lng,
+  type,
+  required = false,
 }: DateRangePickerProps): React.JSX.Element {
   const manageFooterText = (): string => {
     const hasDatesFilter = selected && selected.from && selected.to
-    const isExactDate =
-      formatDatePickerParamsDate(selected?.from) ===
-      formatDatePickerParamsDate(selected?.to)
 
-    if (!hasDatesFilter) return translations[lng].pickDate
-
-    if (isExactDate) {
+    if (type === 'single') {
+      if (!hasDatesFilter) {
+        return translations[lng].pickDay
+      }
       return translations[lng].selectedDate.replace(
         '${date}',
         formatDatePickerFooterDate(selected.from, lng as string),
       )
     }
-
+    if (!hasDatesFilter) return translations[lng].pickDate
     return translations[lng].selectedRangeOfDates
       .replace(
         '${from}',
@@ -76,11 +79,11 @@ export function DateRangePicker({
   }, [preselected])
 
   function selectDate(dateRange: DateRange | undefined) {
-    const isSingleDaySelection = dateRange && !dateRange.to
+    // const isSingleDaySelection = dateRange && !dateRange.to
 
-    if (isSingleDaySelection) {
-      dateRange.to = dateRange.from
-    }
+    // if (isSingleDaySelection) {
+    //   dateRange.to = dateRange.from
+    // }
 
     setSelected(dateRange)
     onSelect(dateRange)
@@ -92,8 +95,10 @@ export function DateRangePicker({
         locale={availableLocales[lng]}
         mode="range"
         min={1}
+        max={type === 'single' ? 1 : undefined}
+        required={required}
         selected={selected}
-        onSelect={(dateRange) => selectDate(dateRange)}
+        onSelect={selectDate as (dateRange: DateRange | undefined) => void}
         footer={footer}
         defaultMonth={selected?.from}
       />

package/src/atoms/DatePicker/translations.ts

@@ -5,11 +5,13 @@ interface Translation {
 export const translations: Translation = {
   en: {
     pickDate: 'Pick a day or a range of dates',
+    pickDay: 'Pick a day',
     selectedDate: 'Selected date: ${date}',
     selectedRangeOfDates: 'Selected dates range: from ${from} to ${to}',
   },
   es: {
-    pickDate: 'Selecciona un día o un rango de fechas',
+    picDate: 'Selecciona un día o un rango de fechas',
+    pickDay: 'Selecciona un día',
     selectedDate: 'Fecha seleccionada: ${date}',
     selectedRangeOfDates: 'Rango de fechas seleccionado: desde ${from} a ${to}',
   },

package/src/atoms/Select.scss

@@ -2,10 +2,6 @@
 @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;
@@ -38,7 +34,15 @@ $selected-option-height: config.$space-10x;
       border: 1px solid color_alias.$neutral-color-600;
       background: color_alias.$neutral-white;
       @include typography.select-text;
-      @include mixins.icon-color(color_alias.$primary-color-600);
+
+      > .icon {
+        > svg {
+          fill: color_alias.$primary-color-600;
+          path {
+            fill: color_alias.$primary-color-600;
+          }
+        }
+      }
 
       &.filled {
         @include typography.select-option-text;
@@ -57,7 +61,15 @@ $selected-option-height: config.$space-10x;
         border: 1px solid color_alias.$neutral-color-400;
         background: color_alias.$neutral-color-50;
         color: color_alias.$neutral-color-400;
-        @include mixins.icon-color(color_alias.$neutral-color-400);
+
+        > .icon {
+          > svg {
+            fill: color_alias.$neutral-color-400;
+            path {
+              fill: color_alias.$neutral-color-400;
+            }
+          }
+        }
       }
     }
 
@@ -105,7 +117,6 @@ $selected-option-height: config.$space-10x;
   }
 
   .selected-option {
-    min-height: $selected-option-height;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -117,7 +128,7 @@ $selected-option-height: config.$space-10x;
       height: config.$icon-size-3x;
     }
   }
-
+  
   .select-options {
     max-height: 256px;
     overflow-y: auto;
@@ -130,7 +141,7 @@ $selected-option-height: config.$space-10x;
     width: 100%;
 
     .search {
-      margin: $selected-option-padding;
+      margin: config.$space-2x config.$space-3x;
     }
 
     ul {
@@ -138,13 +149,13 @@ $selected-option-height: config.$space-10x;
       margin: 0;
       padding: 0;
     }
-
+    
     .option {
       display: flex;
       align-items: center;
       cursor: default;
       list-style-type: none;
-      padding: $selected-option-padding;
+      padding: config.$space-2x config.$space-3x;
 
       > .icon {
         width: config.$icon-size-4x;
@@ -152,13 +163,5 @@ $selected-option-height: config.$space-10x;
         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,7 +31,6 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   required?: boolean
   isSearchable?: boolean
   searchLabel?: string
-  loading?: boolean
 }
 
 const EMPTY_OPTION = { id: '', label: '' }
@@ -49,21 +48,20 @@ export function Select({
   accessibilityLabel,
   hideLabel = false,
   onChange = () => {},
+  defaultValue,
   required = false,
   isSearchable = false,
-  loading = false,
   searchLabel = 'Search',
   ...props
 }: SelectProps): React.JSX.Element {
   const helpTexts = buildHelpText(helpText, errors)
   const { isOpen, close, toggle } = useOpen()
   const defaultOption =
-    options.find((option) => option.id === props.defaultValue) || EMPTY_OPTION
+    options.find((option) => option.id === defaultValue) || EMPTY_OPTION
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption)
   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,
@@ -100,11 +98,6 @@ export function Select({
       )}
 
       <div className="select-container" ref={selectRef}>
-        {loading && (
-          <div className="select-loader">
-            <Icon name="Loading" />
-          </div>
-        )}
         <div
           className={cssClasses}
           tabIndex={0}
@@ -113,7 +106,7 @@ export function Select({
           aria-live="assertive"
           role="alert"
         >
-          <span>{displayedValue}</span>
+          <span>{selectedOption.label || placeholder}</span>
           <Icon name={isOpen ? 'AngleUp' : 'AngleDown'} visible={isEmpty} />
           <IconButton
             icon="Close"
@@ -123,7 +116,7 @@ export function Select({
             visible={!isEmpty}
           />
         </div>
-        {isOpen && options.length > 0 && (
+        {isOpen && (
           <OptionList
             options={options}
             selectedOption={selectedOption}

package/src/stories/DatePicker.stories.ts

@@ -18,6 +18,9 @@ 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',
     },
@@ -39,6 +42,7 @@ export const Primary: Story = {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
     lng: 'en',
+    type: 'range',
   },
   parameters: figmaPrimaryDesign,
 }
@@ -49,6 +53,7 @@ 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,
 }
@@ -59,6 +64,7 @@ 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,6 +8,7 @@ describe('DateRangePicker', () => {
       <DateRangePicker
         selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
         onSelect={() => jest.fn()}
+        type="range"
         lng={'es'}
       />,
     )