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

package/package.json

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

package/src/atoms/Button/Button.tsx

@@ -45,21 +45,20 @@ export function Button({
   disabled,
   variant = 'primary',
   loading = false,
+  className,
   ...props
 }: ButtonProps) {
-  if (loading) {
-    leftIcon = 'Loading'
-  }
-  const cssClasses = classNames(props.className, 'button', variant)
+  const leftIconName = loading ? 'Loading' : leftIcon
+  const cssClasses = classNames(className, 'button', variant)
 
   return (
     <BaseButton
       disabled={loading || disabled}
       aria-label={accessibilityLabel || label}
-      {...props}
       className={cssClasses}
+      {...props}
     >
-      {leftIcon && <Icon name={leftIcon} size="3" />}
+      {leftIconName && <Icon name={leftIconName} size="3" />}
       {label}
       {rightIcon && <Icon name={rightIcon} size="3" />}
     </BaseButton>

package/src/atoms/Button/FloatingButton.tsx

@@ -15,6 +15,7 @@ interface CustomProps {
   disabled?: boolean
   accessibilityLabel: string
   shape?: Shape
+  loading?: boolean
 }
 
 export type FloatingButtonProps = CustomProps & BaseButtonProps
@@ -25,23 +26,21 @@ export function FloatingButton({
   disabled,
   variant = 'primary',
   shape = 'rounded-square',
+  loading = false,
+  className,
   ...props
 }: FloatingButtonProps) {
-  const cssClasses = classNames(
-    'floating-button',
-    variant,
-    props.className,
-    shape,
-  )
+  const cssClasses = classNames('floating-button', variant, className, shape)
+  const iconName = loading ? 'Loading' : icon
 
   return (
     <BaseButton
-      disabled={disabled}
+      disabled={loading || disabled}
       aria-label={accessibilityLabel}
-      {...props}
       className={cssClasses}
+      {...props}
     >
-      <Icon name={icon} />
+      <Icon name={iconName} />
     </BaseButton>
   )
 }

package/src/atoms/Button/IconButton.tsx

@@ -12,6 +12,7 @@ interface CustomProps {
   variant?: Variant
   disabled?: boolean
   accessibilityLabel: string
+  loading?: boolean
   size?: IconSize
 }
 
@@ -22,17 +23,20 @@ export function IconButton({
   icon,
   disabled,
   variant = 'primary',
+  loading = false,
   size,
+  className,
   ...props
 }: IconButtonProps) {
+  const iconName = loading ? 'Loading' : icon
   return (
     <BaseButton
-      disabled={disabled}
+      disabled={loading || disabled}
       aria-label={accessibilityLabel}
+      className={classNames(className, 'icon-button', variant)}
       {...props}
-      className={classNames(props.className, 'icon-button', variant)}
     >
-      <Icon title={accessibilityLabel} name={icon} size={size} />
+      <Icon title={accessibilityLabel} name={iconName} size={size} />
     </BaseButton>
   )
 }

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,8 +31,6 @@ export interface DateRangePickerProps extends DivPropsWithoutOnSelect {
   onSelect: (dateRange: DateRange | undefined) => void
   selected?: DateRange
   lng: keyof typeof availableLocales
-  type: DateType
-  required?: boolean
 }
 
 export function DateRangePicker({
@@ -42,22 +39,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 (type === 'single') {
-      if (!hasDatesFilter) {
-        return translations[lng].pickDay
-      }
+    if (!hasDatesFilter) return translations[lng].pickDate
+
+    if (isExactDate) {
       return translations[lng].selectedDate.replace(
         '${date}',
         formatDatePickerFooterDate(selected.from, lng as string),
       )
     }
-    if (!hasDatesFilter) return translations[lng].pickDate
+
     return translations[lng].selectedRangeOfDates
       .replace(
         '${from}',
@@ -79,11 +76,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)
@@ -95,10 +92,8 @@ export function DateRangePicker({
         locale={availableLocales[lng]}
         mode="range"
         min={1}
-        max={type === 'single' ? 1 : undefined}
-        required={required}
         selected={selected}
-        onSelect={selectDate as (dateRange: DateRange | undefined) => void}
+        onSelect={(dateRange) => selectDate(dateRange)}
         footer={footer}
         defaultMonth={selected?.from}
       />

package/src/atoms/DatePicker/translations.ts

@@ -5,13 +5,11 @@ 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: {
-    picDate: 'Selecciona un día o un rango de fechas',
-    pickDay: 'Selecciona un día',
+    pickDate: 'Selecciona un día o un rango de fechas',
     selectedDate: 'Fecha seleccionada: ${date}',
     selectedRangeOfDates: 'Rango de fechas seleccionado: desde ${from} a ${to}',
   },

package/src/atoms/Select.tsx

@@ -1,4 +1,3 @@
-'use client'
 import './Select.scss'
 import React, { useRef, useState } from 'react'
 import { useOpen } from '../hooks/useOpen'
@@ -161,7 +160,6 @@ function OptionList({
   searchLabel,
 }: OptionListProps) {
   const { findItems, search } = useSearch(options, 'label')
-
   return (
     <div className="select-options">
       {isSearchable && (

package/src/stories/Button.stories.ts

@@ -24,6 +24,7 @@ const meta = {
     },
     loading: {
       description: 'Is the button in loading state?',
+      control: { type: 'boolean', default: false },
     },
     leftIcon: {
       description: 'Button left icon from a list of values',
@@ -39,7 +40,7 @@ const meta = {
     },
     visible: {
       description: 'Is the button visible?',
-      control: { type: 'boolean', default: true },
+      control: { type: 'boolean' },
     },
   },
 }

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.29.2
+
+* Add loading property to IconButton and FloatingButton components.
+
 ## 0.29.1
 
 * Update modal component to respect the scroll width.

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/src/stories/FloatingButton.stories.ts

@@ -23,6 +23,10 @@ const meta = {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',
     },
+    loading: {
+      description: 'Is the button in loading state?',
+      control: { type: 'boolean' },
+    },
   },
 }
 

package/src/stories/IconButton.stories.ts

@@ -27,6 +27,10 @@ const meta = {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',
     },
+    loading: {
+      description: 'Is the button in loading state?',
+      control: { type: 'boolean' },
+    },
   },
 }
 

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'}
       />,
     )